114 lines
3 KiB
Vue
114 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">
|
|
{{ license.name }}
|
|
</div>
|
|
|
|
<div
|
|
class="mr-3 d-flex align-self-center"
|
|
style="align-items: center"
|
|
>
|
|
<KeyRound class="mr-1" />
|
|
{{ license.key }}
|
|
</div>
|
|
|
|
<div
|
|
class="mr-3 d-flex align-self-center"
|
|
style="align-items: center"
|
|
>
|
|
<CalendarCheck />
|
|
<span>
|
|
{{
|
|
license.start
|
|
? new Date(license.start).toLocaleDateString()
|
|
: "Indefinitely"
|
|
}}
|
|
</span>
|
|
</div>
|
|
|
|
<div
|
|
class="mr-3 d-flex align-self-center"
|
|
style="align-items: center"
|
|
>
|
|
<CalendarX />
|
|
<span>
|
|
{{
|
|
license.end
|
|
? new Date(license.end).toLocaleDateString()
|
|
: "Indefinitely"
|
|
}}
|
|
</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="license.amount == null || license.amount == undefined">
|
|
<Infinity />
|
|
</span>
|
|
<span v-else>
|
|
{{ license.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"
|
|
>
|
|
{{ license.note }}
|
|
</div>
|
|
|
|
<div align="end">
|
|
<!-- -->
|
|
<!-- EDIT SECTION -->
|
|
<!-- -->
|
|
<UpdateDialog :license="license" />
|
|
<!-- -->
|
|
<!-- DELETE BTN -->
|
|
<!-- -->
|
|
<DeleteDialog :license="license" />
|
|
</div>
|
|
</div>
|
|
</v-expansion-panel-text>
|
|
</v-expansion-panel>
|
|
</v-expansion-panels>
|
|
</v-sheet>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { License } from "@/types";
|
|
import { Infinity, KeyRound, CalendarCheck, CalendarX } from "lucide-vue-next";
|
|
import UpdateDialog from "./UpdateDialog.vue";
|
|
import DeleteDialog from "./DeleteDialog.vue";
|
|
|
|
const { license } = defineProps<{
|
|
license: License;
|
|
/*id: string;
|
|
licenseName: string;
|
|
licenseKey: string;
|
|
startDate: Date | null;
|
|
endDate: Date | null;
|
|
amount?: number;
|
|
notes?: string;*/
|
|
}>();
|
|
</script>
|
|
|
|
<style scoped>
|
|
.values {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|