add modal window for save compaint text template
This commit is contained in:
smanylov
@@ -7,6 +7,7 @@ import { createComplaint, fetchComplainInfo, MatchStatus } from '@/app/actions/v
|
||||
import { toast } from 'sonner';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { formatDate, formatDateTime } from '@/app/lib/formatDate';
|
||||
import ModalWindow from '@/app/components/ModalWindow';
|
||||
|
||||
interface complaintInfo {
|
||||
id: number,
|
||||
@@ -28,6 +29,8 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler }
|
||||
const [localViolation, setLocalViolation] = useState<ViolationFileDetail>(selectedViolation);
|
||||
const [noteText, setNoteText] = useState('');
|
||||
const [state, formAction, isPending] = useActionState(createComplaint, undefined);
|
||||
const [isTemplateModalOpen, setIsTemplateModalOpen] = useState(false);
|
||||
const [templateName, setTemplateName] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
setLocalViolation(selectedViolation);
|
||||
@@ -77,178 +80,256 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler }
|
||||
}
|
||||
}
|
||||
|
||||
function openTemplateSaveModal() {
|
||||
if (!noteText.trim()) {
|
||||
toast.warning(t('please-enter-complaint-text-first'));
|
||||
return;
|
||||
}
|
||||
setTemplateName('');
|
||||
setIsTemplateModalOpen(true);
|
||||
}
|
||||
|
||||
function saveTemplateHandler() {
|
||||
if (!templateName.trim()) {
|
||||
toast.warning(t('please-enter-template-name'));
|
||||
return;
|
||||
}
|
||||
|
||||
// пока нету эндпоинта оставлю заглушку
|
||||
console.log('СОХРАНЕНИЕ ШАБЛОНА');
|
||||
console.log('Название шаблона:', templateName);
|
||||
console.log('Текст жалобы:', noteText);
|
||||
console.log('========================');
|
||||
|
||||
toast.success(t('template-saved-successfully') || 'Шаблон успешно сохранен');
|
||||
setIsTemplateModalOpen(false);
|
||||
setTemplateName('');
|
||||
}
|
||||
|
||||
if (!ENABLED_STATUSES.includes(localViolation.status)) {
|
||||
return (
|
||||
<div className="violation-info-case">
|
||||
|
||||
<div className="note-form">
|
||||
<form action={formAction}>
|
||||
<input type="hidden" name="violationId" value={localViolation.id} />
|
||||
<section
|
||||
className="note-form-section"
|
||||
>
|
||||
<div
|
||||
className="note-form-group"
|
||||
<>
|
||||
<div className="violation-info-case">
|
||||
<div className="note-form">
|
||||
<form action={formAction}>
|
||||
<input type="hidden" name="violationId" value={localViolation.id} />
|
||||
<section
|
||||
className="note-form-section"
|
||||
>
|
||||
<label
|
||||
className="note-case-label"
|
||||
htmlFor="note"
|
||||
<div
|
||||
className="note-form-group"
|
||||
>
|
||||
{t('text-of-the-complaint')}
|
||||
</label>
|
||||
<label
|
||||
className="note-case-label"
|
||||
htmlFor="note"
|
||||
>
|
||||
{t('text-of-the-complaint')}
|
||||
</label>
|
||||
|
||||
<textarea
|
||||
name="note"
|
||||
className="note-textarea"
|
||||
placeholder={`${t('text-area-error-fill-complaint-text')}...`}
|
||||
value={noteText}
|
||||
onChange={(e) => setNoteText(e.target.value)}
|
||||
<textarea
|
||||
name="note"
|
||||
className="note-textarea"
|
||||
placeholder={`${t('text-area-error-fill-complaint-text')}...`}
|
||||
value={noteText}
|
||||
onChange={(e) => setNoteText(e.target.value)}
|
||||
>
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
{state?.errorMessage?.textArea && (
|
||||
<p
|
||||
className="text-sm text-red-500"
|
||||
>
|
||||
{
|
||||
state?.errorMessage?.textArea.split('&').map((e, index) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
{t(e)}
|
||||
<br />
|
||||
</span>
|
||||
)
|
||||
})
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<div
|
||||
className="button-actions"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-s btn-primary-small"
|
||||
onClick={openTemplateSaveModal}
|
||||
>
|
||||
</textarea>
|
||||
{t('save-template')}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="btn-s btn-primary-small"
|
||||
disabled={isPending}
|
||||
>
|
||||
{t('submit-violation')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
className="samples-wrapper"
|
||||
>
|
||||
<h5>Шаблоны</h5>
|
||||
|
||||
{state?.errorMessage?.textArea && (
|
||||
<p
|
||||
className="text-sm text-red-500"
|
||||
>
|
||||
|
||||
{
|
||||
state?.errorMessage?.textArea.split('&').map((e, index) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
{t(e)}
|
||||
<br />
|
||||
</span>
|
||||
)
|
||||
})
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<div
|
||||
className="button-actions"
|
||||
<ul
|
||||
className="samples-list"
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn-s btn-primary-small"
|
||||
disabled={isPending}
|
||||
<li
|
||||
className="sample-item"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
templateHandler(e)
|
||||
}}
|
||||
>
|
||||
Сохранить шаблон
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="btn-s btn-primary-small"
|
||||
disabled={isPending}
|
||||
<div
|
||||
className="sample-item-title"
|
||||
>
|
||||
title 1
|
||||
</div>
|
||||
<div
|
||||
className="sample-item-text"
|
||||
>
|
||||
1text text text text text text text text text text text text
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className="sample-item"
|
||||
onClick={(e) => {
|
||||
templateHandler(e)
|
||||
}}
|
||||
>
|
||||
{t('submit-violation')}
|
||||
<div
|
||||
className="sample-item-title"
|
||||
>
|
||||
title 2
|
||||
</div>
|
||||
<div
|
||||
className="sample-item-text"
|
||||
>
|
||||
2text text text text text text text text text text text text
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className="sample-item"
|
||||
onClick={(e) => {
|
||||
templateHandler(e)
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="sample-item-title"
|
||||
>
|
||||
title 3
|
||||
</div>
|
||||
<div
|
||||
className="sample-item-text"
|
||||
>
|
||||
3text text text text text text text text text text text text
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li
|
||||
className="sample-item"
|
||||
onClick={(e) => {
|
||||
templateHandler(e)
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="sample-item-title"
|
||||
>
|
||||
title 3
|
||||
</div>
|
||||
<div
|
||||
className="sample-item-text"
|
||||
>
|
||||
3text text text text text text text text text text text text
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li
|
||||
className="sample-item"
|
||||
onClick={(e) => {
|
||||
templateHandler(e)
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="sample-item-title"
|
||||
>
|
||||
title 3
|
||||
</div>
|
||||
<div
|
||||
className="sample-item-text"
|
||||
>
|
||||
3text text text text text text text text text text text text
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ModalWindow
|
||||
state={isTemplateModalOpen}
|
||||
callBack={setIsTemplateModalOpen}
|
||||
>
|
||||
<div className="template-modal-content">
|
||||
<div className="template-modal-header">
|
||||
<h3>{t('save-template')}</h3>
|
||||
<button
|
||||
className="template-modal-close"
|
||||
onClick={() => setIsTemplateModalOpen(false)}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="template-modal-body">
|
||||
<div className="template-form-group">
|
||||
<label htmlFor="templateName">
|
||||
{t('template-name')}:
|
||||
</label>
|
||||
<input
|
||||
id="templateName"
|
||||
type="text"
|
||||
className="template-name-input"
|
||||
placeholder={t('enter-template-name')}
|
||||
value={templateName}
|
||||
onChange={(e) => setTemplateName(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div
|
||||
className="samples-wrapper"
|
||||
>
|
||||
<h5>Шаблоны</h5>
|
||||
|
||||
<ul
|
||||
className="samples-list"
|
||||
>
|
||||
<li
|
||||
className="sample-item"
|
||||
onClick={(e) => {
|
||||
templateHandler(e)
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="sample-item-title"
|
||||
>
|
||||
title 1
|
||||
<div className="template-preview">
|
||||
<div className="template-preview-label">
|
||||
{t('complaint-text-preview')}
|
||||
</div>
|
||||
<div className="template-preview-text">
|
||||
{noteText || t('no-text')}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="sample-item-text"
|
||||
</div>
|
||||
<div className="template-modal-footer">
|
||||
<button
|
||||
className="btn-s btn-primary-small"
|
||||
onClick={() => setIsTemplateModalOpen(false)}
|
||||
>
|
||||
1text text text text text text text text text text text text
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className="sample-item"
|
||||
onClick={(e) => {
|
||||
templateHandler(e)
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="sample-item-title"
|
||||
{t('cancel')}
|
||||
</button>
|
||||
<button
|
||||
className="btn-s btn-resolve"
|
||||
onClick={saveTemplateHandler}
|
||||
>
|
||||
title 2
|
||||
</div>
|
||||
<div
|
||||
className="sample-item-text"
|
||||
>
|
||||
2text text text text text text text text text text text text
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className="sample-item"
|
||||
onClick={(e) => {
|
||||
templateHandler(e)
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="sample-item-title"
|
||||
>
|
||||
title 3
|
||||
</div>
|
||||
<div
|
||||
className="sample-item-text"
|
||||
>
|
||||
3text text text text text text text text text text text text
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li
|
||||
className="sample-item"
|
||||
onClick={(e) => {
|
||||
templateHandler(e)
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="sample-item-title"
|
||||
>
|
||||
title 3
|
||||
</div>
|
||||
<div
|
||||
className="sample-item-text"
|
||||
>
|
||||
3text text text text text text text text text text text text
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li
|
||||
className="sample-item"
|
||||
onClick={(e) => {
|
||||
templateHandler(e)
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="sample-item-title"
|
||||
>
|
||||
title 3
|
||||
</div>
|
||||
<div
|
||||
className="sample-item-text"
|
||||
>
|
||||
3text text text text text text text text text text text text
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{t('save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ModalWindow>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
if (isLoadingComplain) {
|
||||
|
||||
Reference in New Issue
Block a user