Merge commit 'cd3a32e55503dc1e6b9873d812dd401bf7d51045' into context-menu-vertical

2023-08-14 22:00:49 +02:00
parent cca68d72f4 cd3a32e555
commit 39bbe02c86
179 changed files with 1971 additions and 3230 deletions
--- a/front/src/pages/companies/Companies.tsx
+++ b/front/src/pages/companies/Companies.tsx
@ -2,7 +2,6 @@ import { useEffect } from 'react';
 import { getOperationName } from '@apollo/client/utilities';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useRecoilState } from 'recoil';
 import { v4 } from 'uuid';

 import { useOpenActionBar } from '@/companies/hooks/useOpenActionBar';
@ -13,8 +12,9 @@ import { IconBuildingSkyscraper } from '@/ui/icon';
 import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
 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';
+import { useUpsertTableRowId } from '@/ui/table/hooks/useUpsertTableRowId';
 import { TableContext } from '@/ui/table/states/TableContext';
-import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { useInsertOneCompanyMutation } from '~/generated/graphql';

@ -25,7 +25,8 @@ const StyledTableContainer = styled.div`

 export function Companies() {
  const [insertCompany] = useInsertOneCompanyMutation();
-  const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
+  const upsertEntityTableItem = useUpsertEntityTableItem();
+  const upsertTableRowIds = useUpsertTableRowId();

  async function handleAddButtonClick() {
    const newCompanyId: string = v4();
@ -46,12 +47,17 @@ export function Companies() {
          name: '',
          domainName: '',
          address: '',
-          createdAt: '',
+          createdAt: new Date().toISOString(),
+          accountOwner: null,
+          linkedinUrl: '',
+          employees: null,
        },
      },
      update: (cache, { data }) => {
-        data?.createOneCompany.id &&
-          setTableRowIds([data?.createOneCompany.id, ...tableRowIds]);
+        if (data?.createOneCompany) {
+          upsertTableRowIds(data?.createOneCompany.id);
+          upsertEntityTableItem(data?.createOneCompany);
+        }
      },
      refetchQueries: [getOperationName(SEARCH_COMPANY_QUERY) ?? ''],
    });
@ -68,20 +74,18 @@ export function Companies() {
  }, [setContextMenu, setActionBar]);

  return (
-    <>
-      <WithTopBarContainer
-        title="Companies"
-        icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
-        onAddButtonClick={handleAddButtonClick}
-      >
-        <RecoilScope SpecificContext={TableContext}>
-          <StyledTableContainer>
-            <CompanyTable />
-          </StyledTableContainer>
-          <EntityTableActionBar></EntityTableActionBar>
-          <EntityTableContextMenu></EntityTableContextMenu>
-        </RecoilScope>
-      </WithTopBarContainer>
-    </>
+    <WithTopBarContainer
+      title="Companies"
+      icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
+      onAddButtonClick={handleAddButtonClick}
+    >
+      <RecoilScope SpecificContext={TableContext}>
+        <StyledTableContainer>
+          <CompanyTable />
+        </StyledTableContainer>
+        <EntityTableActionBar></EntityTableActionBar>
+        <EntityTableContextMenu></EntityTableContextMenu>
+      </RecoilScope>
+    </WithTopBarContainer>
  );
 }
--- a/front/src/pages/companies/CompanyShow.tsx
+++ b/front/src/pages/companies/CompanyShow.tsx
@ -2,26 +2,28 @@ import { useParams } from 'react-router-dom';
 import { useTheme } from '@emotion/react';

 import { Timeline } from '@/activities/timeline/components/Timeline';
+import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
 import { CompanyTeam } from '@/companies/components/CompanyTeam';
-import { CompanyAccountOwnerEditableField } from '@/companies/editable-field/components/CompanyAccountOwnerEditableField';
-import { CompanyAddressEditableField } from '@/companies/editable-field/components/CompanyAddressEditableField';
-import { CompanyCreatedAtEditableField } from '@/companies/editable-field/components/CompanyCreatedAtEditableField';
-import { CompanyDomainNameEditableField } from '@/companies/editable-field/components/CompanyDomainNameEditableField';
-import { CompanyEmployeesEditableField } from '@/companies/editable-field/components/CompanyEmployeesEditableField';
 import { useCompanyQuery } from '@/companies/queries';
 import { useFavorites } from '@/favorites/hooks/useFavorites';
+import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField';
 import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
+import { EditableFieldDefinitionContext } from '@/ui/editable-field/states/EditableFieldDefinitionContext';
+import { EditableFieldEntityIdContext } from '@/ui/editable-field/states/EditableFieldEntityIdContext';
+import { EditableFieldMutationContext } from '@/ui/editable-field/states/EditableFieldMutationContext';
 import { IconBuildingSkyscraper } from '@/ui/icon';
 import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
 import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer';
 import { ShowPageRightContainer } from '@/ui/layout/show-page/components/ShowPageRightContainer';
 import { ShowPageSummaryCard } from '@/ui/layout/show-page/components/ShowPageSummaryCard';
-import { CommentableType } from '~/generated/graphql';
+import { useUpdateOneCompanyMutation } from '~/generated/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';

 import { CompanyNameEditableField } from '../../modules/companies/editable-field/components/CompanyNameEditableField';
 import { ShowPageContainer } from '../../modules/ui/layout/components/ShowPageContainer';

+import { companyShowFieldDefinition } from './constants/companyShowFieldDefinition';
+
 export function CompanyShow() {
  const companyId = useParams().companyId ?? '';
  const { insertCompanyFavorite, deleteCompanyFavorite } = useFavorites();
@ -29,11 +31,12 @@ export function CompanyShow() {
  const theme = useTheme();
  const { data } = useCompanyQuery(companyId);
  const company = data?.findUniqueCompany;
-  const isFavorite =
-    company?.Favorite && company?.Favorite?.length > 0 ? true : false;

  if (!company) return <></>;

+  const isFavorite =
+    company.Favorite && company.Favorite?.length > 0 ? true : false;
+
  async function handleFavoriteButtonClick() {
    if (isFavorite) deleteCompanyFavorite(companyId);
    else insertCompanyFavorite(companyId);
@ -41,7 +44,7 @@ export function CompanyShow() {

  return (
    <WithTopBarContainer
-      title={company?.name ?? ''}
+      title={company.name ?? ''}
      hasBackButton
      isFavorite={isFavorite}
      icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
@ -50,26 +53,40 @@ export function CompanyShow() {
      <ShowPageContainer>
        <ShowPageLeftContainer>
          <ShowPageSummaryCard
-            id={company?.id}
-            logoOrAvatar={getLogoUrlFromDomainName(company?.domainName ?? '')}
-            title={company?.name ?? 'No name'}
-            date={company?.createdAt ?? ''}
+            id={company.id}
+            logoOrAvatar={getLogoUrlFromDomainName(company.domainName ?? '')}
+            title={company.name ?? 'No name'}
+            date={company.createdAt ?? ''}
            renderTitleEditComponent={() => (
              <CompanyNameEditableField company={company} />
            )}
          />
          <PropertyBox extraPadding={true}>
-            <CompanyDomainNameEditableField company={company} />
-            <CompanyAccountOwnerEditableField company={company} />
-            <CompanyEmployeesEditableField company={company} />
-            <CompanyAddressEditableField company={company} />
-            <CompanyCreatedAtEditableField company={company} />
+            <EditableFieldMutationContext.Provider
+              value={useUpdateOneCompanyMutation}
+            >
+              <EditableFieldEntityIdContext.Provider value={company.id}>
+                {companyShowFieldDefinition.map((fieldDefinition) => {
+                  return (
+                    <EditableFieldDefinitionContext.Provider
+                      value={fieldDefinition}
+                      key={fieldDefinition.id}
+                    >
+                      <GenericEditableField />
+                    </EditableFieldDefinitionContext.Provider>
+                  );
+                })}
+              </EditableFieldEntityIdContext.Provider>
+            </EditableFieldMutationContext.Provider>
          </PropertyBox>
          <CompanyTeam company={company}></CompanyTeam>
        </ShowPageLeftContainer>
        <ShowPageRightContainer>
          <Timeline
-            entity={{ id: company?.id ?? '', type: CommentableType.Company }}
+            entity={{
+              id: company.id,
+              type: ActivityTargetableEntityType.Company,
+            }}
          />
        </ShowPageRightContainer>
      </ShowPageContainer>
--- a/front/src/pages/companies/stories/Companies.filterBy.stories.tsx
+++ b/front/src/pages/companies/stories/Companies.filterBy.stories.tsx
@ -3,6 +3,7 @@ import type { Meta } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 import assert from 'assert';

+import { AppPath } from '@/types/AppPath';
 import {
  PageDecorator,
  type PageDecoratorArgs,
@ -18,7 +19,7 @@ const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Companies/FilterBy',
  component: Companies,
  decorators: [PageDecorator],
-  args: { currentPath: '/companies' },
+  args: { routePath: AppPath.CompaniesPage },
  parameters: {
    docs: { story: 'inline', iframeHeight: '500px' },
    msw: graphqlMocks,
--- a/front/src/pages/companies/stories/Companies.sortBy.stories.tsx
+++ b/front/src/pages/companies/stories/Companies.sortBy.stories.tsx
@ -2,6 +2,7 @@ import { expect } from '@storybook/jest';
 import type { Meta } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';

+import { AppPath } from '@/types/AppPath';
 import {
  PageDecorator,
  type PageDecoratorArgs,
@ -16,7 +17,7 @@ const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Companies/SortBy',
  component: Companies,
  decorators: [PageDecorator],
-  args: { currentPath: '/companies' },
+  args: { routePath: AppPath.CompaniesPage },
  parameters: {
    docs: { story: 'inline', iframeHeight: '500px' },
    msw: graphqlMocks,
--- a/front/src/pages/companies/stories/Companies.stories.tsx
+++ b/front/src/pages/companies/stories/Companies.stories.tsx
@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';

+import { AppPath } from '@/types/AppPath';
 import {
  PageDecorator,
  type PageDecoratorArgs,
@ -12,7 +13,7 @@ const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Companies',
  component: Companies,
  decorators: [PageDecorator],
-  args: { currentPath: '/companies' },
+  args: { routePath: AppPath.CompaniesPage },
  parameters: {
    docs: { story: 'inline', iframeHeight: '500px' },
    msw: graphqlMocks,
--- a/front/src/pages/companies/stories/Company.stories.tsx
+++ b/front/src/pages/companies/stories/Company.stories.tsx
@ -7,6 +7,7 @@ import { graphql } from 'msw';
 import { GET_ACTIVITIES_BY_TARGETS, GET_ACTIVITY } from '@/activities/queries';
 import { CREATE_ACTIVITY_WITH_COMMENT } from '@/activities/queries/create';
 import { GET_COMPANY, UPDATE_ONE_COMPANY } from '@/companies/queries';
+import { AppPath } from '@/types/AppPath';
 import {
  PageDecorator,
  type PageDecoratorArgs,
@ -21,7 +22,10 @@ const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Companies/Company',
  component: CompanyShow,
  decorators: [PageDecorator],
-  args: { currentPath: '/companies/89bb825c-171e-4bcc-9cf7-43448d6fb278' },
+  args: {
+    routePath: AppPath.CompanyShowPage,
+    routeParams: { ':companyId': mockedCompaniesData[0].id },
+  },
  parameters: {
    docs: { story: 'inline', iframeHeight: '500px' },
    msw: [
--- a/front/src/pages/companies/constants/companyShowFieldDefinition.tsx
+++ b/front/src/pages/companies/constants/companyShowFieldDefinition.tsx
@ -0,0 +1,69 @@
+import { FieldDefinition } from '@/ui/editable-field/types/FieldDefinition';
+import {
+  FieldDateMetadata,
+  FieldMetadata,
+  FieldNumberMetadata,
+  FieldRelationMetadata,
+  FieldTextMetadata,
+  FieldURLMetadata,
+} from '@/ui/editable-field/types/FieldMetadata';
+import {
+  IconCalendar,
+  IconLink,
+  IconMap,
+  IconUserCircle,
+  IconUsers,
+} from '@/ui/icon';
+import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+
+export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
+  {
+    id: 'domainName',
+    label: 'Domain name',
+    icon: <IconLink />,
+    type: 'url',
+    metadata: {
+      fieldName: 'domainName',
+      placeHolder: 'URL',
+    },
+  } satisfies FieldDefinition<FieldURLMetadata>,
+  {
+    id: 'accountOwner',
+    label: 'Account owner',
+    icon: <IconUserCircle />,
+    type: 'relation',
+    metadata: {
+      fieldName: 'accountOwner',
+      relationType: Entity.User,
+    },
+  } satisfies FieldDefinition<FieldRelationMetadata>,
+  {
+    id: 'employees',
+    label: 'Employees',
+    icon: <IconUsers />,
+    type: 'number',
+    metadata: {
+      fieldName: 'employees',
+      placeHolder: 'Employees',
+    },
+  } satisfies FieldDefinition<FieldNumberMetadata>,
+  {
+    id: 'address',
+    label: 'Address',
+    icon: <IconMap />,
+    type: 'text',
+    metadata: {
+      fieldName: 'address',
+      placeHolder: 'Address',
+    },
+  } satisfies FieldDefinition<FieldTextMetadata>,
+  {
+    id: 'createdAt',
+    label: 'Created at',
+    icon: <IconCalendar />,
+    type: 'date',
+    metadata: {
+      fieldName: 'createdAt',
+    },
+  } satisfies FieldDefinition<FieldDateMetadata>,
+];