56 lines
2.1 KiB
Vue
56 lines
2.1 KiB
Vue
<template>
|
|
<div>
|
|
<div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
|
|
<h1 class="text-xl font-bold text-primary-500 sm:text-2xl">Administration</h1>
|
|
|
|
<div class="mt-6 border-b border-neutral-200 overflow-x-auto">
|
|
<nav class="flex gap-4 sm:gap-6">
|
|
<button
|
|
v-for="tab in tabs"
|
|
:key="tab.key"
|
|
class="whitespace-nowrap px-1 pb-3 text-sm font-semibold transition"
|
|
:class="activeTab === tab.key
|
|
? 'border-b-2 border-primary-500 text-primary-500'
|
|
: 'text-neutral-500 hover:text-neutral-700'"
|
|
@click="activeTab = tab.key"
|
|
>
|
|
{{ tab.label }}
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<AdminClientTab v-if="activeTab === 'clients'" />
|
|
<AdminStatusTab v-if="activeTab === 'statuses'" />
|
|
<AdminEffortTab v-if="activeTab === 'efforts'" />
|
|
<AdminPriorityTab v-if="activeTab === 'priorities'" />
|
|
<AdminTagTab v-if="activeTab === 'tags'" />
|
|
<AdminUserTab v-if="activeTab === 'users'" />
|
|
<AdminClientTicketTab v-if="activeTab === 'client-tickets'" />
|
|
<AdminGiteaTab v-if="activeTab === 'gitea'" />
|
|
<AdminBookStackTab v-if="activeTab === 'bookstack'" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
useHead({ title: 'Administration' })
|
|
|
|
const tabs = [
|
|
{ key: 'clients', label: 'Clients' },
|
|
{ key: 'statuses', label: 'Statuts' },
|
|
{ key: 'efforts', label: 'Efforts' },
|
|
{ key: 'priorities', label: 'Priorités' },
|
|
{ key: 'tags', label: 'Tags' },
|
|
{ key: 'users', label: 'Utilisateurs' },
|
|
{ key: 'client-tickets', label: 'Tickets client' },
|
|
{ key: 'gitea', label: 'Gitea' },
|
|
{ key: 'bookstack', label: 'BookStack' },
|
|
] as const
|
|
|
|
type TabKey = typeof tabs[number]['key']
|
|
|
|
const activeTab = ref<TabKey>('clients')
|
|
</script>
|