210 lines
8.4 KiB
Vue
210 lines
8.4 KiB
Vue
<script setup lang="ts">
|
||
import { License } from '@/types'
|
||
import { newLicense } from '@/types/index.d'
|
||
import { toLocalDate, toShortISOString, hotkey } from '@/lib/utils'
|
||
import Fuse from 'fuse.js'
|
||
import { onMounted, ref, computed } from 'vue'
|
||
import AppLayout from '@/layouts/AppLayout.vue'
|
||
import AppHeader from '@/components/AppHeader.vue'
|
||
import { Head } from '@inertiajs/vue3'
|
||
import { Table, TableRow, TableBody, TableCell, TableHead, TableHeader } from '@/components/ui/crm-table'
|
||
import { Input } from '@/components/ui/crm-input'
|
||
import Button from '@/components/ui/crm-button/Button.vue'
|
||
import { ButtonGroup } from '@/components/ui/button-group'
|
||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
||
import { Kbd, KbdGroup } from '@/components/ui/kbd'
|
||
import LicenseService from '@/services/LicenseService';
|
||
import { Download, Trash2, Plus, Delete, Search, CheckCircle, CheckCircle2, XCircle, CircleQuestionMark, BadgeQuestionMark, Eye } from 'lucide-vue-next'
|
||
import { alertStore } from "@/stores/alertStore"
|
||
import { toast } from 'vue-sonner';
|
||
|
||
interface Props {
|
||
licenseData: License[]
|
||
}
|
||
const props = defineProps<Props>()
|
||
const licenses = ref([] as License[])
|
||
const searchQuery = ref('')
|
||
const searchField = ref()
|
||
const alert = alertStore()
|
||
|
||
onMounted(() => {
|
||
licenses.value = props.licenseData
|
||
searchField.value = document.getElementById('search')
|
||
hotkey('n', createLicense)
|
||
})
|
||
|
||
const fuse = computed(() => {
|
||
return new Fuse(props.licenseData, {
|
||
keys: ['name', 'email', 'product', 'version'],
|
||
threshold: 0.3
|
||
})
|
||
})
|
||
|
||
const filteredLicenses = computed(() => {
|
||
let filteredLicenses = licenses.value
|
||
// Filter by search query
|
||
if (searchQuery.value) {
|
||
filteredLicenses = fuse.value.search(searchQuery.value).map(result => result.item)
|
||
}
|
||
return filteredLicenses
|
||
})
|
||
|
||
const createLicense = () => {
|
||
LicenseService.createLicense(newLicense()).then(license => {
|
||
if (license) licenses.value.unshift(license)
|
||
})
|
||
}
|
||
|
||
const updateLicense = (license: License) => {
|
||
LicenseService.updateLicense(license).then((response) => {
|
||
if (response) license = response
|
||
})
|
||
}
|
||
|
||
const downloadLicense = (license: License) => {
|
||
window.open('/licenses/download/' + license.id)
|
||
}
|
||
|
||
const deleteLicense = (license: License) => {
|
||
if (license.id == 0) {
|
||
licenses.value = licenses.value.filter(l => l != license)
|
||
return
|
||
}
|
||
|
||
alert.show(
|
||
"Möchtest Du diese Lizenz wirklich löschen?",
|
||
null,
|
||
{
|
||
actionText: "Löschen",
|
||
actionVariant: "destructive",
|
||
onAction: async () => {
|
||
LicenseService.deleteLicense(license.id).then(() => {
|
||
licenses.value = licenses.value.filter(license => license.id != license.id)
|
||
}).catch((error) => {
|
||
toast.error('Fehler beim Löschen der Lizenz', { duration: 5000, description: error.message })
|
||
})
|
||
}
|
||
}
|
||
)
|
||
}
|
||
|
||
const remToPx = (rem: number) => {
|
||
return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
|
||
}
|
||
|
||
</script>
|
||
|
||
<template>
|
||
|
||
<Head title="Lizenzen" />
|
||
|
||
<AppLayout title="Lizenzen">
|
||
|
||
<!-- Header functions -->
|
||
<AppHeader>
|
||
<template #left>
|
||
</template>
|
||
|
||
<template #middle>
|
||
<!-- Search field -->
|
||
<Input ref="search-field" id="search" type="text" placeholder="Filtern" class="px-8 bg-background"
|
||
v-model="searchQuery" />
|
||
<span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
|
||
<Search class="size-4 text-muted-foreground" />
|
||
</span>
|
||
<span class="absolute end-0 inset-y-0 flex items-center justify-center px-0 mr-1">
|
||
<Button :size="'sm'" :variant="'ghost'" @click="searchQuery = ''; searchField.focus();">
|
||
<Delete class="size-4 text-muted-foreground" />
|
||
</Button>
|
||
</span>
|
||
</template>
|
||
<template #right>
|
||
<div class="flex gap-2 items-center">
|
||
<TooltipProvider>
|
||
<!-- New button -->
|
||
<Tooltip>
|
||
<TooltipTrigger>
|
||
<Button @click="createLicense">
|
||
<Plus />
|
||
Neu
|
||
</Button>
|
||
</TooltipTrigger>
|
||
<TooltipContent>
|
||
<span>Neue Lizenz anlegen</span>
|
||
<KbdGroup class="ml-2">
|
||
<Kbd>N</Kbd>
|
||
</KbdGroup>
|
||
</TooltipContent>
|
||
</Tooltip>
|
||
</TooltipProvider>
|
||
</div>
|
||
</template>
|
||
</AppHeader>
|
||
|
||
<!-- License table -->
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead class="w-1/100 text-center">Gültig</TableHead>
|
||
<TableHead class="w-1/100">Perm.</TableHead>
|
||
<TableHead class="pl-7">Ablaufdatum</TableHead>
|
||
<TableHead class="pl-7">Produkt</TableHead>
|
||
<TableHead class="pl-7">Version</TableHead>
|
||
<TableHead class="pl-7" colspan="2">Lizenznehmer</TableHead>
|
||
<TableHead class="w-1/100 print:hidden"></TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
|
||
<TableBody>
|
||
|
||
<TableRow v-for="license in filteredLicenses" :key="license.id">
|
||
<TableCell class="text-center">
|
||
<CircleQuestionMark class="inline-block text-muted-foreground" :size="remToPx(1)"
|
||
v-if="license.validationInfo === undefined" />
|
||
<CheckCircle2 class="inline-block text-success0" :size="remToPx(1)"
|
||
v-else-if="license.validationInfo.isExpired === false" />
|
||
<XCircle class="inline-block text-destructive0" :size="remToPx(1)" v-else />
|
||
</TableCell>
|
||
<TableCell class="text-center">
|
||
<input type="checkbox" v-model="license.isPerpetual"
|
||
v-on:change="updateLicense(license)" />
|
||
</TableCell>
|
||
<TableCell class="whitespace-nowrap">
|
||
<div class="text-center" v-if="license.isPerpetual">–</div>
|
||
<Input v-else type="date" :modelValue="toShortISOString(license.expirationDate || new Date())"
|
||
v-on:blur="updateLicense(license)" placeholder="Datum" />
|
||
</TableCell>
|
||
<TableCell>
|
||
<Input type="text" :modelValue="license.product" placeholder="Produkt Name"
|
||
v-on:blur="updateLicense(license)" />
|
||
</TableCell>
|
||
<TableCell>
|
||
<Input type="text" :modelValue="license.version" placeholder="1.0.0"
|
||
v-on:blur="updateLicense(license)" />
|
||
</TableCell>
|
||
|
||
<TableCell>
|
||
<Input type="text" v-model="license.name" placeholder="Firma"
|
||
v-on:blur="updateLicense(license)" />
|
||
</TableCell>
|
||
<TableCell>
|
||
<Input type="email" :modelValue="license.email" placeholder="E-Mail"
|
||
v-on:blur="updateLicense(license)" />
|
||
</TableCell>
|
||
|
||
<TableCell class="print:hidden">
|
||
<ButtonGroup>
|
||
<Button class="size-7" variant="ghost" @click="downloadLicense(license)">
|
||
<Download class="text-muted-foreground" />
|
||
</Button>
|
||
<Button class="size-7" variant="ghost" @click="deleteLicense(license)">
|
||
<Trash2 class="text-muted-foreground" />
|
||
</Button>
|
||
</ButtonGroup>
|
||
</TableCell>
|
||
</TableRow>
|
||
</TableBody>
|
||
</Table>
|
||
</AppLayout>
|
||
</template>
|