Admin panel updated with shadcn-vue components
This commit is contained in:
Simon Pocrnjič
@@ -2,9 +2,35 @@
|
||||
import AdminLayout from "@/Layouts/AdminLayout.vue";
|
||||
import { useForm, Link, router } from "@inertiajs/vue3";
|
||||
import { ref, computed } from "vue";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
import { faMagnifyingGlass, faFloppyDisk, faPlus } from "@fortawesome/free-solid-svg-icons";
|
||||
import DialogModal from "@/Components/DialogModal.vue";
|
||||
import { SearchIcon, SaveIcon, UserPlusIcon } from "lucide-vue-next";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/Components/ui/card";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { Input } from "@/Components/ui/input";
|
||||
import { Label } from "@/Components/ui/label";
|
||||
import { Badge } from "@/Components/ui/badge";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/Components/ui/table";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/Components/ui/dialog";
|
||||
import { Checkbox } from "@/Components/ui/checkbox";
|
||||
|
||||
const props = defineProps({
|
||||
users: Array,
|
||||
@@ -29,6 +55,7 @@ function toggle(userId, roleId) {
|
||||
? form.roles.filter((id) => id !== roleId)
|
||||
: [...form.roles, roleId];
|
||||
form.dirty = true;
|
||||
console.log("Toggle checkbox");
|
||||
}
|
||||
|
||||
function submit(userId) {
|
||||
@@ -105,336 +132,313 @@ function toggleCreateRole(roleId) {
|
||||
}
|
||||
|
||||
function toggleUserActive(userId) {
|
||||
router.patch(route("admin.users.toggle-active", { user: userId }), {}, {
|
||||
preserveScroll: true,
|
||||
});
|
||||
router.patch(
|
||||
route("admin.users.toggle-active", { user: userId }),
|
||||
{},
|
||||
{
|
||||
preserveScroll: true,
|
||||
}
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AdminLayout title="Upravljanje vlog uporabnikov">
|
||||
<div class="max-w-7xl mx-auto space-y-8">
|
||||
<div class="bg-white border rounded-xl shadow-sm p-6 space-y-7">
|
||||
<header class="space-y-1">
|
||||
<h1 class="text-xl font-semibold leading-tight tracking-tight">
|
||||
Uporabniki & Vloge
|
||||
</h1>
|
||||
<p class="text-sm text-gray-500">
|
||||
<div class="max-w-7xl mx-auto space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Uporabniki & Vloge</CardTitle>
|
||||
<CardDescription>
|
||||
Dodeli ali odstrani vloge. Uporabi iskanje ali filter po vlogah za hitrejše
|
||||
upravljanje.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<!-- Toolbar -->
|
||||
<div
|
||||
class="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between"
|
||||
>
|
||||
<div class="flex flex-wrap gap-3 items-center">
|
||||
<div class="relative">
|
||||
<span class="absolute left-2 top-1.5 text-gray-400">
|
||||
<FontAwesomeIcon :icon="faMagnifyingGlass" class="w-4 h-4" />
|
||||
</span>
|
||||
<input
|
||||
v-model="query"
|
||||
type="text"
|
||||
placeholder="Išči uporabnika..."
|
||||
class="pl-8 pr-3 py-1.5 text-sm rounded-md border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
@click="roleFilter = null"
|
||||
:class="[
|
||||
'px-2.5 py-1 rounded-full text-xs border transition',
|
||||
roleFilter === null
|
||||
? 'bg-indigo-600 text-white border-indigo-600'
|
||||
: 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50',
|
||||
]"
|
||||
>
|
||||
Vse
|
||||
</button>
|
||||
<button
|
||||
v-for="r in props.roles"
|
||||
:key="'rf-' + r.id"
|
||||
type="button"
|
||||
@click="roleFilter = r.id"
|
||||
:class="[
|
||||
'px-2.5 py-1 rounded-full text-xs border transition',
|
||||
roleFilter === r.id
|
||||
? 'bg-indigo-600 text-white border-indigo-600'
|
||||
: 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50',
|
||||
]"
|
||||
>
|
||||
{{ r.name }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
@click="openCreateModal"
|
||||
class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-xs font-medium bg-indigo-600 border-indigo-600 text-white hover:bg-indigo-500"
|
||||
>
|
||||
<FontAwesomeIcon :icon="faPlus" class="w-4 h-4" />
|
||||
Ustvari uporabnika
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="submitAll"
|
||||
:disabled="!anyDirty"
|
||||
class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-xs font-medium border disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
:class="
|
||||
anyDirty
|
||||
? 'bg-indigo-600 border-indigo-600 text-white hover:bg-indigo-500'
|
||||
: 'bg-white border-gray-300 text-gray-400'
|
||||
"
|
||||
>
|
||||
<FontAwesomeIcon :icon="faFloppyDisk" class="w-4 h-4" />
|
||||
Shrani vse
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto rounded-lg border border-slate-200">
|
||||
<table class="min-w-full text-sm">
|
||||
<thead class="bg-slate-50 text-slate-600 sticky top-0 z-10">
|
||||
<tr>
|
||||
<th class="p-2 text-left font-medium text-[11px] uppercase tracking-wide">
|
||||
Uporabnik
|
||||
</th>
|
||||
<th class="p-2 text-center font-medium text-[11px] uppercase tracking-wide">
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
v-for="role in props.roles"
|
||||
:key="role.id"
|
||||
class="p-2 font-medium text-[11px] uppercase tracking-wide text-center"
|
||||
>
|
||||
{{ role.name }}
|
||||
</th>
|
||||
<th
|
||||
class="p-2 font-medium text-[11px] uppercase tracking-wide text-center"
|
||||
>
|
||||
Akcije
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(user, idx) in filteredUsers"
|
||||
:key="user.id"
|
||||
:class="[
|
||||
'border-t border-slate-100',
|
||||
idx % 2 === 1 ? 'bg-slate-50/40' : 'bg-white',
|
||||
!user.active && 'opacity-60',
|
||||
]"
|
||||
>
|
||||
<td class="p-2 whitespace-nowrap align-top">
|
||||
<div class="font-medium text-sm flex items-center gap-2">
|
||||
<span
|
||||
class="inline-flex items-center justify-center h-7 w-7 rounded-full bg-indigo-50 text-indigo-600 text-xs font-semibold"
|
||||
>{{ user.name.substring(0, 2).toUpperCase() }}</span
|
||||
>
|
||||
<span>{{ user.name }}</span>
|
||||
<span
|
||||
v-if="forms[user.id].dirty"
|
||||
class="ml-1 inline-block px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 text-[10px] font-medium"
|
||||
>Spremembe</span
|
||||
>
|
||||
</div>
|
||||
<div class="text-[11px] text-slate-500 mt-0.5 font-mono">
|
||||
{{ user.email }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-2 text-center align-top">
|
||||
<button
|
||||
@click="toggleUserActive(user.id)"
|
||||
class="inline-flex items-center px-2 py-1 rounded text-xs font-medium transition"
|
||||
:class="
|
||||
user.active
|
||||
? 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
"
|
||||
>
|
||||
{{ user.active ? 'Aktiven' : 'Neaktiven' }}
|
||||
</button>
|
||||
</td>
|
||||
<td
|
||||
v-for="role in props.roles"
|
||||
:key="role.id"
|
||||
class="p-2 text-center align-top"
|
||||
>
|
||||
<label class="inline-flex items-center gap-1 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="h-4 w-4 rounded-md border-2 border-slate-400 bg-white text-indigo-600 accent-indigo-600 hover:border-slate-500 focus:ring-indigo-500 focus:ring-offset-0 focus:outline-none transition"
|
||||
:checked="forms[user.id].roles.includes(role.id)"
|
||||
@change="toggle(user.id, role.id)"
|
||||
/>
|
||||
</label>
|
||||
</td>
|
||||
<td class="p-2 text-center align-top">
|
||||
<button
|
||||
@click="submit(user.id)"
|
||||
:disabled="forms[user.id].processing || !forms[user.id].dirty"
|
||||
class="inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
:class="
|
||||
forms[user.id].dirty
|
||||
? 'bg-indigo-600 text-white hover:bg-indigo-500'
|
||||
: 'bg-gray-100 text-gray-400'
|
||||
"
|
||||
>
|
||||
<span v-if="forms[user.id].processing">...</span>
|
||||
<span v-else>Shrani</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!filteredUsers.length">
|
||||
<td
|
||||
:colspan="props.roles.length + 3"
|
||||
class="p-6 text-center text-sm text-gray-500"
|
||||
>
|
||||
Ni rezultatov
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2
|
||||
class="text-[11px] font-semibold tracking-wide uppercase text-slate-500 mb-3"
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-6">
|
||||
<!-- Toolbar -->
|
||||
<div
|
||||
class="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between"
|
||||
>
|
||||
Referenca vlog in dovoljenj
|
||||
</h2>
|
||||
<div class="flex flex-wrap gap-3 items-center">
|
||||
<div class="relative">
|
||||
<SearchIcon
|
||||
class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground"
|
||||
/>
|
||||
<Input
|
||||
v-model="query"
|
||||
type="text"
|
||||
placeholder="Išči uporabnika..."
|
||||
class="pl-9 w-64"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
@click="roleFilter = null"
|
||||
:variant="roleFilter === null ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
class="rounded-full"
|
||||
>
|
||||
Vse
|
||||
</Button>
|
||||
<Button
|
||||
v-for="r in props.roles"
|
||||
:key="'rf-' + r.id"
|
||||
type="button"
|
||||
@click="roleFilter = r.id"
|
||||
:variant="roleFilter === r.id ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
class="rounded-full"
|
||||
>
|
||||
{{ r.name }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Button type="button" @click="openCreateModal" size="sm">
|
||||
<UserPlusIcon class="h-4 w-4 mr-2" />
|
||||
Ustvari uporabnika
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
@click="submitAll"
|
||||
:disabled="!anyDirty"
|
||||
size="sm"
|
||||
:variant="anyDirty ? 'default' : 'outline'"
|
||||
>
|
||||
<SaveIcon class="h-4 w-4 mr-2" />
|
||||
Shrani vse
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead class="text-left">Uporabnik</TableHead>
|
||||
<TableHead class="text-center">Status</TableHead>
|
||||
<TableHead
|
||||
v-for="role in props.roles"
|
||||
:key="role.id"
|
||||
class="text-center"
|
||||
>
|
||||
{{ role.name }}
|
||||
</TableHead>
|
||||
<TableHead class="text-center">Akcije</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow
|
||||
v-for="user in filteredUsers"
|
||||
:key="user.id"
|
||||
:class="!user.active && 'opacity-60'"
|
||||
>
|
||||
<TableCell class="whitespace-nowrap">
|
||||
<div class="flex items-center gap-2">
|
||||
<div
|
||||
class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-primary/10 text-primary text-xs font-semibold"
|
||||
>
|
||||
{{ user.name.substring(0, 2).toUpperCase() }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium text-sm flex items-center gap-2">
|
||||
{{ user.name }}
|
||||
<Badge
|
||||
v-if="forms[user.id].dirty"
|
||||
variant="secondary"
|
||||
class="text-xs"
|
||||
>
|
||||
Spremembe
|
||||
</Badge>
|
||||
</div>
|
||||
<div class="text-xs text-muted-foreground font-mono">
|
||||
{{ user.email }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell class="text-center">
|
||||
<Badge
|
||||
@click="toggleUserActive(user.id)"
|
||||
:variant="user.active ? 'default' : 'secondary'"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
{{ user.active ? "Aktiven" : "Neaktiven" }}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
v-for="role in props.roles"
|
||||
:key="role.id"
|
||||
class="text-center"
|
||||
>
|
||||
<div class="flex items-center justify-center">
|
||||
<Checkbox
|
||||
:default-value="forms[user.id].roles.includes(role.id)"
|
||||
@update:model-value="toggle(user.id, role.id)"
|
||||
/>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell class="text-center">
|
||||
<Button
|
||||
@click="submit(user.id)"
|
||||
:disabled="forms[user.id].processing || !forms[user.id].dirty"
|
||||
size="sm"
|
||||
:variant="forms[user.id].dirty ? 'default' : 'ghost'"
|
||||
>
|
||||
<span v-if="forms[user.id].processing">...</span>
|
||||
<span v-else>Shrani</span>
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow v-if="!filteredUsers.length">
|
||||
<TableCell
|
||||
:colspan="props.roles.length + 3"
|
||||
class="text-center text-sm text-muted-foreground py-8"
|
||||
>
|
||||
Ni rezultatov
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle class="text-base">Referenca vlog in dovoljenj</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<div
|
||||
<Card
|
||||
v-for="role in props.roles"
|
||||
:key="'ref-' + role.id"
|
||||
class="px-3 py-2 rounded-lg border border-slate-200 bg-white shadow-sm"
|
||||
class="border-muted"
|
||||
>
|
||||
<div class="font-medium text-sm flex items-center gap-2">
|
||||
<span
|
||||
class="inline-flex items-center justify-center h-6 w-6 rounded-md bg-indigo-50 text-indigo-600 text-[11px] font-semibold"
|
||||
>{{ role.name.substring(0, 1).toUpperCase() }}</span
|
||||
>
|
||||
{{ role.name }}
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1 mt-2">
|
||||
<span
|
||||
v-for="perm in role.permissions"
|
||||
:key="perm.id"
|
||||
class="text-[10px] uppercase tracking-wide bg-slate-100 text-slate-600 px-1.5 py-0.5 rounded"
|
||||
>{{ perm.slug }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<CardHeader class="pb-3">
|
||||
<CardTitle class="text-sm flex items-center gap-2">
|
||||
<div
|
||||
class="inline-flex items-center justify-center h-6 w-6 rounded-md bg-primary/10 text-primary text-xs font-semibold"
|
||||
>
|
||||
{{ role.name.substring(0, 1).toUpperCase() }}
|
||||
</div>
|
||||
{{ role.name }}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<Badge
|
||||
v-for="perm in role.permissions"
|
||||
:key="perm.id"
|
||||
variant="secondary"
|
||||
class="text-xs"
|
||||
>
|
||||
{{ perm.slug }}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Create User Modal -->
|
||||
<DialogModal :show="showCreateModal" @close="closeCreateModal" max-width="2xl">
|
||||
<template #title>Ustvari novega uporabnika</template>
|
||||
<template #content>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Ime</label>
|
||||
<input
|
||||
<Dialog :open="showCreateModal" @update:open="(val) => (showCreateModal = val)">
|
||||
<DialogContent class="sm:max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Ustvari novega uporabnika</DialogTitle>
|
||||
<DialogDescription>
|
||||
Dodaj novega uporabnika s privzetimi vlogami
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div class="space-y-4 py-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="name">Ime</Label>
|
||||
<Input
|
||||
id="name"
|
||||
v-model="createForm.name"
|
||||
type="text"
|
||||
class="w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
|
||||
placeholder="Ime uporabnika"
|
||||
/>
|
||||
<div v-if="createForm.errors.name" class="text-red-600 text-xs mt-1">
|
||||
<p v-if="createForm.errors.name" class="text-sm text-destructive">
|
||||
{{ createForm.errors.name }}
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">E-pošta</label>
|
||||
<input
|
||||
<div class="space-y-2">
|
||||
<Label for="email">E-pošta</Label>
|
||||
<Input
|
||||
id="email"
|
||||
v-model="createForm.email"
|
||||
type="email"
|
||||
class="w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
|
||||
placeholder="uporabnik@example.com"
|
||||
/>
|
||||
<div v-if="createForm.errors.email" class="text-red-600 text-xs mt-1">
|
||||
<p v-if="createForm.errors.email" class="text-sm text-destructive">
|
||||
{{ createForm.errors.email }}
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Geslo</label>
|
||||
<input
|
||||
<div class="space-y-2">
|
||||
<Label for="password">Geslo</Label>
|
||||
<Input
|
||||
id="password"
|
||||
v-model="createForm.password"
|
||||
type="password"
|
||||
class="w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
|
||||
placeholder="********"
|
||||
/>
|
||||
<div v-if="createForm.errors.password" class="text-red-600 text-xs mt-1">
|
||||
<p v-if="createForm.errors.password" class="text-sm text-destructive">
|
||||
{{ createForm.errors.password }}
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Potrdi geslo</label>
|
||||
<input
|
||||
<div class="space-y-2">
|
||||
<Label for="password_confirmation">Potrdi geslo</Label>
|
||||
<Input
|
||||
id="password_confirmation"
|
||||
v-model="createForm.password_confirmation"
|
||||
type="password"
|
||||
class="w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
|
||||
placeholder="********"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Vloge</label>
|
||||
<div class="space-y-2">
|
||||
<Label>Vloge</Label>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<label
|
||||
v-for="role in props.roles"
|
||||
:key="'create-role-' + role.id"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 rounded-md border cursor-pointer transition"
|
||||
class="flex items-center gap-2 px-3 py-2 rounded-md border cursor-pointer transition hover:bg-accent"
|
||||
:class="
|
||||
createForm.roles.includes(role.id)
|
||||
? 'bg-indigo-50 border-indigo-600 text-indigo-700'
|
||||
: 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'
|
||||
createForm.roles.includes(role.id) && 'bg-primary/10 border-primary'
|
||||
"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
|
||||
:checked="createForm.roles.includes(role.id)"
|
||||
@change="toggleCreateRole(role.id)"
|
||||
<Checkbox
|
||||
:default-value="createForm.roles.includes(role.id)"
|
||||
@update:model-value="toggleCreateRole(role.id)"
|
||||
/>
|
||||
<span class="text-sm font-medium">{{ role.name }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div v-if="createForm.errors.roles" class="text-red-600 text-xs mt-1">
|
||||
<p v-if="createForm.errors.roles" class="text-sm text-destructive">
|
||||
{{ createForm.errors.roles }}
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button
|
||||
type="button"
|
||||
@click="closeCreateModal"
|
||||
class="px-4 py-2 rounded-md text-sm font-medium bg-white border border-gray-300 text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
Prekliči
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="submitCreateUser"
|
||||
:disabled="createForm.processing"
|
||||
class="ml-3 px-4 py-2 rounded-md text-sm font-medium bg-indigo-600 text-white hover:bg-indigo-500 disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
<span v-if="createForm.processing">Ustvarjanje...</span>
|
||||
<span v-else>Ustvari</span>
|
||||
</button>
|
||||
</template>
|
||||
</DialogModal>
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" @click="closeCreateModal">
|
||||
Prekliči
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
@click="submitCreateUser"
|
||||
:disabled="createForm.processing"
|
||||
>
|
||||
<span v-if="createForm.processing">Ustvarjanje...</span>
|
||||
<span v-else>Ustvari</span>
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user