Use composition API for more components, enable more type checking (#914)

* Activate more linting rules from eslint and typescript

* Properly add VForm as type information

* Fix usage of native types

* Fix more linting issues

* Rename vuetify types file, add VTooltip

* Fix some more typing problems

* Use composition API for more components

* Convert RecipeRating

* Convert RecipeNutrition

* Convert more components to composition API

* Fix globals plugin for type checking

* Add missing icon types

* Fix vuetify types in Nuxt context

* Use composition API for RecipeActionMenu

* Convert error.vue to composition API

* Convert RecipeContextMenu to composition API

* Use more composition API and type checking in recipe/create

* Convert AppButtonUpload to composition API

* Fix some type checking in RecipeContextMenu

* Remove unused components BaseAutoForm and BaseColorPicker

* Convert RecipeCategoryTagDialog to composition API

* Convert RecipeCardSection to composition API

* Convert RecipeCategoryTagSelector to composition API

* Properly import vuetify type definitions

* Convert BaseButton to composition API

* Convert AutoForm to composition API

* Remove unused requests API file

* Remove static routes from recipe API

* Fix more type errors

* Convert AppHeader to composition API, fixing some search bar focus problems

* Convert RecipeDialogSearch to composition API

* Update API types from pydantic models, handle undefined values

* Improve more typing problems

* Add types to other plugins

* Properly type the CRUD API access

* Fix typing of static image routes

* Fix more typing stuff

* Fix some more typing problems

* Turn off more rules

frontend/pages/recipe/_slug/cook.vue

@@ -94,12 +94,12 @@ export default defineComponent({
 
     const { recipeImage } = useStaticRoutes();
 
-    function getIngredientByRefId(refId: String) {
+    function getIngredientByRefId(refId: string) {
       if (!recipe.value) {
         return;
       }
 
-      const ing = recipe?.value.recipeIngredient.find((ing) => ing.referenceId === refId) || "";
+      const ing = recipe?.value.recipeIngredient?.find((ing) => ing.referenceId === refId) || "";
       if (ing === "") {
         return "";
       }

frontend/pages/recipe/_slug/index.vue

@@ -34,7 +34,7 @@
           :key="imageKey"
           :max-width="enableLandscape ? null : '50%'"
           :min-height="hideImage ? '50' : imageHeight"
-          :src="recipeImage(recipe.slug, imageKey)"
+          :src="recipeImage(recipe.slug, '', imageKey)"
           class="d-print-none"
           @error="hideImage = true"
         >
@@ -561,7 +561,6 @@ export default defineComponent({
 
     const { recipeImage } = useStaticRoutes();
 
-    // @ts-ignore
     const { $vuetify } = useContext();
 
     // ===========================================================================
@@ -623,7 +622,7 @@ export default defineComponent({
     });
 
     async function uploadImage(fileObject: File) {
-      if (!recipe.value) {
+      if (!recipe.value || !recipe.value.slug) {
         return;
       }
       const newVersion = await api.recipes.updateImage(recipe.value.slug, fileObject);
@@ -656,8 +655,8 @@ export default defineComponent({
             referenceId: uuid4(),
             title: "",
             note: x,
-            unit: null,
-            food: null,
+            unit: undefined,
+            food: undefined,
             disableAmount: true,
             quantity: 1,
           };
@@ -671,8 +670,8 @@ export default defineComponent({
           referenceId: uuid4(),
           title: "",
           note: "",
-          unit: null,
-          food: null,
+          unit: undefined,
+          food: undefined,
           disableAmount: true,
           quantity: 1,
         });
@@ -762,7 +761,6 @@ export default defineComponent({
   head: {},
   computed: {
     imageHeight() {
-      // @ts-ignore
       return this.$vuetify.breakpoint.xs ? "200" : "400";
     },
   },

frontend/pages/recipe/_slug/ingredient-parser.vue

@@ -80,20 +80,21 @@
     </v-container>
   </v-container>
 </template>
-  
+
 <script lang="ts">
 import { defineComponent, ref, useRoute, useRouter } from "@nuxtjs/composition-api";
-import { until, invoke } from "@vueuse/core";
-import { Food, ParsedIngredient, Parser } from "~/api/class-interfaces/recipes/types";
+import { invoke, until } from "@vueuse/core";
+import { ParsedIngredient, Parser } from "~/api/class-interfaces/recipes/types";
+import { CreateIngredientFood, CreateIngredientUnit, IngredientFood, IngredientUnit } from "~/types/api-types/recipe";
 import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
 import { useUserApi } from "~/composables/api";
-import { useRecipe, useFoods, useUnits } from "~/composables/recipes";
-import { RecipeIngredientUnit } from "~/types/api-types/recipe";
+import { useFoods, useRecipe, useUnits } from "~/composables/recipes";
+
 interface Error {
   ingredientIndex: number;
-  unitError: Boolean;
+  unitError: boolean;
   unitErrorMessage: string;
-  foodError: Boolean;
+  foodError: boolean;
   foodErrorMessage: string;
 }
 
@@ -125,10 +126,10 @@ export default defineComponent({
     const parsedIng = ref<ParsedIngredient[]>([]);
 
     async function fetchParsed() {
-      if (!recipe.value) {
+      if (!recipe.value || !recipe.value.recipeIngredient) {
         return;
       }
-      const raw = recipe.value.recipeIngredient.map((ing) => ing.note);
+      const raw = recipe.value.recipeIngredient.map((ing) => ing.note ?? "");
       const { data } = await api.recipes.parseIngredients(parser.value, raw);
 
       if (data) {
@@ -187,7 +188,7 @@ export default defineComponent({
 
     const errors = ref<Error[]>([]);
 
-    function checkForUnit(unit: RecipeIngredientUnit | null) {
+    function checkForUnit(unit?: IngredientUnit | CreateIngredientUnit) {
       if (!unit) {
         return false;
       }
@@ -197,7 +198,7 @@ export default defineComponent({
       return false;
     }
 
-    function checkForFood(food: Food | null) {
+    function checkForFood(food?: IngredientFood | CreateIngredientFood) {
       if (!food) {
         return false;
       }
@@ -207,7 +208,7 @@ export default defineComponent({
       return false;
     }
 
-    async function createFood(food: Food, index: number) {
+    async function createFood(food: CreateIngredientFood, index: number) {
       workingFoodData.name = food.name;
       await actions.createOne();
       errors.value[index].foodError = false;
@@ -227,16 +228,14 @@ export default defineComponent({
           return ing;
         }
         // Get food from foods
-        const food = foods.value.find((f) => f.name === ing.food?.name);
-        ing.food = food || null;
+        ing.food = foods.value.find((f) => f.name === ing.food?.name);
 
         // Get unit from units
-        const unit = units.value.find((u) => u.name === ing.unit?.name);
-        ing.unit = unit || null;
+        ing.unit = units.value.find((u) => u.name === ing.unit?.name);
         return ing;
       });
 
-      if (!recipe.value) {
+      if (!recipe.value || !recipe.value.slug) {
         return;
       }
 
@@ -272,4 +271,4 @@ export default defineComponent({
   },
 });
 </script>
-  
+

frontend/pages/recipe/create.vue

@@ -314,7 +314,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, ref, useRouter, useContext } from "@nuxtjs/composition-api";
+import {
+  defineComponent,
+  reactive,
+  toRefs,
+  ref,
+  useRouter,
+  useContext,
+  computed,
+  useRoute
+} from "@nuxtjs/composition-api";
+import { AxiosResponse } from "axios";
 // @ts-ignore No Types for v-jsoneditor
 import VJsoneditor from "v-jsoneditor";
 import { useUserApi } from "~/composables/api";
@@ -322,6 +332,8 @@ import RecipeCategoryTagSelector from "~/components/Domain/Recipe/RecipeCategory
 import { validators } from "~/composables/use-validators";
 import { Recipe } from "~/types/api-types/recipe";
 import { alert } from "~/composables/use-toast";
+import { VForm} from "~/types/vuetify";
+
 export default defineComponent({
   components: { VJsoneditor, RecipeCategoryTagSelector },
   setup() {
@@ -330,7 +342,6 @@ export default defineComponent({
       loading: false,
     });
 
-    // @ts-ignore - $globals not found in type definition
     const { $globals } = useContext();
 
     const tabs = [
@@ -362,20 +373,39 @@ export default defineComponent({
     ];
 
     const api = useUserApi();
+    const route = useRoute();
     const router = useRouter();
 
-    function handleResponse(response: any, edit: Boolean = false) {
+    function handleResponse(response: AxiosResponse<string> | null, edit = false) {
       if (response?.status !== 201) {
         state.error = true;
         state.loading = false;
         return;
       }
-      router.push(`/recipe/${response.data}?edit=${edit}`);
+      router.push(`/recipe/${response.data}?edit=${edit.toString()}`);
     }
 
+    const tab = computed({
+      set(tab: string) {
+        router.replace({ query: { ...route.value.query, tab } });
+      },
+      get() {
+        return route.value.query.tab as string;
+      },
+    });
+
+    const recipeUrl = computed({
+      set(recipe_import_url: string) {
+        recipe_import_url = recipe_import_url.trim()
+        router.replace({ query: { ...route.value.query, recipe_import_url } });
+      },
+      get() {
+        return route.value.query.recipe_import_url as string;
+      },
+    });
+
     // ===================================================
     // Recipe Debug URL Scraper
-    // @ts-ignore
 
     const debugTreeView = ref(false);
 
@@ -425,6 +455,8 @@ export default defineComponent({
         return;
       }
       const { response } = await api.recipes.createOne({ name });
+      // TODO createOne claims to return a Recipe, but actually the API only returns a string
+      // @ts-ignore
       handleResponse(response, true);
     }
 
@@ -467,6 +499,8 @@ export default defineComponent({
     }
 
     return {
+      tab,
+      recipeUrl,
       bulkCreate,
       bulkUrls,
       lockBulkImport,
@@ -490,30 +524,6 @@ export default defineComponent({
       title: this.$t("general.create") as string,
     };
   },
-  // Computed State is used because of the limitation of vue-composition-api in v2.0
-  computed: {
-    tab: {
-      set(tab) {
-        // @ts-ignore
-        this.$router.replace({ query: { ...this.$route.query, tab } });
-      },
-      get() {
-        // @ts-ignore
-        return this.$route.query.tab;
-      },
-    },
-    recipeUrl: {
-      set(recipe_import_url) {
-        // @ts-ignore
-        recipe_import_url = recipe_import_url.trim()
-        this.$router.replace({ query: { ...this.$route.query, recipe_import_url } });
-      },
-      get() {
-        // @ts-ignore
-        return this.$route.query.recipe_import_url;
-      },
-    },
-  },
 });
 </script>