lucia-frontend/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue

<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 && 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" :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)">
                  <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 {
  props: ['data', 'listSeq', 'isSubmit'],
  data() {
    return {
      listSequence: [],
      lastItemIndex: null,
    }
  },
  computed: {
    datadata: function() {
      // TODO Activity List 的 dblclick, drag & drop 要改假刪除
      // Activity List 要排序
      let newData;
      if(this.data !== null) {
        newData = JSON.parse(JSON.stringify(this.data));
        sortNumEngZhtw(newData);
      }
      return newData;
    },
  },
  methods: {
    /**
     * double click Activity List
     * @param {number} index data item index
     * @param {object} element data item
     */
    moveActItem(index, element){
      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);
    },
    /**
     * get listSequence
     */
    getComponentData(){
      this.$emitter.emit('getListSequence',this.listSequence);
    },
    /**
     * 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;
    },
  },
  created() {
    this.$emitter.on('reset', (data) => {
      this.listSequence = [];
    });
  },
  mounted() {
    let newlist = JSON.parse(JSON.stringify(this.listSeq));
    this.isSubmit ? this.listSequence = newlist : this.listSequence = [];
  },
}
</script>
<style scoped>
.ghostSelected {
  @apply bg-primary/20
}
.dragSelected {
  @apply !opacity-100
}
</style>