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/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>