@veristone/nuxt-v-app 0.1.0 → 0.2.0

package/app/pages/playground/index.vue

@@ -46,6 +46,12 @@ const categories = [
     to: '/playground/base',
     icon: 'i-lucide-box'
   },
+  {
+    title: 'CRUD Components',
+    description: 'VACrudCreate, VACrudUpdate, and VACrudDelete for modal-based CRUD operations.',
+    to: '/playground/crud',
+    icon: 'i-lucide-database'
+  },
   {
     title: 'Buttons',
     description: 'Action buttons for CRUD operations, navigation, and data export.',

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

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+const endpoint = 'http://localhost:3002/admin/portfolio/loans'
+
+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>>({})
+
+// Test GET (findAll)
+const testGet = async () => {
+  loading.value.get = true
+  errors.value.get = ''
+  try {
+    const data = await crud.findAll()
+    results.value.get = data
+  } catch (err: any) {
+    errors.value.get = err.message || 'Failed'
+  } finally {
+    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 = ''
+  try {
+    const data = await crud.findOne(testId)
+    results.value.getOne = data
+  } catch (err: any) {
+    errors.value.getOne = err.message || 'Failed'
+  } finally {
+    loading.value.getOne = false
+  }
+}
+
+// Test POST (create)
+const testPost = async () => {
+  loading.value.post = true
+  errors.value.post = ''
+  try {
+    const data = await crud.create({ name: 'Test Loan', amount: 1000 })
+    results.value.post = data
+  } catch (err: any) {
+    errors.value.post = err.message || 'Failed'
+  } finally {
+    loading.value.post = false
+  }
+}
+
+// Test PUT (update)
+const testPut = async () => {
+  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
+  } catch (err: any) {
+    errors.value.put = err.message || 'Failed'
+  } finally {
+    loading.value.put = false
+  }
+}
+
+// Test PATCH
+const testPatch = async () => {
+  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
+  } catch (err: any) {
+    errors.value.patch = err.message || 'Failed'
+  } finally {
+    loading.value.patch = false
+  }
+}
+
+// Test DELETE
+const testDelete = async () => {
+  const testId = 'test-id-123'
+  loading.value.delete = true
+  errors.value.delete = ''
+  try {
+    const data = await crud.remove(testId)
+    results.value.delete = data
+  } catch (err: any) {
+    errors.value.delete = err.message || 'Failed'
+  } finally {
+    loading.value.delete = false
+  }
+}
+
+// Run all tests
+const testAll = async () => {
+  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" 
+        class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+      >
+        Test All Methods
+      </button>
+    </div>
+
+    <!-- GET (findAll) -->
+    <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" 
+          :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' }}
+        </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>
+
+    <!-- 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" 
+          :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' }}
+        </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>
+
+    <!-- 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" 
+          :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' }}
+        </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>
+
+    <!-- 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" 
+          :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' }}
+        </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>
+
+    <!-- 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" 
+          :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' }}
+        </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>
+
+    <!-- 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" 
+          :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' }}
+        </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>
+  </div>
+</template>

package/package.json

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