resources/js/pages/Licenses.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>