181 lines
6.6 KiB
Vue
181 lines
6.6 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { License } from '@/types'
|
||
|
|
import { toLocalDate } 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, TableFooter, TableHead, TableHeader } from '@/components/ui/crm-table'
|
||
|
|
import { Input } from '@/components/ui/crm-input'
|
||
|
|
import { Badge } from '@/components/ui/crm-badge'
|
||
|
|
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 { Check, Download, Trash2, Plus, Delete, Search } 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
|
||
|
|
})
|
||
|
|
|
||
|
|
const fuse = computed(() => {
|
||
|
|
return new Fuse(props.licenseData, {
|
||
|
|
keys: ['name', 'email', 'product', 'version'],
|
||
|
|
threshold: 0.3
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
const filteredLicenses = computed(() => {
|
||
|
|
|
||
|
|
let licenses = props.licenseData
|
||
|
|
|
||
|
|
// Filter by search query
|
||
|
|
if (searchQuery.value) {
|
||
|
|
licenses = fuse.value.search(searchQuery.value).map(result => result.item)
|
||
|
|
}
|
||
|
|
|
||
|
|
return licenses
|
||
|
|
})
|
||
|
|
|
||
|
|
const downloadLicense = (id: number) => {
|
||
|
|
window.open('/licenses/download/' + id)
|
||
|
|
}
|
||
|
|
|
||
|
|
const deleteLicense = (id: number) => {
|
||
|
|
alert.show(
|
||
|
|
"Möchtest Du diese Lizenz wirklich löschen?",
|
||
|
|
null,
|
||
|
|
{
|
||
|
|
actionText: "Löschen",
|
||
|
|
actionVariant: "destructive",
|
||
|
|
onAction: async () => {
|
||
|
|
LicenseService.deleteLicense(id).then(() => {
|
||
|
|
licenses.value = licenses.value.filter(license => license.id != id)
|
||
|
|
}).catch((error) => {
|
||
|
|
toast.error('Fehler beim Löschen der Lizenz', { duration: 5000, description: error.message })
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
</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>
|
||
|
|
<!-- New button -->
|
||
|
|
<TooltipProvider>
|
||
|
|
<Tooltip>
|
||
|
|
<TooltipTrigger>
|
||
|
|
<Button @click="">
|
||
|
|
<Plus />
|
||
|
|
Neu
|
||
|
|
</Button>
|
||
|
|
</TooltipTrigger>
|
||
|
|
<TooltipContent>
|
||
|
|
<span>Neue Lizenz anlegen</span>
|
||
|
|
<KbdGroup class="ml-2">
|
||
|
|
<Kbd class="visible-mac">⌘ N</Kbd>
|
||
|
|
<Kbd class="visible-pc">Ctrl N</Kbd>
|
||
|
|
</KbdGroup>
|
||
|
|
</TooltipContent>
|
||
|
|
</Tooltip>
|
||
|
|
</TooltipProvider>
|
||
|
|
</template>
|
||
|
|
</AppHeader>
|
||
|
|
|
||
|
|
<!-- License table -->
|
||
|
|
<Table>
|
||
|
|
<TableHeader>
|
||
|
|
<TableRow>
|
||
|
|
<TableHead class="w-1/100 text-center">Gültig bis</TableHead>
|
||
|
|
<TableHead>Produkt</TableHead>
|
||
|
|
<TableHead>Version</TableHead>
|
||
|
|
<TableHead 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">
|
||
|
|
<!-- <Check class="text-success inline-block" /> -->
|
||
|
|
<Badge v-if="license.isPerpetual" variant="secondary">
|
||
|
|
Permanent
|
||
|
|
</Badge>
|
||
|
|
<Badge v-else-if="Math.random() > 0.5" variant="success">
|
||
|
|
{{ toLocalDate(license.expirationDate || '') }}
|
||
|
|
</Badge>
|
||
|
|
<Badge v-else variant="destructive">
|
||
|
|
{{ toLocalDate(license.expirationDate || '') }}
|
||
|
|
</Badge>
|
||
|
|
</TableCell>
|
||
|
|
<TableCell>
|
||
|
|
{{ license.product }}
|
||
|
|
</TableCell>
|
||
|
|
<TableCell>
|
||
|
|
{{ license.version }}
|
||
|
|
</TableCell>
|
||
|
|
|
||
|
|
<TableCell>
|
||
|
|
{{ license.name }}<br />
|
||
|
|
</TableCell>
|
||
|
|
<TableCell>
|
||
|
|
<a :href="'mailto:' + license.email + '?subject=Ihre ' + license.product + '-Lizenz'"
|
||
|
|
class="text-muted-foreground text-sm">{{ license.email
|
||
|
|
}}</a>
|
||
|
|
</TableCell>
|
||
|
|
|
||
|
|
<TableCell class="print:hidden">
|
||
|
|
<ButtonGroup>
|
||
|
|
<Button size="icon" variant="ghost" @click="downloadLicense(license.id)">
|
||
|
|
<Download class="text-muted-foreground" />
|
||
|
|
</Button>
|
||
|
|
<Button size="icon" variant="ghost" @click="deleteLicense(license.id)">
|
||
|
|
<Trash2 class="text-muted-foreground" />
|
||
|
|
</Button>
|
||
|
|
</ButtonGroup>
|
||
|
|
</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
</TableBody>
|
||
|
|
</Table>
|
||
|
|
</AppLayout>
|
||
|
|
</template>
|