127 lines
3 KiB
Vue
127 lines
3 KiB
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 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>
|