feat: reorder kanban columns (#1699)

* kaban header options

* gql codegn

* moveColumn hook refactor

* BoardColumnContext addition

* saved board columns state

* db call hook update

* lint fix

* state change first db call second

* handleMoveTableColumn call

* codegen lint fix

* useMoveViewColumns hook

* useBoardColumns db call addition

* boardColumns state change from BoardHeader

---------

Co-authored-by: Charles Bochet <[email protected]>

Author: AdityaPimpalkar

front/src/generated/graphql.tsx

@@ -899,6 +899,177 @@ export type CompanyWhereUniqueInput = {
   id?: InputMaybe<Scalars['String']>;
 };
 
+export enum Currency {
+  Aed = 'AED',
+  Afn = 'AFN',
+  All = 'ALL',
+  Amd = 'AMD',
+  Ang = 'ANG',
+  Aoa = 'AOA',
+  Ars = 'ARS',
+  Aud = 'AUD',
+  Awg = 'AWG',
+  Azn = 'AZN',
+  Bam = 'BAM',
+  Bbd = 'BBD',
+  Bdt = 'BDT',
+  Bgn = 'BGN',
+  Bhd = 'BHD',
+  Bif = 'BIF',
+  Bmd = 'BMD',
+  Bnd = 'BND',
+  Bob = 'BOB',
+  Bov = 'BOV',
+  Brl = 'BRL',
+  Bsd = 'BSD',
+  Btn = 'BTN',
+  Bwp = 'BWP',
+  Byn = 'BYN',
+  Bzd = 'BZD',
+  Cad = 'CAD',
+  Cdf = 'CDF',
+  Chf = 'CHF',
+  Clf = 'CLF',
+  Clp = 'CLP',
+  Cny = 'CNY',
+  Cop = 'COP',
+  Cou = 'COU',
+  Crc = 'CRC',
+  Cuc = 'CUC',
+  Cup = 'CUP',
+  Cve = 'CVE',
+  Czk = 'CZK',
+  Djf = 'DJF',
+  Dkk = 'DKK',
+  Dop = 'DOP',
+  Dzd = 'DZD',
+  Egp = 'EGP',
+  Ern = 'ERN',
+  Etb = 'ETB',
+  Eur = 'EUR',
+  Fjd = 'FJD',
+  Fkp = 'FKP',
+  Gbp = 'GBP',
+  Gel = 'GEL',
+  Ghs = 'GHS',
+  Gip = 'GIP',
+  Gmd = 'GMD',
+  Gnf = 'GNF',
+  Gtq = 'GTQ',
+  Gyd = 'GYD',
+  Hkd = 'HKD',
+  Hnl = 'HNL',
+  Hrk = 'HRK',
+  Htg = 'HTG',
+  Huf = 'HUF',
+  Idr = 'IDR',
+  Ils = 'ILS',
+  Inr = 'INR',
+  Iqd = 'IQD',
+  Irr = 'IRR',
+  Isk = 'ISK',
+  Jmd = 'JMD',
+  Jod = 'JOD',
+  Jpy = 'JPY',
+  Kes = 'KES',
+  Kgs = 'KGS',
+  Khr = 'KHR',
+  Kmf = 'KMF',
+  Kpw = 'KPW',
+  Krw = 'KRW',
+  Kwd = 'KWD',
+  Kyd = 'KYD',
+  Kzt = 'KZT',
+  Lak = 'LAK',
+  Lbp = 'LBP',
+  Lkr = 'LKR',
+  Lrd = 'LRD',
+  Lsl = 'LSL',
+  Lyd = 'LYD',
+  Mad = 'MAD',
+  Mdl = 'MDL',
+  Mga = 'MGA',
+  Mkd = 'MKD',
+  Mmk = 'MMK',
+  Mnt = 'MNT',
+  Mop = 'MOP',
+  Mro = 'MRO',
+  Mru = 'MRU',
+  Mur = 'MUR',
+  Mvr = 'MVR',
+  Mwk = 'MWK',
+  Mxn = 'MXN',
+  Mxv = 'MXV',
+  Myr = 'MYR',
+  Mzn = 'MZN',
+  Nad = 'NAD',
+  Ngn = 'NGN',
+  Nio = 'NIO',
+  Nok = 'NOK',
+  Npr = 'NPR',
+  Nzd = 'NZD',
+  Omr = 'OMR',
+  Pab = 'PAB',
+  Pen = 'PEN',
+  Pgk = 'PGK',
+  Php = 'PHP',
+  Pkr = 'PKR',
+  Pln = 'PLN',
+  Pyg = 'PYG',
+  Qar = 'QAR',
+  Ron = 'RON',
+  Rsd = 'RSD',
+  Rub = 'RUB',
+  Rwf = 'RWF',
+  Sar = 'SAR',
+  Sbd = 'SBD',
+  Scr = 'SCR',
+  Sdd = 'SDD',
+  Sdg = 'SDG',
+  Sek = 'SEK',
+  Sgd = 'SGD',
+  Shp = 'SHP',
+  Sll = 'SLL',
+  Sos = 'SOS',
+  Srd = 'SRD',
+  Ssp = 'SSP',
+  Std = 'STD',
+  Stn = 'STN',
+  Svc = 'SVC',
+  Syp = 'SYP',
+  Szl = 'SZL',
+  Thb = 'THB',
+  Tjs = 'TJS',
+  Tmm = 'TMM',
+  Tmt = 'TMT',
+  Tnd = 'TND',
+  Top = 'TOP',
+  Try = 'TRY',
+  Ttd = 'TTD',
+  Twd = 'TWD',
+  Tzs = 'TZS',
+  Uah = 'UAH',
+  Ugx = 'UGX',
+  Usd = 'USD',
+  Uyu = 'UYU',
+  Uzs = 'UZS',
+  Vef = 'VEF',
+  Ves = 'VES',
+  Vnd = 'VND',
+  Vuv = 'VUV',
+  Wst = 'WST',
+  Xaf = 'XAF',
+  Xcd = 'XCD',
+  Xof = 'XOF',
+  Xpf = 'XPF',
+  Xsu = 'XSU',
+  Xua = 'XUA',
+  Yer = 'YER',
+  Zar = 'ZAR',
+  Zmw = 'ZMW',
+  Zwl = 'ZWL'
+}
+
 export type DateTimeFilter = {
   equals?: InputMaybe<Scalars['DateTime']>;
   gt?: InputMaybe<Scalars['DateTime']>;
@@ -942,6 +1113,13 @@ export type EnumColorSchemeFilter = {
   notIn?: InputMaybe<Array<ColorScheme>>;
 };
 
+export type EnumCurrencyFilter = {
+  equals?: InputMaybe<Currency>;
+  in?: InputMaybe<Array<Currency>>;
+  not?: InputMaybe<NestedEnumCurrencyFilter>;
+  notIn?: InputMaybe<Array<Currency>>;
+};
+
 export type EnumPipelineProgressableTypeFilter = {
   equals?: InputMaybe<PipelineProgressableType>;
   in?: InputMaybe<Array<PipelineProgressableType>>;
@@ -1492,6 +1670,13 @@ export type NestedEnumColorSchemeFilter = {
   notIn?: InputMaybe<Array<ColorScheme>>;
 };
 
+export type NestedEnumCurrencyFilter = {
+  equals?: InputMaybe<Currency>;
+  in?: InputMaybe<Array<Currency>>;
+  not?: InputMaybe<NestedEnumCurrencyFilter>;
+  notIn?: InputMaybe<Array<Currency>>;
+};
+
 export type NestedEnumPipelineProgressableTypeFilter = {
   equals?: InputMaybe<PipelineProgressableType>;
   in?: InputMaybe<Array<PipelineProgressableType>>;
@@ -1795,6 +1980,7 @@ export type PersonWhereUniqueInput = {
 export type Pipeline = {
   __typename?: 'Pipeline';
   createdAt: Scalars['DateTime'];
+  currency: Currency;
   icon: Scalars['String'];
   id: Scalars['ID'];
   name: Scalars['String'];
@@ -1814,6 +2000,7 @@ export type PipelineCreateNestedOneWithoutPipelineStagesInput = {
 
 export type PipelineOrderByWithRelationInput = {
   createdAt?: InputMaybe<SortOrder>;
+  currency?: InputMaybe<SortOrder>;
   icon?: InputMaybe<SortOrder>;
   id?: InputMaybe<SortOrder>;
   name?: InputMaybe<SortOrder>;
@@ -2000,6 +2187,7 @@ export type PipelineRelationFilter = {
 
 export enum PipelineScalarFieldEnum {
   CreatedAt = 'createdAt',
+  Currency = 'currency',
   DeletedAt = 'deletedAt',
   Icon = 'icon',
   Id = 'id',
@@ -2141,6 +2329,7 @@ export type PipelineWhereInput = {
   NOT?: InputMaybe<Array<PipelineWhereInput>>;
   OR?: InputMaybe<Array<PipelineWhereInput>>;
   createdAt?: InputMaybe<DateTimeFilter>;
+  currency?: InputMaybe<EnumCurrencyFilter>;
   icon?: InputMaybe<StringFilter>;
   id?: InputMaybe<StringFilter>;
   name?: InputMaybe<StringFilter>;

front/src/modules/companies/components/NewCompanyProgressButton.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useContext, useState } from 'react';
 
 import { NewButton } from '@/ui/board/components/NewButton';
-import { BoardColumnIdContext } from '@/ui/board/contexts/BoardColumnIdContext';
+import { BoardColumnContext } from '@/ui/board/contexts/BoardColumnContext';
 import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
 import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
 import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
@@ -14,7 +14,9 @@ import { useFilteredSearchCompanyQuery } from '../hooks/useFilteredSearchCompany
 
 export const NewCompanyProgressButton = () => {
   const [isCreatingCard, setIsCreatingCard] = useState(false);
-  const pipelineStageId = useContext(BoardColumnIdContext);
+  const column = useContext(BoardColumnContext);
+
+  const pipelineStageId = column?.columnDefinition.id || '';
 
   const { enqueueSnackBar } = useSnackBar();
 

front/src/modules/companies/hooks/useUpdateCompanyBoardColumns.ts

@@ -3,6 +3,7 @@ import { useRecoilCallback } from 'recoil';
 import { currentPipelineState } from '@/pipeline/states/currentPipelineState';
 import { boardCardIdsByColumnIdFamilyState } from '@/ui/board/states/boardCardIdsByColumnIdFamilyState';
 import { boardColumnsState } from '@/ui/board/states/boardColumnsState';
+import { savedBoardColumnsState } from '@/ui/board/states/savedBoardColumnsState';
 import { BoardColumnDefinition } from '@/ui/board/types/BoardColumnDefinition';
 import { genericEntitiesFamilyState } from '@/ui/editable-field/states/genericEntitiesFamilyState';
 import { isThemeColor } from '@/ui/theme/utils/castStringAsThemeColor';
@@ -114,11 +115,10 @@ export const useUpdateCompanyBoard = () =>
               index: pipelineStage.index ?? 0,
             };
           });
-
-        if (!isDeeplyEqual(currentBoardColumns, newBoardColumns)) {
+        if (currentBoardColumns.length === 0) {
           set(boardColumnsState, newBoardColumns);
+          set(savedBoardColumnsState, newBoardColumns);
         }
-
         for (const boardColumn of newBoardColumns) {
           const boardCardIds = pipelineProgresses
             .filter(

front/src/modules/ui/board/components/BoardColumn.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import styled from '@emotion/styled';
 
 import { Tag } from '@/ui/tag/components/Tag';
-import { ThemeColor } from '@/ui/theme/constants/colors';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 
+import { BoardColumnContext } from '../contexts/BoardColumnContext';
 import { BoardColumnHotkeyScope } from '../types/BoardColumnHotkeyScope';
 
 import { BoardColumnMenu } from './BoardColumnMenu';
@@ -53,28 +53,24 @@ const StyledNumChildren = styled.div`
 `;
 
 export type BoardColumnProps = {
-  color?: ThemeColor;
-  title: string;
   onDelete?: (id: string) => void;
   onTitleEdit: (title: string, color: string) => void;
   totalAmount?: number;
   children: React.ReactNode;
-  isFirstColumn: boolean;
   numChildren: number;
   stageId: string;
 };
 
 export const BoardColumn = ({
-  color,
-  title,
   onDelete,
   onTitleEdit,
   totalAmount,
   children,
-  isFirstColumn,
   numChildren,
   stageId,
 }: BoardColumnProps) => {
+  const boardColumn = useContext(BoardColumnContext);
+
   const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] =
     React.useState(false);
 
@@ -95,10 +91,18 @@ export const BoardColumn = ({
     setIsBoardColumnMenuOpen(false);
   };
 
+  if (!boardColumn) return <></>;
+
+  const { isFirstColumn, columnDefinition } = boardColumn;
+
   return (
     <StyledColumn isFirstColumn={isFirstColumn}>
-      <StyledHeader onClick={handleTitleClick}>
-        <Tag color={color ?? 'gray'} text={title} />
+      <StyledHeader>
+        <Tag
+          onClick={handleTitleClick}
+          color={columnDefinition.colorCode ?? 'gray'}
+          text={columnDefinition.title}
+        />
         {!!totalAmount && <StyledAmount>${totalAmount}</StyledAmount>}
         <StyledNumChildren>{numChildren}</StyledNumChildren>
       </StyledHeader>
@@ -107,8 +111,6 @@ export const BoardColumn = ({
           onClose={handleClose}
           onDelete={onDelete}
           onTitleEdit={onTitleEdit}
-          title={title}
-          color={color ?? 'gray'}
           stageId={stageId}
         />
       )}