web: create user manage dialog

web/components.d.ts

@@ -13,5 +13,6 @@ declare module 'vue' {
     ListViewElement: typeof import('./src/components/ListViewElement.vue')['default']
     LoginPage: typeof import('./src/components/loginPage.vue')['default']
     MainPage: typeof import('./src/components/MainPage.vue')['default']
+    UsersDialog: typeof import('./src/components/NavBarIcons/UsersDialog.vue')['default']
   }
 }

web/src/components/HeaderBar.vue

@@ -3,8 +3,10 @@
     <v-toolbar color="main" dark prominent>
       <img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" />
       <v-spacer></v-spacer>
-      <!-- Create, Edit -->
+      <!-- Users, Create, Edit -->
       <div>
+        <!-- USER MANAGEMENT -->
+        <UsersDialog />
         <!--               -->
         <!-- GROUP SECTION -->
         <!--               -->
@@ -40,10 +42,16 @@
                       class="ms-auto"
                       text="Cancel"
                       @click="group = false"
+                      color="blue darken-1"
                     ></v-btn>
                   </v-col>
                   <v-col>
-                    <v-btn class="ms-auto" text="Add" type="submit"></v-btn>
+                    <v-btn
+                      class="ms-auto"
+                      text="Add"
+                      type="submit"
+                      color="blue darken-1"
+                    ></v-btn>
                   </v-col>
                 </v-row>
               </v-card-actions>
@@ -125,6 +133,7 @@
                   </div>
                   <v-number-input
                     label="Amount (optional)"
+                    users
                     variant="outlined"
                     clearable
                     :min="0"
@@ -148,11 +157,17 @@
                     <v-btn
                       class="ms-auto"
                       text="Cancel"
+                      color="blue darken-1"
                       @click="add = false"
                     ></v-btn>
                   </v-col>
                   <v-col>
-                    <v-btn class="ms-auto" text="Add" type="submit"></v-btn>
+                    <v-btn
+                      class="ms-auto"
+                      text="Add"
+                      type="submit"
+                      color="blue darken-1"
+                    ></v-btn>
                   </v-col>
                 </v-row>
               </v-card-actions>

web/src/components/ListViewElement.vue

@@ -24,7 +24,7 @@
               {{
                 props.startDate
                   ? props.startDate.toLocaleDateString()
-                  : "Verfügbar"
+                  : "Indefinitely"
               }}
             </span>
           </div>
@@ -38,7 +38,7 @@
               {{
                 props.endDate
                   ? props.endDate.toLocaleDateString()
-                  : "Ewig Verfügbar"
+                  : "Indefinitely"
               }}
             </span>
           </div>
@@ -100,7 +100,6 @@ import {
   CalendarX,
   Pencil,
   Trash,
-  Power,
 } from "lucide-vue-next";
 import { ref } from "vue";
 

web/src/components/NavBarIcons/UsersDialog.vue

@@ -0,0 +1,31 @@
+<template>
+  <v-btn icon class="mr-3" @click="users = true">
+    <Users />
+  </v-btn>
+  <v-dialog v-model="users" width="1200" persistent>
+    <v-card max-width="1200">
+      <v-card-title>
+        <span class="headline">User Management Menu</span>
+      </v-card-title>
+      <v-card-subtitle>
+        <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-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="blue darken-1" @click="users = false">Close</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { Users } from "lucide-vue-next";
+
+const users = ref(false);
+</script>
+
+<style scoped></style>

web/src/types.ts

@@ -13,6 +13,13 @@ export interface License {
   amount?: number;
 }
 
-export type CreateLicenseDto = Omit<License, "id"> & { group_id: string };
+export interface CreateLicenseDto {
+  name: string;
+  start: Date | null;
+  end: Date | null;
+  key: string;
+  amount?: number;
+  group_id: string;
+}
 
 export type CreateGroupDto = Omit<LicenseGroup, "id" | "licenses">;

web/tsconfig.json

@@ -24,7 +24,8 @@
   },
   "include": [
     "src/**/*",
-    "src/**/*.vue"
+    "src/**/*.vue",
+    "src/**/*/*.vue"
   ],
   "exclude": ["dist", "node_modules", "cypress"],
   "references": [{ "path": "./tsconfig.node.json" }],