Conformance: Activity sequence, Sequence, Directly follows done.

src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue

@@ -18,13 +18,13 @@
     <div class="w-full h-full relative bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-2 space-y-2 text-sm">
       <p class="h2 border-b border-500 my-2">Sequence</p>
       <!-- No Data -->
-      <div v-if="listSequence.length === 0" class="p-4 w-[calc(100%_-_32px)] h-5/6 flex justify-center items-center absolute">
+      <div v-if="listSequence && listSequence.length === 0" class="p-4 w-[calc(100%_-_32px)] h-5/6 flex justify-center items-center absolute">
         <p class="text-neutral-500">Please drag and drop activity(s) here and sort.</p>
       </div>
       <!-- Have Data -->
       <div class="py-4 m-auto w-full  h-[calc(100%_-_56px)]">
         <div class="w-full h-full overflow-y-auto overflow-x-auto scrollbar px-4 text-center listSequence">
-          <draggable class="h-full" :list="listSequence" group="activity" itemKey="name" animation="300" :forceFallback="true" :dragClass="'dragSelected'" :fallbackTolerance="5" @start="onStart" @end="onEnd">
+          <draggable class="h-full" :list="listSequence" group="activity" itemKey="name" animation="300" :forceFallback="true" :dragClass="'dragSelected'" :fallbackTolerance="5" @start="onStart" @end="onEnd" :component-data="getComponentData()">
             <template #item="{ element, index }">
               <div>
                 <div class="w-full p-2 border rounded bg-neutral-10  cursor-pointer hover:bg-primary/20" @dblclick="moveSeqItem(index, element)">
@@ -44,20 +44,21 @@
 import sortNumEngZhtw from '@/module/sortNumEngZhtw.js';
 
 export default {
+  props: ['data', 'listSeq'],
   data() {
     return {
       actList: null,
       listSequence: [],
       lastItemIndex: null,
-      data:['第三次醫囑', '第四次醫囑','第一次醫囑', '第二次醫囑', 'ddd', 'bbb', 'ccc', 'aaa', 'accc', 'abbb', '1234', '1111', '1222', '1333', '3333', '4444', '0', '1000', '100', '10', '9', '80']
     }
   },
   computed: {
     datadata: function() {
       // TODO Activity List 的 dblclick, drag & drop 要改假刪除
       // Activity List 要排序
-      return sortNumEngZhtw(this.data);
-    }
+      if(this.data !== null) sortNumEngZhtw(this.data);
+      return this.data;
+    },
   },
   methods: {
     /**
@@ -78,6 +79,12 @@ export default {
       this.listSequence.splice(index, 1);
       this.data.push(element);
     },
+    /**
+     * get listSequence
+     */
+    getComponentData(){
+      this.$emitter.emit('getListSequence', this.listSequence);
+    },
     /**
      * Element dragging started
      */
@@ -104,10 +111,13 @@ export default {
       evt.oldIndex !== listIndex ? lastChild.style.display = '' : null;
       // reset: 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
       this.lastItemIndex = null;
-      this.$emit('update:listSeq', this.listSequence);
     },
-
-  }
+  },
+  created() {
+    this.$emitter.on('reset', (data) => {
+      this.listSequence = [];
+    });
+  },
 }
 </script>
 <style scoped>