From 65b77cff85835ff70219a52d66aa171324073802 Mon Sep 17 00:00:00 2001
From: BurnLP2013 <burnlp2013@gmail.com>
Date: Thu, 11 Jul 2024 12:41:17 +0200
Subject: [PATCH] Updated License Note field with buttons

---
 web/src/components/HeaderBar.vue       | 43 ++---------------------
 web/src/components/ListViewElement.vue | 48 +++++++++++++++++++-------
 2 files changed, 38 insertions(+), 53 deletions(-)

diff --git a/web/src/components/HeaderBar.vue b/web/src/components/HeaderBar.vue
index 1ff12cd..d24018c 100644
--- a/web/src/components/HeaderBar.vue
+++ b/web/src/components/HeaderBar.vue
@@ -133,42 +133,7 @@
               </v-card-actions>
             </v-form>
           </v-card>
-        </v-dialog>
-        <!--              -->
-        <!-- 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>
+        </v-dialog> 
       </div>
 
       <!-- Search -->
@@ -196,7 +161,7 @@
 import { store } from "@/store";
 import { SubmitEventPromise } from "vuetify";
 import { ref } from "vue";
-import { Plus, LogOut, Pencil, FolderPlus } from "lucide-vue-next";
+import { Plus, LogOut, FolderPlus } from "lucide-vue-next";
 
 function handlelogout() {
   store.setToken(null);
@@ -240,11 +205,7 @@ const addNotes = ref<string | undefined>("");
 const addStartDate = ref<Date | undefined>();
 const addStopDate = ref<Date | undefined>();
 
-//
-//  EDIT SECTION
-//
 
-const edit = ref(false);
 </script>
 
 <style scoped>
diff --git a/web/src/components/ListViewElement.vue b/web/src/components/ListViewElement.vue
index b81bb2a..fa1441e 100644
--- a/web/src/components/ListViewElement.vue
+++ b/web/src/components/ListViewElement.vue
@@ -4,7 +4,6 @@
     width="96vw"
     rounded="lg"
     class="mt-3"
-    style="border-left: 0.5rem outset #0fa4af"
   >
     <v-expansion-panels>
       <v-expansion-panel>
@@ -78,28 +77,39 @@
           </div>
         </v-expansion-panel-title>
         <v-expansion-panel-text>
+          Notes:
             <v-row
-              class="flex-nowrap bg-surface-variant"
+              class="flex-nowrap"
               no-gutters
             >
               <v-col
-                class="flex-grow-0 flex-shrink-0"
-                cols="7"
+                class="flex-grow-1 flex-shrink-0 overflow-x-auto border-e-md"
+                cols="10"
               >
-                  Notes: {{ props.notes }}
+                {{ props.notes }}
+         
               </v-col>
 
-        
               <v-col
-                class="flex-grow-0 flex-shrink-1"
-                cols="5"
+                class="flex-grow-0 flex-shrink-1 overflow-x-auto"
+                cols="2"
+                align="end"
               >
-                  I'm 5 column wide and I shrink if there's not enough space
+              <!--              -->
+              <!-- EDIT SECTION -->
+              <!--              -->
+              <v-btn class="mr-3" flat size="small">
+                <Pencil />
+              </v-btn>
+              <!--                 -->
+              <!--   DELETE BTN    -->
+              <!--                 -->
+              <v-btn class="mr-3" flat size="small" color="red" variant="text">
+                <Trash />
+              </v-btn>
               </v-col>
             </v-row>
 
-          
-
         </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
@@ -107,7 +117,8 @@
 </template>
 
 <script setup lang="ts">
-import { Infinity, KeyRound, CalendarCheck, CalendarX } from "lucide-vue-next";
+import { Infinity, KeyRound, CalendarCheck, CalendarX, Pencil, Trash } from "lucide-vue-next";
+import { ref } from "vue";
 
 const props = defineProps({
   licenseName: String,
@@ -117,6 +128,19 @@ const props = defineProps({
   amount: Number,
   notes: String,
 });
+
+
+//
+//  EDIT SECTION
+//
+
+const edit = ref(false);
+
+
+
+
+
+
 </script>
 
 <style scoped>