@topconsultnpm/sdkui-react 6.19.0-dev2.40 → 6.19.0-dev2.41

package/lib/components/base/TMModal.d.ts

@@ -11,6 +11,7 @@ interface ITMModal {
     onClose?: () => void;
     hidePopup?: boolean;
     askClosingConfirm?: boolean;
+    showCloseButton?: boolean;
 }
 declare const TMModal: React.FC<ITMModal>;
 export default TMModal;

package/lib/components/base/TMModal.js

@@ -38,7 +38,7 @@ const StyledModalContext = styled.div `
     overflow: auto;
     height: 100%;
 `;
-const TMModal = ({ resizable = true, isModal = true, title = '', toolbar, onClose, children, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, hidePopup = true, askClosingConfirm = false }) => {
+const TMModal = ({ resizable = true, isModal = true, title = '', toolbar, onClose, children, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, hidePopup = true, askClosingConfirm = false, showCloseButton = true }) => {
     const [initialWidth, setInitialWidth] = useState(width);
     const [initialHeight, setInitialHeight] = useState(height);
     const [showPopup, setShowPopup] = useState(false);
@@ -65,6 +65,6 @@ const TMModal = ({ resizable = true, isModal = true, title = '', toolbar, onClos
             setShowPopup(false);
         onClose && onClose();
     };
-    return (_jsx(_Fragment, { children: isModal ? (_jsx(Popup, { showCloseButton: true, animation: undefined, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing, resizeEnabled: resizable, width: initialWidth, height: initialHeight, title: title, visible: showPopup, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, children: _jsxs(TMLayoutContainer, { children: [toolbar && (_jsx(TMLayoutItem, { height: "40px", children: _jsx(StyledModalToolbar, { children: toolbar }) })), _jsx(TMLayoutItem, { height: toolbar ? 'calc(100% - 50px)' : 'calc(100% - 10px)', children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
+    return (_jsx(_Fragment, { children: isModal ? (_jsx(Popup, { showCloseButton: showCloseButton, animation: undefined, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing, resizeEnabled: resizable, width: initialWidth, height: initialHeight, title: title, visible: showPopup, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, children: _jsxs(TMLayoutContainer, { children: [toolbar && (_jsx(TMLayoutItem, { height: "40px", children: _jsx(StyledModalToolbar, { children: toolbar }) })), _jsx(TMLayoutItem, { height: toolbar ? 'calc(100% - 50px)' : 'calc(100% - 10px)', children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
 };
 export default TMModal;

package/lib/components/features/blog/TMBlogCommentForm.d.ts

@@ -9,12 +9,11 @@ interface TMBlogCommentFormProps {
     removeAndEditAttachment?: boolean;
     selectedAttachments?: Array<FileItem>;
     selectedAttachmentDid?: Array<number>;
-    title?: string;
     allFileItems?: FileItem;
     allArchivedDocumentsFileItems?: Array<FileItem>;
-    onSavedCallback?: () => void;
     onFilterCreated?: (predicate: (post: BlogPost) => boolean) => void;
     refreshCallback?: () => Promise<void>;
+    isCommentRequired?: boolean;
 }
 declare const TMBlogCommentForm: (props: TMBlogCommentFormProps) => import("react/jsx-runtime").JSX.Element;
 export default TMBlogCommentForm;

package/lib/components/features/blog/TMBlogCommentForm.js

@@ -29,7 +29,7 @@ const getNonDirectoryFiles = (items, exclude) => {
 };
 const TMBlogCommentForm = (props) => {
     const maxLength = 1000;
-    const { title = SDKUI_Localizator.AddNewComment, participants, selectedAttachments, selectedAttachmentDid, allFileItems, allArchivedDocumentsFileItems = [], onClose, context, showAttachmentsSection = true, removeAndEditAttachment = true, onSavedCallback, onFilterCreated, refreshCallback } = props;
+    const { participants, selectedAttachments, selectedAttachmentDid, allFileItems, allArchivedDocumentsFileItems = [], onClose, context, showAttachmentsSection = true, removeAndEditAttachment = true, onFilterCreated, refreshCallback, isCommentRequired = false } = props;
     // Initialize state with combined array
     const [dataSource, setDataSource] = useState(() => [...getNonDirectoryFiles(allFileItems?.items || [], []), ...allArchivedDocumentsFileItems]);
     const [isEditorEnabled, setIsEditorEnabled] = useState(true);
@@ -171,10 +171,7 @@ const TMBlogCommentForm = (props) => {
         finally {
             // Hide the loading spinner and close the operation (e.g., close a modal or cleanup)
             TMSpinner.hide();
-            if (onSavedCallback)
-                onSavedCallback();
-            else
-                onClose();
+            onClose();
         }
     };
     const onCloseCallback = () => {
@@ -219,7 +216,19 @@ const TMBlogCommentForm = (props) => {
         // Update the state with selected draft items
         setCurrentDraftAttachments(selectedDraftItems);
     };
-    return _jsx(TMSaveForm, { id: 1, title: title, showTitleFormMode: false, showErrorCount: false, customSaveButton: _jsx("i", { className: 'dx-icon-send' }), customTooltipSaveButton: SDKUI_Localizator.Send, showUndoButton: false, hasNavigation: false, skipIsModifiedCheck: true, isModal: true, width: calcResponsiveSizes(deviceType, '800px', '800px', '95%'), height: '550px', formMode: FormModes.Create, validationItems: validationItems, exception: exception, isModified: calcIsModified(formData, formDataOrig), onSaveAsync: onSaveAsync, onClose: onCloseCallback, customToolbarElements: _jsx("div", { style: { display: 'flex', gap: '2px' }, children: _jsx(TMButton, { btnStyle: "toolbar", icon: isEditorEnabled ? _jsx("i", { className: 'dx-icon-font' }) : _jsx("i", { className: 'dx-icon-background' }), caption: isEditorEnabled ? SDKUI_Localizator.HideFormattingOptions : SDKUI_Localizator.ShowFormattingOptions, onClick: toggleEditorMode }) }), children: _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { style: { width: "100%", height: showAttachmentsSection ? "calc(100% - 60px)" : "100%" }, children: _jsx(TMHtmlEditor, { width: '100%', height: '100%', isEditorEnabled: isEditorEnabled, validationItems: validationItems, onValueChanged: onValueChanged, mentionsConfig: mentionsConfig, autoFocus: true, maxLength: maxLength }) }), showAttachmentsSection && _jsxs("div", { style: { display: 'flex', alignItems: 'center', height: '60px', marginTop: '10px' }, children: [_jsx("div", { style: {
+    return _jsx(TMSaveForm, { id: 1, title: SDKUI_Localizator.AddNewComment, showTitleFormMode: false, showErrorCount: false, customSaveButton: _jsx("i", { className: 'dx-icon-send' }), customTooltipSaveButton: SDKUI_Localizator.Send, showUndoButton: false, hasNavigation: false, skipIsModifiedCheck: true, isModal: true, width: calcResponsiveSizes(deviceType, '800px', '800px', '95%'), height: '550px', formMode: FormModes.Create, validationItems: validationItems, exception: exception, isModified: calcIsModified(formData, formDataOrig), onSaveAsync: onSaveAsync, onClose: onCloseCallback, showCloseButton: isCommentRequired ? false : true, customToolbarElements: _jsx("div", { style: { display: 'flex', gap: '2px' }, children: _jsx(TMButton, { btnStyle: "toolbar", icon: isEditorEnabled ? _jsx("i", { className: 'dx-icon-font' }) : _jsx("i", { className: 'dx-icon-background' }), caption: isEditorEnabled ? SDKUI_Localizator.HideFormattingOptions : SDKUI_Localizator.ShowFormattingOptions, onClick: toggleEditorMode }) }), children: _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsxs("div", { style: { width: "100%", height: showAttachmentsSection ? `calc(100% - 60px)` : '100%' }, children: [isCommentRequired && _jsx("div", { style: {
+                                        padding: '10px',
+                                        width: '100%',
+                                        height: '30px',
+                                        backgroundColor: '#e8f5e9',
+                                        border: '1px solid #81c784',
+                                        borderRadius: '4px',
+                                        fontSize: '13px',
+                                        marginBottom: '10px',
+                                        color: '#2e7d32',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                    }, children: SDKUI_Localizator.InsertCommentToCompleteOperation }), _jsx("div", { style: { width: "100%", height: isCommentRequired ? `calc(100% - 40px)` : '100%' }, children: _jsx(TMHtmlEditor, { width: '100%', height: '100%', isEditorEnabled: isEditorEnabled, validationItems: validationItems, onValueChanged: onValueChanged, mentionsConfig: mentionsConfig, autoFocus: true, maxLength: maxLength }) })] }), showAttachmentsSection && _jsxs("div", { style: { display: 'flex', alignItems: 'center', height: '60px', marginTop: '10px' }, children: [_jsx("div", { style: {
                                         width: `calc(100% - ${removeAndEditAttachment ? 60 : 0}px)`,
                                         overflowX: 'auto',
                                         whiteSpace: 'nowrap',

package/lib/components/forms/TMSaveForm.js

@@ -11,7 +11,7 @@ import { TMColors } from '../../utils/theme';
 import TMValidationItemsList from '../grids/TMValidationItemsList';
 import TMModal from '../base/TMModal';
 import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
-const TMSaveForm = ({ id, formMode = FormModes.Update, showToolbar = true, skipIsModifiedCheck = false, title, children, isModal, exception, customToolbarElements, hasNavigation, showSaveButton = true, customSaveButton, customTooltipSaveButton, showBackButton, showWarningsCount = true, showErrorCount = true, showUndoButton = true, onClose, onSaveAsync, onNext, onPrev, canNext, canPrev, isModified, onShowList, validationItems = [], onUndo, onCancel, width, height, askClosingConfirm = false, showTitleFormMode = true }) => {
+const TMSaveForm = ({ id, formMode = FormModes.Update, showToolbar = true, skipIsModifiedCheck = false, title, children, isModal, exception, customToolbarElements, hasNavigation, showSaveButton = true, customSaveButton, customTooltipSaveButton, showBackButton, showWarningsCount = true, showErrorCount = true, showUndoButton = true, onClose, onSaveAsync, onNext, onPrev, canNext, canPrev, isModified, onShowList, validationItems = [], onUndo, onCancel, width, height, askClosingConfirm = false, showTitleFormMode = true, showCloseButton = true }) => {
     const [showList, setShowList] = useState(true);
     const [showErrorGrid, setShowErrorGrid] = useState(false);
     const deviceType = useDeviceType();
@@ -110,7 +110,7 @@ const TMSaveForm = ({ id, formMode = FormModes.Update, showToolbar = true, skipI
                                         _jsx("div", { style: { width: '100%', height: '100%', marginTop: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', color: getColor('error') }, children: 'Si è verificato un errore' })
                                     : _jsx(_Fragment, { children: children }) }), showErrorGrid && validationItems.length > 0 ? _jsx(TMCard, { scrollY: true, padding: false, showBorder: false, children: _jsx(TMValidationItemsList, { validationItems: validationItems }) }) : _jsx(_Fragment, {})] }) }), (isModal && onClose) && _jsx("div", { id: "TMSaveFormShowConfirmForClose-" + id })] }));
     };
-    return (_jsx(_Fragment, { children: (isModal && onClose) ? _jsx(_Fragment, { children: _jsx(TMModal, { title: `${title}${showTitleFormMode ? ` - ${LocalizeFormModes(formMode)}` : ''}`, onClose: doClose, width: width ?? '100%', height: height ?? '100%', hidePopup: false, askClosingConfirm: askClosingConfirm, children: _jsx("div", { style: { width: "100%", height: "100%", display: 'block' }, children: renderSaveForm() }) }) })
+    return (_jsx(_Fragment, { children: (isModal && onClose) ? _jsx(_Fragment, { children: _jsx(TMModal, { title: `${title}${showTitleFormMode ? ` - ${LocalizeFormModes(formMode)}` : ''}`, onClose: doClose, width: width ?? '100%', height: height ?? '100%', hidePopup: false, askClosingConfirm: askClosingConfirm, showCloseButton: showCloseButton, children: _jsx("div", { style: { width: "100%", height: "100%", display: 'block' }, children: renderSaveForm() }) }) })
             : renderSaveForm() }));
 };
 export default TMSaveForm;

package/lib/helper/SDKUI_Localizator.d.ts

@@ -306,6 +306,7 @@ export declare class SDKUI_Localizator {
     static get IndexingInformation(): string;
     static get IndexOrReindex(): string;
     static get InProgress(): "Laufende" | "In Progress" | "En curso" | "En cours" | "Em andamento" | "In corso";
+    static get InsertCommentToCompleteOperation(): string;
     static get InsertYourEmail(): "Geben Sie Ihre E-Mail ein" | "Insert your Email" | "Inserta tu Email" | "Insérez votre e-mail" | "Insira seu e-mail" | "Inserisci la tua email";
     static get InsertOTP(): "Geben Sie den OTP-Code ein" | "Insert OTP code" | "Insertar código OTP" | "Insérer le code OTP" | "Insira o código OTP" | "Inserisci il codice OTP";
     static get Interrupt(): "Unterbrechen" | "Interrupt" | "interrumpir" | "Interrompre" | "Interromper" | "Interrompere";

package/lib/helper/SDKUI_Localizator.js

@@ -2989,6 +2989,16 @@ export class SDKUI_Localizator {
             default: return "In corso";
         }
     }
+    static get InsertCommentToCompleteOperation() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Geben Sie einen Kommentar ein, um den Vorgang abzuschließen.";
+            case CultureIDs.En_US: return "Enter a comment to complete the operation.";
+            case CultureIDs.Es_ES: return "Introduzca un comentario para completar la operación.";
+            case CultureIDs.Fr_FR: return "Saisissez un commentaire pour terminer l’opération.";
+            case CultureIDs.Pt_PT: return "Introduza um comentário para concluir a operação.";
+            default: return "Inserisci un commento per completare l’operazione.";
+        }
+    }
     static get InsertYourEmail() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Geben Sie Ihre E-Mail ein";

package/lib/ts/types.d.ts

@@ -173,6 +173,7 @@ export interface ITMSaveFormBaseProps {
     customTooltipSaveButton?: string;
     showBackButton?: boolean;
     showUndoButton?: boolean;
+    showCloseButton?: boolean;
     showWarningsCount?: boolean;
     showErrorCount?: boolean;
     hasNavigation?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.19.0-dev2.40",
+    "version": "6.19.0-dev2.41",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",