Chore/general UI cleanup (#764)

* unify look and feel + button validators

* Fixes #741

* add github script to mealei-next

* feat(frontend): 💄 improve user-flow for creating ingredients and units in editor

Creating a unit/food in the recipe editor will not automatically assign that to the auto-complete element on the ingredient. It also no longer needs a dialog and will show at the bottom of the menu at all times.

* fix whitespace issue with slot

* add security check to properties

* fix event refresh on delete

* remove depreciated page

* improve API token flow

* hide recipe data if not advanced user

* misc adds

Co-authored-by: Hayden <hay-kot@pm.me>

frontend/components/Domain/Recipe/RecipeCategoryTagSelector.vue

@@ -15,6 +15,7 @@
     :hint="hint"
     :solo="solo"
     :return-object="returnObject"
+    :prepend-inner-icon="$globals.icons.tags"
     :flat="flat"
     v-bind="$attrs"
     @input="emitChange"

frontend/components/Domain/Recipe/RecipeIngredientEditor.vue

@@ -5,7 +5,7 @@
       v-model="value.title"
       dense
       hide-details
-      class="mx-1 mb-4"
+      class="mx-1 mt-3 mb-4"
       placeholder="Section Title"
       style="max-width: 500px"
     >
@@ -29,6 +29,7 @@
       <v-col v-if="!disableAmount && units" sm="12" md="3" cols="12">
         <v-autocomplete
           v-model="value.unit"
+          :search-input.sync="unitSearch"
           hide-details
           dense
           solo
@@ -38,14 +39,19 @@
           class="mx-1"
           placeholder="Choose Unit"
         >
-          <template #no-data>
-            <RecipeIngredientUnitDialog class="mx-2" block small />
+          <template #append-item>
+            <div class="px-2">
+              <BaseButton block small @click="createAssignUnit()"></BaseButton>
+            </div>
           </template>
         </v-autocomplete>
       </v-col>
+
+      <!-- Foods Input -->
       <v-col v-if="!disableAmount && foods" m="12" md="3" cols="12" class="">
         <v-autocomplete
           v-model="value.food"
+          :search-input.sync="foodSearch"
           hide-details
           dense
           solo
@@ -55,8 +61,10 @@
           class="mx-1 py-0"
           placeholder="Choose Food"
         >
-          <template #no-data>
-            <RecipeIngredientFoodDialog class="mx-2" block small />
+          <template #append-item>
+            <div class="px-2">
+              <BaseButton block small @click="createAssignFood()"></BaseButton>
+            </div>
           </template>
         </v-autocomplete>
       </v-col>
@@ -86,15 +94,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs } from "@nuxtjs/composition-api";
-import RecipeIngredientUnitDialog from "./RecipeIngredientUnitDialog.vue";
-import RecipeIngredientFoodDialog from "./RecipeIngredientFoodDialog.vue";
+import { defineComponent, reactive, ref, toRefs } from "@nuxtjs/composition-api";
 import { useFoods } from "~/composables/use-recipe-foods";
 import { useUnits } from "~/composables/use-recipe-units";
 import { validators } from "~/composables/use-validators";
 
 export default defineComponent({
-  components: { RecipeIngredientUnitDialog, RecipeIngredientFoodDialog },
   props: {
     value: {
       type: Object,
@@ -108,8 +113,28 @@ export default defineComponent({
   setup(props) {
     const { value } = props;
 
-    const { foods } = useFoods();
+    // ==================================================
+    // Foods
+    const { foods, workingFoodData, actions: foodActions } = useFoods();
+    const foodSearch = ref("");
+
+    async function createAssignFood() {
+      workingFoodData.name = foodSearch.value;
+      await foodActions.createOne();
+      value.food = foods.value?.find((food) => food.name === foodSearch.value);
+    }
+
+    // ==================================================
+    // Units
     const { units, workingUnitData, actions: unitActions } = useUnits();
+    const unitSearch = ref("");
+
+    async function createAssignUnit() {
+      workingUnitData.name = unitSearch.value;
+      await unitActions.createOne();
+      value.unit = units.value?.find((unit) => unit.name === unitSearch.value);
+      console.log(value.unit);
+    }
 
     const state = reactive({
       showTitle: false,
@@ -126,13 +151,17 @@ export default defineComponent({
     }
 
     return {
-      workingUnitData,
-      unitActions,
-      validators,
-      foods,
-      units,
       ...toRefs(state),
+      createAssignFood,
+      createAssignUnit,
+      foods,
+      foodSearch,
       toggleTitle,
+      unitActions,
+      units,
+      unitSearch,
+      validators,
+      workingUnitData,
     };
   },
 });

frontend/components/Domain/Recipe/RecipeIngredientFoodDialog.vue

@@ -1,38 +0,0 @@
-<template>
-  <BaseDialog
-    title="Create Food"
-    :icon="$globals.icons.foods"
-    :keep-open="!validForm"
-    @submit="actions.createOne(domCreateFoodForm)"
-  >
-    <v-card-text>
-      <v-form ref="domCreateFoodForm">
-        <v-text-field v-model="workingFoodData.name" label="Name" :rules="[validators.required]"></v-text-field>
-        <v-text-field v-model="workingFoodData.description" label="Description"></v-text-field>
-      </v-form>
-    </v-card-text>
-    <template #activator="{ open }">
-      <BaseButton
-        v-bind="$attrs"
-        @click="
-          actions.resetWorking();
-          open();
-        "
-      ></BaseButton>
-    </template>
-  </BaseDialog>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from "@nuxtjs/composition-api";
-import { useFoods } from "~/composables/use-recipe-foods";
-import { validators } from "~/composables/use-validators";
-export default defineComponent({
-  setup() {
-    const domCreateFoodForm = ref(null);
-    const { workingFoodData, actions, validForm } = useFoods();
-    return { validators, workingFoodData, actions, domCreateFoodForm, validForm };
-  },
-});
-</script>
-

frontend/components/Domain/Recipe/RecipeIngredientUnitDialog.vue

@@ -1,40 +0,0 @@
-<template>
-  <BaseDialog
-    title="Create Unit"
-    :icon="$globals.icons.units"
-    :keep-open="!validForm"
-    @submit="actions.createOne(domCreateUnitForm)"
-  >
-    <v-card-text>
-      <v-form ref="domCreateUnitForm">
-        <v-text-field v-model="workingUnitData.name" label="Name" :rules="[validators.required]"></v-text-field>
-        <v-text-field v-model="workingUnitData.abbreviation" label="Abbreviation"></v-text-field>
-        <v-text-field v-model="workingUnitData.description" label="Description"></v-text-field>
-        <v-switch v-model="workingUnitData.fraction" label="Display as Fraction"></v-switch>
-      </v-form>
-    </v-card-text>
-    <template #activator="{ open }">
-      <BaseButton
-        v-bind="$attrs"
-        @click="
-          actions.resetWorking();
-          open();
-        "
-      ></BaseButton>
-    </template>
-  </BaseDialog>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from "@nuxtjs/composition-api";
-import { useUnits } from "~/composables/use-recipe-units";
-import { validators } from "~/composables/use-validators";
-export default defineComponent({
-  setup() {
-    const domCreateUnitForm = ref(null);
-    const { workingUnitData, actions, validForm } = useUnits();
-    return { validators, workingUnitData, actions, validForm, domCreateUnitForm };
-  },
-});
-</script>
-

frontend/components/Layout/AppSidebar.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-navigation-drawer :value="value" clipped app width="240px">
+  <v-navigation-drawer class="d-flex flex-column" :value="value" clipped app width="240px">
     <!-- User Profile -->
     <template v-if="$auth.user">
       <v-list-item two-line to="/user/profile" exact>
@@ -101,8 +101,8 @@
     </template>
 
     <!-- Bottom Navigation Links -->
-    <template v-if="bottomLinks">
-      <v-list class="fixedBottom" nav dense>
+    <template v-if="bottomLinks" #append>
+      <v-list nav dense>
         <v-list-item-group v-model="bottomSelected" color="primary">
           <template v-for="nav in bottomLinks">
             <v-list-item
@@ -175,12 +175,6 @@ export default defineComponent({
 </script>
   
 <style>
-.fixedBottom {
-  position: fixed !important;
-  bottom: 0 !important;
-  width: 100%;
-}
-
 @media print {
   .no-print {
     display: none;

frontend/components/global/BaseCardSectionTitle.vue

@@ -6,7 +6,7 @@
       </v-icon>
       {{ title }}
     </v-card-title>
-    <v-card-text class="pt-2">
+    <v-card-text v-if="$slots.default" class="pt-2">
       <p class="pb-0 mb-0">
         <slot />
       </p>