df-ae-forms-package 1.1.11 → 1.1.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +5 -17
- package/dist/index.esm.js +62 -109
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +62 -109
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -423,8 +423,6 @@ interface DfFormPreviewProps {
|
|
|
423
423
|
};
|
|
424
424
|
onCreateIssue?: (issueData: any, attachments: File[]) => Promise<any>;
|
|
425
425
|
onUpdateIssue?: (issueId: string, updateData: any) => Promise<void>;
|
|
426
|
-
allowWorkflowActions?: boolean;
|
|
427
|
-
inEditMode?: boolean;
|
|
428
426
|
}
|
|
429
427
|
declare const DfFormPreview: React.FC<DfFormPreviewProps>;
|
|
430
428
|
|
|
@@ -453,8 +451,6 @@ interface DfFormInputProps {
|
|
|
453
451
|
firstName?: string;
|
|
454
452
|
lastName?: string;
|
|
455
453
|
};
|
|
456
|
-
allowWorkflowActions?: boolean;
|
|
457
|
-
inEditMode?: boolean;
|
|
458
454
|
}
|
|
459
455
|
declare const DfFormInput: React.FC<DfFormInputProps>;
|
|
460
456
|
|
|
@@ -708,15 +704,13 @@ interface DfFormSectionProps {
|
|
|
708
704
|
onAttachmentChange?: (componentId: string, attachments: File[] | null) => void;
|
|
709
705
|
workOrderNumber?: string;
|
|
710
706
|
assetNumber?: string;
|
|
707
|
+
isStandalone?: boolean;
|
|
711
708
|
user?: {
|
|
712
709
|
firstName?: string;
|
|
713
710
|
lastName?: string;
|
|
714
711
|
};
|
|
715
|
-
onCreateIssue?: (issueData: any, attachments:
|
|
712
|
+
onCreateIssue?: (issueData: any, attachments: File[]) => Promise<any>;
|
|
716
713
|
onUpdateIssue?: (issueId: string, updateData: any) => Promise<void>;
|
|
717
|
-
allowWorkflowActions?: boolean;
|
|
718
|
-
inEditMode?: boolean;
|
|
719
|
-
isStandalone?: boolean;
|
|
720
714
|
}
|
|
721
715
|
declare const DfFormSection: React.FC<DfFormSectionProps>;
|
|
722
716
|
|
|
@@ -786,15 +780,13 @@ interface DfFormTableProps {
|
|
|
786
780
|
onAttachmentChange?: (componentId: string, attachments: File[] | null) => void;
|
|
787
781
|
workOrderNumber?: string;
|
|
788
782
|
assetNumber?: string;
|
|
783
|
+
isStandalone?: boolean;
|
|
789
784
|
user?: {
|
|
790
785
|
firstName?: string;
|
|
791
786
|
lastName?: string;
|
|
792
787
|
};
|
|
793
|
-
onCreateIssue?: (issueData: any, attachments:
|
|
788
|
+
onCreateIssue?: (issueData: any, attachments: File[]) => Promise<any>;
|
|
794
789
|
onUpdateIssue?: (issueId: string, updateData: any) => Promise<void>;
|
|
795
|
-
allowWorkflowActions?: boolean;
|
|
796
|
-
inEditMode?: boolean;
|
|
797
|
-
isStandalone?: boolean;
|
|
798
790
|
}
|
|
799
791
|
declare const DfFormTable: React.FC<DfFormTableProps>;
|
|
800
792
|
|
|
@@ -820,8 +812,6 @@ interface IComponentActionFeaturesProps {
|
|
|
820
812
|
};
|
|
821
813
|
onCreateIssue?: (issueData: any, attachments: File[]) => Promise<any>;
|
|
822
814
|
onUpdateIssue?: (issueId: string, updateData: any) => Promise<void>;
|
|
823
|
-
allowWorkflowActions?: boolean;
|
|
824
|
-
inEditMode?: boolean;
|
|
825
815
|
}
|
|
826
816
|
declare const ComponentActionFeatures: React.FC<IComponentActionFeaturesProps>;
|
|
827
817
|
|
|
@@ -846,8 +836,6 @@ interface IThresholdAlertProps {
|
|
|
846
836
|
onIssueRaised?: (conditionId: string) => void;
|
|
847
837
|
isIssueRaised?: boolean;
|
|
848
838
|
compact?: boolean;
|
|
849
|
-
allowWorkflowActions?: boolean;
|
|
850
|
-
inEditMode?: boolean;
|
|
851
839
|
}
|
|
852
840
|
declare const ThresholdAlert: React.FC<IThresholdAlertProps>;
|
|
853
841
|
|
|
@@ -878,7 +866,7 @@ interface IRaiseIssueModalProps {
|
|
|
878
866
|
notes?: string;
|
|
879
867
|
attachments?: File[] | null;
|
|
880
868
|
issue?: IIssue | null;
|
|
881
|
-
onCreateIssue?: (issueData: any, attachments:
|
|
869
|
+
onCreateIssue?: (issueData: any, attachments: File[]) => Promise<IIssue>;
|
|
882
870
|
onUpdateIssue?: (issueId: string, updateData: any) => Promise<void>;
|
|
883
871
|
user?: {
|
|
884
872
|
firstName?: string;
|
package/dist/index.esm.js
CHANGED
|
@@ -325,16 +325,33 @@ var EIssueStatus;
|
|
|
325
325
|
EIssueStatus["OPEN"] = "Open";
|
|
326
326
|
EIssueStatus["IN_PROGRESS"] = "In-Progress";
|
|
327
327
|
EIssueStatus["REJECTED"] = "Rejected";
|
|
328
|
-
EIssueStatus["RESOLVE"] = "
|
|
328
|
+
EIssueStatus["RESOLVE"] = "Resolve";
|
|
329
329
|
})(EIssueStatus || (EIssueStatus = {}));
|
|
330
|
+
const normalizeIssueStatus = (issueStatus) => {
|
|
331
|
+
const normalizedValue = String(issueStatus || '').trim().toLowerCase().replace(/[\s_-]+/g, '');
|
|
332
|
+
if (normalizedValue === 'open') {
|
|
333
|
+
return EIssueStatus.OPEN;
|
|
334
|
+
}
|
|
335
|
+
if (normalizedValue === 'inprogress') {
|
|
336
|
+
return EIssueStatus.IN_PROGRESS;
|
|
337
|
+
}
|
|
338
|
+
if (normalizedValue === 'reject' || normalizedValue === 'rejected') {
|
|
339
|
+
return EIssueStatus.REJECTED;
|
|
340
|
+
}
|
|
341
|
+
if (normalizedValue === 'resolve' || normalizedValue === 'resolved') {
|
|
342
|
+
return EIssueStatus.RESOLVE;
|
|
343
|
+
}
|
|
344
|
+
return EIssueStatus.OPEN;
|
|
345
|
+
};
|
|
330
346
|
const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId, notes = '', attachments = null, issue = null, onCreateIssue, onUpdateIssue, user, availableUsers = [
|
|
331
347
|
'Priya Das',
|
|
332
348
|
'Maria Garcia',
|
|
333
349
|
'John Smith',
|
|
334
350
|
'Sarah Johnson'
|
|
335
|
-
], workOrderNumber: initialWorkOrderNumber, assetNumber: initialAssetNumber, isStandalone,
|
|
336
|
-
//
|
|
337
|
-
|
|
351
|
+
], workOrderNumber: initialWorkOrderNumber, assetNumber: initialAssetNumber, isStandalone, inEditMode = false, isEdit }) => {
|
|
352
|
+
// Determine if workflow actions should be enabled
|
|
353
|
+
// If explicitly provided, use that. Otherwise, default to isEdit (true if editing, false/undefined otherwise).
|
|
354
|
+
// Fallback to false if neither is provided.
|
|
338
355
|
const [title, setTitle] = useState('');
|
|
339
356
|
const [description, setDescription] = useState('');
|
|
340
357
|
const [workOrderNumber, setWorkOrderNumber] = useState('');
|
|
@@ -350,11 +367,6 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
|
|
|
350
367
|
const [isViewMode, setIsViewMode] = useState(!!issue && !inEditMode);
|
|
351
368
|
const fileInputRef = React.useRef(null);
|
|
352
369
|
const isEditMode = isEdit !== undefined ? isEdit : !!issue;
|
|
353
|
-
// Determine if workflow actions should be enabled
|
|
354
|
-
// If explicitly provided, use that. Otherwise, default to showing them if we have an existing issue.
|
|
355
|
-
const showWorkflowActions = allowWorkflowActions !== undefined
|
|
356
|
-
? allowWorkflowActions
|
|
357
|
-
: !!issue;
|
|
358
370
|
useEffect(() => {
|
|
359
371
|
if (isOpen) {
|
|
360
372
|
// In edit mode, prioritize issue attachments from API
|
|
@@ -408,14 +420,6 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
|
|
|
408
420
|
setLocalAttachments(prev => [...prev, ...newFiles]);
|
|
409
421
|
}
|
|
410
422
|
};
|
|
411
|
-
const convertFileToBase64 = (file) => {
|
|
412
|
-
return new Promise((resolve, reject) => {
|
|
413
|
-
const reader = new FileReader();
|
|
414
|
-
reader.readAsDataURL(file);
|
|
415
|
-
reader.onload = () => resolve(reader.result);
|
|
416
|
-
reader.onerror = error => reject(error);
|
|
417
|
-
});
|
|
418
|
-
};
|
|
419
423
|
const getAttachmentName = (file) => {
|
|
420
424
|
if (!file)
|
|
421
425
|
return 'Attachment';
|
|
@@ -446,25 +450,10 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
|
|
|
446
450
|
}
|
|
447
451
|
return null;
|
|
448
452
|
}
|
|
449
|
-
if (file.data)
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
// Handle raw base64 data from API
|
|
453
|
-
if (file.fileName && isImage(file.fileName)) {
|
|
454
|
-
const fileName = String(file.fileName).toLowerCase();
|
|
455
|
-
let mimeType = 'image/png'; // Default
|
|
456
|
-
if (fileName.endsWith('.jpg') || fileName.endsWith('.jpeg'))
|
|
457
|
-
mimeType = 'image/jpeg';
|
|
458
|
-
else if (fileName.endsWith('.png'))
|
|
459
|
-
mimeType = 'image/png';
|
|
460
|
-
else if (fileName.endsWith('.gif'))
|
|
461
|
-
mimeType = 'image/gif';
|
|
462
|
-
else if (fileName.endsWith('.webp'))
|
|
463
|
-
mimeType = 'image/webp';
|
|
464
|
-
return `data:${mimeType};base64,${file.data}`;
|
|
465
|
-
}
|
|
453
|
+
if (file.data && isDataUrlImage(file.data))
|
|
454
|
+
return file.data;
|
|
455
|
+
if (file.fileName && isImage(file.fileName) && file.data)
|
|
466
456
|
return file.data;
|
|
467
|
-
}
|
|
468
457
|
return null;
|
|
469
458
|
};
|
|
470
459
|
useEffect(() => {
|
|
@@ -476,23 +465,7 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
|
|
|
476
465
|
setWorkOrderNumber(issue?.workOrderNumber || initialWorkOrderNumber || '');
|
|
477
466
|
setAssetNumber(issue?.assetNumber || initialAssetNumber || '');
|
|
478
467
|
setPriority(issue?.priority || 'Medium');
|
|
479
|
-
|
|
480
|
-
// Normalize to enum values if needed (handle legacy values)
|
|
481
|
-
let normalizedStatus = EIssueStatus.OPEN;
|
|
482
|
-
if (issueStatus) {
|
|
483
|
-
const statusLower = String(issueStatus).toLowerCase().trim();
|
|
484
|
-
if (statusLower === 'open')
|
|
485
|
-
normalizedStatus = EIssueStatus.OPEN;
|
|
486
|
-
else if (statusLower === 'in-progress' || statusLower === 'in progress' || statusLower === 'inprogress')
|
|
487
|
-
normalizedStatus = EIssueStatus.IN_PROGRESS;
|
|
488
|
-
else if (statusLower === 'rejected')
|
|
489
|
-
normalizedStatus = EIssueStatus.REJECTED;
|
|
490
|
-
else if (statusLower === 'resolved' || statusLower === 'resolve')
|
|
491
|
-
normalizedStatus = EIssueStatus.RESOLVE;
|
|
492
|
-
else
|
|
493
|
-
normalizedStatus = issueStatus; // Fallback to whatever it is if it's not matched but it might be valid
|
|
494
|
-
}
|
|
495
|
-
setStatus(normalizedStatus);
|
|
468
|
+
setStatus(normalizeIssueStatus(issue?.status || EIssueStatus.OPEN));
|
|
496
469
|
// Correctly map assignTo or fallback to assignee
|
|
497
470
|
setAssignee(issue?.assignTo || '');
|
|
498
471
|
setComments(issue?.comments || '');
|
|
@@ -610,17 +583,6 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
|
|
|
610
583
|
try {
|
|
611
584
|
if (isEditMode && issue) {
|
|
612
585
|
// Update existing issue
|
|
613
|
-
// Convert attachments to base64 objects for API
|
|
614
|
-
const attachmentObjects = await Promise.all(localAttachments.map(async (file) => {
|
|
615
|
-
if (file instanceof File) {
|
|
616
|
-
const base64 = await convertFileToBase64(file);
|
|
617
|
-
return {
|
|
618
|
-
fileName: file.name,
|
|
619
|
-
data: base64
|
|
620
|
-
};
|
|
621
|
-
}
|
|
622
|
-
return file; // Already a data object
|
|
623
|
-
}));
|
|
624
586
|
const updateData = {
|
|
625
587
|
title: String(title || '').trim(),
|
|
626
588
|
description: String(description || '').trim(),
|
|
@@ -633,9 +595,7 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
|
|
|
633
595
|
status: status,
|
|
634
596
|
comments: String(comments || '').trim() || '',
|
|
635
597
|
task: issue.component?.basic?.label || '',
|
|
636
|
-
taskValue: issue.component?.basic?.value || ''
|
|
637
|
-
isStandalone: !!isStandalone,
|
|
638
|
-
attachments: attachmentObjects
|
|
598
|
+
taskValue: issue.component?.basic?.value || ''
|
|
639
599
|
};
|
|
640
600
|
if (onUpdateIssue && issue._id) {
|
|
641
601
|
await onUpdateIssue(issue._id, updateData);
|
|
@@ -667,17 +627,6 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
|
|
|
667
627
|
comments: String(notes || '')
|
|
668
628
|
}
|
|
669
629
|
};
|
|
670
|
-
// Convert attachments to base64 objects for API
|
|
671
|
-
const attachmentObjects = await Promise.all(localAttachments.map(async (file) => {
|
|
672
|
-
if (file instanceof File) {
|
|
673
|
-
const base64 = await convertFileToBase64(file);
|
|
674
|
-
return {
|
|
675
|
-
fileName: file.name,
|
|
676
|
-
data: base64
|
|
677
|
-
};
|
|
678
|
-
}
|
|
679
|
-
return file; // Already a data object
|
|
680
|
-
}));
|
|
681
630
|
const createdBy = user ? `${user.firstName || ''} ${user.lastName || ''}`.trim() : 'User';
|
|
682
631
|
const issueData = {
|
|
683
632
|
title: String(title || '').trim(),
|
|
@@ -692,13 +641,11 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
|
|
|
692
641
|
comments: String(comments || '').trim() || '',
|
|
693
642
|
createdBy,
|
|
694
643
|
task: component?.basic?.label || '',
|
|
695
|
-
taskValue: component?.basic?.value || ''
|
|
696
|
-
isStandalone: !!isStandalone,
|
|
697
|
-
attachments: attachmentObjects // Include in data as well
|
|
644
|
+
taskValue: component?.basic?.value || ''
|
|
698
645
|
};
|
|
699
|
-
let createdIssueResponse;
|
|
646
|
+
let createdIssueResponse; // Renamed to avoid conflict with instruction's const
|
|
700
647
|
if (onCreateIssue) {
|
|
701
|
-
createdIssueResponse = await onCreateIssue(issueData,
|
|
648
|
+
createdIssueResponse = await onCreateIssue(issueData, localAttachments);
|
|
702
649
|
}
|
|
703
650
|
toastService.showSuccess('Issue raised successfully');
|
|
704
651
|
if (onSuccess) {
|
|
@@ -736,6 +683,9 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
|
|
|
736
683
|
if (!isOpen) {
|
|
737
684
|
return null;
|
|
738
685
|
}
|
|
686
|
+
const normalizedWorkflowStatus = normalizeIssueStatus(status);
|
|
687
|
+
const showAcceptRejectActions = isEditMode && !!issue && normalizedWorkflowStatus === EIssueStatus.OPEN;
|
|
688
|
+
const showResolveAction = isEditMode && !!issue && normalizedWorkflowStatus === EIssueStatus.IN_PROGRESS;
|
|
739
689
|
const modalContent = (jsx("div", { className: "raise-issue-modal-overlay", onClick: onClose, children: jsxs("div", { className: "raise-issue-modal", onClick: (e) => e.stopPropagation(), children: [jsxs("div", { className: "raise-issue-modal-header", children: [jsxs("div", { className: "raise-issue-modal-header-left", children: [jsx(AlertTriangle, { className: "raise-issue-modal-icon", size: 20 }), jsx("div", { className: "raise-issue-modal-header-text", children: jsx("div", { className: "raise-issue-modal-title-main", children: isEditMode ? 'Issue Details' : 'Create Issue' }) })] }), jsx("button", { className: "raise-issue-modal-close", onClick: onClose, "aria-label": "Close", children: jsx(X$1, { size: 18 }) })] }), jsx("div", { className: "raise-issue-modal-content", children: jsxs("div", { className: "raise-issue-fields-grid", children: [isEditMode && issue?.issueNumber && (jsxs("div", { className: "raise-issue-field", children: [jsx("label", { className: "raise-issue-field-label", children: "Issue ID" }), jsx("input", { type: "text", className: "raise-issue-field-input raise-issue-field-readonly", value: issue.issueNumber, readOnly: true })] })), jsxs("div", { className: "raise-issue-field", children: [jsx("label", { className: "raise-issue-field-label", children: "Task" }), jsx("input", { type: "text", className: "raise-issue-field-input raise-issue-field-readonly", value: isEditMode ? (issue?.component?.basic?.label || '') : (component?.basic?.label || ''), readOnly: true })] }), jsxs("div", { className: "raise-issue-field", children: [jsx("label", { className: "raise-issue-field-label", children: "Task Value" }), jsx("input", { type: "text", className: "raise-issue-field-input raise-issue-field-readonly", value: isEditMode ? (issue?.component?.basic?.value || '') : (component?.basic?.value || ''), readOnly: true })] }), jsxs("div", { className: "raise-issue-field", children: [jsxs("label", { className: "raise-issue-field-label", children: ["Title ", jsx("span", { className: "raise-issue-required", children: "*" })] }), jsx("input", { type: "text", className: `raise-issue-field-input ${isEditMode ? 'raise-issue-field-readonly' : ''}`, value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Enter issue title", readOnly: isEditMode && isViewMode })] }), !isStandalone && (jsxs("div", { className: "raise-issue-field", children: [jsxs("label", { className: "raise-issue-field-label", children: ["Work Order ", jsx("span", { className: "raise-issue-required", children: "*" })] }), jsx("input", { type: "text", className: `raise-issue-field-input ${isEditMode ? 'raise-issue-field-readonly' : ''}`, value: workOrderNumber, onChange: (e) => setWorkOrderNumber(e.target.value), placeholder: "N/A", readOnly: isEditMode && isViewMode })] })), !isStandalone && (jsxs("div", { className: "raise-issue-field", children: [jsxs("label", { className: "raise-issue-field-label", children: ["Asset Number ", jsx("span", { className: "raise-issue-required", children: "*" })] }), jsx("input", { type: "text", className: `raise-issue-field-input ${isEditMode ? 'raise-issue-field-readonly' : ''}`, value: assetNumber, onChange: (e) => setAssetNumber(e.target.value), placeholder: "Enter asset number", readOnly: isEditMode && isViewMode })] })), jsxs("div", { className: "raise-issue-field", children: [jsxs("label", { className: "raise-issue-field-label", children: ["Raised By ", jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxs("div", { className: "raise-issue-field-value-with-icon", children: [jsx(User, { size: 16 }), jsx("span", { children: user ? `${user.firstName || ''} ${user.lastName || ''}`.trim() || 'User' : 'User' })] })] }), jsxs("div", { className: "raise-issue-field", children: [jsx("label", { className: "raise-issue-field-label", children: "Created On" }), jsxs("div", { className: "raise-issue-field-value-with-icon", children: [jsx(Calendar, { size: 16 }), jsx("span", { children: isEditMode && issue?.createdAt
|
|
740
690
|
? (safeDate(issue.createdAt) || new Date()).toLocaleString('en-US', {
|
|
741
691
|
year: 'numeric',
|
|
@@ -752,12 +702,12 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
|
|
|
752
702
|
hour: '2-digit',
|
|
753
703
|
minute: '2-digit',
|
|
754
704
|
hour12: true
|
|
755
|
-
}) })] })] }), jsxs("div", { className: "raise-issue-field raise-issue-field-full-width", children: [jsxs("label", { className: "raise-issue-field-label", children: ["Description ", jsx("span", { className: "raise-issue-required", children: "*" })] }), jsx("textarea", { className: `raise-issue-field-textarea ${isEditMode ? 'raise-issue-field-readonly' : ''}`, value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Enter issue description", rows: 4, readOnly: isEditMode && isViewMode })] }), jsxs("div", { className: "raise-issue-field", children: [jsxs("label", { className: "raise-issue-field-label", children: ["Status ", jsx("span", { className: "raise-issue-required", children: "*" })] }), jsx("input", { type: "text", className: "raise-issue-field-input raise-issue-field-readonly", value: status, readOnly: true })] }), jsxs("div", { className: "raise-issue-field", children: [jsxs("label", { className: "raise-issue-field-label", children: ["Assign to ", jsx("span", { className: "raise-issue-required", children: "*" })] }),
|
|
705
|
+
}) })] })] }), jsxs("div", { className: "raise-issue-field raise-issue-field-full-width", children: [jsxs("label", { className: "raise-issue-field-label", children: ["Description ", jsx("span", { className: "raise-issue-required", children: "*" })] }), jsx("textarea", { className: `raise-issue-field-textarea ${isEditMode ? 'raise-issue-field-readonly' : ''}`, value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Enter issue description", rows: 4, readOnly: isEditMode && isViewMode })] }), jsxs("div", { className: "raise-issue-field", children: [jsxs("label", { className: "raise-issue-field-label", children: ["Status ", jsx("span", { className: "raise-issue-required", children: "*" })] }), jsx("input", { type: "text", className: "raise-issue-field-input raise-issue-field-readonly", value: status, readOnly: true })] }), jsxs("div", { className: "raise-issue-field", children: [jsxs("label", { className: "raise-issue-field-label", children: ["Assign to ", jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxs("select", { className: "raise-issue-field-select", value: assignee, onChange: (e) => setAssignee(e.target.value), disabled: isEditMode && isViewMode, children: [jsx("option", { value: "", children: "Unassigned" }), availableUsers.map(userName => (jsx("option", { value: userName, children: userName }, userName)))] })] }), jsxs("div", { className: "raise-issue-field raise-issue-field-full-width", children: [jsxs("label", { className: "raise-issue-field-label", children: ["Priority ", jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxs("div", { className: "raise-issue-priority-buttons", children: [jsx("button", { type: "button", className: `priority-button priority-low ${priority === 'Low' ? 'active' : ''}`, onClick: () => setPriority('Low'), disabled: isEditMode && isViewMode, children: "Low" }), jsx("button", { type: "button", className: `priority-button priority-medium ${priority === 'Medium' ? 'active' : ''}`, onClick: () => setPriority('Medium'), disabled: isEditMode && isViewMode, children: "Medium" }), jsx("button", { type: "button", className: `priority-button priority-high ${priority === 'High' ? 'active' : ''}`, onClick: () => setPriority('High'), disabled: isEditMode && isViewMode, children: "High" })] })] }), jsxs("div", { className: "raise-issue-field raise-issue-field-full-width", children: [jsxs("label", { className: "raise-issue-field-label-with-icon", children: [jsx(MessageSquare, { size: 16 }), jsx("span", { children: "Comments" })] }), !comments && (jsx("div", { className: "raise-issue-no-comments", children: "No comments yet" })), jsx("textarea", { className: `raise-issue-field-textarea raise-issue-comments-textarea ${isEditMode ? 'raise-issue-field-readonly' : ''}`, value: comments, onChange: (e) => setComments(e.target.value), placeholder: "Add a comment...", rows: 4, readOnly: isEditMode })] }), jsxs("div", { className: "raise-issue-field raise-issue-field-full-width", style: { marginTop: '1rem' }, children: [jsx("label", { className: "raise-issue-field-label", children: "Attachments" }), jsxs("div", { className: "raise-issue-attachments-container", children: [!isEditMode && (jsxs("div", { className: `raise-issue-dropzone ${isDragging ? 'dragging' : ''}`, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: () => fileInputRef.current?.click(), children: [jsx("input", { type: "file", ref: fileInputRef, style: { display: 'none' }, onChange: handleFileChange, multiple: true }), jsx("div", { className: "raise-issue-dropzone-icon", children: jsx(UploadCloud, { size: 24 }) }), jsx("div", { className: "raise-issue-dropzone-text", children: "Click to upload or drag and drop" }), jsx("div", { className: "raise-issue-dropzone-hint", children: "PNG, JPG up to 10MB" })] })), localAttachments.length > 0 && (jsx("div", { className: "raise-issue-attachments-list", children: localAttachments.map((file, index) => (jsxs("div", { className: "raise-issue-attachment-item", children: [jsx("div", { className: "raise-issue-attachment-thumbnail", children: getAttachmentPreview(file) ? (jsx("img", { src: getAttachmentPreview(file), alt: "Thumbnail" })) : (jsx(Paperclip, { size: 20, color: "#9ca3af" })) }), jsxs("div", { className: "raise-issue-attachment-info", children: [jsx("span", { className: "attachment-name", title: getAttachmentName(file), children: getAttachmentName(file) }), file instanceof File && (jsxs("span", { className: "attachment-size", children: [(file.size / 1024).toFixed(1), " KB"] }))] }), !isEditMode && (jsx("button", { type: "button", className: "attachment-remove-btn", onClick: () => handleRemoveAttachment(index), title: "Remove", children: jsx(X$1, { size: 12 }) }))] }, index))) }))] })] })] }) }), jsx("div", { className: "raise-issue-modal-actions", children: jsxs("div", { className: "raise-issue-modal-actions-buttons", children: [(showAcceptRejectActions || showResolveAction) && (jsxs(Fragment, { children: [showAcceptRejectActions && (jsx("button", { className: "raise-issue-modal-button raise-issue-modal-button-accept", onClick: handleAccept, disabled: isSubmitting, children: isSubmitting ? 'Processing...' : 'Accept' })), showResolveAction && (jsx("button", { className: "raise-issue-modal-button raise-issue-modal-button-resolve", onClick: handleResolve, disabled: isSubmitting, children: isSubmitting ? 'Processing...' : 'Resolve' })), showAcceptRejectActions && (jsx("button", { className: "raise-issue-modal-button raise-issue-modal-button-reject", onClick: handleReject, disabled: isSubmitting, children: isSubmitting ? 'Processing...' : 'Reject' }))] })), !isEditMode && (jsx("button", { className: `raise-issue-modal-button raise-issue-modal-button-save ${!isFormValid ? 'disabled' : ''}`, onClick: handleSubmit, disabled: isSubmitting || !isFormValid, children: isSubmitting ? 'Creating...' : 'Create Issue' }))] }) })] }) }));
|
|
756
706
|
// Render modal using portal to document body for full-page overlay
|
|
757
707
|
return createPortal(modalContent, document.body);
|
|
758
708
|
};
|
|
759
709
|
|
|
760
|
-
const ThresholdAlert = ({ component, condition, currentValue, thresholdValue, formTemplateId, workOrderNumber, assetNumber, user, onIssueRaised, isIssueRaised = false, compact = false
|
|
710
|
+
const ThresholdAlert = ({ component, condition, currentValue, thresholdValue, formTemplateId, workOrderNumber, assetNumber, user, onIssueRaised, isIssueRaised = false, compact = false }) => {
|
|
761
711
|
const [showRaiseIssueModal, setShowRaiseIssueModal] = useState(false);
|
|
762
712
|
const [issue, setIssue] = useState(null);
|
|
763
713
|
const [isLoadingIssue, setIsLoadingIssue] = useState(false);
|
|
@@ -849,16 +799,16 @@ const ThresholdAlert = ({ component, condition, currentValue, thresholdValue, fo
|
|
|
849
799
|
// If issue is raised (either from prop or local state), don't show anything
|
|
850
800
|
// The ComponentActionFeatures will handle showing the raised issue state
|
|
851
801
|
if (isIssueRaised || localIssueRaised) {
|
|
852
|
-
return (jsx(Fragment, { children: showRaiseIssueModal && (jsx(RaiseIssueModal, { isOpen: showRaiseIssueModal, onClose: handleRaiseIssueClose, onSuccess: handleRaiseIssueSuccess, component: component, formTemplateId: formTemplateId, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, notes: "", attachments: null, issue: issue
|
|
802
|
+
return (jsx(Fragment, { children: showRaiseIssueModal && (jsx(RaiseIssueModal, { isOpen: showRaiseIssueModal, onClose: handleRaiseIssueClose, onSuccess: handleRaiseIssueSuccess, component: component, formTemplateId: formTemplateId, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, notes: "", attachments: null, issue: issue })) }));
|
|
853
803
|
}
|
|
854
804
|
// Show compact version for small screens/tables
|
|
855
805
|
if (compact) {
|
|
856
|
-
return (jsxs(Fragment, { children: [jsxs("div", { className: "threshold-alert threshold-alert-unresolved threshold-alert-compact", children: [jsx("div", { className: "threshold-alert-border" }), jsxs("div", { className: "threshold-alert-content-compact", children: [jsx(AlertTriangle, { className: "threshold-alert-icon-compact", size: 14 }), jsx("span", { className: "threshold-alert-message-compact", children: getCompactMessage() }), jsx("button", { type: "button", onClick: handleRaiseIssueClick, className: "threshold-alert-raise-issue-btn-compact", title: "Raise Issue", children: "Raise Issue" })] })] }), showRaiseIssueModal && (jsx(RaiseIssueModal, { isOpen: showRaiseIssueModal, onClose: handleRaiseIssueClose, onSuccess: handleRaiseIssueSuccess, component: component, formTemplateId: formTemplateId, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, notes: "", attachments: null, issue: issue
|
|
806
|
+
return (jsxs(Fragment, { children: [jsxs("div", { className: "threshold-alert threshold-alert-unresolved threshold-alert-compact", children: [jsx("div", { className: "threshold-alert-border" }), jsxs("div", { className: "threshold-alert-content-compact", children: [jsx(AlertTriangle, { className: "threshold-alert-icon-compact", size: 14 }), jsx("span", { className: "threshold-alert-message-compact", children: getCompactMessage() }), jsx("button", { type: "button", onClick: handleRaiseIssueClick, className: "threshold-alert-raise-issue-btn-compact", title: "Raise Issue", children: "Raise Issue" })] })] }), showRaiseIssueModal && (jsx(RaiseIssueModal, { isOpen: showRaiseIssueModal, onClose: handleRaiseIssueClose, onSuccess: handleRaiseIssueSuccess, component: component, formTemplateId: formTemplateId, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, notes: "", attachments: null, issue: issue }))] }));
|
|
857
807
|
}
|
|
858
|
-
return (jsxs(Fragment, { children: [jsxs("div", { className: "threshold-alert threshold-alert-unresolved", children: [jsx("div", { className: "threshold-alert-border" }), jsxs("div", { className: "threshold-alert-content", children: [jsx("div", { className: "threshold-alert-header", children: jsxs("div", { className: "threshold-alert-title-group", children: [jsx(AlertTriangle, { className: "threshold-alert-icon", size: 20 }), jsx("span", { className: "threshold-alert-title", children: "Threshold Condition Met - Action Required" })] }) }), jsxs("div", { className: "threshold-alert-message", children: [getConditionMessage(), jsx("span", { className: "threshold-alert-warning", children: " You must raise an issue before submitting the form." })] }), jsx("div", { className: "threshold-alert-buttons", children: jsx("button", { type: "button", onClick: handleRaiseIssueClick, className: "threshold-alert-raise-issue-btn", children: "Raise Issue Now" }) })] })] }), showRaiseIssueModal && (jsx(RaiseIssueModal, { isOpen: showRaiseIssueModal, onClose: handleRaiseIssueClose, onSuccess: handleRaiseIssueSuccess, component: component, formTemplateId: formTemplateId, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, notes: "", attachments: null, issue: issue
|
|
808
|
+
return (jsxs(Fragment, { children: [jsxs("div", { className: "threshold-alert threshold-alert-unresolved", children: [jsx("div", { className: "threshold-alert-border" }), jsxs("div", { className: "threshold-alert-content", children: [jsx("div", { className: "threshold-alert-header", children: jsxs("div", { className: "threshold-alert-title-group", children: [jsx(AlertTriangle, { className: "threshold-alert-icon", size: 20 }), jsx("span", { className: "threshold-alert-title", children: "Threshold Condition Met - Action Required" })] }) }), jsxs("div", { className: "threshold-alert-message", children: [getConditionMessage(), jsx("span", { className: "threshold-alert-warning", children: " You must raise an issue before submitting the form." })] }), jsx("div", { className: "threshold-alert-buttons", children: jsx("button", { type: "button", onClick: handleRaiseIssueClick, className: "threshold-alert-raise-issue-btn", children: "Raise Issue Now" }) })] })] }), showRaiseIssueModal && (jsx(RaiseIssueModal, { isOpen: showRaiseIssueModal, onClose: handleRaiseIssueClose, onSuccess: handleRaiseIssueSuccess, component: component, formTemplateId: formTemplateId, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, notes: "", attachments: null, issue: issue }))] }));
|
|
859
809
|
};
|
|
860
810
|
|
|
861
|
-
const DfFormInput = ({ id, properties, validationErrors = {}, formValue = '', inputType = 'text', readonly = false, disabled = false, touchedFields = {}, formSubmitted = false, mode = 'test', onValueChange, onBlur, onFocus, className = '', hideLabel = false, formTemplateId, onThresholdIssueRaised, raisedThresholdIssues = new Set(), workOrderNumber, assetNumber, user
|
|
811
|
+
const DfFormInput = ({ id, properties, validationErrors = {}, formValue = '', inputType = 'text', readonly = false, disabled = false, touchedFields = {}, formSubmitted = false, mode = 'test', onValueChange, onBlur, onFocus, className = '', hideLabel = false, formTemplateId, onThresholdIssueRaised, raisedThresholdIssues = new Set(), workOrderNumber, assetNumber, user }) => {
|
|
862
812
|
// Ensure formValue is always a string to prevent [object Object] errors
|
|
863
813
|
const getStringValue = (val) => {
|
|
864
814
|
if (val === null || val === undefined)
|
|
@@ -1222,7 +1172,7 @@ const DfFormInput = ({ id, properties, validationErrors = {}, formValue = '', in
|
|
|
1222
1172
|
inputWrapperRef.current?.closest('.datagrid-list-view') !== null ||
|
|
1223
1173
|
className.includes('table-cell') ||
|
|
1224
1174
|
className.includes('cell-content');
|
|
1225
|
-
return (jsx(ThresholdAlert, { component: properties, condition: activeThresholdCondition, currentValue: value, thresholdValue: activeThresholdCondition.value, formTemplateId: formTemplateId, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onDismiss: () => handleDismissAlert(activeThresholdCondition.id), onIssueRaised: onThresholdIssueRaised, isIssueRaised: issueRaised, compact: isInTable
|
|
1175
|
+
return (jsx(ThresholdAlert, { component: properties, condition: activeThresholdCondition, currentValue: value, thresholdValue: activeThresholdCondition.value, formTemplateId: formTemplateId, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onDismiss: () => handleDismissAlert(activeThresholdCondition.id), onIssueRaised: onThresholdIssueRaised, isIssueRaised: issueRaised, compact: isInTable }, `${activeThresholdCondition.id}-${issueRaised}`));
|
|
1226
1176
|
})()] }));
|
|
1227
1177
|
};
|
|
1228
1178
|
|
|
@@ -3809,7 +3759,7 @@ const AttachmentThumbnails = ({ attachments, onRemove }) => {
|
|
|
3809
3759
|
return (jsx("div", { className: "attachment-thumbnail", children: isImage && objectUrl ? (jsxs(Fragment, { children: [jsx("img", { src: objectUrl, alt: file ? file.name : 'Attachment' }), jsx("button", { type: "button", className: "thumbnail-remove-btn", onClick: () => onRemove(index), title: "Remove attachment", children: jsx(X$1, { size: 14 }) })] })) : (jsxs(Fragment, { children: [jsx("div", { className: "file-icon-placeholder", children: jsx(Paperclip, { size: 20 }) }), jsx("span", { className: "file-name", children: file ? file.name : 'Unknown File' }), jsx("button", { type: "button", className: "thumbnail-remove-btn", onClick: () => onRemove(index), title: "Remove attachment", children: jsx(X$1, { size: 14 }) })] })) }, index));
|
|
3810
3760
|
}) }));
|
|
3811
3761
|
};
|
|
3812
|
-
const ComponentActionFeatures = ({ component, mode, formTemplateId, formValue, formData, onNotesChange, onAttachmentChange, notes = '', attachments = null, onThresholdActionCompletion, onThresholdIssueRaised, onBasicPropertyActionCompletion, workOrderNumber, assetNumber, isStandalone, user, onCreateIssue, onUpdateIssue
|
|
3762
|
+
const ComponentActionFeatures = ({ component, mode, formTemplateId, formValue, formData, onNotesChange, onAttachmentChange, notes = '', attachments = null, onThresholdActionCompletion, onThresholdIssueRaised, onBasicPropertyActionCompletion, workOrderNumber, assetNumber, isStandalone, user, onCreateIssue, onUpdateIssue }) => {
|
|
3813
3763
|
// Determine effective form value (prefer prop, fallback to formData lookup)
|
|
3814
3764
|
const effectiveFormValue = formValue !== undefined ? formValue : (formData ? formData[component.id] : undefined);
|
|
3815
3765
|
// Use effectiveFormValue for logic instead of raw formValue
|
|
@@ -4087,8 +4037,10 @@ const ComponentActionFeatures = ({ component, mode, formTemplateId, formValue, f
|
|
|
4087
4037
|
}, 3000);
|
|
4088
4038
|
}, [getActiveThresholdConditions, onThresholdActionCompletion, component, onBasicPropertyActionCompletion]);
|
|
4089
4039
|
const handleRaiseIssueClick = useCallback(() => {
|
|
4040
|
+
if (issueRaised)
|
|
4041
|
+
return;
|
|
4090
4042
|
setShowRaiseIssueModal(true);
|
|
4091
|
-
}, []);
|
|
4043
|
+
}, [issueRaised]);
|
|
4092
4044
|
const handleRaiseIssueClose = useCallback(() => {
|
|
4093
4045
|
setShowRaiseIssueModal(false);
|
|
4094
4046
|
}, []);
|
|
@@ -4295,7 +4247,7 @@ const ComponentActionFeatures = ({ component, mode, formTemplateId, formValue, f
|
|
|
4295
4247
|
modalComponent.basic.value = selectedOption.value || effectiveValue;
|
|
4296
4248
|
}
|
|
4297
4249
|
return modalComponent;
|
|
4298
|
-
})(), formTemplateId: formTemplateId || '', notes: localNotes, attachments: localAttachments, isStandalone: isStandalone, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue
|
|
4250
|
+
})(), formTemplateId: formTemplateId || '', notes: localNotes, attachments: localAttachments, isStandalone: isStandalone, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue }))] }));
|
|
4299
4251
|
};
|
|
4300
4252
|
|
|
4301
4253
|
// Attachment Thumbnails Component for Submission View
|
|
@@ -4361,7 +4313,7 @@ function ensureStringId$2(id) {
|
|
|
4361
4313
|
}
|
|
4362
4314
|
return String(id);
|
|
4363
4315
|
}
|
|
4364
|
-
const DraggableGridComponent = ({ component, selectedComponent, mode, onComponentSelect, onComponentDelete, onComponentEdit, renderFormComponent, isOverlay = false, formData = {}, formTemplateId, onThresholdIssueRaised, onNotesChange, onAttachmentChange, shouldShowComponent }) => {
|
|
4316
|
+
const DraggableGridComponent = ({ component, selectedComponent, mode, onComponentSelect, onComponentDelete, onComponentEdit, renderFormComponent, isOverlay = false, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, shouldShowComponent }) => {
|
|
4365
4317
|
const formValue = formData[component.id];
|
|
4366
4318
|
const isVisible = shouldShowComponent ? shouldShowComponent(component.id) : true;
|
|
4367
4319
|
// Check if component has notes or attachments for submission view
|
|
@@ -4532,7 +4484,8 @@ const GridDropZone = ({ gridComponents, mode, onComponentSelect, onComponentDele
|
|
|
4532
4484
|
}, children: isOver ? (jsx("span", { style: { color: '#3b82f6', fontWeight: '500' }, children: "Drop component here to add to grid" })) : (jsx("span", { children: "+ Drop more components here" })) })] })) }));
|
|
4533
4485
|
};
|
|
4534
4486
|
// Sub-component for displaying entries (TableView)
|
|
4535
|
-
const TableView = ({ templateComponents, dataEntries, renderFormComponent, mode, allowAddRemoveEntries, addAnotherText, removeText, maxEntries, minEntries, displayAsGrid = true, onAddEntry, onRemoveEntry, formData,
|
|
4487
|
+
const TableView = ({ templateComponents, dataEntries, renderFormComponent, mode, allowAddRemoveEntries, addAnotherText, removeText, maxEntries, minEntries, displayAsGrid = true, onAddEntry, onRemoveEntry, formData, // Use current formData to render values
|
|
4488
|
+
formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, columnView, shouldShowComponent }) => {
|
|
4536
4489
|
const _formData = formData || {};
|
|
4537
4490
|
const visibleTemplateComponents = React.useMemo(() => {
|
|
4538
4491
|
if (!shouldShowComponent)
|
|
@@ -5199,7 +5152,7 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
|
|
|
5199
5152
|
templateComponents: gridComponents, dataEntries: dataEntries, renderFormComponent: renderFormComponent || renderComponent, mode: mode, allowAddRemoveEntries: properties.datagrid?.allowAddRemoveEntries ?? true, addAnotherText: properties.datagrid?.addAnotherText ?? 'Add Entry', removeText: properties.datagrid?.removeText ?? 'Remove', maxEntries: properties.datagrid?.maxEntries ?? 10, minEntries: properties.datagrid?.minEntries ?? 1, displayAsGrid: properties.datagrid?.displayAsGrid ?? true, onAddEntry: handleAddEntry, onRemoveEntry: handleRemoveEntry, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, columnView: properties.datagrid?.columnView, shouldShowComponent: shouldShowComponent })) }))] }));
|
|
5200
5153
|
};
|
|
5201
5154
|
|
|
5202
|
-
const DraggableChild = ({ child, selectedChild, mode, onChildSelect, onChildDelete, renderFormComponent, isOverlay = false, isChildrenEditMode = false, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue
|
|
5155
|
+
const DraggableChild = ({ child, selectedChild, mode, onChildSelect, onChildDelete, renderFormComponent, isOverlay = false, isChildrenEditMode = false, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, isStandalone, user, onCreateIssue, onUpdateIssue }) => {
|
|
5203
5156
|
const formValue = formData[child.id];
|
|
5204
5157
|
// Check if component has notes or attachments for submission view
|
|
5205
5158
|
const hasSubmissionData = mode === 'preview' && ((child.basic?.notes && child.basic.notes.trim().length > 0) ||
|
|
@@ -5217,9 +5170,9 @@ const DraggableChild = ({ child, selectedChild, mode, onChildSelect, onChildDele
|
|
|
5217
5170
|
return (jsxs("div", { ref: setNodeRef, style: style, className: `form-component section-child ${selectedChild?.id === child.id ? 'selected' : ''} ${isDragging ? 'dragging' : ''} ${isSorting ? 'sorting' : ''} ${isChildrenEditMode ? 'children-edit-active' : ''}`, onClick: () => !isDragging && onChildSelect(child), role: "button", tabIndex: 0, children: [(mode === 'edit' || isChildrenEditMode) && (jsx("div", { className: "child-drag-handle", ...listeners, ...attributes, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), children: jsx(GripVertical, { size: 14 }) })), jsxs("div", { className: "form-component-content section-child-content", children: [(mode === 'edit' || isChildrenEditMode) && (jsxs("div", { className: "component-actions child-actions", children: [jsx("button", { className: "btn edit-btn", onClick: (e) => {
|
|
5218
5171
|
e.stopPropagation();
|
|
5219
5172
|
onChildSelect(child);
|
|
5220
|
-
}, onMouseDown: (e) => e.stopPropagation(), title: "Edit properties", children: jsx(Edit, { size: 12 }) }), jsx("button", { className: "btn delete-btn", onClick: (e) => onChildDelete(child, e), onMouseDown: (e) => e.stopPropagation(), title: "Delete component", children: jsx(Trash2, { size: 12 }) })] })), jsxs("div", { className: "component-preview child-preview", children: [renderFormComponent(child), !['section', 'table', 'heading', 'file', 'instructions', 'signature', 'location', 'datagrid'].includes(child.name) && (jsx(ComponentActionFeatures, { component: child, mode: "test", formTemplateId: formTemplateId, formValue: formValue, formData: formData, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange ? (notes) => onNotesChange(child.id, notes) : undefined, onAttachmentChange: onAttachmentChange ? (attachments) => onAttachmentChange(child.id, attachments) : undefined, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue
|
|
5173
|
+
}, onMouseDown: (e) => e.stopPropagation(), title: "Edit properties", children: jsx(Edit, { size: 12 }) }), jsx("button", { className: "btn delete-btn", onClick: (e) => onChildDelete(child, e), onMouseDown: (e) => e.stopPropagation(), title: "Delete component", children: jsx(Trash2, { size: 12 }) })] })), jsxs("div", { className: "component-preview child-preview", children: [renderFormComponent(child), !['section', 'table', 'heading', 'file', 'instructions', 'signature', 'location', 'datagrid'].includes(child.name) && (jsx(ComponentActionFeatures, { component: child, mode: "test", formTemplateId: formTemplateId, formValue: formValue, formData: formData, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange ? (notes) => onNotesChange(child.id, notes) : undefined, onAttachmentChange: onAttachmentChange ? (attachments) => onAttachmentChange(child.id, attachments) : undefined, workOrderNumber: workOrderNumber, assetNumber: assetNumber, isStandalone: isStandalone, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue })), hasSubmissionData && (jsx(ComponentSubmissionActions, { component: child }))] })] })] }));
|
|
5221
5174
|
};
|
|
5222
|
-
const DfFormSection = ({ id, properties, mode = 'edit', formData = {}, onValueChange, onSelect, isSelected = false, className = '', onSectionSelect, onChildSelect, onChildDelete, selectedChild, renderFormComponent, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue
|
|
5175
|
+
const DfFormSection = ({ id, properties, mode = 'edit', formData = {}, onValueChange, onSelect, isSelected = false, className = '', onSectionSelect, onChildSelect, onChildDelete, selectedChild, renderFormComponent, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, isStandalone, user, onCreateIssue, onUpdateIssue }) => {
|
|
5223
5176
|
const [isCollapsed, setIsCollapsed] = useState(properties.basic.collapsed);
|
|
5224
5177
|
const [isEditingTitle, setIsEditingTitle] = useState(false);
|
|
5225
5178
|
const [isEditingDescription, setIsEditingDescription] = useState(false);
|
|
@@ -5432,7 +5385,7 @@ const DfFormSection = ({ id, properties, mode = 'edit', formData = {}, onValueCh
|
|
|
5432
5385
|
}, children: isOver ? 'Drop components here' : 'Empty Section' }), jsx("div", { style: {
|
|
5433
5386
|
fontSize: '12px',
|
|
5434
5387
|
color: '#9ca3af'
|
|
5435
|
-
}, children: "Drag and drop components here to create your section" })] })) : (children.map((child) => (jsx(DraggableChild, { child: child, selectedChild: selectedChild || null, mode: mode, onChildSelect: handleChildSelect, onChildDelete: handleChildDelete, renderFormComponent: renderComponent, isChildrenEditMode: isChildrenEditMode, formData: formData, formTemplateId: formTemplateId, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue
|
|
5388
|
+
}, children: "Drag and drop components here to create your section" })] })) : (children.map((child) => (jsx(DraggableChild, { child: child, selectedChild: selectedChild || null, mode: mode, onChildSelect: handleChildSelect, onChildDelete: handleChildDelete, renderFormComponent: renderComponent, isChildrenEditMode: isChildrenEditMode, formData: formData, formTemplateId: formTemplateId, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, workOrderNumber: workOrderNumber, assetNumber: assetNumber, isStandalone: isStandalone, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue }, child.id)))) }) }))] }));
|
|
5436
5389
|
};
|
|
5437
5390
|
|
|
5438
5391
|
// Dynamic imports to avoid circular dependencies
|
|
@@ -5482,7 +5435,7 @@ const normalizeTableRow = (row) => {
|
|
|
5482
5435
|
};
|
|
5483
5436
|
const DfFormPreview = ({ formComponents = [], currentDevice = 'desktop', isPreviewMode = false, initialFormData = [], onSubmit, onFormDataChange, formTitle, formDescription, formTemplateId,
|
|
5484
5437
|
// Add component management props for edit mode
|
|
5485
|
-
onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, selectedComponent, workOrderNumber, assetNumber, isStandalone, user, onCreateIssue, onUpdateIssue
|
|
5438
|
+
onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, selectedComponent, workOrderNumber, assetNumber, isStandalone, user, onCreateIssue, onUpdateIssue }) => {
|
|
5486
5439
|
// Local copy of formComponents so structure updates (e.g. table cell init) are reflected immediately
|
|
5487
5440
|
const [localFormComponents, setLocalFormComponents] = useState(formComponents);
|
|
5488
5441
|
// Sync local state when the prop changes from the parent
|
|
@@ -6837,7 +6790,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
6837
6790
|
case 'email-input':
|
|
6838
6791
|
// Regular text/email/number input
|
|
6839
6792
|
return (jsx(DfFormInput, { ...commonProps, properties: component, inputType: component.name === 'text-input' ? 'text' :
|
|
6840
|
-
component.name === 'number-input' ? 'number' : 'email', formTemplateId: formTemplateId, onThresholdIssueRaised: handleThresholdIssueRaised, raisedThresholdIssues: raisedThresholdIssues, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user
|
|
6793
|
+
component.name === 'number-input' ? 'number' : 'email', formTemplateId: formTemplateId, onThresholdIssueRaised: handleThresholdIssueRaised, raisedThresholdIssues: raisedThresholdIssues, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user }));
|
|
6841
6794
|
case 'textarea':
|
|
6842
6795
|
return jsx(DfFormTextarea, { ...commonProps, properties: component });
|
|
6843
6796
|
case 'select':
|
|
@@ -6903,13 +6856,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
6903
6856
|
case 'location':
|
|
6904
6857
|
return jsx(DfFormLocation, { ...commonProps, properties: component });
|
|
6905
6858
|
case 'section':
|
|
6906
|
-
return (jsx(DfFormSection, { ...commonProps, properties: component, formData: formValues, formTemplateId: formTemplateId, onThresholdActionCompletion: handleThresholdActionCompletion, onThresholdIssueRaised: handleThresholdIssueRaised, onNotesChange: handleComponentNotesChange, onAttachmentChange: handleComponentAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue,
|
|
6859
|
+
return (jsx(DfFormSection, { ...commonProps, properties: component, formData: formValues, formTemplateId: formTemplateId, onThresholdActionCompletion: handleThresholdActionCompletion, onThresholdIssueRaised: handleThresholdIssueRaised, onNotesChange: handleComponentNotesChange, onAttachmentChange: handleComponentAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, isStandalone: isStandalone, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue, renderFormComponent: (field) => {
|
|
6907
6860
|
// Ensure the nested component gets the proper form value
|
|
6908
6861
|
// const fieldValue = formValues[field.id] || (field.basic as any)?.value || (field.basic as any)?.defaultValue || ''
|
|
6909
6862
|
return renderFormComponent(field);
|
|
6910
6863
|
} }));
|
|
6911
6864
|
case 'table':
|
|
6912
|
-
return (jsx(React.Suspense, { fallback: jsx("div", { children: "Loading table..." }), children: jsx(DfFormTable$1, { ...commonProps, properties: component, formData: formValues, formTemplateId: formTemplateId, mode: commonProps.mode, validationErrors: validationErrors, touchedFields: touchedFields, formSubmitted: formSubmitted, onThresholdActionCompletion: handleThresholdActionCompletion, onThresholdIssueRaised: handleThresholdIssueRaised, workOrderNumber: workOrderNumber, assetNumber: assetNumber, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue,
|
|
6865
|
+
return (jsx(React.Suspense, { fallback: jsx("div", { children: "Loading table..." }), children: jsx(DfFormTable$1, { ...commonProps, properties: component, formData: formValues, formTemplateId: formTemplateId, mode: commonProps.mode, validationErrors: validationErrors, touchedFields: touchedFields, formSubmitted: formSubmitted, onThresholdActionCompletion: handleThresholdActionCompletion, onThresholdIssueRaised: handleThresholdIssueRaised, workOrderNumber: workOrderNumber, assetNumber: assetNumber, isStandalone: isStandalone, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue, renderFormComponent: (field) => {
|
|
6913
6866
|
return renderFormComponent(field);
|
|
6914
6867
|
}, onNotesChange: (componentId, notes) => {
|
|
6915
6868
|
// Handle notes change for table cell components
|
|
@@ -7247,7 +7200,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
7247
7200
|
return comp;
|
|
7248
7201
|
});
|
|
7249
7202
|
onFormDataChange?.(updatedComponents);
|
|
7250
|
-
}, notes: componentNotes[component.id] !== undefined ? componentNotes[component.id] : (component.basic?.notes || ''), attachments: componentAttachments[component.id] !== undefined ? componentAttachments[component.id] : (component.basic?.attachments || null), workOrderNumber: workOrderNumber, assetNumber: assetNumber, isStandalone: isStandalone, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue
|
|
7203
|
+
}, notes: componentNotes[component.id] !== undefined ? componentNotes[component.id] : (component.basic?.notes || ''), attachments: componentAttachments[component.id] !== undefined ? componentAttachments[component.id] : (component.basic?.attachments || null), workOrderNumber: workOrderNumber, assetNumber: assetNumber, isStandalone: isStandalone, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue })), isPreviewMode && hasSubmissionData && (jsx(ComponentSubmissionActions, { component: component }))] }, component.id));
|
|
7251
7204
|
}), !isPreviewMode && (jsxs("div", { className: "form-actions", children: [!formSubmitted && (jsx("button", { type: "button", onClick: () => handleSubmit('Saved'), className: "form-save-button", disabled: formSubmitted && !isFormValid(), children: "Save" })), jsx("button", { type: "button", disabled: !isFormValid() || !thresholdValidationState.isValid, className: "form-submit-button", title: !thresholdValidationState.isValid ? thresholdValidationState.errorMessage : '', onClick: () => handleSubmit('Submitted'), children: "Submit" })] }))] }))] }) }) }));
|
|
7252
7205
|
};
|
|
7253
7206
|
|
|
@@ -7342,12 +7295,12 @@ const ensureComponentHasId = (component) => {
|
|
|
7342
7295
|
}
|
|
7343
7296
|
return component;
|
|
7344
7297
|
};
|
|
7345
|
-
const SimpleTableComponent = ({ component, mode, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue
|
|
7298
|
+
const SimpleTableComponent = ({ component, mode, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, isStandalone, user, onCreateIssue, onUpdateIssue }) => {
|
|
7346
7299
|
const formValue = formData[component.id];
|
|
7347
7300
|
// Check if component has notes or attachments for submission view
|
|
7348
7301
|
const hasSubmissionData = mode === 'preview' && ((component.basic?.notes && component.basic.notes.trim().length > 0) ||
|
|
7349
7302
|
(component.basic?.attachments && Array.isArray(component.basic.attachments) && component.basic.attachments.length > 0));
|
|
7350
|
-
return (jsxs("div", { className: "simple-table-component", children: [renderFormComponent(component), !['section', 'table', 'heading', 'file', 'instructions', 'signature', 'location', 'datagrid'].includes(component.name) && (jsx(ComponentActionFeatures, { component: component, mode: "test", formTemplateId: formTemplateId, formValue: formValue, formData: formData, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange ? (notes) => onNotesChange(component.id, notes) : undefined, onAttachmentChange: onAttachmentChange ? (attachments) => onAttachmentChange(component.id, attachments) : undefined, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue
|
|
7303
|
+
return (jsxs("div", { className: "simple-table-component", children: [renderFormComponent(component), !['section', 'table', 'heading', 'file', 'instructions', 'signature', 'location', 'datagrid'].includes(component.name) && (jsx(ComponentActionFeatures, { component: component, mode: "test", formTemplateId: formTemplateId, formValue: formValue, formData: formData, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange ? (notes) => onNotesChange(component.id, notes) : undefined, onAttachmentChange: onAttachmentChange ? (attachments) => onAttachmentChange(component.id, attachments) : undefined, workOrderNumber: workOrderNumber, assetNumber: assetNumber, isStandalone: isStandalone, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue })), hasSubmissionData && (jsx(ComponentSubmissionActions, { component: component }))] }));
|
|
7351
7304
|
};
|
|
7352
7305
|
const DraggableTableComponent = ({ component, selectedComponent, mode, onComponentSelect, onComponentDelete, onComponentEdit, renderFormComponent, isOverlay = false, }) => {
|
|
7353
7306
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging, isSorting, } = useSortable({
|
|
@@ -7368,7 +7321,7 @@ const DraggableTableComponent = ({ component, selectedComponent, mode, onCompone
|
|
|
7368
7321
|
onComponentDelete(component, e);
|
|
7369
7322
|
}, type: "button", title: "Delete Component", children: jsx(Trash2, { size: 12 }) })] }))] }));
|
|
7370
7323
|
};
|
|
7371
|
-
const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete, onComponentEdit, selectedComponent, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, tableId, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue
|
|
7324
|
+
const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete, onComponentEdit, selectedComponent, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, tableId, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, isStandalone, user, onCreateIssue, onUpdateIssue }) => {
|
|
7372
7325
|
const dropZoneId = `table-cell-${tableId}-${cell.row}-${cell.column}`;
|
|
7373
7326
|
const { setNodeRef, isOver } = useDroppable({
|
|
7374
7327
|
id: dropZoneId,
|
|
@@ -7403,7 +7356,7 @@ const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete,
|
|
|
7403
7356
|
cell.components.map((component) => {
|
|
7404
7357
|
// Only ensure ID if it's truly missing - don't regenerate existing IDs
|
|
7405
7358
|
const componentWithId = component.id ? component : ensureComponentHasId(component);
|
|
7406
|
-
return (jsx(SimpleTableComponent, { component: componentWithId, mode: mode, renderFormComponent: renderFormComponent, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue
|
|
7359
|
+
return (jsx(SimpleTableComponent, { component: componentWithId, mode: mode, renderFormComponent: renderFormComponent, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, isStandalone: isStandalone, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue }, componentWithId.id));
|
|
7407
7360
|
}))) : (
|
|
7408
7361
|
// Only show drop zone content in edit mode
|
|
7409
7362
|
mode === 'edit' ? (jsx("div", { className: "empty-cell-placeholder", children: jsxs("div", { className: "cell-info", children: [jsx("span", { className: "drop-zone-text", children: "Drag and Drop a form component" }), jsxs("span", { className: "cell-coordinates", children: ["Cell (", cell.row + 1, ", ", cell.column + 1, ")"] })] }) })) : (
|
|
@@ -7414,7 +7367,7 @@ const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete,
|
|
|
7414
7367
|
visibility: 'hidden' // Hide content but maintain space
|
|
7415
7368
|
}, children: "\u00A0" }))) }) }));
|
|
7416
7369
|
};
|
|
7417
|
-
const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationErrors = {}, touchedFields = {}, formSubmitted = false, onValueChange, onSelect, isSelected = false, className = '', onTableSelect, onComponentSelect, onComponentDelete, onComponentEdit, selectedComponent, renderFormComponent, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue
|
|
7370
|
+
const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationErrors = {}, touchedFields = {}, formSubmitted = false, onValueChange, onSelect, isSelected = false, className = '', onTableSelect, onComponentSelect, onComponentDelete, onComponentEdit, selectedComponent, renderFormComponent, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, isStandalone, user, onCreateIssue, onUpdateIssue }) => {
|
|
7418
7371
|
const [isCollapsed, setIsCollapsed] = useState(false); // Always start expanded to show drop zones
|
|
7419
7372
|
// CRITICAL: Normalize cells from API format (object with numeric keys) to proper 2D array
|
|
7420
7373
|
// The API may return cells as [{"0": {cell}, "1": {cell}}, ...] instead of [[cell, cell], ...]
|
|
@@ -7652,7 +7605,7 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
|
|
|
7652
7605
|
fontSize: '14px',
|
|
7653
7606
|
textAlign: 'center'
|
|
7654
7607
|
}, children: columnName }, `header-${colIndex}`));
|
|
7655
|
-
}) }) })), jsx("tbody", { children: cellsWithIds.map((row, rowIndex) => (jsx("tr", { className: "table-row", children: row.map((cell) => (jsx(TableCellComponent, { cell: cell, mode: mode, onComponentSelect: onComponentSelect || (() => { }), onComponentDelete: handleComponentDelete, onComponentEdit: onComponentEdit, selectedComponent: selectedComponent || null, renderFormComponent: renderComponent, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, tableId: id, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue
|
|
7608
|
+
}) }) })), jsx("tbody", { children: cellsWithIds.map((row, rowIndex) => (jsx("tr", { className: "table-row", children: row.map((cell) => (jsx(TableCellComponent, { cell: cell, mode: mode, onComponentSelect: onComponentSelect || (() => { }), onComponentDelete: handleComponentDelete, onComponentEdit: onComponentEdit, selectedComponent: selectedComponent || null, renderFormComponent: renderComponent, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, tableId: id, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, isStandalone: isStandalone, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue }, cell.id))) }, rowIndex))) })] })] }))] }));
|
|
7656
7609
|
};
|
|
7657
7610
|
|
|
7658
7611
|
var dfFormTable = /*#__PURE__*/Object.freeze({
|