Feature: Shopping List Label Section Improvements (#2090)

* added backend for shopping list label config

* updated codegen

* refactored shopping list ops to service
removed unique contraint
removed label settings from main route/schema
added new route for label settings

* codegen

* made sure label settings output in position order

* implemented submenu for label order drag and drop

* removed redundant label and tweaked formatting

* added view by label to user preferences

* made items draggable within each label section

* moved reorder labels to its own button

* made dialog scrollable

* fixed broken model

* refactored labels to use a service
moved shopping list label logic to service
modified label seeder to use service

* added tests

* fix for first label missing the tag icon

* fixed wrong mapped type

* added statement to create existing relationships

* fix restore test, maybe

frontend/components/Domain/ShoppingList/MultiPurposeLabelSection.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="d-flex justify-space-between align-center mx-2">
+    <div class="handle">
+      <span class="mr-2">
+        <v-icon>
+          {{ $globals.icons.tags }}
+        </v-icon>
+      </span>
+      {{ value.label.name }}
+    </div>
+    <div style="min-width: 72px" class="ml-auto text-right">
+      <v-menu offset-x left min-width="125px">
+        <template #activator="{ on, attrs }">
+          <v-btn small class="ml-2 handle" icon v-bind="attrs" v-on="on">
+            <v-icon>
+              {{ $globals.icons.arrowUpDown }}
+            </v-icon>
+          </v-btn>
+        </template>
+        <v-list dense>
+          <v-list-item v-for="action in contextMenu" :key="action.event" dense @click="contextHandler(action.event)">
+            <v-list-item-title>{{ action.text }}</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, useContext } from "@nuxtjs/composition-api";
+import { ShoppingListMultiPurposeLabelOut } from "~/lib/api/types/group";
+
+interface actions {
+  text: string;
+  event: string;
+}
+
+export default defineComponent({
+  props: {
+    value: {
+      type: Object as () => ShoppingListMultiPurposeLabelOut,
+      required: true,
+    },
+  },
+  setup(props, context) {
+    const { i18n } = useContext();
+    const contextMenu: actions[] = [
+      {
+        text: i18n.t("general.transfer") as string,
+        event: "transfer",
+      },
+    ];
+
+    function contextHandler(event: string) {
+      context.emit(event);
+    }
+
+    return {
+      contextHandler,
+      contextMenu,
+    };
+  },
+});
+</script>

frontend/components/Domain/ShoppingList/ShoppingListItem.vue

@@ -2,6 +2,7 @@
   <div v-if="!edit" class="d-flex justify-space-between align-center">
     <v-checkbox
       v-model="listItem.checked"
+      class="mt-0"
       color="null"
       hide-details
       dense
@@ -14,11 +15,11 @@
         </div>
       </template>
     </v-checkbox>
-    <MultiPurposeLabel v-if="label" :label="label" class="ml-auto mt-2" small />
+    <MultiPurposeLabel v-if="label && showLabel" :label="label" class="ml-auto" small />
     <div style="min-width: 72px">
       <v-menu offset-x left min-width="125px">
         <template #activator="{ on, attrs }">
-          <v-btn small class="ml-2 mt-2 handle" icon v-bind="attrs" v-on="on">
+          <v-btn small class="ml-2 handle" icon v-bind="attrs" v-on="on">
             <v-icon>
               {{ $globals.icons.arrowUpDown }}
             </v-icon>
@@ -30,7 +31,7 @@
           </v-list-item>
         </v-list>
       </v-menu>
-      <v-btn small class="ml-2 mt-2 handle" icon @click="toggleEdit(true)">
+      <v-btn small class="ml-2 handle" icon @click="toggleEdit(true)">
         <v-icon>
           {{ $globals.icons.edit }}
         </v-icon>
@@ -71,6 +72,10 @@ export default defineComponent({
       type: Object as () => ShoppingListItemOut,
       required: true,
     },
+    showLabel: {
+      type: Boolean,
+      default: false,
+    },
     labels: {
       type: Array as () => MultiPurposeLabelOut[],
       required: true,