feature: Packages of asset page

frontend/src/components/UIElements/Header.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 interface HeaderProps {
-  title: string
-  description: string
+  title?: string
+  description?: string
 }
 
 const props = defineProps<HeaderProps>()
@@ -13,7 +13,9 @@ const props = defineProps<HeaderProps>()
       class="mb-1"
       style="font-weight: 700; letter-spacing: -0.025em; font-size: 1.5rem"
     >
-      {{ props.title }}
+      <slot name="header">
+        {{ props.title }}
+      </slot>
     </n-h2>
     <n-text depth="3">{{ props.description }}</n-text>
   </div>

frontend/src/localization/en.json

@@ -43,6 +43,15 @@
       "messages": {
         "error": "An error occurred while fetching assets."
       }
+    },
+    "package": {
+      "title": "Packages",
+      "description": "You can view your asset's packages here.",
+      "fetch": {
+        "messages": {
+          "error": "An error occurred while fetching asset packages."
+        }
+      }
     }
   },
   "profile": {
@@ -139,6 +148,8 @@
     "description": "You can view your packages and their machine counts here. You can also create PDF/CSV reports.",
     "table": {
       "name": "Name",
+      "vendor": "Vendor",
+      "version": "Version",
       "count": "Machine Count"
     },
     "fetch": {

frontend/src/localization/tr.json

@@ -43,6 +43,15 @@
       "messages": {
         "error": "Varlıklar getirilirken bir hata oluştu."
       }
+    },
+    "package": {
+      "title": "Paketler",
+      "description": "Burada varlığınızın paketlerini görüntüleyebilirsiniz.",
+      "fetch": {
+        "messages": {
+          "error": "Varlığın paketleri getirilirken bir hata oluştu."
+        }
+      }
     }
   },
   "profile": {
@@ -139,6 +148,8 @@
     "description": "Paketlerinizi ve yüklü oldukları makine sayılarını görüntüleyebilirsiniz. Ayrıca PDF/CSV raporlar oluşturabilirsiniz.",
     "table": {
       "name": "Adı",
+      "vendor": "Üretici",
+      "version": "Versiyon",
       "count": "Makine Sayısı"
     },
     "fetch": {

frontend/src/router/index.ts

@@ -8,6 +8,11 @@ const router = createRouter({
       name: "assets",
       component: () => import("@/views/pages/Assets.vue"),
     },
+    {
+      path: "/assets/:id",
+      name: "asset",
+      component: () => import("@/views/pages/AssetPackages.vue"),
+    },
     {
       path: "/packages",
       name: "packages",

frontend/src/stores/asset.ts

@@ -4,15 +4,20 @@ import http from "@/utils/http-common"
 import type { IAsset } from "@/models/Asset"
 import type { IFilter } from "@/models/Filter"
 import type { IPaginator } from "@/models/Paginator"
+import type { IPackage } from "@/models/Package"
 
 export const useAssetStore = defineStore({
   id: "asset",
   state: () => ({
     filter: {} as IFilter,
     assets: {} as IPaginator<IAsset>,
+
+    pkg_filter: {} as IFilter,
+    packages: {} as IPaginator<IPackage>,
   }),
   getters: {
     get: (state) => state.assets,
+    getPackages: (state) => state.packages,
   },
   actions: {
     async fetch(payload: IFilter = {} as IFilter) {
@@ -36,5 +41,26 @@ export const useAssetStore = defineStore({
         }
       })
     },
+    async fetchPackages(payload: IFilter = {} as IFilter, id: string) {
+      let q = payload
+      if (Object.keys(payload).length < 1) {
+        q = this.pkg_filter
+      } else {
+        this.pkg_filter = q
+      }
+      const query = new URLSearchParams(q as Record<string, string>).toString()
+
+      return http.get(`assets/packages/${id}?${query}`).then((res) => {
+        if (res.status == 200) {
+          this.packages = res.data
+        } else {
+          window.$notification.error({
+            title: i18n.t("common.error"),
+            content: i18n.t("asset.package.fetch.messages.error"),
+            duration: 5000,
+          })
+        }
+      })
+    },
   },
 })

frontend/src/views/pages/AssetPackages.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { reactive } from "vue"
+import { useI18n } from "vue-i18n"
+import { useRoute } from "vue-router"
+import AsyncStore from "@/components/Table/AsyncStore.vue"
+import Header from "@/components/UIElements/Header.vue"
+import type { IColumn } from "@/models/Column"
+import { useAssetStore } from "@/stores/asset"
+
+const { t } = useI18n()
+const store = useAssetStore()
+const route = useRoute()
+
+const columns: IColumn[] = reactive([
+  {
+    title: t("package.table.name"),
+    key: "name",
+    filterable: true,
+    sorter: "default",
+    resizable: true,
+    ellipsis: {
+      tooltip: true,
+    },
+  },
+  {
+    title: t("package.table.vendor"),
+    key: "vendor",
+    filterable: true,
+    sorter: "default",
+    resizable: true,
+    ellipsis: {
+      tooltip: true,
+    },
+  },
+  {
+    title: t("package.table.version"),
+    key: "version",
+    filterable: true,
+    sorter: "default",
+    resizable: true,
+    ellipsis: {
+      tooltip: true,
+    },
+  },
+])
+</script>
+
+<template>
+  <Header :description="t('asset.package.description')">
+    <template #header>
+      <n-space>
+        <n-button size="huge" text @click="$router.back()">
+          <i class="fas fa-arrow-left mr-2" />
+        </n-button>
+        {{ t("asset.package.title") }}
+      </n-space>
+    </template>
+  </Header>
+
+  <AsyncStore
+    :dispatcher="store.fetchPackages"
+    :data="store.getPackages"
+    :columns="columns"
+    :args="[route.params.id]"
+  />
+</template>

frontend/src/views/pages/Assets.vue

@@ -6,6 +6,8 @@ import type { IColumn } from "@/models/Column"
 import { useAssetStore } from "@/stores/asset"
 import Header from "@/components/UIElements/Header.vue"
 import type { IAsset } from "@/models/Asset"
+import { NButton } from "naive-ui"
+import router from "@/router"
 
 const { t } = useI18n()
 const store = useAssetStore()
@@ -21,7 +23,22 @@ const columns: IColumn[] = reactive([
       tooltip: true,
     },
     render: (row: IAsset) => {
-      return [h("i", { class: "fab fa-windows mr-2" }), row.hostname]
+      return [
+        h("i", { class: "fab fa-windows mr-2" }),
+        row.hostname,
+        h(
+          NButton,
+          {
+            text: true,
+            size: "small",
+            type: "primary",
+            class: "ml-2",
+            onClick: () =>
+              router.push({ name: "asset", params: { id: row.id } }),
+          },
+          { default: () => h("i", { class: "fas fa-link" }) },
+        ),
+      ]
     },
   },
   {