<script setup> import { ref } from 'vue' import GanttChart from '@/components/GanttChart/GanttChart.vue' import EmployeeSector from '@/components/EmployeeSector.vue' const selectedDate = ref('1/1/2024') const employees = Array.from({ length: 10 }, (_, i) => `EM${i + 1}`) const orders = ref([ { id: 1, name: 'ORDER1' }, { id: 2, name: 'ORDER2' } ]) // Drag and drop functionality const draggedOrder = ref(null) const handleDragStart = (order) => { draggedOrder.value = order } const handleDragOver = (event) => { event.preventDefault() } const handleDrop = (targetOrder) => { if (!draggedOrder.value || draggedOrder.value === targetOrder) return // Find the indices of the dragged and target orders const draggedIndex = orders.value.findIndex((o) => o.id === draggedOrder.value.id) const targetIndex = orders.value.findIndex((o) => o.id === targetOrder.id) // Remove the dragged order from its original position const [removed] = orders.value.splice(draggedIndex, 1) // Insert the dragged order at the target position orders.value.splice(targetIndex, 0, removed) // Reset the dragged order draggedOrder.value = null } </script> <template> <v-container class="pa-0"> <!-- Gantt chart --> <v-sheet class="pa-1 mb-3" style="border-radius: 15px; max-width: 98%; margin-left: auto; margin-right: auto; min-height: 500px;"> <!-- Timeline --> <v-sheet class="pa-3 mb-3"> <v-col cols="auto" class="d-flex align-center"> <v-col cols="auto" class="d-flex align-center" style="background-color: #7E9CD3; border-radius: 15px; "> <v-btn class="mr-2" style="background-color: #2B2E3F; color: white; border-radius: 10px;">< Back</v-btn> <v-btn style="background-color: white; color: black; min-width: 200px; border-radius: 15px;">{{ selectedDate }}</v-btn> <v-btn class="ml-2" style="background-color: #2B2E3F; color: white; border-radius: 10px;">Next ></v-btn> <v-btn class="ml-2" style="background-color: white; color: black; border-radius: 10px;"><v-icon>mdi-dots-horizontal</v-icon></v-btn> </v-col> <v-btn class="ml-auto" style="background-color: #0077D8; font-weight: bold; color: white; border-radius: 12px; padding: 28px; display: flex; align-items: center; justify-content: center; font-size: 18px;"> Make a queue </v-btn> </v-col> <v-row> </v-row> </v-sheet> <!-- Gantt Chart --> <GanttChart /> </v-sheet> <!-- Bottom Section --> <v-row class="mt-1" style="max-width: 100%; margin-left: auto; margin-right: auto;"> <!-- Employee Selection --> <v-col cols="6"> <v-card class="pa-4" style="background-color: white; border-radius: 15px; min-height: 280px;"> <!-- เลือกพนักงานวางทับตรงนี้ --> <EmployeeSector :employees="employees" /> </v-card> </v-col> <!-- Order Priority --> <v-col cols="6"> <v-card class="pa-4" style="background-color: white; border-radius: 15px; min-height: 280px"> <div v-for="order in orders" :key="order.id" class="order-item" draggable="true" @dragstart="() => handleDragStart(order)" @dragover="handleDragOver" @drop="() => handleDrop(order)"> {{ order.name }} </div> </v-card> </v-col> </v-row> </v-container> </template> <!-- ส่วน UI ของปุ่ม Order1--2 --> <style scoped> .order-item { background-color: #2b2e3f; color: white; padding: 7px; margin-bottom: 8px; text-align: center; cursor: move; user-select: none; } .order-item:hover { opacity: 0.9; } </style>