feat: change column visibility on add (#1174)

* feat: change column visibility on add

* refactor: extract views business logic from table

front/src/modules/companies/table/components/CompanyTable.tsx

@@ -10,6 +10,7 @@ import { EntityTable } from '@/ui/table/components/EntityTable';
 import { GenericEntityTableData } from '@/ui/table/components/GenericEntityTableData';
 import { TableContext } from '@/ui/table/states/TableContext';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { useTableViewFields } from '@/views/hooks/useTableViewFields';
 import { useViewSorts } from '@/views/hooks/useViewSorts';
 import { currentViewIdState } from '@/views/states/currentViewIdState';
 import {
@@ -24,6 +25,11 @@ import { defaultOrderBy } from '../../queries';
 export function CompanyTable() {
   const currentViewId = useRecoilValue(currentViewIdState);
   const orderBy = useRecoilScopedValue(sortsOrderByScopedState, TableContext);
+
+  const { handleColumnsChange } = useTableViewFields({
+    objectName: 'company',
+    viewFieldDefinitions: companyViewFields,
+  });
   const { updateSorts } = useViewSorts({
     availableSorts,
     Context: TableContext,
@@ -38,18 +44,17 @@ export function CompanyTable() {
   return (
     <>
       <GenericEntityTableData
-        objectName="company"
         getRequestResultKey="companies"
         useGetRequest={useGetCompaniesQuery}
         orderBy={orderBy.length ? orderBy : defaultOrderBy}
         whereFilters={whereFilters}
-        viewFieldDefinitions={companyViewFields}
         filterDefinitionArray={companiesFilters}
       />
       <EntityTable
         viewName="All Companies"
         viewIcon={<IconList size={16} />}
         availableSorts={availableSorts}
+        onColumnsChange={handleColumnsChange}
         onSortsUpdate={currentViewId ? updateSorts : undefined}
         useUpdateEntityMutation={useUpdateOneCompanyMutation}
       />

front/src/modules/companies/table/components/CompanyTableMockData.tsx

@@ -2,32 +2,21 @@ import { useEffect } from 'react';
 import { useSetRecoilState } from 'recoil';
 
 import { useSetEntityTableData } from '@/ui/table/hooks/useSetEntityTableData';
-import { entityTableDimensionsState } from '@/ui/table/states/entityTableDimensionsState';
-import { viewFieldsState } from '@/ui/table/states/viewFieldsState';
+import { tableColumnsState } from '@/ui/table/states/tableColumnsState';
 
 import { companyViewFields } from '../../constants/companyViewFields';
 
 import { mockedCompaniesData } from './companies-mock-data';
 
 export function CompanyTableMockData() {
-  const setEntityTableDimensions = useSetRecoilState(
-    entityTableDimensionsState,
-  );
-  const setViewFieldsState = useSetRecoilState(viewFieldsState);
+  const setColumns = useSetRecoilState(tableColumnsState);
   const setEntityTableData = useSetEntityTableData();
 
   setEntityTableData(mockedCompaniesData, []);
 
   useEffect(() => {
-    setViewFieldsState({
-      objectName: 'company',
-      viewFields: companyViewFields,
-    });
-    setEntityTableDimensions((prevState) => ({
-      ...prevState,
-      numberOfColumns: companyViewFields.length,
-    }));
-  }, [setEntityTableDimensions, setViewFieldsState]);
+    setColumns(companyViewFields);
+  }, [setColumns]);
 
   return <></>;
 }