Merge branch 'main' of https://gitlab.com/pqs-project/frontend

src/components/GanttChart/GanttCalendar.vue

+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '1/1/2024',
+  },
+});
+const emits = defineEmits(['update:modelValue']);
+
+const selectedDate = ref(props.modelValue);
+
+// เมื่อ selectedDate เปลี่ยน ให้ emit ออกไปเป็น v-model
+watch(selectedDate, (newVal) => {
+  emits('update:modelValue', newVal);
+});
+
+// (ตัวอย่าง) คุณอาจทำปุ่ม Back/Next ให้เปลี่ยนวันที่ได้จริง
+// แต่ตอนนี้เป็นเพียง placeholder
+</script>
+
+<template>
+  <v-col
+  cols="auto"
+  class="d-inline-flex align-center"
+  style="background-color: #7E9CD3; border-radius: 15px; max-width: fit-content; padding: 8px 16px;"
+>
+    <v-btn
+      class="mr-2"
+      style="background-color: #2B2E3F; color: white; border-radius: 10px;"
+      @click="selectedDate.value = '1/1/2024'"
+    >
+      &lt; 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;"
+      @click="selectedDate.value = '1/2/2024'"
+    >
+      Next &gt;
+    </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>
+</template>

src/components/GanttChart/OrderDialog.vue

+<template>
+    <div class="order-dialog-overlay">
+      <div class="order-dialog">
+        <h3>Order Details</h3>
+        <p><strong>QueueID:</strong> {{ order.queueID }}</p>
+        <p><strong>Machine:</strong> {{ order.machineID }}</p>
+        <p><strong>OrderID:</strong> {{ order.orderID }}</p>
+        <p><strong>PageNumber:</strong> {{ order.pageNumber }}</p>
+        <p><strong>Start:</strong> {{ order.startTime }}</p>
+        <p><strong>Finish:</strong> {{ order.finishTime }}</p>
+        <p><strong>Status:</strong> {{ order.status }}</p>
+        <p><strong>Bottle Size:</strong> {{ order.bottleSize }}</p>
+        <p><strong>Produced:</strong> {{ order.producedQuantity }}</p>
+  
+        <div class="dialog-buttons">
+          <button @click="$emit('edit', order)">Edit</button>
+          <button @click="$emit('delete', order)">Delete</button>
+          <button @click="$emit('close')">Close</button>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'OrderDialog',
+    props: {
+      order: {
+        type: Object,
+        required: true,
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file

src/components/GanttChart/ganttChart.css

+.gantt-chart {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .header {
+    display: flex;
+    background: #fff;
+  }
+  
+  .machine-label {
+    width: 80px;
+    text-align: center;
+    font-weight: bold;
+    background: #ffffff;
+    line-height: 40px;
+    border-bottom: 1px solid #ffffff;
+  }
+  
+  .time-scale {
+    display: flex;
+    flex: 1;
+  }
+  
+  .time-cell {
+    flex: 1;
+    text-align: center;
+    border-bottom: 1px solid #ddd;
+    font-size: 15px;
+    line-height: 40px;
+    font-weight: bold;
+  }
+  
+  .rows {
+    flex: 1;
+    overflow-y: auto;
+  }
+  
+  .row {
+    display: flex;
+    min-height: 60px;
+    border-bottom: 1px solid #ddd;
+  }
+  
+  .row-timeline {
+    position: relative;
+    flex: 1;
+    overflow: hidden;
+  }
+  
+  .vertical-line {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background-color: #ddd;
+  }
+  
+  .order {
+    position: absolute;
+    top: 10px;
+    height: 40px;
+    color: #fff;
+    border-radius: 20px;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    z-index: 1;
+  }
+  
+  .order-content {
+    flex: 1;
+    text-align: center;
+    line-height: 40px;
+    cursor: grab;
+    padding: 0 10px;
+  }
+  
+  .resize-handle {
+    width: 5px;
+    height: 100%;
+    cursor: ew-resize;
+    position: absolute;
+  }
+  
+  .resize-handle.left {
+    left: 0;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+  }
+  
+  .resize-handle.right {
+    right: 0;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+  }
+  
+  .order.faded {
+    opacity: 0.3;
+  }
+  
+  .drag-ghost {
+    box-sizing: border-box;
+    text-align: center;
+    pointer-events: none;
+  }
+  
+  .pagination {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 5px;
+    width: 100%;
+    margin-top: 10px;
+  }
+  
+  .page-btn {
+    background: #ffffff;
+    border: 1px solid #ffffff;
+    padding: 5px 10px;
+    cursor: pointer;
+    font-size: 14px;
+    position: relative;
+  }
+  
+  .page-btn.active {
+    background: #007bff;
+    color: #ffffff;
+  }
+  
+  .page-btn.add-page {
+    font-weight: bold;
+    background: #ffffff;
+  }
+  
+  /* สไตล์สำหรับปุ่ม Delete ที่แสดงเมื่อคลิกขวา */
+  .delete-btn {
+    margin-left: 5px;
+    background-color: red;
+    color: #fff;
+    border: none;
+    padding: 2px 5px;
+    cursor: pointer;
+    border-radius: 3px;
+    font-size: 12px;
+  }
+  
+  /* สไตล์สำหรับ Order Dialog */
+  .order-dialog-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+  }
+  
+  .order-dialog {
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    width: 300px;
+    text-align: center;
+  }
+  
+  .dialog-buttons button {
+    margin: 5px;
+  }
+  
\ No newline at end of file

src/views/ProductQueueView.vue

@@ -7,7 +7,8 @@ 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' }
+  { id: 2, name: 'ORDER2' },
+  { id: 3, name: 'ORDER3' }
 ])
 
 // Drag and drop functionality
@@ -43,28 +44,7 @@ const handleDrop = (targetOrder) => {
   <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;">&lt; 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 &gt;</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>
+      style="border-radius: 15px; max-width: 98%; margin-left: auto; margin-right: auto; min-height: 460px;">
       <!-- Gantt Chart -->
       <GanttChart />
     </v-sheet>