@knovator/pagecreator-admin 0.5.11 → 0.6.0

package/index.cjs

@@ -1674,6 +1674,11 @@ var CALLBACK_CODES;
   CALLBACK_CODES["IMAGE_REMOVE"] = "IMAGE_REMOVE";
   CALLBACK_CODES["INTERNAL"] = "INTERNAL";
 })(CALLBACK_CODES || (CALLBACK_CODES = {}));
+const CONSTANTS = {
+  EMPTY_REGEX: / /g,
+  SLUG_REGEX: /^[\da-z-]*$/,
+  SLUG_REPLACE_REGEX: /[^\da-z-]/gi
+};
 const DEFAULT_PERMISSIONS = {
   list: true,
   add: true,
@@ -1764,6 +1769,9 @@ const TRANSLATION_PAIRS_PAGE = {
   'page.code': 'Code',
   'page.codePlaceholder': 'Enter code',
   'page.codeRequired': 'Code is required',
+  'page.slug': 'Slug',
+  'page.slugPlaceholder': 'Enter Slug',
+  'page.slugRequired': 'Slug is required',
   'page.addPageTitle': 'Add Page',
   'page.updatePageTitle': 'Update Page',
   'page.searchPages': 'Search Pages...',
@@ -2494,7 +2502,11 @@ const capitalizeFirstLetter = (string = '') => {
 };
 const changeToCode = (string = '') => {
   var _a, _b;
-  return (_b = (_a = string.replace(/[^\s\w]/gi, '')) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === null || _b === void 0 ? void 0 : _b.replace(/ /g, '_');
+  return (_b = (_a = string.replace(/[^\s\w]/gi, '')) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === null || _b === void 0 ? void 0 : _b.replace(CONSTANTS.EMPTY_REGEX, '_');
+};
+const changeToSlug = (string = '') => {
+  var _a;
+  return (_a = string === null || string === void 0 ? void 0 : string.toLowerCase()) === null || _a === void 0 ? void 0 : _a.replace(CONSTANTS.EMPTY_REGEX, '-');
 };
 const isObject$3 = data => {
   var _a;
@@ -4035,6 +4047,16 @@ const PageForm = ({
     event.target.value = changeToCode(event.target.value);
     return event;
   }
+  function handleSlug(event) {
+    let slugValue = changeToSlug(event.target.value);
+    if (!slugValue || !CONSTANTS.SLUG_REGEX.test(slugValue)) {
+      slugValue = '';
+    } else {
+      slugValue = slugValue.replace(CONSTANTS.SLUG_REPLACE_REGEX, '');
+    }
+    event.target.value = slugValue;
+    return event;
+  }
   function loadOptions(value, callback) {
     getWidgets(widgetsData => {
       if (callback) callback(widgetsData);
@@ -4071,6 +4093,17 @@ const PageForm = ({
     validations: {
       required: t('page.codeRequired')
     }
+  }, {
+    label: `${t('page.slug')}`,
+    accessor: 'slug',
+    required: true,
+    type: 'text',
+    onInput: handleSlug,
+    editable: false,
+    placeholder: t('page.slugPlaceholder'),
+    validations: {
+      required: t('page.slugRequired')
+    }
   }, {
     label: t('page.widgets'),
     accessor: 'widgets',
@@ -6797,7 +6830,7 @@ const Tabs = ({
           if (Array.isArray(value)) onChange(value);else onChange([value]);
         }
       },
-      selectKey: `tabs.${index}.collectionItems.${listCode}`,
+      selectKey: `tabs.${index}.collectionItems-${JSON.stringify(Array.isArray(value) && value.length > 0 ? value[0] || '' : listCode)}`,
       selectedOptions: value,
       isMulti: true,
       isSearchable: true,
@@ -6931,13 +6964,14 @@ const WidgetForm = ({
           label: item['name']
         }, item)));
         if (formState === 'UPDATE') {
-          const selectedOptions = (collectionItems === null || collectionItems === void 0 ? void 0 : collectionItems.map(itemId => {
+          let selectedOptions = (collectionItems === null || collectionItems === void 0 ? void 0 : collectionItems.map(itemId => {
             item = options.find(item => item._id === itemId || item.id === itemId);
             return item ? Object.assign({
               label: item.name,
               value: item._id || item.id
             }, item) : {};
           })) || [];
+          selectedOptions = selectedOptions.filter(obj => !!obj.value);
           if (valueToSet) {
             setValue(valueToSet, selectedOptions);
           } else {

package/index.js

@@ -1662,6 +1662,11 @@ var CALLBACK_CODES;
   CALLBACK_CODES["IMAGE_REMOVE"] = "IMAGE_REMOVE";
   CALLBACK_CODES["INTERNAL"] = "INTERNAL";
 })(CALLBACK_CODES || (CALLBACK_CODES = {}));
+const CONSTANTS = {
+  EMPTY_REGEX: / /g,
+  SLUG_REGEX: /^[\da-z-]*$/,
+  SLUG_REPLACE_REGEX: /[^\da-z-]/gi
+};
 const DEFAULT_PERMISSIONS = {
   list: true,
   add: true,
@@ -1752,6 +1757,9 @@ const TRANSLATION_PAIRS_PAGE = {
   'page.code': 'Code',
   'page.codePlaceholder': 'Enter code',
   'page.codeRequired': 'Code is required',
+  'page.slug': 'Slug',
+  'page.slugPlaceholder': 'Enter Slug',
+  'page.slugRequired': 'Slug is required',
   'page.addPageTitle': 'Add Page',
   'page.updatePageTitle': 'Update Page',
   'page.searchPages': 'Search Pages...',
@@ -2482,7 +2490,11 @@ const capitalizeFirstLetter = (string = '') => {
 };
 const changeToCode = (string = '') => {
   var _a, _b;
-  return (_b = (_a = string.replace(/[^\s\w]/gi, '')) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === null || _b === void 0 ? void 0 : _b.replace(/ /g, '_');
+  return (_b = (_a = string.replace(/[^\s\w]/gi, '')) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === null || _b === void 0 ? void 0 : _b.replace(CONSTANTS.EMPTY_REGEX, '_');
+};
+const changeToSlug = (string = '') => {
+  var _a;
+  return (_a = string === null || string === void 0 ? void 0 : string.toLowerCase()) === null || _a === void 0 ? void 0 : _a.replace(CONSTANTS.EMPTY_REGEX, '-');
 };
 const isObject$3 = data => {
   var _a;
@@ -4023,6 +4035,16 @@ const PageForm = ({
     event.target.value = changeToCode(event.target.value);
     return event;
   }
+  function handleSlug(event) {
+    let slugValue = changeToSlug(event.target.value);
+    if (!slugValue || !CONSTANTS.SLUG_REGEX.test(slugValue)) {
+      slugValue = '';
+    } else {
+      slugValue = slugValue.replace(CONSTANTS.SLUG_REPLACE_REGEX, '');
+    }
+    event.target.value = slugValue;
+    return event;
+  }
   function loadOptions(value, callback) {
     getWidgets(widgetsData => {
       if (callback) callback(widgetsData);
@@ -4059,6 +4081,17 @@ const PageForm = ({
     validations: {
       required: t('page.codeRequired')
     }
+  }, {
+    label: `${t('page.slug')}`,
+    accessor: 'slug',
+    required: true,
+    type: 'text',
+    onInput: handleSlug,
+    editable: false,
+    placeholder: t('page.slugPlaceholder'),
+    validations: {
+      required: t('page.slugRequired')
+    }
   }, {
     label: t('page.widgets'),
     accessor: 'widgets',
@@ -6785,7 +6818,7 @@ const Tabs = ({
           if (Array.isArray(value)) onChange(value);else onChange([value]);
         }
       },
-      selectKey: `tabs.${index}.collectionItems.${listCode}`,
+      selectKey: `tabs.${index}.collectionItems-${JSON.stringify(Array.isArray(value) && value.length > 0 ? value[0] || '' : listCode)}`,
       selectedOptions: value,
       isMulti: true,
       isSearchable: true,
@@ -6919,13 +6952,14 @@ const WidgetForm = ({
           label: item['name']
         }, item)));
         if (formState === 'UPDATE') {
-          const selectedOptions = (collectionItems === null || collectionItems === void 0 ? void 0 : collectionItems.map(itemId => {
+          let selectedOptions = (collectionItems === null || collectionItems === void 0 ? void 0 : collectionItems.map(itemId => {
             item = options.find(item => item._id === itemId || item.id === itemId);
             return item ? Object.assign({
               label: item.name,
               value: item._id || item.id
             }, item) : {};
           })) || [];
+          selectedOptions = selectedOptions.filter(obj => !!obj.value);
           if (valueToSet) {
             setValue(valueToSet, selectedOptions);
           } else {

package/package.json

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

package/src/lib/constants/common.d.ts

@@ -15,6 +15,11 @@ declare enum CALLBACK_CODES {
     'IMAGE_REMOVE' = "IMAGE_REMOVE",
     'INTERNAL' = "INTERNAL"
 }
+declare const CONSTANTS: {
+    EMPTY_REGEX: RegExp;
+    SLUG_REGEX: RegExp;
+    SLUG_REPLACE_REGEX: RegExp;
+};
 declare const DEFAULT_PERMISSIONS: {
     list: boolean;
     add: boolean;
@@ -105,6 +110,9 @@ declare const TRANSLATION_PAIRS_PAGE: {
     'page.code': string;
     'page.codePlaceholder': string;
     'page.codeRequired': string;
+    'page.slug': string;
+    'page.slugPlaceholder': string;
+    'page.slugRequired': string;
     'page.addPageTitle': string;
     'page.updatePageTitle': string;
     'page.searchPages': string;
@@ -113,4 +121,4 @@ declare const TRANSLATION_PAIRS_PAGE: {
     'page.widgets': string;
     'page.actionsLabel': string;
 };
-export { CALLBACK_CODES, DECIMAL_REDIX, DEFAULT_CURRENT_PAGE, DEFAULT_OFFSET_PAYLOAD, INTERNAL_ERROR_CODE, DEFAULT_PERMISSIONS, TRANSLATION_PAIRS_COMMON, DEFAULT_LIMIT, PAGE_LIMITS, TRANSLATION_PAIRS_WIDGET, TRANSLATION_PAIRS_ITEM, TRANSLATION_PAIRS_PAGE, };
+export { CONSTANTS, CALLBACK_CODES, DECIMAL_REDIX, DEFAULT_CURRENT_PAGE, DEFAULT_OFFSET_PAYLOAD, INTERNAL_ERROR_CODE, DEFAULT_PERMISSIONS, TRANSLATION_PAIRS_COMMON, DEFAULT_LIMIT, PAGE_LIMITS, TRANSLATION_PAIRS_WIDGET, TRANSLATION_PAIRS_ITEM, TRANSLATION_PAIRS_PAGE, };

package/src/lib/helper/utils.d.ts

@@ -3,6 +3,7 @@ export declare const paginationDataGatter: (data: any) => any;
 export declare const dataGatter: (data: any) => any;
 export declare const capitalizeFirstLetter: (string?: string) => string;
 export declare const changeToCode: (string?: string) => string;
+export declare const changeToSlug: (string?: string) => string;
 export declare const isObject: (data: any) => boolean;
 export declare const isString: (data: any) => boolean;
 export declare const isArray: (data: any) => boolean;