draggable

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>