web: add init edit dialog

web/src/components/HeaderBar.vue

@@ -1,10 +1,11 @@
-  <template>
+<template>
   <div>
     <v-toolbar color="main" dark prominent>
       <img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" />
       <v-spacer></v-spacer>
-      <!-- Create, Delete, Edit -->
+      <!-- Create, Edit -->
       <div>
+        <!-- ADD SECTION -->
         <v-btn icon class="mr-3" @click="add = true">
           <Plus />
         </v-btn>
@@ -109,9 +110,39 @@
           </v-card>
         </v-dialog>
 
-        <v-btn icon class="mr-3">
+        <!-- EDIT SECTION -->
+        <v-btn icon class="mr-3" @click="edit = true">
           <Pencil />
         </v-btn>
+        <v-dialog v-model="edit" width="600" persistent>
+          <v-card max-width="600">
+            <v-form @submit.prevent="submit">
+              <v-card-title>
+                <span class="headline">Edit License</span>
+              </v-card-title>
+              <v-card-subtitle>
+                <span> Edit a License inside the Database</span>
+              </v-card-subtitle>
+              <v-card-text>
+                <!-- PLACEHOLDER FOR ELEMENTS -->
+              </v-card-text>
+              <v-card-actions>
+                <v-row>
+                  <v-col cols="10" align="right" no-gutters>
+                    <v-btn
+                      class="ms-auto"
+                      text="Cancel"
+                      @click="edit = false"
+                    ></v-btn>
+                  </v-col>
+                  <v-col>
+                    <v-btn class="ms-auto" text="Save" type="submit"></v-btn>
+                  </v-col>
+                </v-row>
+              </v-card-actions>
+            </v-form>
+          </v-card>
+        </v-dialog>
       </div>
 
       <!-- Search -->
@@ -150,13 +181,16 @@ import {
 function handlelogout() {
   console.log("logout");
   store.setToken(null);
-} 
+}
 
 async function submit(event: SubmitEventPromise) {
   const result = await event;
   console.log(result);
 }
 
+//
+//  ADD SECTION
+//
 const add = ref(false);
 // References for Add License Dialog
 const addLicenseName = ref<string>("");
@@ -179,6 +213,12 @@ const addStopDate = ref<Date | undefined>();
 const addStopDateDisplay = computed<string>(() =>
   addStopDate.value ? addStopDate.value.toLocaleDateString() : ""
 );
+
+//
+//  EDIT SECTION
+//
+
+const edit = ref(false);
 </script>
 
 <style scoped>