Alisa/web/src/components/ListViewElement.vue

<template>
  <v-sheet elevation="4" width="96vw" rounded="lg" class="mt-3">
    <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"
          >
            <CalendarCheck />
            <span>
              {{
                props.startDate
                  ? props.startDate.toLocaleDateString()
                  : "Verfügbar"
              }}
            </span>
          </div>

          <div
            class="mr-3 d-flex align-self-center"
            style="align-items: center"
          >
            <CalendarX />
            <span>
              {{
                props.endDate
                  ? props.endDate.toLocaleDateString()
                  : "Ewig Verfügbar"
              }}
            </span>
          </div>

          <div
            class="mr-3 d-flex align-self-center"
            style="align-items: center"
          >
            <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>
          </div>
        </v-expansion-panel-title>
        <v-expansion-panel-text>
          Notes:
          <div class="flex-nowrap d-flex" no-gutters>
            <div
              class="flex-grow-1 overflow-x-auto border-e-md align-self-end"
              cols="10"
            >
              {{ props.notes }}
            </div>

            <div class="" cols="2" align="end">
              <!--              -->
              <!-- 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>
            </div>
          </div>
        </v-expansion-panel-text>
      </v-expansion-panel>
    </v-expansion-panels>
  </v-sheet>
</template>

<script setup lang="ts">
import {
  Infinity,
  KeyRound,
  CalendarCheck,
  CalendarX,
  Pencil,
  Trash,
  Power,
} from "lucide-vue-next";
import { ref } from "vue";

const props = defineProps<{
  licenseName: string;
  licenseKey: string;
  startDate: Date | null;
  endDate: Date | null;
  amount?: number;
  notes?: string;
}>();
//
//  EDIT SECTION
//

const edit = ref(false);
</script>

<style scoped>
.values {
  display: flex;
  align-items: center;
}
</style>