Added HWNG shortcut suffixes to settings

Author: mmtandoc

components/compound/CompoundDetails.tsx

@@ -5,9 +5,10 @@ import useSWR from "swr"
 import { IngredientDetails } from "components/compound/ingredient/IngredientDetails"
 import { Button, Spinner } from "components/ui"
 import { Fieldset, FormGroup } from "components/ui/forms"
+import { SettingsFields } from "lib/fields"
 import { CompoundWithIngredients, MfrAll } from "types/models"
 
-import { getHwngShortcutString, shortcutSuffixMap } from "./helpers"
+import { getHwngShortcutString } from "./helpers"
 
 type Props = {
   data: CompoundWithIngredients
@@ -28,6 +29,15 @@ const CompoundDetails = (props: Props) => {
     [data.id, shortcutVariations, data.shortcutSuffix],
   )
 
+  const { data: settings, error: settingsError } =
+    useSWR<SettingsFields>("/api/settings")
+
+  if (settingsError) {
+    console.error(settingsError)
+  }
+
+  const shortcutSuffixes = useMemo(() => settings?.shortcutSuffixes, [settings])
+
   return (
     <div className="compound-details">
       <FormGroup row className="name-shortcut-group">
@@ -62,12 +72,18 @@ const CompoundDetails = (props: Props) => {
                   <span>
                     {data.shortcutSuffix ? `${data.shortcutSuffix}` : "N/A"}
                   </span>
-
                   {data.shortcutSuffix &&
-                    shortcutSuffixMap.has(data.shortcutSuffix) && (
+                    shortcutSuffixes?.find(
+                      (s) => s.code === data.shortcutSuffix,
+                    ) && (
                       <span>
                         {" "}
-                        - {shortcutSuffixMap.get(data.shortcutSuffix)}
+                        -{" "}
+                        {
+                          shortcutSuffixes?.find(
+                            (s) => s.code === data.shortcutSuffix,
+                          )?.description
+                        }
                       </span>
                     )}
                 </FormGroup>

components/compound/CompoundEntry/CompoundEntry.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo } from "react"
 import { UseFormReturn, useFieldArray, useWatch } from "react-hook-form"
+import useSWR from "swr"
 
 import { Button } from "components/ui"
 import {
@@ -12,10 +13,11 @@ import {
 import {
   NullPartialCompoundFields,
   NullPartialIngredientFields,
+  SettingsFields,
 } from "lib/fields"
 import { nestedForm } from "lib/rhf/nestedForm"
 
-import { getHwngShortcutString, shortcutSuffixMap } from "../helpers"
+import { getHwngShortcutString } from "../helpers"
 import IngredientEntry from "../ingredient/IngredientEntry"
 import ShortcutVariationsEntry from "./ShortcutVariationsEntry"
 
@@ -86,6 +88,15 @@ const CompoundEntry = (props: Props) => {
     [compoundId, shortcutSuffix, shortcutVariations],
   )
 
+  const { data: settings, error: settingsError } =
+    useSWR<SettingsFields>("/api/settings")
+
+  if (settingsError) {
+    console.error(settingsError)
+  }
+
+  const shortcutSuffixes = useMemo(() => settings?.shortcutSuffixes, [settings])
+
   register("id")
   return (
     <>
@@ -153,20 +164,26 @@ const CompoundEntry = (props: Props) => {
                     {...register("shortcut.suffix")}
                     list={`shortcut-suffixes-list`}
                   />
-                  {shortcutSuffix && shortcutSuffixMap.has(shortcutSuffix) && (
-                    <span>{shortcutSuffixMap.get(shortcutSuffix)}</span>
-                  )}
-                </FormGroup>
-                <datalist id={`shortcut-suffixes-list`}>
-                  {Array.from(shortcutSuffixMap.entries()).map(
-                    ([code, label]) => (
+                  {shortcutSuffix &&
+                    shortcutSuffixes?.find((s) => s.code === shortcutSuffix) !==
+                      undefined && (
+                      <span>
+                        {
+                          shortcutSuffixes.find(
+                            (s) => s.code === shortcutSuffix,
+                          )?.description
+                        }
+                      </span>
+                    )}
+                  <datalist id={`shortcut-suffixes-list`}>
+                    {shortcutSuffixes?.map(({ code, description }) => (
                       <option
                         value={code}
                         key={code}
-                      >{`${code} - ${label}`}</option>
-                    ),
-                  )}
-                </datalist>
+                      >{`${code} - ${description}`}</option>
+                    ))}
+                  </datalist>
+                </FormGroup>
               </FormGroup>
               <FormGroup row className="shortcut-preview">
                 <span className="label">Shortcut preview:</span>

components/compound/helpers.ts

@@ -1,14 +1,3 @@
-export const shortcutSuffixMap = new Map([
-  ["HC", "Hydrocortisone powder"],
-  ["SA", "Salicylic acid"],
-  ["CL", "Clindamycin powder"],
-  ["MC", "Menthol & camphor"],
-  ["ER", "Erythromycin powder"],
-  ["MZ", "Miconazole crystals"],
-  ["CZ", "Clotrimazole powder"],
-  ["AA", "Half & half"],
-])
-
 export const getHwngShortcutString = (
   compoundId: number | undefined | null,
   shortcutVariations: { code: string; name: string }[] | undefined | null,

components/settings/SettingsEntry/SettingsEntry.tsx

@@ -3,6 +3,7 @@ import { UseFormReturn } from "react-hook-form"
 import { NullPartialSettingsFields } from "lib/fields"
 
 import MfrPresetFieldset from "./field-presets/MfrPresetFieldset/MfrPresetFieldset"
+import ShortcutSuffixesFieldset from "./ShortcutSuffixesFieldset"
 
 type SettingsEntryProps = {
   formMethods: UseFormReturn<NullPartialSettingsFields>
@@ -14,6 +15,7 @@ const SettingsEntry = (props: SettingsEntryProps) => {
   return (
     <>
       <MfrPresetFieldset formMethods={formMethods} />
+      <ShortcutSuffixesFieldset formMethods={formMethods} />
     </>
   )
 }

components/settings/SettingsEntry/ShortcutSuffixesFieldset.tsx

@@ -0,0 +1,105 @@
+import _ from "lodash"
+import { UseFormReturn, useFieldArray } from "react-hook-form"
+
+import { Button } from "components/ui"
+import { Fieldset, FormGroup, Input } from "components/ui/forms"
+import { NullPartialSettingsFields } from "lib/fields"
+
+import FieldArrayActions from "./FieldArrayActions"
+
+type ShortcutSuffixesFieldsetProps = {
+  formMethods: UseFormReturn<NullPartialSettingsFields>
+}
+const ShortcutSuffixesFieldset = (props: ShortcutSuffixesFieldsetProps) => {
+  const {
+    formMethods: { control, register },
+  } = props
+
+  const arrayMethods = useFieldArray({
+    control,
+    name: "shortcutSuffixes",
+  })
+
+  return (
+    <Fieldset legend="HWNG shortcut suffixes:" className="shortcut-suffixes">
+      <div className="shortcut-suffixes-list">
+        <FormGroup className="shortcut-suffixes-header" row>
+          <div>Code</div>
+          <div>Description</div>
+        </FormGroup>
+        {arrayMethods.fields.map((field, index) => (
+          <FormGroup className="shortcut-suffix-item" row key={field.id}>
+            <Input
+              className="shortcut-suffix-code"
+              {...register(`shortcutSuffixes.${index}.code`, {
+                deps: _.range(arrayMethods.fields.length)
+                  .filter((i2) => i2 !== index)
+                  .map((i2) => `shortcutSuffixes.${i2}.code`),
+              })}
+              fullWidth
+            />
+            <Input
+              {...register(`shortcutSuffixes.${index}.description`)}
+              fullWidth
+            />
+
+            <FieldArrayActions
+              arrayMethods={arrayMethods}
+              field={field}
+              index={index}
+            />
+          </FormGroup>
+        ))}
+      </div>
+      <div className="actions">
+        <Button
+          size="small"
+          onClick={() =>
+            arrayMethods.append({
+              code: null,
+              description: null,
+            })
+          }
+        >
+          Add new shortcut suffix
+        </Button>
+      </div>
+      <style jsx global>{`
+        .shortcut-suffixes-list {
+          display: grid;
+          grid-template-columns: 1fr 5fr auto;
+          column-gap: 1rem;
+
+          > .shortcut-suffixes-header {
+            font-weight: 600;
+
+            &::after {
+              content: "";
+            }
+          }
+
+          > .shortcut-suffix-item {
+            .shortcut-suffix-code {
+              text-transform: uppercase;
+            }
+
+            > .form-group {
+              display: contents !important;
+            }
+          }
+
+          > div.form-group {
+            display: contents !important;
+            width: 100%;
+          }
+        }
+
+        .shortcut-suffixes > .actions {
+          margin-top: 1rem;
+        }
+      `}</style>
+    </Fieldset>
+  )
+}
+
+export default ShortcutSuffixesFieldset

lib/fields/fields.ts

@@ -654,6 +654,24 @@ export const settingsSchema = z.object({
     labelling: createFieldArrayPresetsSchema(mfrSchema.shape.labelling),
     references: createFieldArrayPresetsSchema(mfrSchema.shape.references),
   }),
+  shortcutSuffixes: z
+    .object({
+      code: z
+        .string()
+        .trim()
+        .min(1)
+        .transform((arg) => arg.toUpperCase()),
+      description: z.string().trim().min(1),
+    })
+    .array()
+    .superRefine((arg, ctx) =>
+      refineNoDuplicates(
+        arg,
+        ctx,
+        "code",
+        (v: GetElementType<typeof arg>) => v.code,
+      ),
+    ),
 })
 
 export type SettingsFields = z.output<typeof settingsSchema>

prisma/migrations/20230126203842_add_shortcut_suffixes_to_settings/migration.sql

@@ -0,0 +1,13 @@
+-- AlterTable
+ALTER TABLE "settings" ADD COLUMN "shortcutSuffixes" JSONB NOT NULL DEFAULT '[]';
+
+UPDATE "settings" SET "shortcutSuffixes" = '[
+    { "code": "HC", "description": "Hydrocortisone powder" },
+    { "code": "SA", "description": "Salicylic acid" },
+    { "code": "CL", "description": "Clindamycin powder" },
+    { "code": "MC", "description": "Menthol & camphor" },
+    { "code": "ER", "description": "Erythromycin powder" },
+    { "code": "MZ", "description": "Miconazole crystals" },
+    { "code": "CZ", "description": "Clotrimazole powder" },
+    { "code": "AA", "description": "Half & half" }
+]' WHERE "id" = 0;

prisma/schema.prisma

@@ -290,8 +290,9 @@ model Link {
 }
 
 model Settings {
-  id              Int  @id @default(autoincrement())
-  mfrFieldPresets Json //{[fieldName]: {label?: String, value: any}|{label?: String, value: any}[]}
+  id               Int  @id @default(autoincrement())
+  mfrFieldPresets  Json //{[fieldName]: {label?: String, value: any}|{label?: String, value: any}[]}
+  shortcutSuffixes Json @default("[]") //{code: String, description: String}[]
 
   @@map("settings")
 }