From fabf0c28e3551985cd49507262af1f0801a2046b Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Mon, 30 Dec 2024 17:07:38 +0100
Subject: [PATCH] WIP merge button

---
 .../components/dialogs/ModelMergeDialog.vue   | 41 +++++++++++++++++++
 vue3/src/pages/ModelListPage.vue              | 18 ++++++--
 vue3/src/types/Models.ts                      |  3 ++
 vue3/src/vuetify.ts                           |  1 +
 4 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 vue3/src/components/dialogs/ModelMergeDialog.vue

diff --git a/vue3/src/components/dialogs/ModelMergeDialog.vue b/vue3/src/components/dialogs/ModelMergeDialog.vue
new file mode 100644
index 000000000..867410d82
--- /dev/null
+++ b/vue3/src/components/dialogs/ModelMergeDialog.vue
@@ -0,0 +1,41 @@
+<template>
+    <v-dialog max-width="600px" :activator="props.activator" v-model="dialog">
+        <v-card>
+            <v-card-title>{{ $t('merge_title', {type: getGenericModelFromString(props.model).model.name}) }}</v-card-title>
+            <!-- TODO localize model name -->
+            <v-card-text>
+                {{ $t('merge_selection', {source: '', type: getGenericModelFromString(props.model).model.name}) }}
+                <model-select append-to-body :model="props.model"></model-select>
+            </v-card-text>
+            <v-card-actions>
+                <v-btn>{{ $t('Cancel') }}</v-btn>
+                <v-btn color="warning">{{ $t('Merge') }}</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script setup lang="ts">
+
+import ModelSelect from "@/components/inputs/ModelSelect.vue";
+import {PropType} from "vue";
+import {EditorSupportedModels, getGenericModelFromString} from "@/types/Models";
+
+const props = defineProps({
+    model: {type: String as PropType<EditorSupportedModels>, required: true},
+    sourceObject: {},
+    activator: {type: String, default: 'parent'},
+})
+
+const dialog = defineModel<boolean>({default: false})
+
+function mergeModel() {
+    
+}
+
+</script>
+
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/vue3/src/pages/ModelListPage.vue b/vue3/src/pages/ModelListPage.vue
index a40a3347f..0f4a44a9a 100644
--- a/vue3/src/pages/ModelListPage.vue
+++ b/vue3/src/pages/ModelListPage.vue
@@ -44,8 +44,19 @@
                     :items-per-page="useUserPreferenceStore().deviceSettings.general_tableItemsPerPage"
                 >
                     <template v-slot:item.action="{ item }">
-                        <v-btn color="edit" :to="{name: 'ModelEditPage', params: {model: model, id: item.id}}">
-                            <v-icon icon="$edit"></v-icon>
+                        <v-btn class="float-right" icon="$menu" variant="plain">
+                            <v-icon icon="$menu"></v-icon>
+                            <v-menu activator="parent">
+                                <v-list>
+                                    <v-list-item prepend-icon="$edit" :to="{name: 'ModelEditPage', params: {model: model, id: item.id}}">
+                                        {{ $t('Edit') }}
+                                    </v-list-item>
+                                    <v-list-item prepend-icon="fa-solid fa-arrows-to-dot" link>
+                                        {{ $t('Merge') }}
+                                        <model-merge-dialog :model="model" activator="parent"></model-merge-dialog>
+                                    </v-list-item>
+                                </v-list>
+                            </v-menu>
                         </v-btn>
                     </template>
                 </v-data-table-server>
@@ -71,6 +82,7 @@ import {useUrlSearchParams} from "@vueuse/core";
 import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
 import {useRouter} from "vue-router";
 import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
+import ModelMergeDialog from "@/components/dialogs/ModelMergeDialog.vue";
 
 type VDataTableProps = InstanceType<typeof VDataTable>['$props']
 
@@ -156,7 +168,7 @@ function loadItems({page, itemsPerPage, search, sortBy, groupBy}) {
         items.value = r.results
         itemCount.value = r.count
     }).catch((err: any) => {
-            useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
+        useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
     }).finally(() => {
         loading.value = false
         tablePage.value = page // TODO remove once page bug is fixed
diff --git a/vue3/src/types/Models.ts b/vue3/src/types/Models.ts
index edf829f28..67414509c 100644
--- a/vue3/src/types/Models.ts
+++ b/vue3/src/types/Models.ts
@@ -83,6 +83,8 @@ export type Model = {
     disableListView?: boolean | undefined,
 
     isPaginated: boolean | undefined,
+    isMerge?: boolean | undefined,
+    isTree?: boolean | undefined,
 
     tableHeaders: ModelTableHeaders[],
 }
@@ -116,6 +118,7 @@ export const TFood = {
     icon: 'fa-solid fa-carrot',
 
     isPaginated: true,
+    isMerge: true,
     toStringKeys: ['name'],
 
     tableHeaders: [
diff --git a/vue3/src/vuetify.ts b/vue3/src/vuetify.ts
index 9a4a5da76..889b27b08 100644
--- a/vue3/src/vuetify.ts
+++ b/vue3/src/vuetify.ts
@@ -78,6 +78,7 @@ export default createVuetify({
             mealplan: 'fa-solid fa-calendar-days',
             recipes: 'fa-solid fa-book',
             books: 'fa-solid fa-book-open',
+            menu: 'fa-solid fa-ellipsis-vertical'
         },
         sets: {
             fa,