feat: soft delete front-end wip

magrinj · magrinj · commit 58f94b031438 · 2024-08-12T17:52:54.000+02:00
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/types/Filter.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/types/Filter.ts
@@ -4,6 +4,7 @@ import { FilterDefinition } from './FilterDefinition';
 
 export type Filter = {
   id: string;
+  variant?: 'default' | 'trash';
   fieldMetadataId: string;
   value: string;
   displayValue: string;
diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleTrashColumnFilter.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleTrashColumnFilter.ts
@@ -0,0 +1,67 @@
+import { useCallback } from 'react';
+import { v4 } from 'uuid';
+
+import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { getFilterTypeFromFieldType } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
+import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
+import { useCombinedViewFilters } from '@/views/hooks/useCombinedViewFilters';
+import { isDefined } from '~/utils/isDefined';
+import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
+
+type UseHandleToggleTrashColumnFilterProps = {
+  objectNameSingular: string;
+  viewBarId: string;
+};
+
+export const useHandleToggleTrashColumnFilter = ({
+  viewBarId,
+  objectNameSingular,
+}: UseHandleToggleTrashColumnFilterProps) => {
+  const { objectMetadataItem } = useObjectMetadataItem({
+    objectNameSingular,
+  });
+
+  const { columnDefinitions } =
+    useColumnDefinitionsFromFieldMetadata(objectMetadataItem);
+
+  const { upsertCombinedViewFilter } = useCombinedViewFilters(viewBarId);
+
+  const handleToggleTrashColumnFilter = useCallback(() => {
+    const trashFieldMetadata = objectMetadataItem.fields.find(
+      (field) => field.name === 'deletedAt',
+    );
+
+    if (!isDefined(trashFieldMetadata)) return;
+
+    const correspondingColumnDefinition = columnDefinitions.find(
+      (columnDefinition) =>
+        columnDefinition.fieldMetadataId === trashFieldMetadata.id,
+    );
+
+    if (!isDefined(correspondingColumnDefinition)) return;
+
+    const filterType = getFilterTypeFromFieldType(
+      correspondingColumnDefinition?.type,
+    );
+
+    const newFilter: Filter = {
+      id: v4(),
+      variant: 'trash',
+      fieldMetadataId: trashFieldMetadata.id,
+      operand: ViewFilterOperand.IsNotEmpty,
+      displayValue: '',
+      definition: {
+        label: 'Trash',
+        iconName: 'IconTrash',
+        fieldMetadataId: trashFieldMetadata.id,
+        type: filterType,
+      },
+      value: '',
+    };
+
+    upsertCombinedViewFilter(newFilter);
+  }, [columnDefinitions, objectMetadataItem.fields, upsertCombinedViewFilter]);
+
+  return handleToggleTrashColumnFilter;
+};
diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx
@@ -8,6 +8,7 @@ import {
   IconFileImport,
   IconSettings,
   IconTag,
+  IconTrash,
 } from 'twenty-ui';
 
 import { useObjectNamePluralFromSingular } from '@/object-metadata/hooks/useObjectNamePluralFromSingular';
@@ -37,6 +38,8 @@ import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { ViewType } from '@/views/types/ViewType';
 import { useLocation } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
+import { useCombinedViewFilters } from '@/views/hooks/useCombinedViewFilters';
+import { useHandleToggleTrashColumnFilter } from '@/object-record/record-index/hooks/useHandleToggleTrashColumnFilter';
 
 type RecordIndexOptionsMenu = 'fields' | 'hiddenFields';
 
@@ -59,6 +62,8 @@ export const RecordIndexOptionsDropdownContent = ({
     RecordIndexOptionsMenu | undefined
   >(undefined);
 
+  const { upsertCombinedViewFilter } = useCombinedViewFilters();
+
   const resetMenu = () => setCurrentMenu(undefined);
 
   const handleSelectMenu = (option: RecordIndexOptionsMenu) => {
@@ -88,6 +93,11 @@ export const RecordIndexOptionsDropdownContent = ({
     hiddenTableColumns,
   } = useRecordIndexOptionsForTable(recordIndexId);
 
+  const handleToggleTrashColumnFilter = useHandleToggleTrashColumnFilter({
+    objectNameSingular,
+    viewBarId: recordIndexId,
+  });
+
   const {
     visibleBoardFields,
     hiddenBoardFields,
@@ -153,6 +163,11 @@ export const RecordIndexOptionsDropdownContent = ({
             LeftIcon={IconFileExport}
             text={displayedExportProgress(progress)}
           />
+          <MenuItem
+            onClick={handleToggleTrashColumnFilter}
+            LeftIcon={IconTrash}
+            text="Trash"
+          />
         </DropdownMenuItemsContainer>
       )}
       {currentMenu === 'fields' && (
diff --git a/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx b/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx
@@ -2,12 +2,37 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconComponent, IconX } from 'twenty-ui';
 
-const StyledChip = styled.div`
+const StyledChip = styled.div<{ variant: SortOrFitlerChipVariant }>`
   align-items: center;
-  background-color: ${({ theme }) => theme.accent.quaternary};
-  border: 1px solid ${({ theme }) => theme.accent.tertiary};
+  background-color: ${({ theme, variant }) => {
+    switch (variant) {
+      case 'delete':
+        return theme.background.danger;
+      case 'default':
+      default:
+        return theme.accent.quaternary;
+    }
+  }};
+  border: 1px solid
+    ${({ theme, variant }) => {
+      switch (variant) {
+        case 'delete':
+          return theme.border.color.danger;
+        case 'default':
+        default:
+          return theme.accent.tertiary;
+      }
+    }};
   border-radius: 4px;
-  color: ${({ theme }) => theme.color.blue};
+  color: ${({ theme, variant }) => {
+    switch (variant) {
+      case 'delete':
+        return theme.color.red;
+      case 'default':
+      default:
+        return theme.color.blue;
+    }
+  }};
   cursor: pointer;
   display: flex;
   flex-direction: row;
@@ -24,7 +49,7 @@ const StyledIcon = styled.div`
   margin-right: ${({ theme }) => theme.spacing(1)};
 `;
 
-const StyledDelete = styled.div`
+const StyledDelete = styled.div<{ variant: SortOrFitlerChipVariant }>`
   align-items: center;
   cursor: pointer;
   display: flex;
@@ -33,7 +58,15 @@ const StyledDelete = styled.div`
   margin-top: 1px;
   user-select: none;
   &:hover {
-    background-color: ${({ theme }) => theme.accent.secondary};
+    background-color: ${({ theme, variant }) => {
+      switch (variant) {
+        case 'delete':
+          return theme.color.red20;
+        case 'default':
+        default:
+          return theme.accent.secondary;
+      }
+    }};
     border-radius: ${({ theme }) => theme.border.radius.sm};
   }
 `;
@@ -42,9 +75,12 @@ const StyledLabelKey = styled.div`
   font-weight: ${({ theme }) => theme.font.weight.medium};
 `;
 
+type SortOrFitlerChipVariant = 'default' | 'delete';
+
 type SortOrFilterChipProps = {
   labelKey?: string;
   labelValue: string;
+  variant?: SortOrFitlerChipVariant;
   Icon?: IconComponent;
   onRemove: () => void;
   onClick?: () => void;
@@ -54,6 +90,7 @@ type SortOrFilterChipProps = {
 export const SortOrFilterChip = ({
   labelKey,
   labelValue,
+  variant = 'default',
   Icon,
   onRemove,
   testId,
@@ -67,7 +104,7 @@ export const SortOrFilterChip = ({
   };
 
   return (
-    <StyledChip onClick={onClick}>
+    <StyledChip onClick={onClick} variant={variant}>
       {Icon && (
         <StyledIcon>
           <Icon size={theme.icon.size.sm} />
@@ -76,6 +113,7 @@ export const SortOrFilterChip = ({
       {labelKey && <StyledLabelKey>{labelKey}</StyledLabelKey>}
       {labelValue}
       <StyledDelete
+        variant={variant}
         onClick={handleDeleteClick}
         data-testid={'remove-icon-' + testId}
       >
diff --git a/packages/twenty-front/src/modules/views/components/VariantFilterChip.tsx b/packages/twenty-front/src/modules/views/components/VariantFilterChip.tsx
@@ -0,0 +1,42 @@
+import { useIcons } from 'twenty-ui';
+
+import { SortOrFilterChip } from '@/views/components/SortOrFilterChip';
+import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
+import { useCombinedViewFilters } from '@/views/hooks/useCombinedViewFilters';
+import { useMemo } from 'react';
+
+type VariantFilterChipProps = {
+  viewFilter: Filter;
+};
+
+export const VariantFilterChip = ({ viewFilter }: VariantFilterChipProps) => {
+  const { removeCombinedViewFilter } = useCombinedViewFilters();
+
+  const { getIcon } = useIcons();
+
+  const handleRemoveClick = () => {
+    // FixMe: Why it's not working ?
+    removeCombinedViewFilter(viewFilter.fieldMetadataId);
+  };
+
+  const variant = useMemo(() => {
+    switch (viewFilter.variant) {
+      case 'trash':
+        return 'delete';
+      case 'default':
+      default:
+        return 'default';
+    }
+  }, [viewFilter.variant]);
+
+  return (
+    <SortOrFilterChip
+      key={viewFilter.fieldMetadataId}
+      testId={viewFilter.fieldMetadataId}
+      variant={variant}
+      labelValue={viewFilter.definition.label}
+      Icon={getIcon(viewFilter.definition.iconName)}
+      onRemove={handleRemoveClick}
+    />
+  );
+};
diff --git a/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx b/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, useMemo } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
@@ -14,6 +14,8 @@ import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { useResetCurrentView } from '@/views/hooks/useResetCurrentView';
 import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters';
 import { mapViewSortsToSorts } from '@/views/utils/mapViewSortsToSorts';
+import { VariantFilterChip } from './VariantFilterChip';
+import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
 
 export type ViewBarDetailsProps = {
   hasFilterButton?: boolean;
@@ -118,6 +120,29 @@ export const ViewBarDetails = ({
   const { resetCurrentView } = useResetCurrentView();
   const canResetView = canPersistView && !hasFiltersQueryParams;
 
+  const { otherViewFilters, defaultViewFilters } = useMemo(() => {
+    if (!currentViewWithCombinedFiltersAndSorts) {
+      return {
+        otherViewFilters: [],
+        defaultViewFilters: [],
+      };
+    }
+
+    const otherViewFilters =
+      currentViewWithCombinedFiltersAndSorts.viewFilters.filter(
+        (viewFilter) => viewFilter.variant && viewFilter.variant !== 'default',
+      );
+    const defaultViewFilters =
+      currentViewWithCombinedFiltersAndSorts.viewFilters.filter(
+        (viewFilter) => !viewFilter.variant || viewFilter.variant === 'default',
+      );
+
+    return {
+      otherViewFilters,
+      defaultViewFilters,
+    };
+  }, [currentViewWithCombinedFiltersAndSorts]);
+
   const handleCancelClick = () => {
     resetCurrentView();
   };
@@ -132,24 +157,44 @@ export const ViewBarDetails = ({
     return null;
   }
 
+  console.log(
+    'currentViewWithCombinedFiltersAndSorts?.viewFilters: ',
+    currentViewWithCombinedFiltersAndSorts?.viewFilters,
+  );
+
   return (
     <StyledBar>
       <StyledFilterContainer>
         <StyledChipcontainer>
+          {otherViewFilters.map((viewFilter) => (
+            <VariantFilterChip
+              key={viewFilter.fieldMetadataId}
+              // Why do we have two types, Filter and ViewFilter?
+              // Why key defition is already present in the Filter type and added on the fly here with mapViewFiltersToFilters ?
+              // FixMe: Ugly hack to make it work
+              viewFilter={viewFilter as unknown as Filter}
+            />
+          ))}
+          {!!otherViewFilters.length &&
+            !!currentViewWithCombinedFiltersAndSorts?.viewSorts?.length && (
+              <StyledSeperatorContainer>
+                <StyledSeperator />
+              </StyledSeperatorContainer>
+            )}
           {mapViewSortsToSorts(
             currentViewWithCombinedFiltersAndSorts?.viewSorts ?? [],
             availableSortDefinitions,
           ).map((sort) => (
             <EditableSortChip key={sort.fieldMetadataId} viewSort={sort} />
           ))}
           {!!currentViewWithCombinedFiltersAndSorts?.viewSorts?.length &&
-            !!currentViewWithCombinedFiltersAndSorts?.viewFilters?.length && (
+            !!defaultViewFilters.length && (
               <StyledSeperatorContainer>
                 <StyledSeperator />
               </StyledSeperatorContainer>
             )}
           {mapViewFiltersToFilters(
-            currentViewWithCombinedFiltersAndSorts?.viewFilters ?? [],
+            defaultViewFilters,
             availableFilterDefinitions,
           ).map((viewFilter) => (
             <ObjectFilterDropdownScope
diff --git a/packages/twenty-front/src/modules/views/types/ViewFilter.ts b/packages/twenty-front/src/modules/views/types/ViewFilter.ts
@@ -3,6 +3,7 @@ import { ViewFilterOperand } from './ViewFilterOperand';
 export type ViewFilter = {
   __typename: 'ViewFilter';
   id: string;
+  variant?: 'default' | 'trash';
   fieldMetadataId: string;
   operand: ViewFilterOperand;
   value: string;
