web: added group add dialog

web/src/components/HeaderBar.vue

@@ -5,7 +5,54 @@
       <v-spacer></v-spacer>
       <!-- Create, Edit -->
       <div>
+        <!--               -->
+        <!-- GROUP SECTION -->
+        <!--               -->
+        <v-btn icon class="mr-3" @click="group = true">
+          <FolderPlus />
+        </v-btn>
+        <v-dialog v-model="group" width="600" persistent>
+          <v-card max-width="600">
+            <v-form @submit.prevent="submit">
+              <v-card-title>
+                <span class="headline">Add Group</span>
+              </v-card-title>
+              <v-card-subtitle>
+                <span> Add a Group to the Database</span>
+              </v-card-subtitle>
+              <v-card-text>
+                <div>
+                  <v-text-field
+                    label="Group Name *"
+                    v-model="groupLicenseName"
+                    variant="outlined"
+                    required
+                    clearable
+                    :rules="licenseGroupRules"
+                    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"
+                      @click="group = false"
+                    ></v-btn>
+                  </v-col>
+                  <v-col>
+                    <v-btn class="ms-auto" text="Add" type="submit"></v-btn>
+                  </v-col>
+                </v-row>
+              </v-card-actions>
+            </v-form>
+          </v-card>
+        </v-dialog>
+        <!--             -->
         <!-- ADD SECTION -->
+        <!--             -->
         <v-btn icon class="mr-3" @click="add = true">
           <Plus />
         </v-btn>
@@ -87,8 +134,9 @@
             </v-form>
           </v-card>
         </v-dialog>
-
+        <!--              -->
         <!-- EDIT SECTION -->
+        <!--              -->
         <v-btn icon class="mr-3" @click="edit = true">
           <Pencil />
         </v-btn>
@@ -147,14 +195,8 @@
 <script setup lang="ts">
 import { store } from "@/store";
 import { SubmitEventPromise } from "vuetify";
-import { computed, ref } from "vue";
+import { ref } from "vue";
-import {
+import { Plus, LogOut, Pencil, FolderPlus } from "lucide-vue-next";
-  Plus,
-  LogOut,
-  Pencil,
-  CalendarCheck,
-  CalendarX,
-} from "lucide-vue-next";
 
 function handlelogout() {
   console.log("logout");
@@ -165,7 +207,20 @@ async function submit(event: SubmitEventPromise) {
   const result = await event;
   console.log(result);
 }
+//
+// GROUP SECTION
+//
 
+const group = ref(false); // Dialog for Group
+const groupLicenseName = ref<string>("");
+
+const licenseGroupRules = [
+  (value: string) => {
+    if (value) return true;
+
+    return "YOU MUST ENTER (A GROUP NAME)";
+  },
+];
 //
 //  ADD SECTION
 //