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
              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"
          >
            <CalendarX />
            <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 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:
            <v-row
              class="flex-nowrap"
              no-gutters
            >
              <v-col
                class="flex-grow-1 align-self-end overflow-x-auto border-e-md"
                cols="10"
              >
                {{ props.notes }}
         
              </v-col>

                <v-col
                  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>
              </v-col>
            </v-row>

        </v-expansion-panel-text>
      </v-expansion-panel>
    </v-expansion-panels>
  </v-sheet>
</template>

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

const props = defineProps({
  licenseName: String,
  licenseKey: String,
  startDate: String,
  endDate: String,
  amount: Number,
  notes: String,
});

//
//  EDIT SECTION
//

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

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