wad-lab 1.2.2 → 1.2.4

package/templates/vue-2model-crud-patch/src/views/AnalyticsView.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="analytics-view">
+    <div v-if="error" class="alert alert-danger">
+      {{ error }}
+    </div>
+
+    <!-- Modular Child Component: AnalyticsBoard -->
+    <AnalyticsBoard
+      :stats="deptStore.stats"
+      :joined-data="empStore.joinedData"
+      :employees="empStore.employees"
+      :departments="deptStore.departments"
+      @refresh="loadAnalyticsData"
+    />
+  </div>
+</template>
+
+<script>
+import { useDepartmentStore } from '../stores/departmentStore'
+import { useEmployeeStore } from '../stores/employeeStore'
+import AnalyticsBoard from '../components/AnalyticsBoard.vue'
+
+export default {
+  name: 'AnalyticsView',
+  components: {
+    AnalyticsBoard
+  },
+  setup() {
+    const deptStore = useDepartmentStore()
+    const empStore = useEmployeeStore()
+    return { deptStore, empStore }
+  },
+  data() {
+    return {
+      error: null
+    }
+  },
+  async mounted() {
+    await this.loadAnalyticsData()
+  },
+  methods: {
+    async loadAnalyticsData() {
+      this.error = null
+      try {
+        await Promise.all([
+          this.deptStore.getAll().catch(() => {}),
+          this.empStore.getAll().catch(() => {})
+        ])
+        await Promise.all([
+          this.deptStore.fetchStats(this.empStore.employees).catch(() => {}),
+          this.empStore.fetchJoined(this.deptStore.departments).catch(() => {})
+        ])
+      } catch (err) {
+        this.error = err.message || 'Failed to refresh analytics'
+      }
+    }
+  }
+}
+</script>

package/templates/vue-2model-crud-patch/src/views/DepartmentsView.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="departments-view">
+    <div v-if="deptStore.error" class="alert alert-danger">
+      {{ deptStore.error }}
+    </div>
+
+    <div v-if="feedbackMessage" class="alert alert-info">
+      {{ feedbackMessage }}
+    </div>
+
+    <!-- Modular Child Component: DepartmentTable -->
+    <DepartmentTable
+      :departments="deptStore.departments"
+      :loading="deptStore.loading"
+      @create="openCreateModal"
+      @edit="openEditModal"
+      @patch="openPatchModal"
+      @delete="handleDelete"
+    />
+
+    <!-- Modular Child Component: DepartmentFormModal (POST / PUT) -->
+    <DepartmentFormModal
+      :show="showFormModal"
+      :department="selectedDept"
+      @close="closeFormModal"
+      @save="handleSave"
+    />
+
+    <!-- Modular Child Component: DepartmentPatchModal (PATCH) -->
+    <DepartmentPatchModal
+      :show="showPatchModal"
+      :department="selectedDept"
+      @close="closePatchModal"
+      @patch="handlePatch"
+    />
+  </div>
+</template>
+
+<script>
+import { useDepartmentStore } from '../stores/departmentStore'
+import DepartmentTable from '../components/DepartmentTable.vue'
+import DepartmentFormModal from '../components/DepartmentFormModal.vue'
+import DepartmentPatchModal from '../components/DepartmentPatchModal.vue'
+
+export default {
+  name: 'DepartmentsView',
+  components: {
+    DepartmentTable,
+    DepartmentFormModal,
+    DepartmentPatchModal
+  },
+  setup() {
+    const deptStore = useDepartmentStore()
+    return { deptStore }
+  },
+  data() {
+    return {
+      showFormModal: false,
+      showPatchModal: false,
+      selectedDept: null,
+      feedbackMessage: ''
+    }
+  },
+  async mounted() {
+    try {
+      await this.deptStore.getAll()
+    } catch (err) {
+      // handled in store
+    }
+  },
+  methods: {
+    showFeedback(msg) {
+      this.feedbackMessage = msg
+      setTimeout(() => {
+        if (this.feedbackMessage === msg) {
+          this.feedbackMessage = ''
+        }
+      }, 4000)
+    },
+    openCreateModal() {
+      this.selectedDept = null
+      this.showFormModal = true
+    },
+    openEditModal(dept) {
+      this.selectedDept = { ...dept }
+      this.showFormModal = true
+    },
+    closeFormModal() {
+      this.showFormModal = false
+      this.selectedDept = null
+    },
+    openPatchModal(dept) {
+      this.selectedDept = { ...dept }
+      this.showPatchModal = true
+    },
+    closePatchModal() {
+      this.showPatchModal = false
+      this.selectedDept = null
+    },
+    async handleSave({ data, isEdit }) {
+      try {
+        if (isEdit) {
+          await this.deptStore.update(data.id, data)
+          this.showFeedback(`Department "${data.name}" fully updated (PUT).`)
+        } else {
+          const res = await this.deptStore.create(data)
+          this.showFeedback(`Department "${res.name}" created (POST).`)
+        }
+        this.closeFormModal()
+      } catch (err) {
+        // error stored in store
+      }
+    },
+    async handlePatch({ id, patchData }) {
+      try {
+        await this.deptStore.patch(id, patchData)
+        this.showFeedback(`Department "${id}" partially updated (PATCH).`)
+        this.closePatchModal()
+      } catch (err) {
+        // error stored in store
+      }
+    },
+    async handleDelete(id) {
+      if (confirm(`Are you sure you want to delete department with ID: ${id}?`)) {
+        try {
+          await this.deptStore.remove(id)
+          this.showFeedback(`Department "${id}" deleted successfully.`)
+        } catch (err) {
+          // error stored in store
+        }
+      }
+    }
+  }
+}
+</script>

