@veristone/nuxt-v-app 0.1.1 → 0.2.1

package/app/pages/test-api-auth.vue

@@ -1,118 +1,122 @@
 <script setup lang="ts">
-const endpoint = 'http://localhost:3002/admin/portfolio/loans'
+const endpoint = "http://localhost:3002/admin/portfolio/loans";
 
-const crud = useVCrud(endpoint, { immediate: false })
+const crud = useVCrud(endpoint, { immediate: false });
 
 // Store results for each method
-const results = ref<Record<string, any>>({})
-const loading = ref<Record<string, boolean>>({})
-const errors = ref<Record<string, string>>({})
+const results = ref<Record<string, any>>({});
+const loading = ref<Record<string, boolean>>({});
+const errors = ref<Record<string, string>>({});
 
 // Test GET (findAll)
 const testGet = async () => {
-  loading.value.get = true
-  errors.value.get = ''
+  loading.value.get = true;
+  errors.value.get = "";
   try {
-    const data = await crud.findAll()
-    results.value.get = data
+    const data = await crud.findAll();
+    results.value.get = data;
   } catch (err: any) {
-    errors.value.get = err.message || 'Failed'
+    errors.value.get = err.message || "Failed";
   } finally {
-    loading.value.get = false
+    loading.value.get = false;
   }
-}
+};
 
 // Test GET single (findOne) - using first ID if available
 const testGetOne = async () => {
-  const testId = 'test-id-123'
-  loading.value.getOne = true
-  errors.value.getOne = ''
+  const testId = "test-id-123";
+  loading.value.getOne = true;
+  errors.value.getOne = "";
   try {
-    const data = await crud.findOne(testId)
-    results.value.getOne = data
+    const data = await crud.findOne(testId);
+    results.value.getOne = data;
   } catch (err: any) {
-    errors.value.getOne = err.message || 'Failed'
+    errors.value.getOne = err.message || "Failed";
   } finally {
-    loading.value.getOne = false
+    loading.value.getOne = false;
   }
-}
+};
 
 // Test POST (create)
 const testPost = async () => {
-  loading.value.post = true
-  errors.value.post = ''
+  loading.value.post = true;
+  errors.value.post = "";
   try {
-    const data = await crud.create({ name: 'Test Loan', amount: 1000 })
-    results.value.post = data
+    const data = await crud.create({ name: "Test Loan", amount: 1000 });
+    results.value.post = data;
   } catch (err: any) {
-    errors.value.post = err.message || 'Failed'
+    errors.value.post = err.message || "Failed";
   } finally {
-    loading.value.post = false
+    loading.value.post = false;
   }
-}
+};
 
 // Test PUT (update)
 const testPut = async () => {
-  const testId = 'test-id-123'
-  loading.value.put = true
-  errors.value.put = ''
+  const testId = "test-id-123";
+  loading.value.put = true;
+  errors.value.put = "";
   try {
-    const data = await crud.update(testId, { name: 'Updated Loan', amount: 2000 })
-    results.value.put = data
+    const data = await crud.update(testId, {
+      name: "Updated Loan",
+      amount: 2000,
+    });
+    results.value.put = data;
+    useVToast().success("PUT successful", "The loan has been updated");
   } catch (err: any) {
-    errors.value.put = err.message || 'Failed'
+    errors.value.put = err.message || "Failed";
   } finally {
-    loading.value.put = false
+    loading.value.put = false;
   }
-}
+};
 
 // Test PATCH
 const testPatch = async () => {
-  const testId = 'test-id-123'
-  loading.value.patch = true
-  errors.value.patch = ''
+  const testId = "test-id-123";
+  loading.value.patch = true;
+  errors.value.patch = "";
   try {
-    const data = await crud.patch(testId, { amount: 1500 })
-    results.value.patch = data
+    const data = await crud.patch(testId, { amount: 1500 });
+    results.value.patch = data;
   } catch (err: any) {
-    errors.value.patch = err.message || 'Failed'
+    errors.value.patch = err.message || "Failed";
   } finally {
-    loading.value.patch = false
+    loading.value.patch = false;
   }
-}
+};
 
 // Test DELETE
 const testDelete = async () => {
-  const testId = 'test-id-123'
-  loading.value.delete = true
-  errors.value.delete = ''
+  const testId = "test-id-123";
+  loading.value.delete = true;
+  errors.value.delete = "";
   try {
-    const data = await crud.remove(testId)
-    results.value.delete = data
+    const data = await crud.remove(testId);
+    results.value.delete = data;
   } catch (err: any) {
-    errors.value.delete = err.message || 'Failed'
+    errors.value.delete = err.message || "Failed";
   } finally {
-    loading.value.delete = false
+    loading.value.delete = false;
   }
-}
+};
 
 // Run all tests
 const testAll = async () => {
-  await testGet()
-  await testGetOne()
-  await testPost()
-  await testPut()
-  await testPatch()
-  await testDelete()
-}
+  await testGet();
+  await testGetOne();
+  await testPost();
+  await testPut();
+  await testPatch();
+  await testDelete();
+};
 </script>
 
 <template>
   <div class="p-8 space-y-8">
     <div class="flex items-center justify-between">
       <h1 class="text-2xl font-bold">API Methods Test</h1>
