WIP supermarket category editor

vue3/src/components/model_editors/SupermarketEditor.vue

@@ -33,7 +33,8 @@
  </v-btn>
  </h3>
 
- <draggable class="mt-4" tag="VList" v-model="supermarketCategories" handle=".drag-handle" item-key="id" group="categories">
+ <draggable class="mt-4" tag="VList" v-model="unusedSupermarketCategories" handle=".drag-handle" item-key="id" group="categories"
+ >
  <template #item="{element}">
  <v-list-item border :key="element.id">
  <template #prepend>
@@ -49,16 +50,20 @@
  <h3> {{ $t('SelectedCategories') }} </h3>
  <draggable
  tag="VList"
- v-model="editingObj.categoryToSupermarket"
+ v-model="editingObjSupermarketCategories"
  handle=".drag-handle" item-key="id" group="categories"
- >
+ :empty-insert-threshold="20"
+ @sort="updateEditingObjectSupermarketCategoryRelation"
+ @add="addTest"
+ @remove="removeTest"
+ >
  <template #item="{element}">
  <v-list-item border :key="element.id">
  <template #prepend>
  <v-icon class="drag-handle" icon="$dragHandle"></v-icon>
  </template>
- {{ element.category.name }}
- {{ element.order }}
+ {{ element.name }}
+
  <template #append>
  <v-btn color="warning">
  <i class="fa-solid fa-link-slash"></i>
@@ -84,12 +89,13 @@
 
 <script setup lang="ts">
 
-import {onMounted, PropType, ref} from "vue";
-import {ApiApi, Supermarket, SupermarketCategory} from "@/openapi";
+import {computed, onMounted, PropType, ref} from "vue";
+import {ApiApi, Supermarket, SupermarketCategory, SupermarketCategoryRelation} from "@/openapi";
 import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
 import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
 import draggable from "vuedraggable";
+import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
 
 const props = defineProps({
  item: {type: {} as PropType<Supermarket>, required: false, default: null},
@@ -104,6 +110,11 @@ const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading,
 const tab = ref("categories")
 
 const supermarketCategories = ref([] as SupermarketCategory[])
+const editingObjSupermarketCategories = ref([] as SupermarketCategory[])
+
+const unusedSupermarketCategories = computed(() => {
+ return supermarketCategories.value.filter(e => !editingObjSupermarketCategories.value.includes(e))
+})
 
 onMounted(() => {
  const api = new ApiApi()
@@ -114,9 +125,42 @@ onMounted(() => {
 
  api.apiSupermarketCategoryList({pageSize: 100}).then(r => {
  supermarketCategories.value = r.results
+ 
+ //TODO fix performing this in a way that async setupState works
+ editingObj.value.categoryToSupermarket.forEach(cTS => {
+ editingObjSupermarketCategories.value.push(cTS.category)
+ })
  })
 })
 
+function updateEditingObjectSupermarketCategoryRelation(operation: any) {
+ if (operation.to == operation.from) {
+ console.log('sort', operation)
+ }
+}
+
+function addTest(operation: any) {
+ let api = new ApiApi()
+
+ if (typeof operation.newIndex == "number" && editingObjSupermarketCategories.value.length >= operation.newIndex) {
+ let sC = {
+ category: editingObjSupermarketCategories.value[operation.newIndex],
+ order: operation.newIndex,
+ supermarket: editingObj.value.id,
+ } as SupermarketCategoryRelation
+
+ api.apiSupermarketCategoryRelationCreate({supermarketCategoryRelation: sC}).then(r => {
+
+ }).catch((err: any) => {
+ useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
+ })
+ }
+}
+
+function removeTest(operation: any) {
+ console.log('remove', operation)
+}
+
 </script>
 
 <style scoped>