wad-lab 1.2.2 → 1.2.4

package/templates/vue-router-pinia-springboot/frontend/src/components/ItemTable.vue

@@ -0,0 +1,177 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['open-create', 'edit', 'patch', 'delete', 'view-details', 'refresh'])
+
+const searchId = ref('')
+
+const filteredItems = computed(() => {
+  if (!searchId.value.trim()) return props.items
+  return props.items.filter(item =>
+    String(item.id).toLowerCase().includes(searchId.value.trim().toLowerCase()) ||
+    (item.name && item.name.toLowerCase().includes(searchId.value.trim().toLowerCase()))
+  )
+})
+</script>
+
+<template>
+  <div class="table-container">
+    <div class="table-header">
+      <div class="search-bar">
+        <input
+          v-model="searchId"
+          type="text"
+          placeholder="Filter by ID or Name..."
+          class="input-search"
+        />
+        <button type="button" class="btn btn-secondary" @click="emit('refresh')">Refresh</button>
+      </div>
+      <button type="button" class="btn btn-primary" @click="emit('open-create')">Add New Item</button>
+    </div>
+
+    <div v-if="loading" class="status-box">Loading items...</div>
+
+    <div class="table-wrapper">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Name</th>
+            <th>Description</th>
+            <th>Price</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="filteredItems.length === 0">
+            <td colspan="5" class="empty-cell">No items available.</td>
+          </tr>
+          <tr v-for="item in filteredItems" :key="item.id">
+            <td>{{ item.id }}</td>
+            <td class="font-bold">{{ item.name }}</td>
+            <td>{{ item.description || item.describtion || 'N/A' }}</td>
+            <td>${{ Number(item.price).toFixed(2) }}</td>
+            <td class="actions-cell">
+              <button type="button" class="btn btn-sm btn-info" @click="emit('view-details', item)">View</button>
+              <button type="button" class="btn btn-sm btn-warning" @click="emit('edit', item)">Edit</button>
+              <button type="button" class="btn btn-sm btn-patch" @click="emit('patch', item)">Patch</button>
+              <button type="button" class="btn btn-sm btn-danger" @click="emit('delete', item.id)">Delete</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.table-container {
+  background: #ffffff;
+  border: 1px solid #e1e4e8;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.search-bar {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.input-search {
+  padding: 8px 12px;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  font-size: 14px;
+  min-width: 220px;
+}
+
+.table-wrapper {
+  overflow-x: auto;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+.data-table th,
+.data-table td {
+  padding: 10px 14px;
+  border-bottom: 1px solid #e1e4e8;
+  text-align: left;
+}
+
+.data-table th {
+  background-color: #f6f8fa;
+  font-weight: 600;
+  color: #57606a;
+}
+
+.font-bold {
+  font-weight: 600;
+}
+
+.actions-cell {
+  display: flex;
+  gap: 6px;
+}
+
+.empty-cell {
+  text-align: center;
+  color: #8c959f;
+  padding: 24px;
+}
+
+.status-box {
+  padding: 10px 14px;
+  background-color: #ddf4ff;
+  color: #0969da;
+  border-radius: 6px;
+  margin-bottom: 12px;
+}
+
+.btn {
+  padding: 8px 14px;
+  font-size: 13px;
+  font-weight: 500;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  cursor: pointer;
+}
+
+.btn-sm {
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+.btn-primary { background: #0969da; color: #fff; }
+.btn-secondary { background: #f6f8fa; border-color: #d0d7de; color: #24292f; }
+.btn-info { background: #2da44e; color: #fff; }
+.btn-warning { background: #bf8700; color: #fff; }
+.btn-patch { background: #8250df; color: #fff; }
+.btn-danger { background: #cf222e; color: #fff; }
+</style>

package/templates/vue-router-pinia-springboot/frontend/src/components/NavBar.vue

@@ -0,0 +1,54 @@
+<script setup>
+</script>
+
+<template>
+  <header class="navbar">
+    <div class="brand">
+      <h2>Spring Boot + Mongo + Pinia App</h2>
+    </div>
+    <nav class="nav-links">
+      <router-link to="/" class="nav-link">Item List</router-link>
+      <router-link to="/add" class="nav-link">Add Item</router-link>
+    </nav>
+  </header>
+</template>
+
+<style scoped>
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #1e293b;
+  color: #fff;
+  padding: 12px 20px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.brand h2 {
+  font-size: 18px;
+  margin: 0;
+}
+
+.nav-links {
+  display: flex;
+  gap: 12px;
+}
+
+.nav-link {
+  color: #cbd5e1;
+  text-decoration: none;
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.nav-link:hover {
+  background: #334155;
+}
+
+.nav-link.router-link-exact-active {
+  background: #0284c7;
+  color: #fff;
+}
+</style>

package/templates/vue-router-pinia-springboot/frontend/src/views/ListView.vue

@@ -1,76 +1,92 @@
-<script setup>
-import { ref, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { useItemStore } from '../stores/itemStore';
-
-const router = useRouter();
-const itemStore = useItemStore();
-const store = itemStore;
-const searchId = ref('');
-
-const goToSearch = () => {
-  if (searchId.value) {
-    router.push(`/item/${searchId.value}`);
-  }
-};
-
-const goToItem = (id) => {
-  router.push(`/item/${id}`);
-};
-
-const deleteItem = async (id) => {
-  await itemStore.removeItem(id);
-};
-
-const patchItem = async (id) => {
-  const newPrice = prompt('Enter new price:');
-  if (newPrice !== null && newPrice !== '') {
-    await store.patchItem(id, { price: Number(newPrice) });
-  }
-};
-
-onMounted(() => {
-  itemStore.fetchItems();
-});
-</script>
-
-<template>
-  <h2>Item List</h2>
-
-  <router-link to="/add">Add New Item</router-link>
-  <br><br>
-
-  <label>Find Item by ID:</label>
-  <br>
-  <input v-model="searchId" placeholder="Enter Item ID" />
-  <button type="button" @click="goToSearch">View Details</button>
-  <br><br>
-
-  <button type="button" @click="itemStore.fetchItems()">Refresh List</button>
-  <br><br>
-
-  <table>
-    <thead>
-      <tr>
-        <th>ID</th>
-        <th>Name</th>
-        <th>Description</th>
-        <th>Price</th>
-        <th>Actions</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="item in itemStore.items" :key="item.id">
-        <td>{{ item.id }}</td>
-        <td>{{ item.name }}</td>
-        <td>{{ item.description }}</td>
-        <td>{{ item.price }}</td>
-        <td>
-          <button type="button" @click="goToItem(item.id)">View / Edit</button>
-          <button type="button" @click="deleteItem(item.id)">Delete</button>
-          <button type="button" @click="patchItem(item.id)">Patch</button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useItemStore } from '../stores/itemStore'
+import ItemTable from '../components/ItemTable.vue'
+import ItemFormModal from '../components/ItemFormModal.vue'
+import ItemPatchModal from '../components/ItemPatchModal.vue'
+
+const router = useRouter()
+const store = useItemStore()
+
+const isFormModalOpen = ref(false)
+const isEditMode = ref(false)
+const selectedItem = ref(null)
+
+const isPatchModalOpen = ref(false)
+const activePatchItem = ref(null)
+
+function openCreateModal() {
+  isEditMode.value = false
+  selectedItem.value = null
+  isFormModalOpen.value = true
+}
+
+function handleEdit(item) {
+  isEditMode.value = true
+  selectedItem.value = item
+  isFormModalOpen.value = true
+}
+
+function handlePatch(item) {
+  activePatchItem.value = item
+  isPatchModalOpen.value = true
+}
+
+async function handleFormSubmit(data) {
+  if (isEditMode.value) {
+    await store.editItem(data.id, data)
+  } else {
+    await store.addItem(data)
+  }
+  isFormModalOpen.value = false
+}
+
+async function handlePatchSubmit({ id, partial }) {
+  await store.patchItem(id, partial)
+  isPatchModalOpen.value = false
+}
+
+async function handleDelete(id) {
+  if (confirm('Delete this item?')) {
+    await store.removeItem(id)
+  }
+}
+
+function handleView(item) {
+  router.push('/item/' + item.id)
+}
+
+onMounted(() => {
+  store.fetchItems()
+})
+</script>
+
+<template>
+  <div class="list-page">
+    <ItemTable
+      :items="store.items"
+      @open-create="openCreateModal"
+      @edit="handleEdit"
+      @patch="handlePatch"
+      @delete="handleDelete"
+      @view-details="handleView"
+      @refresh="store.fetchItems"
+    />
+
+    <ItemFormModal
+      :show="isFormModalOpen"
+      :is-edit="isEditMode"
+      :item-data="selectedItem"
+      @close="isFormModalOpen = false"
+      @submit="handleFormSubmit"
+    />
+
+    <ItemPatchModal
+      :show="isPatchModalOpen"
+      :item="activePatchItem"
+      @close="isPatchModalOpen = false"
+      @submit="handlePatchSubmit"
+    />
+  </div>
+</template>