wad-lab 1.2.2 → 1.2.4

package/templates/vue-axios-router-pinia/src/components/ItemPatchModal.vue

@@ -0,0 +1,144 @@
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: 'Patch Record'
+  },
+  fieldLabel: {
+    type: String,
+    default: 'New Value'
+  },
+  initialValue: {
+    type: [String, Number],
+    default: ''
+  }
+})
+
+const emit = defineEmits(['close', 'submit'])
+
+const val = ref('')
+
+watch(
+  () => props.show,
+  (open) => {
+    if (open) val.value = props.initialValue
+  }
+)
+
+function handleSubmit() {
+  emit('submit', val.value)
+}
+</script>
+
+<template>
+  <div v-if="show" class="modal-overlay" @click.self="emit('close')">
+    <div class="modal-card">
+      <div class="modal-header">
+        <h3>{{ title }}</h3>
+        <button type="button" class="btn-close" @click="emit('close')">x</button>
+      </div>
+
+      <form @submit.prevent="handleSubmit" class="modal-form">
+        <div class="form-group">
+          <label>{{ fieldLabel }}</label>
+          <input v-model="val" 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: 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: 400px;
+  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;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.modal-form {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.form-group label {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.form-group input {
+  padding: 8px 12px;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 8px;
+}
+
+.btn {
+  padding: 8px 14px;
+  border-radius: 6px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  font-size: 13px;
+}
+
+.btn-primary { background: #8250df; color: #fff; }
+.btn-secondary { background: #f6f8fa; border-color: #d0d7de; color: #24292f; }
+</style>

package/templates/vue-axios-router-pinia/src/components/ItemTable.vue

@@ -0,0 +1,102 @@
+<script setup>
+defineProps({
+  columns: {
+    type: Array,
+    required: true
+  },
+  items: {
+    type: Array,
+    default: () => []
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['patch', 'delete'])
+</script>
+
+<template>
+  <div class="table-container">
+    <div v-if="loading" class="loading-state">Loading table data...</div>
+    <table v-else class="data-table">
+      <thead>
+        <tr>
+          <th v-for="col in columns" :key="col.key">{{ col.label }}</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="items.length === 0">
+          <td :colspan="columns.length + 1" class="empty">No records found.</td>
+        </tr>
+        <tr v-for="row in items" :key="row.id">
+          <td v-for="col in columns" :key="col.key">
+            {{ col.format ? col.format(row[col.key], row) : row[col.key] }}
+          </td>
+          <td class="action-cell">
+            <button type="button" class="btn btn-sm btn-patch" @click="emit('patch', row)">Patch</button>
+            <button type="button" class="btn btn-sm btn-danger" @click="emit('delete', row.id)">Delete</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.table-container {
+  overflow-x: auto;
+  background: #ffffff;
+  border: 1px solid #e1e4e8;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+th, td {
+  padding: 10px 12px;
+  border-bottom: 1px solid #e1e4e8;
+  text-align: left;
+}
+
+th {
+  background-color: #f8fafc;
+  font-weight: 600;
+  color: #475569;
+}
+
+.action-cell {
+  display: flex;
+  gap: 6px;
+}
+
+.empty {
+  text-align: center;
+  color: #94a3b8;
+  padding: 24px;
+}
+
+.loading-state {
+  padding: 16px;
+  text-align: center;
+  color: #64748b;
+}
+
+.btn {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.btn-patch { background: #8250df; color: #fff; }
+.btn-danger { background: #cf222e; color: #fff; }
+</style>

package/templates/vue-axios-router-pinia/src/components/NavBar.vue

@@ -0,0 +1,53 @@
+<script setup>
+</script>
+
+<template>
+  <header class="app-header">
+    <div class="brand">
+      <h1>Company Portal (Pinia)</h1>
+    </div>
+    <nav class="nav-links">
+      <router-link to="/" class="nav-item">Dashboard</router-link>
+      <router-link to="/departments" class="nav-item">Departments</router-link>
+      <router-link to="/employees" class="nav-item">Employees</router-link>
+    </nav>
+  </header>
+</template>
+
+<style scoped>
+.app-header {
+  background-color: #1e293b;
+  color: #ffffff;
+  padding: 0 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.brand h1 {
+  font-size: 18px;
+  margin: 16px 0;
+}
+
+.nav-links {
+  display: flex;
+  gap: 10px;
+}
+
+.nav-item {
+  color: #cbd5e1;
+  text-decoration: none;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.nav-item:hover {
+  background-color: #334155;
+}
+
+.nav-item.router-link-exact-active {
+  background-color: #0284c7;
+  color: #ffffff;
+}
+</style>

package/templates/vue-axios-router-pinia/src/views/DepartmentView.vue

@@ -1,229 +1,107 @@
-<template>
-  <div class="department-view">
-    <h2>Departments Management</h2>
-
-    <section class="card">
-      <h3>Add Department</h3>
-      <form @submit.prevent="handleSubmit" class="form">
-        <div class="form-group">
-          <label for="dept-name">Department Name</label>
-          <input
-            id="dept-name"
-            v-model="form.name"
-            type="text"
-            required
-            placeholder="e.g. Engineering"
-          />
-        </div>
-        <div class="form-group">
-          <label for="dept-code">Department Code</label>
-          <input
-            id="dept-code"
-            v-model="form.code"
-            type="text"
-            required
-            placeholder="e.g. ENG"
-          />
-        </div>
-        <button type="submit" class="btn btn-primary">Add Department</button>
-      </form>
-    </section>
-
-    <section class="card table-card">
-      <h3>Department List</h3>
-      <div class="table-wrapper">
-        <table>
-          <thead>
-            <tr>
-              <th>ID</th>
-              <th>Name</th>
-              <th>Code</th>
-              <th>Action</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-if="companyStore.departments.length === 0">
-              <td colspan="4" class="empty">No departments found</td>
-            </tr>
-            <tr v-for="dept in companyStore.departments" :key="dept.id">
-              <td>{{ dept.id }}</td>
-              <td>{{ dept.name }}</td>
-              <td><code>{{ dept.code }}</code></td>
-              <td>
-                <button @click="handlePatchDepartment(dept.id, dept.code)" class="btn btn-warning">Patch</button>
-                <button @click="handleDelete(dept.id)" class="btn btn-danger">Delete</button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script setup>
-import { reactive, onMounted } from 'vue'
-import { useCompanyStore } from '../stores/companyStore'
-
-const companyStore = useCompanyStore()
-
-const form = reactive({
-  name: '',
-  code: ''
-})
-
-const handleSubmit = async () => {
-  await companyStore.addDepartment({
-    name: form.name,
-    code: form.code
-  })
-  form.name = ''
-  form.code = ''
-}
-
-const handleDelete = async (id) => {
-  await companyStore.deleteDepartment(id)
-}
-
-const handlePatchDepartment = async (id, code) => {
-  const newCode = prompt('New code:', code)
-  if (newCode) {
-    await companyStore.patchDepartment(id, { code: newCode })
-  }
-}
-
-onMounted(() => {
-  companyStore.fetchDepartments()
-})
-</script>
-
-<style scoped>
-.department-view h2 {
-  font-size: 22px;
-  margin-bottom: 20px;
-  color: #1a1a1a;
-}
-
-.card {
-  background: #ffffff;
-  border: 1px solid #e1e4e8;
-  border-radius: 8px;
-  padding: 20px;
-  margin-bottom: 24px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-}
-
-.card h3 {
-  font-size: 16px;
-  margin-bottom: 16px;
-  color: #333333;
-}
-
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  max-width: 400px;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.form-group label {
-  font-size: 13px;
-  font-weight: 600;
-  color: #444444;
-}
-
-.form-group input {
-  padding: 8px 10px;
-  border: 1px solid #cccccc;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.form-group input:focus {
-  outline: none;
-  border-color: #0066cc;
-}
-
-.btn {
-  padding: 8px 14px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.btn-primary {
-  background-color: #0066cc;
-  color: #ffffff;
-  align-self: flex-start;
-}
-
-.btn-primary:hover {
-  background-color: #0052a3;
-}
-
-.btn-danger {
-  background-color: #d9383a;
-  color: #ffffff;
-  padding: 4px 8px;
-  font-size: 12px;
-}
-
-.btn-danger:hover {
-  background-color: #b8282a;
-}
-
-.btn-warning {
-  background-color: #f0ad4e;
-  color: #ffffff;
-  padding: 4px 8px;
-  font-size: 12px;
-  margin-right: 6px;
-}
-
-.btn-warning:hover {
-  background-color: #ec971f;
-}
-
-.table-wrapper {
-  overflow-x: auto;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-}
-
-th, td {
-  text-align: left;
-  padding: 8px 10px;
-  border-bottom: 1px solid #eeeeee;
-}
-
-th {
-  background-color: #fafbfc;
-  color: #555555;
-  font-weight: 600;
-}
-
-code {
-  background: #f0f0f0;
-  padding: 2px 4px;
-  border-radius: 3px;
-  font-size: 12px;
-}
-
-.empty {
-  text-align: center;
-  color: #888888;
-  padding: 16px;
-}
-</style>
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useCompanyStore } from '../stores/companyStore'
+import ItemTable from '../components/ItemTable.vue'
+import ItemFormModal from '../components/ItemFormModal.vue'
+import ItemPatchModal from '../components/ItemPatchModal.vue'
+
+const store = useCompanyStore()
+const isFormModalOpen = ref(false)
+const isPatchModalOpen = ref(false)
+const selectedDept = ref(null)
+
+const columns = [
+  { key: 'id', label: 'ID' },
+  { key: 'name', label: 'Department Name' },
+  { key: 'code', label: 'Code' }
+]
+
+const formFields = [
+  { key: 'name', label: 'Department Name', required: true, placeholder: 'e.g. Sales' },
+  { key: 'code', label: 'Department Code', required: true, placeholder: 'e.g. SLS' }
+]
+
+async function handleCreate(data) {
+  await store.createDepartment(data)
+  isFormModalOpen.value = false
+}
+
+function handleOpenPatch(dept) {
+  selectedDept.value = dept
+  isPatchModalOpen.value = true
+}
+
+async function handleApplyPatch(newCode) {
+  if (selectedDept.value && newCode) {
+    await store.patchDepartment(selectedDept.value.id, { code: newCode })
+  }
+  isPatchModalOpen.value = false
+}
+
+async function handleDelete(id) {
+  if (confirm('Delete this department?')) {
+    await store.deleteDepartment(id)
+  }
+}
+
+onMounted(() => {
+  store.fetchDepartments()
+})
+</script>
+
+<template>
+  <div class="view-container">
+    <div class="view-header">
+      <h2>Department Management (Pinia)</h2>
+      <button type="button" class="btn btn-primary" @click="isFormModalOpen = true">Add Department</button>
+    </div>
+
+    <ItemTable
+      :columns="columns"
+      :items="store.departments"
+      :loading="store.loading"
+      @patch="handleOpenPatch"
+      @delete="handleDelete"
+    />
+
+    <ItemFormModal
+      :show="isFormModalOpen"
+      title="Create Department"
+      :fields="formFields"
+      @close="isFormModalOpen = false"
+      @submit="handleCreate"
+    />
+
+    <ItemPatchModal
+      :show="isPatchModalOpen"
+      title="Patch Department Code"
+      field-label="New Department Code"
+      :initial-value="selectedDept ? selectedDept.code : ''"
+      @close="isPatchModalOpen = false"
+      @submit="handleApplyPatch"
+    />
+  </div>
+</template>
+
+<style scoped>
+.view-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.view-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.btn-primary {
+  background: #0284c7;
+  color: #fff;
+  border: none;
+  padding: 8px 14px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+</style>