admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add settings page (#273)

Browse Source 
* Add settings page

* Add 'soon' pill and logout

* Refactor components and layout

* Begin improving mobile display

* Add stories and refactor
This commit is contained in:
Félix Malfait
2023-06-13 17:10:57 +02:00
committed by GitHub
parent c20fd458ae
commit b9c41a1dcd
28 changed files with 683 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
front/src/pages/companies/Companies.tsx
View File

@ -23,6 +23,7 @@ import { EntityTableActionBar } from '@/ui/components/table/action-bar/EntityTab
import { EntityTable } from '@/ui/components/table/EntityTable';
import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
import { BoolExpType } from '@/utils/interfaces/generic.interface';
import { AppPage } from '~/AppPage';
import { CompanyOrderByWithRelationInput as Companies_Order_By } from '~/generated/graphql';
import { TableActionBarButtonCreateCommentThreadCompany } from './table/TableActionBarButtonCreateCommentThreadCompany';
@ -74,29 +75,31 @@ export function Companies() {
const companiesColumns = useCompaniesColumns();
return (
<WithTopBarContainer
title="Companies"
icon={<TbBuilding size={16} />}
onAddButtonClick={handleAddButtonClick}
>
<>
<StyledCompaniesContainer>
<EntityTable
data={companies}
columns={companiesColumns}
viewName="All Companies"
viewIcon={<FaList />}
availableSorts={availableSorts}
availableFilters={availableFilters}
onSortsUpdate={updateSorts}
onFiltersUpdate={updateFilters}
/>
</StyledCompaniesContainer>
<EntityTableActionBar>
<TableActionBarButtonCreateCommentThreadCompany />
<TableActionBarButtonDeleteCompanies />
</EntityTableActionBar>
</>
</WithTopBarContainer>
<AppPage>
<WithTopBarContainer
title="Companies"
icon={<TbBuilding size={16} />}
onAddButtonClick={handleAddButtonClick}
>
<>
<StyledCompaniesContainer>
<EntityTable
data={companies}
columns={companiesColumns}
viewName="All Companies"
viewIcon={<FaList />}
availableSorts={availableSorts}
availableFilters={availableFilters}
onSortsUpdate={updateSorts}
onFiltersUpdate={updateFilters}
/>
</StyledCompaniesContainer>
<EntityTableActionBar>
<TableActionBarButtonCreateCommentThreadCompany />
<TableActionBarButtonDeleteCompanies />
</EntityTableActionBar>
</>
</WithTopBarContainer>
</AppPage>
);
}

9
front/src/pages/opportunities/Opportunities.tsx
View File

@ -1,6 +1,7 @@
import { FaBullseye } from 'react-icons/fa';
import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
import { AppPage } from '~/AppPage';
import {
initialBoard,
@ -10,8 +11,10 @@ import { Board } from '../../modules/opportunities/components/Board';
export function Opportunities() {
return (
<WithTopBarContainer title="Opportunities" icon={<FaBullseye />}>
<Board initialBoard={initialBoard} items={items} />
</WithTopBarContainer>
<AppPage>
<WithTopBarContainer title="Opportunities" icon={<FaBullseye />}>
<Board initialBoard={initialBoard} items={items} />
</WithTopBarContainer>
</AppPage>
);
}

51
front/src/pages/people/People.tsx
View File

@ -20,6 +20,7 @@ import { EntityTableActionBar } from '@/ui/components/table/action-bar/EntityTab
import { EntityTable } from '@/ui/components/table/EntityTable';
import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
import { BoolExpType } from '@/utils/interfaces/generic.interface';
import { AppPage } from '~/AppPage';
import { TableActionBarButtonCreateCommentThreadPeople } from './table/TableActionBarButtonCreateCommentThreadPeople';
import { TableActionBarButtonDeletePeople } from './table/TableActionBarButtonDeletePeople';
@ -72,29 +73,31 @@ export function People() {
const peopleColumns = usePeopleColumns();
return (
<WithTopBarContainer
title="People"
icon={<TbUser size={16} />}
onAddButtonClick={handleAddButtonClick}
>
<>
<StyledPeopleContainer>
<EntityTable
data={people}
columns={peopleColumns}
viewName="All People"
viewIcon={<FaList />}
availableSorts={availableSorts}
availableFilters={availableFilters}
onSortsUpdate={updateSorts}
onFiltersUpdate={updateFilters}
/>
</StyledPeopleContainer>
<EntityTableActionBar>
<TableActionBarButtonCreateCommentThreadPeople />
<TableActionBarButtonDeletePeople />
</EntityTableActionBar>
</>
</WithTopBarContainer>
<AppPage>
<WithTopBarContainer
title="People"
icon={<TbUser size={16} />}
onAddButtonClick={handleAddButtonClick}
>
<>
<StyledPeopleContainer>
<EntityTable
data={people}
columns={peopleColumns}
viewName="All People"
viewIcon={<FaList />}
availableSorts={availableSorts}
availableFilters={availableFilters}
onSortsUpdate={updateSorts}
onFiltersUpdate={updateFilters}
/>
</StyledPeopleContainer>
<EntityTableActionBar>
<TableActionBarButtonCreateCommentThreadPeople />
<TableActionBarButtonDeletePeople />
</EntityTableActionBar>
</>
</WithTopBarContainer>
</AppPage>
);
}

24
front/src/pages/settings/SettingsProfile.tsx Normal file
View File

@ -0,0 +1,24 @@
import { useRecoilValue } from 'recoil';
import { currentUserState } from '@/auth/states/currentUserState';
import { SettingsPage } from '@/settings/components/SettingsPage';
import { TopTitle } from '@/ui/layout/top-bar/TopTitle';
export function SettingsProfile() {
const currentUser = useRecoilValue(currentUserState);
return (
<SettingsPage>
<>
<TopTitle title="Profile" />
<div>
<h5>Name</h5>
<span>{currentUser?.displayName} </span>
</div>
<div>
<h5>Email</h5>
<span>{currentUser?.email} </span>
</div>
</>
</SettingsPage>
);
}

23
front/src/pages/settings/__stories__/settings.stories.tsx Normal file
View File

@ -0,0 +1,23 @@
import type { Meta, StoryObj } from '@storybook/react';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { SettingsProfile } from '../SettingsProfile';
import { render } from './shared';
const meta: Meta<typeof SettingsProfile> = {
title: 'Pages/SettingsProfile',
component: SettingsProfile,
};
export default meta;
export type Story = StoryObj<typeof SettingsProfile>;
export const Default: Story = {
render,
parameters: {
msw: graphqlMocks,
},
};

22
front/src/pages/settings/__stories__/shared.tsx Normal file
View File

@ -0,0 +1,22 @@
import { MemoryRouter } from 'react-router-dom';
import { ApolloProvider } from '@apollo/client';
import { RecoilRoot } from 'recoil';
import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
import { mockedClient } from '~/testing/mockedClient';
import { SettingsProfile } from '../SettingsProfile';
export function render() {
return (
<RecoilRoot>
<ApolloProvider client={mockedClient}>
<MemoryRouter>
<FullHeightStorybookLayout>
<SettingsProfile />
</FullHeightStorybookLayout>
</MemoryRouter>
</ApolloProvider>
</RecoilRoot>
);
}