106 lines
2.9 KiB
Vue
106 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted } from 'vue';
|
|
import AppLayout from '@/layouts/AppLayout.vue';
|
|
import { type BreadcrumbItem } from '@/types';
|
|
import { Head, Link, usePage } from '@inertiajs/vue3';
|
|
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCaption,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import { Plus, Trash2 } from 'lucide-vue-next';
|
|
|
|
onMounted(() => {
|
|
console.log(isAdmin);
|
|
});
|
|
|
|
interface Category {
|
|
id: number;
|
|
category: string;
|
|
}
|
|
|
|
interface PageProps {
|
|
[key: string]: any
|
|
|
|
isAdmin: boolean;
|
|
categories: Category[];
|
|
}
|
|
|
|
const page = usePage<PageProps>();
|
|
|
|
const isAdmin = computed(() => page.props.isAdmin);
|
|
const categories = computed(() => page.props.categories);
|
|
|
|
const breadcrumbs: BreadcrumbItem[] = [
|
|
{ title: 'Dashbord', href: '/dashboard' },
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Dashbord" />
|
|
|
|
<AppLayout :breadcrumbs="breadcrumbs">
|
|
<!-- Header + “Add” if admin -->
|
|
<div class="mb-6 flex items-center justify-between p-6">
|
|
<div>
|
|
<h3 class="scroll-m-20 text-2xl font-extrabold tracking-tight lg:text-3xl">
|
|
Registrerte API tjenester
|
|
</h3>
|
|
<p class="mt-4 text-gray-700 dark:text-gray-400">
|
|
Her vises en liste over eksterne API tjenester denne mellomvaren er registrert mot. Hvis du er registrert som en API administrator, kan du fjerne eller legge til flere tjenester her
|
|
</p>
|
|
</div>
|
|
<!-- Show “Add” only if admin -->
|
|
<Link
|
|
v-if="isAdmin"
|
|
:href="route('apikeys.create')"
|
|
>
|
|
<Button variant="outline" class="flex items-center space-x-2">
|
|
<Plus class="h-4 w-4" />
|
|
<span>Legg til ny tjeneste</span>
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
<!-- Table of categories -->
|
|
<div class="px-6 overflow-auto">
|
|
<Table>
|
|
<TableCaption>Liste over registrerte API tjenester</TableCaption>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Tjeneste</TableHead>
|
|
<TableHead class="text-right">Handlinger</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow v-for="c in categories" :key="c.id">
|
|
<TableCell class="font-medium">{{ c.category }}</TableCell>
|
|
<TableCell class="text-right">
|
|
<!-- If admin, show a Delete link; otherwise leave blank -->
|
|
<Link
|
|
v-if="isAdmin"
|
|
:href="route('apikeys.destroy', c.id)"
|
|
method="delete"
|
|
as="button"
|
|
class="inline-flex"
|
|
>
|
|
<Button variant="destructive" size="sm" class="flex items-center space-x-1">
|
|
<Trash2 class="h-4 w-4" />
|
|
<span>Slett</span>
|
|
</Button>
|
|
</Link>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|