hrm/app/components/product/ProductHandover.vue

<template>
  <div>
    <!-- Header với nút thêm và upload -->
    <div class="columns">
      <div class="column is-10">
        <!-- Stage selection list -->
        <div>
          <div class="tags">
            <div 
              v-for="(stage, index) in stages" 
              :key="stage.id" 
              class="tag is-hoverable is-medium has-addons"
              :class="{ 'is-primary': selectedStages.includes(stage.id) }"
              style="user-select: none;"
              @click="handleStageClick(stage.id, index, $event)"
            >
              <span>{{ stage.name }}</span>
              <span 
                v-if="selectedStages.includes(stage.id) && $getEditRights()" 
                class="tag ml-2 px-1" 
                style="width: 1.25rem; height: 1.25rem; cursor: pointer"
                @click.stop="editStage(stage.id)"
                title="Chỉnh sửa giai đoạn">
                <SvgIcon v-bind="{ name: 'pen1.svg', type: 'dark', size: 16 }" />
              </span>
            </div>
          </div>
        </div>
      </div>

      <div v-if="$getEditRights()" class="column is-2">
        <div class="field">
          <div class="control">
            <a class="mr-3" @click="upload()">
              <span class="icon-text">
                <SvgIcon v-bind="{ name: 'upload.svg', type: 'primary', size: 25 }" />
                <span class="ml-1 fsb-17">Phân bổ</span>
              </span>
            </a>
            <a @click="addNew()">
              <span class="icon-text">
                <SvgIcon v-bind="{ name: 'add1.png', type: 'primary', size: 23 }" />
                <span class="ml-1 fsb-17">Thêm đợt</span>
              </span>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Data View với product được filter -->
    <div class="m-0" v-if="selectedStages.length > 0">
      <div class="level mb-3">
        <div class="level-left">
          <div class="level-item">
            <h5 class="fsb-18">Sản phẩm bàn giao</h5>
            <button class="button is-small is-text" @click="clearSelection">
              Bỏ chọn tất cả
            </button>
          </div>
        </div>
      </div>

      <!-- DataView với key động để force reload khi filter thay đổi -->
      <DataView v-bind="dataViewConfig" :key="`${selectedStagesKey}-${uploadedKey}`" />
    </div>
    <p v-else class="has-text-centered py-6 fs-20 has-text-grey-light">Chọn đợt bàn giao để xem các sản phẩm.</p>

    <!-- Modal Components -->
    <Modal v-if="showmodal" @close="showmodal = undefined" @dataevent="dataevent" v-bind="showmodal" />
  </div>
</template>

<script setup>
import { isEqual, pull } from 'es-toolkit'
import { ref, computed, onMounted } from 'vue'
import DataView from '~/components/datatable/DataView.vue'
import Modal from '~/components/Modal.vue'
import SvgIcon from '~/components/SvgIcon.vue'

const { $getdata } = useNuxtApp()

// State
const showmodal = ref()
const showStageList = ref(true)
const selectedStages = ref([])
const stages = ref([])
const lastSelectedIndex = ref(null)
const uploadedKey = ref(0);

// Key động để force reload DataView khi selectedStages thay đổi
const selectedStagesKey = computed(() => {
  const sorted = [...selectedStages.value].sort((a, b) => a - b)
  return 'dataview-stage-' + sorted.join('-')
})

// DataView config
const dataViewConfig = computed(() => {
  const config = {
    api: 'product',
    setting: 'product-stage',
    pagename: 'pagedata-product-stage',
    modal: { component: 'parameter/ProductForm', title: 'Sản phẩm' },
    timeopt: { time: 36000, disable: "add" },
    realtime: { time: 2, update: "false" }
  }

  if (selectedStages.value.length > 0) {
    config.filter = { elpro__stage__in: selectedStages.value }
  }

  return config
})

// Methods
function handleStageClick(stageId, index, event) {
  if (event.ctrlKey) {
    // Ctrl + Click: Chọn/bỏ chọn từng cái
    toggleStage(stageId)
    lastSelectedIndex.value = index
  } else if (event.shiftKey) {
    // Shift + Click: Chọn range từ last đến hiện tại
    if (lastSelectedIndex.value !== null) {
      selectRange(lastSelectedIndex.value, index)
    } else {
      toggleStage(stageId)
      lastSelectedIndex.value = index
    }
  } else {
    // Click bình thường: Chọn chỉ cái này
    if (isEqual(selectedStages.value, [stageId])) { 
      pull(selectedStages.value, [stageId]);
    }
    else selectedStages.value = [stageId];
    
    lastSelectedIndex.value = index
  }
}

function selectRange(startIndex, endIndex) {
  const start = Math.min(startIndex, endIndex)
  const end = Math.max(startIndex, endIndex)

  for (let i = start; i <= end; i++) {
    const stageId = stages.value[i].id
    if (!selectedStages.value.includes(stageId)) {
      selectedStages.value.push(stageId)
    }
  }
}

function toggleStage(stageId) {
  const index = selectedStages.value.indexOf(stageId)
  if (index > -1) {
    selectedStages.value.splice(index, 1)
  } else {
    selectedStages.value.push(stageId)
  }
}

function removeStage(stageId) {
  const index = selectedStages.value.indexOf(stageId)
  if (index > -1) {
    selectedStages.value.splice(index, 1)
  }
}

function clearSelection() {
  selectedStages.value = []
  showStageList.value = true
}

function upload() {
  showmodal.value = {
    component: 'parameter/ImportData',
    title: 'Tải lên sản phẩm bàn giao',
    width: '80%',
    height: '400px',
    vbind: { 
      code: 'eligibility-import',
      onClose: () => uploadedKey.value++
    }
  }
}

function addNew() {
  showmodal.value = {
    component: 'parameter/StageForm',
    title: 'Thêm giai đoạn mới',
    width: '900px',
    height: '500px'
  }
}

function editStage(stageId) {
  showmodal.value = {
    component: 'parameter/StageForm',
    title: 'Chỉnh sửa giai đoạn',
    width: '900px',
    height: '500px',
    vbind: {
      id: stageId
    }
  }
}

function dataevent() {
  loadStages()
}

async function loadStages() {
  try {
    const stagesData = await $getdata('stage');
    stages.value = stagesData;
  } catch (error) {
    console.error('Lỗi khi fetch stage:', error)
  }
}

onMounted(() => {
  loadStages()
})
</script>