|
|
@@ -1,19 +1,15 @@
|
|
1
|
1
|
<script setup>
|
|
2
|
|
-import { computed, watch, ref } from 'vue'
|
|
|
2
|
+import { computed, watch } from 'vue'
|
|
3
|
3
|
import { Inertia } from '@inertiajs/inertia'
|
|
4
|
4
|
import { Head, useForm, usePage } from '@inertiajs/inertia-vue3'
|
|
5
|
|
-import AppLayout from '@/layouts/AppLayout.vue'
|
|
6
|
5
|
import AppAutocompleteBasic from '@/components/AppAutocompleteBasic.vue'
|
|
7
|
|
-import AppInputNumber from '@/components/AppInputNumber.vue'
|
|
8
|
|
-import AppDropdown from '@/components/AppDropdown.vue'
|
|
9
|
|
-import AppInputText from '@/components/AppInputText.vue'
|
|
|
6
|
+import AppLayout from '@/layouts/AppLayout.vue'
|
|
10
|
7
|
|
|
11
|
8
|
defineProps({
|
|
12
|
9
|
members: {
|
|
13
|
10
|
type: Array,
|
|
14
|
11
|
default: [],
|
|
15
|
12
|
},
|
|
16
|
|
- typeMembers: Array,
|
|
17
|
13
|
})
|
|
18
|
14
|
|
|
19
|
15
|
const errors = computed(() => usePage().props.value.errors)
|
|
|
@@ -22,18 +18,6 @@ watch(errors, () => {
|
|
22
|
18
|
form.clearErrors()
|
|
23
|
19
|
})
|
|
24
|
20
|
|
|
25
|
|
-const memberDialogShow = ref(false)
|
|
26
|
|
-
|
|
27
|
|
-const memberDialogOnHide = () => {
|
|
28
|
|
- formMember.reset()
|
|
29
|
|
-
|
|
30
|
|
- formMember.clearErrors()
|
|
31
|
|
-
|
|
32
|
|
- usePage().props.value.errors = {}
|
|
33
|
|
-
|
|
34
|
|
- usePage().props.value.flash.error = null
|
|
35
|
|
-}
|
|
36
|
|
-
|
|
37
|
21
|
const memberOnComplete = (event) => {
|
|
38
|
22
|
Inertia.reload({
|
|
39
|
23
|
data: { search: event.query },
|
|
|
@@ -45,35 +29,16 @@ const memberOnSelected = (event) => {
|
|
45
|
29
|
form.member = event.value
|
|
46
|
30
|
}
|
|
47
|
31
|
|
|
48
|
|
-const formMember = useForm({
|
|
49
|
|
- name: null,
|
|
50
|
|
- phone: null,
|
|
51
|
|
- plat_number: null,
|
|
52
|
|
- type_member_id: null,
|
|
53
|
|
-})
|
|
54
|
|
-
|
|
55
|
|
-const submitMember = () => {
|
|
56
|
|
- formMember.post(route('members.store'), {
|
|
57
|
|
- onSuccess: () => {
|
|
58
|
|
- formMember.reset()
|
|
59
|
|
-
|
|
60
|
|
- memberDialogShow.value = !memberDialogShow.value
|
|
61
|
|
- },
|
|
62
|
|
- })
|
|
|
32
|
+const gotoMember = () => {
|
|
|
33
|
+ return Inertia.get(route('members.create'))
|
|
63
|
34
|
}
|
|
64
|
35
|
|
|
65
|
36
|
const form = useForm({
|
|
66
|
|
- balance: null,
|
|
67
|
37
|
member: null,
|
|
68
|
38
|
})
|
|
69
|
39
|
|
|
70
|
40
|
const submit = () => {
|
|
71
|
|
- form
|
|
72
|
|
- .transform((data) => ({
|
|
73
|
|
- balance: data.balance,
|
|
74
|
|
- member_id: data.member.id,
|
|
75
|
|
- }))
|
|
76
|
|
- .post(route('top-ups.store'), { onSuccess: () => form.reset() })
|
|
|
41
|
+ form.post(route('top-ups.store'), { onSuccess: () => form.reset() })
|
|
77
|
42
|
}
|
|
78
|
43
|
</script>
|
|
79
|
44
|
|
|
|
@@ -81,24 +46,61 @@ const submit = () => {
|
|
81
|
46
|
<Head title="Top Up" />
|
|
82
|
47
|
|
|
83
|
48
|
<AppLayout>
|
|
|
49
|
+ <template v-if="form.member">
|
|
|
50
|
+ <h1 class="text-2xl font-bold">Detail Member</h1>
|
|
|
51
|
+
|
|
|
52
|
+ <div class="grid px-2">
|
|
|
53
|
+ <div class="col-auto mr-7">
|
|
|
54
|
+ <h2>
|
|
|
55
|
+ <span class="text-base"> <i class="pi pi-user" /> Nama</span>
|
|
|
56
|
+
|
|
|
57
|
+ <br />
|
|
|
58
|
+
|
|
|
59
|
+ <span class="text-lg">{{ form.member.name }}</span>
|
|
|
60
|
+ </h2>
|
|
|
61
|
+ </div>
|
|
|
62
|
+
|
|
|
63
|
+ <div class="col-auto mr-7">
|
|
|
64
|
+ <h2>
|
|
|
65
|
+ <span class="text-base"> <i class="pi pi-mobile" /> No HP</span>
|
|
|
66
|
+
|
|
|
67
|
+ <br />
|
|
|
68
|
+
|
|
|
69
|
+ <span class="text-lg">{{ form.member.phone }}</span>
|
|
|
70
|
+ </h2>
|
|
|
71
|
+ </div>
|
|
|
72
|
+ </div>
|
|
|
73
|
+
|
|
|
74
|
+ <div class="grid">
|
|
|
75
|
+ <div class="col-12">
|
|
|
76
|
+ <h2 class="mb-4">
|
|
|
77
|
+ <span class="text-base">
|
|
|
78
|
+ <i class="pi pi-car red-700" />
|
|
|
79
|
+ Detail Plat Kendaraan
|
|
|
80
|
+ </span>
|
|
|
81
|
+
|
|
|
82
|
+ <br />
|
|
|
83
|
+
|
|
|
84
|
+ <span class="text-lg">{{ form.member.platNumber }}</span>
|
|
|
85
|
+ </h2>
|
|
|
86
|
+ </div>
|
|
|
87
|
+ </div>
|
|
|
88
|
+ </template>
|
|
|
89
|
+
|
|
84
|
90
|
<div class="grid">
|
|
85
|
91
|
<div class="col-12 md:col-8">
|
|
86
|
92
|
<Card>
|
|
87
|
93
|
<template #title> Top Up </template>
|
|
88
|
94
|
<template #content>
|
|
89
|
95
|
<div class="grid">
|
|
90
|
|
- <div class="col-12 md:col-6">
|
|
91
|
|
- <AppInputNumber v-model="form.balance" label="Saldo" placeholder="saldo" :error="form.errors.balance" />
|
|
92
|
|
- </div>
|
|
93
|
|
-
|
|
94
|
96
|
<div class="col-12 md:col-6">
|
|
95
|
97
|
<AppAutocompleteBasic
|
|
96
|
98
|
empty
|
|
97
|
99
|
label="Member"
|
|
98
|
|
- field="platNumber"
|
|
|
100
|
+ field="name"
|
|
99
|
101
|
placeholder="member"
|
|
100
|
102
|
v-model="form.member"
|
|
101
|
|
- :error="form.errors.member_id"
|
|
|
103
|
+ :error="form.errors.member"
|
|
102
|
104
|
:suggestions="members"
|
|
103
|
105
|
@complete="memberOnComplete"
|
|
104
|
106
|
@item-select="memberOnSelected"
|
|
|
@@ -108,18 +110,14 @@ const submit = () => {
|
|
108
|
110
|
<div class="flex flex-column">
|
|
109
|
111
|
<span>{{ slotProps.item.name }}</span>
|
|
110
|
112
|
<span class="font-bold">{{ slotProps.item.phone }}</span>
|
|
111
|
|
- <span class="font-bold">{{ slotProps.item.platNumber }}</span>
|
|
|
113
|
+ <span class="font-bold">{{ slotProps.item.type }}</span>
|
|
112
|
114
|
</div>
|
|
113
|
115
|
</template>
|
|
114
|
116
|
</template>
|
|
115
|
117
|
|
|
116
|
118
|
<template #empty>
|
|
117
|
|
- <span
|
|
118
|
|
- class="cursor-pointer"
|
|
119
|
|
- style="color: var(--primary-color)"
|
|
120
|
|
- @click="memberDialogShow = !memberDialogShow"
|
|
121
|
|
- >
|
|
122
|
|
- Tambah Member
|
|
|
119
|
+ <span class="cursor-pointer" style="color: var(--primary-color)" @click="gotoMember">
|
|
|
120
|
+ Buat Member
|
|
123
|
121
|
</span>
|
|
124
|
122
|
</template>
|
|
125
|
123
|
</AppAutocompleteBasic>
|
|
|
@@ -141,61 +139,5 @@ const submit = () => {
|
|
141
|
139
|
</Card>
|
|
142
|
140
|
</div>
|
|
143
|
141
|
</div>
|
|
144
|
|
-
|
|
145
|
|
- <Dialog
|
|
146
|
|
- modal
|
|
147
|
|
- v-model:visible="memberDialogShow"
|
|
148
|
|
- class="p-fluid"
|
|
149
|
|
- header="Tambah Member"
|
|
150
|
|
- :style="{ width: '450px' }"
|
|
151
|
|
- :breakpoints="{ '960px': '75vw' }"
|
|
152
|
|
- @hide="memberDialogOnHide"
|
|
153
|
|
- >
|
|
154
|
|
- <div class="grid">
|
|
155
|
|
- <div class="col-12 md:col-6">
|
|
156
|
|
- <AppInputText v-model="formMember.name" label="Nama" placeholder="nama" :error="formMember.errors.name" />
|
|
157
|
|
- </div>
|
|
158
|
|
-
|
|
159
|
|
- <div class="col-12 md:col-6">
|
|
160
|
|
- <AppInputText
|
|
161
|
|
- v-model="formMember.phone"
|
|
162
|
|
- label="Nomor HP"
|
|
163
|
|
- placeholder="nomor hp"
|
|
164
|
|
- :error="formMember.errors.phone"
|
|
165
|
|
- />
|
|
166
|
|
- </div>
|
|
167
|
|
-
|
|
168
|
|
- <div class="col-12 md:col-6">
|
|
169
|
|
- <AppInputText
|
|
170
|
|
- v-model="formMember.plat_number"
|
|
171
|
|
- label="Plat Kendaraan"
|
|
172
|
|
- placeholder="plat kendaraan"
|
|
173
|
|
- :error="formMember.errors.plat_number"
|
|
174
|
|
- />
|
|
175
|
|
- </div>
|
|
176
|
|
-
|
|
177
|
|
- <div class="col-12 md:col-6">
|
|
178
|
|
- <AppDropdown
|
|
179
|
|
- label="Jenis member"
|
|
180
|
|
- placeholder="pilih satu"
|
|
181
|
|
- v-model="formMember.type_member_id"
|
|
182
|
|
- :options="typeMembers"
|
|
183
|
|
- :error="formMember.errors.type_member_id"
|
|
184
|
|
- />
|
|
185
|
|
- </div>
|
|
186
|
|
- </div>
|
|
187
|
|
-
|
|
188
|
|
- <template #footer>
|
|
189
|
|
- <div class="flex flex-column md:flex-row justify-content-end">
|
|
190
|
|
- <Button
|
|
191
|
|
- label="Simpan"
|
|
192
|
|
- icon="pi pi-check"
|
|
193
|
|
- class="p-button-outlined"
|
|
194
|
|
- :disabled="formMember.processing"
|
|
195
|
|
- @click="submitMember"
|
|
196
|
|
- />
|
|
197
|
|
- </div>
|
|
198
|
|
- </template>
|
|
199
|
|
- </Dialog>
|
|
200
|
142
|
</AppLayout>
|
|
201
|
143
|
</template>
|
