From 05b0155114173c255fd567f75bc25e9ff32f32c5 Mon Sep 17 00:00:00 2001
From: BurnLP2013 <burnlp2013@gmail.com>
Date: Thu, 11 Jul 2024 13:25:39 +0200
Subject: [PATCH] moved buttons from appbar to element

---
 web/src/components/HeaderBar.vue       | 35 ----------------------
 web/src/components/ListViewElement.vue | 40 +++++++++++++++++++-------
 2 files changed, 29 insertions(+), 46 deletions(-)

diff --git a/web/src/components/HeaderBar.vue b/web/src/components/HeaderBar.vue
index da95bd9..44fd68d 100644
--- a/web/src/components/HeaderBar.vue
+++ b/web/src/components/HeaderBar.vue
@@ -159,41 +159,6 @@
             </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>
       </div>
 
       <!-- Search -->
diff --git a/web/src/components/ListViewElement.vue b/web/src/components/ListViewElement.vue
index b81bb2a..0e56eaa 100644
--- a/web/src/components/ListViewElement.vue
+++ b/web/src/components/ListViewElement.vue
@@ -78,28 +78,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 +118,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 +129,12 @@ const props = defineProps({
   amount: Number,
   notes: String,
 });
+
+//
+//  EDIT SECTION
+//
+
+const edit = ref(false);
 </script>
 
 <style scoped>