package/templates/vue-2model-crud-patch/src/views/EmployeesView.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="employees-view">
+    <div v-if="empStore.error" class="alert alert-danger">
+      {{ empStore.error }}
+    </div>
+
+    <div v-if="feedbackMessage" class="alert alert-info">
+      {{ feedbackMessage }}
+    </div>
+
+    <!-- Modular Child Component: EmployeeTable -->
+    <EmployeeTable
+      :employees="empStore.employees"
+      :departments="deptStore.departments"
+      :loading="empStore.loading"
+      @create="openCreateModal"
+      @edit="openEditModal"
+      @patch="openPatchModal"
+      @delete="handleDelete"
+    />
+
+    <!-- Modular Child Component: EmployeeFormModal (POST / PUT) -->
+    <EmployeeFormModal
+      :show="showFormModal"
+      :employee="selectedEmp"
+      :departments="deptStore.departments"
+      @close="closeFormModal"
+      @save="handleSave"
+    />
+
+    <!-- Modular Child Component: EmployeePatchModal (PATCH) -->
+    <EmployeePatchModal
+      :show="showPatchModal"
+      :employee="selectedEmp"
+      :departments="deptStore.departments"
+      @close="closePatchModal"
+      @patch="handlePatch"
+    />
+  </div>
+</template>
+
+<script>
+import { useEmployeeStore } from '../stores/employeeStore'
+import { useDepartmentStore } from '../stores/departmentStore'
+import EmployeeTable from '../components/EmployeeTable.vue'
+import EmployeeFormModal from '../components/EmployeeFormModal.vue'
+import EmployeePatchModal from '../components/EmployeePatchModal.vue'
+
+export default {
+  name: 'EmployeesView',
+  components: {
+    EmployeeTable,
+    EmployeeFormModal,
+    EmployeePatchModal
+  },
+  setup() {
+    const empStore = useEmployeeStore()
+    const deptStore = useDepartmentStore()
+    return { empStore, deptStore }
+  },
+  data() {
+    return {
+      showFormModal: false,
+      showPatchModal: false,
+      selectedEmp: null,
+      feedbackMessage: ''
+    }
+  },
+  async mounted() {
+    try {
+      if (this.deptStore.departments.length === 0) {
+        await this.deptStore.getAll()
+      }
+      await this.empStore.getAll()
+    } catch (err) {
+      // handled in store
+    }
+  },
+  methods: {
+    showFeedback(msg) {
+      this.feedbackMessage = msg
+      setTimeout(() => {
+        if (this.feedbackMessage === msg) {
+          this.feedbackMessage = ''
+        }
+      }, 4000)
+    },
+    openCreateModal() {
+      this.selectedEmp = null
+      this.showFormModal = true
+    },
+    openEditModal(emp) {
+      this.selectedEmp = { ...emp }
+      this.showFormModal = true
+    },
+    closeFormModal() {
+      this.showFormModal = false
+      this.selectedEmp = null
+    },
+    openPatchModal(emp) {
+      this.selectedEmp = { ...emp }
+      this.showPatchModal = true
+    },
+    closePatchModal() {
+      this.showPatchModal = false
+      this.selectedEmp = null
+    },
+    async handleSave({ data, isEdit }) {
+      try {
+        if (isEdit) {
+          await this.empStore.update(data.id, data)
+          this.showFeedback(`Employee "${data.name}" fully updated (PUT).`)
+        } else {
+          const res = await this.empStore.create(data)
+          this.showFeedback(`Employee "${res.name}" created (POST).`)
+        }
+        this.closeFormModal()
+      } catch (err) {
+        // error in store
+      }
+    },
+    async handlePatch({ id, patchData }) {
+      try {
+        await this.empStore.patch(id, patchData)
+        this.showFeedback(`Employee "${id}" partially updated (PATCH).`)
+        this.closePatchModal()
+      } catch (err) {
+        // error in store
+      }
+    },
+    async handleDelete(id) {
+      if (confirm(`Are you sure you want to delete employee with ID: ${id}?`)) {
+        try {
+          await this.empStore.remove(id)
+          this.showFeedback(`Employee "${id}" deleted successfully.`)
+        } catch (err) {
+          // error in store
+        }
+      }
+    }
+  }
+}
+</script>

package/templates/vue-2model-crud-patch/vite.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    port: 5173
+  }
+})