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/ui/table/states/availableTableColumnsScopedState.ts

@@ -0,0 +1,13 @@
+import { atomFamily } from 'recoil';
+
+import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
+
+import type { ColumnDefinition } from '../types/ColumnDefinition';
+
+export const availableTableColumnsScopedState = atomFamily<
+  ColumnDefinition<ViewFieldMetadata>[],
+  string
+>({
+  key: 'availableTableColumnsScopedState',
+  default: [],
+});

front/src/modules/ui/table/states/selectors/hiddenTableColumnsScopedSelector.ts

@@ -1,13 +1,22 @@
 import { selectorFamily } from 'recoil';
 
+import { availableTableColumnsScopedState } from '../availableTableColumnsScopedState';
 import { tableColumnsScopedState } from '../tableColumnsScopedState';
 
 export const hiddenTableColumnsScopedSelector = selectorFamily({
   key: 'hiddenTableColumnsScopedSelector',
   get:
     (scopeId: string) =>
-    ({ get }) =>
-      get(tableColumnsScopedState(scopeId)).filter(
-        (column) => !column.isVisible,
-      ),
+    ({ get }) => {
+      const columns = get(tableColumnsScopedState(scopeId));
+      const columnLabels = columns.map(({ label }) => label);
+      const otherAvailableColumns = get(
+        availableTableColumnsScopedState(scopeId),
+      ).filter(({ label }) => !columnLabels.includes(label));
+
+      return [
+        ...columns.filter((column) => !column.isVisible),
+        ...otherAvailableColumns,
+      ];
+    },
 });