web: refactor listview

Co-authored-by: wollenberg.niklas@gmail.com <wollenberg.niklas@gmail.com>

web/src/components/CategoryContainer.vue

@@ -6,9 +6,17 @@
       licenseKey="321z8321789"
       startDate="12.12.2020"
       endDate="13.12.2021"
-      :amount=1
+      :amount=undefined
       notes="No notes"
     />
+    <ListViewElement
+    licenseName="Mockup 2"
+    licenseKey="XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX"
+    startDate=""
+    endDate=""
+    :amount=1
+    notes="No notes"
+    />
     <!-- <ListViewElement
       licenseName="Jetbrains Ultimate 2024.2.1"
       key=""

web/src/components/Clipboard.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+
+const source = ref('Hello')
+const { text, copy, copied, isSupported } = useClipboard({ source })
+</script>
+
+<template>
+  <div v-if="isSupported">
+    <button @click="copy(source)">
+      <!-- by default, `copied` will be reset in 1.5s -->
+      <span v-if="!copied">Copy</span>
+      <span v-else>Copied!</span>
+    </button>
+    <p>Current copied: <code>{{ text || 'none' }}</code></p>
+  </div>
+  <p v-else>
+    Your browser does not support Clipboard API
+  </p>
+</template>

web/src/components/HeaderBar.vue

@@ -6,20 +6,21 @@
       prominent
     >
      <img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" />
-
      <v-spacer></v-spacer>
      <!-- Create, Delete, Edit -->
      <div>
+       <v-btn icon class="mr-3">
+         <Plus />
+       </v-btn>
+       <v-btn icon class="mr-3">
+         <Pencil />
+        </v-btn>
       <v-btn icon class="mr-3">
-        <Plus />
-      </v-btn>
-      <v-btn icon class="mr-3">
-        <Trash2 />
-      </v-btn>
-      <v-btn icon class="mr-3">
-        <Pencil />
+         <Trash2 />
       </v-btn>
      </div>
+
+     <!-- Search -->
      <v-text-field
           class="compact-form mr-2"
           label="Search"
@@ -30,7 +31,9 @@
           single-line
           clearable
           rounded="pill"
-        ></v-text-field>
+      ></v-text-field>
+
+      <!-- Logout -->
       <v-btn icon variant="outlined" @click="handlelogout">
         <LogOut />
       </v-btn>
@@ -40,9 +43,9 @@
 </template>
 
 <script setup lang="ts">
-import { LogOut } from 'lucide-vue-next';
 import { store } from '@/store';
 import { Plus } from 'lucide-vue-next';
+import { LogOut } from 'lucide-vue-next';
 import { Trash2 } from 'lucide-vue-next';
 import { Pencil } from 'lucide-vue-next';
 

web/src/components/ListViewElement.vue

@@ -3,36 +3,59 @@
   elevation="4"
   width="93vw"
   rounded="lg"
+  class="mt-3"
   >
-  <div class="values ml-2 py-3">
-    <div class="mr-3">
-      {{ props.licenseName }}
-    </div>
-    <div class="mr-3">
-      <span style="display: flex;">
-        <KeyRound class="transform mr-1"/>
-        {{ props.licenseKey }}
-      </span>
-    </div>
-    <div class="mr-3">
-      <span style="display: flex;">
-        <Check class="mr-1"/>
-        {{ props.startDate }}
-      </span>
-    </div>
-    <div class="mr-3">
-      <span style="display: flex;">
-        <Skull class="mr-1"/>
-        {{ props.endDate }}
-      </span>
-    </div>
-    <div class="mr-3">
-      <span style="display: flex;">
-        <img src="../assets/doublekey.svg" alt="logo" class="logo mr-1" width="24" />
-        {{ props.amount }}
-      </span>
-    </div>
-  </div>
+    <v-expansion-panels>
+      <v-expansion-panel>
+        <v-expansion-panel-title>
+            <div class="mr-3">
+              {{ props.licenseName }}
+            </div>
+
+            <div
+              class="mr-3 d-flex align-self-center" style="align-items:center">
+              <KeyRound class="mr-1"/>
+                {{ props.licenseKey }}
+            </div>
+
+            <div class="mr-3 d-flex align-self-center" style="align-items:center">
+              <Check class="mr-1"/>
+                <span v-if="props.startDate == null || props.startDate == undefined || props.startDate.length == 0">
+                  Verfügbar
+                </span>
+                <span v-else>
+                  {{ props.startDate }}
+                </span>
+            </div>
+
+            <div class="mr-3 d-flex align-self-center" style="align-items:center">
+              <Skull class="mr-1"/>
+                <span v-if="props.endDate == null || props.endDate == undefined || props.endDate.length == 0">
+                  Ewig Verfügbar
+                </span>
+                <span v-else>
+                  {{ props.endDate }}
+                </span>
+            </div>
+
+            <div class="mr-3">
+              <span style="display: flex;" >
+                <img src="../assets/doublekey.svg" alt="logo" class="logo mr-1" width="24" />
+                  <span v-if="props.amount == null || props.amount == undefined">
+                    <Infinity />
+                  </span>
+                  <span v-else>
+                    {{ props.amount }}
+                  </span>
+              </span>
+            </div>
+
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          Notes: {{ props.notes }}
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
   </v-sheet>
 
 </template>
@@ -41,6 +64,7 @@
   import { KeyRound } from 'lucide-vue-next';
   import { Check } from 'lucide-vue-next';
   import { Skull } from 'lucide-vue-next';
+  import { Infinity } from 'lucide-vue-next';
 
   const props = defineProps({
     licenseName: String,
@@ -59,9 +83,4 @@
     align-items: center;
   }
 
-  transform {
-    transform: scale(0.85);
-    transform-origin: left;
-  }
-
 </style>