refactor: improve panel status in general settings

cheminfo · Jan 10, 2025 · a952a0d · a952a0d
1 parent a4be76f
commit a952a0d
Showing 1 changed file with 93 additions and 37 deletions.
diff --git a/src/component/modal/setting/settings-tabs/DisplayTabContent.tsx b/src/component/modal/setting/settings-tabs/DisplayTabContent.tsx
@@ -1,82 +1,125 @@
 import { Checkbox } from '@blueprintjs/core';
 import type { NMRiumPanelPreferences } from 'nmr-load-save';
-import { useMemo } from 'react';
-import { useFormContext } from 'react-hook-form';
+import { useCallback, useMemo } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
 
 import ReactTable from '../../../elements/ReactTable/ReactTable.js';
 import type { CustomColumn } from '../../../elements/ReactTable/utility/addCustomColumn.js';
+import { Select2 } from '../../../elements/Select2.js';
 import type { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer.js';
 
+const basePath = 'display.panels';
 interface ListItem {
   label: string;
-  name: `panels.${keyof NMRiumPanelPreferences}`;
+  name: keyof NMRiumPanelPreferences;
   hideOpenOption?: boolean;
 }
+
+type PanelStatus = 'hidden' | 'available' | 'active';
+interface PanelStatusItem {
+  label: string;
+  value: PanelStatus;
+}
+
+const PANEL_STATUS: PanelStatusItem[] = [
+  {
+    label: 'Hidden',
+    value: 'hidden',
+  },
+  {
+    label: 'Available',
+    value: 'available',
+  },
+  {
+    label: 'Active',
+    value: 'active',
+  },
+];
 const LIST: ListItem[] = [
   {
     label: 'Spectra selection panel',
-    name: 'panels.spectraPanel',
+    name: 'spectraPanel',
   },
   {
     label: 'Spectra information panel',
-    name: 'panels.informationPanel',
+    name: 'informationPanel',
   },
   {
     label: 'Peaks and peak picking',
-    name: 'panels.peaksPanel',
+    name: 'peaksPanel',
   },
   {
     label: 'Integration and integrals',
-    name: 'panels.integralsPanel',
+    name: 'integralsPanel',
   },
   {
     label: '1D ranges peak picking',
-    name: 'panels.rangesPanel',
+    name: 'rangesPanel',
   },
   {
     label: 'Chemical structures panel',
-    name: 'panels.structuresPanel',
+    name: 'structuresPanel',
   },
   {
     label: 'Processings panel',
-    name: 'panels.processingsPanel',
+    name: 'processingsPanel',
   },
   {
     label: '2D zones peak picking',
-    name: 'panels.zonesPanel',
+    name: 'zonesPanel',
   },
   {
     label: 'Assignment summary panel',
-    name: 'panels.summaryPanel',
+    name: 'summaryPanel',
   },
   {
     label: 'Multiple spectra analysis panel',
-    name: 'panels.multipleSpectraAnalysisPanel',
+    name: 'multipleSpectraAnalysisPanel',
   },
   {
     label: 'Databases panel',
-    name: 'panels.databasePanel',
+    name: 'databasePanel',
   },
   {
     label: 'Prediction panel',
-    name: 'panels.predictionPanel',
+    name: 'predictionPanel',
   },
   {
     label: 'Automatic assignment panel',
-    name: 'panels.automaticAssignmentPanel',
+    name: 'automaticAssignmentPanel',
   },
   {
     label: 'Matrix generation Panel',
-    name: 'panels.matrixGenerationPanel',
+    name: 'matrixGenerationPanel',
   },
   {
     label: 'Simulation panel',
-    name: 'panels.simulationPanel',
+    name: 'simulationPanel',
   },
 ];
 
 function DisplayTabContent() {
-  const { register } = useFormContext<WorkspaceWithSource>();
+  const { register, control, setValue } = useFormContext<WorkspaceWithSource>();
+
+  const onChange = useCallback(
+    (panelName: keyof NMRiumPanelPreferences, status: PanelStatus) => {
+      let visible = false;
+      let display = false;
+
+      if (status === 'available') {
+        visible = true;
+      }
+
+      if (status === 'active') {
+        visible = true;
+        display = true;
+      }
+
+      setValue(`${basePath}.${panelName}.display`, display);
+      setValue(`${basePath}.${panelName}.visible`, visible);
+    },
+    [setValue],
+  );
 
   const COLUMNS: Array<CustomColumn<ListItem>> = useMemo(
     () => [
@@ -98,36 +141,49 @@ function DisplayTabContent() {
         Cell: ({ row }) => (
           <Checkbox
             style={{ margin: 0 }}
-            {...register(`display.${row.original.name}.visible`)}
+            {...register(`${basePath}.${row.original.name}.visible`)}
             defaultChecked={false}
           />
         ),
       },
       {
         index: 3,
-        Header: 'Active',
+        Header: 'Status',
         style: { textAlign: 'center' },
         Cell: ({ row }) => (
-          <Checkbox
-            style={{ margin: 0 }}
-            {...register(`display.${row.original.name}.display`)}
-            defaultChecked={false}
-          />
-        ),
-      },
-      {
-        index: 4,
-        Header: 'Open on load',
-        style: { textAlign: 'center' },
-        Cell: ({ row }) => (
-          <Checkbox
-            style={{ margin: 0 }}
-            {...register(`display.${row.original.name}.open`)}
+          <Controller
+            control={control}
+            name={`${basePath}.${row.original.name}`}
+            render={({ field }) => {
+              const { value: state } = field;
+              const { visible = false, display = false } = state || {};
+              let value: PanelStatus = 'hidden';
+
+              if (visible && display) {
+                value = 'active';
+              }
+
+              if (visible) {
+                value = 'available';
+              }
+
+              return (
+                <Select2<PanelStatusItem>
+                  items={PANEL_STATUS}
+                  itemTextKey="label"
+                  itemValueKey="value"
+                  selectedItemValue={value}
+                  onItemSelect={(item) =>
+                    onChange(row.original.name, item.value)
+                  }
+                />
+              );
+            }}
           />
         ),
       },
     ],
-    [register],
+    [control, onChange, register],
   );
 
   return (