web: refactor listview

Co-authored-by: wollenberg.niklas@gmail.com <wollenberg.niklas@gmail.com>
2024-07-09 16:35:30 +02:00 · 2024-07-09 16:35:30 +02:00 · 6cb16d4fa3
commit 6cb16d4fa3
parent 431a510a5d
10 changed files with 403 additions and 47 deletions
--- a/package.json
+++ b/package.json
@ -1 +1 @@
-{}
+{"dependencies":{"@vueuse/core":"^10.11.0"}}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -6,4 +6,252 @@ settings:

 importers:

-  .: {}
+  .:
+    dependencies:
+      '@vueuse/core':
+        specifier: ^10.11.0
+        version: 10.11.0(vue@3.4.31)
+
+packages:
+
+  '@babel/helper-string-parser@7.24.7':
+    resolution: {integrity: sha512-7MbVt6xrwFQbunH2DNQsAP5sTGxfqQtErvBIvIMi6EQnbgUOuVYanvREcmFrOPhoXBrTtjhhP+lW+o5UfK+tDg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.24.7':
+    resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.24.7':
+    resolution: {integrity: sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/types@7.24.7':
+    resolution: {integrity: sha512-XEFXSlxiG5td2EJRe8vOmRbaXVgfcBlszKujvVmWIK/UpywWljQCfzAv3RQCGujWQ1RD4YYWEAqDXfuJiy8f5Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@jridgewell/sourcemap-codec@1.4.15':
+    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+
+  '@types/web-bluetooth@0.0.20':
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+
+  '@vue/compiler-core@3.4.31':
+    resolution: {integrity: sha512-skOiodXWTV3DxfDhB4rOf3OGalpITLlgCeOwb+Y9GJpfQ8ErigdBUHomBzvG78JoVE8MJoQsb+qhZiHfKeNeEg==}
+
+  '@vue/compiler-dom@3.4.31':
+    resolution: {integrity: sha512-wK424WMXsG1IGMyDGyLqB+TbmEBFM78hIsOJ9QwUVLGrcSk0ak6zYty7Pj8ftm7nEtdU/DGQxAXp0/lM/2cEpQ==}
+
+  '@vue/compiler-sfc@3.4.31':
+    resolution: {integrity: sha512-einJxqEw8IIJxzmnxmJBuK2usI+lJonl53foq+9etB2HAzlPjAS/wa7r0uUpXw5ByX3/0uswVSrjNb17vJm1kQ==}
+
+  '@vue/compiler-ssr@3.4.31':
+    resolution: {integrity: sha512-RtefmITAje3fJ8FSg1gwgDhdKhZVntIVbwupdyZDSifZTRMiWxWehAOTCc8/KZDnBOcYQ4/9VWxsTbd3wT0hAA==}
+
+  '@vue/reactivity@3.4.31':
+    resolution: {integrity: sha512-VGkTani8SOoVkZNds1PfJ/T1SlAIOf8E58PGAhIOUDYPC4GAmFA2u/E14TDAFcf3vVDKunc4QqCe/SHr8xC65Q==}
+
+  '@vue/runtime-core@3.4.31':
+    resolution: {integrity: sha512-LDkztxeUPazxG/p8c5JDDKPfkCDBkkiNLVNf7XZIUnJ+66GVGkP+TIh34+8LtPisZ+HMWl2zqhIw0xN5MwU1cw==}
+
+  '@vue/runtime-dom@3.4.31':
+    resolution: {integrity: sha512-2Auws3mB7+lHhTFCg8E9ZWopA6Q6L455EcU7bzcQ4x6Dn4cCPuqj6S2oBZgN2a8vJRS/LSYYxwFFq2Hlx3Fsaw==}
+
+  '@vue/server-renderer@3.4.31':
+    resolution: {integrity: sha512-D5BLbdvrlR9PE3by9GaUp1gQXlCNadIZytMIb8H2h3FMWJd4oUfkUTEH2wAr3qxoRz25uxbTcbqd3WKlm9EHQA==}
+    peerDependencies:
+      vue: 3.4.31
+
+  '@vue/shared@3.4.31':
+    resolution: {integrity: sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA==}
+
+  '@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==}
+
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  magic-string@0.30.10:
+    resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
+
+  nanoid@3.3.7:
+    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  picocolors@1.0.1:
+    resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
+
+  postcss@8.4.39:
+    resolution: {integrity: sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  source-map-js@1.2.0:
+    resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
+    engines: {node: '>=0.10.0'}
+
+  to-fast-properties@2.0.0:
+    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
+    engines: {node: '>=4'}
+
+  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@3.4.31:
+    resolution: {integrity: sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+snapshots:
+
+  '@babel/helper-string-parser@7.24.7': {}
+
+  '@babel/helper-validator-identifier@7.24.7': {}
+
+  '@babel/parser@7.24.7':
+    dependencies:
+      '@babel/types': 7.24.7
+
+  '@babel/types@7.24.7':
+    dependencies:
+      '@babel/helper-string-parser': 7.24.7
+      '@babel/helper-validator-identifier': 7.24.7
+      to-fast-properties: 2.0.0
+
+  '@jridgewell/sourcemap-codec@1.4.15': {}
+
+  '@types/web-bluetooth@0.0.20': {}
+
+  '@vue/compiler-core@3.4.31':
+    dependencies:
+      '@babel/parser': 7.24.7
+      '@vue/shared': 3.4.31
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.0
+
+  '@vue/compiler-dom@3.4.31':
+    dependencies:
+      '@vue/compiler-core': 3.4.31
+      '@vue/shared': 3.4.31
+
+  '@vue/compiler-sfc@3.4.31':
+    dependencies:
+      '@babel/parser': 7.24.7
+      '@vue/compiler-core': 3.4.31
+      '@vue/compiler-dom': 3.4.31
+      '@vue/compiler-ssr': 3.4.31
+      '@vue/shared': 3.4.31
+      estree-walker: 2.0.2
+      magic-string: 0.30.10
+      postcss: 8.4.39
+      source-map-js: 1.2.0
+
+  '@vue/compiler-ssr@3.4.31':
+    dependencies:
+      '@vue/compiler-dom': 3.4.31
+      '@vue/shared': 3.4.31
+
+  '@vue/reactivity@3.4.31':
+    dependencies:
+      '@vue/shared': 3.4.31
+
+  '@vue/runtime-core@3.4.31':
+    dependencies:
+      '@vue/reactivity': 3.4.31
+      '@vue/shared': 3.4.31
+
+  '@vue/runtime-dom@3.4.31':
+    dependencies:
+      '@vue/reactivity': 3.4.31
+      '@vue/runtime-core': 3.4.31
+      '@vue/shared': 3.4.31
+      csstype: 3.1.3
+
+  '@vue/server-renderer@3.4.31(vue@3.4.31)':
+    dependencies:
+      '@vue/compiler-ssr': 3.4.31
+      '@vue/shared': 3.4.31
+      vue: 3.4.31
+
+  '@vue/shared@3.4.31': {}
+
+  '@vueuse/core@10.11.0(vue@3.4.31)':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.0
+      '@vueuse/shared': 10.11.0(vue@3.4.31)
+      vue-demi: 0.14.8(vue@3.4.31)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/metadata@10.11.0': {}
+
+  '@vueuse/shared@10.11.0(vue@3.4.31)':
+    dependencies:
+      vue-demi: 0.14.8(vue@3.4.31)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  csstype@3.1.3: {}
+
+  entities@4.5.0: {}
+
+  estree-walker@2.0.2: {}
+
+  magic-string@0.30.10:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.15
+
+  nanoid@3.3.7: {}
+
+  picocolors@1.0.1: {}
+
+  postcss@8.4.39:
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.1
+      source-map-js: 1.2.0
+
+  source-map-js@1.2.0: {}
+
+  to-fast-properties@2.0.0: {}
+
+  vue-demi@0.14.8(vue@3.4.31):
+    dependencies:
+      vue: 3.4.31
+
+  vue@3.4.31:
+    dependencies:
+      '@vue/compiler-dom': 3.4.31
+      '@vue/compiler-sfc': 3.4.31
+      '@vue/runtime-dom': 3.4.31
+      '@vue/server-renderer': 3.4.31(vue@3.4.31)
+      '@vue/shared': 3.4.31
--- a/web/components.d.ts
+++ b/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']
--- a/web/package.json
+++ b/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": "*",
--- a/web/pnpm-lock.yaml
+++ b/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
--- a/web/src/App.vue
+++ b/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>

--- a/web/src/components/CategoryContainer.vue
+++ b/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=""
--- a/web/src/components/Clipboard.vue
+++ b/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>
--- a/web/src/components/HeaderBar.vue
+++ b/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';

--- a/web/src/components/ListViewElement.vue
+++ b/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>