web: implemented dönerteller

web/components.d.ts

@@ -9,13 +9,15 @@ declare module 'vue' {
   export interface GlobalComponents {
     CategoryContainer: typeof import('./src/components/CategoryContainer.vue')['default']
     Clipboard: typeof import('./src/components/Clipboard.vue')['default']
-    copy: typeof import('./src/components/UpdateDialog copy.vue')['default']
+    copy: typeof import("./src/components/UpdateDialog copy.vue")["default"]
     DeleteDialog: typeof import('./src/components/DeleteDialog.vue')['default']
     HeaderBar: typeof import('./src/components/HeaderBar.vue')['default']
     ListViewElement: typeof import('./src/components/ListViewElement.vue')['default']
     LoginPage: typeof import('./src/components/loginPage.vue')['default']
     MainPage: typeof import('./src/components/MainPage.vue')['default']
     UpdateDialog: typeof import('./src/components/UpdateDialog.vue')['default']
+    UsersDeleteActions: typeof import('./src/components/NavBarIcons/UsersDeleteActions.vue')['default']
     UsersDialog: typeof import('./src/components/NavBarIcons/UsersDialog.vue')['default']
+    UsersEditActions: typeof import('./src/components/NavBarIcons/UsersEditActions.vue')['default']
   }
 }

web/src/components/HeaderBar.vue

@@ -3,7 +3,7 @@
     <v-toolbar color="main" dark prominent>
       <img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" />
       <v-spacer></v-spacer>
-      <!-- Users, Create, Edit -->
+      <!-- Users, Groups, Licenses -->
       <div>
         <!-- USER MANAGEMENT -->
         <UsersDialog />

web/src/components/NavBarIcons/UsersDeleteActions.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-icon size="small" @click="deleteDialog = true"> mdi-delete </v-icon>
+  <v-dialog v-model="deleteDialog" width="600" persistent>
+    <v-card max-width="600">
+      <v-card-title>
+        <span class="headline">Delete License</span>
+      </v-card-title>
+      <v-card-subtitle>
+        <span>Delete a License inside the database</span>
+      </v-card-subtitle>
+      <v-card-text>
+        <h4>This action is irreversible!</h4>
+      </v-card-text>
+      <v-card-actions>
+        <v-row>
+          <v-col cols="8" align="right" no-gutters>
+            <v-btn
+              class="ms-auto"
+              text="Cancel"
+              color="blue darken-1"
+              @click="deleteDialog = false"
+            ></v-btn>
+          </v-col>
+          <v-col>
+            <v-btn
+              class="ms-auto"
+              text="Confirm Delete"
+              type="submit"
+              color="red darken-1"
+            ></v-btn>
+          </v-col>
+        </v-row>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const deleteDialog = ref(false);
+</script>
+
+<style scoped></style>

web/src/components/NavBarIcons/UsersDialog.vue

@@ -17,7 +17,12 @@
           :items-per-page="10"
           item-key="name"
           class="elevation-5"
-        ></v-data-table>
+        >
+          <template v-slot:item.actions="{ item }">
+            <UsersEditAction />
+            <UsersDeleteAction />
+          </template>
+        </v-data-table>
         <v-divider class="border-opacity-50 mt-5" :thickness="2"></v-divider>
       </v-card-text>
 
@@ -30,6 +35,8 @@
 </template>
 
 <script setup lang="ts">
+import UsersDeleteAction from "./UsersDeleteActions.vue";
+import UsersEditAction from "./UsersEditActions.vue";
 import { Users } from "lucide-vue-next";
 import { defineComponent, ref, computed, watch } from "vue";
 
@@ -41,7 +48,7 @@ const headers = ref([
 ]);
 
 const items = ref([
-  { name: "John Doe", email: "test@john.doe", actions: "Here CRUD" },
+  { name: "John Doe", email: "test@john.doe", action: "Here CRUD" },
 ]);
 
 // Dialog open state

web/src/components/NavBarIcons/UsersEditActions.vue

@@ -0,0 +1,112 @@
+<template>
+  <v-icon class="me-2" size="small" @click="edit = true">mdi-pencil</v-icon>
+  <v-dialog v-model="edit" width="600" persistent>
+    <v-card max-width="600">
+      <v-form @submit.prevent="submitGroup">
+        <v-card-title>
+          <span class="headline">Edit User</span>
+        </v-card-title>
+        <v-card-subtitle>
+          <span>Edit a User inside the database</span>
+        </v-card-subtitle>
+        <v-card-text>
+          <div>
+            <v-text-field
+              label="User Name *"
+              v-model="editUserName"
+              variant="outlined"
+              required
+              clearable
+              :rules="editUserNameRules"
+              class="mb-3"
+            ></v-text-field>
+            <v-text-field
+              label="User Email *"
+              v-model="editUserEmail"
+              variant="outlined"
+              required
+              clearable
+              :rules="editUserEmailRules"
+              class="mb-3"
+            ></v-text-field>
+          </div>
+        </v-card-text>
+        <v-card-actions>
+          <v-row>
+            <v-col cols="10" align="right" no-gutters>
+              <v-btn
+                class="ms-auto"
+                text="Cancel"
+                color="blue darken-1"
+                @click="edit = false"
+              ></v-btn>
+            </v-col>
+            <v-col>
+              <v-btn
+                class="ms-auto"
+                text="Update"
+                type="submit"
+                color="blue darken-1"
+              ></v-btn>
+            </v-col>
+          </v-row>
+        </v-card-actions>
+      </v-form>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { SubmitEventPromise } from "vuetify";
+import { axiosInstance } from "@/client";
+import { useMutation, useQueryClient } from "@tanstack/vue-query";
+import { CreateLicenseDto } from "@/types";
+
+const queryClient = useQueryClient();
+
+const editUserNameRules = [
+  (value: string) => {
+    if (value) return true;
+
+    return "YOU MUST ENTER (A USER NAME)";
+  },
+];
+
+const editUserEmailRules = [
+  (value: string) => {
+    if (value) return true;
+
+    return "YOU MUST ENTER (A EMAIL NAME)";
+  },
+];
+
+async function submitGroup(event: SubmitEventPromise) {
+  const result = await event;
+  if (result.valid) {
+    const userData = {
+      name: editUserName.value,
+    };
+    console.log(userData);
+    userMutate(userData);
+  } else {
+    console.log("Invalid");
+  }
+}
+
+const { mutate: userMutate } = useMutation({
+  mutationFn: async (newLicense: CreateLicenseDto) => {
+    await axiosInstance.post("/licenses", newLicense);
+  },
+  onSuccess: () => {
+    queryClient.invalidateQueries({ queryKey: ["licenses"] });
+    edit.value = false;
+  },
+});
+
+const editUserName = ref("");
+const editUserEmail = ref("");
+const edit = ref(false);
+</script>
+
+<style scoped></style>

web/src/types.ts

@@ -25,6 +25,14 @@ export interface CreateLicenseDto {
   note?: string;
 }
 
+export interface UserDto {
+  id: string;
+  name: string;
+  email: string;
+}
+
 export type CreateGroupDto = Omit<LicenseGroup, "id" | "licenses">;
 
 export type UpdateLicenseDto = Omit<License, "id">;
+
+export type UpdateUserDto = Omit<LicenseGroup, "id">;