Fix more typing issues (#928)

* Fix or comment several ts-ignores

* Fix typing related to BaseOverflowButton

* Remove unused functionality of useCookbooks, fix usage bug

* Fix more typing, add some comments

* Only allow ts-ignore if it has a comment

frontend/pages/admin/manage/groups/_id.vue

@@ -27,11 +27,9 @@
 import { defineComponent, useRoute, onMounted, ref } from "@nuxtjs/composition-api";
 import GroupPreferencesEditor from "~/components/Domain/Group/GroupPreferencesEditor.vue";
 import { useAdminApi } from "~/composables/api";
-import { useGroups } from "~/composables/use-groups";
 import { alert } from "~/composables/use-toast";
-import { useUserForm } from "~/composables/use-users";
-import { validators } from "~/composables/use-validators";
 import { VForm } from "~/types/vuetify";
+import { GroupRead } from "~/api/admin/admin-groups";
 
 export default defineComponent({
   components: {
@@ -39,8 +37,6 @@ export default defineComponent({
   },
   layout: "admin",
   setup() {
-    const { userForm } = useUserForm();
-    const { groups } = useGroups();
     const route = useRoute();
 
     const groupId = route.value.params.id;
@@ -52,7 +48,7 @@ export default defineComponent({
 
     const adminApi = useAdminApi();
 
-    const group = ref({});
+    const group = ref<GroupRead | null>(null);
 
     const userError = ref(false);
 
@@ -65,20 +61,17 @@ export default defineComponent({
       }
 
       if (data) {
-        // @ts-ignore
         group.value = data;
       }
     });
 
     async function handleSubmit() {
-      if (!refGroupEditForm.value?.validate()) {
+      if (!refGroupEditForm.value?.validate() || group.value === null) {
         return;
       }
 
-      // @ts-ignore
       const { response, data } = await adminApi.groups.updateOne(group.value.id, group.value);
       if (response?.status === 200 && data) {
-        // @ts-ignore
         group.value = data;
       }
     }
@@ -86,11 +79,8 @@ export default defineComponent({
     return {
       group,
       userError,
-      userForm,
       refGroupEditForm,
       handleSubmit,
-      groups,
-      validators,
     };
   },
 });

frontend/pages/admin/manage/users/_id.vue

@@ -45,6 +45,7 @@ import { alert } from "~/composables/use-toast";
 import { useUserForm } from "~/composables/use-users";
 import { validators } from "~/composables/use-validators";
 import { VForm } from "~/types/vuetify";
+import { UserOut } from "~/types/api-types/user";
 
 export default defineComponent({
   layout: "admin",
@@ -62,19 +63,7 @@ export default defineComponent({
 
     const adminApi = useAdminApi();
 
-    const user = ref({
-      username: "",
-      fullName: "",
-      email: "",
-      admin: false,
-      group: "",
-      advanced: false,
-      canInvite: false,
-      canManage: false,
-      canOrganize: false,
-      id: 0,
-      groupId: 0,
-    });
+    const user = ref<UserOut | null>(null);
 
     const userError = ref(false);
 
@@ -87,19 +76,16 @@ export default defineComponent({
       }
 
       if (data) {
-        // @ts-ignore
         user.value = data;
       }
     });
 
     async function handleSubmit() {
-      if (!refNewUserForm.value?.validate()) return;
+      if (!refNewUserForm.value?.validate() || user.value === null) return;
 
-      // @ts-ignore
       const { response, data } = await adminApi.users.updateOne(user.value.id, user.value);
 
       if (response?.status === 200 && data) {
-        // @ts-ignore
         user.value = data;
       }
     }

frontend/pages/admin/parser.vue

@@ -71,6 +71,8 @@ import { defineComponent, reactive, ref, toRefs } from "@nuxtjs/composition-api"
 import { Confidence, Parser } from "~/api/class-interfaces/recipes/types";
 import { useUserApi } from "~/composables/api";
 
+type ConfidenceAttribute = "average" | "comment" | "name" | "unit" | "quantity" | "food";
+
 export default defineComponent({
   layout: "admin",
   setup() {
@@ -85,11 +87,12 @@ export default defineComponent({
 
     const confidence = ref<Confidence>({});
 
-    function getColor(attribute: string) {
+    function getColor(attribute: ConfidenceAttribute) {
       const percentage = getConfidence(attribute);
+      if (percentage === undefined)
+        return;
 
-      // @ts-ignore
-      const p_as_num = parseFloat(percentage?.replace("%", ""));
+      const p_as_num = parseFloat(percentage.replace("%", ""));
 
       // Set color based off range
       if (p_as_num > 75) {
@@ -101,18 +104,16 @@ export default defineComponent({
       }
     }
 
-    function getConfidence(attribute: string) {
-      attribute = attribute.toLowerCase();
+    function getConfidence(attribute: ConfidenceAttribute) {
       if (!confidence.value) {
         return;
       }
 
-      // @ts-ignore
-      const property: number = confidence.value[attribute];
-      if (property) {
+      const property = confidence.value[attribute];
+      if (property !== undefined) {
         return `${(property * 100).toFixed(0)}%`;
       }
-      return null;
+      return undefined;
     }
 
     const tryText = [
@@ -150,18 +151,18 @@ export default defineComponent({
         properties.unit.value = data.ingredient?.unit?.name || "";
         properties.food.value = data.ingredient?.food?.name || "";
 
-        for (const property in properties) {
+        (["comment", "quantity", "unit", "food"] as ConfidenceAttribute[]).forEach(property => {
           const color = getColor(property);
           const confidence = getConfidence(property);
           if (color) {
-            // @ts-ignore
+            // @ts-ignore See above
             properties[property].color = color;
           }
           if (confidence) {
-            // @ts-ignore
+            // @ts-ignore See above
             properties[property].confidence = confidence;
           }
-        }
+        });
       }
       state.loading = false;
     }
@@ -169,7 +170,7 @@ export default defineComponent({
     const properties = reactive({
       quantity: {
         subtitle: "Quantity",
-        value: "" as any,
+        value: "" as string | number,
         color: null,
         confidence: null,
       },

frontend/pages/admin/site-settings.vue

@@ -86,7 +86,7 @@ import {
   useAsync,
   useContext,
 } from "@nuxtjs/composition-api";
-import { AdminAboutInfo, CheckAppConfig } from "~/api/admin/admin-about";
+import { CheckAppConfig } from "~/api/admin/admin-about";
 import { useAdminApi, useUserApi } from "~/composables/api";
 import { validators } from "~/composables/use-validators";
 import { useAsyncKey } from "~/composables/use-utils";
@@ -96,6 +96,7 @@ interface SimpleCheck {
   text: string;
   successText: string;
   errorText: string;
+  warning: boolean;
 }
 
 export default defineComponent({
@@ -209,8 +210,7 @@ export default defineComponent({
 
     const { $globals, i18n } = useContext();
 
-    // @ts-ignore
-    const rawAppInfo = ref<AdminAboutInfo>({
+    const rawAppInfo = ref({
       version: "null",
       versionLatest: "null",
     });
@@ -220,7 +220,8 @@ export default defineComponent({
         const { data } = await adminApi.about.about();
 
         if (data) {
-          rawAppInfo.value = data;
+          rawAppInfo.value.version = data.version;
+          rawAppInfo.value.versionLatest = data.versionLatest;
 
           const prettyInfo = [
             {

frontend/pages/recipe/_slug/cook.vue

@@ -77,7 +77,7 @@
 
 <script lang="ts">
 import { defineComponent, useRoute, ref } from "@nuxtjs/composition-api";
-// @ts-ignore
+// @ts-ignore vue-markdown has no types
 import VueMarkdown from "@adapttive/vue-markdown";
 import { useStaticRoutes } from "~/composables/api";
 import { parseIngredientText, useRecipe } from "~/composables/recipes";

frontend/pages/recipe/_slug/index.vue

@@ -446,7 +446,7 @@ import {
   useRouter,
   onMounted,
 } from "@nuxtjs/composition-api";
-// @ts-ignore
+// @ts-ignore vue-markdown has no types
 import VueMarkdown from "@adapttive/vue-markdown";
 import draggable from "vuedraggable";
 import { invoke, until } from "@vueuse/core";
@@ -469,9 +469,8 @@ import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientE
 import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue";
 import RecipeTools from "~/components/Domain/Recipe/RecipeTools.vue";
 import RecipeComments from "~/components/Domain/Recipe/RecipeComments.vue";
-import { Recipe } from "~/types/api-types/recipe";
+import { Recipe, RecipeTool } from "~/types/api-types/recipe";
 import { uuid4, deepCopy } from "~/composables/use-utils";
-import { Tool } from "~/api/class-interfaces/tools";
 import { useRouteQuery } from "~/composables/use-router";
 
 export default defineComponent({
@@ -505,9 +504,8 @@ export default defineComponent({
 
     console.log({ working: this.recipe, saved: this.originalRecipe });
 
-    if (this.form && !isSame) {
+    if (this.form && !isSame && this.recipe?.slug !== undefined) {
       if (window.confirm("You have unsaved changes. Do you want to save before leaving?")) {
-        // @ts-ignore
         await this.api.recipes.updateOne(this.recipe.slug, this.recipe);
       }
     }
@@ -536,14 +534,11 @@ export default defineComponent({
     // ===============================================================
     // Check Before Leaving
 
-    const domSaveChangesDialog = ref(null);
-
     const state = reactive({
       form: false,
       scale: 1,
       hideImage: false,
       imageKey: 1,
-      loadFailed: false,
       skeleton: false,
       jsonEditor: false,
       jsonEditorOptions: {
@@ -567,11 +562,11 @@ export default defineComponent({
 
     const { recipeImage } = useStaticRoutes();
 
-    const { $vuetify } = useContext();
 
     // ===========================================================================
     // Layout Helpers
 
+    const { $vuetify } = useContext();
     const enableLandscape = computed(() => {
       const preferLandscape = recipe?.value?.settings?.landscapeView;
       const smallScreen = !$vuetify.breakpoint.smAndUp;
@@ -585,6 +580,10 @@ export default defineComponent({
       return false;
     });
 
+    const imageHeight = computed(() => {
+      return $vuetify.breakpoint.xs ? "200" : "400";
+    });
+
     // ===========================================================================
     // Button Click Event Handlers
 
@@ -604,6 +603,10 @@ export default defineComponent({
       }
     }
 
+    function printRecipe() {
+      window.print();
+    }
+
     async function closeEditor() {
       state.form = false;
       state.jsonEditor = false;
@@ -687,7 +690,10 @@ export default defineComponent({
     // ===============================================================
     // Recipe Tools
 
-    async function updateTool(tool: Tool) {
+    async function updateTool(tool: RecipeTool) {
+      if (tool.id === undefined)
+        return;
+      
       const { response } = await api.tools.updateOne(tool.id, tool);
 
       if (response?.status === 200) {
@@ -735,7 +741,6 @@ export default defineComponent({
     // ===============================================================
     // Metadata
 
-    // @ts-ignore
     const metaData = useRecipeMeta(recipe);
 
     useMeta(metaData);
@@ -743,9 +748,8 @@ export default defineComponent({
     return {
       createApiExtra,
       apiNewKey,
-      originalRecipe,
-      domSaveChangesDialog,
       enableLandscape,
+      imageHeight,
       scaledYield,
       toggleJson,
       ...toRefs(state),
@@ -754,6 +758,7 @@ export default defineComponent({
       loading,
       addStep,
       deleteRecipe,
+      printRecipe,
       closeEditor,
       updateTool,
       updateRecipe,
@@ -765,15 +770,5 @@ export default defineComponent({
     };
   },
   head: {},
-  computed: {
-    imageHeight() {
-      return this.$vuetify.breakpoint.xs ? "200" : "400";
-    },
-  },
-  methods: {
-    printRecipe() {
-      window.print();
-    },
-  },
 });
 </script>

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

@@ -135,7 +135,6 @@ export default defineComponent({
       if (data) {
         parsedIng.value = data;
 
-        // @ts-ignore
         errors.value = data.map((ing, index: number) => {
           const unitError = !checkForUnit(ing.ingredient.unit);
           const foodError = !checkForFood(ing.ingredient.food);

frontend/pages/recipe/create.vue

@@ -332,7 +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";
+import { VForm } from "~/types/vuetify";
+import { MenuItem } from "~/components/global/BaseOverflowButton.vue";
 
 export default defineComponent({
   components: { VJsoneditor, RecipeCategoryTagSelector },
@@ -344,7 +345,7 @@ export default defineComponent({
 
     const { $globals } = useContext();
 
-    const tabs = [
+    const tabs: MenuItem[] = [
       {
         icon: $globals.icons.link,
         text: "Import with URL",
@@ -422,48 +423,36 @@ export default defineComponent({
 
     // ===================================================
     // Recipe URL Import
-    // @ts-ignore
-    const domUrlForm = ref<VForm>(null);
+    const domUrlForm = ref<VForm | null>(null);
 
     async function createByUrl(url: string) {
-      if (!domUrlForm.value.validate() || url === "") {
+      if (!domUrlForm.value?.validate() || url === "") {
         console.log("Invalid URL", url);
         return;
       }
       state.loading = true;
       const { response } = await api.recipes.createOneByUrl(url);
-      if (response?.status !== 201) {
-        // @ts-ignore
-        if (!response?.error?.response?.data?.detail?.message) {
-          state.error = true;
-        }
-
-        state.loading = false;
-        return;
-      }
       handleResponse(response);
     }
 
     // ===================================================
     // Recipe Create By Name
     const newRecipeName = ref("");
-    // @ts-ignore
-    const domCreateByName = ref<VForm>(null);
+    const domCreateByName = ref<VForm | null>(null);
 
     async function createByName(name: string) {
-      if (!domCreateByName.value.validate() || name === "") {
+      if (!domCreateByName.value?.validate() || name === "") {
         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
+      // @ts-ignore See above
       handleResponse(response, true);
     }
 
     // ===================================================
     // Recipe Import From Zip File
-    // @ts-ignore
-    const newRecipeZip = ref<File>(null);
+    const newRecipeZip = ref<File | null>(null);
     const newRecipeZipFileName = "archive";
 
     async function createByZip() {

frontend/pages/recipes/all.vue

@@ -47,9 +47,7 @@ export default defineComponent({
     }, 500);
 
     function removeRecipe(slug: string) {
-      // @ts-ignore
       for (let i = 0; i < recipes?.value?.length; i++) {
-        // @ts-ignore
         if (recipes?.value[i].slug === slug) {
           recipes?.value.splice(i, 1);
           break;

frontend/pages/recipes/categories/_slug.vue

@@ -115,7 +115,6 @@ export default defineComponent({
   methods: {
     assignSorted(val: Array<Recipe>) {
       if (this.category) {
-        // @ts-ignore
         this.category.recipes = val;
       }
     },

frontend/pages/recipes/tags/_slug.vue

@@ -115,7 +115,6 @@ export default defineComponent({
   methods: {
     assignSorted(val: Array<Recipe>) {
       if (this.tags) {
-        // @ts-ignore
         this.tags.recipes = val;
       }
     },

frontend/pages/recipes/tools/_slug.vue

@@ -109,7 +109,6 @@ export default defineComponent({
   methods: {
     assignSorted(val: Array<Recipe>) {
       if (this.tools) {
-        // @ts-ignore
         this.tools.recipes = val;
       }
     },

frontend/pages/register.vue

@@ -129,8 +129,7 @@ export default defineComponent({
       state.joinGroup = true;
     }
 
-    // @ts-ignore
-    const domRegisterForm = ref<VForm>(null);
+    const domRegisterForm = ref<VForm | null>(null);
 
     const form = reactive({
       group: "",

frontend/pages/search.vue

@@ -188,7 +188,7 @@ export default defineComponent({
         const includesTags = check(
           state.includeTags,
 
-          // @ts-ignore
+          // @ts-ignore See above
           recipe.tags.map((x: Tag) => x.name),
           state.tagFilter.matchAny,
           state.tagFilter.exclude
@@ -196,8 +196,7 @@ export default defineComponent({
         const includesCats = check(
           state.includeCategories,
 
-          // @ts-ignore
-
+          // @ts-ignore See above
           recipe.recipeCategory.map((x) => x.name),
           state.catFilter.matchAny,
           state.catFilter.exclude
@@ -205,7 +204,7 @@ export default defineComponent({
         const includesFoods = check(
           state.includeFoods,
 
-          // @ts-ignore
+          // @ts-ignore See above
           recipe.recipeIngredient.map((x) => x?.food?.name || ""),
           state.foodFilter.matchAny,
           state.foodFilter.exclude

frontend/pages/shared/recipes/_id.vue

@@ -270,7 +270,7 @@ import {
   useMeta,
   useRoute,
 } from "@nuxtjs/composition-api";
-// @ts-ignore
+// @ts-ignore vue-markdown has no types
 import VueMarkdown from "@adapttive/vue-markdown";
 // import { useRecipeMeta } from "~/composables/recipes";
 import { useStaticRoutes, useUserApi } from "~/composables/api";
@@ -316,7 +316,6 @@ export default defineComponent({
       },
     });
 
-    // @ts-ignore
     const { recipeImage } = useStaticRoutes();
     const { meta, title } = useMeta();
 
@@ -330,28 +329,25 @@ export default defineComponent({
 
           meta.value = [
             { hid: "og:title", property: "og:title", content: data.name ?? "" },
-            // @ts-ignore
             {
               hid: "og:desc",
               property: "og:description",
-              content: data.description,
+              content: data.description ?? "",
             },
             {
               hid: "og-image",
               property: "og:image",
               content: imageURL ?? "",
             },
-            // @ts-ignore
             {
               hid: "twitter:title",
               property: "twitter:title",
-              content: data.name,
+              content: data.name ?? "",
             },
-            // @ts-ignore
             {
               hid: "twitter:desc",
               property: "twitter:description",
-              content: data.description,
+              content: data.description ?? "",
             },
             { hid: "t-type", name: "twitter:card", content: "summary_large_image" },
           ];

frontend/pages/shopping-lists/_id.vue

@@ -425,7 +425,7 @@ export default defineComponent({
       shoppingList.value?.listItems.forEach((item) => {
         if (item.labelId) {
           labels.push({
-            // @ts-ignore
+            // @ts-ignore TODO
             name: item.label.name,
             id: item.labelId,
           });
@@ -439,7 +439,7 @@ export default defineComponent({
       const items: { [prop: string]: ShoppingListItemCreate[] } = {};
 
       const noLabel = {
-        "No Label": [],
+        "No Label": [] as ShoppingListItemCreate[],
       };
 
       shoppingList.value?.listItems.forEach((item) => {
@@ -450,7 +450,6 @@ export default defineComponent({
             items[item.label.name] = [item];
           }
         } else {
-          // @ts-ignore
           noLabel["No Label"].push(item);
         }
       });

frontend/pages/user/group/data/migrations.vue

@@ -68,6 +68,7 @@
 import { defineComponent, reactive, toRefs, useContext, computed, onMounted } from "@nuxtjs/composition-api";
 import { SupportedMigration } from "~/api/class-interfaces/group-migrations";
 import { ReportSummary } from "~/api/class-interfaces/group-reports";
+import { MenuItem } from "~/components/global/BaseOverflowButton.vue";
 import { useUserApi } from "~/composables/api";
 
 const MIGRATIONS = {
@@ -92,7 +93,7 @@ export default defineComponent({
       reports: [] as ReportSummary[],
     });
 
-    const items = [
+    const items: MenuItem[] = [
       {
         text: "Nextcloud",
         value: MIGRATIONS.nextcloud,

frontend/pages/user/group/data/recipes.vue

@@ -162,6 +162,7 @@ import { useRecipes, allRecipes } from "~/composables/recipes";
 import { Recipe } from "~/types/api-types/recipe";
 import GroupExportData from "~/components/Domain/Group/GroupExportData.vue";
 import { GroupDataExport } from "~/api/class-interfaces/recipe-bulk-actions";
+import { MenuItem } from "~/components/global/BaseOverflowButton.vue";
 
 const MODES = {
   tag: "tag",
@@ -191,7 +192,7 @@ export default defineComponent({
       id: false,
       owner: false,
       tags: true,
-      tools: "Tools",
+      tools: true,
       categories: true,
       recipeYield: false,
       dateAdded: false,
@@ -207,29 +208,25 @@ export default defineComponent({
       dateAdded: "Date Added",
     };
 
-    const actions = [
+    const actions: MenuItem[] = [
       {
         icon: $globals.icons.database,
         text: "Export",
-        value: 0,
         event: "export-selected",
       },
       {
         icon: $globals.icons.tags,
         text: "Tag",
-        value: 1,
         event: "tag-selected",
       },
       {
         icon: $globals.icons.tags,
         text: "Categorize",
-        value: 2,
         event: "categorize-selected",
       },
       {
         icon: $globals.icons.delete,
         text: "Delete",
-        value: 3,
         event: "delete-selected",
       },
     ];
@@ -264,7 +261,6 @@ export default defineComponent({
     // All Recipes
 
     function selectAll() {
-      // @ts-ignore
       selected.value = allRecipes.value;
     }
 

frontend/pages/user/profile/edit.vue

@@ -116,6 +116,7 @@ import { ref, reactive, defineComponent, computed, useContext, watch } from "@nu
 import { useUserApi } from "~/composables/api";
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
 import { VForm } from "~/types/vuetify";
+import { UserOut } from "~/types/api-types/user";
 
 export default defineComponent({
   components: {
@@ -123,7 +124,7 @@ export default defineComponent({
   },
   setup() {
     const nuxtContext = useContext();
-    const user = computed(() => nuxtContext.$auth.user);
+    const user = computed(() => nuxtContext.$auth.user as unknown as UserOut);
 
     watch(user, () => {
       userCopy.value = { ...user.value };
@@ -141,7 +142,6 @@ export default defineComponent({
     });
 
     async function updateUser() {
-      // @ts-ignore
       const { response } = await api.users.updateOne(userCopy.value.id, userCopy.value);
       if (response?.status === 200) {
         nuxtContext.$auth.fetchUser();
@@ -152,7 +152,6 @@ export default defineComponent({
       if (!userCopy.value?.id) {
         return;
       }
-      // @ts-ignore
       const { response } = await api.users.changePassword(userCopy.value.id, {
         currentPassword: password.current,
         newPassword: password.newOne,