feat: create new foods and units from their Data Management pages (#1511)

* added create dialogs to food and unit pages

* minor css tweaks

* properly reset create form

* added placeholder name attribute for type checking

* removed unnecessary value assignment

* type fixes

* corrected comment

* add autofocus and use ref<VForm> for form refs

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

frontend/pages/group/data/units.vue

@@ -22,6 +22,30 @@
       </v-card-text>
     </BaseDialog>
 
+    <!-- Create Dialog -->
+    <BaseDialog
+      v-model="createDialog"
+      :icon="$globals.icons.units"
+      title="Create Unit"
+      :submit-text="$tc('general.save')"
+      @submit="createUnit"
+    >
+      <v-card-text>
+        <v-form ref="domNewUnitForm">
+          <v-text-field
+            v-model="createTarget.name"
+            autofocus
+            label="Name"
+            :rules="[validators.required]"
+          ></v-text-field>
+          <v-text-field v-model="createTarget.abbreviation" label="Abbreviation"></v-text-field>
+          <v-text-field v-model="createTarget.description" label="Description"></v-text-field>
+          <v-checkbox v-model="createTarget.fraction" hide-details label="Display as Fraction"></v-checkbox>
+          <v-checkbox v-model="createTarget.useAbbreviation" hide-details label="Use Abbreviation"></v-checkbox>
+        </v-form>
+      </v-card-text>
+    </BaseDialog>
+
     <!-- Edit Dialog -->
     <BaseDialog
       v-model="editDialog"
@@ -100,8 +124,11 @@
       :bulk-actions="[]"
       @delete-one="deleteEventHandler"
       @edit-one="editEventHandler"
+      @create-one="createEventHandler"
     >
       <template #button-row>
+        <BaseButton create @click="createDialog = true" />
+
         <BaseButton @click="mergeDialog = true">
           <template #icon> {{ $globals.icons.units }} </template>
           Combine
@@ -132,9 +159,10 @@ import { computed, defineComponent, onMounted, ref } from "@nuxtjs/composition-a
 import type { LocaleObject } from "@nuxtjs/i18n";
 import { validators } from "~/composables/use-validators";
 import { useUserApi } from "~/composables/api";
-import { IngredientUnit } from "~/types/api-types/recipe";
+import { CreateIngredientUnit, IngredientUnit } from "~/types/api-types/recipe";
 import { useLocales } from "~/composables/use-locales";
 import { useUnitStore } from "~/composables/store";
+import { VForm } from "~/types/vuetify";
 
 export default defineComponent({
   setup() {
@@ -178,6 +206,41 @@ export default defineComponent({
 
     const { units, actions: unitActions } = useUnitStore();
 
+    // ============================================================
+    // Create Units
+
+    const createDialog = ref(false);
+    const domNewUnitForm = ref<VForm>();
+
+    // we explicitly set booleans to false since forms don't POST unchecked boxes
+    const createTarget = ref<CreateIngredientUnit>({
+      name: "",
+      fraction: false,
+      useAbbreviation: false,
+    });
+
+    function createEventHandler() {
+      createDialog.value = true;
+    }
+
+    async function createUnit() {
+      if (!createTarget.value || !createTarget.value.name) {
+        return;
+      }
+
+      // @ts-expect-error the createOne function erroneously expects an id because it uses the IngredientUnit type
+      await unitActions.createOne(createTarget.value);
+      createDialog.value = false;
+
+      domNewUnitForm.value?.reset();
+      createTarget.value = {
+        name: "",
+        fraction: false,
+        useAbbreviation: false,
+      };
+    }
+
+    // ============================================================
     // Edit Units
     const editDialog = ref(false);
     const editTarget = ref<IngredientUnit | null>(null);
@@ -195,6 +258,7 @@ export default defineComponent({
       editDialog.value = false;
     }
 
+    // ============================================================
     // Delete Units
     const deleteDialog = ref(false);
     const deleteTarget = ref<IngredientUnit | null>(null);
@@ -263,6 +327,11 @@ export default defineComponent({
       tableHeaders,
       units,
       validators,
+      // Create
+      createDialog,
+      createEventHandler,
+      createUnit,
+      createTarget,
       // Edit
       editDialog,
       editEventHandler,