Conformance: layout done.(not time range)

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

@@ -0,0 +1,120 @@
+<template>
+  <div class="h-full w-full flex justify-between items-center">
+    <!-- Activity List -->
+    <div class="h-full w-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-2 space-y-2">
+      <p class="h2 pl-2">Activity list</p>
+      <div class="h-[calc(100%_-_48px)]">
+        <p class="h2 pl-2 border-b mb-3">Sort</p>
+        <Draggable :list="datadata" group="activity" itemKey="name" animation="300" @end="onEnd" :fallbackTolerance="5" :forceFallback="true" :ghostClass="'ghostSelected'" :dragClass="'dragSelected'" class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_52px)]">
+          <template #item="{ element, index }">
+            <div class="flex items-center w-[166px] border rounded p-2 bg-neutral-10 cursor-pointer hover:bg-primary/20" @dblclick="moveActItem(index, element)">
+              <span class="whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ element }}</span>
+            </div>
+          </template>
+        </Draggable>
+      </div>
+    </div>
+    <!-- sequence -->
+    <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">
+        <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">
+            <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)">
+                  <span>{{ element }}</span>
+                </div>
+                <span v-show="index !== listSequence.length - 1 && index !== lastItemIndex - 1" class="pi pi-chevron-down !text-lg inline-block py-2"></span>
+              </div>
+            </template>
+          </draggable>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+<script>
+import sortNumEngZhtw from '@/module/sortNumEngZhtw.js';
+
+export default {
+  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);
+    }
+  },
+  methods: {
+    /**
+     * double click Activity List
+     * @param {number} index data item index
+     * @param {object} element data item
+     */
+    moveActItem(index, element){
+      this.data.splice(index, 1);
+      this.listSequence.push(element);
+    },
+    /**
+     * double click Sequence List
+     * @param {number} index data item index
+     * @param {object} element data item
+     */
+    moveSeqItem(index, element){
+      this.listSequence.splice(index, 1);
+      this.data.push(element);
+    },
+    /**
+     * Element dragging started
+     */
+    onStart(evt) {
+      const lastChild = evt.to.lastChild.lastChild;
+      lastChild.style.display = 'none';
+      // 隱藏拖曳元素原位置
+      const originalElement = evt.item;
+      originalElement.style.display = 'none';
+      // 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
+      const listIndex = this.listSequence.length - 1;
+      if(evt.oldIndex === listIndex) this.lastItemIndex  = listIndex;
+    },
+    /**
+     * Element dragging ended
+     */
+    onEnd(evt) {
+      // 顯示拖曳元素
+      const originalElement = evt.item;
+      originalElement.style.display = '';
+      // 拖曳結束要顯示箭頭，但最後一個不用
+      const lastChild = evt.item.lastChild;
+      const listIndex = this.listSequence.length - 1
+      evt.oldIndex !== listIndex ? lastChild.style.display = '' : null;
+      // reset: 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
+      this.lastItemIndex = null;
+      this.$emit('update:listSeq', this.listSequence);
+    },
+
+  }
+}
+</script>
+<style scoped>
+.ghostSelected {
+  @apply bg-primary/20
+}
+.dragSelected {
+  @apply !opacity-100
+}
+</style>