improvements
This commit is contained in:
Mark Gregory
@@ -3,29 +3,53 @@
|
||||
<thead
|
||||
class="bg-zinc-50 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:bg-zinc-800 dark:text-zinc-300">
|
||||
<tr>
|
||||
<th class="px-3 py-2.5">Team</th>
|
||||
<th class="px-3 py-2.5">Colour</th>
|
||||
<th class="px-3 py-2.5">Default</th>
|
||||
<th class="px-3 py-2.5">Tickets</th>
|
||||
<th class="px-3 py-2.5 text-right">Actions</th>
|
||||
<th class="px-4 py-3">Team</th>
|
||||
<th class="px-4 py-3">Colour</th>
|
||||
<th class="px-4 py-3">Default</th>
|
||||
<th class="px-4 py-3">Members</th>
|
||||
<th class="px-4 py-3">Tickets</th>
|
||||
<th class="px-4 py-3 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
|
||||
@forelse ($items as $item)
|
||||
<tr>
|
||||
<td class="px-3 py-2.5 font-medium text-zinc-900 dark:text-zinc-100">{{ $item->name }}</td>
|
||||
<td class="px-3 py-2.5">
|
||||
<td class="px-4 py-4 align-top">
|
||||
<div class="font-semibold text-zinc-900 dark:text-zinc-100">{{ $item->name }}</div>
|
||||
@if($item->description)
|
||||
<div class="mt-1 max-w-sm text-xs leading-5 text-zinc-500">{{ $item->description }}</div>
|
||||
@endif
|
||||
</td>
|
||||
<td class="px-4 py-4 align-top">
|
||||
<span class="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white px-2.5 py-1 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-200">
|
||||
<span class="h-3 w-3 rounded-full" style="background-color: {{ \Modules\Helpdesk\Support\Color::css($item->color) }}"></span>
|
||||
{{ \Illuminate\Support\Str::of(\Modules\Helpdesk\Support\Color::normalise($item->color))->headline() }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-3 py-2.5">
|
||||
<td class="px-4 py-4 align-top">
|
||||
<flux:badge color="{{ $item->is_default ?? false ? 'emerald' : 'zinc' }}">
|
||||
{{ $item->is_default ?? false ? 'Default' : 'No' }}</flux:badge>
|
||||
</td>
|
||||
<td class="px-3 py-2.5 text-zinc-500">{{ $item->tickets_count ?? 0 }}</td>
|
||||
<td class="px-3 py-2.5 text-right">
|
||||
<td class="px-4 py-4 align-top">
|
||||
<div class="flex max-w-xl flex-wrap gap-1.5">
|
||||
@forelse($item->users as $member)
|
||||
<span class="inline-flex items-center gap-1.5 rounded-full border border-zinc-700 bg-zinc-900 px-2.5 py-1 text-xs font-medium text-zinc-200">
|
||||
{{ $member->name }}
|
||||
<button
|
||||
type="button"
|
||||
wire:click="removeUserFromTeam({{ $item->id }}, {{ $member->id }})"
|
||||
wire:confirm="Remove {{ $member->name }} from {{ $item->name }}?"
|
||||
class="inline-flex h-4 w-4 items-center justify-center rounded-full text-zinc-500 transition hover:bg-red-500/15 hover:text-red-300"
|
||||
title="Remove {{ $member->name }} from team"
|
||||
>×</button>
|
||||
</span>
|
||||
@empty
|
||||
<span class="text-xs text-zinc-500">No members</span>
|
||||
@endforelse
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-4 align-top text-zinc-500">{{ $item->tickets_count ?? 0 }}</td>
|
||||
<td class="px-4 py-4 align-top text-right">
|
||||
<div class="flex justify-end gap-1.5"><button type="button"
|
||||
wire:click="editTeam({{ $item->id }})"
|
||||
class="hd-btn hd-btn-sm hd-btn-blue">Edit</button><button type="button"
|
||||
|
||||
+38
-1
@@ -209,7 +209,7 @@
|
||||
|
||||
@if ($section === 'teams')
|
||||
<x-helpdesk.settings-section title="Teams"
|
||||
description="Create support teams and assign projects to them.">
|
||||
description="Create support teams, assign users and organise projects.">
|
||||
<x-slot:form>
|
||||
<form wire:submit.prevent="saveTeam" class="grid gap-3 xl:grid-cols-12">
|
||||
<div class="xl:col-span-3">
|
||||
@@ -224,6 +224,43 @@
|
||||
<div class="xl:col-span-12">
|
||||
<flux:textarea wire:model="teamForm.description" label="Description" rows="3" />
|
||||
</div>
|
||||
<div class="xl:col-span-12">
|
||||
<div class="rounded-xl border border-zinc-700/80 bg-zinc-950/35 p-4">
|
||||
<div class="mb-3 flex flex-wrap items-center justify-between gap-2">
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-zinc-100">Team members</div>
|
||||
<div class="mt-0.5 text-xs text-zinc-500">Select one or more users to assign to this team.</div>
|
||||
</div>
|
||||
<div class="rounded-full bg-blue-500/10 px-2.5 py-1 text-xs font-semibold text-blue-300">
|
||||
{{ count($teamForm['user_ids'] ?? []) }} selected
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
|
||||
@forelse ($teamUsers as $teamUser)
|
||||
<label class="flex cursor-pointer items-center gap-3 rounded-lg border border-zinc-700 bg-zinc-900/60 p-3 transition hover:border-blue-500/60 hover:bg-zinc-900">
|
||||
<input
|
||||
type="checkbox"
|
||||
wire:model="teamForm.user_ids"
|
||||
value="{{ $teamUser->id }}"
|
||||
class="h-4 w-4 rounded border-zinc-600 bg-zinc-950 text-blue-600 focus:ring-blue-500"
|
||||
>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="truncate text-sm font-semibold text-zinc-100">{{ $teamUser->name }}</div>
|
||||
<div class="truncate text-xs text-zinc-500">{{ $teamUser->email }}</div>
|
||||
</div>
|
||||
@if ($teamUser->helpdesk_admin)
|
||||
<span class="rounded-full bg-purple-500/10 px-2 py-0.5 text-[10px] font-bold uppercase text-purple-300">Admin</span>
|
||||
@elseif ($teamUser->helpdesk_agent)
|
||||
<span class="rounded-full bg-blue-500/10 px-2 py-0.5 text-[10px] font-bold uppercase text-blue-300">Agent</span>
|
||||
@endif
|
||||
</label>
|
||||
@empty
|
||||
<div class="text-sm text-zinc-500">No users are available.</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200 xl:col-span-4">
|
||||
<input type="checkbox" wire:model="teamForm.is_default"
|
||||
class="rounded border-zinc-300 bg-zinc-950 text-blue-600 focus:ring-blue-500">
|
||||
|
||||
@@ -15,18 +15,36 @@
|
||||
@if(session('status'))<div class="hd-alert hd-alert-success">{{ session('status') }}</div>@endif
|
||||
@if($errors->any())<div class="hd-alert hd-alert-danger"><ul>@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>@endif
|
||||
|
||||
<section class="hd-panel overflow-x-auto">
|
||||
<section class="hd-panel overflow-hidden">
|
||||
<div class="p-5 border-b border-zinc-700"><h2 class="text-xl font-semibold">Roles</h2></div>
|
||||
<table class="w-full min-w-[760px]">
|
||||
<thead><tr><th>Name</th><th>Slug</th><th>Users</th><th>Permissions</th><th class="text-right">Actions</th></tr></thead>
|
||||
<tbody>
|
||||
<div class="overflow-x-auto"><table class="w-full min-w-[820px] border-collapse">
|
||||
<thead class="bg-zinc-900/55 text-left text-xs uppercase tracking-[0.12em] text-zinc-400">
|
||||
<tr>
|
||||
<th class="px-6 py-4 font-semibold">Name</th>
|
||||
<th class="px-6 py-4 font-semibold">Slug</th>
|
||||
<th class="px-6 py-4 text-center font-semibold">Users</th>
|
||||
<th class="px-6 py-4 text-center font-semibold">Permissions</th>
|
||||
<th class="px-6 py-4 text-right font-semibold">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-zinc-800/90">
|
||||
@forelse($roles as $role)
|
||||
<tr>
|
||||
<td><strong>{{ $role->name }}</strong>@if($role->is_system) <span class="hd-badge">System</span>@endif</td>
|
||||
<td><code>{{ $role->slug }}</code></td>
|
||||
<td>{{ $role->users_count }}</td>
|
||||
<td>{{ $role->permissions_count }}</td>
|
||||
<td><div class="flex justify-end gap-2">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<strong class="text-sm font-semibold text-zinc-100">{{ $role->name }}</strong>
|
||||
@if($role->is_system)
|
||||
<span class="rounded-full border border-blue-500/30 bg-blue-500/10 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-blue-300">System</span>
|
||||
@endif
|
||||
</div>
|
||||
@if($role->description)
|
||||
<div class="mt-1 max-w-xl text-xs leading-5 text-zinc-500">{{ $role->description }}</div>
|
||||
@endif
|
||||
</td>
|
||||
<td class="px-6 py-4"><code class="rounded-md bg-black/25 px-2 py-1 text-xs text-zinc-300">{{ $role->slug }}</code></td>
|
||||
<td class="px-6 py-4 text-center text-sm text-zinc-300">{{ $role->users_count }}</td>
|
||||
<td class="px-6 py-4 text-center text-sm text-zinc-300">{{ $role->permissions_count }}</td>
|
||||
<td class="px-6 py-4"><div class="flex justify-end gap-2">
|
||||
<a class="hd-action hd-action-blue" href="{{ route('user-management.roles.edit', $role) }}">Edit</a>
|
||||
@unless($role->is_system)
|
||||
<form method="POST" action="{{ route('user-management.roles.destroy', $role) }}" onsubmit="return confirm('Delete this role?')">@csrf @method('DELETE')
|
||||
@@ -39,20 +57,32 @@
|
||||
<tr><td colspan="5" class="p-5">No roles created.</td></tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</table></div>
|
||||
</section>
|
||||
|
||||
<section class="hd-panel overflow-x-auto">
|
||||
<section class="hd-panel overflow-hidden">
|
||||
<div class="p-5 border-b border-zinc-700"><h2 class="text-xl font-semibold">Permissions</h2></div>
|
||||
<table class="w-full min-w-[760px]">
|
||||
<thead><tr><th>Name</th><th>Slug</th><th>Roles</th><th class="text-right">Actions</th></tr></thead>
|
||||
<tbody>
|
||||
<div class="overflow-x-auto"><table class="w-full min-w-[820px] border-collapse">
|
||||
<thead class="bg-zinc-900/55 text-left text-xs uppercase tracking-[0.12em] text-zinc-400">
|
||||
<tr>
|
||||
<th class="px-6 py-4 font-semibold">Name</th>
|
||||
<th class="px-6 py-4 font-semibold">Slug</th>
|
||||
<th class="px-6 py-4 text-center font-semibold">Roles</th>
|
||||
<th class="px-6 py-4 text-right font-semibold">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-zinc-800/90">
|
||||
@forelse($permissions as $permission)
|
||||
<tr>
|
||||
<td><strong>{{ $permission->name }}</strong></td>
|
||||
<td><code>{{ $permission->slug }}</code></td>
|
||||
<td>{{ $permission->roles_count }}</td>
|
||||
<td><div class="flex justify-end gap-2">
|
||||
<td class="px-6 py-4">
|
||||
<strong class="text-sm font-semibold text-zinc-100">{{ $permission->name }}</strong>
|
||||
@if($permission->description)
|
||||
<div class="mt-1 max-w-xl text-xs leading-5 text-zinc-500">{{ $permission->description }}</div>
|
||||
@endif
|
||||
</td>
|
||||
<td class="px-6 py-4"><code class="rounded-md bg-black/25 px-2 py-1 text-xs text-zinc-300">{{ $permission->slug }}</code></td>
|
||||
<td class="px-6 py-4 text-center text-sm text-zinc-300">{{ $permission->roles_count }}</td>
|
||||
<td class="px-6 py-4"><div class="flex justify-end gap-2">
|
||||
<a class="hd-action hd-action-blue" href="{{ route('user-management.permissions.edit', $permission) }}">Edit</a>
|
||||
<form method="POST" action="{{ route('user-management.permissions.destroy', $permission) }}" onsubmit="return confirm('Delete this permission?')">@csrf @method('DELETE')
|
||||
<button class="hd-action hd-action-red" type="submit">Delete</button>
|
||||
@@ -63,7 +93,7 @@
|
||||
<tr><td colspan="4" class="p-5">No permissions created.</td></tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</table></div>
|
||||
</section>
|
||||
</div>
|
||||
</x-layouts::app>
|
||||
|
||||
Reference in New Issue
Block a user