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/api/class-interfaces/groups.ts

@@ -59,10 +59,10 @@ export interface Invitation {
 }
 
 export interface SetPermissions {
-  userId: number;
-  canInvite: boolean;
-  canManage: boolean;
-  canOrganize: boolean;
+  userId: string;
+  canInvite?: boolean;
+  canManage?: boolean;
+  canOrganize?: boolean;
 }
 
 export class GroupAPI extends BaseCRUDAPI<GroupInDB, CreateGroup> {
@@ -87,7 +87,8 @@ export class GroupAPI extends BaseCRUDAPI<GroupInDB, CreateGroup> {
   }
 
   async setPreferences(payload: UpdatePreferences) {
-    return await this.requests.put<Preferences>(routes.preferences, payload);
+    // TODO: This should probably be a patch request, which isn't offered by the API currently
+    return await this.requests.put<Preferences, UpdatePreferences>(routes.preferences, payload);
   }
 
   async createInvitation(payload: CreateInvitation) {
@@ -99,6 +100,7 @@ export class GroupAPI extends BaseCRUDAPI<GroupInDB, CreateGroup> {
   }
 
   async setMemberPermissions(payload: SetPermissions) {
-    return await this.requests.put<UserOut>(routes.permissions, payload);
+    // TODO: This should probably be a patch request, which isn't offered by the API currently
+    return await this.requests.put<Permissions, SetPermissions>(routes.permissions, payload);
   }
 }

frontend/api/class-interfaces/recipe-bulk-actions.ts

@@ -6,6 +6,7 @@ interface BasePayload {
 
 type exportType = "json";
 
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface RecipeBulkDelete extends BasePayload {}
 
 interface RecipeBulkExport extends BasePayload {

frontend/api/class-interfaces/recipes/recipe.ts

@@ -80,30 +80,13 @@ export class RecipeAPI extends BaseCRUDAPI<Recipe, CreateRecipe> {
   }
 
   async createOneByUrl(url: string) {
-    return await this.requests.post(routes.recipesCreateUrl, { url });
+    return await this.requests.post<string>(routes.recipesCreateUrl, { url });
   }
 
   async createManyByUrl(payload: BulkCreatePayload) {
     return await this.requests.post(routes.recipesCreateUrlBulk, payload);
   }
 
-  // Methods to Generate reference urls for assets/images *
-  recipeImage(recipeSlug: string, version = null, key = null) {
-    return `/api/media/recipes/${recipeSlug}/images/original.webp?&rnd=${key}&version=${version}`;
-  }
-
-  recipeSmallImage(recipeSlug: string, version = null, key = null) {
-    return `/api/media/recipes/${recipeSlug}/images/min-original.webp?&rnd=${key}&version=${version}`;
-  }
-
-  recipeTinyImage(recipeSlug: string, version = null, key = null) {
-    return `/api/media/recipes/${recipeSlug}/images/tiny-original.webp?&rnd=${key}&version=${version}`;
-  }
-
-  recipeAssetPath(recipeSlug: string, assetName: string) {
-    return `/api/media/recipes/${recipeSlug}/assets/${assetName}`;
-  }
-
   async parseIngredients(parser: Parser, ingredients: Array<string>) {
     parser = parser || "nlp";
     return await this.requests.post<ParsedIngredient[]>(routes.recipesParseIngredients, { parser, ingredients });

frontend/api/class-interfaces/recipes/types.ts

@@ -1,5 +1,6 @@
 import { Category } from "../categories";
 import { Tag } from "../tags";
+import { CreateIngredientFood, CreateIngredientUnit, IngredientFood, IngredientUnit } from "~/types/api-types/recipe";
 
 export type Parser = "nlp" | "brute";
 
@@ -12,26 +13,14 @@ export interface Confidence {
   food?: number;
 }
 
-export interface Unit {
-  name: string;
-  description: string;
-  fraction: boolean;
-  abbreviation: string;
-}
-
-export interface Food {
-  name: string;
-  description?: string;
-}
-
 export interface Ingredient {
-  referenceId: string;
-  title: string;
-  note: string;
-  unit: Unit | null;
-  food: Food | null;
-  disableAmount: boolean;
-  quantity: number;
+  title?: string;
+  note?: string;
+  unit?: IngredientUnit | CreateIngredientUnit;
+  food?: IngredientFood | CreateIngredientFood;
+  disableAmount?: boolean;
+  quantity?: number;
+  referenceId?: string;
 }
 
 export interface ParsedIngredient {

frontend/api/class-interfaces/upload.ts

@@ -2,6 +2,6 @@ import { BaseAPI } from "../_base";
 
 export class UploadFile extends BaseAPI {
   file(url: string, fileObject: any) {
-    return this.requests.post(url, fileObject);
+    return this.requests.post<string>(url, fileObject);
   }
 }

frontend/api/class-interfaces/utils.ts

@@ -11,10 +11,10 @@ export class UtilsAPI extends BaseAPI {
     }
 
     // @ts-ignore
-    const token: String = response.data.fileToken;
+    const token: string = response.data.fileToken;
 
     const tokenURL = prefix + "/utils/download?token=" + token;
     window.open(tokenURL, "_blank");
-    return await response;
+    return response;
   }
 }