diff --git a/src/components/EmployeeSector.vue b/src/components/EmployeeSector.vue index e4e507d11db895b83ae06af52016fec64152f9eb..4843a164c9e62e558386788aada8b415b4c5ca34 100644 --- a/src/components/EmployeeSector.vue +++ b/src/components/EmployeeSector.vue @@ -15,28 +15,31 @@ <script setup lang="ts"> import type { Employee } from '@/types/Employee' import { ref, onMounted } from 'vue' -import { listEmployees } from '@/services/employee'; // ✅ import API +import { listEmployees } from '@/services/employee' -const employees = ref<Employee[]>([]); -const defaultImage = '/images/noimage.jpg'; // เพิ่ม `/` ข้างหน้าให้เป็น path root +// ✅ ดึง BASE URL จาก ENV +const IMAGE_BASE_URL = import.meta.env.VITE_EMP_IMAGE_BASE || '' +const defaultImage = '/images/noimage.jpg' + +const employees = ref<Employee[]>([]) const onDragStart = (event: DragEvent, employee: Employee) => { - event.dataTransfer?.setData('text/plain', JSON.stringify(employee)); - event.dataTransfer!.effectAllowed = 'move'; -}; + event.dataTransfer?.setData('text/plain', JSON.stringify(employee)) + event.dataTransfer!.effectAllowed = 'move' +} // ✅ โหลดข้อมูลพนักงานตอน mount onMounted(async () => { try { - const res = await listEmployees(); + const res = await listEmployees() employees.value = res.map((e) => ({ ...e, - image: e.image ? `http://localhost:4000/images/emp/${e.image}` : defaultImage, - })); + image: e.image ? IMAGE_BASE_URL + e.image : defaultImage, + })) } catch (error) { - console.error('โหลดพนักงานไม่สำเร็จ', error); + console.error('โหลดพนักงานไม่สำเร็จ', error) } -}); +}) </script> <style scoped> @@ -46,17 +49,14 @@ onMounted(async () => { text-align: center; } -/* ✅ ปรับ Employee Card ให้เป็น Responsive */ .employee-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - /* ปรับจำนวนคอลัมน์อัตโนมัติ */ gap: 15px; justify-items: center; padding: 10px; } -/* ✅ ปรับขนาด Employee Card ตามหน้าจอ */ .employee-card { margin: 5px; display: flex; @@ -72,11 +72,9 @@ onMounted(async () => { transition: all 0.3s ease; } -/* ✅ Responsive: ถ้าหน้าจอเล็กกว่า 600px */ @media (max-width: 600px) { .employee-list { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); - /* ลดขนาด */ } .employee-card { @@ -105,4 +103,4 @@ onMounted(async () => { object-fit: cover; margin-bottom: 5px; } -</style> +</style> \ No newline at end of file