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/components/Domain/ShoppingList/MultiPurposeLabel.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-chip v-bind="$attrs" label :color="label.color || undefined" :text-color="textColor">
+    {{ label.name }}
+  </v-chip>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "@nuxtjs/composition-api";
+import { MultiPurposeLabelSummary } from "~/types/api-types/recipe";
+
+export default defineComponent({
+  props: {
+    label: {
+      type: Object as () => MultiPurposeLabelSummary,
+      required: true,
+    },
+  },
+  setup(props) {
+    const textColor = computed(() => {
+      if (!props.label.color) {
+        return "black";
+      }
+
+      return pickTextColorBasedOnBgColorAdvanced(props.label.color, "white", "black");
+    });
+
+    /*
+    Function to pick the text color based on the background color.
+
+    Based on -> https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
+    */
+
+    const ACCESSIBILITY_THRESHOLD = 0.179;
+
+    function pickTextColorBasedOnBgColorAdvanced(bgColor: string, lightColor: string, darkColor: string) {
+      const color = bgColor.charAt(0) === "#" ? bgColor.substring(1, 7) : bgColor;
+      const r = parseInt(color.substring(0, 2), 16); // hexToR
+      const g = parseInt(color.substring(2, 4), 16); // hexToG
+      const b = parseInt(color.substring(4, 6), 16); // hexToB
+      const uicolors = [r / 255, g / 255, b / 255];
+      const c = uicolors.map((col) => {
+        if (col <= 0.03928) {
+          return col / 12.92;
+        }
+        return Math.pow((col + 0.055) / 1.055, 2.4);
+      });
+      const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+      return L > ACCESSIBILITY_THRESHOLD ? darkColor : lightColor;
+    }
+
+    return {
+      textColor,
+    };
+  },
+});
+</script>