web: added ids to listviewelement

web/components.d.ts

@@ -5,14 +5,14 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
-declare module 'vue' {
+declare module "vue" {
   export interface GlobalComponents {
-    CategoryContainer: typeof import('./src/components/CategoryContainer.vue')['default']
+    CategoryContainer: typeof import("./src/components/CategoryContainer.vue")["default"];
-    Clipboard: typeof import('./src/components/Clipboard.vue')['default']
+    Clipboard: typeof import("./src/components/Clipboard.vue")["default"];
-    HeaderBar: typeof import('./src/components/HeaderBar.vue')['default']
+    HeaderBar: typeof import("./src/components/HeaderBar.vue")["default"];
-    ListViewElement: typeof import('./src/components/ListViewElement.vue')['default']
+    ListViewElement: typeof import("./src/components/ListViewElement.vue")["default"];
-    LoginPage: typeof import('./src/components/loginPage.vue')['default']
+    LoginPage: typeof import("./src/components/loginPage.vue")["default"];
-    MainPage: typeof import('./src/components/MainPage.vue')['default']
+    MainPage: typeof import("./src/components/MainPage.vue")["default"];
-    UsersDialog: typeof import('./src/components/NavBarIcons/UsersDialog.vue')['default']
+    UsersDialog: typeof import("./src/components/NavBarIcons/UsersDialog.vue")["default"];
   }
 }

web/src/components/CategoryContainer.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="root">
+  <div class="mt-3">
     <h2>{{ props.licenseGroupName }}:</h2>
     <li v-for="license in licenses" :key="license.id">
       <ListViewElement
+        :id="license.id"
         :licenseName="license.name"
         :licenseKey="license.key"
         :startDate="license.start ? new Date(license.start) : null"
@@ -31,10 +32,6 @@ const props = defineProps<{ licenseGroupName: string; licenses: License[] }>();
 </script>
 
 <style scoped>
-.root {
-  margin-top: 10px;
-}
-
 li {
   list-style-type: none;
 }

web/src/components/ListViewElement.vue

@@ -104,6 +104,7 @@ import {
 import { ref } from "vue";
 
 const props = defineProps<{
+  id: number;
   licenseName: string;
   licenseKey: string;
   startDate: Date | null;
@@ -111,9 +112,8 @@ const props = defineProps<{
   amount?: number;
   notes?: string;
 }>();
-//
+
 //  EDIT SECTION
-//
 
 const edit = ref(false);
 </script>

web/src/components/NavBarIcons/UsersDialog.vue

@@ -11,8 +11,16 @@
         <span>Add/Delete/Manage users who have access to this tool</span>
       </v-card-subtitle>
       <v-card-text>
-        <div>I am just a placeholder</div>
+        <v-data-table
+          :headers="headers"
+          :items="items"
+          :items-per-page="10"
+          item-key="name"
+          class="elevation-5"
+        ></v-data-table>
+        <v-divider class="border-opacity-50 mt-5" :thickness="2"></v-divider>
       </v-card-text>
+
       <v-card-actions>
         <v-spacer></v-spacer>
         <v-btn color="blue darken-1" @click="users = false">Close</v-btn>
@@ -22,9 +30,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
 import { Users } from "lucide-vue-next";
+import { defineComponent, ref, computed, watch } from "vue";
 
+// Data Table values
+const headers = ref([
+  { title: "Name", value: "name" },
+  { title: "Email", value: "email" },
+  { title: "Actions", value: "actions", sortable: false },
+]);
+
+const items = ref([
+  { name: "John Doe", email: "test@john.doe", actions: "Here CRUD" },
+]);
+
+// Dialog open state
 const users = ref(false);
 </script>