@knovator/pagecreator-admin 1.6.7 → 1.6.9

package/index.cjs

@@ -7138,7 +7138,8 @@ const constants = {
 };
 const WidgetForm = ({
   formRef,
-  customInputs
+  customInputs,
+  onPrimaryButtonClick
 }) => {
   const {
     register,
@@ -7199,6 +7200,7 @@ const WidgetForm = ({
   const [blogLimit, setBlogLimit] = React.useState(10);
   const [blogCategories, setBlogCategories] = React.useState([]);
   const [blogCategoriesLoading, setBlogCategoriesLoading] = React.useState(false);
+  const pagesLoadedRef = React.useRef(false);
   React.useEffect(() => {
     if (data && formState === 'UPDATE') {
       const widgetType = widgetTypes.find(type => type.value === (data === null || data === void 0 ? void 0 : data.widgetType));
@@ -7277,56 +7279,16 @@ const WidgetForm = ({
       }
     }
   }, [formState, data, currentItemsType, blogCategories, blogCategory, blogLimit]);
-  // Auto-fetch blogs when category or limit changes
+  // Clear collectionItems when using blog category/limit (server will handle fetching latest blogs)
   React.useEffect(() => {
     if (currentItemsType === 'blog') {
-      if (blogCategory && blogLimit > 0) {
-        // Fetch blogs when category is selected
-        const fetchBlogsByCategory = () => __awaiter(void 0, void 0, void 0, function* () {
-          var _a;
-          try {
-            setCollectionItemsUpdated(false);
-            const response = yield commonApi({
-              baseUrl,
-              token,
-              method: 'POST',
-              url: `${widgetRoutesPrefix}/collection-data`,
-              data: {
-                search: '',
-                collectionName: 'blog',
-                collectionItems: []
-              },
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              onError: error => console.error('Error fetching blogs:', error)
-            });
-            if ((response === null || response === void 0 ? void 0 : response.code) === 'SUCCESS' && Array.isArray((_a = response.data) === null || _a === void 0 ? void 0 : _a.docs)) {
-              // Filter blogs by selected category
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              const filteredBlogs = response.data.docs
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              .filter(blog => Array.isArray(blog.category) &&
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              blog.category.some(cat => cat.id === blogCategory.value)).slice(0, blogLimit)
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              .map(blog => Object.assign(Object.assign({}, blog), {
-                value: blog._id,
-                label: blog.name || blog.title
-              }));
-              setSelectedCollectionItems(filteredBlogs);
-              setCollectionItemsUpdated(true);
-            }
-          } catch (error) {
-            console.error('Error fetching blogs:', error);
-          }
-        });
-        fetchBlogsByCategory();
-      } else if (!blogCategory) {
-        // Clear selected blogs when category is cleared
+      if (blogCategory || blogLimit > 0) {
+        // Clear selected collection items since server will fetch latest blogs based on category/limit
         setSelectedCollectionItems([]);
         setCollectionItemsUpdated(true);
       }
     }
-  }, [blogCategory, blogLimit, currentItemsType, baseUrl, token, widgetRoutesPrefix]);
+  }, [blogCategory, blogLimit, currentItemsType]);
   // Reset blog category and limit when itemsType changes away from 'blogs'
   React.useEffect(() => {
     if (currentItemsType !== 'blog') {
@@ -7343,6 +7305,18 @@ const WidgetForm = ({
       setBlogLimit(limit);
     }
   }, [watchedBlogLimit, currentItemsType]);
+  // Load pages data when Links widget type is selected
+  React.useEffect(() => {
+    if ((selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.linksWidgetTypeValue && (selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value) === constants.pagesItemsTypeValue && !pagesLoadedRef.current) {
+      // Trigger initial load of pages
+      pagesLoadedRef.current = true;
+      getCollectionData(constants.pagesItemsTypeValue, '');
+    }
+    // Reset ref when widget type changes away from Links
+    if ((selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== constants.linksWidgetTypeValue) {
+      pagesLoadedRef.current = false;
+    }
+  }, [selectedWidgetType, selectedCollectionType, getCollectionData]);
   const onChangeSearch = (str, callback, collectionName) => {
     let collectionItems = [];
     let valueToSet = '';
@@ -7532,9 +7506,15 @@ const WidgetForm = ({
       }
       return item;
     });
-    onWidgetFormSubmit(Object.assign(Object.assign({}, formData), {
+    const submitPayload = Object.assign(Object.assign(Object.assign(Object.assign({}, formData), {
       items
-    }));
+    }), blogCategory && {
+      blogCategory: blogCategory.value
+    }), blogLimit && {
+      blogLimit
+    });
+    onPrimaryButtonClick === null || onPrimaryButtonClick === void 0 ? void 0 : onPrimaryButtonClick(undefined, submitPayload);
+    onWidgetFormSubmit(submitPayload);
   };
   const onCollectionIndexChange = result => {
     const {
@@ -7777,7 +7757,7 @@ const WidgetForm = ({
     loadOptions: onChangeSearch,
     isLoading: collectionDataLoading,
     disabled: currentItemsType === 'blog' && !!blogCategory,
-    show: !itemsEnabled && ((selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.carouselWidgetTypeValue || (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.fixedCardWidgetTypeValue || (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.linksWidgetTypeValue || !selectedWidgetType) && !!(selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value),
+    show: !itemsEnabled && currentItemsType !== 'blog' && ((selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.carouselWidgetTypeValue || (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.fixedCardWidgetTypeValue || (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.linksWidgetTypeValue || !selectedWidgetType) && !!(selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value),
     formatOptionLabel: formatOptionLabel,
     listCode: selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value,
     customStyles: reactSelectStyles || {},
@@ -7932,7 +7912,8 @@ const WidgetSearch = () => {
 };
 
 const WidgetFormActions = ({
-  formRef
+  formRef,
+  onPrimaryButtonClick
 }) => {
   const {
     onError,
@@ -7947,6 +7928,7 @@ const WidgetFormActions = ({
   } = useWidgetState();
   const onSubmitClick = e => {
     var _a;
+    onPrimaryButtonClick === null || onPrimaryButtonClick === void 0 ? void 0 : onPrimaryButtonClick(e);
     if (!formRef) {
       return onError(CALLBACK_CODES.INTERNAL, 'error', `formRef is required to submit the form!`);
     } else if (!formRef.current) {
@@ -7996,7 +7978,8 @@ const Widget = ({
   formatOptionLabel,
   imageMaxSize,
   translations,
-  children
+  children,
+  onPrimaryButtonClick
 }) => {
   const {
     commonTranslations
@@ -8083,10 +8066,12 @@ const Widget = ({
     onClose: onCloseForm,
     title: formState === 'ADD' ? derivedT.addWidgetTitle : formState === 'UPDATE' ? derivedT.updateWidgetTitle : '',
     footerContent: /*#__PURE__*/React__default["default"].createElement(WidgetFormActions, {
-      formRef: widgetFormRef
+      formRef: widgetFormRef,
+      onPrimaryButtonClick: onPrimaryButtonClick
     })
   }, /*#__PURE__*/React__default["default"].createElement(WidgetForm, {
-    formRef: widgetFormRef
+    formRef: widgetFormRef,
+    onPrimaryButtonClick: onPrimaryButtonClick
   }))), itemData && (/*#__PURE__*/React__default["default"].createElement(DeleteModal, {
     formState: formState,
     itemData: itemData,

package/index.js

@@ -7126,7 +7126,8 @@ const constants = {
 };
 const WidgetForm = ({
   formRef,
-  customInputs
+  customInputs,
+  onPrimaryButtonClick
 }) => {
   const {
     register,
@@ -7187,6 +7188,7 @@ const WidgetForm = ({
   const [blogLimit, setBlogLimit] = useState(10);
   const [blogCategories, setBlogCategories] = useState([]);
   const [blogCategoriesLoading, setBlogCategoriesLoading] = useState(false);
+  const pagesLoadedRef = useRef(false);
   useEffect(() => {
     if (data && formState === 'UPDATE') {
       const widgetType = widgetTypes.find(type => type.value === (data === null || data === void 0 ? void 0 : data.widgetType));
@@ -7265,56 +7267,16 @@ const WidgetForm = ({
       }
     }
   }, [formState, data, currentItemsType, blogCategories, blogCategory, blogLimit]);
-  // Auto-fetch blogs when category or limit changes
+  // Clear collectionItems when using blog category/limit (server will handle fetching latest blogs)
   useEffect(() => {
     if (currentItemsType === 'blog') {
-      if (blogCategory && blogLimit > 0) {
-        // Fetch blogs when category is selected
-        const fetchBlogsByCategory = () => __awaiter(void 0, void 0, void 0, function* () {
-          var _a;
-          try {
-            setCollectionItemsUpdated(false);
-            const response = yield commonApi({
-              baseUrl,
-              token,
-              method: 'POST',
-              url: `${widgetRoutesPrefix}/collection-data`,
-              data: {
-                search: '',
-                collectionName: 'blog',
-                collectionItems: []
-              },
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              onError: error => console.error('Error fetching blogs:', error)
-            });
-            if ((response === null || response === void 0 ? void 0 : response.code) === 'SUCCESS' && Array.isArray((_a = response.data) === null || _a === void 0 ? void 0 : _a.docs)) {
-              // Filter blogs by selected category
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              const filteredBlogs = response.data.docs
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              .filter(blog => Array.isArray(blog.category) &&
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              blog.category.some(cat => cat.id === blogCategory.value)).slice(0, blogLimit)
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              .map(blog => Object.assign(Object.assign({}, blog), {
-                value: blog._id,
-                label: blog.name || blog.title
-              }));
-              setSelectedCollectionItems(filteredBlogs);
-              setCollectionItemsUpdated(true);
-            }
-          } catch (error) {
-            console.error('Error fetching blogs:', error);
-          }
-        });
-        fetchBlogsByCategory();
-      } else if (!blogCategory) {
-        // Clear selected blogs when category is cleared
+      if (blogCategory || blogLimit > 0) {
+        // Clear selected collection items since server will fetch latest blogs based on category/limit
         setSelectedCollectionItems([]);
         setCollectionItemsUpdated(true);
       }
     }
-  }, [blogCategory, blogLimit, currentItemsType, baseUrl, token, widgetRoutesPrefix]);
+  }, [blogCategory, blogLimit, currentItemsType]);
   // Reset blog category and limit when itemsType changes away from 'blogs'
   useEffect(() => {
     if (currentItemsType !== 'blog') {
@@ -7331,6 +7293,18 @@ const WidgetForm = ({
       setBlogLimit(limit);
     }
   }, [watchedBlogLimit, currentItemsType]);
+  // Load pages data when Links widget type is selected
+  useEffect(() => {
+    if ((selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.linksWidgetTypeValue && (selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value) === constants.pagesItemsTypeValue && !pagesLoadedRef.current) {
+      // Trigger initial load of pages
+      pagesLoadedRef.current = true;
+      getCollectionData(constants.pagesItemsTypeValue, '');
+    }
+    // Reset ref when widget type changes away from Links
+    if ((selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== constants.linksWidgetTypeValue) {
+      pagesLoadedRef.current = false;
+    }
+  }, [selectedWidgetType, selectedCollectionType, getCollectionData]);
   const onChangeSearch = (str, callback, collectionName) => {
     let collectionItems = [];
     let valueToSet = '';
@@ -7520,9 +7494,15 @@ const WidgetForm = ({
       }
       return item;
     });
-    onWidgetFormSubmit(Object.assign(Object.assign({}, formData), {
+    const submitPayload = Object.assign(Object.assign(Object.assign(Object.assign({}, formData), {
       items
-    }));
+    }), blogCategory && {
+      blogCategory: blogCategory.value
+    }), blogLimit && {
+      blogLimit
+    });
+    onPrimaryButtonClick === null || onPrimaryButtonClick === void 0 ? void 0 : onPrimaryButtonClick(undefined, submitPayload);
+    onWidgetFormSubmit(submitPayload);
   };
   const onCollectionIndexChange = result => {
     const {
@@ -7765,7 +7745,7 @@ const WidgetForm = ({
     loadOptions: onChangeSearch,
     isLoading: collectionDataLoading,
     disabled: currentItemsType === 'blog' && !!blogCategory,
-    show: !itemsEnabled && ((selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.carouselWidgetTypeValue || (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.fixedCardWidgetTypeValue || (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.linksWidgetTypeValue || !selectedWidgetType) && !!(selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value),
+    show: !itemsEnabled && currentItemsType !== 'blog' && ((selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.carouselWidgetTypeValue || (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.fixedCardWidgetTypeValue || (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.linksWidgetTypeValue || !selectedWidgetType) && !!(selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value),
     formatOptionLabel: formatOptionLabel,
     listCode: selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value,
     customStyles: reactSelectStyles || {},
@@ -7920,7 +7900,8 @@ const WidgetSearch = () => {
 };
 
 const WidgetFormActions = ({
-  formRef
+  formRef,
+  onPrimaryButtonClick
 }) => {
   const {
     onError,
@@ -7935,6 +7916,7 @@ const WidgetFormActions = ({
   } = useWidgetState();
   const onSubmitClick = e => {
     var _a;
+    onPrimaryButtonClick === null || onPrimaryButtonClick === void 0 ? void 0 : onPrimaryButtonClick(e);
     if (!formRef) {
       return onError(CALLBACK_CODES.INTERNAL, 'error', `formRef is required to submit the form!`);
     } else if (!formRef.current) {
@@ -7984,7 +7966,8 @@ const Widget = ({
   formatOptionLabel,
   imageMaxSize,
   translations,
-  children
+  children,
+  onPrimaryButtonClick
 }) => {
   const {
     commonTranslations
@@ -8071,10 +8054,12 @@ const Widget = ({
     onClose: onCloseForm,
     title: formState === 'ADD' ? derivedT.addWidgetTitle : formState === 'UPDATE' ? derivedT.updateWidgetTitle : '',
     footerContent: /*#__PURE__*/React.createElement(WidgetFormActions, {
-      formRef: widgetFormRef
+      formRef: widgetFormRef,
+      onPrimaryButtonClick: onPrimaryButtonClick
     })
   }, /*#__PURE__*/React.createElement(WidgetForm, {
-    formRef: widgetFormRef
+    formRef: widgetFormRef,
+    onPrimaryButtonClick: onPrimaryButtonClick
   }))), itemData && (/*#__PURE__*/React.createElement(DeleteModal, {
     formState: formState,
     itemData: itemData,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knovator/pagecreator-admin",
-  "version": "1.6.7",
+  "version": "1.6.9",
   "dependencies": {
     "classnames": "^2.3.1",
     "react-beautiful-dnd": "^13.1.0",

package/src/lib/components/Widget/Form/WidgetForm.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { FormProps } from '../../../types';
-declare const WidgetForm: ({ formRef, customInputs }: FormProps) => JSX.Element | null;
+declare const WidgetForm: ({ formRef, customInputs, onPrimaryButtonClick }: FormProps) => JSX.Element | null;
 export default WidgetForm;

package/src/lib/components/Widget/Widget/Widget.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 import { WidgetProps } from '../../../types';
 declare const Widget: {
-    ({ routes, loader, explicitForm, imageBaseUrl, permissions, preConfirmDelete, formatListItem, formatOptionLabel, imageMaxSize, translations, children, }: WidgetProps): JSX.Element;
+    ({ routes, loader, explicitForm, imageBaseUrl, permissions, preConfirmDelete, formatListItem, formatOptionLabel, imageMaxSize, translations, children, onPrimaryButtonClick, }: WidgetProps): JSX.Element;
     Table: ({ extraActions, extraColumns }: import("../../../types").DerivedTableProps) => JSX.Element;
-    Form: ({ formRef, customInputs }: import("../../../types").FormProps) => JSX.Element | null;
+    Form: ({ formRef, customInputs, onPrimaryButtonClick }: import("../../../types").FormProps) => JSX.Element | null;
     AddButton: () => JSX.Element;
     Search: () => JSX.Element;
     Pagination: () => JSX.Element;
     FormWrapper: ({ children }: import("../../../types").FormWrapperProps) => JSX.Element | null;
-    FormActions: ({ formRef }: import("../../../types").FormActionWrapperProps) => JSX.Element | null;
+    FormActions: ({ formRef, onPrimaryButtonClick }: import("../../../types").FormActionWrapperProps) => JSX.Element | null;
 };
 export default Widget;

package/src/lib/components/Widget/WidgetFormActions/WidgetFormActions.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { FormActionWrapperProps } from '../../../types';
-declare const WidgetFormActions: ({ formRef }: FormActionWrapperProps) => JSX.Element | null;
+declare const WidgetFormActions: ({ formRef, onPrimaryButtonClick }: FormActionWrapperProps) => JSX.Element | null;
 export default WidgetFormActions;

package/src/lib/types/components.d.ts

@@ -214,6 +214,7 @@ export interface WidgetProps {
     imageBaseUrl?: string;
     imageMaxSize?: number;
     translations?: WidgetTranslationPairs;
+    onPrimaryButtonClick?: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>, data?: any) => void;
 }
 export interface DerivedTableProps {
     extraActions?: (item: any) => JSX.Element;