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