แก้สี

src/components/GanttChart/GanttChart.vue

@@ -25,55 +25,29 @@
 
       <!-- Rows: แสดงเครื่องจักรจาก Machine Store -->
       <div class="rows">
-        <div
-          v-for="machine in machineStore.machines"
-          :key="machine.MachineID"
-          class="row"
-          :data-machine-id="machine.MachineID"
-          @dragover.prevent="onDragOver($event)"
-          @drop="onDrop($event, machine.MachineID)"
-        >
+        <div v-for="machine in machineStore.machines" :key="machine.MachineID" class="row"
+          :data-machine-id="machine.MachineID" @dragover.prevent="onDragOver($event)"
+          @drop="onDrop($event, machine.MachineID)">
           <div class="machine-label">
             {{ machine.name }}
           </div>
           <div class="row-timeline">
             <!-- เส้นแนวตั้ง (Grid Lines) -->
-            <div
-              v-for="hour in hours"
-              :key="'line-' + hour"
-              class="vertical-line"
-              :style="getLineStyle(hour)"
-            ></div>
+            <div v-for="hour in hours" :key="'line-' + hour" class="vertical-line" :style="getLineStyle(hour)"></div>
 
             <!-- แสดง Queue ที่ตรงกับวันที่ (selectedDate), Page (pagenum), และ Machine -->
-            <div
-              v-for="item in filteredQueue(machine.MachineID)"
-              :key="item.QueueID"
-              class="order"
-              :class="{ faded: draggingQueue && draggingQueue.QueueID === item.QueueID }"
-              :style="getQueueStyle(item)"
-            >
+            <div v-for="item in filteredQueue(machine.MachineID)" :key="item.QueueID" class="order"
+              :class="{ faded: draggingQueue && draggingQueue.QueueID === item.QueueID }" :style="getQueueStyle(item)">
               <!-- Handle สำหรับ Resize ด้านซ้าย -->
-              <div
-                class="resize-handle left"
-                @mousedown="onResizeStart($event, item, 'left')"
-              ></div>
+              <div class="resize-handle left" @mousedown="onResizeStart($event, item, 'left')"></div>
               <!-- ส่วนกลางของ Order ใช้สำหรับลาก และเปิด Dialog เมื่อคลิก -->
-              <div
-                class="order-content"
-                draggable="true"
-                @dragstart="onDragStart($event, item)"
-                @dragend="onDragEnd($event, item)"
-                @click.stop="openQueueDialog(item)"
-              >
+              <div class="order-content" draggable="true" @dragstart="onDragStart($event, item)"
+                @dragend="onDragEnd($event, item)" @click.stop="openQueueDialog(item)">
                 {{ item.label }} ({{ getTimeString(item.startTime) }} -
                 {{ getTimeString(item.finishTime) }})
               </div>
               <!-- Handle สำหรับ Resize ด้านขวา -->
-              <div
-                class="resize-handle right"
-                @mousedown="onResizeStart($event, item, 'right')"
-              ></div>
+              <div class="resize-handle right" @mousedown="onResizeStart($event, item, 'right')"></div>
             </div>
           </div>
         </div>
@@ -90,13 +64,8 @@
       <!-- Pagination -->
       <div class="pagination-container">
         <transition-group name="fade" tag="div" class="pagination">
-          <button
-            v-for="p in pages"
-            :key="p"
-            :class="['page-btn', { active: p === currentPage }]"
-            @click="currentPage = p"
-            @contextmenu.prevent="onPageRightClick(p, $event)"
-          >
+          <button v-for="p in pages" :key="p" :class="['page-btn', { active: p === currentPage }]"
+            @click="currentPage = p" @contextmenu.prevent="onPageRightClick(p, $event)">
             {{ p }}
             <button v-if="pageToShowDelete === p" class="delete-btn" @click.stop="deletePage(p)">
               Delete
@@ -111,27 +80,15 @@
             <v-icon>mdi-plus</v-icon>
           </v-btn>
         </div>
-        <AddQueueDialog
-          :visible="showAddDialog"
-          :queueItem="selectedQueueItem"
-          :currentPage="currentPage"
-          @close="closeAddQueueDialog"
-        />
+        <AddQueueDialog :visible="showAddDialog" :queueItem="selectedQueueItem" :currentPage="currentPage"
+          @close="closeAddQueueDialog" />
       </div>
-      <OrderDialog
-        v-if="selectedQueueItem && !showAddDialog"
-        :queueId="selectedQueueItem.QueueID"
-        :color="
-          getQueueColor(
-            selectedQueueItem.label === 'ผลิตเผื่อ' || selectedQueueItem.label === 'เปลี่ยนขนาด'
-              ? selectedQueueItem.label
-              : selectedQueueItem.orderID
-          )
-        "
-        @close="closeQueueDialog"
-        @edit="openAddQueueDialogForEdit"
-        @delete="handleDelete"
-      />
+      <OrderDialog v-if="selectedQueueItem && !showAddDialog" :queueId="selectedQueueItem.QueueID" :color="getQueueColor(
+        selectedQueueItem.label === 'ผลิตเผื่อ' || selectedQueueItem.label === 'เปลี่ยนขนาด'
+          ? selectedQueueItem.label
+          : selectedQueueItem.orderID
+      )
+        " @close="closeQueueDialog" @edit="openAddQueueDialogForEdit" @delete="handleDelete" />
     </div>
   </div>
 </template>
@@ -160,10 +117,10 @@ const dateStore = useDateStore()
 const { currentDate: selectedDate } = storeToRefs(dateStore)
 const pageContext = usePageContextStore()
 
-const ORDER_COLORS = ['#FFCDD2', '#FFE0B2', '#90CAF9'] // แดงอ่อน, ส้มอ่อน, น้ำเงินอ่อน
+const ORDER_COLORS = ['#FFCDD2', '#FFE0B2', '#90CAF9', '#ADD88D', '#BEA9DF', '#FEB9D0', '#CC9B71', '#9DD8D4'] // แดงอ่อน, ส้มอ่อน, น้ำเงินอ่อน
 const SPECIAL_COLORS: Record<string, string> = {
-  'ผลิตเผื่อ': '#94f397', 
-  'เปลี่ยนขนาด': '#B3E5FC', 
+  'ผลิตเผื่อ': '#94f397',
+  'เปลี่ยนขนาด': '#B3E5FC',
 };
 
 // ใช้ currentPage เป็น pagenum จาก pageContext