pukaad-ui-lib 1.304.0 → 1.306.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-review.vue +104 -104
- package/dist/runtime/components/display/display-image-place.vue +19 -2
- package/dist/runtime/components/drawer/drawer-post-review.vue +77 -77
- package/dist/runtime/components/drawer/drawer-suggest-place/drawer-suggest-place.d.vue.ts +1 -0
- package/dist/runtime/components/drawer/drawer-suggest-place/drawer-suggest-place.vue +34 -12
- package/dist/runtime/components/drawer/drawer-suggest-place/drawer-suggest-place.vue.d.ts +1 -0
- package/dist/runtime/components/drawer/drawer-suggest-place/suggest-place-form.vue +124 -124
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -1,110 +1,110 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
class="py-[16px] border-b-[1px] border-mercury last:border-b-0 flex gap-[16px] w-full"
|
|
4
|
-
>
|
|
5
|
-
<div>
|
|
6
|
-
<Avatar
|
|
7
|
-
:src="props.item.user.avatar"
|
|
8
|
-
alt="profile_myProfile"
|
|
9
|
-
:size="30"
|
|
10
|
-
class="cursor-pointer"
|
|
11
|
-
@click="navigateToProfile(props.item.user.path_name)"
|
|
12
|
-
/>
|
|
13
|
-
</div>
|
|
14
|
-
<div class="flex flex-col gap-[24px] w-full">
|
|
15
|
-
<div class="flex flex-col gap-[8px]">
|
|
16
|
-
<div class="flex flex-col gap-[6px]">
|
|
17
|
-
<div class="flex flex-col gap-[4px]">
|
|
18
|
-
<div class="flex justify-between items-center">
|
|
19
|
-
<div
|
|
20
|
-
class="font-body-large cursor-pointer"
|
|
21
|
-
@click="navigateToProfile(props.item.user.path_name)"
|
|
22
|
-
>
|
|
23
|
-
{{ props.item.user?.name }}
|
|
24
|
-
</div>
|
|
25
|
-
<div class="flex gap-[8px] items-center">
|
|
26
|
-
<Button
|
|
27
|
-
variant="text"
|
|
28
|
-
:color="liked ? 'primary' : 'default'"
|
|
29
|
-
:disabled="props.disabledLike || isLikeLoading"
|
|
30
|
-
:aria-pressed="liked"
|
|
31
|
-
@click="toggleLike"
|
|
32
|
-
>
|
|
33
|
-
<Icon
|
|
2
|
+
<div
|
|
3
|
+
class="py-[16px] border-b-[1px] border-mercury last:border-b-0 flex gap-[16px] w-full"
|
|
4
|
+
>
|
|
5
|
+
<div>
|
|
6
|
+
<Avatar
|
|
7
|
+
:src="props.item.user.avatar"
|
|
8
|
+
alt="profile_myProfile"
|
|
9
|
+
:size="30"
|
|
10
|
+
class="cursor-pointer"
|
|
11
|
+
@click="navigateToProfile(props.item.user.path_name)"
|
|
12
|
+
/>
|
|
13
|
+
</div>
|
|
14
|
+
<div class="flex flex-col gap-[24px] w-full">
|
|
15
|
+
<div class="flex flex-col gap-[8px]">
|
|
16
|
+
<div class="flex flex-col gap-[6px]">
|
|
17
|
+
<div class="flex flex-col gap-[4px]">
|
|
18
|
+
<div class="flex justify-between items-center">
|
|
19
|
+
<div
|
|
20
|
+
class="font-body-large cursor-pointer"
|
|
21
|
+
@click="navigateToProfile(props.item.user.path_name)"
|
|
22
|
+
>
|
|
23
|
+
{{ props.item.user?.name }}
|
|
24
|
+
</div>
|
|
25
|
+
<div class="flex gap-[8px] items-center">
|
|
26
|
+
<Button
|
|
27
|
+
variant="text"
|
|
28
|
+
:color="liked ? 'primary' : 'default'"
|
|
29
|
+
:disabled="props.disabledLike || isLikeLoading"
|
|
30
|
+
:aria-pressed="liked"
|
|
31
|
+
@click="toggleLike"
|
|
32
|
+
>
|
|
33
|
+
<Icon
|
|
34
34
|
:name="
|
|
35
35
|
liked ? 'pukaad:thumbs-up-solid' : 'pukaad:thumbs-up-regular'
|
|
36
|
-
"
|
|
37
|
-
:size="20"
|
|
38
|
-
/>
|
|
39
|
-
{{ convertNumber(likeCount) }}
|
|
40
|
-
</Button>
|
|
41
|
-
<PickerOptionMenuUser
|
|
42
|
-
v-if="!props.disabledMenu"
|
|
43
|
-
:state="menuType"
|
|
44
|
-
disabled-padding
|
|
45
|
-
@review-edit="onEdit"
|
|
46
|
-
@review-delete="emit('delete', props.item)"
|
|
47
|
-
/>
|
|
48
|
-
</div>
|
|
49
|
-
</div>
|
|
50
|
-
<div class="text-gray font-body-small">
|
|
51
|
-
{{ convertNumber(props.item.user?.review_count ?? 0) }} รีวิว •
|
|
52
|
-
{{ convertNumber(props.item.user?.like_count ?? 0) }} ชื่นชอบรีวิว
|
|
53
|
-
</div>
|
|
54
|
-
</div>
|
|
55
|
-
<div class="flex gap-[8px] items-center">
|
|
56
|
-
<InputRating
|
|
57
|
-
:size="11"
|
|
58
|
-
readonly
|
|
59
|
-
:model-value="props.item.review?.rating"
|
|
60
|
-
/>
|
|
61
|
-
<div class="text-gray font-body-small">
|
|
62
|
-
{{
|
|
63
|
-
convertDateTorelativeText(props.item.review?.created_at ?? "")
|
|
64
|
-
}}
|
|
65
|
-
</div>
|
|
66
|
-
</div>
|
|
67
|
-
</div>
|
|
68
|
-
|
|
69
|
-
<div v-if="props.item.review?.description" class="font-body-large">
|
|
70
|
-
{{ props.item.review?.description }}
|
|
71
|
-
</div>
|
|
72
|
-
|
|
73
|
-
<div v-if="props.item.review?.images?.length" class="flex gap-[8px]">
|
|
74
|
-
<DisplayImageReview
|
|
75
|
-
:items="props.item.review?.images"
|
|
76
|
-
@select="selectImage"
|
|
77
|
-
/>
|
|
78
|
-
</div>
|
|
79
|
-
</div>
|
|
80
|
-
|
|
81
|
-
<div v-if="props.item.replies">
|
|
82
|
-
<div class="p-[16px] rounded-sm bg-bright">
|
|
83
|
-
<div class="text-gray font-body-large">
|
|
84
|
-
การตอบกลับจาก {{ props.item.replies?.author }}
|
|
85
|
-
</div>
|
|
86
|
-
<div class="font-body-large">
|
|
87
|
-
{{ props.item.replies?.description }}
|
|
88
|
-
</div>
|
|
89
|
-
</div>
|
|
90
|
-
</div>
|
|
91
|
-
</div>
|
|
92
|
-
</div>
|
|
93
|
-
|
|
94
|
-
<ModalMediaView
|
|
95
|
-
v-model="isOpen"
|
|
96
|
-
:items="props.item.review?.images"
|
|
97
|
-
:start-index="startIndex"
|
|
98
|
-
title="รูปภาพรีวิว"
|
|
99
|
-
/>
|
|
100
|
-
|
|
101
|
-
<!-- Drawer แก้ไขรีวิว (ใช้เมื่อมี place context) -->
|
|
102
|
-
<DrawerPostReview
|
|
103
|
-
v-if="props.place?.id"
|
|
104
|
-
v-model="isDrawerOpen"
|
|
105
|
-
:item="drawerItem"
|
|
106
|
-
@success="onReviewSuccess"
|
|
107
|
-
/>
|
|
36
|
+
"
|
|
37
|
+
:size="20"
|
|
38
|
+
/>
|
|
39
|
+
{{ convertNumber(likeCount) }}
|
|
40
|
+
</Button>
|
|
41
|
+
<PickerOptionMenuUser
|
|
42
|
+
v-if="!props.disabledMenu"
|
|
43
|
+
:state="menuType"
|
|
44
|
+
disabled-padding
|
|
45
|
+
@review-edit="onEdit"
|
|
46
|
+
@review-delete="emit('delete', props.item)"
|
|
47
|
+
/>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
<div class="text-gray font-body-small">
|
|
51
|
+
{{ convertNumber(props.item.user?.review_count ?? 0) }} รีวิว •
|
|
52
|
+
{{ convertNumber(props.item.user?.like_count ?? 0) }} ชื่นชอบรีวิว
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="flex gap-[8px] items-center">
|
|
56
|
+
<InputRating
|
|
57
|
+
:size="11"
|
|
58
|
+
readonly
|
|
59
|
+
:model-value="props.item.review?.rating"
|
|
60
|
+
/>
|
|
61
|
+
<div class="text-gray font-body-small">
|
|
62
|
+
{{
|
|
63
|
+
convertDateTorelativeText(props.item.review?.created_at ?? "")
|
|
64
|
+
}}
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<div v-if="props.item.review?.description" class="font-body-large">
|
|
70
|
+
{{ props.item.review?.description }}
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
<div v-if="props.item.review?.images?.length" class="flex gap-[8px]">
|
|
74
|
+
<DisplayImageReview
|
|
75
|
+
:items="props.item.review?.images"
|
|
76
|
+
@select="selectImage"
|
|
77
|
+
/>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
<div v-if="props.item.replies">
|
|
82
|
+
<div class="p-[16px] rounded-sm bg-bright">
|
|
83
|
+
<div class="text-gray font-body-large">
|
|
84
|
+
การตอบกลับจาก {{ props.item.replies?.author }}
|
|
85
|
+
</div>
|
|
86
|
+
<div class="font-body-large">
|
|
87
|
+
{{ props.item.replies?.description }}
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<ModalMediaView
|
|
95
|
+
v-model="isOpen"
|
|
96
|
+
:items="props.item.review?.images"
|
|
97
|
+
:start-index="startIndex"
|
|
98
|
+
title="รูปภาพรีวิว"
|
|
99
|
+
/>
|
|
100
|
+
|
|
101
|
+
<!-- Drawer แก้ไขรีวิว (ใช้เมื่อมี place context) -->
|
|
102
|
+
<DrawerPostReview
|
|
103
|
+
v-if="props.place?.id"
|
|
104
|
+
v-model="isDrawerOpen"
|
|
105
|
+
:item="drawerItem"
|
|
106
|
+
@success="onReviewSuccess"
|
|
107
|
+
/>
|
|
108
108
|
</template>
|
|
109
109
|
|
|
110
110
|
<script setup>
|
|
@@ -1,6 +1,23 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<!-- Personal state → Featured layout -->
|
|
3
|
-
<div v-if="layoutMode === 'featured'" class="
|
|
2
|
+
<!-- Personal state → Featured layout — 1 รูป: w-full -->
|
|
3
|
+
<div v-if="layoutMode === 'featured' && photos.length === 1" class="h-[360px]">
|
|
4
|
+
<div class="w-full h-full rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 0)">
|
|
5
|
+
<Image :src="photos[0]" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
6
|
+
</div>
|
|
7
|
+
</div>
|
|
8
|
+
|
|
9
|
+
<!-- Personal state → Featured layout — 2 รูป: แบ่งครึ่ง w-full -->
|
|
10
|
+
<div v-else-if="layoutMode === 'featured' && photos.length === 2" class="flex gap-[8px] h-[360px]">
|
|
11
|
+
<div class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 0)">
|
|
12
|
+
<Image :src="photos[0]" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
13
|
+
</div>
|
|
14
|
+
<div class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 1)">
|
|
15
|
+
<Image :src="photos[1]" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
<!-- Personal state → Featured layout — 3+ รูป: layout เดิม -->
|
|
20
|
+
<div v-else-if="layoutMode === 'featured'" class="flex gap-[8px] h-[360px]">
|
|
4
21
|
<div v-if="photos[0]" class="w-[620px] shrink-0 rounded-[8px] overflow-hidden cursor-pointer"
|
|
5
22
|
@click="openLightbox('photo', 0)">
|
|
6
23
|
<Image :src="photos[0]" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
@@ -1,81 +1,81 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<Drawer
|
|
3
|
-
class="w-[748px]"
|
|
4
|
-
:title="drawerTitle"
|
|
5
|
-
@close="onClose"
|
|
6
|
-
disabled-auto-close
|
|
7
|
-
@submit="onSubmit"
|
|
8
|
-
v-model="isOpen"
|
|
9
|
-
>
|
|
10
|
-
<div class="flex flex-col gap-[16px]">
|
|
11
|
-
<div
|
|
12
|
-
v-if="form.coverImage || form.placeName || form.address"
|
|
13
|
-
class="flex gap-[16px]"
|
|
14
|
-
>
|
|
15
|
-
<div
|
|
16
|
-
v-if="form.coverImage"
|
|
17
|
-
class="w-[178px] h-[100px] rounded-[8px] overflow-hidden flex-shrink-0"
|
|
18
|
-
>
|
|
19
|
-
<Image
|
|
20
|
-
:src="form.coverImage"
|
|
21
|
-
width="auto"
|
|
22
|
-
height="auto"
|
|
23
|
-
fit="cover"
|
|
24
|
-
/>
|
|
25
|
-
</div>
|
|
26
|
-
<div class="flex flex-col gap-[4px]">
|
|
27
|
-
<div class="font-body-large-prominent">{{ form.placeName }}</div>
|
|
28
|
-
<div class="font-body-small text-gray">{{ form.address }}</div>
|
|
29
|
-
</div>
|
|
30
|
-
</div>
|
|
31
|
-
|
|
32
|
-
<div class="flex items-center justify-center py-[16px]">
|
|
33
|
-
<InputRating v-model="form.rating" :size="28" />
|
|
34
|
-
</div>
|
|
35
|
-
|
|
36
|
-
<InputTextarea
|
|
37
|
-
name="description"
|
|
38
|
-
label="คำอธิบาย"
|
|
39
|
-
placeholder="เขียนรีวิวของคุณ"
|
|
40
|
-
showCounter
|
|
41
|
-
v-model="form.description"
|
|
42
|
-
class="min-h-[120px]"
|
|
43
|
-
/>
|
|
44
|
-
|
|
45
|
-
<div class="flex flex-col gap-[8px]">
|
|
46
|
-
<div class="flex flex-col gap-[4px]">
|
|
47
|
-
<div class="text-gray font-body-large">เพิ่มภาพถ่าย</div>
|
|
48
|
-
<div class="text-gray font-body-small">อัปโหลด 9 รายการ</div>
|
|
49
|
-
</div>
|
|
50
|
-
<InputFile
|
|
51
|
-
:limit="9"
|
|
52
|
-
name="photos"
|
|
53
|
-
accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
|
|
54
|
-
v-model="form.photos"
|
|
55
|
-
/>
|
|
56
|
-
<div class="flex flex-col text-gray font-body-small">
|
|
57
|
-
<div>รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif</div>
|
|
58
|
-
<div>ขนาดไฟล์สูงสุด 30 mb</div>
|
|
59
|
-
</div>
|
|
60
|
-
</div>
|
|
61
|
-
</div>
|
|
62
|
-
|
|
63
|
-
<template #footer>
|
|
64
|
-
<div class="flex justify-end gap-[16px] items-center">
|
|
65
|
-
<Button variant="outline" @click="onClose" :disabled="isSubmitting"
|
|
66
|
-
>ยกเลิก</Button
|
|
67
|
-
>
|
|
68
|
-
<Button
|
|
69
|
-
type="submit"
|
|
70
|
-
color="primary"
|
|
71
|
-
:disabled="form.rating === 0 || isSubmitting"
|
|
72
|
-
:loading="isSubmitting"
|
|
73
|
-
>
|
|
74
|
-
ยืนยัน
|
|
75
|
-
</Button>
|
|
76
|
-
</div>
|
|
77
|
-
</template>
|
|
78
|
-
</Drawer>
|
|
2
|
+
<Drawer
|
|
3
|
+
class="w-[748px]"
|
|
4
|
+
:title="drawerTitle"
|
|
5
|
+
@close="onClose"
|
|
6
|
+
disabled-auto-close
|
|
7
|
+
@submit="onSubmit"
|
|
8
|
+
v-model="isOpen"
|
|
9
|
+
>
|
|
10
|
+
<div class="flex flex-col gap-[16px]">
|
|
11
|
+
<div
|
|
12
|
+
v-if="form.coverImage || form.placeName || form.address"
|
|
13
|
+
class="flex gap-[16px]"
|
|
14
|
+
>
|
|
15
|
+
<div
|
|
16
|
+
v-if="form.coverImage"
|
|
17
|
+
class="w-[178px] h-[100px] rounded-[8px] overflow-hidden flex-shrink-0"
|
|
18
|
+
>
|
|
19
|
+
<Image
|
|
20
|
+
:src="form.coverImage"
|
|
21
|
+
width="auto"
|
|
22
|
+
height="auto"
|
|
23
|
+
fit="cover"
|
|
24
|
+
/>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="flex flex-col gap-[4px]">
|
|
27
|
+
<div class="font-body-large-prominent">{{ form.placeName }}</div>
|
|
28
|
+
<div class="font-body-small text-gray">{{ form.address }}</div>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<div class="flex items-center justify-center py-[16px]">
|
|
33
|
+
<InputRating v-model="form.rating" :size="28" />
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
<InputTextarea
|
|
37
|
+
name="description"
|
|
38
|
+
label="คำอธิบาย"
|
|
39
|
+
placeholder="เขียนรีวิวของคุณ"
|
|
40
|
+
showCounter
|
|
41
|
+
v-model="form.description"
|
|
42
|
+
class="min-h-[120px]"
|
|
43
|
+
/>
|
|
44
|
+
|
|
45
|
+
<div class="flex flex-col gap-[8px]">
|
|
46
|
+
<div class="flex flex-col gap-[4px]">
|
|
47
|
+
<div class="text-gray font-body-large">เพิ่มภาพถ่าย</div>
|
|
48
|
+
<div class="text-gray font-body-small">อัปโหลด 9 รายการ</div>
|
|
49
|
+
</div>
|
|
50
|
+
<InputFile
|
|
51
|
+
:limit="9"
|
|
52
|
+
name="photos"
|
|
53
|
+
accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
|
|
54
|
+
v-model="form.photos"
|
|
55
|
+
/>
|
|
56
|
+
<div class="flex flex-col text-gray font-body-small">
|
|
57
|
+
<div>รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif</div>
|
|
58
|
+
<div>ขนาดไฟล์สูงสุด 30 mb</div>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
<template #footer>
|
|
64
|
+
<div class="flex justify-end gap-[16px] items-center">
|
|
65
|
+
<Button variant="outline" @click="onClose" :disabled="isSubmitting"
|
|
66
|
+
>ยกเลิก</Button
|
|
67
|
+
>
|
|
68
|
+
<Button
|
|
69
|
+
type="submit"
|
|
70
|
+
color="primary"
|
|
71
|
+
:disabled="form.rating === 0 || isSubmitting"
|
|
72
|
+
:loading="isSubmitting"
|
|
73
|
+
>
|
|
74
|
+
ยืนยัน
|
|
75
|
+
</Button>
|
|
76
|
+
</div>
|
|
77
|
+
</template>
|
|
78
|
+
</Drawer>
|
|
79
79
|
</template>
|
|
80
80
|
|
|
81
81
|
<script setup>
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<Drawer
|
|
2
|
+
<Drawer
|
|
3
|
+
class="w-[888px]"
|
|
4
|
+
:title="drawerTitle"
|
|
5
|
+
:loading="loading"
|
|
6
|
+
v-model="isOpen"
|
|
7
|
+
>
|
|
3
8
|
<!-- backoffice: แสดงแบบมี tabs -->
|
|
4
9
|
<ShadTabs v-if="props.state === 'backoffice'" default-value="business-info">
|
|
5
10
|
<ShadTabsList>
|
|
@@ -44,9 +49,11 @@
|
|
|
44
49
|
:column="photoColumns"
|
|
45
50
|
show-cover
|
|
46
51
|
:model-value="formData.photos"
|
|
47
|
-
@update:model-value="
|
|
48
|
-
|
|
49
|
-
}
|
|
52
|
+
@update:model-value="
|
|
53
|
+
(val) => {
|
|
54
|
+
formData = { ...formData, photos: val };
|
|
55
|
+
}
|
|
56
|
+
"
|
|
50
57
|
/>
|
|
51
58
|
</div>
|
|
52
59
|
</ShadTabsContent>
|
|
@@ -82,9 +89,11 @@
|
|
|
82
89
|
accept="video/*"
|
|
83
90
|
:column="videoColumns"
|
|
84
91
|
:model-value="formData.videos"
|
|
85
|
-
@update:model-value="
|
|
86
|
-
|
|
87
|
-
}
|
|
92
|
+
@update:model-value="
|
|
93
|
+
(val) => {
|
|
94
|
+
formData = { ...formData, videos: val };
|
|
95
|
+
}
|
|
96
|
+
"
|
|
88
97
|
/>
|
|
89
98
|
</div>
|
|
90
99
|
</ShadTabsContent>
|
|
@@ -92,7 +101,11 @@
|
|
|
92
101
|
|
|
93
102
|
<!-- personal / business: แสดงตรงๆ ไม่มี tabs -->
|
|
94
103
|
<div v-else>
|
|
95
|
-
<SuggestPlaceForm
|
|
104
|
+
<SuggestPlaceForm
|
|
105
|
+
v-model="formData"
|
|
106
|
+
:state="props.state"
|
|
107
|
+
:fixed-province-id="provinceIdState ?? void 0"
|
|
108
|
+
/>
|
|
96
109
|
</div>
|
|
97
110
|
<template #footer>
|
|
98
111
|
<div class="flex gap-[8px] justify-end">
|
|
@@ -111,12 +124,16 @@ import { useNuxtApp, useState } from "nuxt/app";
|
|
|
111
124
|
import { useApi } from "#pukaad-ui/runtime/composables/useApi";
|
|
112
125
|
import { usePresignedUpload } from "#pukaad-ui/runtime/composables/usePresignedUpload";
|
|
113
126
|
const props = defineProps({
|
|
114
|
-
state: { type: String, required: false, default: "personal" }
|
|
127
|
+
state: { type: String, required: false, default: "personal" },
|
|
128
|
+
editId: { type: String, required: false }
|
|
115
129
|
});
|
|
116
130
|
const emit = defineEmits(["submit"]);
|
|
117
131
|
const { $toast } = useNuxtApp();
|
|
118
132
|
const api = useApi();
|
|
119
|
-
const provinceIdState = useState(
|
|
133
|
+
const provinceIdState = useState(
|
|
134
|
+
"pukaad:province-id",
|
|
135
|
+
() => null
|
|
136
|
+
);
|
|
120
137
|
const { uploadFiles } = usePresignedUpload();
|
|
121
138
|
const isOpen = defineModel({ type: Boolean, ...{ default: false } });
|
|
122
139
|
const formData = defineModel("data", { type: Object, ...{ default: () => ({}) } });
|
|
@@ -165,9 +182,11 @@ const onSubmit = async () => {
|
|
|
165
182
|
const categoryIds = (d.categories ?? []).map(
|
|
166
183
|
(c) => typeof c === "object" ? String(c.id ?? c.value) : String(c)
|
|
167
184
|
);
|
|
168
|
-
const
|
|
185
|
+
const baseEndpoint = endpointMap[props.state] ?? "/personal/suggest-places";
|
|
186
|
+
const endpoint = props.editId ? `${baseEndpoint}/${props.editId}` : baseEndpoint;
|
|
187
|
+
const method = props.editId ? "PATCH" : "POST";
|
|
169
188
|
const res = await api(endpoint, {
|
|
170
|
-
method
|
|
189
|
+
method,
|
|
171
190
|
body: {
|
|
172
191
|
business_name: d.businessName ?? "",
|
|
173
192
|
name_th: d.nameTh ?? "",
|
|
@@ -210,6 +229,9 @@ const onSubmit = async () => {
|
|
|
210
229
|
}
|
|
211
230
|
};
|
|
212
231
|
const drawerTitle = computed(() => {
|
|
232
|
+
if (props.editId) {
|
|
233
|
+
return "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48";
|
|
234
|
+
}
|
|
213
235
|
if (props.state === "personal" || props.state === "business") {
|
|
214
236
|
return "\u0E41\u0E19\u0E30\u0E19\u0E33\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48\u0E17\u0E35\u0E48\u0E02\u0E32\u0E14\u0E44\u0E1B";
|
|
215
237
|
}
|
|
@@ -1,130 +1,130 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="flex gap-[16px] w-full">
|
|
3
|
-
<!-- กรอกข้อมูล -->
|
|
4
|
-
<div class="flex flex-col gap-[16px] w-[490px]">
|
|
5
|
-
<InputAddress name="address" v-model="modelValue.address" :fixed-province-id="props.fixedProvinceId" />
|
|
6
|
-
<template v-if="isAddressCompleted">
|
|
7
|
-
<div class="font-body-large-prominent">รายละเอียด</div>
|
|
8
|
-
<div class="flex flex-col gap-[4px]">
|
|
9
|
-
<InputAutocomplete
|
|
10
|
-
name="businessName"
|
|
11
|
-
v-model="modelValue.businessName"
|
|
12
|
-
label="ชื่อสถานที่ธุรกิจ"
|
|
13
|
-
placeholder="กรอกชื่อสถานที่"
|
|
14
|
-
required
|
|
15
|
-
show-counter
|
|
16
|
-
:limit="180"
|
|
17
|
-
:free-text="true"
|
|
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 v-if="extraNameCount < 2" variant="text" color="primary" class="w-[145px]" @click="extraNameCount++">
|
|
41
|
-
<Icon name="lucide:plus" />
|
|
42
|
-
เพิ่มชื่อสถานที่
|
|
43
|
-
</Button>
|
|
44
|
-
</div>
|
|
45
|
-
<InputCombobox
|
|
46
|
-
name="categories"
|
|
47
|
-
v-model="modelValue.categories"
|
|
48
|
-
label="หมวดหมู่"
|
|
49
|
-
placeholder="เพิ่มหมวดหมู่ที่เกี่ยวข้องกับสถานที่"
|
|
50
|
-
:limit="3"
|
|
51
|
-
show-counter
|
|
52
|
-
:options="categoryOptions"
|
|
53
|
-
required
|
|
54
|
-
multiple
|
|
55
|
-
/>
|
|
56
|
-
<InputTextarea
|
|
57
|
-
name="description"
|
|
58
|
-
v-model="modelValue.description"
|
|
59
|
-
label="คำอธิบาย"
|
|
60
|
-
placeholder="คำอธิบายเกี่ยวกับสถานที่ (สูงสุด 220 ตัวอักษร)"
|
|
61
|
-
:limit="220"
|
|
62
|
-
show-counter
|
|
63
|
-
/>
|
|
64
|
-
<InputDateOpening name="openingHours" v-model="modelValue.openingHours" />
|
|
65
|
-
<div class="flex flex-col gap-[8px]">
|
|
66
|
-
<InputTextField name="phone" v-model="modelValue.phone" label="เบอร์โทรศัพท์" placeholder="กรอกเบอร์โทรศัพท์" />
|
|
67
|
-
<InputTextField
|
|
68
|
-
v-for="(_, index) in modelValue.extraPhones"
|
|
69
|
-
:key="index"
|
|
70
|
-
:name="`extraPhone-${index}`"
|
|
71
|
-
label="เบอร์โทรศัพท์"
|
|
72
|
-
placeholder="กรอกเบอร์โทรศัพท์"
|
|
73
|
-
v-model="modelValue.extraPhones[index]"
|
|
74
|
-
/>
|
|
75
|
-
<Button variant="text" color="primary" class="w-[145px]" @click="modelValue.extraPhones.push('')">
|
|
76
|
-
<Icon name="lucide:plus" />
|
|
77
|
-
เพิ่มเบอร์โทรศัพท์
|
|
78
|
-
</Button>
|
|
79
|
-
<InputLink name="contactChannels" format="contact_channel" default-first v-model="modelValue.contactChannels" />
|
|
80
|
-
</div>
|
|
81
|
-
<template v-if="props.state === 'personal'">
|
|
82
|
-
<div class="flex flex-col gap-[16px]">
|
|
83
|
-
<InputCheckbox name="isReview" v-model="modelValue.isReview" label="คุณต้องการรีวิวสถานที่นี้" />
|
|
84
|
-
<template v-if="modelValue.isReview">
|
|
85
|
-
<InputRating name="rating" v-model="modelValue.rating" class="flex py-4 justify-center" />
|
|
86
|
-
<InputTextarea
|
|
87
|
-
name="reviewDescription"
|
|
88
|
-
v-model="modelValue.reviewDescription"
|
|
89
|
-
label="คำอธิบาย"
|
|
90
|
-
placeholder="คำอธิบายเกี่ยวกับสถานที่"
|
|
91
|
-
show-counter
|
|
92
|
-
/>
|
|
93
|
-
<div class="flex flex-col gap-[8px]">
|
|
94
|
-
<div class="flex flex-col gap-[4px]">
|
|
95
|
-
<div class="font-body-large-prominent text-gray">เพิ่มภาพถ่าย</div>
|
|
96
|
-
<div class="font-body-small text-gray">สูงสุด 9 รายการ</div>
|
|
97
|
-
</div>
|
|
98
|
-
<InputFile name="reviewPhotos" v-model="modelValue.reviewPhotos" accept="image/*" :limit="9" />
|
|
99
|
-
<div class="font-body-small text-gray w-[250px]">
|
|
100
|
-
รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif ขนาดไฟล์ไม่เกิน 30 mb
|
|
101
|
-
</div>
|
|
102
|
-
</div>
|
|
103
|
-
</template>
|
|
104
|
-
</div>
|
|
105
|
-
</template>
|
|
106
|
-
</template>
|
|
107
|
-
</div>
|
|
108
|
-
|
|
109
|
-
<!-- แสดง polygon -->
|
|
110
|
-
<div class="flex flex-col gap-[16px] w-[334px] sticky top-0 self-start">
|
|
111
|
-
<SuggestPlaceMap
|
|
112
|
-
:province-id="modelValue.address?.province_id"
|
|
113
|
-
:amphur-id="modelValue.address?.amphur_id"
|
|
114
|
-
:tambon-id="modelValue.address?.tambon_id"
|
|
115
|
-
@update:lat-lng="modelValue.latLng = $event"
|
|
116
|
-
/>
|
|
117
|
-
<InputTextField
|
|
118
|
-
name="latitude-longitude"
|
|
119
|
-
icon-prepend="lucide:locate-fixed"
|
|
120
|
-
readonly
|
|
121
|
-
placeholder="ละติจูด, ลองจิจูด"
|
|
2
|
+
<div class="flex gap-[16px] w-full">
|
|
3
|
+
<!-- กรอกข้อมูล -->
|
|
4
|
+
<div class="flex flex-col gap-[16px] w-[490px]">
|
|
5
|
+
<InputAddress name="address" v-model="modelValue.address" :fixed-province-id="props.fixedProvinceId" />
|
|
6
|
+
<template v-if="isAddressCompleted">
|
|
7
|
+
<div class="font-body-large-prominent">รายละเอียด</div>
|
|
8
|
+
<div class="flex flex-col gap-[4px]">
|
|
9
|
+
<InputAutocomplete
|
|
10
|
+
name="businessName"
|
|
11
|
+
v-model="modelValue.businessName"
|
|
12
|
+
label="ชื่อสถานที่ธุรกิจ"
|
|
13
|
+
placeholder="กรอกชื่อสถานที่"
|
|
14
|
+
required
|
|
15
|
+
show-counter
|
|
16
|
+
:limit="180"
|
|
17
|
+
:free-text="true"
|
|
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 v-if="extraNameCount < 2" variant="text" color="primary" class="w-[145px]" @click="extraNameCount++">
|
|
41
|
+
<Icon name="lucide:plus" />
|
|
42
|
+
เพิ่มชื่อสถานที่
|
|
43
|
+
</Button>
|
|
44
|
+
</div>
|
|
45
|
+
<InputCombobox
|
|
46
|
+
name="categories"
|
|
47
|
+
v-model="modelValue.categories"
|
|
48
|
+
label="หมวดหมู่"
|
|
49
|
+
placeholder="เพิ่มหมวดหมู่ที่เกี่ยวข้องกับสถานที่"
|
|
50
|
+
:limit="3"
|
|
51
|
+
show-counter
|
|
52
|
+
:options="categoryOptions"
|
|
53
|
+
required
|
|
54
|
+
multiple
|
|
55
|
+
/>
|
|
56
|
+
<InputTextarea
|
|
57
|
+
name="description"
|
|
58
|
+
v-model="modelValue.description"
|
|
59
|
+
label="คำอธิบาย"
|
|
60
|
+
placeholder="คำอธิบายเกี่ยวกับสถานที่ (สูงสุด 220 ตัวอักษร)"
|
|
61
|
+
:limit="220"
|
|
62
|
+
show-counter
|
|
63
|
+
/>
|
|
64
|
+
<InputDateOpening name="openingHours" v-model="modelValue.openingHours" />
|
|
65
|
+
<div class="flex flex-col gap-[8px]">
|
|
66
|
+
<InputTextField name="phone" v-model="modelValue.phone" label="เบอร์โทรศัพท์" placeholder="กรอกเบอร์โทรศัพท์" />
|
|
67
|
+
<InputTextField
|
|
68
|
+
v-for="(_, index) in modelValue.extraPhones"
|
|
69
|
+
:key="index"
|
|
70
|
+
:name="`extraPhone-${index}`"
|
|
71
|
+
label="เบอร์โทรศัพท์"
|
|
72
|
+
placeholder="กรอกเบอร์โทรศัพท์"
|
|
73
|
+
v-model="modelValue.extraPhones[index]"
|
|
74
|
+
/>
|
|
75
|
+
<Button variant="text" color="primary" class="w-[145px]" @click="modelValue.extraPhones.push('')">
|
|
76
|
+
<Icon name="lucide:plus" />
|
|
77
|
+
เพิ่มเบอร์โทรศัพท์
|
|
78
|
+
</Button>
|
|
79
|
+
<InputLink name="contactChannels" format="contact_channel" default-first v-model="modelValue.contactChannels" />
|
|
80
|
+
</div>
|
|
81
|
+
<template v-if="props.state === 'personal'">
|
|
82
|
+
<div class="flex flex-col gap-[16px]">
|
|
83
|
+
<InputCheckbox name="isReview" v-model="modelValue.isReview" label="คุณต้องการรีวิวสถานที่นี้" />
|
|
84
|
+
<template v-if="modelValue.isReview">
|
|
85
|
+
<InputRating name="rating" v-model="modelValue.rating" class="flex py-4 justify-center" />
|
|
86
|
+
<InputTextarea
|
|
87
|
+
name="reviewDescription"
|
|
88
|
+
v-model="modelValue.reviewDescription"
|
|
89
|
+
label="คำอธิบาย"
|
|
90
|
+
placeholder="คำอธิบายเกี่ยวกับสถานที่"
|
|
91
|
+
show-counter
|
|
92
|
+
/>
|
|
93
|
+
<div class="flex flex-col gap-[8px]">
|
|
94
|
+
<div class="flex flex-col gap-[4px]">
|
|
95
|
+
<div class="font-body-large-prominent text-gray">เพิ่มภาพถ่าย</div>
|
|
96
|
+
<div class="font-body-small text-gray">สูงสุด 9 รายการ</div>
|
|
97
|
+
</div>
|
|
98
|
+
<InputFile name="reviewPhotos" v-model="modelValue.reviewPhotos" accept="image/*" :limit="9" />
|
|
99
|
+
<div class="font-body-small text-gray w-[250px]">
|
|
100
|
+
รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif ขนาดไฟล์ไม่เกิน 30 mb
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
</template>
|
|
104
|
+
</div>
|
|
105
|
+
</template>
|
|
106
|
+
</template>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
<!-- แสดง polygon -->
|
|
110
|
+
<div class="flex flex-col gap-[16px] w-[334px] sticky top-0 self-start">
|
|
111
|
+
<SuggestPlaceMap
|
|
112
|
+
:province-id="modelValue.address?.province_id"
|
|
113
|
+
:amphur-id="modelValue.address?.amphur_id"
|
|
114
|
+
:tambon-id="modelValue.address?.tambon_id"
|
|
115
|
+
@update:lat-lng="modelValue.latLng = $event"
|
|
116
|
+
/>
|
|
117
|
+
<InputTextField
|
|
118
|
+
name="latitude-longitude"
|
|
119
|
+
icon-prepend="lucide:locate-fixed"
|
|
120
|
+
readonly
|
|
121
|
+
placeholder="ละติจูด, ลองจิจูด"
|
|
122
122
|
:model-value="
|
|
123
123
|
modelValue.latLng ? `${modelValue.latLng.lat.toFixed(6)}, ${modelValue.latLng.lng.toFixed(6)}` : ''
|
|
124
|
-
"
|
|
125
|
-
/>
|
|
126
|
-
</div>
|
|
127
|
-
</div>
|
|
124
|
+
"
|
|
125
|
+
/>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
128
|
</template>
|
|
129
129
|
|
|
130
130
|
<script setup>
|