web: refactor listview

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

web/components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     CategoryContainer: typeof import('./src/components/CategoryContainer.vue')['default']
+    Clipboard: typeof import('./src/components/Clipboard.vue')['default']
     HeaderBar: typeof import('./src/components/HeaderBar.vue')['default']
     ListViewElement: typeof import('./src/components/ListViewElement.vue')['default']
     LoginPage: typeof import('./src/components/loginPage.vue')['default']

web/package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@mdi/font": "6.2.95",
+    "@vueuse/core": "^10.11.0",
     "axios": "^1.7.2",
     "lucide-vue-next": "^0.402.0",
     "roboto-fontface": "*",

web/pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@mdi/font':
         specifier: 6.2.95
         version: 6.2.95
+      '@vueuse/core':
+        specifier: ^10.11.0
+        version: 10.11.0(vue@3.4.31(typescript@5.5.3))
       axios:
         specifier: ^1.7.2
         version: 1.7.2
@@ -328,6 +331,9 @@ packages:
   '@types/node@20.14.9':
     resolution: {integrity: sha512-06OCtnTXtWOZBJlRApleWndH4JsRVs1pDCc8dLSQp+7PpUpX3ePdHyeNSFTeSe7FtKyQkrlPvHwJOW3SLd8Oyg==}
 
+  '@types/web-bluetooth@0.0.20':
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+
   '@vitejs/plugin-vue@5.0.5':
     resolution: {integrity: sha512-LOjm7XeIimLBZyzinBQ6OSm3UBCNVCpLkxGC0oWmm2YPzVZoxMsdvNVimLTBzpAnR9hl/yn1SHGuRfe6/Td9rQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -387,6 +393,15 @@ packages:
       vue: ^3.0.0
       vuetify: ^3.0.0
 
+  '@vueuse/core@10.11.0':
+    resolution: {integrity: sha512-x3sD4Mkm7PJ+pcq3HX8PLPBadXCAlSDR/waK87dz0gQE+qJnaaFhc/dZVfJz+IUYzTMVGum2QlR7ImiJQN4s6g==}
+
+  '@vueuse/metadata@10.11.0':
+    resolution: {integrity: sha512-kQX7l6l8dVWNqlqyN3ePW3KmjCQO3ZMgXuBMddIu83CmucrsBfXlH+JoviYyRBws/yLTQO8g3Pbw+bdIoVm4oQ==}
+
+  '@vueuse/shared@10.11.0':
+    resolution: {integrity: sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==}
+
   acorn@8.12.1:
     resolution: {integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==}
     engines: {node: '>=0.4.0'}
@@ -721,6 +736,17 @@ packages:
   vscode-uri@3.0.8:
     resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
 
+  vue-demi@0.14.8:
+    resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   vue-template-compiler@2.7.16:
     resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
 
@@ -929,6 +955,8 @@ snapshots:
     dependencies:
       undici-types: 5.26.5
 
+  '@types/web-bluetooth@0.0.20': {}
+
   '@vitejs/plugin-vue@5.0.5(vite@5.3.3(@types/node@20.14.9)(sass@1.77.6))(vue@3.4.31(typescript@5.5.3))':
     dependencies:
       vite: 5.3.3(@types/node@20.14.9)(sass@1.77.6)
@@ -1019,6 +1047,25 @@ snapshots:
       vue: 3.4.31(typescript@5.5.3)
       vuetify: 3.6.11(typescript@5.5.3)(vite-plugin-vuetify@2.0.3)(vue@3.4.31(typescript@5.5.3))
 
+  '@vueuse/core@10.11.0(vue@3.4.31(typescript@5.5.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.0
+      '@vueuse/shared': 10.11.0(vue@3.4.31(typescript@5.5.3))
+      vue-demi: 0.14.8(vue@3.4.31(typescript@5.5.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/metadata@10.11.0': {}
+
+  '@vueuse/shared@10.11.0(vue@3.4.31(typescript@5.5.3))':
+    dependencies:
+      vue-demi: 0.14.8(vue@3.4.31(typescript@5.5.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   acorn@8.12.1: {}
 
   anymatch@3.1.3:
@@ -1337,6 +1384,10 @@ snapshots:
 
   vscode-uri@3.0.8: {}
 
+  vue-demi@0.14.8(vue@3.4.31(typescript@5.5.3)):
+    dependencies:
+      vue: 3.4.31(typescript@5.5.3)
+
   vue-template-compiler@2.7.16:
     dependencies:
       de-indent: 1.0.2

web/src/App.vue

@@ -10,6 +10,7 @@
           <li>
             <CategoryContainer licenseGroupName="Jetbrains Ultimate"/>
             <CategoryContainer licenseGroupName="Microsoft"/>
+            <CategoryContainer licenseGroupName="Willy Wonker Online Movie"/>
           </li>
         </div>
       </div>
@@ -30,5 +31,9 @@ import { store } from './store';
   li {
       list-style-type: none;
   }
+
+  html,body,main {
+    background-color: #E3E3E3
+  }
 </style>
 

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>