intial ticket fix
This commit is contained in:
Mark Gregory
@@ -260,19 +260,57 @@
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-3 xl:col-span-6">
|
||||
<label class="block text-sm font-semibold text-zinc-200" for="body">
|
||||
<label class="block text-sm font-semibold text-zinc-200" for="body-editor">
|
||||
Details <span class="helpdesk-required-star">*</span>
|
||||
</label>
|
||||
|
||||
<textarea
|
||||
id="body"
|
||||
rows="10"
|
||||
wire:model.defer="body"
|
||||
class="mt-2 block min-h-[18rem] w-full rounded-xl border border-zinc-700 bg-zinc-950 px-4 py-3 text-sm leading-6 text-zinc-100 shadow-sm outline-none transition-colors duration-150 placeholder:text-zinc-500 focus:border-blue-500 focus:bg-zinc-950 focus:ring-2 focus:ring-blue-500/40"
|
||||
placeholder="Describe the issue, expected outcome, steps to reproduce and any useful context..."
|
||||
data-dusk="ticket-body-editor"
|
||||
dusk="ticket-body-editor"
|
||||
></textarea>
|
||||
<div class="mt-2 overflow-hidden rounded-xl border border-zinc-700 bg-zinc-950 shadow-sm focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/40" wire:ignore>
|
||||
<div class="flex flex-wrap items-center gap-1 border-b border-zinc-700 bg-zinc-900 px-3 py-2">
|
||||
<button type="button" class="helpdesk-editor-button" data-helpdesk-editor-command="bold" aria-label="Bold">
|
||||
<i class="fa-solid fa-bold" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
<button type="button" class="helpdesk-editor-button" data-helpdesk-editor-command="italic" aria-label="Italic">
|
||||
<i class="fa-solid fa-italic" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
<button type="button" class="helpdesk-editor-button" data-helpdesk-editor-command="underline" aria-label="Underline">
|
||||
<i class="fa-solid fa-underline" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
<span class="mx-1 h-6 w-px bg-zinc-700" aria-hidden="true"></span>
|
||||
|
||||
<button type="button" class="helpdesk-editor-button" data-helpdesk-editor-command="insertUnorderedList" aria-label="Bullet list">
|
||||
<i class="fa-solid fa-list-ul" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
<button type="button" class="helpdesk-editor-button" data-helpdesk-editor-command="insertOrderedList" aria-label="Numbered list">
|
||||
<i class="fa-solid fa-list-ol" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
<span class="mx-1 h-6 w-px bg-zinc-700" aria-hidden="true"></span>
|
||||
|
||||
<button type="button" class="helpdesk-editor-button" data-helpdesk-editor-format="pre" aria-label="Code block">
|
||||
<i class="fa-solid fa-code" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
<button type="button" class="helpdesk-editor-button" data-helpdesk-editor-link aria-label="Insert link">
|
||||
<i class="fa-solid fa-link" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="body-editor"
|
||||
class="min-h-[18rem] w-full px-4 py-3 text-sm leading-6 text-zinc-100 outline-none empty:before:text-zinc-500 empty:before:content-[attr(data-placeholder)]"
|
||||
contenteditable="true"
|
||||
data-helpdesk-details-editor
|
||||
data-placeholder="Describe the issue, expected outcome, steps to reproduce and any useful context..."
|
||||
data-dusk="ticket-body-editor"
|
||||
dusk="ticket-body-editor"
|
||||
>{!! $body ?? '' !!}</div>
|
||||
</div>
|
||||
|
||||
<textarea id="body" wire:model.defer="body" class="sr-only" tabindex="-1" aria-hidden="true"></textarea>
|
||||
|
||||
@error('body')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@@ -356,4 +394,73 @@
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<style>
|
||||
.helpdesk-editor-button {
|
||||
display: inline-flex;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0.625rem;
|
||||
color: rgb(212 212 216);
|
||||
transition: background-color 150ms ease, color 150ms ease;
|
||||
}
|
||||
|
||||
.helpdesk-editor-button:hover,
|
||||
.helpdesk-editor-button:focus {
|
||||
background: rgb(37 99 235);
|
||||
color: white;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const form = document.querySelector('.helpdesk-ticket-form');
|
||||
const editor = document.querySelector('[data-helpdesk-details-editor]');
|
||||
const bodyField = document.getElementById('body');
|
||||
|
||||
if (!form || !editor || !bodyField) {
|
||||
return;
|
||||
}
|
||||
|
||||
const syncBody = function () {
|
||||
bodyField.value = editor.innerHTML.trim();
|
||||
bodyField.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
bodyField.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
};
|
||||
|
||||
document.querySelectorAll('[data-helpdesk-editor-command]').forEach(function (button) {
|
||||
button.addEventListener('click', function () {
|
||||
editor.focus();
|
||||
document.execCommand(button.dataset.helpdeskEditorCommand, false, null);
|
||||
syncBody();
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-helpdesk-editor-format]').forEach(function (button) {
|
||||
button.addEventListener('click', function () {
|
||||
editor.focus();
|
||||
document.execCommand('formatBlock', false, button.dataset.helpdeskEditorFormat);
|
||||
syncBody();
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-helpdesk-editor-link]').forEach(function (button) {
|
||||
button.addEventListener('click', function () {
|
||||
const url = window.prompt('Enter link URL');
|
||||
|
||||
if (!url) {
|
||||
return;
|
||||
}
|
||||
|
||||
editor.focus();
|
||||
document.execCommand('createLink', false, url);
|
||||
syncBody();
|
||||
});
|
||||
});
|
||||
|
||||
editor.addEventListener('blur', syncBody);
|
||||
form.addEventListener('submit', syncBody);
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
@@ -200,6 +200,7 @@
|
||||
<th class="px-4 py-3">Agent</th>
|
||||
<th class="px-4 py-3 text-center">Files</th>
|
||||
<th class="px-4 py-3">Last activity</th>
|
||||
<th class="px-4 py-3 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
|
||||
@@ -232,10 +233,25 @@
|
||||
@endif
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3 text-zinc-500">{{ $ticket->last_activity_at?->diffForHumans() ?? $ticket->created_at->diffForHumans() }}</td>
|
||||
<td class="whitespace-nowrap px-4 py-3 text-right">
|
||||
@can('delete', $ticket)
|
||||
<button
|
||||
type="button"
|
||||
wire:click="deleteTicket({{ $ticket->id }})"
|
||||
wire:confirm="Delete ticket {{ $ticket->reference }}? This action cannot be undone."
|
||||
class="hd-btn hd-btn-sm hd-btn-red"
|
||||
title="Delete {{ $ticket->reference }}"
|
||||
dusk="delete-ticket-{{ $ticket->id }}"
|
||||
>
|
||||
<i class="fa-solid fa-trash" aria-hidden="true"></i>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
@endcan
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="7" class="px-4 py-12 text-center text-zinc-500">No tickets matched your filters.</td>
|
||||
<td colspan="8" class="px-4 py-12 text-center text-zinc-500">No tickets matched your filters.</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
|
||||
Reference in New Issue
Block a user