draggable

vue/src/components/GenericHorizontalCard.vue

@@ -1,14 +1,15 @@
 <template>
   <div row style="margin: 4px">
+    <!-- @[useDrag&&`dragover`] <== this syntax completely shuts off draggable  -->
     <b-card no-body d-flex flex-column :class="{'border border-primary' : over, 'shake': isError}"
       :style="{'cursor:grab' : useDrag}"
-      @dragover.prevent
-      @dragenter.prevent
       :draggable="useDrag"
-      @dragstart="handleDragStart($event)"
-      @dragenter="handleDragEnter($event)"
-      @dragleave="handleDragLeave($event)"
-      @drop="handleDragDrop($event)">
+      @[useDrag&&`dragover`].prevent
+      @[useDrag&&`dragenter`].prevent
+      @[useDrag&&`dragstart`]="handleDragStart($event)"
+      @[useDrag&&`dragenter`]="handleDragEnter($event)"
+      @[useDrag&&`dragleave`]="handleDragLeave($event)"
+      @[useDrag&&`drop`]="handleDragDrop($event)">
       <b-row no-gutters >  
         <b-col no-gutters class="col-sm-3">
           <b-card-img-lazy style="object-fit: cover; height: 6em;" :src="item_image" v-bind:alt="$t('Recipe_Image')"></b-card-img-lazy>
@@ -23,6 +24,13 @@
                       :item_list="item[x.field]"
                       :label="x.label"
                       :color="x.color"/>
+                    <generic-ordered-pill v-for="x in itemOrderedTags" :key="x.field"
+                      :item_list="item[x.field]"
+                      :label="x.label"
+                      :color="x.color"
+                      :field="x.field"
+                      :item="item"
+                      @finish-action="finishAction"/>
                     <div class="mt-auto mb-1" align="right">
                       <span v-if="item[child_count]" class="mx-2 btn btn-link btn-sm" 
                         style="z-index: 800;" v-on:click="$emit('item-action',{'action':'get-children','source':item})">
@@ -90,13 +98,14 @@
 import GenericContextMenu from "@/components/GenericContextMenu";
 import Badges from "@/components/Badges";
 import GenericPill from "@/components/GenericPill";
+import GenericOrderedPill from "@/components/GenericOrderedPill";
 import RecipeCard from "@/components/RecipeCard";
 import { mixin as clickaway } from 'vue-clickaway';
 import { createPopper } from '@popperjs/core';
 
 export default {
   name: "GenericHorizontalCard",
-  components: { GenericContextMenu, RecipeCard, Badges, GenericPill},
+  components: { GenericContextMenu, RecipeCard, Badges, GenericPill, GenericOrderedPill},
   mixins: [clickaway],
   props: {
     item: {type: Object},
@@ -142,6 +151,9 @@ export default {
     },
     itemTags: function() {
       return this.model?.tags ?? []
+    },
+    itemOrderedTags: function() {
+      return this.model?.ordered_tags ?? []
     }
   },
   methods: {
@@ -206,6 +218,10 @@ export default {
     closeMenu: function(){
       this.show_menu = false
     },
+    finishAction: function(e){
+      this.$emit('finish-action', e)
+    }
+    
   }
 }
 </script>

vue/src/components/GenericOrderedPill.vue

@@ -0,0 +1,72 @@
+
+<template>
+    <draggable v-if="itemList" v-model="this_list"  tag="span" group="ordered_items" z-index="500"
+      @change="orderChanged">
+      <span :key="k.id" v-for="k in itemList" class="pl-1">
+        <b-badge pill :variant="color">{{thisLabel(k)}}</b-badge>
+      </span>
+    </draggable>
+</template>
+
+
+<script>
+// you can't use this component with a horizontal card that is also draggable
+import draggable from 'vuedraggable'
+
+export default {
+  name: 'GenericOrderedPill',
+  components: {draggable},
+  props: {
+    item_list: {required: true, type: Array},
+    label: {type: String, default: 'name'},
+    color: {type: String, default: 'light'},
+    field: {type: String, required: true},
+    item: {type: Object},
+  },
+  data() {
+    return {
+      this_list: [],
+    }
+  },
+  computed: {
+    itemList: function() {
+      if(Array.isArray(this.this_list)) {
+        return this.this_list
+      } else if (!this.this_list?.name) {
+        return false
+      } else {
+        return [this.this_list]
+      }
+    },
+    
+  },
+  mounted() {
+    this.this_list = this.item_list
+  },
+  watch: {
+    'item_list': function (newVal) {
+      this.this_list = newVal
+    }
+  },
+  methods: {
+    thisLabel: function (item) {
+      let fields = this.label.split('::')
+      let value = item
+      fields.forEach(x => {
+        value = value[x]
+      });
+      return value
+    },
+    orderChanged: function(e){
+      let order = 0
+      this.this_list.forEach(x => {
+        x['order'] = order
+        order++
+      })
+      let new_order = {...this.item}
+      new_order[this.field] = this.this_list
+      this.$emit('finish-action', {'action':'save','form_data': new_order })
+    },
+  }
+}
+</script>