Added visible Spellcheck on indicator.
* Added spellcheck helper text under Details. * Fixed Clear so it resets editor content, hidden body field, subject, attachments, Select2 fields and date picker. * Added regression test. * Append-only changelog. * module.json version 1.9.44.
This commit is contained in:
@@ -265,6 +265,12 @@
|
|||||||
aria-label="Insert link">
|
aria-label="Insert link">
|
||||||
<i class="fa-solid fa-link" aria-hidden="true"></i>
|
<i class="fa-solid fa-link" aria-hidden="true"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
<span class="ml-auto inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-200"
|
||||||
|
title="Browser spellcheck is enabled. Misspelled words will be underlined by your browser.">
|
||||||
|
<i class="fa-solid fa-spell-check" aria-hidden="true"></i>
|
||||||
|
Spellcheck on
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="body-editor"
|
<div id="body-editor"
|
||||||
@@ -276,6 +282,11 @@
|
|||||||
|
|
||||||
<textarea id="body" spellcheck="true" lang="en-GB" wire:model="body" class="sr-only" tabindex="-1" aria-hidden="true"></textarea>
|
<textarea id="body" spellcheck="true" lang="en-GB" wire:model="body" class="sr-only" tabindex="-1" aria-hidden="true"></textarea>
|
||||||
|
|
||||||
|
<p class="mt-2 flex items-center gap-2 text-xs font-medium text-zinc-400">
|
||||||
|
<i class="fa-solid fa-spell-check text-emerald-400" aria-hidden="true"></i>
|
||||||
|
Browser spellcheck is enabled for Details. Misspelled words are underlined while you type.
|
||||||
|
</p>
|
||||||
|
|
||||||
@error('body')
|
@error('body')
|
||||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||||
@enderror
|
@enderror
|
||||||
@@ -321,9 +332,12 @@
|
|||||||
</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">
|
||||||
<button type="button" wire:click="clearForm"
|
<button type="button" wire:click="clearForm" wire:loading.attr="disabled" wire:target="clearForm"
|
||||||
class="rounded-xl bg-red-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-700">
|
class="inline-flex items-center gap-2 rounded-xl bg-red-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||||
Clear
|
data-dusk="ticket-create-clear" dusk="ticket-create-clear">
|
||||||
|
<i class="fa-solid fa-eraser" aria-hidden="true"></i>
|
||||||
|
<span wire:loading.remove wire:target="clearForm">Clear</span>
|
||||||
|
<span wire:loading wire:target="clearForm">Clearing...</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<a href="{{ route('helpdesk.tickets.index') }}" wire:navigate
|
<a href="{{ route('helpdesk.tickets.index') }}" wire:navigate
|
||||||
@@ -379,6 +393,48 @@
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const resetTicketCreateFormDom = () => {
|
||||||
|
document.querySelectorAll('.helpdesk-ticket-form').forEach((form) => {
|
||||||
|
const editor = form.querySelector('[data-helpdesk-details-editor]');
|
||||||
|
const bodyField = form.querySelector('#body');
|
||||||
|
const subjectField = form.querySelector('#subject');
|
||||||
|
const attachmentField = form.querySelector('#attachments');
|
||||||
|
|
||||||
|
if (editor) {
|
||||||
|
editor.innerHTML = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (bodyField) {
|
||||||
|
bodyField.value = '';
|
||||||
|
bodyField.dispatchEvent(new Event('input', { bubbles: true }));
|
||||||
|
bodyField.dispatchEvent(new Event('change', { bubbles: true }));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (subjectField) {
|
||||||
|
subjectField.value = '';
|
||||||
|
subjectField.dispatchEvent(new Event('input', { bubbles: true }));
|
||||||
|
subjectField.dispatchEvent(new Event('change', { bubbles: true }));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (attachmentField) {
|
||||||
|
attachmentField.value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (window.clearHelpdeskFormControls) {
|
||||||
|
window.clearHelpdeskFormControls();
|
||||||
|
}
|
||||||
|
|
||||||
|
const livewireRoot = form.closest('[wire\:id]');
|
||||||
|
const livewireId = livewireRoot?.getAttribute('wire:id');
|
||||||
|
const component = livewireId && window.Livewire?.find(livewireId);
|
||||||
|
|
||||||
|
if (component) {
|
||||||
|
component.set('subject', '', false);
|
||||||
|
component.set('body', '', false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const initialiseTicketCreateEditor = () => {
|
const initialiseTicketCreateEditor = () => {
|
||||||
document.querySelectorAll('.helpdesk-ticket-form').forEach((form) => {
|
document.querySelectorAll('.helpdesk-ticket-form').forEach((form) => {
|
||||||
const editor = form.querySelector('[data-helpdesk-details-editor]');
|
const editor = form.querySelector('[data-helpdesk-details-editor]');
|
||||||
@@ -430,6 +486,14 @@
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
document.addEventListener('helpdesk-form-cleared', resetTicketCreateFormDom);
|
||||||
|
document.addEventListener('helpdesk-editor-reset', resetTicketCreateFormDom);
|
||||||
|
|
||||||
|
if (window.Livewire?.on) {
|
||||||
|
window.Livewire.on('helpdesk-form-cleared', resetTicketCreateFormDom);
|
||||||
|
window.Livewire.on('helpdesk-editor-reset', resetTicketCreateFormDom);
|
||||||
|
}
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', initialiseTicketCreateEditor);
|
document.addEventListener('DOMContentLoaded', initialiseTicketCreateEditor);
|
||||||
document.addEventListener('livewire:navigated', initialiseTicketCreateEditor);
|
document.addEventListener('livewire:navigated', initialiseTicketCreateEditor);
|
||||||
initialiseTicketCreateEditor();
|
initialiseTicketCreateEditor();
|
||||||
|
|||||||
@@ -151,3 +151,14 @@
|
|||||||
- Added README workflow instructions for create, public reply, internal note, close, reopen, SLA, timers, attachments, spell checking and ticket reference sequencing.
|
- Added README workflow instructions for create, public reply, internal note, close, reopen, SLA, timers, attachments, spell checking and ticket reference sequencing.
|
||||||
- Added regression coverage for the sequence implementation, spellcheck wiring and documented stabilised workflows.
|
- Added regression coverage for the sequence implementation, spellcheck wiring and documented stabilised workflows.
|
||||||
- Preserved append-only changelog history.
|
- Preserved append-only changelog history.
|
||||||
|
|
||||||
|
- version: 1.9.44
|
||||||
|
date: 2026-06-23
|
||||||
|
type: bugfix
|
||||||
|
summary: Make Helpdesk ticket create spellcheck visible and repair Clear button DOM reset behaviour.
|
||||||
|
changes:
|
||||||
|
- Added a visible Spellcheck on badge and explanatory helper text to the ticket Details editor so users can see browser spellcheck is active.
|
||||||
|
- Updated the Create Ticket Clear action with a loading state and Dusk hook.
|
||||||
|
- Added inline reset handling for the rich-text editor, hidden body field, subject field, attachments, Select2 controls and date picker controls after the Livewire clear event.
|
||||||
|
- Added regression coverage to prevent the visible spellcheck marker and clear-form reset wiring from being removed accidentally.
|
||||||
|
- Preserved append-only changelog history.
|
||||||
|
|||||||
@@ -22,5 +22,5 @@
|
|||||||
"Modules\\Helpdesk\\Providers\\HelpdeskServiceProvider"
|
"Modules\\Helpdesk\\Providers\\HelpdeskServiceProvider"
|
||||||
],
|
],
|
||||||
"files": [],
|
"files": [],
|
||||||
"version": "1.9.43"
|
"version": "1.9.44"
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user