df-ae-forms-package 1.1.6 → 1.1.8
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 +13 -0
- package/dist/index.esm.js +41 -35
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +41 -35
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -334,10 +334,7 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
|
|
|
334
334
|
'Maria Garcia',
|
|
335
335
|
'John Smith',
|
|
336
336
|
'Sarah Johnson'
|
|
337
|
-
], workOrderNumber: initialWorkOrderNumber, assetNumber: initialAssetNumber, isStandalone, isEdit }) => {
|
|
338
|
-
// Determine if workflow actions should be enabled
|
|
339
|
-
// If explicitly provided, use that. Otherwise, default to isEdit (true if editing, false/undefined otherwise).
|
|
340
|
-
// Fallback to false if neither is provided.
|
|
337
|
+
], workOrderNumber: initialWorkOrderNumber, assetNumber: initialAssetNumber, isStandalone, allowWorkflowActions, inEditMode = false, isEdit }) => {
|
|
341
338
|
const [title, setTitle] = React.useState('');
|
|
342
339
|
const [description, setDescription] = React.useState('');
|
|
343
340
|
const [workOrderNumber, setWorkOrderNumber] = React.useState('');
|
|
@@ -350,8 +347,14 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
|
|
|
350
347
|
// State to hold both File objects and existing attachments
|
|
351
348
|
const [localAttachments, setLocalAttachments] = React.useState(attachments || []);
|
|
352
349
|
const [isDragging, setIsDragging] = React.useState(false);
|
|
350
|
+
const [isViewMode, setIsViewMode] = React.useState(!!issue && !inEditMode);
|
|
353
351
|
const fileInputRef = React.useRef(null);
|
|
354
352
|
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;
|
|
355
358
|
React.useEffect(() => {
|
|
356
359
|
if (isOpen) {
|
|
357
360
|
// In edit mode, prioritize issue attachments from API
|
|
@@ -371,6 +374,11 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
|
|
|
371
374
|
}
|
|
372
375
|
}
|
|
373
376
|
}, [isOpen, attachments, issue, isEditMode]);
|
|
377
|
+
React.useEffect(() => {
|
|
378
|
+
if (issue) {
|
|
379
|
+
setIsViewMode(!inEditMode);
|
|
380
|
+
}
|
|
381
|
+
}, [issue, inEditMode]);
|
|
374
382
|
const handleFileChange = (event) => {
|
|
375
383
|
if (event.target.files && event.target.files.length > 0) {
|
|
376
384
|
const newFiles = Array.from(event.target.files);
|
|
@@ -587,6 +595,7 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
|
|
|
587
595
|
await onUpdateIssue(issue._id, updateData);
|
|
588
596
|
}
|
|
589
597
|
toastService.showSuccess('Issue updated successfully');
|
|
598
|
+
setIsViewMode(true);
|
|
590
599
|
if (onSuccess) {
|
|
591
600
|
onSuccess();
|
|
592
601
|
}
|
|
@@ -668,7 +677,7 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
|
|
|
668
677
|
if (!isOpen) {
|
|
669
678
|
return null;
|
|
670
679
|
}
|
|
671
|
-
const modalContent = (jsxRuntime.jsx("div", { className: "raise-issue-modal-overlay", onClick: onClose, children: jsxRuntime.jsxs("div", { className: "raise-issue-modal", onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsxs("div", { className: "raise-issue-modal-header", children: [jsxRuntime.jsxs("div", { className: "raise-issue-modal-header-left", children: [jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "raise-issue-modal-icon", size: 20 }), jsxRuntime.jsx("div", { className: "raise-issue-modal-header-text", children: jsxRuntime.jsx("div", { className: "raise-issue-modal-title-main", children: isEditMode ? 'Issue Details' : 'Create Issue' }) })] }), jsxRuntime.jsx("button", { className: "raise-issue-modal-close", onClick: onClose, "aria-label": "Close", children: jsxRuntime.jsx(lucideReact.X, { size: 18 }) })] }), jsxRuntime.jsx("div", { className: "raise-issue-modal-content", children: jsxRuntime.jsxs("div", { className: "raise-issue-fields-grid", children: [isEditMode && issue?.issueNumber && (jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsx("label", { className: "raise-issue-field-label", children: "Issue ID" }), jsxRuntime.jsx("input", { type: "text", className: "raise-issue-field-input raise-issue-field-readonly", value: issue.issueNumber, readOnly: true })] })), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsx("label", { className: "raise-issue-field-label", children: "Task" }), jsxRuntime.jsx("input", { type: "text", className: "raise-issue-field-input raise-issue-field-readonly", value: isEditMode ? (issue?.component?.basic?.label || '') : (component?.basic?.label || ''), readOnly: true })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsx("label", { className: "raise-issue-field-label", children: "Task Value" }), jsxRuntime.jsx("input", { type: "text", className: "raise-issue-field-input raise-issue-field-readonly", value: isEditMode ? (issue?.component?.basic?.value || '') : (component?.basic?.value || ''), readOnly: true })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Title ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.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 })] }), !isStandalone && (jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Work Order ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.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 })] })), !isStandalone && (jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Asset Number ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.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 })] })), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Raised By ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field-value-with-icon", children: [jsxRuntime.jsx(lucideReact.User, { size: 16 }), jsxRuntime.jsx("span", { children: user ? `${user.firstName || ''} ${user.lastName || ''}`.trim() || 'User' : 'User' })] })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsx("label", { className: "raise-issue-field-label", children: "Created On" }), jsxRuntime.jsxs("div", { className: "raise-issue-field-value-with-icon", children: [jsxRuntime.jsx(lucideReact.Calendar, { size: 16 }), jsxRuntime.jsx("span", { children: isEditMode && issue?.createdAt
|
|
680
|
+
const modalContent = (jsxRuntime.jsx("div", { className: "raise-issue-modal-overlay", onClick: onClose, children: jsxRuntime.jsxs("div", { className: "raise-issue-modal", onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsxs("div", { className: "raise-issue-modal-header", children: [jsxRuntime.jsxs("div", { className: "raise-issue-modal-header-left", children: [jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "raise-issue-modal-icon", size: 20 }), jsxRuntime.jsx("div", { className: "raise-issue-modal-header-text", children: jsxRuntime.jsx("div", { className: "raise-issue-modal-title-main", children: isEditMode ? 'Issue Details' : 'Create Issue' }) })] }), jsxRuntime.jsx("button", { className: "raise-issue-modal-close", onClick: onClose, "aria-label": "Close", children: jsxRuntime.jsx(lucideReact.X, { size: 18 }) })] }), jsxRuntime.jsx("div", { className: "raise-issue-modal-content", children: jsxRuntime.jsxs("div", { className: "raise-issue-fields-grid", children: [isEditMode && issue?.issueNumber && (jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsx("label", { className: "raise-issue-field-label", children: "Issue ID" }), jsxRuntime.jsx("input", { type: "text", className: "raise-issue-field-input raise-issue-field-readonly", value: issue.issueNumber, readOnly: true })] })), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsx("label", { className: "raise-issue-field-label", children: "Task" }), jsxRuntime.jsx("input", { type: "text", className: "raise-issue-field-input raise-issue-field-readonly", value: isEditMode ? (issue?.component?.basic?.label || '') : (component?.basic?.label || ''), readOnly: true })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsx("label", { className: "raise-issue-field-label", children: "Task Value" }), jsxRuntime.jsx("input", { type: "text", className: "raise-issue-field-input raise-issue-field-readonly", value: isEditMode ? (issue?.component?.basic?.value || '') : (component?.basic?.value || ''), readOnly: true })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Title ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.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 && (jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Work Order ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.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 && (jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Asset Number ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.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 })] })), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Raised By ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field-value-with-icon", children: [jsxRuntime.jsx(lucideReact.User, { size: 16 }), jsxRuntime.jsx("span", { children: user ? `${user.firstName || ''} ${user.lastName || ''}`.trim() || 'User' : 'User' })] })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsx("label", { className: "raise-issue-field-label", children: "Created On" }), jsxRuntime.jsxs("div", { className: "raise-issue-field-value-with-icon", children: [jsxRuntime.jsx(lucideReact.Calendar, { size: 16 }), jsxRuntime.jsx("span", { children: isEditMode && issue?.createdAt
|
|
672
681
|
? (safeDate(issue.createdAt) || new Date()).toLocaleString('en-US', {
|
|
673
682
|
year: 'numeric',
|
|
674
683
|
month: 'short',
|
|
@@ -684,12 +693,12 @@ const RaiseIssueModal = ({ isOpen, onClose, onSuccess, component, formTemplateId
|
|
|
684
693
|
hour: '2-digit',
|
|
685
694
|
minute: '2-digit',
|
|
686
695
|
hour12: true
|
|
687
|
-
}) })] })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field raise-issue-field-full-width", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Description ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.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 })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Status ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.
|
|
696
|
+
}) })] })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field raise-issue-field-full-width", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Description ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.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 })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Status ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.jsx("input", { type: "text", className: "raise-issue-field-input raise-issue-field-readonly", value: status, readOnly: true })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Assign to ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.jsxs("select", { className: "raise-issue-field-select", value: assignee, onChange: (e) => setAssignee(e.target.value), disabled: isEditMode && isViewMode, children: [jsxRuntime.jsx("option", { value: "", children: "Unassigned" }), availableUsers.map(userName => (jsxRuntime.jsx("option", { value: userName, children: userName }, userName)))] })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field raise-issue-field-full-width", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label", children: ["Priority ", jsxRuntime.jsx("span", { className: "raise-issue-required", children: "*" })] }), jsxRuntime.jsxs("div", { className: "raise-issue-priority-buttons", children: [jsxRuntime.jsx("button", { type: "button", className: `priority-button priority-low ${priority === 'Low' ? 'active' : ''}`, onClick: () => setPriority('Low'), disabled: isEditMode && isViewMode, children: "Low" }), jsxRuntime.jsx("button", { type: "button", className: `priority-button priority-medium ${priority === 'Medium' ? 'active' : ''}`, onClick: () => setPriority('Medium'), disabled: isEditMode && isViewMode, children: "Medium" }), jsxRuntime.jsx("button", { type: "button", className: `priority-button priority-high ${priority === 'High' ? 'active' : ''}`, onClick: () => setPriority('High'), disabled: isEditMode && isViewMode, children: "High" })] })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field raise-issue-field-full-width", children: [jsxRuntime.jsxs("label", { className: "raise-issue-field-label-with-icon", children: [jsxRuntime.jsx(lucideReact.MessageSquare, { size: 16 }), jsxRuntime.jsx("span", { children: "Comments" })] }), !comments && (jsxRuntime.jsx("div", { className: "raise-issue-no-comments", children: "No comments yet" })), jsxRuntime.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 })] }), jsxRuntime.jsxs("div", { className: "raise-issue-field raise-issue-field-full-width", style: { marginTop: '1rem' }, children: [jsxRuntime.jsx("label", { className: "raise-issue-field-label", children: "Attachments" }), jsxRuntime.jsxs("div", { className: "raise-issue-attachments-container", children: [!isEditMode && (jsxRuntime.jsxs("div", { className: `raise-issue-dropzone ${isDragging ? 'dragging' : ''}`, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: () => fileInputRef.current?.click(), children: [jsxRuntime.jsx("input", { type: "file", ref: fileInputRef, style: { display: 'none' }, onChange: handleFileChange, multiple: true }), jsxRuntime.jsx("div", { className: "raise-issue-dropzone-icon", children: jsxRuntime.jsx(lucideReact.UploadCloud, { size: 24 }) }), jsxRuntime.jsx("div", { className: "raise-issue-dropzone-text", children: "Click to upload or drag and drop" }), jsxRuntime.jsx("div", { className: "raise-issue-dropzone-hint", children: "PNG, JPG up to 10MB" })] })), localAttachments.length > 0 && (jsxRuntime.jsx("div", { className: "raise-issue-attachments-list", children: localAttachments.map((file, index) => (jsxRuntime.jsxs("div", { className: "raise-issue-attachment-item", children: [jsxRuntime.jsx("div", { className: "raise-issue-attachment-thumbnail", children: getAttachmentPreview(file) ? (jsxRuntime.jsx("img", { src: getAttachmentPreview(file), alt: "Thumbnail" })) : (jsxRuntime.jsx(lucideReact.Paperclip, { size: 20, color: "#9ca3af" })) }), jsxRuntime.jsxs("div", { className: "raise-issue-attachment-info", children: [jsxRuntime.jsx("span", { className: "attachment-name", title: getAttachmentName(file), children: getAttachmentName(file) }), file instanceof File && (jsxRuntime.jsxs("span", { className: "attachment-size", children: [(file.size / 1024).toFixed(1), " KB"] }))] }), !isEditMode && (jsxRuntime.jsx("button", { type: "button", className: "attachment-remove-btn", onClick: () => handleRemoveAttachment(index), title: "Remove", children: jsxRuntime.jsx(lucideReact.X, { size: 12 }) }))] }, index))) }))] })] })] }) }), jsxRuntime.jsx("div", { className: "raise-issue-modal-actions", children: jsxRuntime.jsxs("div", { className: "raise-issue-modal-actions-buttons", children: [(showWorkflowActions && issue) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [status === EIssueStatus.OPEN && (jsxRuntime.jsx("button", { className: "raise-issue-modal-button raise-issue-modal-button-accept", onClick: handleAccept, disabled: isSubmitting, children: isSubmitting ? 'Processing...' : 'Accept' })), status === EIssueStatus.IN_PROGRESS && (jsxRuntime.jsx("button", { className: "raise-issue-modal-button raise-issue-modal-button-resolve", onClick: handleResolve, disabled: isSubmitting, children: isSubmitting ? 'Processing...' : 'Resolve' })), (status === EIssueStatus.OPEN) && (jsxRuntime.jsx("button", { className: "raise-issue-modal-button raise-issue-modal-button-reject", onClick: handleReject, disabled: isSubmitting, children: isSubmitting ? 'Processing...' : 'Reject' }))] })), !isEditMode && (jsxRuntime.jsx("button", { className: `raise-issue-modal-button raise-issue-modal-button-save ${!isFormValid ? 'disabled' : ''}`, onClick: handleSubmit, disabled: isSubmitting || !isFormValid, children: isSubmitting ? 'Creating...' : 'Create Issue' }))] }) })] }) }));
|
|
688
697
|
// Render modal using portal to document body for full-page overlay
|
|
689
698
|
return require$$0.createPortal(modalContent, document.body);
|
|
690
699
|
};
|
|
691
700
|
|
|
692
|
-
const ThresholdAlert = ({ component, condition, currentValue, thresholdValue, formTemplateId, workOrderNumber, assetNumber, user, onIssueRaised, isIssueRaised = false, compact = false }) => {
|
|
701
|
+
const ThresholdAlert = ({ component, condition, currentValue, thresholdValue, formTemplateId, workOrderNumber, assetNumber, user, onIssueRaised, isIssueRaised = false, compact = false, allowWorkflowActions, inEditMode }) => {
|
|
693
702
|
const [showRaiseIssueModal, setShowRaiseIssueModal] = React.useState(false);
|
|
694
703
|
const [issue, setIssue] = React.useState(null);
|
|
695
704
|
const [isLoadingIssue, setIsLoadingIssue] = React.useState(false);
|
|
@@ -781,16 +790,16 @@ const ThresholdAlert = ({ component, condition, currentValue, thresholdValue, fo
|
|
|
781
790
|
// If issue is raised (either from prop or local state), don't show anything
|
|
782
791
|
// The ComponentActionFeatures will handle showing the raised issue state
|
|
783
792
|
if (isIssueRaised || localIssueRaised) {
|
|
784
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: showRaiseIssueModal && (jsxRuntime.jsx(RaiseIssueModal, { isOpen: showRaiseIssueModal, onClose: handleRaiseIssueClose, onSuccess: handleRaiseIssueSuccess, component: component, formTemplateId: formTemplateId, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, notes: "", attachments: null, issue: issue })) }));
|
|
793
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: showRaiseIssueModal && (jsxRuntime.jsx(RaiseIssueModal, { isOpen: showRaiseIssueModal, onClose: handleRaiseIssueClose, onSuccess: handleRaiseIssueSuccess, component: component, formTemplateId: formTemplateId, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, notes: "", attachments: null, issue: issue, allowWorkflowActions: allowWorkflowActions, inEditMode: inEditMode })) }));
|
|
785
794
|
}
|
|
786
795
|
// Show compact version for small screens/tables
|
|
787
796
|
if (compact) {
|
|
788
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "threshold-alert threshold-alert-unresolved threshold-alert-compact", children: [jsxRuntime.jsx("div", { className: "threshold-alert-border" }), jsxRuntime.jsxs("div", { className: "threshold-alert-content-compact", children: [jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "threshold-alert-icon-compact", size: 14 }), jsxRuntime.jsx("span", { className: "threshold-alert-message-compact", children: getCompactMessage() }), jsxRuntime.jsx("button", { type: "button", onClick: handleRaiseIssueClick, className: "threshold-alert-raise-issue-btn-compact", title: "Raise Issue", children: "Raise Issue" })] })] }), showRaiseIssueModal && (jsxRuntime.jsx(RaiseIssueModal, { isOpen: showRaiseIssueModal, onClose: handleRaiseIssueClose, onSuccess: handleRaiseIssueSuccess, component: component, formTemplateId: formTemplateId, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, notes: "", attachments: null, issue: issue }))] }));
|
|
797
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "threshold-alert threshold-alert-unresolved threshold-alert-compact", children: [jsxRuntime.jsx("div", { className: "threshold-alert-border" }), jsxRuntime.jsxs("div", { className: "threshold-alert-content-compact", children: [jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "threshold-alert-icon-compact", size: 14 }), jsxRuntime.jsx("span", { className: "threshold-alert-message-compact", children: getCompactMessage() }), jsxRuntime.jsx("button", { type: "button", onClick: handleRaiseIssueClick, className: "threshold-alert-raise-issue-btn-compact", title: "Raise Issue", children: "Raise Issue" })] })] }), showRaiseIssueModal && (jsxRuntime.jsx(RaiseIssueModal, { isOpen: showRaiseIssueModal, onClose: handleRaiseIssueClose, onSuccess: handleRaiseIssueSuccess, component: component, formTemplateId: formTemplateId, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, notes: "", attachments: null, issue: issue, allowWorkflowActions: allowWorkflowActions, inEditMode: inEditMode }))] }));
|
|
789
798
|
}
|
|
790
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "threshold-alert threshold-alert-unresolved", children: [jsxRuntime.jsx("div", { className: "threshold-alert-border" }), jsxRuntime.jsxs("div", { className: "threshold-alert-content", children: [jsxRuntime.jsx("div", { className: "threshold-alert-header", children: jsxRuntime.jsxs("div", { className: "threshold-alert-title-group", children: [jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "threshold-alert-icon", size: 20 }), jsxRuntime.jsx("span", { className: "threshold-alert-title", children: "Threshold Condition Met - Action Required" })] }) }), jsxRuntime.jsxs("div", { className: "threshold-alert-message", children: [getConditionMessage(), jsxRuntime.jsx("span", { className: "threshold-alert-warning", children: " You must raise an issue before submitting the form." })] }), jsxRuntime.jsx("div", { className: "threshold-alert-buttons", children: jsxRuntime.jsx("button", { type: "button", onClick: handleRaiseIssueClick, className: "threshold-alert-raise-issue-btn", children: "Raise Issue Now" }) })] })] }), showRaiseIssueModal && (jsxRuntime.jsx(RaiseIssueModal, { isOpen: showRaiseIssueModal, onClose: handleRaiseIssueClose, onSuccess: handleRaiseIssueSuccess, component: component, formTemplateId: formTemplateId, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, notes: "", attachments: null, issue: issue }))] }));
|
|
799
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "threshold-alert threshold-alert-unresolved", children: [jsxRuntime.jsx("div", { className: "threshold-alert-border" }), jsxRuntime.jsxs("div", { className: "threshold-alert-content", children: [jsxRuntime.jsx("div", { className: "threshold-alert-header", children: jsxRuntime.jsxs("div", { className: "threshold-alert-title-group", children: [jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "threshold-alert-icon", size: 20 }), jsxRuntime.jsx("span", { className: "threshold-alert-title", children: "Threshold Condition Met - Action Required" })] }) }), jsxRuntime.jsxs("div", { className: "threshold-alert-message", children: [getConditionMessage(), jsxRuntime.jsx("span", { className: "threshold-alert-warning", children: " You must raise an issue before submitting the form." })] }), jsxRuntime.jsx("div", { className: "threshold-alert-buttons", children: jsxRuntime.jsx("button", { type: "button", onClick: handleRaiseIssueClick, className: "threshold-alert-raise-issue-btn", children: "Raise Issue Now" }) })] })] }), showRaiseIssueModal && (jsxRuntime.jsx(RaiseIssueModal, { isOpen: showRaiseIssueModal, onClose: handleRaiseIssueClose, onSuccess: handleRaiseIssueSuccess, component: component, formTemplateId: formTemplateId, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, notes: "", attachments: null, issue: issue, allowWorkflowActions: allowWorkflowActions, inEditMode: inEditMode }))] }));
|
|
791
800
|
};
|
|
792
801
|
|
|
793
|
-
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 }) => {
|
|
802
|
+
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, allowWorkflowActions, inEditMode }) => {
|
|
794
803
|
// Ensure formValue is always a string to prevent [object Object] errors
|
|
795
804
|
const getStringValue = (val) => {
|
|
796
805
|
if (val === null || val === undefined)
|
|
@@ -1154,7 +1163,7 @@ const DfFormInput = ({ id, properties, validationErrors = {}, formValue = '', in
|
|
|
1154
1163
|
inputWrapperRef.current?.closest('.datagrid-list-view') !== null ||
|
|
1155
1164
|
className.includes('table-cell') ||
|
|
1156
1165
|
className.includes('cell-content');
|
|
1157
|
-
return (jsxRuntime.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}`));
|
|
1166
|
+
return (jsxRuntime.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, allowWorkflowActions: allowWorkflowActions, inEditMode: inEditMode }, `${activeThresholdCondition.id}-${issueRaised}`));
|
|
1158
1167
|
})()] }));
|
|
1159
1168
|
};
|
|
1160
1169
|
|
|
@@ -3741,7 +3750,7 @@ const AttachmentThumbnails = ({ attachments, onRemove }) => {
|
|
|
3741
3750
|
return (jsxRuntime.jsx("div", { className: "attachment-thumbnail", children: isImage && objectUrl ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { src: objectUrl, alt: file ? file.name : 'Attachment' }), jsxRuntime.jsx("button", { type: "button", className: "thumbnail-remove-btn", onClick: () => onRemove(index), title: "Remove attachment", children: jsxRuntime.jsx(lucideReact.X, { size: 14 }) })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "file-icon-placeholder", children: jsxRuntime.jsx(lucideReact.Paperclip, { size: 20 }) }), jsxRuntime.jsx("span", { className: "file-name", children: file ? file.name : 'Unknown File' }), jsxRuntime.jsx("button", { type: "button", className: "thumbnail-remove-btn", onClick: () => onRemove(index), title: "Remove attachment", children: jsxRuntime.jsx(lucideReact.X, { size: 14 }) })] })) }, index));
|
|
3742
3751
|
}) }));
|
|
3743
3752
|
};
|
|
3744
|
-
const ComponentActionFeatures = ({ component, mode, formTemplateId, formValue, formData, onNotesChange, onAttachmentChange, notes = '', attachments = null, onThresholdActionCompletion, onThresholdIssueRaised, onBasicPropertyActionCompletion, workOrderNumber, assetNumber, isStandalone, user, onCreateIssue, onUpdateIssue }) => {
|
|
3753
|
+
const ComponentActionFeatures = ({ component, mode, formTemplateId, formValue, formData, onNotesChange, onAttachmentChange, notes = '', attachments = null, onThresholdActionCompletion, onThresholdIssueRaised, onBasicPropertyActionCompletion, workOrderNumber, assetNumber, isStandalone, user, onCreateIssue, onUpdateIssue, allowWorkflowActions, inEditMode }) => {
|
|
3745
3754
|
// Determine effective form value (prefer prop, fallback to formData lookup)
|
|
3746
3755
|
const effectiveFormValue = formValue !== undefined ? formValue : (formData ? formData[component.id] : undefined);
|
|
3747
3756
|
// Use effectiveFormValue for logic instead of raw formValue
|
|
@@ -4019,10 +4028,8 @@ const ComponentActionFeatures = ({ component, mode, formTemplateId, formValue, f
|
|
|
4019
4028
|
}, 3000);
|
|
4020
4029
|
}, [getActiveThresholdConditions, onThresholdActionCompletion, component, onBasicPropertyActionCompletion]);
|
|
4021
4030
|
const handleRaiseIssueClick = React.useCallback(() => {
|
|
4022
|
-
if (issueRaised)
|
|
4023
|
-
return;
|
|
4024
4031
|
setShowRaiseIssueModal(true);
|
|
4025
|
-
}, [
|
|
4032
|
+
}, []);
|
|
4026
4033
|
const handleRaiseIssueClose = React.useCallback(() => {
|
|
4027
4034
|
setShowRaiseIssueModal(false);
|
|
4028
4035
|
}, []);
|
|
@@ -4229,7 +4236,7 @@ const ComponentActionFeatures = ({ component, mode, formTemplateId, formValue, f
|
|
|
4229
4236
|
modalComponent.basic.value = selectedOption.value || effectiveValue;
|
|
4230
4237
|
}
|
|
4231
4238
|
return modalComponent;
|
|
4232
|
-
})(), formTemplateId: formTemplateId || '', notes: localNotes, attachments: localAttachments, isStandalone: isStandalone, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue }))] }));
|
|
4239
|
+
})(), formTemplateId: formTemplateId || '', notes: localNotes, attachments: localAttachments, isStandalone: isStandalone, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue, allowWorkflowActions: allowWorkflowActions, inEditMode: inEditMode }))] }));
|
|
4233
4240
|
};
|
|
4234
4241
|
|
|
4235
4242
|
// Attachment Thumbnails Component for Submission View
|
|
@@ -4295,7 +4302,7 @@ function ensureStringId$2(id) {
|
|
|
4295
4302
|
}
|
|
4296
4303
|
return String(id);
|
|
4297
4304
|
}
|
|
4298
|
-
const DraggableGridComponent = ({ component, selectedComponent, mode, onComponentSelect, onComponentDelete, onComponentEdit, renderFormComponent, isOverlay = false, formData = {}, formTemplateId,
|
|
4305
|
+
const DraggableGridComponent = ({ component, selectedComponent, mode, onComponentSelect, onComponentDelete, onComponentEdit, renderFormComponent, isOverlay = false, formData = {}, formTemplateId, onThresholdIssueRaised, onNotesChange, onAttachmentChange, shouldShowComponent }) => {
|
|
4299
4306
|
const formValue = formData[component.id];
|
|
4300
4307
|
const isVisible = shouldShowComponent ? shouldShowComponent(component.id) : true;
|
|
4301
4308
|
// Check if component has notes or attachments for submission view
|
|
@@ -4466,8 +4473,7 @@ const GridDropZone = ({ gridComponents, mode, onComponentSelect, onComponentDele
|
|
|
4466
4473
|
}, children: isOver ? (jsxRuntime.jsx("span", { style: { color: '#3b82f6', fontWeight: '500' }, children: "Drop component here to add to grid" })) : (jsxRuntime.jsx("span", { children: "+ Drop more components here" })) })] })) }));
|
|
4467
4474
|
};
|
|
4468
4475
|
// Sub-component for displaying entries (TableView)
|
|
4469
|
-
const TableView = ({ templateComponents, dataEntries, renderFormComponent, mode, allowAddRemoveEntries, addAnotherText, removeText, maxEntries, minEntries, displayAsGrid = true, onAddEntry, onRemoveEntry, formData,
|
|
4470
|
-
formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, columnView, shouldShowComponent }) => {
|
|
4476
|
+
const TableView = ({ templateComponents, dataEntries, renderFormComponent, mode, allowAddRemoveEntries, addAnotherText, removeText, maxEntries, minEntries, displayAsGrid = true, onAddEntry, onRemoveEntry, formData, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, columnView, shouldShowComponent, allowWorkflowActions, inEditMode }) => {
|
|
4471
4477
|
const _formData = formData || {};
|
|
4472
4478
|
const visibleTemplateComponents = React.useMemo(() => {
|
|
4473
4479
|
if (!shouldShowComponent)
|
|
@@ -5134,7 +5140,7 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
|
|
|
5134
5140
|
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 })) }))] }));
|
|
5135
5141
|
};
|
|
5136
5142
|
|
|
5137
|
-
const DraggableChild = ({ child, selectedChild, mode, onChildSelect, onChildDelete, renderFormComponent, isOverlay = false, isChildrenEditMode = false, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue }) => {
|
|
5143
|
+
const DraggableChild = ({ child, selectedChild, mode, onChildSelect, onChildDelete, renderFormComponent, isOverlay = false, isChildrenEditMode = false, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue, allowWorkflowActions, inEditMode }) => {
|
|
5138
5144
|
const formValue = formData[child.id];
|
|
5139
5145
|
// Check if component has notes or attachments for submission view
|
|
5140
5146
|
const hasSubmissionData = mode === 'preview' && ((child.basic?.notes && child.basic.notes.trim().length > 0) ||
|
|
@@ -5152,9 +5158,9 @@ const DraggableChild = ({ child, selectedChild, mode, onChildSelect, onChildDele
|
|
|
5152
5158
|
return (jsxRuntime.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) && (jsxRuntime.jsx("div", { className: "child-drag-handle", ...listeners, ...attributes, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), children: jsxRuntime.jsx(lucideReact.GripVertical, { size: 14 }) })), jsxRuntime.jsxs("div", { className: "form-component-content section-child-content", children: [(mode === 'edit' || isChildrenEditMode) && (jsxRuntime.jsxs("div", { className: "component-actions child-actions", children: [jsxRuntime.jsx("button", { className: "btn edit-btn", onClick: (e) => {
|
|
5153
5159
|
e.stopPropagation();
|
|
5154
5160
|
onChildSelect(child);
|
|
5155
|
-
}, onMouseDown: (e) => e.stopPropagation(), title: "Edit properties", children: jsxRuntime.jsx(lucideReact.Edit, { size: 12 }) }), jsxRuntime.jsx("button", { className: "btn delete-btn", onClick: (e) => onChildDelete(child, e), onMouseDown: (e) => e.stopPropagation(), title: "Delete component", children: jsxRuntime.jsx(lucideReact.Trash2, { size: 12 }) })] })), jsxRuntime.jsxs("div", { className: "component-preview child-preview", children: [renderFormComponent(child), !['section', 'table', 'heading', 'file', 'instructions', 'signature', 'location', 'datagrid'].includes(child.name) && (jsxRuntime.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 })), hasSubmissionData && (jsxRuntime.jsx(ComponentSubmissionActions, { component: child }))] })] })] }));
|
|
5161
|
+
}, onMouseDown: (e) => e.stopPropagation(), title: "Edit properties", children: jsxRuntime.jsx(lucideReact.Edit, { size: 12 }) }), jsxRuntime.jsx("button", { className: "btn delete-btn", onClick: (e) => onChildDelete(child, e), onMouseDown: (e) => e.stopPropagation(), title: "Delete component", children: jsxRuntime.jsx(lucideReact.Trash2, { size: 12 }) })] })), jsxRuntime.jsxs("div", { className: "component-preview child-preview", children: [renderFormComponent(child), !['section', 'table', 'heading', 'file', 'instructions', 'signature', 'location', 'datagrid'].includes(child.name) && (jsxRuntime.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, allowWorkflowActions: allowWorkflowActions, inEditMode: inEditMode })), hasSubmissionData && (jsxRuntime.jsx(ComponentSubmissionActions, { component: child }))] })] })] }));
|
|
5156
5162
|
};
|
|
5157
|
-
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 }) => {
|
|
5163
|
+
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, allowWorkflowActions, inEditMode }) => {
|
|
5158
5164
|
const [isCollapsed, setIsCollapsed] = React.useState(properties.basic.collapsed);
|
|
5159
5165
|
const [isEditingTitle, setIsEditingTitle] = React.useState(false);
|
|
5160
5166
|
const [isEditingDescription, setIsEditingDescription] = React.useState(false);
|
|
@@ -5367,7 +5373,7 @@ const DfFormSection = ({ id, properties, mode = 'edit', formData = {}, onValueCh
|
|
|
5367
5373
|
}, children: isOver ? 'Drop components here' : 'Empty Section' }), jsxRuntime.jsx("div", { style: {
|
|
5368
5374
|
fontSize: '12px',
|
|
5369
5375
|
color: '#9ca3af'
|
|
5370
|
-
}, children: "Drag and drop components here to create your section" })] })) : (children.map((child) => (jsxRuntime.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 }, child.id)))) }) }))] }));
|
|
5376
|
+
}, children: "Drag and drop components here to create your section" })] })) : (children.map((child) => (jsxRuntime.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, allowWorkflowActions: allowWorkflowActions, inEditMode: inEditMode }, child.id)))) }) }))] }));
|
|
5371
5377
|
};
|
|
5372
5378
|
|
|
5373
5379
|
// Dynamic imports to avoid circular dependencies
|
|
@@ -5417,7 +5423,7 @@ const normalizeTableRow = (row) => {
|
|
|
5417
5423
|
};
|
|
5418
5424
|
const DfFormPreview = ({ formComponents = [], currentDevice = 'desktop', isPreviewMode = false, initialFormData = [], onSubmit, onFormDataChange, formTitle, formDescription, formTemplateId,
|
|
5419
5425
|
// Add component management props for edit mode
|
|
5420
|
-
onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, selectedComponent, workOrderNumber, assetNumber, isStandalone, user, onCreateIssue, onUpdateIssue }) => {
|
|
5426
|
+
onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, selectedComponent, workOrderNumber, assetNumber, isStandalone, user, onCreateIssue, onUpdateIssue, allowWorkflowActions, inEditMode }) => {
|
|
5421
5427
|
// Local copy of formComponents so structure updates (e.g. table cell init) are reflected immediately
|
|
5422
5428
|
const [localFormComponents, setLocalFormComponents] = React.useState(formComponents);
|
|
5423
5429
|
// Sync local state when the prop changes from the parent
|
|
@@ -6772,7 +6778,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
6772
6778
|
case 'email-input':
|
|
6773
6779
|
// Regular text/email/number input
|
|
6774
6780
|
return (jsxRuntime.jsx(DfFormInput, { ...commonProps, properties: component, inputType: component.name === 'text-input' ? 'text' :
|
|
6775
|
-
component.name === 'number-input' ? 'number' : 'email', formTemplateId: formTemplateId, onThresholdIssueRaised: handleThresholdIssueRaised, raisedThresholdIssues: raisedThresholdIssues, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user }));
|
|
6781
|
+
component.name === 'number-input' ? 'number' : 'email', formTemplateId: formTemplateId, onThresholdIssueRaised: handleThresholdIssueRaised, raisedThresholdIssues: raisedThresholdIssues, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, allowWorkflowActions: allowWorkflowActions, inEditMode: inEditMode }));
|
|
6776
6782
|
case 'textarea':
|
|
6777
6783
|
return jsxRuntime.jsx(DfFormTextarea, { ...commonProps, properties: component });
|
|
6778
6784
|
case 'select':
|
|
@@ -6838,13 +6844,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
6838
6844
|
case 'location':
|
|
6839
6845
|
return jsxRuntime.jsx(DfFormLocation, { ...commonProps, properties: component });
|
|
6840
6846
|
case 'section':
|
|
6841
|
-
return (jsxRuntime.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, renderFormComponent: (field) => {
|
|
6847
|
+
return (jsxRuntime.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, allowWorkflowActions: allowWorkflowActions, inEditMode: inEditMode, renderFormComponent: (field) => {
|
|
6842
6848
|
// Ensure the nested component gets the proper form value
|
|
6843
6849
|
// const fieldValue = formValues[field.id] || (field.basic as any)?.value || (field.basic as any)?.defaultValue || ''
|
|
6844
6850
|
return renderFormComponent(field);
|
|
6845
6851
|
} }));
|
|
6846
6852
|
case 'table':
|
|
6847
|
-
return (jsxRuntime.jsx(React.Suspense, { fallback: jsxRuntime.jsx("div", { children: "Loading table..." }), children: jsxRuntime.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, renderFormComponent: (field) => {
|
|
6853
|
+
return (jsxRuntime.jsx(React.Suspense, { fallback: jsxRuntime.jsx("div", { children: "Loading table..." }), children: jsxRuntime.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, allowWorkflowActions: allowWorkflowActions, inEditMode: inEditMode, renderFormComponent: (field) => {
|
|
6848
6854
|
return renderFormComponent(field);
|
|
6849
6855
|
}, onNotesChange: (componentId, notes) => {
|
|
6850
6856
|
// Handle notes change for table cell components
|
|
@@ -7182,7 +7188,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
7182
7188
|
return comp;
|
|
7183
7189
|
});
|
|
7184
7190
|
onFormDataChange?.(updatedComponents);
|
|
7185
|
-
}, 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 && (jsxRuntime.jsx(ComponentSubmissionActions, { component: component }))] }, component.id));
|
|
7191
|
+
}, 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, allowWorkflowActions: allowWorkflowActions, inEditMode: inEditMode })), isPreviewMode && hasSubmissionData && (jsxRuntime.jsx(ComponentSubmissionActions, { component: component }))] }, component.id));
|
|
7186
7192
|
}), !isPreviewMode && (jsxRuntime.jsxs("div", { className: "form-actions", children: [!formSubmitted && (jsxRuntime.jsx("button", { type: "button", onClick: () => handleSubmit('Saved'), className: "form-save-button", disabled: formSubmitted && !isFormValid(), children: "Save" })), jsxRuntime.jsx("button", { type: "button", disabled: !isFormValid() || !thresholdValidationState.isValid, className: "form-submit-button", title: !thresholdValidationState.isValid ? thresholdValidationState.errorMessage : '', onClick: () => handleSubmit('Submitted'), children: "Submit" })] }))] }))] }) }) }));
|
|
7187
7193
|
};
|
|
7188
7194
|
|
|
@@ -7277,12 +7283,12 @@ const ensureComponentHasId = (component) => {
|
|
|
7277
7283
|
}
|
|
7278
7284
|
return component;
|
|
7279
7285
|
};
|
|
7280
|
-
const SimpleTableComponent = ({ component, mode, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue }) => {
|
|
7286
|
+
const SimpleTableComponent = ({ component, mode, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue, allowWorkflowActions, inEditMode }) => {
|
|
7281
7287
|
const formValue = formData[component.id];
|
|
7282
7288
|
// Check if component has notes or attachments for submission view
|
|
7283
7289
|
const hasSubmissionData = mode === 'preview' && ((component.basic?.notes && component.basic.notes.trim().length > 0) ||
|
|
7284
7290
|
(component.basic?.attachments && Array.isArray(component.basic.attachments) && component.basic.attachments.length > 0));
|
|
7285
|
-
return (jsxRuntime.jsxs("div", { className: "simple-table-component", children: [renderFormComponent(component), !['section', 'table', 'heading', 'file', 'instructions', 'signature', 'location', 'datagrid'].includes(component.name) && (jsxRuntime.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 })), hasSubmissionData && (jsxRuntime.jsx(ComponentSubmissionActions, { component: component }))] }));
|
|
7291
|
+
return (jsxRuntime.jsxs("div", { className: "simple-table-component", children: [renderFormComponent(component), !['section', 'table', 'heading', 'file', 'instructions', 'signature', 'location', 'datagrid'].includes(component.name) && (jsxRuntime.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, allowWorkflowActions: allowWorkflowActions, inEditMode: inEditMode })), hasSubmissionData && (jsxRuntime.jsx(ComponentSubmissionActions, { component: component }))] }));
|
|
7286
7292
|
};
|
|
7287
7293
|
const DraggableTableComponent = ({ component, selectedComponent, mode, onComponentSelect, onComponentDelete, onComponentEdit, renderFormComponent, isOverlay = false, }) => {
|
|
7288
7294
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging, isSorting, } = sortable.useSortable({
|
|
@@ -7303,7 +7309,7 @@ const DraggableTableComponent = ({ component, selectedComponent, mode, onCompone
|
|
|
7303
7309
|
onComponentDelete(component, e);
|
|
7304
7310
|
}, type: "button", title: "Delete Component", children: jsxRuntime.jsx(lucideReact.Trash2, { size: 12 }) })] }))] }));
|
|
7305
7311
|
};
|
|
7306
|
-
const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete, onComponentEdit, selectedComponent, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, tableId, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue }) => {
|
|
7312
|
+
const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete, onComponentEdit, selectedComponent, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, tableId, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue, allowWorkflowActions, inEditMode }) => {
|
|
7307
7313
|
const dropZoneId = `table-cell-${tableId}-${cell.row}-${cell.column}`;
|
|
7308
7314
|
const { setNodeRef, isOver } = core.useDroppable({
|
|
7309
7315
|
id: dropZoneId,
|
|
@@ -7338,7 +7344,7 @@ const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete,
|
|
|
7338
7344
|
cell.components.map((component) => {
|
|
7339
7345
|
// Only ensure ID if it's truly missing - don't regenerate existing IDs
|
|
7340
7346
|
const componentWithId = component.id ? component : ensureComponentHasId(component);
|
|
7341
|
-
return (jsxRuntime.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 }, componentWithId.id));
|
|
7347
|
+
return (jsxRuntime.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, allowWorkflowActions: allowWorkflowActions, inEditMode: inEditMode }, componentWithId.id));
|
|
7342
7348
|
}))) : (
|
|
7343
7349
|
// Only show drop zone content in edit mode
|
|
7344
7350
|
mode === 'edit' ? (jsxRuntime.jsx("div", { className: "empty-cell-placeholder", children: jsxRuntime.jsxs("div", { className: "cell-info", children: [jsxRuntime.jsx("span", { className: "drop-zone-text", children: "Drag and Drop a form component" }), jsxRuntime.jsxs("span", { className: "cell-coordinates", children: ["Cell (", cell.row + 1, ", ", cell.column + 1, ")"] })] }) })) : (
|
|
@@ -7349,7 +7355,7 @@ const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete,
|
|
|
7349
7355
|
visibility: 'hidden' // Hide content but maintain space
|
|
7350
7356
|
}, children: "\u00A0" }))) }) }));
|
|
7351
7357
|
};
|
|
7352
|
-
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 }) => {
|
|
7358
|
+
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, allowWorkflowActions, inEditMode }) => {
|
|
7353
7359
|
const [isCollapsed, setIsCollapsed] = React.useState(false); // Always start expanded to show drop zones
|
|
7354
7360
|
// CRITICAL: Normalize cells from API format (object with numeric keys) to proper 2D array
|
|
7355
7361
|
// The API may return cells as [{"0": {cell}, "1": {cell}}, ...] instead of [[cell, cell], ...]
|
|
@@ -7587,7 +7593,7 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
|
|
|
7587
7593
|
fontSize: '14px',
|
|
7588
7594
|
textAlign: 'center'
|
|
7589
7595
|
}, children: columnName }, `header-${colIndex}`));
|
|
7590
|
-
}) }) })), jsxRuntime.jsx("tbody", { children: cellsWithIds.map((row, rowIndex) => (jsxRuntime.jsx("tr", { className: "table-row", children: row.map((cell) => (jsxRuntime.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 }, cell.id))) }, rowIndex))) })] })] }))] }));
|
|
7596
|
+
}) }) })), jsxRuntime.jsx("tbody", { children: cellsWithIds.map((row, rowIndex) => (jsxRuntime.jsx("tr", { className: "table-row", children: row.map((cell) => (jsxRuntime.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, allowWorkflowActions: allowWorkflowActions, inEditMode: inEditMode }, cell.id))) }, rowIndex))) })] })] }))] }));
|
|
7591
7597
|
};
|
|
7592
7598
|
|
|
7593
7599
|
var dfFormTable = /*#__PURE__*/Object.freeze({
|