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/components/global/CrudTable.vue

@@ -3,7 +3,7 @@
     <v-card-actions>
       <v-menu v-if="tableConfig.hideColumns" offset-y bottom nudge-bottom="6" :close-on-content-click="false">
         <template #activator="{ on, attrs }">
-          <v-btn color="accent" class="mr-1" dark v-bind="attrs" v-on="on">
+          <v-btn color="accent" class="mr-2" dark v-bind="attrs" v-on="on">
             <v-icon>
               {{ $globals.icons.cog }}
             </v-icon>

frontend/pages/group/data/foods.vue

@@ -54,6 +54,35 @@
       </v-card-text>
     </BaseDialog>
 
+    <!-- Create Dialog -->
+    <BaseDialog
+      v-model="createDialog"
+      :icon="$globals.icons.foods"
+      title="Create Food"
+      :submit-text="$tc('general.save')"
+      @submit="createFood"
+    >
+      <v-card-text>
+        <v-form ref="domNewFoodForm">
+          <v-text-field
+            v-model="createTarget.name"
+            autofocus
+            label="Name"
+            :rules="[validators.required]"
+          ></v-text-field>
+          <v-text-field v-model="createTarget.description" label="Description"></v-text-field>
+          <v-autocomplete
+            v-model="createTarget.labelId"
+            clearable
+            :items="allLabels"
+            item-value="id"
+            item-text="name"
+            label="Food Label"
+          >
+          </v-autocomplete>
+        </v-form> </v-card-text
+    ></BaseDialog>
+
     <!-- Edit Dialog -->
     <BaseDialog
       v-model="editDialog"
@@ -63,7 +92,7 @@
       @submit="editSaveFood"
     >
       <v-card-text v-if="editTarget">
-        <v-form ref="domCreateFoodForm">
+        <v-form ref="domNewFoodForm">
           <v-text-field v-model="editTarget.name" label="Name" :rules="[validators.required]"></v-text-field>
           <v-text-field v-model="editTarget.description" label="Description"></v-text-field>
           <v-autocomplete
@@ -100,8 +129,10 @@
       :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.foods }} </template>
           Combine
@@ -128,10 +159,11 @@ import { computed } from "vue-demi";
 import type { LocaleObject } from "@nuxtjs/i18n";
 import { validators } from "~/composables/use-validators";
 import { useUserApi } from "~/composables/api";
-import { IngredientFood } from "~/types/api-types/recipe";
+import { CreateIngredientFood, IngredientFood } from "~/types/api-types/recipe";
 import MultiPurposeLabel from "~/components/Domain/ShoppingList/MultiPurposeLabel.vue";
 import { useLocales } from "~/composables/use-locales";
 import { useFoodStore, useLabelStore } from "~/composables/store";
+import { VForm } from "~/types/vuetify";
 
 export default defineComponent({
   components: { MultiPurposeLabel },
@@ -166,6 +198,34 @@ export default defineComponent({
 
     const foodStore = useFoodStore();
 
+    // ===============================================================
+    // Food Creator
+
+    const domNewFoodForm = ref<VForm>();
+    const createDialog = ref(false);
+    const createTarget = ref<CreateIngredientFood>({
+      name: "",
+    });
+
+    function createEventHandler() {
+      createDialog.value = true;
+    }
+
+    async function createFood() {
+      if (!createTarget.value || !createTarget.value.name) {
+        return;
+      }
+
+      // @ts-expect-error the createOne function erroneously expects an id because it uses the IngredientFood type
+      await foodStore.actions.createOne(createTarget.value);
+      createDialog.value = false;
+
+      domNewFoodForm.value?.reset();
+      createTarget.value = {
+        name: "",
+      };
+    }
+
     // ===============================================================
     // Food Editor
 
@@ -262,6 +322,11 @@ export default defineComponent({
       foods: foodStore.foods,
       allLabels,
       validators,
+      // Create
+      createDialog,
+      createEventHandler,
+      createFood,
+      createTarget,
       // Edit
       editDialog,
       editEventHandler,

frontend/pages/group/data/recipes.vue

@@ -65,7 +65,7 @@
       <v-card-actions class="mt-n5 mb-1">
         <v-menu offset-y bottom nudge-bottom="6" :close-on-content-click="false">
           <template #activator="{ on, attrs }">
-            <v-btn color="accent" class="mr-1" dark v-bind="attrs" v-on="on">
+            <v-btn color="accent" class="mr-2" dark v-bind="attrs" v-on="on">
               <v-icon left>
                 {{ $globals.icons.cog }}
               </v-icon>

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,