-      <button 
-        @click="testAll" 
+      <button
+        @click="testAll"
         class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
       >
         Test All Methods
@@ -123,101 +127,144 @@ const testAll = async () => {
     <div class="border p-4 rounded">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-xl font-semibold">GET (findAll)</h2>
-        <button 
-          @click="testGet" 
+        <button
+          @click="testGet"
           :disabled="loading.get"
           class="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600 disabled:opacity-50"
         >
-          {{ loading.get ? 'Loading...' : 'Test GET' }}
+          {{ loading.get ? "Loading..." : "Test GET" }}
         </button>
       </div>
-      <div v-if="errors.get" class="text-red-500 mb-2">Error: {{ errors.get }}</div>
-      <pre v-if="results.get" class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48">{{ JSON.stringify(results.get, null, 2) }}</pre>
+      <div v-if="errors.get" class="text-red-500 mb-2">
+        Error: {{ errors.get }}
+      </div>
+      <pre
+        v-if="results.get"
+        class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48"
+        >{{ JSON.stringify(results.get, null, 2) }}</pre
+      >
     </div>
 
     <!-- GET One (findOne) -->
     <div class="border p-4 rounded">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-xl font-semibold">GET Single (findOne)</h2>
-        <button 
-          @click="testGetOne" 
+        <button
+          @click="testGetOne"
           :disabled="loading.getOne"
           class="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600 disabled:opacity-50"
         >
-          {{ loading.getOne ? 'Loading...' : 'Test GET One' }}
+          {{ loading.getOne ? "Loading..." : "Test GET One" }}
         </button>
       </div>
       <div class="text-sm text-gray-500 mb-2">Testing with ID: test-id-123</div>
-      <div v-if="errors.getOne" class="text-red-500 mb-2">Error: {{ errors.getOne }}</div>
-      <pre v-if="results.getOne" class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48">{{ JSON.stringify(results.getOne, null, 2) }}</pre>
+      <div v-if="errors.getOne" class="text-red-500 mb-2">
+        Error: {{ errors.getOne }}
+      </div>
+      <pre
+        v-if="results.getOne"
+        class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48"
+        >{{ JSON.stringify(results.getOne, null, 2) }}</pre
+      >
     </div>
 
     <!-- POST (create) -->
     <div class="border p-4 rounded">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-xl font-semibold">POST (create)</h2>
-        <button 
-          @click="testPost" 
+        <button
+          @click="testPost"
           :disabled="loading.post"
           class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
         >
-          {{ loading.post ? 'Loading...' : 'Test POST' }}
+          {{ loading.post ? "Loading..." : "Test POST" }}
         </button>
       </div>
-      <div class="text-sm text-gray-500 mb-2">Payload: { name: 'Test Loan', amount: 1000 }</div>
-      <div v-if="errors.post" class="text-red-500 mb-2">Error: {{ errors.post }}</div>
-      <pre v-if="results.post" class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48">{{ JSON.stringify(results.post, null, 2) }}</pre>
+      <div class="text-sm text-gray-500 mb-2">
+        Payload: { name: 'Test Loan', amount: 1000 }
+      </div>
+      <div v-if="errors.post" class="text-red-500 mb-2">
+        Error: {{ errors.post }}
+      </div>
+      <pre
+        v-if="results.post"
+        class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48"
+        >{{ JSON.stringify(results.post, null, 2) }}</pre
+      >
     </div>
 
     <!-- PUT (update) -->
     <div class="border p-4 rounded">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-xl font-semibold">PUT (update)</h2>
-        <button 
-          @click="testPut" 
+        <button
+          @click="testPut"
           :disabled="loading.put"
           class="px-3 py-1 bg-yellow-500 text-white rounded hover:bg-yellow-600 disabled:opacity-50"
         >
-          {{ loading.put ? 'Loading...' : 'Test PUT' }}
+          {{ loading.put ? "Loading..." : "Test PUT" }}
         </button>
       </div>
-      <div class="text-sm text-gray-500 mb-2">Testing with ID: test-id-123 | Payload: { name: 'Updated Loan', amount: 2000 }</div>
-      <div v-if="errors.put" class="text-red-500 mb-2">Error: {{ errors.put }}</div>
-      <pre v-if="results.put" class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48">{{ JSON.stringify(results.put, null, 2) }}</pre>
+      <div class="text-sm text-gray-500 mb-2">
+        Testing with ID: test-id-123 | Payload: { name: 'Updated Loan', amount:
+        2000 }
+      </div>
+      <div v-if="errors.put" class="text-red-500 mb-2">
+        Error: {{ errors.put }}
+      </div>
+      <pre
+        v-if="results.put"
+        class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48"
+        >{{ JSON.stringify(results.put, null, 2) }}</pre
+      >
     </div>
 
     <!-- PATCH -->
     <div class="border p-4 rounded">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-xl font-semibold">PATCH</h2>
-        <button 
-          @click="testPatch" 
+        <button
+          @click="testPatch"
           :disabled="loading.patch"
           class="px-3 py-1 bg-purple-500 text-white rounded hover:bg-purple-600 disabled:opacity-50"
         >
-          {{ loading.patch ? 'Loading...' : 'Test PATCH' }}
+          {{ loading.patch ? "Loading..." : "Test PATCH" }}
         </button>
       </div>
-      <div class="text-sm text-gray-500 mb-2">Testing with ID: test-id-123 | Payload: { amount: 1500 }</div>
-      <div v-if="errors.patch" class="text-red-500 mb-2">Error: {{ errors.patch }}</div>
-      <pre v-if="results.patch" class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48">{{ JSON.stringify(results.patch, null, 2) }}</pre>
+      <div class="text-sm text-gray-500 mb-2">
+        Testing with ID: test-id-123 | Payload: { amount: 1500 }
+      </div>
+      <div v-if="errors.patch" class="text-red-500 mb-2">
+        Error: {{ errors.patch }}
+      </div>
+      <pre
+        v-if="results.patch"
+        class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48"
+        >{{ JSON.stringify(results.patch, null, 2) }}</pre
+      >
     </div>
 
     <!-- DELETE -->
     <div class="border p-4 rounded">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-xl font-semibold">DELETE (remove)</h2>
-        <button 
-          @click="testDelete" 
+        <button
+          @click="testDelete"
           :disabled="loading.delete"
           class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 disabled:opacity-50"
         >
-          {{ loading.delete ? 'Loading...' : 'Test DELETE' }}
+          {{ loading.delete ? "Loading..." : "Test DELETE" }}
         </button>
       </div>
       <div class="text-sm text-gray-500 mb-2">Testing with ID: test-id-123</div>
-      <div v-if="errors.delete" class="text-red-500 mb-2">Error: {{ errors.delete }}</div>
-      <pre v-if="results.delete" class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48">{{ JSON.stringify(results.delete, null, 2) }}</pre>
+      <div v-if="errors.delete" class="text-red-500 mb-2">
+        Error: {{ errors.delete }}
+      </div>
+      <pre
+        v-if="results.delete"
+        class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48"
+        >{{ JSON.stringify(results.delete, null, 2) }}</pre
+      >
     </div>
   </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veristone/nuxt-v-app",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "private": false,
   "description": "Veristone Nuxt App Layer - Shared components, composables, and layouts",
   "keywords": [