@knovator/pagecreator-admin 0.7.0 → 0.7.2

package/index.cjs

@@ -2806,7 +2806,7 @@ const usePage = ({
     }
     onError(code, 'error', data === null || data === void 0 ? void 0 : data.message);
   }, [onError, onLogout]);
-  const getWidgets = React.useCallback(callback => __awaiter(void 0, void 0, void 0, function* () {
+  const getWidgets = React.useCallback((search, callback) => __awaiter(void 0, void 0, void 0, function* () {
     try {
       setWidgetsLoading(true);
       const api = getApiType({
@@ -2821,6 +2821,7 @@ const usePage = ({
         url: api.url,
         onError: handleError(CALLBACK_CODES.GET_ALL),
         data: {
+          search: search || '',
           all: true,
           isActive: true
         }
@@ -4063,6 +4064,7 @@ const PageForm = ({
     canAdd,
     canUpdate
   } = usePageState();
+  const callerRef = React.useRef(null);
   // Form Utility Functions
   function handleCapitalize(event) {
     event.target.value = capitalizeFirstLetter(event.target.value);
@@ -4083,10 +4085,13 @@ const PageForm = ({
     return event;
   }
   function loadOptions(value, callback) {
-    getWidgets(widgetsData => {
-      if (callback) callback(widgetsData);
-      if (formState === 'UPDATE' && data) setSelectedWidgets(data.widgets.map(widgetId => widgetsData.find(widget => widget['value'] === widgetId)).filter(widget => widget));
-    });
+    if (callerRef.current) clearTimeout(callerRef.current);
+    callerRef.current = setTimeout(() => {
+      getWidgets(value, widgetsData => {
+        if (callback) callback(widgetsData);
+        if (formState === 'UPDATE' && data) setSelectedWidgets(data.widgets.map(widgetId => widgetsData.find(widget => widget['value'] === widgetId)).filter(widget => widget));
+      });
+    }, 300);
   }
   // Widget Form Functions
   const onDragEnd = result => {
@@ -6912,6 +6917,8 @@ const WidgetForm = ({
   const [selectedCollectionItems, setSelectedCollectionItems] = React.useState([]);
   const [tabCollectionItems, setTabCollectionItems] = React.useState([]);
   const [selectedCollectionType, setSelectedCollectionType] = React.useState();
+  const [collectionItemsUpdated, setCollectionItemsUpdated] = React.useState(false);
+  const [tabCollectionItemsUpdated, setTabCollectionItemsUpdated] = React.useState([]);
   React.useEffect(() => {
     if (data && formState === 'UPDATE') {
       setSelectedWidgetType(data === null || data === void 0 ? void 0 : data.widgetType);
@@ -6924,7 +6931,7 @@ const WidgetForm = ({
         setSelectedCollectionType(itemsTypes.find(item => item.value === (data === null || data === void 0 ? void 0 : data.collectionName)));
       }
     }
-  }, [data, formState, collectionData, itemsTypes, setValue]);
+  }, [data, formState, itemsTypes]);
   React.useEffect(() => {
     if (formState === 'ADD') {
       setSelectedCollectionItems([]);
@@ -6945,7 +6952,10 @@ const WidgetForm = ({
         collectionItems = data[constants.tabsAccessor][activeTab] ? data[constants.tabsAccessor][activeTab]['collectionItems'] : [];
         valueToSet = `${constants.tabsAccessor}.${activeTab}.${constants.tabCollectionItemsAccessor}`;
       } else if (Array.isArray(data[constants.collectionItemsAccessor]) && data[constants.collectionItemsAccessor].length > 0) {
-        collectionItems = data[constants.collectionItemsAccessor];
+        if (collectionItemsUpdated) collectionItems = selectedCollectionItems.map(
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        collectionItem => collectionItem._id);else collectionItems = data[constants.collectionItemsAccessor];
         // valueToSet = constants.collectionItemsAccessor;
       }
     }
@@ -6968,9 +6978,16 @@ const WidgetForm = ({
           })) || [];
           selectedOptions = selectedOptions.filter(obj => !!obj.value);
           if (valueToSet) {
-            setValue(valueToSet, selectedOptions);
+            // only set tabcollection items, when they are not set
+            if (!tabCollectionItemsUpdated[activeTab]) {
+              const updatedArr = tabCollectionItemsUpdated;
+              updatedArr[activeTab] = true;
+              setTabCollectionItemsUpdated(updatedArr);
+              setValue(valueToSet, selectedOptions);
+            }
           } else {
             setSelectedCollectionItems(selectedOptions);
+            setCollectionItemsUpdated(true);
           }
         }
       }, collectionItems);

package/index.js

@@ -2794,7 +2794,7 @@ const usePage = ({
     }
     onError(code, 'error', data === null || data === void 0 ? void 0 : data.message);
   }, [onError, onLogout]);
-  const getWidgets = useCallback(callback => __awaiter(void 0, void 0, void 0, function* () {
+  const getWidgets = useCallback((search, callback) => __awaiter(void 0, void 0, void 0, function* () {
     try {
       setWidgetsLoading(true);
       const api = getApiType({
@@ -2809,6 +2809,7 @@ const usePage = ({
         url: api.url,
         onError: handleError(CALLBACK_CODES.GET_ALL),
         data: {
+          search: search || '',
           all: true,
           isActive: true
         }
@@ -4051,6 +4052,7 @@ const PageForm = ({
     canAdd,
     canUpdate
   } = usePageState();
+  const callerRef = useRef(null);
   // Form Utility Functions
   function handleCapitalize(event) {
     event.target.value = capitalizeFirstLetter(event.target.value);
@@ -4071,10 +4073,13 @@ const PageForm = ({
     return event;
   }
   function loadOptions(value, callback) {
-    getWidgets(widgetsData => {
-      if (callback) callback(widgetsData);
-      if (formState === 'UPDATE' && data) setSelectedWidgets(data.widgets.map(widgetId => widgetsData.find(widget => widget['value'] === widgetId)).filter(widget => widget));
-    });
+    if (callerRef.current) clearTimeout(callerRef.current);
+    callerRef.current = setTimeout(() => {
+      getWidgets(value, widgetsData => {
+        if (callback) callback(widgetsData);
+        if (formState === 'UPDATE' && data) setSelectedWidgets(data.widgets.map(widgetId => widgetsData.find(widget => widget['value'] === widgetId)).filter(widget => widget));
+      });
+    }, 300);
   }
   // Widget Form Functions
   const onDragEnd = result => {
@@ -6900,6 +6905,8 @@ const WidgetForm = ({
   const [selectedCollectionItems, setSelectedCollectionItems] = useState([]);
   const [tabCollectionItems, setTabCollectionItems] = useState([]);
   const [selectedCollectionType, setSelectedCollectionType] = useState();
+  const [collectionItemsUpdated, setCollectionItemsUpdated] = useState(false);
+  const [tabCollectionItemsUpdated, setTabCollectionItemsUpdated] = useState([]);
   useEffect(() => {
     if (data && formState === 'UPDATE') {
       setSelectedWidgetType(data === null || data === void 0 ? void 0 : data.widgetType);
@@ -6912,7 +6919,7 @@ const WidgetForm = ({
         setSelectedCollectionType(itemsTypes.find(item => item.value === (data === null || data === void 0 ? void 0 : data.collectionName)));
       }
     }
-  }, [data, formState, collectionData, itemsTypes, setValue]);
+  }, [data, formState, itemsTypes]);
   useEffect(() => {
     if (formState === 'ADD') {
       setSelectedCollectionItems([]);
@@ -6933,7 +6940,10 @@ const WidgetForm = ({
         collectionItems = data[constants.tabsAccessor][activeTab] ? data[constants.tabsAccessor][activeTab]['collectionItems'] : [];
         valueToSet = `${constants.tabsAccessor}.${activeTab}.${constants.tabCollectionItemsAccessor}`;
       } else if (Array.isArray(data[constants.collectionItemsAccessor]) && data[constants.collectionItemsAccessor].length > 0) {
-        collectionItems = data[constants.collectionItemsAccessor];
+        if (collectionItemsUpdated) collectionItems = selectedCollectionItems.map(
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        collectionItem => collectionItem._id);else collectionItems = data[constants.collectionItemsAccessor];
         // valueToSet = constants.collectionItemsAccessor;
       }
     }
@@ -6956,9 +6966,16 @@ const WidgetForm = ({
           })) || [];
           selectedOptions = selectedOptions.filter(obj => !!obj.value);
           if (valueToSet) {
-            setValue(valueToSet, selectedOptions);
+            // only set tabcollection items, when they are not set
+            if (!tabCollectionItemsUpdated[activeTab]) {
+              const updatedArr = tabCollectionItemsUpdated;
+              updatedArr[activeTab] = true;
+              setTabCollectionItemsUpdated(updatedArr);
+              setValue(valueToSet, selectedOptions);
+            }
           } else {
             setSelectedCollectionItems(selectedOptions);
+            setCollectionItemsUpdated(true);
           }
         }
       }, collectionItems);

package/package.json

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

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

@@ -2,7 +2,7 @@
 import { PageProps } from '../../../types';
 declare const Page: {
     ({ t, loader, explicitForm, children, permissions, preConfirmDelete, }: PageProps): JSX.Element;
-    Table: () => JSX.Element;
+    Table: ({ extraActions, extraColumns }: import("../../../types").DerivedTableProps) => JSX.Element;
     Search: () => JSX.Element;
     Form: ({ formRef }: import("../../../types").FormProps) => JSX.Element | null;
     AddButton: () => JSX.Element;

package/src/lib/components/common/Input/index.d.ts

@@ -3,7 +3,7 @@ import Checkbox from "./Checkbox";
 import Select from "./Select";
 import ReactSelect from "./ReactSelect";
 import SrcSet from './SrcSet';
-declare const _default: (({ label, id, placeholder, type, size, required, error, className, disabled, rest, onInput, onBlur, value, onChange, wrapperClassName, }: import("../../../types").InputProps) => JSX.Element) & {
+declare const _default: (({ label, id, placeholder, type, size, required, error, className, disabled, rest, onInput, onBlur, value, info, onChange, wrapperClassName, }: import("../../../types").InputProps) => JSX.Element) & {
     Select: typeof Select;
     ReactSelect: typeof ReactSelect;
     Checkbox: typeof Checkbox;

package/src/lib/hooks/usePage.d.ts

@@ -24,7 +24,7 @@ declare const usePage: ({ routes, defaultLimit, canList, preConfirmDelete, }: Us
     widgets: ObjectType[];
     itemData: any;
     formState: FormActionTypes | undefined;
-    getWidgets: (callback?: ((data: any) => void) | undefined) => Promise<void>;
+    getWidgets: (search?: string, callback?: ((data: any) => void) | undefined) => Promise<void>;
     onCloseForm: () => void;
     widgetsLoading: boolean;
     selectedWidgets: {

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

@@ -70,7 +70,7 @@ export interface PageContextType {
     list: any[];
     searchText: string;
     changeSearch: (val: string) => void;
-    getWidgets: (callback?: (data: any) => void) => void;
+    getWidgets: (search?: string, callback?: (data: any) => void) => void;
     formState: FormActionTypes | undefined;
     closeForm: () => void;
     onPageFormSubmit: (data: any) => void;