feat: toggle board field visibilities (#1547)

Closes #1537, Closes #1539

front/src/modules/ui/board/states/availableBoardCardFieldsScopedState.ts

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

front/src/modules/ui/board/states/boardCardFieldsScopedState.ts

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

front/src/modules/ui/board/states/selectors/boardCardFieldsByKeyScopedSelector.ts

@@ -0,0 +1,18 @@
+import { selectorFamily } from 'recoil';
+
+import type {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+} from '@/ui/editable-field/types/ViewField';
+
+import { boardCardFieldsScopedState } from '../boardCardFieldsScopedState';
+
+export const boardCardFieldsByKeyScopedSelector = selectorFamily({
+  key: 'boardCardFieldsByKeyScopedSelector',
+  get:
+    (scopeId: string) =>
+    ({ get }) =>
+      get(boardCardFieldsScopedState(scopeId)).reduce<
+        Record<string, ViewFieldDefinition<ViewFieldMetadata>>
+      >((result, field) => ({ ...result, [field.key]: field }), {}),
+});

front/src/modules/ui/board/states/selectors/hiddenBoardCardFieldsScopedSelector.ts

@@ -0,0 +1,22 @@
+import { selectorFamily } from 'recoil';
+
+import { availableBoardCardFieldsScopedState } from '../availableBoardCardFieldsScopedState';
+import { boardCardFieldsScopedState } from '../boardCardFieldsScopedState';
+
+export const hiddenBoardCardFieldsScopedSelector = selectorFamily({
+  key: 'hiddenBoardCardFieldsScopedSelector',
+  get:
+    (scopeId: string) =>
+    ({ get }) => {
+      const fields = get(boardCardFieldsScopedState(scopeId));
+      const fieldKeys = fields.map(({ key }) => key);
+      const otherAvailableKeys = get(
+        availableBoardCardFieldsScopedState(scopeId),
+      ).filter(({ key }) => !fieldKeys.includes(key));
+
+      return [
+        ...fields.filter((field) => !field.isVisible),
+        ...otherAvailableKeys,
+      ];
+    },
+});

front/src/modules/ui/board/states/selectors/visibleBoardCardFieldsScopedSelector.ts

@@ -0,0 +1,13 @@
+import { selectorFamily } from 'recoil';
+
+import { boardCardFieldsScopedState } from '../boardCardFieldsScopedState';
+
+export const visibleBoardCardFieldsScopedSelector = selectorFamily({
+  key: 'visibleBoardCardFieldsScopedSelector',
+  get:
+    (scopeId: string) =>
+    ({ get }) =>
+      get(boardCardFieldsScopedState(scopeId)).filter(
+        (field) => field.isVisible,
+      ),
+});

front/src/modules/ui/board/states/viewFieldsDefinitionsState.ts

@@ -1,13 +0,0 @@
-import { atom } from 'recoil';
-
-import type {
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-} from '../../editable-field/types/ViewField';
-
-export const viewFieldsDefinitionsState = atom<
-  ViewFieldDefinition<ViewFieldMetadata>[]
->({
-  key: 'viewFieldsDefinitionState',
-  default: [],
-});