@veristone/nuxt-v-app 0.2.0 → 0.2.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/app/components/V/A/Crud/Delete.vue +0 -1
- package/app/components/V/A/Modal/Base.vue +64 -167
- package/app/components/V/A/Modal/Form.vue +47 -21
- package/app/components/V/A/Slide.vue +17 -19
- package/app/components/V/Modal.vue +51 -18
- package/app/composables/useVToast.ts +10 -10
- package/app/layouts/default.vue +4 -2
- package/app/pages/playground/modals.vue +794 -557
- package/app/pages/test-api-auth.vue +140 -93
- package/package.json +1 -1
|
@@ -1,118 +1,122 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
const endpoint =
|
|
2
|
+
const endpoint = "http://localhost:3002/admin/portfolio/loans";
|
|
3
3
|
|
|
4
|
-
const crud = useVCrud(endpoint, { immediate: false })
|
|
4
|
+
const crud = useVCrud(endpoint, { immediate: false });
|
|
5
5
|
|
|
6
6
|
// Store results for each method
|
|
7
|
-
const results = ref<Record<string, any>>({})
|
|
8
|
-
const loading = ref<Record<string, boolean>>({})
|
|
9
|
-
const errors = ref<Record<string, string>>({})
|
|
7
|
+
const results = ref<Record<string, any>>({});
|
|
8
|
+
const loading = ref<Record<string, boolean>>({});
|
|
9
|
+
const errors = ref<Record<string, string>>({});
|
|
10
10
|
|
|
11
11
|
// Test GET (findAll)
|
|
12
12
|
const testGet = async () => {
|
|
13
|
-
loading.value.get = true
|
|
14
|
-
errors.value.get =
|
|
13
|
+
loading.value.get = true;
|
|
14
|
+
errors.value.get = "";
|
|
15
15
|
try {
|
|
16
|
-
const data = await crud.findAll()
|
|
17
|
-
results.value.get = data
|
|
16
|
+
const data = await crud.findAll();
|
|
17
|
+
results.value.get = data;
|
|
18
18
|
} catch (err: any) {
|
|
19
|
-
errors.value.get = err.message ||
|
|
19
|
+
errors.value.get = err.message || "Failed";
|
|
20
20
|
} finally {
|
|
21
|
-
loading.value.get = false
|
|
21
|
+
loading.value.get = false;
|
|
22
22
|
}
|
|
23
|
-
}
|
|
23
|
+
};
|
|
24
24
|
|
|
25
25
|
// Test GET single (findOne) - using first ID if available
|
|
26
26
|
const testGetOne = async () => {
|
|
27
|
-
const testId =
|
|
28
|
-
loading.value.getOne = true
|
|
29
|
-
errors.value.getOne =
|
|
27
|
+
const testId = "test-id-123";
|
|
28
|
+
loading.value.getOne = true;
|
|
29
|
+
errors.value.getOne = "";
|
|
30
30
|
try {
|
|
31
|
-
const data = await crud.findOne(testId)
|
|
32
|
-
results.value.getOne = data
|
|
31
|
+
const data = await crud.findOne(testId);
|
|
32
|
+
results.value.getOne = data;
|
|
33
33
|
} catch (err: any) {
|
|
34
|
-
errors.value.getOne = err.message ||
|
|
34
|
+
errors.value.getOne = err.message || "Failed";
|
|
35
35
|
} finally {
|
|
36
|
-
loading.value.getOne = false
|
|
36
|
+
loading.value.getOne = false;
|
|
37
37
|
}
|
|
38
|
-
}
|
|
38
|
+
};
|
|
39
39
|
|
|
40
40
|
// Test POST (create)
|
|
41
41
|
const testPost = async () => {
|
|
42
|
-
loading.value.post = true
|
|
43
|
-
errors.value.post =
|
|
42
|
+
loading.value.post = true;
|
|
43
|
+
errors.value.post = "";
|
|
44
44
|
try {
|
|
45
|
-
const data = await crud.create({ name:
|
|
46
|
-
results.value.post = data
|
|
45
|
+
const data = await crud.create({ name: "Test Loan", amount: 1000 });
|
|
46
|
+
results.value.post = data;
|
|
47
47
|
} catch (err: any) {
|
|
48
|
-
errors.value.post = err.message ||
|
|
48
|
+
errors.value.post = err.message || "Failed";
|
|
49
49
|
} finally {
|
|
50
|
-
loading.value.post = false
|
|
50
|
+
loading.value.post = false;
|
|
51
51
|
}
|
|
52
|
-
}
|
|
52
|
+
};
|
|
53
53
|
|
|
54
54
|
// Test PUT (update)
|
|
55
55
|
const testPut = async () => {
|
|
56
|
-
const testId =
|
|
57
|
-
loading.value.put = true
|
|
58
|
-
errors.value.put =
|
|
56
|
+
const testId = "test-id-123";
|
|
57
|
+
loading.value.put = true;
|
|
58
|
+
errors.value.put = "";
|
|
59
59
|
try {
|
|
60
|
-
const data = await crud.update(testId, {
|
|
61
|
-
|
|
60
|
+
const data = await crud.update(testId, {
|
|
61
|
+
name: "Updated Loan",
|
|
62
|
+
amount: 2000,
|
|
63
|
+
});
|
|
64
|
+
results.value.put = data;
|
|
65
|
+
useVToast().success("PUT successful", "The loan has been updated");
|
|
62
66
|
} catch (err: any) {
|
|
63
|
-
errors.value.put = err.message ||
|
|
67
|
+
errors.value.put = err.message || "Failed";
|
|
64
68
|
} finally {
|
|
65
|
-
loading.value.put = false
|
|
69
|
+
loading.value.put = false;
|
|
66
70
|
}
|
|
67
|
-
}
|
|
71
|
+
};
|
|
68
72
|
|
|
69
73
|
// Test PATCH
|
|
70
74
|
const testPatch = async () => {
|
|
71
|
-
const testId =
|
|
72
|
-
loading.value.patch = true
|
|
73
|
-
errors.value.patch =
|
|
75
|
+
const testId = "test-id-123";
|
|
76
|
+
loading.value.patch = true;
|
|
77
|
+
errors.value.patch = "";
|
|
74
78
|
try {
|
|
75
|
-
const data = await crud.patch(testId, { amount: 1500 })
|
|
76
|
-
results.value.patch = data
|
|
79
|
+
const data = await crud.patch(testId, { amount: 1500 });
|
|
80
|
+
results.value.patch = data;
|
|
77
81
|
} catch (err: any) {
|
|
78
|
-
errors.value.patch = err.message ||
|
|
82
|
+
errors.value.patch = err.message || "Failed";
|
|
79
83
|
} finally {
|
|
80
|
-
loading.value.patch = false
|
|
84
|
+
loading.value.patch = false;
|
|
81
85
|
}
|
|
82
|
-
}
|
|
86
|
+
};
|
|
83
87
|
|
|
84
88
|
// Test DELETE
|
|
85
89
|
const testDelete = async () => {
|
|
86
|
-
const testId =
|
|
87
|
-
loading.value.delete = true
|
|
88
|
-
errors.value.delete =
|
|
90
|
+
const testId = "test-id-123";
|
|
91
|
+
loading.value.delete = true;
|
|
92
|
+
errors.value.delete = "";
|
|
89
93
|
try {
|
|
90
|
-
const data = await crud.remove(testId)
|
|
91
|
-
results.value.delete = data
|
|
94
|
+
const data = await crud.remove(testId);
|
|
95
|
+
results.value.delete = data;
|
|
92
96
|
} catch (err: any) {
|
|
93
|
-
errors.value.delete = err.message ||
|
|
97
|
+
errors.value.delete = err.message || "Failed";
|
|
94
98
|
} finally {
|
|
95
|
-
loading.value.delete = false
|
|
99
|
+
loading.value.delete = false;
|
|
96
100
|
}
|
|
97
|
-
}
|
|
101
|
+
};
|
|
98
102
|
|
|
99
103
|
// Run all tests
|
|
100
104
|
const testAll = async () => {
|
|
101
|
-
await testGet()
|
|
102
|
-
await testGetOne()
|
|
103
|
-
await testPost()
|
|
104
|
-
await testPut()
|
|
105
|
-
await testPatch()
|
|
106
|
-
await testDelete()
|
|
107
|
-
}
|
|
105
|
+
await testGet();
|
|
106
|
+
await testGetOne();
|
|
107
|
+
await testPost();
|
|
108
|
+
await testPut();
|
|
109
|
+
await testPatch();
|
|
110
|
+
await testDelete();
|
|
111
|
+
};
|
|
108
112
|
</script>
|
|
109
113
|
|
|
110
114
|
<template>
|
|
111
115
|
<div class="p-8 space-y-8">
|
|
112
116
|
<div class="flex items-center justify-between">
|
|
113
117
|
<h1 class="text-2xl font-bold">API Methods Test</h1>
|
|
114
|
-
<button
|
|
115
|
-
@click="testAll"
|
|
118
|
+
<button
|
|
119
|
+
@click="testAll"
|
|
116
120
|
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
|
|
117
121
|
>
|
|
118
122
|
Test All Methods
|
|
@@ -123,101 +127,144 @@ const testAll = async () => {
|
|
|
123
127
|
<div class="border p-4 rounded">
|
|
124
128
|
<div class="flex items-center justify-between mb-4">
|
|
125
129
|
<h2 class="text-xl font-semibold">GET (findAll)</h2>
|
|
126
|
-
<button
|
|
127
|
-
@click="testGet"
|
|
130
|
+
<button
|
|
131
|
+
@click="testGet"
|
|
128
132
|
:disabled="loading.get"
|
|
129
133
|
class="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600 disabled:opacity-50"
|
|
130
134
|
>
|
|
131
|
-
{{ loading.get ?
|
|
135
|
+
{{ loading.get ? "Loading..." : "Test GET" }}
|
|
132
136
|
</button>
|
|
133
137
|
</div>
|
|
134
|
-
<div v-if="errors.get" class="text-red-500 mb-2">
|
|
135
|
-
|
|
138
|
+
<div v-if="errors.get" class="text-red-500 mb-2">
|
|
139
|
+
Error: {{ errors.get }}
|
|
140
|
+
</div>
|
|
141
|
+
<pre
|
|
142
|
+
v-if="results.get"
|
|
143
|
+
class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48"
|
|
144
|
+
>{{ JSON.stringify(results.get, null, 2) }}</pre
|
|
145
|
+
>
|
|
136
146
|
</div>
|
|
137
147
|
|
|
138
148
|
<!-- GET One (findOne) -->
|
|
139
149
|
<div class="border p-4 rounded">
|
|
140
150
|
<div class="flex items-center justify-between mb-4">
|
|
141
151
|
<h2 class="text-xl font-semibold">GET Single (findOne)</h2>
|
|
142
|
-
<button
|
|
143
|
-
@click="testGetOne"
|
|
152
|
+
<button
|
|
153
|
+
@click="testGetOne"
|
|
144
154
|
:disabled="loading.getOne"
|
|
145
155
|
class="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600 disabled:opacity-50"
|
|
146
156
|
>
|
|
147
|
-
{{ loading.getOne ?
|
|
157
|
+
{{ loading.getOne ? "Loading..." : "Test GET One" }}
|
|
148
158
|
</button>
|
|
149
159
|
</div>
|
|
150
160
|
<div class="text-sm text-gray-500 mb-2">Testing with ID: test-id-123</div>
|
|
151
|
-
<div v-if="errors.getOne" class="text-red-500 mb-2">
|
|
152
|
-
|
|
161
|
+
<div v-if="errors.getOne" class="text-red-500 mb-2">
|
|
162
|
+
Error: {{ errors.getOne }}
|
|
163
|
+
</div>
|
|
164
|
+
<pre
|
|
165
|
+
v-if="results.getOne"
|
|
166
|
+
class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48"
|
|
167
|
+
>{{ JSON.stringify(results.getOne, null, 2) }}</pre
|
|
168
|
+
>
|
|
153
169
|
</div>
|
|
154
170
|
|
|
155
171
|
<!-- POST (create) -->
|
|
156
172
|
<div class="border p-4 rounded">
|
|
157
173
|
<div class="flex items-center justify-between mb-4">
|
|
158
174
|
<h2 class="text-xl font-semibold">POST (create)</h2>
|
|
159
|
-
<button
|
|
160
|
-
@click="testPost"
|
|
175
|
+
<button
|
|
176
|
+
@click="testPost"
|
|
161
177
|
:disabled="loading.post"
|
|
162
178
|
class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
|
|
163
179
|
>
|
|
164
|
-
{{ loading.post ?
|
|
180
|
+
{{ loading.post ? "Loading..." : "Test POST" }}
|
|
165
181
|
</button>
|
|
166
182
|
</div>
|
|
167
|
-
<div class="text-sm text-gray-500 mb-2">
|
|
168
|
-
|
|
169
|
-
|
|
183
|
+
<div class="text-sm text-gray-500 mb-2">
|
|
184
|
+
Payload: { name: 'Test Loan', amount: 1000 }
|
|
185
|
+
</div>
|
|
186
|
+
<div v-if="errors.post" class="text-red-500 mb-2">
|
|
187
|
+
Error: {{ errors.post }}
|
|
188
|
+
</div>
|
|
189
|
+
<pre
|
|
190
|
+
v-if="results.post"
|
|
191
|
+
class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48"
|
|
192
|
+
>{{ JSON.stringify(results.post, null, 2) }}</pre
|
|
193
|
+
>
|
|
170
194
|
</div>
|
|
171
195
|
|
|
172
196
|
<!-- PUT (update) -->
|
|
173
197
|
<div class="border p-4 rounded">
|
|
174
198
|
<div class="flex items-center justify-between mb-4">
|
|
175
199
|
<h2 class="text-xl font-semibold">PUT (update)</h2>
|
|
176
|
-
<button
|
|
177
|
-
@click="testPut"
|
|
200
|
+
<button
|
|
201
|
+
@click="testPut"
|
|
178
202
|
:disabled="loading.put"
|
|
179
203
|
class="px-3 py-1 bg-yellow-500 text-white rounded hover:bg-yellow-600 disabled:opacity-50"
|
|
180
204
|
>
|
|
181
|
-
{{ loading.put ?
|
|
205
|
+
{{ loading.put ? "Loading..." : "Test PUT" }}
|
|
182
206
|
</button>
|
|
183
207
|
</div>
|
|
184
|
-
<div class="text-sm text-gray-500 mb-2">
|
|
185
|
-
|
|
186
|
-
|
|
208
|
+
<div class="text-sm text-gray-500 mb-2">
|
|
209
|
+
Testing with ID: test-id-123 | Payload: { name: 'Updated Loan', amount:
|
|
210
|
+
2000 }
|
|
211
|
+
</div>
|
|
212
|
+
<div v-if="errors.put" class="text-red-500 mb-2">
|
|
213
|
+
Error: {{ errors.put }}
|
|
214
|
+
</div>
|
|
215
|
+
<pre
|
|
216
|
+
v-if="results.put"
|
|
217
|
+
class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48"
|
|
218
|
+
>{{ JSON.stringify(results.put, null, 2) }}</pre
|
|
219
|
+
>
|
|
187
220
|
</div>
|
|
188
221
|
|
|
189
222
|
<!-- PATCH -->
|
|
190
223
|
<div class="border p-4 rounded">
|
|
191
224
|
<div class="flex items-center justify-between mb-4">
|
|
192
225
|
<h2 class="text-xl font-semibold">PATCH</h2>
|
|
193
|
-
<button
|
|
194
|
-
@click="testPatch"
|
|
226
|
+
<button
|
|
227
|
+
@click="testPatch"
|
|
195
228
|
:disabled="loading.patch"
|
|
196
229
|
class="px-3 py-1 bg-purple-500 text-white rounded hover:bg-purple-600 disabled:opacity-50"
|
|
197
230
|
>
|
|
198
|
-
{{ loading.patch ?
|
|
231
|
+
{{ loading.patch ? "Loading..." : "Test PATCH" }}
|
|
199
232
|
</button>
|
|
200
233
|
</div>
|
|
201
|
-
<div class="text-sm text-gray-500 mb-2">
|
|
202
|
-
|
|
203
|
-
|
|
234
|
+
<div class="text-sm text-gray-500 mb-2">
|
|
235
|
+
Testing with ID: test-id-123 | Payload: { amount: 1500 }
|
|
236
|
+
</div>
|
|
237
|
+
<div v-if="errors.patch" class="text-red-500 mb-2">
|
|
238
|
+
Error: {{ errors.patch }}
|
|
239
|
+
</div>
|
|
240
|
+
<pre
|
|
241
|
+
v-if="results.patch"
|
|
242
|
+
class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48"
|
|
243
|
+
>{{ JSON.stringify(results.patch, null, 2) }}</pre
|
|
244
|
+
>
|
|
204
245
|
</div>
|
|
205
246
|
|
|
206
247
|
<!-- DELETE -->
|
|
207
248
|
<div class="border p-4 rounded">
|
|
208
249
|
<div class="flex items-center justify-between mb-4">
|
|
209
250
|
<h2 class="text-xl font-semibold">DELETE (remove)</h2>
|
|
210
|
-
<button
|
|
211
|
-
@click="testDelete"
|
|
251
|
+
<button
|
|
252
|
+
@click="testDelete"
|
|
212
253
|
:disabled="loading.delete"
|
|
213
254
|
class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 disabled:opacity-50"
|
|
214
255
|
>
|
|
215
|
-
{{ loading.delete ?
|
|
256
|
+
{{ loading.delete ? "Loading..." : "Test DELETE" }}
|
|
216
257
|
</button>
|
|
217
258
|
</div>
|
|
218
259
|
<div class="text-sm text-gray-500 mb-2">Testing with ID: test-id-123</div>
|
|
219
|
-
<div v-if="errors.delete" class="text-red-500 mb-2">
|
|
220
|
-
|
|
260
|
+
<div v-if="errors.delete" class="text-red-500 mb-2">
|
|
261
|
+
Error: {{ errors.delete }}
|
|
262
|
+
</div>
|
|
263
|
+
<pre
|
|
264
|
+
v-if="results.delete"
|
|
265
|
+
class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48"
|
|
266
|
+
>{{ JSON.stringify(results.delete, null, 2) }}</pre
|
|
267
|
+
>
|
|
221
268
|
</div>
|
|
222
269
|
</div>
|
|
223
270
|
</template>
|