Added table record mock mode with companies (#2715)

* wip * Removed console.log * Refactor mocks into multiple files --------- Co-authored-by: Charles Bochet <charles@twenty.com>
twentyhq · Nov 25, 2023 · f0e20b0 · f0e20b0
1 parent ddc054b
commit f0e20b0
Show file tree

Hide file tree

Showing 12 changed files with 2,204 additions and 59 deletions.
diff --git a/front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx b/front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx
@@ -0,0 +1,44 @@
+import styled from '@emotion/styled';
+
+import { SignInBackgroundMockContainerEffect } from '@/sign-in-background-mock/components/SignInBackgroundMockContainerEffect';
+import { RecordTable } from '@/ui/object/record-table/components/RecordTable';
+import { TableOptionsDropdownId } from '@/ui/object/record-table/constants/TableOptionsDropdownId';
+import { TableOptionsDropdown } from '@/ui/object/record-table/options/components/TableOptionsDropdown';
+import { RecordTableScope } from '@/ui/object/record-table/scopes/RecordTableScope';
+import { ViewBar } from '@/views/components/ViewBar';
+import { ViewScope } from '@/views/scopes/ViewScope';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: auto;
+`;
+
+export const SignInBackgroundMockContainer = () => {
+  const tableScopeId = 'sign-in-background-mock-table';
+  const viewScopeId = 'sign-in-background-mock-view';
+
+  return (
+    <ViewScope
+      viewScopeId={viewScopeId}
+      onViewFieldsChange={() => {}}
+      onViewFiltersChange={() => {}}
+      onViewSortsChange={() => {}}
+    >
+      <StyledContainer>
+        <RecordTableScope
+          recordTableScopeId={tableScopeId}
+          onColumnsChange={() => {}}
+        >
+          <ViewBar
+            optionsDropdownButton={<TableOptionsDropdown />}
+            optionsDropdownScopeId={TableOptionsDropdownId}
+          />
+          <SignInBackgroundMockContainerEffect />
+          <RecordTable updateEntityMutation={() => {}} />
+        </RecordTableScope>
+      </StyledContainer>
+    </ViewScope>
+  );
+};
diff --git a/front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainerEffect.tsx b/front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainerEffect.tsx
@@ -0,0 +1,98 @@
+import { useEffect } from 'react';
+
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { useRecordTableContextMenuEntries } from '@/object-record/hooks/useRecordTableContextMenuEntries';
+import { filterAvailableTableColumns } from '@/object-record/utils/filterAvailableTableColumns';
+import { signInBackgroundMockCompanies } from '@/sign-in-background-mock/constants/signInBackgroundMockCompanies';
+import {
+  signInBackgroundMockColumnDefinitions,
+  signInBackgroundMockFilterDefinitions,
+  signInBackgroundMockSortDefinitions,
+} from '@/sign-in-background-mock/constants/signInBackgroundMockDefinitions';
+import { signInBackgroundMockViewFields } from '@/sign-in-background-mock/constants/signInBackgroundMockViewFields';
+import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
+import { useView } from '@/views/hooks/useView';
+import { ViewType } from '@/views/types/ViewType';
+import { mapViewFieldsToColumnDefinitions } from '@/views/utils/mapViewFieldsToColumnDefinitions';
+
+export const SignInBackgroundMockContainerEffect = () => {
+  const {
+    scopeId: objectNamePlural,
+    setAvailableTableColumns,
+    setOnEntityCountChange,
+    setRecordTableData,
+    setTableColumns,
+    setObjectMetadataConfig,
+  } = useRecordTable();
+
+  const { objectMetadataItem } = useObjectMetadataItem({
+    objectNamePlural,
+  });
+
+  const {
+    setAvailableSortDefinitions,
+    setAvailableFilterDefinitions,
+    setAvailableFieldDefinitions,
+    setViewType,
+    setViewObjectMetadataId,
+    setEntityCountInCurrentView,
+  } = useView();
+
+  useEffect(() => {
+    setViewObjectMetadataId?.('company-mock-object-metadata-id');
+    setViewType?.(ViewType.Table);
+
+    setAvailableSortDefinitions?.(signInBackgroundMockSortDefinitions);
+    setAvailableFilterDefinitions?.(signInBackgroundMockFilterDefinitions);
+    setAvailableFieldDefinitions?.(signInBackgroundMockColumnDefinitions);
+
+    const availableTableColumns = signInBackgroundMockColumnDefinitions.filter(
+      filterAvailableTableColumns,
+    );
+
+    setAvailableTableColumns(availableTableColumns);
+    setRecordTableData(signInBackgroundMockCompanies);
+
+    setTableColumns(
+      mapViewFieldsToColumnDefinitions(
+        signInBackgroundMockViewFields,
+        signInBackgroundMockColumnDefinitions,
+      ),
+    );
+  }, [
+    setViewObjectMetadataId,
+    setViewType,
+    setAvailableSortDefinitions,
+    setAvailableFilterDefinitions,
+    setAvailableFieldDefinitions,
+    objectMetadataItem,
+    setAvailableTableColumns,
+    setRecordTableData,
+    setTableColumns,
+  ]);
+
+  useEffect(() => {
+    setObjectMetadataConfig?.(mockIdentifier);
+  }, [setObjectMetadataConfig]);
+
+  const { setActionBarEntries, setContextMenuEntries } =
+    useRecordTableContextMenuEntries();
+
+  useEffect(() => {
+    setActionBarEntries?.();
+    setContextMenuEntries?.();
+  }, [setActionBarEntries, setContextMenuEntries]);
+
+  useEffect(() => {
+    setOnEntityCountChange(
+      () => (entityCount: number) => setEntityCountInCurrentView(entityCount),
+    );
+  }, [setEntityCountInCurrentView, setOnEntityCountChange]);
+
+  return <></>;
+};
+
+const mockIdentifier = {
+  basePathToShowPage: '/object/company/',
+  labelIdentifierFieldMetadataId: '20202020-6d30-4111-9f40-b4301906fd3c',
+};
diff --git a/front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx b/front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx
@@ -0,0 +1,35 @@
+import styled from '@emotion/styled';
+
+import { SignInBackgroundMockContainer } from '@/sign-in-background-mock/components/SignInBackgroundMockContainer';
+import { IconBuildingSkyscraper } from '@/ui/display/icon';
+import { PageAddButton } from '@/ui/layout/page/PageAddButton';
+import { PageBody } from '@/ui/layout/page/PageBody';
+import { PageContainer } from '@/ui/layout/page/PageContainer';
+import { PageHeader } from '@/ui/layout/page/PageHeader';
+import { PageHotkeysEffect } from '@/ui/layout/page/PageHotkeysEffect';
+import { RecordTableActionBar } from '@/ui/object/record-table/action-bar/components/RecordTableActionBar';
+import { RecordTableContextMenu } from '@/ui/object/record-table/context-menu/components/RecordTableContextMenu';
+
+const StyledTableContainer = styled.div`
+  display: flex;
+  height: 100%;
+  width: 100%;
+`;
+
+export const SignInBackgroundMockPage = () => {
+  return (
+    <PageContainer>
+      <PageHeader title="Objects" Icon={IconBuildingSkyscraper}>
+        <PageHotkeysEffect onAddButtonClick={() => {}} />
+        <PageAddButton onClick={() => {}} />
+      </PageHeader>
+      <PageBody>
+        <StyledTableContainer>
+          <SignInBackgroundMockContainer />
+        </StyledTableContainer>
+        <RecordTableActionBar />
+        <RecordTableContextMenu />
+      </PageBody>
+    </PageContainer>
+  );
+};