Yadciel/taskcafe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: unify popup content padding

Browse Source
This commit is contained in:
Jordan Knott 2020-07-16 22:31:33 -05:00
parent c35f63e668
commit 1222111bef
6 changed files with 207 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

341
frontend/src/Admin/index.tsx
View File

@ -3,11 +3,11 @@ import Admin from 'shared/components/Admin';
import Select from 'shared/components/Select';
import GlobalTopNavbar from 'App/TopNavbar';
import {
useUsersQuery,
useDeleteUserAccountMutation,
useCreateUserAccountMutation,
UsersDocument,
UsersQuery,
useUsersQuery,
useDeleteUserAccountMutation,
useCreateUserAccountMutation,
UsersDocument,
UsersQuery,
} from 'shared/generated/graphql';
import Input from 'shared/components/Input';
import styled from 'styled-components';
@ -33,29 +33,30 @@ const DeleteUserButton = styled(Button)`
`;
type DeleteUserPopupProps = {
onDeleteUser: () => void;
onDeleteUser: () => void;
};
const DeleteUserPopup: React.FC<DeleteUserPopupProps> = ({ onDeleteUser }) => {
return (
<DeleteUserWrapper>
<DeleteUserDescription>Deleting this user will remove all user related data.</DeleteUserDescription>
<DeleteUserButton onClick={() => onDeleteUser()} color="danger">
Delete user
return (
<DeleteUserWrapper>
<DeleteUserDescription>Deleting this user will remove all user related data.</DeleteUserDescription>
<DeleteUserButton onClick={() => onDeleteUser()} color="danger">
Delete user
</DeleteUserButton>
</DeleteUserWrapper>
);
</DeleteUserWrapper>
);
};
type CreateUserData = {
email: string;
username: string;
fullName: string;
initials: string;
password: string;
roleCode: string;
email: string;
username: string;
fullName: string;
initials: string;
password: string;
roleCode: string;
};
const CreateUserForm = styled.form`
display: flex;
flex-direction: column;
margin: 0 12px;
`;
const CreateUserButton = styled(Button)`
margin-top: 8px;
@ -73,167 +74,167 @@ const InputError = styled.span`
`;
type AddUserPopupProps = {
onAddUser: (user: CreateUserData) => void;
onAddUser: (user: CreateUserData) => void;
};
const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
const { register, handleSubmit, errors, setValue } = useForm<CreateUserData>();
const [role, setRole] = useState<string | null>(null);
register({ name: 'roleCode' }, { required: true });
const { register, handleSubmit, errors, setValue } = useForm<CreateUserData>();
const [role, setRole] = useState<string | null>(null);
register({ name: 'roleCode' }, { required: true });
const createUser = (data: CreateUserData) => {
onAddUser(data);
};
return (
<CreateUserForm onSubmit={handleSubmit(createUser)}>
<AddUserInput
floatingLabel
width="100%"
label="Full Name"
id="fullName"
name="fullName"
variant="alternate"
ref={register({ required: 'Full name is required' })}
/>
{errors.fullName && <InputError>{errors.fullName.message}</InputError>}
<AddUserInput
floatingLabel
width="100%"
label="Email"
id="email"
name="email"
variant="alternate"
ref={register({ required: 'Email is required' })}
/>
<Select
label="Role"
value={role}
options={[
{ label: 'Admin', value: 'admin' },
{ label: 'Member', value: 'member' },
]}
onChange={newRole => {
setRole(newRole);
setValue('roleCode', newRole.value);
}}
/>
{errors.email && <InputError>{errors.email.message}</InputError>}
<AddUserInput
floatingLabel
width="100%"
label="Username"
id="username"
name="username"
variant="alternate"
ref={register({ required: 'Username is required' })}
/>
{errors.username && <InputError>{errors.username.message}</InputError>}
<AddUserInput
floatingLabel
width="100%"
label="Initials"
id="initials"
name="initials"
variant="alternate"
ref={register({ required: 'Initials is required' })}
/>
{errors.initials && <InputError>{errors.initials.message}</InputError>}
<AddUserInput
floatingLabel
width="100%"
label="Password"
id="password"
name="password"
variant="alternate"
ref={register({ required: 'Password is required' })}
/>
{errors.password && <InputError>{errors.password.message}</InputError>}
<CreateUserButton type="submit">Create</CreateUserButton>
</CreateUserForm>
);
const createUser = (data: CreateUserData) => {
onAddUser(data);
};
return (
<CreateUserForm onSubmit={handleSubmit(createUser)}>
<AddUserInput
floatingLabel
width="100%"
label="Full Name"
id="fullName"
name="fullName"
variant="alternate"
ref={register({ required: 'Full name is required' })}
/>
{errors.fullName && <InputError>{errors.fullName.message}</InputError>}
<AddUserInput
floatingLabel
width="100%"
label="Email"
id="email"
name="email"
variant="alternate"
ref={register({ required: 'Email is required' })}
/>
<Select
label="Role"
value={role}
options={[
{ label: 'Admin', value: 'admin' },
{ label: 'Member', value: 'member' },
]}
onChange={newRole => {
setRole(newRole);
setValue('roleCode', newRole.value);
}}
/>
{errors.email && <InputError>{errors.email.message}</InputError>}
<AddUserInput
floatingLabel
width="100%"
label="Username"
id="username"
name="username"
variant="alternate"
ref={register({ required: 'Username is required' })}
/>
{errors.username && <InputError>{errors.username.message}</InputError>}
<AddUserInput
floatingLabel
width="100%"
label="Initials"
id="initials"
name="initials"
variant="alternate"
ref={register({ required: 'Initials is required' })}
/>
{errors.initials && <InputError>{errors.initials.message}</InputError>}
<AddUserInput
floatingLabel
width="100%"
label="Password"
id="password"
name="password"
variant="alternate"
ref={register({ required: 'Password is required' })}
/>
{errors.password && <InputError>{errors.password.message}</InputError>}
<CreateUserButton type="submit">Create</CreateUserButton>
</CreateUserForm>
);
};
const AdminRoute = () => {
useEffect(() => {
document.title = 'Citadel | Admin';
}, []);
const { loading, data } = useUsersQuery();
const { showPopup, hidePopup } = usePopup();
const [deleteUser] = useDeleteUserAccountMutation({
update: (client, response) => {
updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
produce(cache, draftCache => {
draftCache.users = cache.users.filter(u => u.id !== response.data.deleteUserAccount.userAccount.id);
}),
);
},
});
const [createUser] = useCreateUserAccountMutation({
update: (client, createData) => {
const cacheData: any = client.readQuery({
query: UsersDocument,
});
console.log(cacheData);
console.log(createData);
const newData = produce(cacheData, (draftState: any) => {
draftState.users = [...draftState.users, { ...createData.data.createUserAccount }];
});
useEffect(() => {
document.title = 'Citadel | Admin';
}, []);
const { loading, data } = useUsersQuery();
const { showPopup, hidePopup } = usePopup();
const [deleteUser] = useDeleteUserAccountMutation({
update: (client, response) => {
updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
produce(cache, draftCache => {
draftCache.users = cache.users.filter(u => u.id !== response.data.deleteUserAccount.userAccount.id);
}),
);
},
});
const [createUser] = useCreateUserAccountMutation({
update: (client, createData) => {
const cacheData: any = client.readQuery({
query: UsersDocument,
});
console.log(cacheData);
console.log(createData);
const newData = produce(cacheData, (draftState: any) => {
draftState.users = [...draftState.users, { ...createData.data.createUserAccount }];
});
client.writeQuery({
query: UsersDocument,
data: {
...newData,
},
});
client.writeQuery({
query: UsersDocument,
data: {
...newData,
},
});
if (loading) {
return <GlobalTopNavbar projectID={null} onSaveProjectName={() => { }} name={null} />;
}
if (data) {
return (
<>
<GlobalTopNavbar projectID={null} onSaveProjectName={() => { }} name={null} />
<Admin
initialTab={1}
users={data.users}
onInviteUser={() => { }}
onUpdateUserPassword={(user, password) => {
console.log(user)
console.log(password)
hidePopup()
}}
onDeleteUser={($target, userID) => {
showPopup(
$target,
<Popup tab={0} title="Delete user?" onClose={() => hidePopup()}>
<DeleteUserPopup
onDeleteUser={() => {
deleteUser({ variables: { userID } });
hidePopup();
}}
/>
</Popup>,
);
}}
onAddUser={$target => {
showPopup(
$target,
<Popup tab={0} title="Add member" onClose={() => hidePopup()}>
<AddUserPopup
onAddUser={user => {
createUser({ variables: { ...user } });
hidePopup();
}}
/>
</Popup>,
);
}}
});
},
});
if (loading) {
return <GlobalTopNavbar projectID={null} onSaveProjectName={() => {}} name={null} />;
}
if (data) {
return (
<>
<GlobalTopNavbar projectID={null} onSaveProjectName={() => {}} name={null} />
<Admin
initialTab={1}
users={data.users}
onInviteUser={() => {}}
onUpdateUserPassword={(user, password) => {
console.log(user);
console.log(password);
hidePopup();
}}
onDeleteUser={($target, userID) => {
showPopup(
$target,
<Popup tab={0} title="Delete user?" onClose={() => hidePopup()}>
<DeleteUserPopup
onDeleteUser={() => {
deleteUser({ variables: { userID } });
hidePopup();
}}
/>
</>
);
}
return <span>error</span>;
</Popup>,
);
}}
onAddUser={$target => {
showPopup(
$target,
<Popup tab={0} title="Add member" onClose={() => hidePopup()}>
<AddUserPopup
onAddUser={user => {
createUser({ variables: { ...user } });
hidePopup();
}}
/>
</Popup>,
);
}}
/>
</>
);
}
return <span>error</span>;
};
export default AdminRoute;

39
frontend/src/App/TopNavbar.tsx
View File

@ -1,9 +1,9 @@
import React, {useState, useContext, useEffect} from 'react';
import TopNavbar, {MenuItem} from 'shared/components/TopNavbar';
import React, { useState, useContext, useEffect } from 'react';
import TopNavbar, { MenuItem } from 'shared/components/TopNavbar';
import styled from 'styled-components/macro';
import DropdownMenu, {ProfileMenu} from 'shared/components/DropdownMenu';
import ProjectSettings, {DeleteConfirm, DELETE_INFO} from 'shared/components/ProjectSettings';
import {useHistory} from 'react-router';
import DropdownMenu, { ProfileMenu } from 'shared/components/DropdownMenu';
import ProjectSettings, { DeleteConfirm, DELETE_INFO } from 'shared/components/ProjectSettings';
import { useHistory } from 'react-router';
import UserIDContext from 'App/context';
import {
RoleCode,
@ -12,14 +12,15 @@ import {
useGetProjectsQuery,
GetProjectsDocument,
} from 'shared/generated/graphql';
import {usePopup, Popup} from 'shared/components/PopupMenu';
import {History} from 'history';
import { usePopup, Popup } from 'shared/components/PopupMenu';
import { History } from 'history';
import produce from 'immer';
import {Link} from 'react-router-dom';
import { Link } from 'react-router-dom';
const TeamContainer = styled.div`
display: flex;
flex-direction: column;
margin: 0 8px;
`;
const TeamTitle = styled.h3`
@ -45,7 +46,7 @@ const TeamProjectLink = styled(Link)`
user-select: none;
`;
const TeamProjectBackground = styled.div<{color: string}>`
const TeamProjectBackground = styled.div<{ color: string }>`
background-image: url(null);
background-color: ${props => props.color};
@ -68,7 +69,7 @@ const TeamProjectBackground = styled.div<{color: string}>`
}
`;
const TeamProjectAvatar = styled.div<{color: string}>`
const TeamProjectAvatar = styled.div<{ color: string }>`
background-image: url(null);
background-color: ${props => props.color};
@ -122,12 +123,12 @@ const TeamProjectContainer = styled.div`
const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
const ProjectFinder = () => {
const {loading, data} = useGetProjectsQuery();
const { loading, data } = useGetProjectsQuery();
if (loading) {
return <span>loading</span>;
}
if (data) {
const {projects, teams, organizations} = data;
const { projects, teams, organizations } = data;
const projectTeams = teams.map(team => {
return {
id: team.id,
@ -166,8 +167,8 @@ type ProjectPopupProps = {
projectID: string;
};
export const ProjectPopup: React.FC<ProjectPopupProps> = ({history, name, projectID}) => {
const {hidePopup, setTab} = usePopup();
export const ProjectPopup: React.FC<ProjectPopupProps> = ({ history, name, projectID }) => {
const { hidePopup, setTab } = usePopup();
const [deleteProject] = useDeleteProjectMutation({
update: (client, deleteData) => {
const cacheData: any = client.readQuery({
@ -206,7 +207,7 @@ export const ProjectPopup: React.FC<ProjectPopupProps> = ({history, name, projec
deletedItems={DELETE_INFO.DELETE_PROJECTS.deletedItems}
onConfirmDelete={() => {
if (projectID) {
deleteProject({variables: {projectID}});
deleteProject({ variables: { projectID } });
hidePopup();
history.push('/projects');
}
@ -249,16 +250,16 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
nameOnly,
}) => {
console.log(popupContent);
const {loading, data} = useMeQuery();
const {showPopup, hidePopup, setTab} = usePopup();
const { loading, data } = useMeQuery();
const { showPopup, hidePopup, setTab } = usePopup();
const history = useHistory();
const {userID, setUserID} = useContext(UserIDContext);
const { userID, setUserID } = useContext(UserIDContext);
const onLogout = () => {
fetch('/auth/logout', {
method: 'POST',
credentials: 'include',
}).then(async x => {
const {status} = x;
const { status } = x;
if (status === 200) {
history.replace('/login');
setUserID(null);

7
frontend/src/Teams/Members/index.tsx
View File

@ -18,13 +18,14 @@ import styled, { css } from 'styled-components/macro';
import { usePopup, Popup } from 'shared/components/PopupMenu';
import TaskAssignee from 'shared/components/TaskAssignee';
import Member from 'shared/components/Member';
import ControlledInput from 'shared/components/ControlledInput';
const MemberListWrapper = styled.div`
flex: 1 1;
`;
const SearchInput = styled(Input)`
margin: 0;
const SearchInput = styled(ControlledInput)`
margin: 0 12px;
`;
const UserMember = styled(Member)`
@ -37,7 +38,7 @@ const UserMember = styled(Member)`
`;
const TeamMemberList = styled.div`
margin: 8px 0;
margin: 8px 12px;
`;
type UserManagementPopupProps = {

4
frontend/src/shared/components/ListActions/Styles.ts
View File

@ -33,3 +33,7 @@ export const ListSeparator = styled.hr`
padding: 0;
width: 100%;
`;
export const InnerContent = styled.div`
margin: 0 12px;
`;

6
frontend/src/shared/components/ListActions/index.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { ListActionsWrapper, ListActionItemWrapper, ListActionItem, ListSeparator } from './Styles';
import { InnerContent, ListActionsWrapper, ListActionItemWrapper, ListActionItem, ListSeparator } from './Styles';
type Props = {
taskGroupID: string;
@ -8,7 +8,7 @@ type Props = {
};
const LabelManager: React.FC<Props> = ({ taskGroupID, onArchiveTaskGroup }) => {
return (
<>
<InnerContent>
<ListActionsWrapper>
<ListActionItemWrapper>
<ListActionItem>Add card...</ListActionItem>
@ -44,7 +44,7 @@ const LabelManager: React.FC<Props> = ({ taskGroupID, onArchiveTaskGroup }) => {
<ListActionItem>Archive This List</ListActionItem>
</ListActionItemWrapper>
</ListActionsWrapper>
</>
</InnerContent>
);
};
export default LabelManager;

10
frontend/src/shared/components/ProjectSettings/index.tsx
View File

@ -5,7 +5,7 @@ import Button from 'shared/components/Button';
export const ListActionsWrapper = styled.ul`
list-style-type: none;
margin: 0;
margin: 0 12px;
padding: 0;
`;
@ -40,7 +40,7 @@ export const ListSeparator = styled.hr`
type Props = {
onDeleteProject: () => void;
};
const ProjectSettings: React.FC<Props> = ({onDeleteProject}) => {
const ProjectSettings: React.FC<Props> = ({ onDeleteProject }) => {
return (
<>
<ListActionsWrapper>
@ -55,7 +55,7 @@ const ProjectSettings: React.FC<Props> = ({onDeleteProject}) => {
type TeamSettingsProps = {
onDeleteTeam: () => void;
};
export const TeamSettings: React.FC<TeamSettingsProps> = ({onDeleteTeam}) => {
export const TeamSettings: React.FC<TeamSettingsProps> = ({ onDeleteTeam }) => {
return (
<>
<ListActionsWrapper>
@ -109,7 +109,7 @@ export const DELETE_INFO = {
},
};
const DeleteConfirm: React.FC<DeleteConfirmProps> = ({description, deletedItems, onConfirmDelete}) => {
const DeleteConfirm: React.FC<DeleteConfirmProps> = ({ description, deletedItems, onConfirmDelete }) => {
return (
<ConfirmWrapper>
<ConfirmDescription>
@ -127,5 +127,5 @@ const DeleteConfirm: React.FC<DeleteConfirmProps> = ({description, deletedItems,
);
};
export {DeleteConfirm};
export { DeleteConfirm };
export default ProjectSettings;