New page structure (#1377)

* - new page structure * - removed unecessary task changes * - handleClick -> onClick
2023-08-30 15:10:16 +02:00
parent 85155a634f
commit fa33506b96
14 changed files with 182 additions and 282 deletions
--- a/front/src/pages/companies/Companies.tsx
+++ b/front/src/pages/companies/Companies.tsx
@ -6,8 +6,13 @@ import { v4 } from 'uuid';
 import { CompanyTable } from '@/companies/table/components/CompanyTable';
 import { SEARCH_COMPANY_QUERY } from '@/search/graphql/queries/searchCompanyQuery';
 import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider';
+import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { IconBuildingSkyscraper } from '@/ui/icon';
-import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
+import { PageAddButton } from '@/ui/layout/components/PageAddButton';
+import { PageBody } from '@/ui/layout/components/PageBody';
+import { PageContainer } from '@/ui/layout/components/PageContainer';
+import { PageHeader } from '@/ui/layout/components/PageHeader';
+import { PageHotkeys } from '@/ui/layout/components/PageHotkeys';
 import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar';
 import { EntityTableContextMenu } from '@/ui/table/context-menu/components/EntityTableContextMenu';
 import { useUpsertEntityTableItem } from '@/ui/table/hooks/useUpsertEntityTableItem';
@ -66,22 +71,29 @@ export function Companies() {

  return (
    <SpreadsheetImportProvider>
-      <WithTopBarContainer
-        title="Companies"
-        icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
-        onAddButtonClick={handleAddButtonClick}
-      >
-        <RecoilScope
-          scopeId="companies"
-          SpecificContext={TableRecoilScopeContext}
+      <PageContainer>
+        <PageHeader
+          title="Companies"
+          icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
        >
-          <StyledTableContainer>
-            <CompanyTable />
-          </StyledTableContainer>
-          <EntityTableActionBar />
-          <EntityTableContextMenu />
-        </RecoilScope>
-      </WithTopBarContainer>
+          <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
+            <PageHotkeys onAddButtonClick={handleAddButtonClick} />
+            <PageAddButton onClick={handleAddButtonClick} />
+          </RecoilScope>
+        </PageHeader>
+        <PageBody>
+          <RecoilScope
+            scopeId="companies"
+            SpecificContext={TableRecoilScopeContext}
+          >
+            <StyledTableContainer>
+              <CompanyTable />
+            </StyledTableContainer>
+            <EntityTableActionBar />
+            <EntityTableContextMenu />
+          </RecoilScope>
+        </PageBody>
+      </PageContainer>
    </SpreadsheetImportProvider>
  );
 }
--- a/front/src/pages/companies/CompaniesMockMode.tsx
+++ b/front/src/pages/companies/CompaniesMockMode.tsx
@ -3,7 +3,9 @@ import styled from '@emotion/styled';

 import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
 import { IconBuildingSkyscraper } from '@/ui/icon';
-import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
+import { PageBody } from '@/ui/layout/components/PageBody';
+import { PageContainer } from '@/ui/layout/components/PageContainer';
+import { PageHeader } from '@/ui/layout/components/PageHeader';
 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';

@ -16,17 +18,18 @@ export function CompaniesMockMode() {
  const theme = useTheme();

  return (
-    <>
-      <WithTopBarContainer
+    <PageContainer>
+      <PageHeader
        title="Companies"
        icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
-      >
+      />
+      <PageBody>
        <RecoilScope SpecificContext={TableRecoilScopeContext}>
          <StyledTableContainer>
            <CompanyTableMockMode />
          </StyledTableContainer>
        </RecoilScope>
-      </WithTopBarContainer>
-    </>
+      </PageBody>
+    </PageContainer>
  );
 }
--- a/front/src/pages/companies/CompanyShow.tsx
+++ b/front/src/pages/companies/CompanyShow.tsx
@ -5,13 +5,17 @@ import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargeta
 import { CompanyTeam } from '@/companies/components/CompanyTeam';
 import { useCompanyQuery } from '@/companies/hooks/useCompanyQuery';
 import { useFavorites } from '@/favorites/hooks/useFavorites';
+import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField';
 import { EditableFieldDefinitionContext } from '@/ui/editable-field/contexts/EditableFieldDefinitionContext';
 import { EditableFieldEntityIdContext } from '@/ui/editable-field/contexts/EditableFieldEntityIdContext';
 import { EditableFieldMutationContext } from '@/ui/editable-field/contexts/EditableFieldMutationContext';
 import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
 import { IconBuildingSkyscraper } from '@/ui/icon';
-import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
+import { PageBody } from '@/ui/layout/components/PageBody';
+import { PageContainer } from '@/ui/layout/components/PageContainer';
+import { PageFavoriteButton } from '@/ui/layout/components/PageFavoriteButton';
+import { PageHeader } from '@/ui/layout/components/PageHeader';
 import { ShowPageAddButton } from '@/ui/layout/show-page/components/ShowPageAddButton';
 import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer';
 import { ShowPageRightContainer } from '@/ui/layout/show-page/components/ShowPageRightContainer';
@ -46,24 +50,28 @@ export function CompanyShow() {
  }

  return (
-    <>
+    <PageContainer>
      <PageTitle title={company.name || 'No Name'} />
-      <WithTopBarContainer
+      <PageHeader
        title={company.name ?? ''}
        hasBackButton
-        isFavorite={isFavorite}
        icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
-        onFavoriteButtonClick={handleFavoriteButtonClick}
-        extraButtons={[
+      >
+        <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
+          <PageFavoriteButton
+            isFavorite={isFavorite}
+            onClick={handleFavoriteButtonClick}
+          />
          <ShowPageAddButton
            key="add"
            entity={{
              id: company.id,
              type: ActivityTargetableEntityType.Company,
            }}
-          />,
-        ]}
-      >
+          />
+        </RecoilScope>
+      </PageHeader>
+      <PageBody>
        <RecoilScope SpecificContext={ShowPageRecoilScopeContext}>
          <ShowPageContainer>
            <ShowPageLeftContainer>
@ -110,7 +118,7 @@ export function CompanyShow() {
            />
          </ShowPageContainer>
        </RecoilScope>
-      </WithTopBarContainer>
-    </>
+      </PageBody>
+    </PageContainer>
  );
 }
--- a/front/src/pages/people/People.tsx
+++ b/front/src/pages/people/People.tsx
@ -4,8 +4,13 @@ import { v4 } from 'uuid';

 import { PeopleTable } from '@/people/table/components/PeopleTable';
 import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider';
+import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { IconUser } from '@/ui/icon';
-import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
+import { PageAddButton } from '@/ui/layout/components/PageAddButton';
+import { PageBody } from '@/ui/layout/components/PageBody';
+import { PageContainer } from '@/ui/layout/components/PageContainer';
+import { PageHeader } from '@/ui/layout/components/PageHeader';
+import { PageHotkeys } from '@/ui/layout/components/PageHotkeys';
 import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar';
 import { EntityTableContextMenu } from '@/ui/table/context-menu/components/EntityTableContextMenu';
 import { useUpsertEntityTableItem } from '@/ui/table/hooks/useUpsertEntityTableItem';
@ -58,19 +63,29 @@ export function People() {

  return (
    <SpreadsheetImportProvider>
-      <RecoilScope scopeId="people" SpecificContext={TableRecoilScopeContext}>
-        <WithTopBarContainer
+      <PageContainer>
+        <PageHeader
          title="People"
-          icon={<IconUser size={theme.icon.size.sm} />}
-          onAddButtonClick={handleAddButtonClick}
+          icon={<IconUser size={theme.icon.size.md} />}
        >
-          <StyledTableContainer>
-            <PeopleTable />
-          </StyledTableContainer>
-          <EntityTableActionBar />
-          <EntityTableContextMenu />
-        </WithTopBarContainer>
-      </RecoilScope>
+          <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
+            <PageHotkeys onAddButtonClick={handleAddButtonClick} />
+            <PageAddButton onClick={handleAddButtonClick} />
+          </RecoilScope>
+        </PageHeader>
+        <PageBody>
+          <RecoilScope
+            scopeId="people"
+            SpecificContext={TableRecoilScopeContext}
+          >
+            <StyledTableContainer>
+              <PeopleTable />
+            </StyledTableContainer>
+            <EntityTableActionBar />
+            <EntityTableContextMenu />
+          </RecoilScope>
+        </PageBody>
+      </PageContainer>
    </SpreadsheetImportProvider>
  );
 }
--- a/front/src/pages/people/PersonShow.tsx
+++ b/front/src/pages/people/PersonShow.tsx
@ -6,13 +6,17 @@ import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargeta
 import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { GET_PERSON } from '@/people/graphql/queries/getPerson';
 import { usePersonQuery } from '@/people/hooks/usePersonQuery';
+import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField';
 import { EditableFieldDefinitionContext } from '@/ui/editable-field/contexts/EditableFieldDefinitionContext';
 import { EditableFieldEntityIdContext } from '@/ui/editable-field/contexts/EditableFieldEntityIdContext';
 import { EditableFieldMutationContext } from '@/ui/editable-field/contexts/EditableFieldMutationContext';
 import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
 import { IconUser } from '@/ui/icon';
-import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
+import { PageBody } from '@/ui/layout/components/PageBody';
+import { PageContainer } from '@/ui/layout/components/PageContainer';
+import { PageFavoriteButton } from '@/ui/layout/components/PageFavoriteButton';
+import { PageHeader } from '@/ui/layout/components/PageHeader';
 import { ShowPageAddButton } from '@/ui/layout/show-page/components/ShowPageAddButton';
 import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer';
 import { ShowPageRightContainer } from '@/ui/layout/show-page/components/ShowPageRightContainer';
@ -64,24 +68,28 @@ export function PersonShow() {
  }

  return (
-    <>
+    <PageContainer>
      <PageTitle title={person.displayName || 'No Name'} />
-      <WithTopBarContainer
+      <PageHeader
        title={person.firstName ?? ''}
        icon={<IconUser size={theme.icon.size.md} />}
        hasBackButton
-        isFavorite={isFavorite}
-        onFavoriteButtonClick={handleFavoriteButtonClick}
-        extraButtons={[
+      >
+        <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
+          <PageFavoriteButton
+            isFavorite={isFavorite}
+            onClick={handleFavoriteButtonClick}
+          />
          <ShowPageAddButton
            key="add"
            entity={{
              id: person.id,
              type: ActivityTargetableEntityType.Person,
            }}
-          />,
-        ]}
-      >
+          />
+        </RecoilScope>
+      </PageHeader>
+      <PageBody>
        <RecoilScope SpecificContext={ShowPageRecoilScopeContext}>
          <ShowPageContainer>
            <ShowPageLeftContainer>
@ -130,7 +138,7 @@ export function PersonShow() {
            />
          </ShowPageContainer>
        </RecoilScope>
-      </WithTopBarContainer>
-    </>
+      </PageBody>
+    </PageContainer>
  );
 }
--- a/front/src/pages/tasks/Tasks.tsx
+++ b/front/src/pages/tasks/Tasks.tsx
@ -4,10 +4,14 @@ import styled from '@emotion/styled';
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
 import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
+import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { FilterDropdownButton } from '@/ui/filter-n-sort/components/FilterDropdownButton';
 import { FiltersHotkeyScope } from '@/ui/filter-n-sort/types/FiltersHotkeyScope';
 import { IconArchive, IconCheck, IconCheckbox } from '@/ui/icon/index';
-import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
+import { PageAddButton } from '@/ui/layout/components/PageAddButton';
+import { PageBody } from '@/ui/layout/components/PageBody';
+import { PageContainer } from '@/ui/layout/components/PageContainer';
+import { PageHeader } from '@/ui/layout/components/PageHeader';
 import { TabList } from '@/ui/tab/components/TabList';
 import { TopBar } from '@/ui/top-bar/TopBar';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
@ -45,30 +49,38 @@ export function Tasks() {
  ];

  return (
-    <WithTopBarContainer
-      title="Tasks"
-      onAddButtonClick={() => openCreateActivity(ActivityType.Task)}
-      icon={<IconCheckbox size={theme.icon.size.md} />}
-    >
-      <StyledTasksContainer>
-        <RecoilScope SpecificContext={TasksRecoilScopeContext}>
-          <TopBar
-            leftComponent={
-              <StyledTabListContainer>
-                <TabList context={TasksRecoilScopeContext} tabs={TASK_TABS} />
-              </StyledTabListContainer>
-            }
-            rightComponent={
-              <FilterDropdownButton
-                key="tasks-filter-dropdown-button"
-                context={TasksRecoilScopeContext}
-                HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
-              />
-            }
+    <PageContainer>
+      <PageHeader
+        title="Tasks"
+        icon={<IconCheckbox size={theme.icon.size.md} />}
+      >
+        <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
+          <PageAddButton
+            onClick={() => openCreateActivity(ActivityType.Task)}
          />
-          <TaskGroups />
        </RecoilScope>
-      </StyledTasksContainer>
-    </WithTopBarContainer>
+      </PageHeader>
+      <PageBody>
+        <StyledTasksContainer>
+          <RecoilScope SpecificContext={TasksRecoilScopeContext}>
+            <TopBar
+              leftComponent={
+                <StyledTabListContainer>
+                  <TabList context={TasksRecoilScopeContext} tabs={TASK_TABS} />
+                </StyledTabListContainer>
+              }
+              rightComponent={
+                <FilterDropdownButton
+                  key="tasks-filter-dropdown-button"
+                  context={TasksRecoilScopeContext}
+                  HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
+                />
+              }
+            />
+            <TaskGroups />
+          </RecoilScope>
+        </StyledTasksContainer>
+      </PageBody>
+    </PageContainer>
  );
 }