@iservice365/layer-common 1.4.2 → 1.5.1
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/CHANGELOG.md +12 -0
- package/components/BillingMain.vue +66 -0
- package/components/Card/Toggle.vue +25 -0
- package/components/Dialog/UpdateMoreAction.vue +5 -1
- package/components/Editor.vue +61 -0
- package/components/ImageCarousel.vue +98 -0
- package/components/Input/FileV2.vue +81 -36
- package/components/ServiceProviderMain.vue +410 -70
- package/components/WorkOrder/Main.vue +156 -75
- package/composables/useFacility.ts +246 -0
- package/composables/useServiceProvider.ts +8 -2
- package/package.json +3 -1
- package/components/FacilityForm.vue +0 -226
- package/components/FacilityFormAvailability.vue +0 -13
- package/components/FacilityFormBookingFee.vue +0 -13
- package/components/FacilityFormBookingPolicy.vue +0 -13
- package/components/FacilityFormDepositFee.vue +0 -13
- package/components/FacilityFormDescription.vue +0 -13
- package/components/FacilityFormInformation.vue +0 -40
- package/components/FacilityFormRefund.vue +0 -13
- package/components/FacilityFormRulesAndPolicies.vue +0 -13
- package/components/FacilityFormSecurityChecklist.vue +0 -13
|
@@ -1,226 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<v-card width="100%" :loading="processing">
|
|
3
|
-
<v-toolbar>
|
|
4
|
-
<v-row no-gutters class="fill-height px-6" align="center">
|
|
5
|
-
<span class="font-weight-bold text-h5 text-capitalize">
|
|
6
|
-
{{ prop.mode }} Facility
|
|
7
|
-
</span>
|
|
8
|
-
</v-row>
|
|
9
|
-
</v-toolbar>
|
|
10
|
-
<v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-3">
|
|
11
|
-
<v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorMessage = ''">
|
|
12
|
-
<v-row no-gutters class="pt-4">
|
|
13
|
-
|
|
14
|
-
<v-col cols="12">
|
|
15
|
-
<v-expansion-panels v-model="panels">
|
|
16
|
-
<template v-for="section in sections" :key="section.value">
|
|
17
|
-
<v-expansion-panel :value="section.value" :color="panels.includes(section.value) ? 'primary-button' : 'grey-lighten-3'" elevation="3" >
|
|
18
|
-
<v-expansion-panel-title>
|
|
19
|
-
<span class="font-weight-bold">{{ section.label }}</span>
|
|
20
|
-
</v-expansion-panel-title>
|
|
21
|
-
<v-expansion-panel-text>
|
|
22
|
-
<component :is="section.component" class="" />
|
|
23
|
-
<!-- v-model="form[section.value]" -->
|
|
24
|
-
</v-expansion-panel-text>
|
|
25
|
-
</v-expansion-panel>
|
|
26
|
-
</template>
|
|
27
|
-
</v-expansion-panels>
|
|
28
|
-
</v-col>
|
|
29
|
-
|
|
30
|
-
<v-col v-if="prop.mode === 'add'" cols="12" class="mt-2">
|
|
31
|
-
<v-checkbox v-model="createMore" density="comfortable" hide-details>
|
|
32
|
-
<template #label>
|
|
33
|
-
<span class="text-subtitle-2 font-weight-bold">
|
|
34
|
-
Create more
|
|
35
|
-
</span>
|
|
36
|
-
</template>
|
|
37
|
-
</v-checkbox>
|
|
38
|
-
</v-col>
|
|
39
|
-
|
|
40
|
-
</v-row>
|
|
41
|
-
</v-form>
|
|
42
|
-
</v-card-text>
|
|
43
|
-
|
|
44
|
-
<v-row no-gutters class="w-100" v-if="errorMessage">
|
|
45
|
-
<p class="text-error w-100 text-center text-subtitle-2">{{ errorMessage }}</p>
|
|
46
|
-
</v-row>
|
|
47
|
-
<v-toolbar density="compact">
|
|
48
|
-
<v-row no-gutters>
|
|
49
|
-
<v-col cols="6">
|
|
50
|
-
<v-btn tile block variant="text" class="text-none" size="48" @click="close" text="Close" />
|
|
51
|
-
</v-col>
|
|
52
|
-
<v-col cols="6">
|
|
53
|
-
<v-btn tile block variant="flat" color="primary-button" class="text-none" size="48" :disabled="processing || !validForm" text="Submit" />
|
|
54
|
-
</v-col>
|
|
55
|
-
</v-row>
|
|
56
|
-
</v-toolbar>
|
|
57
|
-
</v-card>
|
|
58
|
-
</template>
|
|
59
|
-
|
|
60
|
-
<script setup lang="ts">
|
|
61
|
-
import FacilityFormInformation from './FacilityFormInformation.vue';
|
|
62
|
-
import FacilityFormAvailability from './FacilityFormAvailability.vue';
|
|
63
|
-
import FacilityFormDescription from './FacilityFormDescription.vue';
|
|
64
|
-
import FacilityFormRefund from './FacilityFormRefund.vue';
|
|
65
|
-
import FacilityFormBookingFee from './FacilityFormBookingFee.vue';
|
|
66
|
-
import FacilityFormDepositFee from './FacilityFormDepositFee.vue';
|
|
67
|
-
import FacilityFormBookingPolicy from './FacilityFormBookingPolicy.vue';
|
|
68
|
-
import FacilityFormSecurityChecklist from './FacilityFormSecurityChecklist.vue';
|
|
69
|
-
import FacilityFormRulesAndPolicies from './FacilityFormRulesAndPolicies.vue';
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
const prop = defineProps({
|
|
74
|
-
site: {
|
|
75
|
-
type: String,
|
|
76
|
-
required: true
|
|
77
|
-
},
|
|
78
|
-
mode: {
|
|
79
|
-
type: String as PropType<'add' | 'edit'>,
|
|
80
|
-
default: 'add'
|
|
81
|
-
},
|
|
82
|
-
activeId: {
|
|
83
|
-
type: String as PropType<string | null>, // id of person you are trying to update
|
|
84
|
-
default: null
|
|
85
|
-
},
|
|
86
|
-
people: {
|
|
87
|
-
type: Object as PropType<TPeople>,
|
|
88
|
-
required: false
|
|
89
|
-
}
|
|
90
|
-
});
|
|
91
|
-
|
|
92
|
-
const { requiredRule, formatDateISO8601 } = useUtils();
|
|
93
|
-
const { getSiteById, getSiteLevels, getSiteUnits } = useSiteSettings();
|
|
94
|
-
const { create, updateById } = usePeople();
|
|
95
|
-
|
|
96
|
-
const emit = defineEmits(['back', 'select', 'done', 'done:more', 'error', 'close']);
|
|
97
|
-
const panels = ref<string[]>(['facilityInformation'])
|
|
98
|
-
|
|
99
|
-
const sections = [
|
|
100
|
-
{ label: "Facility Information", value: "facilityInformation", component: FacilityFormInformation },
|
|
101
|
-
{ label: "Facility Availability", value: "facilityAvailability", component: FacilityFormAvailability },
|
|
102
|
-
{ label: "Facility Description", value: "facilityDescription", component: FacilityFormDescription },
|
|
103
|
-
{ label: "Refund", value: "refund", component: FacilityFormRefund },
|
|
104
|
-
{ label: "Booking Fee", value: "bookingFee", component: FacilityFormBookingFee },
|
|
105
|
-
{ label: "Deposit Fee", value: "depositFee", component: FacilityFormDepositFee },
|
|
106
|
-
{ label: "Booking Policy", value: "bookingPolicy", component: FacilityFormBookingPolicy },
|
|
107
|
-
{ label: "Security Checklist", value: "securityChecklist", component: FacilityFormSecurityChecklist },
|
|
108
|
-
{ label: "Facility Rules and Policies", value: "facilityRulesAndPolicies", component: FacilityFormRulesAndPolicies },
|
|
109
|
-
];
|
|
110
|
-
|
|
111
|
-
const form = reactive<Partial<TPeoplePayload>>({})
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
const validForm = ref(false);
|
|
115
|
-
const formRef = ref<HTMLFormElement | null>(null);
|
|
116
|
-
const processing = ref(false);
|
|
117
|
-
const message = ref('');
|
|
118
|
-
const errorMessage = ref('');
|
|
119
|
-
const createMore = ref(false)
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
const step = ref(1)
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
function dateToday() {
|
|
127
|
-
const today = new Date()
|
|
128
|
-
return today.toISOString()
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
function close(){
|
|
134
|
-
emit('close')
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
function resetForm() {
|
|
139
|
-
formRef.value?.resetValidation();
|
|
140
|
-
Object.assign(form, {
|
|
141
|
-
});
|
|
142
|
-
|
|
143
|
-
validForm.value = false;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
async function submit() {
|
|
149
|
-
formRef.value!.validate()
|
|
150
|
-
errorMessage.value = '';
|
|
151
|
-
processing.value = true;
|
|
152
|
-
|
|
153
|
-
let payload: Partial<TPeoplePayload> = {}
|
|
154
|
-
|
|
155
|
-
if (prop.mode === 'add') {
|
|
156
|
-
payload = {
|
|
157
|
-
...payload,
|
|
158
|
-
site: prop.site,
|
|
159
|
-
...form,
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
} else if (prop.mode === 'edit') {
|
|
163
|
-
const { type, ...rest } = form
|
|
164
|
-
payload = {
|
|
165
|
-
...payload,
|
|
166
|
-
...rest
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
}
|
|
170
|
-
try {
|
|
171
|
-
if (prop.mode === 'add') {
|
|
172
|
-
await create(payload)
|
|
173
|
-
} else if (prop.mode === 'edit') {
|
|
174
|
-
const userId = prop.activeId
|
|
175
|
-
if (!userId) {
|
|
176
|
-
throw new Error('User Id prop is not defined')
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
await updateById(userId, payload)
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
if (createMore.value) {
|
|
183
|
-
resetForm()
|
|
184
|
-
step.value = 1;
|
|
185
|
-
errorMessage.value = ""
|
|
186
|
-
emit("done:more")
|
|
187
|
-
createMore.value = false
|
|
188
|
-
} else emit("done")
|
|
189
|
-
|
|
190
|
-
} catch (error: any) {
|
|
191
|
-
const err = error?.data?.message
|
|
192
|
-
errorMessage.value = err || `Failed to ${prop.mode === 'add' ? 'add' : 'update'}. Please try again.`;
|
|
193
|
-
} finally {
|
|
194
|
-
processing.value = false;
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
async function mountExistingData() {
|
|
200
|
-
setTimeout(() => {
|
|
201
|
-
const people = prop.people
|
|
202
|
-
if (!people) return
|
|
203
|
-
|
|
204
|
-
(Object.keys(form) as (keyof typeof form)[]).forEach((key) => {
|
|
205
|
-
if (key in people) {
|
|
206
|
-
form[key] = people[key as keyof TPeople]
|
|
207
|
-
}
|
|
208
|
-
})
|
|
209
|
-
}, 100)
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
onMounted(() => {
|
|
213
|
-
createMore.value = false;
|
|
214
|
-
if (prop.mode === 'edit') {
|
|
215
|
-
mountExistingData()
|
|
216
|
-
} else {
|
|
217
|
-
form.start = dateToday()
|
|
218
|
-
}
|
|
219
|
-
})
|
|
220
|
-
|
|
221
|
-
</script>
|
|
222
|
-
<style scoped>
|
|
223
|
-
.button-outline-class {
|
|
224
|
-
border: 1px solid rgba(var(--v-theme-primary));
|
|
225
|
-
}
|
|
226
|
-
</style>
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<v-row no-gutters>
|
|
3
|
-
<v-col cols="12">
|
|
4
|
-
<InputLabel class="text-capitalize" title="Facility Name" required />
|
|
5
|
-
<v-text-field v-model.trim="form.name" density="compact" :rules="[requiredRule]" />
|
|
6
|
-
</v-col>
|
|
7
|
-
|
|
8
|
-
<v-col cols="12">
|
|
9
|
-
<InputLabel class="text-capitalize" title="Select Icon" required />
|
|
10
|
-
<v-select v-model="form.icon" :items="iconsArray" density="comfortable"
|
|
11
|
-
@update:model-value="handleChangeLevel" :rules="[requiredRule]" />
|
|
12
|
-
</v-col>
|
|
13
|
-
|
|
14
|
-
<v-col cols="12">
|
|
15
|
-
<InputLabel class="text-capitalize" title="Attach Image" />
|
|
16
|
-
<InputFileV2 v-model="form.gallery" multiple :max-length="3" />
|
|
17
|
-
</v-col>
|
|
18
|
-
</v-row>
|
|
19
|
-
</template>
|
|
20
|
-
|
|
21
|
-
<script setup lang="ts">
|
|
22
|
-
const { requiredRule } = useUtils()
|
|
23
|
-
|
|
24
|
-
const form = defineModel({
|
|
25
|
-
default: {
|
|
26
|
-
name: "",
|
|
27
|
-
icon: "",
|
|
28
|
-
gallery: [] as string[]
|
|
29
|
-
}
|
|
30
|
-
})
|
|
31
|
-
|
|
32
|
-
const iconsArray = ref([])
|
|
33
|
-
|
|
34
|
-
function handleChangeLevel(){
|
|
35
|
-
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
</script>
|
|
39
|
-
|
|
40
|
-
<style scoped></style>
|