wad-lab 1.2.2 → 1.2.3

package/templates/fullstack-springboot-vue/frontend/vue-axios-basic/src/components/ItemFormModal.vue

@@ -0,0 +1,183 @@
+<script setup>
+import { reactive, watch } from 'vue'
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  isEdit: {
+    type: Boolean,
+    default: false
+  },
+  itemData: {
+    type: Object,
+    default: () => ({ name: '', description: '', price: 0 })
+  }
+})
+
+const emit = defineEmits(['close', 'submit'])
+
+const form = reactive({
+  id: '',
+  name: '',
+  description: '',
+  price: 0
+})
+
+watch(
+  () => props.itemData,
+  (val) => {
+    if (val) {
+      form.id = val.id || ''
+      form.name = val.name || ''
+      form.description = val.description || val.describtion || ''
+      form.price = Number(val.price) || 0
+    }
+  },
+  { immediate: true }
+)
+
+function handleSubmit() {
+  if (!form.name.trim()) return
+  emit('submit', {
+    id: form.id,
+    name: form.name.trim(),
+    description: form.description.trim(),
+    describtion: form.description.trim(),
+    price: Number(form.price)
+  })
+}
+</script>
+
+<template>
+  <div v-if="show" class="modal-overlay" @click.self="emit('close')">
+    <div class="modal-card">
+      <div class="modal-header">
+        <h3>{{ isEdit ? 'Update Item (PUT /api/items/:id)' : 'Create Item (POST /api/items)' }}</h3>
+        <button type="button" class="btn-close" @click="emit('close')">x</button>
+      </div>
+
+      <form @submit.prevent="handleSubmit" class="modal-form">
+        <div v-if="isEdit" class="form-group">
+          <label for="form-id">Item ID</label>
+          <input id="form-id" :value="form.id" disabled class="input-disabled" />
+        </div>
+
+        <div class="form-group">
+          <label for="form-name">Name</label>
+          <input id="form-name" v-model="form.name" required placeholder="Item Name" />
+        </div>
+
+        <div class="form-group">
+          <label for="form-desc">Description</label>
+          <input id="form-desc" v-model="form.description" required placeholder="Item Description" />
+        </div>
+
+        <div class="form-group">
+          <label for="form-price">Price ($)</label>
+          <input id="form-price" v-model.number="form.price" type="number" step="any" min="0" required placeholder="0.00" />
+        </div>
+
+        <div class="modal-actions">
+          <button type="button" class="btn btn-secondary" @click="emit('close')">Cancel</button>
+          <button type="submit" class="btn btn-primary">{{ isEdit ? 'Save Changes' : 'Create Item' }}</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 16px;
+}
+
+.modal-card {
+  background: #ffffff;
+  border-radius: 8px;
+  width: 100%;
+  max-width: 480px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+}
+
+.modal-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #e1e4e8;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header h3 {
+  font-size: 16px;
+  margin: 0;
+  color: #24292f;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+  color: #57606a;
+}
+
+.modal-form {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.form-group label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #444444;
+}
+
+.form-group input {
+  padding: 8px 12px;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.input-disabled {
+  background-color: #f6f8fa;
+  color: #6e7781;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.btn {
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.btn-primary { background: #0969da; color: #fff; }
+.btn-secondary { background: #f6f8fa; border-color: #d0d7de; color: #24292f; }
+</style>

package/templates/fullstack-springboot-vue/frontend/vue-axios-basic/src/components/ItemPatchModal.vue

@@ -0,0 +1,193 @@
+<script setup>
+import { reactive, watch } from 'vue'
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  item: {
+    type: Object,
+    default: null
+  }
+})
+
+const emit = defineEmits(['close', 'submit'])
+
+const patchData = reactive({
+  patchField: 'price',
+  price: 0,
+  name: '',
+  description: ''
+})
+
+watch(
+  () => props.item,
+  (val) => {
+    if (val) {
+      patchData.price = Number(val.price) || 0
+      patchData.name = val.name || ''
+      patchData.description = val.description || val.describtion || ''
+    }
+  },
+  { immediate: true }
+)
+
+function handleSubmit() {
+  if (!props.item) return
+  const partial = {}
+  if (patchData.patchField === 'price') {
+    partial.price = Number(patchData.price)
+  } else if (patchData.patchField === 'name') {
+    partial.name = patchData.name.trim()
+  } else if (patchData.patchField === 'description') {
+    partial.description = patchData.description.trim()
+    partial.describtion = patchData.description.trim()
+  }
+  emit('submit', { id: props.item.id, partial })
+}
+</script>
+
+<template>
+  <div v-if="show && item" class="modal-overlay" @click.self="emit('close')">
+    <div class="modal-card">
+      <div class="modal-header">
+        <h3>Patch Item (PATCH /api/items/:id)</h3>
+        <button type="button" class="btn-close" @click="emit('close')">x</button>
+      </div>
+
+      <form @submit.prevent="handleSubmit" class="modal-form">
+        <div class="info-banner">
+          Target Item: <strong>{{ item.name }}</strong> (ID: {{ item.id }})
+        </div>
+
+        <div class="form-group">
+          <label for="patch-field">Select Field to Patch</label>
+          <select id="patch-field" v-model="patchData.patchField">
+            <option value="price">Price</option>
+            <option value="name">Name</option>
+            <option value="description">Description</option>
+          </select>
+        </div>
+
+        <div v-if="patchData.patchField === 'price'" class="form-group">
+          <label for="patch-price">New Price ($)</label>
+          <input id="patch-price" v-model.number="patchData.price" type="number" step="any" min="0" required />
+        </div>
+
+        <div v-if="patchData.patchField === 'name'" class="form-group">
+          <label for="patch-name">New Name</label>
+          <input id="patch-name" v-model="patchData.name" required />
+        </div>
+
+        <div v-if="patchData.patchField === 'description'" class="form-group">
+          <label for="patch-desc">New Description</label>
+          <input id="patch-desc" v-model="patchData.description" required />
+        </div>
+
+        <div class="modal-actions">
+          <button type="button" class="btn btn-secondary" @click="emit('close')">Cancel</button>
+          <button type="submit" class="btn btn-primary">Apply Patch</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 16px;
+}
+
+.modal-card {
+  background: #ffffff;
+  border-radius: 8px;
+  width: 100%;
+  max-width: 440px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+}
+
+.modal-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #e1e4e8;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header h3 {
+  font-size: 15px;
+  margin: 0;
+  color: #24292f;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+  color: #57606a;
+}
+
+.modal-form {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.info-banner {
+  background-color: #f6f8fa;
+  padding: 10px 12px;
+  border-radius: 6px;
+  font-size: 13px;
+  border: 1px solid #d0d7de;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.form-group label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #444444;
+}
+
+.form-group input,
+.form-group select {
+  padding: 8px 12px;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.btn {
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.btn-primary { background: #8250df; color: #fff; }
+.btn-secondary { background: #f6f8fa; border-color: #d0d7de; color: #24292f; }
+</style>

package/templates/fullstack-springboot-vue/frontend/vue-axios-basic/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>