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/components/Domain/Recipe/RecipeIngredients.vue

@@ -23,17 +23,20 @@
   </div>
 </template>
 
-<script>
-import { computed, defineComponent } from "@nuxtjs/composition-api";
+<script lang="ts">
+import { computed, defineComponent, reactive, toRefs } from "@nuxtjs/composition-api";
+// @ts-ignore
 import VueMarkdown from "@adapttive/vue-markdown";
 import { parseIngredientText } from "~/composables/recipes";
+import { RecipeIngredient } from "~/types/api-types/recipe";
+
 export default defineComponent({
   components: {
     VueMarkdown,
   },
   props: {
     value: {
-      type: Array,
+      type: Array as () => RecipeIngredient[],
       default: () => [],
     },
     disableAmount: {
@@ -46,6 +49,15 @@ export default defineComponent({
     },
   },
   setup(props) {
+    function validateTitle(title?: string) {
+      return !(title === undefined || title === "");
+    }
+
+    const state = reactive({
+      checked: props.value.map(() => false),
+      showTitleEditor: computed(() => props.value.map((x) => validateTitle(x.title))),
+    });
+
     const ingredientCopyText = computed(() => {
       return props.value
         .map((ingredient) => {
@@ -54,41 +66,18 @@ export default defineComponent({
         .join("\n");
     });
 
-    return { parseIngredientText, ingredientCopyText };
-  },
-  data() {
-    return {
-      drag: false,
-      checked: [],
-      showTitleEditor: [],
-    };
-  },
-  watch: {
-    value: {
-      handler() {
-        this.showTitleEditor = this.value.map((x) => this.validateTitle(x.title));
-      },
-    },
-  },
-  mounted() {
-    this.checked = this.value.map(() => false);
-    this.showTitleEditor = this.value.map((x) => this.validateTitle(x.title));
-  },
-  methods: {
-    toggleChecked(index) {
-      this.$set(this.checked, index, !this.checked[index]);
-    },
+    function toggleChecked(index: number) {
+      // TODO Find a better way to do this - $set is not available, and
+      // direct array modifications are not propagated for some reason
+      state.checked.splice(index, 1, !state.checked[index]);
+    }
 
-    validateTitle(title) {
-      return !(title === null || title === "");
-    },
-    toggleShowTitle(index) {
-      const newVal = !this.showTitleEditor[index];
-      if (!newVal) {
-        this.value[index].title = "";
-      }
-      this.$set(this.showTitleEditor, index, newVal);
-    },
+    return {
+      ...toRefs(state),
+      parseIngredientText,
+      ingredientCopyText,
+      toggleChecked,
+    };
   },
 });
 </script>