pukaad-ui-lib 1.213.0 → 1.215.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/module.json +1 -1
- package/dist/runtime/components/card/card-place-detail.d.vue.ts +21 -15
- package/dist/runtime/components/card/card-place-detail.vue +30 -28
- package/dist/runtime/components/card/card-place-detail.vue.d.ts +21 -15
- package/dist/runtime/components/drawer/drawer-suggest-place/suggest-place-form.vue +30 -124
- package/dist/runtime/components/input/input-date-opening.vue +22 -97
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -1,28 +1,34 @@
|
|
|
1
|
-
interface
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
export interface Category {
|
|
2
|
+
id: string;
|
|
3
|
+
category_name: string;
|
|
4
4
|
}
|
|
5
|
-
interface
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
export interface TimeSlot {
|
|
6
|
+
start: string;
|
|
7
|
+
end: string;
|
|
8
8
|
}
|
|
9
|
-
interface
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
export interface OpeningHour {
|
|
10
|
+
day: number;
|
|
11
|
+
isOpen: boolean;
|
|
12
|
+
isAllDay?: boolean;
|
|
13
|
+
timeSlots?: TimeSlot[];
|
|
12
14
|
}
|
|
13
|
-
interface
|
|
15
|
+
export interface ContactChannel {
|
|
16
|
+
channel_type: string;
|
|
17
|
+
value: string;
|
|
18
|
+
}
|
|
19
|
+
export interface PlaceDetailItem {
|
|
14
20
|
description?: string;
|
|
15
|
-
|
|
21
|
+
categories?: Category[];
|
|
16
22
|
open_status?: string;
|
|
17
|
-
|
|
23
|
+
opening_hours?: OpeningHour[];
|
|
18
24
|
phone?: string;
|
|
19
|
-
|
|
25
|
+
contact_channels?: ContactChannel[];
|
|
20
26
|
}
|
|
21
27
|
type __VLS_Props = {
|
|
22
|
-
item?:
|
|
28
|
+
item?: PlaceDetailItem;
|
|
23
29
|
};
|
|
24
30
|
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
25
|
-
item:
|
|
31
|
+
item: PlaceDetailItem;
|
|
26
32
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
27
33
|
declare const _default: typeof __VLS_export;
|
|
28
34
|
export default _default;
|
|
@@ -9,29 +9,18 @@
|
|
|
9
9
|
|
|
10
10
|
<div class="flex gap-[12px]">
|
|
11
11
|
<Icon name="lucide:tag" :size="20" class="text-primary shrink-0 mt-[2px]" />
|
|
12
|
-
<div v-if="
|
|
12
|
+
<div v-if="categoryText">{{ categoryText }}</div>
|
|
13
13
|
<div v-else class="text-cloud">ไม่มีข้อมูลประเภท</div>
|
|
14
14
|
</div>
|
|
15
15
|
|
|
16
16
|
<div class="flex gap-[12px]">
|
|
17
17
|
<Icon name="lucide:clock" :size="20" class="text-primary shrink-0 mt-[2px]" />
|
|
18
|
-
<div v-if="
|
|
18
|
+
<div v-if="businessHours.length" class="flex flex-col gap-[4px] flex-1">
|
|
19
19
|
<div class="font-body-large-prominent text-success">{{ props.item.open_status ?? "\u0E40\u0E1B\u0E34\u0E14\u0E2D\u0E22\u0E39\u0E48" }}</div>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
<span>{{ time.day }}</span>
|
|
24
|
-
<span>{{ time.time_range }}</span>
|
|
20
|
+
<div v-for="(hour, index) in businessHours" :key="index" class="flex items-center justify-between">
|
|
21
|
+
<span>{{ hour.day }}</span>
|
|
22
|
+
<span>{{ hour.time_range }}</span>
|
|
25
23
|
</div>
|
|
26
|
-
|
|
27
|
-
<template v-if="props.item.opening_hour?.Special_hour?.length">
|
|
28
|
-
<div class="font-body-large-prominent text-warning mt-[8px]">วันทำการพิเศษ</div>
|
|
29
|
-
<div v-for="(time, i) in props.item.opening_hour.Special_hour" :key="`sh-${i}`"
|
|
30
|
-
class="flex items-center justify-between text-warning">
|
|
31
|
-
<span>{{ time.day }}</span>
|
|
32
|
-
<span>{{ time.time_range }}</span>
|
|
33
|
-
</div>
|
|
34
|
-
</template>
|
|
35
24
|
</div>
|
|
36
25
|
<div v-else class="text-cloud">ไม่มีข้อมูลเวลาทำการ</div>
|
|
37
26
|
</div>
|
|
@@ -44,14 +33,17 @@
|
|
|
44
33
|
|
|
45
34
|
<Divider />
|
|
46
35
|
|
|
47
|
-
<div v-if="
|
|
48
|
-
<div
|
|
49
|
-
|
|
36
|
+
<div v-if="socialLinks.length" class="flex flex-col gap-[8px]">
|
|
37
|
+
<div
|
|
38
|
+
v-for="(linkItem, index) in socialLinks"
|
|
39
|
+
:key="index"
|
|
40
|
+
class="flex gap-[12px] items-center cursor-pointer hover:underline"
|
|
41
|
+
@click="onClickLink(linkItem.link)"
|
|
42
|
+
>
|
|
50
43
|
<Icon :name="`pukaad-social:${linkItem.name}`" :size="20" class="shrink-0" />
|
|
51
44
|
<span>{{ linkItem.link }}</span>
|
|
52
45
|
</div>
|
|
53
46
|
</div>
|
|
54
|
-
|
|
55
47
|
<div v-else class="flex gap-[12px] items-center">
|
|
56
48
|
<Icon name="lucide:link" :size="20" class="text-primary shrink-0" />
|
|
57
49
|
<span class="text-cloud">ไม่มีข้อมูลช่องทางติดต่อ</span>
|
|
@@ -61,16 +53,26 @@
|
|
|
61
53
|
</template>
|
|
62
54
|
|
|
63
55
|
<script setup>
|
|
56
|
+
import { computed } from "vue";
|
|
57
|
+
const DAY_NAMES = ["\u0E27\u0E31\u0E19\u0E2D\u0E32\u0E17\u0E34\u0E15\u0E22\u0E4C", "\u0E27\u0E31\u0E19\u0E08\u0E31\u0E19\u0E17\u0E23\u0E4C", "\u0E27\u0E31\u0E19\u0E2D\u0E31\u0E07\u0E04\u0E32\u0E23", "\u0E27\u0E31\u0E19\u0E1E\u0E38\u0E18", "\u0E27\u0E31\u0E19\u0E1E\u0E24\u0E2B\u0E31\u0E2A\u0E1A\u0E14\u0E35", "\u0E27\u0E31\u0E19\u0E28\u0E38\u0E01\u0E23\u0E4C", "\u0E27\u0E31\u0E19\u0E40\u0E2A\u0E32\u0E23\u0E4C"];
|
|
64
58
|
const props = defineProps({
|
|
65
|
-
item: { type: Object, required: false, default: () => ({
|
|
66
|
-
description: "",
|
|
67
|
-
category: "",
|
|
68
|
-
open_status: "",
|
|
69
|
-
opening_hour: { Business_hour: [], Special_hour: [] },
|
|
70
|
-
phone: "",
|
|
71
|
-
links: []
|
|
72
|
-
}) }
|
|
59
|
+
item: { type: Object, required: false, default: () => ({}) }
|
|
73
60
|
});
|
|
61
|
+
const categoryText = computed(
|
|
62
|
+
() => (props.item.categories ?? []).map((c) => c.category_name).join(", ")
|
|
63
|
+
);
|
|
64
|
+
const businessHours = computed(
|
|
65
|
+
() => (props.item.opening_hours ?? []).map((h) => ({
|
|
66
|
+
day: DAY_NAMES[h.day] ?? "",
|
|
67
|
+
time_range: !h.isOpen ? "\u0E2B\u0E22\u0E38\u0E14\u0E17\u0E33\u0E01\u0E32\u0E23" : h.isAllDay ? "\u0E40\u0E1B\u0E34\u0E14\u0E15\u0E25\u0E2D\u0E14 24 \u0E0A\u0E21." : (h.timeSlots ?? []).map((t) => `${t.start} - ${t.end}`).join(", ") || "\u0E40\u0E1B\u0E34\u0E14"
|
|
68
|
+
}))
|
|
69
|
+
);
|
|
70
|
+
const socialLinks = computed(
|
|
71
|
+
() => (props.item.contact_channels ?? []).filter((ch) => ch.value).map((ch) => ({
|
|
72
|
+
name: ch.channel_type?.toLowerCase() ?? "link",
|
|
73
|
+
link: ch.value
|
|
74
|
+
}))
|
|
75
|
+
);
|
|
74
76
|
const onClickLink = (link) => {
|
|
75
77
|
window.open(link, "_blank");
|
|
76
78
|
};
|
|
@@ -1,28 +1,34 @@
|
|
|
1
|
-
interface
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
export interface Category {
|
|
2
|
+
id: string;
|
|
3
|
+
category_name: string;
|
|
4
4
|
}
|
|
5
|
-
interface
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
export interface TimeSlot {
|
|
6
|
+
start: string;
|
|
7
|
+
end: string;
|
|
8
8
|
}
|
|
9
|
-
interface
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
export interface OpeningHour {
|
|
10
|
+
day: number;
|
|
11
|
+
isOpen: boolean;
|
|
12
|
+
isAllDay?: boolean;
|
|
13
|
+
timeSlots?: TimeSlot[];
|
|
12
14
|
}
|
|
13
|
-
interface
|
|
15
|
+
export interface ContactChannel {
|
|
16
|
+
channel_type: string;
|
|
17
|
+
value: string;
|
|
18
|
+
}
|
|
19
|
+
export interface PlaceDetailItem {
|
|
14
20
|
description?: string;
|
|
15
|
-
|
|
21
|
+
categories?: Category[];
|
|
16
22
|
open_status?: string;
|
|
17
|
-
|
|
23
|
+
opening_hours?: OpeningHour[];
|
|
18
24
|
phone?: string;
|
|
19
|
-
|
|
25
|
+
contact_channels?: ContactChannel[];
|
|
20
26
|
}
|
|
21
27
|
type __VLS_Props = {
|
|
22
|
-
item?:
|
|
28
|
+
item?: PlaceDetailItem;
|
|
23
29
|
};
|
|
24
30
|
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
25
|
-
item:
|
|
31
|
+
item: PlaceDetailItem;
|
|
26
32
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
27
33
|
declare const _default: typeof __VLS_export;
|
|
28
34
|
export default _default;
|
|
@@ -6,122 +6,42 @@
|
|
|
6
6
|
<template v-if="isAddressCompleted">
|
|
7
7
|
<div class="font-body-large-prominent">รายละเอียด</div>
|
|
8
8
|
<div class="flex flex-col gap-[4px]">
|
|
9
|
-
<InputAutocomplete
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
placeholder="
|
|
14
|
-
|
|
15
|
-
show-counter
|
|
16
|
-
|
|
17
|
-
free-text
|
|
18
|
-
:fetch-fn="fetchApprovedPlaces"
|
|
19
|
-
value-key="business_name"
|
|
20
|
-
label-key="business_name"
|
|
21
|
-
/>
|
|
22
|
-
<InputTextField
|
|
23
|
-
v-if="extraNameCount >= 1"
|
|
24
|
-
name="nameTh"
|
|
25
|
-
v-model="modelValue.nameTh"
|
|
26
|
-
label="ชื่อภาษาไทย"
|
|
27
|
-
placeholder="ใส่ในกรณีที่ต่างจากชื่อหลัก"
|
|
28
|
-
show-counter
|
|
29
|
-
:limit="180"
|
|
30
|
-
/>
|
|
31
|
-
<InputTextField
|
|
32
|
-
v-if="extraNameCount >= 2"
|
|
33
|
-
name="nameEn"
|
|
34
|
-
v-model="modelValue.nameEn"
|
|
35
|
-
label="ชื่อภาษาอังกฤษ"
|
|
36
|
-
placeholder="ใส่ในกรณีที่ต่างจากชื่อหลัก"
|
|
37
|
-
show-counter
|
|
38
|
-
:limit="180"
|
|
39
|
-
/>
|
|
40
|
-
<Button
|
|
41
|
-
v-if="extraNameCount < 2"
|
|
42
|
-
variant="text"
|
|
43
|
-
color="primary"
|
|
44
|
-
class="w-[145px]"
|
|
45
|
-
@click="extraNameCount++"
|
|
46
|
-
>
|
|
9
|
+
<InputAutocomplete name="businessName" v-model="modelValue.businessName" label="ชื่อสถานที่ธุรกิจ"
|
|
10
|
+
placeholder="กรอกชื่อสถานที่" required show-counter :limit="180" free-text :fetch-fn="fetchApprovedPlaces"
|
|
11
|
+
value-key="business_name" label-key="business_name" />
|
|
12
|
+
<InputTextField v-if="extraNameCount >= 1" name="nameTh" v-model="modelValue.nameTh" label="ชื่อภาษาไทย"
|
|
13
|
+
placeholder="ใส่ในกรณีที่ต่างจากชื่อหลัก" show-counter :limit="180" />
|
|
14
|
+
<InputTextField v-if="extraNameCount >= 2" name="nameEn" v-model="modelValue.nameEn" label="ชื่อภาษาอังกฤษ"
|
|
15
|
+
placeholder="ใส่ในกรณีที่ต่างจากชื่อหลัก" show-counter :limit="180" />
|
|
16
|
+
<Button v-if="extraNameCount < 2" variant="text" color="primary" class="w-[145px]" @click="extraNameCount++">
|
|
47
17
|
<Icon name="lucide:plus" />
|
|
48
18
|
เพิ่มชื่อสถานที่
|
|
49
19
|
</Button>
|
|
50
20
|
</div>
|
|
51
|
-
<InputCombobox
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
placeholder="
|
|
56
|
-
|
|
57
|
-
show-counter
|
|
58
|
-
:options="categoryOptions"
|
|
59
|
-
required
|
|
60
|
-
multiple
|
|
61
|
-
/>
|
|
62
|
-
<InputTextarea
|
|
63
|
-
name="description"
|
|
64
|
-
v-model="modelValue.description"
|
|
65
|
-
label="คำอธิบาย"
|
|
66
|
-
placeholder="คำอธิบายเกี่ยวกับสถานที่ (สูงสุด 220 ตัวอักษร)"
|
|
67
|
-
:limit="220"
|
|
68
|
-
show-counter
|
|
69
|
-
/>
|
|
70
|
-
<InputDateOpening
|
|
71
|
-
name="openingHours"
|
|
72
|
-
v-model="modelValue.openingHours"
|
|
73
|
-
/>
|
|
21
|
+
<InputCombobox name="categories" v-model="modelValue.categories" label="หมวดหมู่"
|
|
22
|
+
placeholder="เพิ่มหมวดหมู่ที่เกี่ยวข้องกับสถานที่" :limit="3" show-counter :options="categoryOptions" required
|
|
23
|
+
multiple />
|
|
24
|
+
<InputTextarea name="description" v-model="modelValue.description" label="คำอธิบาย"
|
|
25
|
+
placeholder="คำอธิบายเกี่ยวกับสถานที่ (สูงสุด 220 ตัวอักษร)" :limit="220" show-counter />
|
|
26
|
+
<InputDateOpening name="openingHours" v-model="modelValue.openingHours" />
|
|
74
27
|
<div class="flex flex-col gap-[8px]">
|
|
75
|
-
<InputPhone
|
|
76
|
-
|
|
77
|
-
v-model="modelValue.
|
|
78
|
-
|
|
79
|
-
placeholder="กรอกเบอร์โทรศัพท์"
|
|
80
|
-
/>
|
|
81
|
-
<InputPhone
|
|
82
|
-
v-for="(item, index) in modelValue.extraPhones"
|
|
83
|
-
:key="index"
|
|
84
|
-
:name="`extraPhone-${index}`"
|
|
85
|
-
label="เบอร์โทรศัพท์"
|
|
86
|
-
placeholder="กรอกเบอร์โทรศัพท์"
|
|
87
|
-
v-model="modelValue.extraPhones[index]"
|
|
88
|
-
/>
|
|
89
|
-
<Button
|
|
90
|
-
variant="text"
|
|
91
|
-
color="primary"
|
|
92
|
-
class="w-[145px]"
|
|
93
|
-
@click="modelValue.extraPhones.push('')"
|
|
94
|
-
>
|
|
28
|
+
<InputPhone name="phone" v-model="modelValue.phone" label="เบอร์โทรศัพท์" placeholder="กรอกเบอร์โทรศัพท์" />
|
|
29
|
+
<InputPhone v-for="(item, index) in modelValue.extraPhones" :key="index" :name="`extraPhone-${index}`"
|
|
30
|
+
label="เบอร์โทรศัพท์" placeholder="กรอกเบอร์โทรศัพท์" v-model="modelValue.extraPhones[index]" />
|
|
31
|
+
<Button variant="text" color="primary" class="w-[145px]" @click="modelValue.extraPhones.push('')">
|
|
95
32
|
<Icon name="lucide:plus" />
|
|
96
33
|
เพิ่มเบอร์โทรศัพท์
|
|
97
34
|
</Button>
|
|
98
|
-
<InputLink
|
|
99
|
-
|
|
100
|
-
format="contact_channel"
|
|
101
|
-
default-first
|
|
102
|
-
v-model="modelValue.contactChannels"
|
|
103
|
-
/>
|
|
35
|
+
<InputLink name="contactChannels" format="contact_channel" default-first
|
|
36
|
+
v-model="modelValue.contactChannels" />
|
|
104
37
|
</div>
|
|
105
38
|
<template v-if="props.state === 'personal'">
|
|
106
39
|
<div class="flex flex-col gap-[16px]">
|
|
107
|
-
<InputCheckbox
|
|
108
|
-
name="isReview"
|
|
109
|
-
v-model="modelValue.isReview"
|
|
110
|
-
label="คุณต้องการรีวิวสถานที่นี้"
|
|
111
|
-
/>
|
|
40
|
+
<InputCheckbox name="isReview" v-model="modelValue.isReview" label="คุณต้องการรีวิวสถานที่นี้" />
|
|
112
41
|
<template v-if="modelValue.isReview">
|
|
113
|
-
<InputRating
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
class="flex py-4 justify-center"
|
|
117
|
-
/>
|
|
118
|
-
<InputTextarea
|
|
119
|
-
name="reviewDescription"
|
|
120
|
-
v-model="modelValue.reviewDescription"
|
|
121
|
-
label="คำอธิบาย"
|
|
122
|
-
placeholder="คำอธิบายเกี่ยวกับสถานที่"
|
|
123
|
-
show-counter
|
|
124
|
-
/>
|
|
42
|
+
<InputRating name="rating" v-model="modelValue.rating" class="flex py-4 justify-center" />
|
|
43
|
+
<InputTextarea name="reviewDescription" v-model="modelValue.reviewDescription" label="คำอธิบาย"
|
|
44
|
+
placeholder="คำอธิบายเกี่ยวกับสถานที่" show-counter />
|
|
125
45
|
<div class="flex flex-col gap-[8px]">
|
|
126
46
|
<div class="flex flex-col gap-[4px]">
|
|
127
47
|
<div class="font-body-large-prominent text-gray">
|
|
@@ -129,12 +49,7 @@
|
|
|
129
49
|
</div>
|
|
130
50
|
<div class="font-body-small text-gray">สูงสุด 9 รายการ</div>
|
|
131
51
|
</div>
|
|
132
|
-
<InputFile
|
|
133
|
-
name="reviewPhotos"
|
|
134
|
-
v-model="modelValue.reviewPhotos"
|
|
135
|
-
accept="image/*"
|
|
136
|
-
:limit="9"
|
|
137
|
-
/>
|
|
52
|
+
<InputFile name="reviewPhotos" v-model="modelValue.reviewPhotos" accept="image/*" :limit="9" />
|
|
138
53
|
<div class="font-body-small text-gray w-[250px]">
|
|
139
54
|
รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif
|
|
140
55
|
ขนาดไฟล์ไม่เกิน 30 mb
|
|
@@ -148,21 +63,12 @@
|
|
|
148
63
|
|
|
149
64
|
<!-- แสดง polygon -->
|
|
150
65
|
<div class="flex flex-col gap-[16px] w-[334px] sticky top-0 self-start">
|
|
151
|
-
<SuggestPlaceMap
|
|
152
|
-
:
|
|
153
|
-
|
|
154
|
-
:
|
|
155
|
-
@update:lat-lng="modelValue.latLng = $event"
|
|
156
|
-
/>
|
|
157
|
-
<InputTextField
|
|
158
|
-
name="latitude-longitude"
|
|
159
|
-
icon-prepend="lucide:locate-fixed"
|
|
160
|
-
readonly
|
|
161
|
-
placeholder="ละติจูด, ลองจิจูด"
|
|
162
|
-
:model-value="
|
|
66
|
+
<SuggestPlaceMap :province-id="modelValue.address?.province_id" :amphur-id="modelValue.address?.amphur_id"
|
|
67
|
+
:tambon-id="modelValue.address?.tambon_id" @update:lat-lng="modelValue.latLng = $event" />
|
|
68
|
+
<InputTextField name="latitude-longitude" icon-prepend="lucide:locate-fixed" readonly
|
|
69
|
+
placeholder="ละติจูด, ลองจิจูด" :model-value="
|
|
163
70
|
modelValue.latLng ? `${modelValue.latLng.lat.toFixed(6)}, ${modelValue.latLng.lng.toFixed(6)}` : ''
|
|
164
|
-
"
|
|
165
|
-
/>
|
|
71
|
+
" />
|
|
166
72
|
</div>
|
|
167
73
|
</div>
|
|
168
74
|
</template>
|
|
@@ -6,63 +6,29 @@
|
|
|
6
6
|
</label>
|
|
7
7
|
<div
|
|
8
8
|
class="border-input relative flex w-full rounded-md border-[1px] bg-white px-[12px] py-[5px] gap-2 cursor-pointer"
|
|
9
|
-
@click="openModal"
|
|
10
|
-
|
|
11
|
-
<span
|
|
12
|
-
v-if="!isConfirmed"
|
|
13
|
-
class="flex-1 text-muted-foreground font-body-large"
|
|
14
|
-
>
|
|
9
|
+
@click="openModal">
|
|
10
|
+
<span v-if="!isConfirmed" class="flex-1 text-muted-foreground font-body-large">
|
|
15
11
|
{{ props.placeholder }}
|
|
16
12
|
</span>
|
|
17
13
|
<div v-else class="flex-1 flex flex-col gap-[4px]">
|
|
18
|
-
<div
|
|
19
|
-
v-for="item in schedules"
|
|
20
|
-
:key="item.day"
|
|
21
|
-
class="flex justify-between font-body-large"
|
|
22
|
-
>
|
|
14
|
+
<div v-for="item in schedules" :key="item.day" class="flex justify-between font-body-large">
|
|
23
15
|
<span>{{ getDayName(item.day) }}</span>
|
|
24
16
|
<div class="text-right flex flex-col items-end gap-1">
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
<span>หยุดทำการ</span>
|
|
28
|
-
</div>
|
|
29
|
-
<div v-else-if="item.isAllDay" class="flex items-center gap-1">
|
|
30
|
-
<Icon name="lucide:clock" :size="16" />
|
|
31
|
-
<span>เปิดตลอด 24 ชม.</span>
|
|
32
|
-
</div>
|
|
17
|
+
<span v-if="!item.isOpen">หยุดทำการ</span>
|
|
18
|
+
<span v-else-if="item.isAllDay">เปิดตลอด 24 ชม.</span>
|
|
33
19
|
<div v-else class="flex flex-col gap-1">
|
|
34
|
-
<
|
|
35
|
-
v-for="(slot, i) in item.timeSlots"
|
|
36
|
-
:key="i"
|
|
37
|
-
class="flex items-center gap-1"
|
|
38
|
-
>
|
|
39
|
-
<Icon name="lucide:clock" :size="16" />
|
|
40
|
-
<span>{{ slot.start }} - {{ slot.end }} น.</span>
|
|
41
|
-
</div>
|
|
20
|
+
<span v-for="(slot, i) in item.timeSlots" :key="i">{{ slot.start }} - {{ slot.end }} น.</span>
|
|
42
21
|
</div>
|
|
43
22
|
</div>
|
|
44
23
|
</div>
|
|
45
24
|
</div>
|
|
46
|
-
<Icon
|
|
47
|
-
name="lucide:chevron-right"
|
|
48
|
-
:size="16"
|
|
49
|
-
class="shrink-0 self-center"
|
|
50
|
-
/>
|
|
25
|
+
<Icon name="lucide:chevron-right" :size="16" class="shrink-0 self-center" />
|
|
51
26
|
</div>
|
|
52
27
|
</div>
|
|
53
28
|
<!-- Modal 1: List view -->
|
|
54
|
-
<Modal
|
|
55
|
-
v-model="isOpenModal"
|
|
56
|
-
title="วัน เวลาทำการ"
|
|
57
|
-
@close="closeModal"
|
|
58
|
-
class="w-[512px]"
|
|
59
|
-
>
|
|
29
|
+
<Modal v-model="isOpenModal" title="วัน เวลาทำการ" @close="closeModal" class="w-[512px]">
|
|
60
30
|
<div class="flex flex-col gap-[8px]">
|
|
61
|
-
<div
|
|
62
|
-
v-for="item in workingSchedules"
|
|
63
|
-
:key="item.day"
|
|
64
|
-
class="flex gap-[16px] items-center"
|
|
65
|
-
>
|
|
31
|
+
<div v-for="item in workingSchedules" :key="item.day" class="flex gap-[16px] items-center">
|
|
66
32
|
<div class="w-full">{{ getDayName(item.day) }}</div>
|
|
67
33
|
<div class="flex flex-col gap-[4px] w-full">
|
|
68
34
|
<div v-if="!item.isOpen" class="flex gap-[4px] items-center">
|
|
@@ -74,20 +40,13 @@
|
|
|
74
40
|
<div>เปิดตลอด 24 ชม.</div>
|
|
75
41
|
</div>
|
|
76
42
|
<div v-else class="flex flex-col gap-1">
|
|
77
|
-
<div
|
|
78
|
-
v-for="(slot, i) in item.timeSlots"
|
|
79
|
-
:key="i"
|
|
80
|
-
class="flex gap-[4px] items-center"
|
|
81
|
-
>
|
|
43
|
+
<div v-for="(slot, i) in item.timeSlots" :key="i" class="flex gap-[4px] items-center">
|
|
82
44
|
<Icon name="lucide:clock" :size="16" />
|
|
83
45
|
<div>{{ slot.start }} - {{ slot.end }} น.</div>
|
|
84
46
|
</div>
|
|
85
47
|
</div>
|
|
86
48
|
</div>
|
|
87
|
-
<div
|
|
88
|
-
class="w-full flex justify-end cursor-pointer"
|
|
89
|
-
@click="editSchedule(item.day)"
|
|
90
|
-
>
|
|
49
|
+
<div class="w-full flex justify-end cursor-pointer" @click="editSchedule(item.day)">
|
|
91
50
|
<Icon name="lucide:edit" :size="20" />
|
|
92
51
|
</div>
|
|
93
52
|
</div>
|
|
@@ -100,20 +59,11 @@
|
|
|
100
59
|
</template>
|
|
101
60
|
</Modal>
|
|
102
61
|
|
|
103
|
-
<Modal
|
|
104
|
-
v-model="isOpenEditModal"
|
|
105
|
-
title="วัน เวลาทำการ"
|
|
106
|
-
@close="closeEditModal"
|
|
107
|
-
class="w-[512px]"
|
|
108
|
-
>
|
|
62
|
+
<Modal v-model="isOpenEditModal" title="วัน เวลาทำการ" @close="closeEditModal" class="w-[512px]">
|
|
109
63
|
<div class="flex flex-col gap-4 px-4 py-2">
|
|
110
64
|
<div class="flex gap-2">
|
|
111
|
-
<div
|
|
112
|
-
|
|
113
|
-
:key="index"
|
|
114
|
-
:class="getDayButtonClass(index)"
|
|
115
|
-
@click="selectDay(index)"
|
|
116
|
-
>
|
|
65
|
+
<div v-for="(shortName, index) in dayShortNames" :key="index" :class="getDayButtonClass(index)"
|
|
66
|
+
@click="selectDay(index)">
|
|
117
67
|
{{ shortName }}
|
|
118
68
|
</div>
|
|
119
69
|
</div>
|
|
@@ -124,43 +74,18 @@
|
|
|
124
74
|
</div>
|
|
125
75
|
|
|
126
76
|
<div v-if="!isClosed && !isAllDayRef" class="flex flex-col gap-3">
|
|
127
|
-
<div
|
|
128
|
-
v-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
<InputSelect
|
|
133
|
-
:name="`time-slot-start-${timeSlot.id}`"
|
|
134
|
-
v-model="timeSlots[index].start"
|
|
135
|
-
label="เวลาเปิด"
|
|
136
|
-
:options="timeOptions"
|
|
137
|
-
placeholder="00:00"
|
|
138
|
-
/>
|
|
139
|
-
<InputSelect
|
|
140
|
-
:name="`time-slot-end-${timeSlot.id}`"
|
|
141
|
-
v-model="timeSlots[index].end"
|
|
142
|
-
label="เวลาปิด"
|
|
143
|
-
:options="timeOptions"
|
|
144
|
-
placeholder="00:00"
|
|
145
|
-
/>
|
|
77
|
+
<div v-for="(timeSlot, index) in timeSlots" :key="timeSlot.id" class="flex items-end justify-between">
|
|
78
|
+
<InputSelect :name="`time-slot-start-${timeSlot.id}`" v-model="timeSlots[index].start" label="เวลาเปิด"
|
|
79
|
+
:options="timeOptions" placeholder="00:00" />
|
|
80
|
+
<InputSelect :name="`time-slot-end-${timeSlot.id}`" v-model="timeSlots[index].end" label="เวลาปิด"
|
|
81
|
+
:options="timeOptions" placeholder="00:00" />
|
|
146
82
|
|
|
147
|
-
<Button
|
|
148
|
-
variant="icon"
|
|
149
|
-
color="destructive"
|
|
150
|
-
@click="removeTimeSlot(index)"
|
|
151
|
-
>
|
|
83
|
+
<Button variant="icon" color="destructive" @click="removeTimeSlot(index)">
|
|
152
84
|
<Icon name="lucide:trash-2" :size="20" />
|
|
153
85
|
</Button>
|
|
154
86
|
</div>
|
|
155
|
-
<Button
|
|
156
|
-
|
|
157
|
-
color="primary"
|
|
158
|
-
prepend-icon="lucide:plus"
|
|
159
|
-
size="small"
|
|
160
|
-
class="justify-start"
|
|
161
|
-
@click="addTimeSlot"
|
|
162
|
-
>เพิ่มเวลาทำการ</Button
|
|
163
|
-
>
|
|
87
|
+
<Button variant="text" color="primary" prepend-icon="lucide:plus" size="small" class="justify-start"
|
|
88
|
+
@click="addTimeSlot">เพิ่มเวลาทำการ</Button>
|
|
164
89
|
</div>
|
|
165
90
|
</div>
|
|
166
91
|
|