Feature/shopping lists second try (#927)

* generate types

* use generated types

* ui updates

* init button link for common styles

* add links

* setup label views

* add delete confirmation

* reset when not saved

* link label to foods and auto set when adding to shopping list

* generate types

* use inheritence to manage exception handling

* fix schema generation and add test for open_api generation

* add header to api docs

* move list consilidation to service

* split list and list items controller

* shopping list/list item tests - PARTIAL

* enable recipe add/remove in shopping lists

* generate types

* linting

* init global utility components

* update types and add list item api

* fix import cycle and database error

* add container and border classes

* new recipe list component

* fix tests

* breakout item editor

* refactor item editor

* update bulk actions

* update input / color contrast

* type generation

* refactor controller dependencies

* include food/unit editor

* remove console.logs

* fix and update type generation

* fix incorrect type for column

* fix postgres error

* fix delete by variable

* auto remove refs

* fix typo

frontend/composables/recipes/use-recipe-foods.ts

@@ -1,10 +1,10 @@
 import { useAsync, ref, reactive, Ref } from "@nuxtjs/composition-api";
 import { useAsyncKey } from "../use-utils";
 import { useUserApi } from "~/composables/api";
-import { Food } from "~/api/class-interfaces/recipe-foods";
-import { VForm} from "~/types/vuetify";
+import { VForm } from "~/types/vuetify";
+import { IngredientFood } from "~/types/api-types/recipe";
 
-let foodStore: Ref<Food[] | null> | null = null;
+let foodStore: Ref<IngredientFood[] | null> | null = null;
 
 export const useFoods = function () {
   const api = useUserApi();
@@ -16,6 +16,7 @@ export const useFoods = function () {
     id: 0,
     name: "",
     description: "",
+    labelId: "",
   });
 
   const actions = {
@@ -64,6 +65,7 @@ export const useFoods = function () {
       }
 
       loading.value = true;
+      console.log(workingFoodData);
       const { data } = await api.foods.updateOne(workingFoodData.id, workingFoodData);
       if (data && foodStore?.value) {
         this.refreshAll();
@@ -81,11 +83,13 @@ export const useFoods = function () {
       workingFoodData.id = 0;
       workingFoodData.name = "";
       workingFoodData.description = "";
+      workingFoodData.labelId = "";
     },
-    setWorking(item: Food) {
+    setWorking(item: IngredientFood) {
       workingFoodData.id = item.id;
       workingFoodData.name = item.name;
-      workingFoodData.description = item.description;
+      workingFoodData.description = item.description || "";
+      workingFoodData.labelId = item.labelId || "";
     },
     flushStore() {
       foodStore = null;

frontend/composables/use-copy.ts

@@ -0,0 +1,49 @@
+import { useClipboard } from "@vueuse/core";
+import { alert } from "./use-toast";
+
+export function useCopyList() {
+  const { copy, isSupported } = useClipboard();
+
+  function checkClipboard() {
+    if (!isSupported) {
+      alert.error("Your browser does not support clipboard");
+      return false;
+    }
+
+    return true;
+  }
+
+  function copyPlain(list: string[]) {
+    if (!checkClipboard()) return;
+
+    const text = list.join("\n");
+    copyText(text, list.length);
+  }
+
+  function copyMarkdown(list: string[]) {
+    if (!checkClipboard()) return;
+
+    const text = list.map((item) => `- ${item}`).join("\n");
+    copyText(text, list.length);
+  }
+
+  function copyMarkdownCheckList(list: string[]) {
+    if (!checkClipboard()) return;
+
+    const text = list.map((item) => `- [ ] ${item}`).join("\n");
+    copyText(text, list.length);
+  }
+
+  function copyText(text: string, len: number) {
+    copy(text).then(() => {
+      alert.success(`Copied ${len} items to clipboard`);
+    });
+  }
+
+  return {
+    copyPlain,
+    copyMarkdown,
+    copyMarkdownCheckList,
+  };
+}
+

frontend/composables/use-display-text.ts

@@ -0,0 +1,39 @@
+/**
+ * use-display-text module contains helpful utility functions to compute the display text when provided
+ * with the food, units, quantity, and notes.
+ */
+
+import { IngredientFood, IngredientUnit } from "~/types/api-types/recipe";
+
+export function getDisplayText(
+  notes = "",
+  quantity: number | null = null,
+  food: IngredientFood | null = null,
+  unit: IngredientUnit | null = null
+): string {
+  // Fallback to note only if no food or unit is provided
+  if (food === null && unit === null) {
+    return `${quantity || ""} ${notes}`.trim();
+  }
+
+  // Otherwise build the display text
+  let displayText = "";
+
+  if (quantity) {
+    displayText += quantity;
+  }
+
+  if (unit) {
+    displayText += ` ${unit.name}`;
+  }
+
+  if (food) {
+    displayText += ` ${food.name}`;
+  }
+
+  if (notes) {
+    displayText += ` ${notes}`;
+  }
+
+  return displayText.trim();
+}