From 080610cd7e0195fb098eded0e2613030b35dd5f0 Mon Sep 17 00:00:00 2001
From: TobiZog <developer@zoghaib.de>
Date: Wed, 25 Sep 2024 15:54:45 +0200
Subject: [PATCH] Data tables for brand and category added to admin pages

---
 software/src/components/navigationItems.vue   |  1 +
 software/src/pages/admin/brandsPage/index.vue | 32 +++++++++++++++++++
 .../src/pages/admin/categoriesPage/index.vue  | 31 +++++++++++++++++-
 software/src/router/admin.routes.ts           |  5 +++
 4 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 software/src/pages/admin/brandsPage/index.vue

diff --git a/software/src/components/navigationItems.vue b/software/src/components/navigationItems.vue
index fcb3e01..2db87d7 100644
--- a/software/src/components/navigationItems.vue
+++ b/software/src/components/navigationItems.vue
@@ -73,6 +73,7 @@ const navRail = defineModel("navRail", { type: Boolean })
 
       <v-list-item :title="$t('menu.admin.dashboard')" prepend-icon="mdi-view-dashboard" to="/admin/dashboard" link />
       <v-list-item :title="$t('menu.admin.categories')" prepend-icon="mdi-label" to="/admin/categories" link />
+      <v-list-item :title="$t('brand', 2)" prepend-icon="mdi-factory" to="/admin/brands" link />
       <v-list-item :title="$t('menu.admin.products')" prepend-icon="mdi-store-cog" to="/admin/products" link />
       <v-list-item :title="$t('menu.admin.accounts')" prepend-icon="mdi-account-multiple" to="/admin/accounts" link />
     </div>
diff --git a/software/src/pages/admin/brandsPage/index.vue b/software/src/pages/admin/brandsPage/index.vue
new file mode 100644
index 0000000..c045fd4
--- /dev/null
+++ b/software/src/pages/admin/brandsPage/index.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import cardView from '@/components/cardView.vue';
+import { useProductStore } from '@/data/stores/productStore';
+
+const productStore = useProductStore()
+
+const headers = [
+  { title: "Name", value: "name" },
+  { title: "Edit", value: "edit" },
+]
+</script>
+
+<template>
+  <v-container max-width="800">
+    <v-row>
+      <v-col>
+        <card-view
+          :title="$t('brand', 2)"
+          icon="mdi-label"
+          :subtitle="productStore.brands.length + ' ' + $t('brand', productStore.brands.length)"
+        >
+          <v-data-table
+            :items="productStore.brands"
+            :headers="headers"
+          >
+          </v-data-table>
+            <!-- todo: Edit/Delete -->
+        </card-view>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
\ No newline at end of file
diff --git a/software/src/pages/admin/categoriesPage/index.vue b/software/src/pages/admin/categoriesPage/index.vue
index 227fe68..67a1d5e 100644
--- a/software/src/pages/admin/categoriesPage/index.vue
+++ b/software/src/pages/admin/categoriesPage/index.vue
@@ -1,6 +1,35 @@
 <script setup lang="ts">
+import cardView from '@/components/cardView.vue';
+import { useProductStore } from '@/data/stores/productStore';
+
+const productStore = useProductStore()
+
+const headers = [
+  { title: "Name", value: "name" },
+  { title: "Icon", value: "icon" },
+  { title: "Edit", value: "edit" },
+]
 </script>
 
 <template>
-  Categories Page
+  <v-container max-width="800">
+    <v-row>
+      <v-col>
+        <card-view
+          :title="$t('category', 2)"
+          icon="mdi-label"
+          :subtitle="productStore.categories.length + ' ' + $t('category', productStore.categories.length)"
+        >
+          <v-data-table
+            :items="productStore.categories"
+            :headers="headers"
+          >
+            <template v-slot:item.icon="{ item }">
+              <v-icon :icon="item.icon" />
+            </template>
+          </v-data-table>
+        </card-view>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
\ No newline at end of file
diff --git a/software/src/router/admin.routes.ts b/software/src/router/admin.routes.ts
index a96d062..44ff2ce 100644
--- a/software/src/router/admin.routes.ts
+++ b/software/src/router/admin.routes.ts
@@ -2,6 +2,7 @@ import DashboardPage from "@/pages/admin/dashboardPage/index.vue"
 import CategoriesPage from "@/pages/admin/categoriesPage/index.vue"
 import AccountsPage from "@/pages/admin/accountsPage/index.vue"
 import ProductsPage from "@/pages/admin/productsPage/index.vue"
+import BrandsPage from "@/pages/admin/brandsPage/index.vue"
 
 export default [
   {
@@ -19,5 +20,9 @@ export default [
   {
     path: '/admin/products',
     component: ProductsPage
+  },
+  {
+    path: '/admin/brands',
+    component: BrandsPage
   }
 ]
\ No newline at end of file