mag/WMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated the helpdesk module

Browse Source
This commit is contained in:
Mark Gregory
2026-06-14 15:41:23 +01:00
parent 16d8ae1b8c
commit ac19c8ef37
1 changed files with 118 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
+118 -26
View File
@@ -1,4 +1,28 @@
<div class="space-y-6"> <div class="space-y-6">
<style>
.helpdesk-required-star {
color: #ef4444 !important;
font-weight: 800;
}
.select2-container--default .select2-selection--single {
position: relative;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
position: absolute !important;
top: 50% !important;
right: 2.25rem !important;
left: auto !important;
float: none !important;
margin: 0 !important;
transform: translateY(-50%);
color: #f87171 !important;
font-weight: 800 !important;
z-index: 5;
}
</style>
@include('helpdesk::partials.page-header', [ @include('helpdesk::partials.page-header', [
'eyebrow' => 'Helpdesk', 'eyebrow' => 'Helpdesk',
'title' => 'Create Ticket', 'title' => 'Create Ticket',
@@ -9,95 +33,163 @@
<div class="overflow-hidden rounded-2xl border border-zinc-700 bg-zinc-900 shadow-sm"> <div class="overflow-hidden rounded-2xl border border-zinc-700 bg-zinc-900 shadow-sm">
<div class="border-b border-zinc-700 bg-zinc-800/80 px-6 py-4"> <div class="border-b border-zinc-700 bg-zinc-800/80 px-6 py-4">
<h2 class="text-lg font-semibold text-zinc-100">Ticket details</h2> <h2 class="text-lg font-semibold text-zinc-100">Ticket details</h2>
<p class="mt-1 text-sm text-zinc-400">Mandatory fields are marked with <span class="font-bold text-red-400">*</span>. Use the searchable lists to keep the ticket correctly routed.</p> <p class="mt-1 text-sm text-zinc-400">
Mandatory fields are marked with <span class="helpdesk-required-star">*</span>.
Use the searchable lists to keep the ticket correctly routed.
</p>
</div> </div>
<div class="grid gap-5 p-6 lg:grid-cols-3 xl:grid-cols-6"> <div class="grid gap-5 p-6 lg:grid-cols-3 xl:grid-cols-6">
<div class="lg:col-span-3 xl:col-span-6"> <div class="lg:col-span-3 xl:col-span-6">
<label class="block text-sm font-semibold text-zinc-200" for="subject">Subject <span class="text-red-400">*</span></label> <label class="block text-sm font-semibold text-zinc-200" for="subject">
<input id="subject" type="text" wire:model.defer="subject" class="mt-2 block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500" data-dusk="ticket-subject"> Subject <span class="helpdesk-required-star">*</span>
@error('subject') <p class="mt-2 text-sm text-red-500">{{ $message }}</p> @enderror </label>
<textarea
id="subject"
rows="3"
wire:model.defer="subject"
class="mt-2 block min-h-[92px] w-full resize-y rounded-xl border-zinc-700 bg-zinc-950 px-4 py-3 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
data-dusk="ticket-subject"
></textarea>
@error('subject')
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
@enderror
</div> </div>
@if($companies->isNotEmpty()) @if($companies->isNotEmpty())
<div> <div class="xl:col-span-2">
<label class="block text-sm font-semibold text-zinc-200" for="company_id">Company</label> <label class="block text-sm font-semibold text-zinc-200" for="company_id">
Company <span class="helpdesk-required-star">*</span>
</label>
<select id="company_id" wire:model.defer="company_id" data-helpdesk-select2 class="mt-2 block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"> <select id="company_id" wire:model.defer="company_id" data-helpdesk-select2 class="mt-2 block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<option value="">Select company</option> <option value="">Select company</option>
@foreach ($companies as $company) @foreach ($companies as $company)
<option value="{{ $company->id }}">{{ $company->name }}</option> <option value="{{ $company->id }}">{{ $company->name }}</option>
@endforeach @endforeach
</select> </select>
@error('company_id') <p class="mt-2 text-sm text-red-500">{{ $message }}</p> @enderror
@error('company_id')
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
@enderror
</div> </div>
@endif @endif
<div> <div class="xl:col-span-2">
<label class="block text-sm font-semibold text-zinc-200" for="priority_id">Priority <span class="text-red-400">*</span></label> <label class="block text-sm font-semibold text-zinc-200" for="priority_id">
Priority <span class="helpdesk-required-star">*</span>
</label>
<select id="priority_id" wire:model.defer="priority_id" data-helpdesk-select2 class="mt-2 block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500" data-dusk="ticket-priority"> <select id="priority_id" wire:model.defer="priority_id" data-helpdesk-select2 class="mt-2 block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500" data-dusk="ticket-priority">
<option value="">Select priority</option> <option value="">Select priority</option>
@foreach ($priorities as $priority) @foreach ($priorities as $priority)
<option value="{{ $priority->id }}">{{ $priority->name }}</option> <option value="{{ $priority->id }}">{{ $priority->name }}</option>
@endforeach @endforeach
</select> </select>
@error('priority_id') <p class="mt-2 text-sm text-red-500">{{ $message }}</p> @enderror
@error('priority_id')
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
@enderror
</div> </div>
<div> <div class="xl:col-span-2">
<label class="block text-sm font-semibold text-zinc-200" for="category_id">Category</label> <label class="block text-sm font-semibold text-zinc-200" for="category_id">
Category <span class="helpdesk-required-star">*</span>
</label>
<select id="category_id" wire:model.defer="category_id" data-helpdesk-select2 class="mt-2 block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"> <select id="category_id" wire:model.defer="category_id" data-helpdesk-select2 class="mt-2 block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<option value="">Select category</option> <option value="">Select category</option>
@foreach ($categories as $category) @foreach ($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}</option> <option value="{{ $category->id }}">{{ $category->name }}</option>
@endforeach @endforeach
</select> </select>
@error('category_id') <p class="mt-2 text-sm text-red-500">{{ $message }}</p> @enderror
@error('category_id')
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
@enderror
</div> </div>
<div> <div class="xl:col-span-2">
<label class="block text-sm font-semibold text-zinc-200" for="project_id">Project</label> <label class="block text-sm font-semibold text-zinc-200" for="project_id">
Project <span class="helpdesk-required-star">*</span>
</label>
<select id="project_id" wire:model.defer="project_id" data-helpdesk-select2 class="mt-2 block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"> <select id="project_id" wire:model.defer="project_id" data-helpdesk-select2 class="mt-2 block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<option value="">Select project</option> <option value="">Select project</option>
@foreach ($projects as $project) @foreach ($projects as $project)
<option value="{{ $project->id }}">{{ $project->title ?? $project->name }}</option> <option value="{{ $project->id }}">{{ $project->title ?? $project->name }}</option>
@endforeach @endforeach
</select> </select>
@error('project_id') <p class="mt-2 text-sm text-red-500">{{ $message }}</p> @enderror
@error('project_id')
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
@enderror
</div> </div>
<div> <div class="xl:col-span-2">
<label class="block text-sm font-semibold text-zinc-200" for="team_id">Team</label> <label class="block text-sm font-semibold text-zinc-200" for="team_id">
Team <span class="helpdesk-required-star">*</span>
</label>
<select id="team_id" wire:model.defer="team_id" data-helpdesk-select2 class="mt-2 block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"> <select id="team_id" wire:model.defer="team_id" data-helpdesk-select2 class="mt-2 block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<option value="">Select team</option> <option value="">Select team</option>
@foreach ($teams as $team) @foreach ($teams as $team)
<option value="{{ $team->id }}">{{ $team->name }}</option> <option value="{{ $team->id }}">{{ $team->name }}</option>
@endforeach @endforeach
</select> </select>
@error('team_id') <p class="mt-2 text-sm text-red-500">{{ $message }}</p> @enderror
@error('team_id')
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
@enderror
</div> </div>
<div> <div class="xl:col-span-2">
<label class="block text-sm font-semibold text-zinc-200" for="due_at">Due date</label> <label class="block text-sm font-semibold text-zinc-200" for="due_at">Due date</label>
<input id="due_at" type="date" wire:model.defer="due_at" class="mt-2 block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"> <input id="due_at" type="date" wire:model.defer="due_at" class="mt-2 block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
@error('due_at') <p class="mt-2 text-sm text-red-500">{{ $message }}</p> @enderror
@error('due_at')
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
@enderror
</div> </div>
<div class="lg:col-span-3 xl:col-span-6"> <div class="lg:col-span-3 xl:col-span-6">
<x-helpdesk::html-editor dusk="ticket-body-editor" wire:model="body" label="Details *" rows="10" placeholder="Describe the issue, expected outcome, steps to reproduce and any useful context..." /> <x-helpdesk::html-editor dusk="ticket-body-editor" wire:model="body" label="Details *" rows="10" placeholder="Describe the issue, expected outcome, steps to reproduce and any useful context..." />
@error('body') <p class="mt-2 text-sm text-red-500">{{ $message }}</p> @enderror
@error('body')
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
@enderror
</div> </div>
<div class="lg:col-span-3 xl:col-span-6"> <div class="lg:col-span-3 xl:col-span-6">
<label class="block text-sm font-semibold text-zinc-200" for="attachments">Attachments</label> <label class="block text-sm font-semibold text-zinc-200" for="attachments">Attachments</label>
<input id="attachments" type="file" wire:model="attachments" multiple class="mt-2 block w-full rounded-xl border border-zinc-700 bg-zinc-950 px-3 py-2 text-sm text-zinc-100 shadow-sm"> <input id="attachments" type="file" wire:model="attachments" multiple class="mt-2 block w-full rounded-xl border border-zinc-700 bg-zinc-950 px-3 py-2 text-sm text-zinc-100 shadow-sm">
@error('attachments') <p class="mt-2 text-sm text-red-500">{{ $message }}</p> @enderror
@error('attachments.*') <p class="mt-2 text-sm text-red-500">{{ $message }}</p> @enderror @error('attachments')
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
@enderror
@error('attachments.*')
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
@enderror
</div> </div>
</div> </div>
<div class="flex items-center justify-end gap-3 border-t border-zinc-700 bg-zinc-900 px-6 py-4"> <div class="flex items-center justify-end gap-3 border-t border-zinc-700 bg-zinc-900 px-6 py-4">
<a href="{{ route('helpdesk.tickets.index') }}" wire:navigate class="rounded-xl bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700">Cancel</a> <a href="{{ route('helpdesk.tickets.index') }}" wire:navigate class="rounded-xl bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700">
<button type="submit" class="rounded-xl bg-emerald-600 px-5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50" data-dusk="ticket-create-submit" wire:loading.attr="disabled"> Cancel
</a>
<button
type="submit"
class="inline-flex items-center gap-2 rounded-xl bg-green-600 px-5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
data-dusk="ticket-create-submit"
wire:loading.attr="disabled"
>
<i class="fa-regular fa-floppy-disk" aria-hidden="true"></i>
<span wire:loading.remove>Create Ticket</span> <span wire:loading.remove>Create Ticket</span>
<span wire:loading>Creating...</span> <span wire:loading>Creating...</span>
</button> </button>