feat: allow adding available pre-defined table columns to views (#1371)

* feat: allow adding available pre-defined table columns to views

Closes #1360

* fix: allow creating views with the same name for the same table

* refactor: code review

- rename things
- move handleColumnVisibilityChange to useTableColumns hook

front/src/modules/views/hooks/useTableViewFields.ts

@@ -5,6 +5,7 @@ import type {
   ViewFieldMetadata,
   ViewFieldTextMetadata,
 } from '@/ui/editable-field/types/ViewField';
+import { availableTableColumnsScopedState } from '@/ui/table/states/availableTableColumnsScopedState';
 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { savedTableColumnsScopedState } from '@/ui/table/states/savedTableColumnsScopedState';
 import { savedTableColumnsByIdScopedSelector } from '@/ui/table/states/selectors/savedTableColumnsByIdScopedSelector';
@@ -45,19 +46,24 @@ export const useTableViewFields = ({
   objectName: 'company' | 'person';
   columnDefinitions: ColumnDefinition<ViewFieldMetadata>[];
 }) => {
-  const currentViewId = useRecoilScopedValue(
+  const currentTableViewId = useRecoilScopedValue(
     currentTableViewIdState,
     TableRecoilScopeContext,
   );
-  const [columns, setColumns] = useRecoilScopedState(
+  const [availableTableColumns, setAvailableTableColumns] =
+    useRecoilScopedState(
+      availableTableColumnsScopedState,
+      TableRecoilScopeContext,
+    );
+  const [tableColumns, setTableColumns] = useRecoilScopedState(
     tableColumnsScopedState,
     TableRecoilScopeContext,
   );
-  const setSavedColumns = useSetRecoilState(
-    savedTableColumnsScopedState(currentViewId),
+  const setSavedTableColumns = useSetRecoilState(
+    savedTableColumnsScopedState(currentTableViewId),
   );
-  const savedColumnsById = useRecoilValue(
-    savedTableColumnsByIdScopedSelector(currentViewId),
+  const savedTableColumnsById = useRecoilValue(
+    savedTableColumnsByIdScopedSelector(currentTableViewId),
   );
 
   const [createViewFieldsMutation] = useCreateViewFieldsMutation();
@@ -66,7 +72,7 @@ export const useTableViewFields = ({
   const createViewFields = useCallback(
     (
       columns: ColumnDefinition<ViewFieldMetadata>[],
-      viewId = currentViewId,
+      viewId = currentTableViewId,
     ) => {
       if (!viewId || !columns.length) return;
 
@@ -79,12 +85,12 @@ export const useTableViewFields = ({
         },
       });
     },
-    [createViewFieldsMutation, currentViewId, objectName],
+    [createViewFieldsMutation, currentTableViewId, objectName],
   );
 
   const updateViewFields = useCallback(
     (columns: ColumnDefinition<ViewFieldMetadata>[]) => {
-      if (!currentViewId || !columns.length) return;
+      if (!currentTableViewId || !columns.length) return;
 
       return Promise.all(
         columns.map((column) =>
@@ -100,16 +106,16 @@ export const useTableViewFields = ({
         ),
       );
     },
-    [currentViewId, updateViewFieldMutation],
+    [currentTableViewId, updateViewFieldMutation],
   );
 
   const { refetch } = useGetViewFieldsQuery({
-    skip: !currentViewId,
+    skip: !currentTableViewId,
     variables: {
       orderBy: { index: SortOrder.Asc },
       where: {
         objectName: { equals: objectName },
-        viewId: { equals: currentViewId ?? null },
+        viewId: { equals: currentTableViewId ?? null },
       },
     },
     onCompleted: async (data) => {
@@ -132,26 +138,42 @@ export const useTableViewFields = ({
         isVisible: viewField.isVisible,
       }));
 
-      if (!isDeeplyEqual(columns, nextColumns)) {
-        setSavedColumns(nextColumns);
-        setColumns(nextColumns);
+      if (!isDeeplyEqual(tableColumns, nextColumns)) {
+        setSavedTableColumns(nextColumns);
+        setTableColumns(nextColumns);
+      }
+
+      if (!availableTableColumns.length) {
+        setAvailableTableColumns(columnDefinitions);
       }
     },
   });
 
   const persistColumns = useCallback(async () => {
-    if (!currentViewId) return;
+    if (!currentTableViewId) return;
 
-    const viewFieldsToUpdate = columns.filter(
+    const viewFieldsToCreate = tableColumns.filter(
+      (column) => !savedTableColumnsById[column.id],
+    );
+    await createViewFields(viewFieldsToCreate);
+
+    const viewFieldsToUpdate = tableColumns.filter(
       (column) =>
-        savedColumnsById[column.id] &&
-        (savedColumnsById[column.id].size !== column.size ||
-          savedColumnsById[column.id].isVisible !== column.isVisible),
+        savedTableColumnsById[column.id] &&
+        (savedTableColumnsById[column.id].size !== column.size ||
+          savedTableColumnsById[column.id].isVisible !== column.isVisible),
     );
     await updateViewFields(viewFieldsToUpdate);
 
     return refetch();
-  }, [columns, currentViewId, refetch, savedColumnsById, updateViewFields]);
+  }, [
+    createViewFields,
+    currentTableViewId,
+    refetch,
+    savedTableColumnsById,
+    tableColumns,
+    updateViewFields,
+  ]);
 
   return { createViewFields, persistColumns };
 };