@knovator/pagecreator-admin 0.3.3 → 0.4.0

package/index.cjs

@@ -1712,6 +1712,7 @@ const TRANSLATION_PAIRS_WIDGET = {
   'widget.itemsTypePlaceholder': 'Select Items Type',
   'widget.widgetType': 'Widget Type',
   'widget.widgetTypeRequired': 'Widget Type is required',
+  'widget.color': 'Color',
   'widget.code': 'Code',
   'widget.codePlaceholder': 'Enter code',
   'widget.codeRequired': 'Code is required',
@@ -1737,6 +1738,8 @@ const TRANSLATION_PAIRS_WIDGET = {
 const TRANSLATION_PAIRS_ITEM = {
   'item.title': 'Title',
   'item.titlePlaceholder': 'Enter title',
+  'item.subtitle': 'Subtitle',
+  'item.subTitlePlaceholder': 'Enter Subtitle',
   'item.altText': 'Alt Text',
   'item.altTextPlaceholder': 'Enter alt text',
   'item.link': 'Link',
@@ -2770,8 +2773,9 @@ const getApiType = ({
 };
 
 const usePage = ({
-  defaultLimit,
   routes,
+  defaultLimit,
+  canList: _canList = true,
   preConfirmDelete
 }) => {
   const [list, setList] = React.useState([]);
@@ -2977,10 +2981,10 @@ const usePage = ({
     });
   };
   React.useEffect(() => {
-    getPages();
+    if (_canList) getPages();
     getWidgets();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pageSize, currentPage]);
+  }, [pageSize, currentPage, _canList]);
   return {
     list,
     getPages,
@@ -3163,11 +3167,15 @@ const Table = ({
     key: item['id'] || item['_id'] || i
   }, dataKeys.map((key, j) => cellItemRenderer(item, key, j)), actions && /*#__PURE__*/React__default["default"].createElement("td", {
     className: "khb_table-row-actions"
-  }, actions.edit && /*#__PURE__*/React__default["default"].createElement("button", {
+  }, actions.edit && typeof actions.edit === 'function' ? /*#__PURE__*/React__default["default"].createElement("button", {
     className: "khb_actions-update",
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     onClick: () => actions.edit(item)
-  }, /*#__PURE__*/React__default["default"].createElement(Pencil, null)), actions.delete && /*#__PURE__*/React__default["default"].createElement("button", {
+  }, /*#__PURE__*/React__default["default"].createElement(Pencil, null)) : null, actions.delete && typeof actions.delete === 'function' && /*#__PURE__*/React__default["default"].createElement("button", {
     className: "khb_actions-delete",
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     onClick: () => actions.delete(item)
   }, /*#__PURE__*/React__default["default"].createElement(Trash, null))))) : /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
     colSpan: ((dataKeys === null || dataKeys === void 0 ? void 0 : dataKeys.length) || 0) + 1
@@ -3177,7 +3185,6 @@ const Table = ({
 const PageTable = () => {
   const {
     list,
-    canList,
     onChangeFormState,
     t,
     loading,
@@ -3187,26 +3194,23 @@ const PageTable = () => {
   } = usePageState();
   const onUpdateClick = item => onChangeFormState('UPDATE', item);
   const onDeleteClick = item => onChangeFormState('DELETE', item);
-  if (Array.isArray(list) && canList) {
-    return /*#__PURE__*/React__default["default"].createElement(Table, {
-      data: list,
-      loader: loader,
-      loading: loading,
-      dataKeys: [{
-        label: t('page.tableName'),
-        dataKey: 'name',
-        highlight: true
-      }, {
-        label: t('page.tableCode'),
-        dataKey: 'code'
-      }],
-      actions: {
-        edit: canUpdate ? onUpdateClick : undefined,
-        delete: canDelete ? onDeleteClick : undefined
-      }
-    });
-  }
-  return null;
+  return /*#__PURE__*/React__default["default"].createElement(Table, {
+    data: list,
+    loader: loader,
+    loading: loading,
+    dataKeys: [{
+      label: t('page.tableName'),
+      dataKey: 'name',
+      highlight: true
+    }, {
+      label: t('page.tableCode'),
+      dataKey: 'code'
+    }],
+    actions: {
+      edit: canUpdate ? onUpdateClick : undefined,
+      delete: canDelete ? onDeleteClick : undefined
+    }
+  });
 };
 
 const Checkbox = ({
@@ -3508,10 +3512,11 @@ var Input = Object.assign(Input$1, {
 const PageSearch = () => {
   const {
     getPages,
-    t
+    t,
+    canList
   } = usePageState();
   const callerRef = React.useRef(null);
-  const [search, setSearch] = React.useState("");
+  const [search, setSearch] = React.useState('');
   const onChangeSearch = str => {
     setSearch(str);
     if (callerRef.current) clearTimeout(callerRef.current);
@@ -3522,8 +3527,9 @@ const PageSearch = () => {
   return /*#__PURE__*/React__default["default"].createElement(Input, {
     type: "search",
     value: search,
+    disabled: !canList,
     onChange: e => onChangeSearch(e.target.value),
-    placeholder: t("page.searchPages")
+    placeholder: t('page.searchPages')
   });
 };
 
@@ -3919,13 +3925,14 @@ const SimpleForm = /*#__PURE__*/React.forwardRef(({
         case 'text':
         case 'number':
         case 'url':
+        case 'color':
         default:
           input = /*#__PURE__*/React__default["default"].createElement(Input, {
             rest: register(schema.accessor, schema.validations || {}),
             label: schema.label,
             error: (_f = (_e = errors[schema.accessor]) === null || _e === void 0 ? void 0 : _e.message) === null || _f === void 0 ? void 0 : _f.toString(),
             type: schema.type,
-            className: "w-full p-2",
+            className: classNames__default["default"]('w-full p-2', schema.className),
             placeholder: schema.placeholder,
             disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
             required: schema.required,
@@ -4190,7 +4197,7 @@ const Pagination = ({
     className: "khb_pagination-total"
   }, _showingText, ' ', /*#__PURE__*/React__default["default"].createElement("span", {
     className: "khb_pagination-total-showing"
-  }, (currentPage - 1) * pageSize + 1), ' ', "-", ' ', /*#__PURE__*/React__default["default"].createElement("span", {
+  }, !totalRecords ? 0 : (currentPage - 1) * pageSize + 1), ' ', "-", ' ', /*#__PURE__*/React__default["default"].createElement("span", {
     className: "khb_pagination-total-showing"
   }, Math.min(currentPage * pageSize, totalRecords)), ' ', _ofText, " ", totalRecords), /*#__PURE__*/React__default["default"].createElement("ul", {
     className: "khb_pagination-actions"
@@ -4211,12 +4218,13 @@ const Pagination = ({
     id: "page",
     value: localCurrentPage,
     onChange: e => setLocalCurrentPage(Number(e.target.value)),
-    onBlur: updatePagination
+    onBlur: updatePagination,
+    disabled: !totalRecords
   }), ' ', "/ ", totalPages), /*#__PURE__*/React__default["default"].createElement(Button, {
     size: "xs",
     type: "secondary",
     className: "khb_pagination-next",
-    disabled: currentPage === totalPages,
+    disabled: currentPage === totalPages || !totalRecords,
     onClick: () => onPaginationButtonClick('next')
   }, nextContent || /*#__PURE__*/React__default["default"].createElement(ChevronRight, {
     srText: "Next"
@@ -4472,8 +4480,12 @@ const Page = ({
   loader,
   explicitForm: _explicitForm = false,
   children,
-  permissions: _permissions = DEFAULT_PERMISSIONS
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  permissions: _permissions = {},
+  preConfirmDelete
 }) => {
+  const derivedPermissions = Object.assign(DEFAULT_PERMISSIONS, _permissions);
   const formRef = React.useRef(null);
   const derivedT = createTranslation(t, Object.assign(Object.assign({}, TRANSLATION_PAIRS_COMMON), TRANSLATION_PAIRS_PAGE));
   const {
@@ -4496,7 +4508,9 @@ const Page = ({
     onChangeWidgetSequence,
     getPages
   } = usePage({
-    defaultLimit: 10
+    defaultLimit: 10,
+    preConfirmDelete,
+    canList: derivedPermissions.list
   });
   return /*#__PURE__*/React__default["default"].createElement(PageContextProvider, {
     t: derivedT,
@@ -4519,10 +4533,10 @@ const Page = ({
     formState: formState,
     closeForm: onCloseForm,
     // permissions
-    canAdd: _permissions === null || _permissions === void 0 ? void 0 : _permissions.add,
-    canDelete: _permissions === null || _permissions === void 0 ? void 0 : _permissions.delete,
-    canUpdate: _permissions === null || _permissions === void 0 ? void 0 : _permissions.update,
-    canList: _permissions === null || _permissions === void 0 ? void 0 : _permissions.list
+    canAdd: derivedPermissions.add,
+    canDelete: derivedPermissions.delete,
+    canUpdate: derivedPermissions.update,
+    canList: derivedPermissions.list
   }, children ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(AddButton$1, null), /*#__PURE__*/React__default["default"].createElement(PageSearch, null), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "khb_table-wrapper"
   }, /*#__PURE__*/React__default["default"].createElement(PageTable, null), /*#__PURE__*/React__default["default"].createElement(PagePagination, null))), !_explicitForm && /*#__PURE__*/React__default["default"].createElement(Drawer, {
@@ -4557,6 +4571,7 @@ Page.FormActions = PageFormActions;
 Page.FormWrapper = PageFormWrapper;
 
 const useWidget = ({
+  canList: _canList = true,
   defaultLimit,
   routes,
   preConfirmDelete
@@ -4978,9 +4993,9 @@ const useWidget = ({
     }
   });
   React.useEffect(() => {
-    getWidgets();
+    if (_canList) getWidgets();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pageSize, currentPage]);
+  }, [pageSize, currentPage, _canList]);
   return {
     list,
     getWidgets,
@@ -6214,7 +6229,9 @@ const WidgetTable = () => {
   } = useProviderState();
   const {
     list,
-    canList,
+    canUpdate,
+    canDelete,
+    canPartialUpdate,
     onChangeFormState,
     onPartialUpdateWidget,
     loading,
@@ -6228,7 +6245,25 @@ const WidgetTable = () => {
   }, [onPartialUpdateWidget]);
   const onUpdateClick = item => onChangeFormState('UPDATE', item);
   const onDeleteClick = item => onChangeFormState('DELETE', item);
-  if (!canList) return null;
+  const dataKeys = [{
+    label: t('widget.tableName'),
+    dataKey: 'name',
+    highlight: true
+  }, {
+    label: t('widget.tableCode'),
+    dataKey: 'code'
+  }];
+  if (canPartialUpdate) dataKeys.push({
+    label: t('widget.tableActive'),
+    dataKey: 'isActive',
+    Cell: ({
+      row
+    }) => canPartialUpdate ? /*#__PURE__*/React__default["default"].createElement(Toggle, {
+      switchClass: switchClass,
+      isChecked: row === null || row === void 0 ? void 0 : row.isActive,
+      onChange: status => updateClosure(row, 'isActive', status)
+    }) : null
+  });
   return /*#__PURE__*/React__default["default"].createElement(Table, {
     data: list,
     loader: loader,
@@ -6240,20 +6275,10 @@ const WidgetTable = () => {
     }, {
       label: t('widget.tableCode'),
       dataKey: 'code'
-    }, {
-      label: t('widget.tableActive'),
-      dataKey: 'isActive',
-      Cell: ({
-        row
-      }) => /*#__PURE__*/React__default["default"].createElement(Toggle, {
-        switchClass: switchClass,
-        isChecked: row === null || row === void 0 ? void 0 : row.isActive,
-        onChange: status => updateClosure(row, 'isActive', status)
-      })
     }],
     actions: {
-      edit: onUpdateClick,
-      delete: onDeleteClick
+      edit: canUpdate ? onUpdateClick : false,
+      delete: canDelete ? onDeleteClick : false
     }
   });
 };
@@ -6754,6 +6779,11 @@ const WidgetForm = ({
     type: 'checkbox',
     show: showAutoPlay,
     switchClass: switchClass
+  }, {
+    label: t('widget.color'),
+    accessor: 'backgroundColor',
+    type: 'color',
+    className: 'khb_input-color'
   }, {
     label: t('widget.webPerRow'),
     accessor: 'webPerRow',
@@ -6810,6 +6840,11 @@ const WidgetForm = ({
     accessor: 'title',
     type: 'text',
     placeholder: t('item.titlePlaceholder')
+  }, {
+    label: `${t('item.subtitle')}`,
+    accessor: 'subtitle',
+    type: 'text',
+    placeholder: t('item.subTitlePlaceholder')
   }, {
     label: `${t('item.altText')}`,
     accessor: 'altText',
@@ -6952,7 +6987,8 @@ const WidgetPagination = () => {
 const WidgetSearch = () => {
   const {
     getWidgets,
-    t
+    t,
+    canList
   } = useWidgetState();
   const callerRef = React.useRef(null);
   const [search, setSearch] = React.useState('');
@@ -6966,6 +7002,7 @@ const WidgetSearch = () => {
   return /*#__PURE__*/React__default["default"].createElement(Input, {
     type: "search",
     value: search,
+    disabled: !canList,
     onChange: e => onChangeSearch(e.target.value),
     placeholder: t('widget.searchPlaceholder')
   });
@@ -6989,7 +7026,7 @@ const WidgetFormActions = ({
     if (!formRef) {
       return onError(CALLBACK_CODES.INTERNAL, 'error', `formRef is required to submit the form!`);
     } else if (!formRef.current) {
-      return onError(CALLBACK_CODES.INTERNAL, 'error', `formRef is empty, make sure it's passed as 'ref' prop to the form!`);
+      return onError(CALLBACK_CODES.INTERNAL, 'error', `formRef is empty, make sure it's passed as 'formRef' prop to the form!`);
     }
     // formRef is provided
     e === null || e === void 0 ? void 0 : e.preventDefault();
@@ -7027,12 +7064,15 @@ const Widget = ({
   routes,
   loader,
   explicitForm: _explicitForm = false,
-  permissions: _permissions = DEFAULT_PERMISSIONS,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  permissions: _permissions = {},
   preConfirmDelete,
   formatListItem,
   formatOptionLabel,
   children
 }) => {
+  const derivedPermissions = Object.assign(DEFAULT_PERMISSIONS, _permissions);
   const widgetFormRef = React.useRef(null);
   const derivedT = createTranslation(t, Object.assign(Object.assign(Object.assign({}, TRANSLATION_PAIRS_COMMON), TRANSLATION_PAIRS_WIDGET), TRANSLATION_PAIRS_ITEM));
   const {
@@ -7065,6 +7105,7 @@ const Widget = ({
     itemsLoading,
     onItemFormSubmit
   } = useWidget({
+    canList: derivedPermissions.list,
     routes,
     defaultLimit: 10,
     preConfirmDelete
@@ -7101,11 +7142,11 @@ const Widget = ({
     itemsLoading: itemsLoading,
     onItemFormSubmit: onItemFormSubmit,
     // Permissions
-    canAdd: _permissions.add,
-    canDelete: _permissions.delete,
-    canList: _permissions.list,
-    canUpdate: _permissions.update,
-    canPartialUpdate: _permissions.partialUpdate,
+    canAdd: derivedPermissions.add,
+    canDelete: derivedPermissions.delete,
+    canList: derivedPermissions.list,
+    canUpdate: derivedPermissions.update,
+    canPartialUpdate: derivedPermissions.partialUpdate,
     formState: formState,
     closeForm: onCloseForm
   }, children ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(AddButton, null), /*#__PURE__*/React__default["default"].createElement(WidgetSearch, null), /*#__PURE__*/React__default["default"].createElement("div", {

package/index.css

@@ -1522,6 +1522,9 @@ video {
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
+.khb_input-color {
+  height: 3.5rem;
+}
 /* \ End of Input */
 
 /* Drawer */

package/index.js

@@ -1700,6 +1700,7 @@ const TRANSLATION_PAIRS_WIDGET = {
   'widget.itemsTypePlaceholder': 'Select Items Type',
   'widget.widgetType': 'Widget Type',
   'widget.widgetTypeRequired': 'Widget Type is required',
+  'widget.color': 'Color',
   'widget.code': 'Code',
   'widget.codePlaceholder': 'Enter code',
   'widget.codeRequired': 'Code is required',
@@ -1725,6 +1726,8 @@ const TRANSLATION_PAIRS_WIDGET = {
 const TRANSLATION_PAIRS_ITEM = {
   'item.title': 'Title',
   'item.titlePlaceholder': 'Enter title',
+  'item.subtitle': 'Subtitle',
+  'item.subTitlePlaceholder': 'Enter Subtitle',
   'item.altText': 'Alt Text',
   'item.altTextPlaceholder': 'Enter alt text',
   'item.link': 'Link',
@@ -2758,8 +2761,9 @@ const getApiType = ({
 };
 
 const usePage = ({
-  defaultLimit,
   routes,
+  defaultLimit,
+  canList: _canList = true,
   preConfirmDelete
 }) => {
   const [list, setList] = useState([]);
@@ -2965,10 +2969,10 @@ const usePage = ({
     });
   };
   useEffect(() => {
-    getPages();
+    if (_canList) getPages();
     getWidgets();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pageSize, currentPage]);
+  }, [pageSize, currentPage, _canList]);
   return {
     list,
     getPages,
@@ -3151,11 +3155,15 @@ const Table = ({
     key: item['id'] || item['_id'] || i
   }, dataKeys.map((key, j) => cellItemRenderer(item, key, j)), actions && /*#__PURE__*/React.createElement("td", {
     className: "khb_table-row-actions"
-  }, actions.edit && /*#__PURE__*/React.createElement("button", {
+  }, actions.edit && typeof actions.edit === 'function' ? /*#__PURE__*/React.createElement("button", {
     className: "khb_actions-update",
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     onClick: () => actions.edit(item)
-  }, /*#__PURE__*/React.createElement(Pencil, null)), actions.delete && /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React.createElement(Pencil, null)) : null, actions.delete && typeof actions.delete === 'function' && /*#__PURE__*/React.createElement("button", {
     className: "khb_actions-delete",
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     onClick: () => actions.delete(item)
   }, /*#__PURE__*/React.createElement(Trash, null))))) : /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
     colSpan: ((dataKeys === null || dataKeys === void 0 ? void 0 : dataKeys.length) || 0) + 1
@@ -3165,7 +3173,6 @@ const Table = ({
 const PageTable = () => {
   const {
     list,
-    canList,
     onChangeFormState,
     t,
     loading,
@@ -3175,26 +3182,23 @@ const PageTable = () => {
   } = usePageState();
   const onUpdateClick = item => onChangeFormState('UPDATE', item);
   const onDeleteClick = item => onChangeFormState('DELETE', item);
-  if (Array.isArray(list) && canList) {
-    return /*#__PURE__*/React.createElement(Table, {
-      data: list,
-      loader: loader,
-      loading: loading,
-      dataKeys: [{
-        label: t('page.tableName'),
-        dataKey: 'name',
-        highlight: true
-      }, {
-        label: t('page.tableCode'),
-        dataKey: 'code'
-      }],
-      actions: {
-        edit: canUpdate ? onUpdateClick : undefined,
-        delete: canDelete ? onDeleteClick : undefined
-      }
-    });
-  }
-  return null;
+  return /*#__PURE__*/React.createElement(Table, {
+    data: list,
+    loader: loader,
+    loading: loading,
+    dataKeys: [{
+      label: t('page.tableName'),
+      dataKey: 'name',
+      highlight: true
+    }, {
+      label: t('page.tableCode'),
+      dataKey: 'code'
+    }],
+    actions: {
+      edit: canUpdate ? onUpdateClick : undefined,
+      delete: canDelete ? onDeleteClick : undefined
+    }
+  });
 };
 
 const Checkbox = ({
@@ -3496,10 +3500,11 @@ var Input = Object.assign(Input$1, {
 const PageSearch = () => {
   const {
     getPages,
-    t
+    t,
+    canList
   } = usePageState();
   const callerRef = useRef(null);
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useState('');
   const onChangeSearch = str => {
     setSearch(str);
     if (callerRef.current) clearTimeout(callerRef.current);
@@ -3510,8 +3515,9 @@ const PageSearch = () => {
   return /*#__PURE__*/React.createElement(Input, {
     type: "search",
     value: search,
+    disabled: !canList,
     onChange: e => onChangeSearch(e.target.value),
-    placeholder: t("page.searchPages")
+    placeholder: t('page.searchPages')
   });
 };
 
@@ -3907,13 +3913,14 @@ const SimpleForm = /*#__PURE__*/forwardRef(({
         case 'text':
         case 'number':
         case 'url':
+        case 'color':
         default:
           input = /*#__PURE__*/React.createElement(Input, {
             rest: register(schema.accessor, schema.validations || {}),
             label: schema.label,
             error: (_f = (_e = errors[schema.accessor]) === null || _e === void 0 ? void 0 : _e.message) === null || _f === void 0 ? void 0 : _f.toString(),
             type: schema.type,
-            className: "w-full p-2",
+            className: classNames('w-full p-2', schema.className),
             placeholder: schema.placeholder,
             disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
             required: schema.required,
@@ -4178,7 +4185,7 @@ const Pagination = ({
     className: "khb_pagination-total"
   }, _showingText, ' ', /*#__PURE__*/React.createElement("span", {
     className: "khb_pagination-total-showing"
-  }, (currentPage - 1) * pageSize + 1), ' ', "-", ' ', /*#__PURE__*/React.createElement("span", {
+  }, !totalRecords ? 0 : (currentPage - 1) * pageSize + 1), ' ', "-", ' ', /*#__PURE__*/React.createElement("span", {
     className: "khb_pagination-total-showing"
   }, Math.min(currentPage * pageSize, totalRecords)), ' ', _ofText, " ", totalRecords), /*#__PURE__*/React.createElement("ul", {
     className: "khb_pagination-actions"
@@ -4199,12 +4206,13 @@ const Pagination = ({
     id: "page",
     value: localCurrentPage,
     onChange: e => setLocalCurrentPage(Number(e.target.value)),
-    onBlur: updatePagination
+    onBlur: updatePagination,
+    disabled: !totalRecords
   }), ' ', "/ ", totalPages), /*#__PURE__*/React.createElement(Button, {
     size: "xs",
     type: "secondary",
     className: "khb_pagination-next",
-    disabled: currentPage === totalPages,
+    disabled: currentPage === totalPages || !totalRecords,
     onClick: () => onPaginationButtonClick('next')
   }, nextContent || /*#__PURE__*/React.createElement(ChevronRight, {
     srText: "Next"
@@ -4460,8 +4468,12 @@ const Page = ({
   loader,
   explicitForm: _explicitForm = false,
   children,
-  permissions: _permissions = DEFAULT_PERMISSIONS
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  permissions: _permissions = {},
+  preConfirmDelete
 }) => {
+  const derivedPermissions = Object.assign(DEFAULT_PERMISSIONS, _permissions);
   const formRef = useRef(null);
   const derivedT = createTranslation(t, Object.assign(Object.assign({}, TRANSLATION_PAIRS_COMMON), TRANSLATION_PAIRS_PAGE));
   const {
@@ -4484,7 +4496,9 @@ const Page = ({
     onChangeWidgetSequence,
     getPages
   } = usePage({
-    defaultLimit: 10
+    defaultLimit: 10,
+    preConfirmDelete,
+    canList: derivedPermissions.list
   });
   return /*#__PURE__*/React.createElement(PageContextProvider, {
     t: derivedT,
@@ -4507,10 +4521,10 @@ const Page = ({
     formState: formState,
     closeForm: onCloseForm,
     // permissions
-    canAdd: _permissions === null || _permissions === void 0 ? void 0 : _permissions.add,
-    canDelete: _permissions === null || _permissions === void 0 ? void 0 : _permissions.delete,
-    canUpdate: _permissions === null || _permissions === void 0 ? void 0 : _permissions.update,
-    canList: _permissions === null || _permissions === void 0 ? void 0 : _permissions.list
+    canAdd: derivedPermissions.add,
+    canDelete: derivedPermissions.delete,
+    canUpdate: derivedPermissions.update,
+    canList: derivedPermissions.list
   }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AddButton$1, null), /*#__PURE__*/React.createElement(PageSearch, null), /*#__PURE__*/React.createElement("div", {
     className: "khb_table-wrapper"
   }, /*#__PURE__*/React.createElement(PageTable, null), /*#__PURE__*/React.createElement(PagePagination, null))), !_explicitForm && /*#__PURE__*/React.createElement(Drawer, {
@@ -4545,6 +4559,7 @@ Page.FormActions = PageFormActions;
 Page.FormWrapper = PageFormWrapper;
 
 const useWidget = ({
+  canList: _canList = true,
   defaultLimit,
   routes,
   preConfirmDelete
@@ -4966,9 +4981,9 @@ const useWidget = ({
     }
   });
   useEffect(() => {
-    getWidgets();
+    if (_canList) getWidgets();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pageSize, currentPage]);
+  }, [pageSize, currentPage, _canList]);
   return {
     list,
     getWidgets,
@@ -6202,7 +6217,9 @@ const WidgetTable = () => {
   } = useProviderState();
   const {
     list,
-    canList,
+    canUpdate,
+    canDelete,
+    canPartialUpdate,
     onChangeFormState,
     onPartialUpdateWidget,
     loading,
@@ -6216,7 +6233,25 @@ const WidgetTable = () => {
   }, [onPartialUpdateWidget]);
   const onUpdateClick = item => onChangeFormState('UPDATE', item);
   const onDeleteClick = item => onChangeFormState('DELETE', item);
-  if (!canList) return null;
+  const dataKeys = [{
+    label: t('widget.tableName'),
+    dataKey: 'name',
+    highlight: true
+  }, {
+    label: t('widget.tableCode'),
+    dataKey: 'code'
+  }];
+  if (canPartialUpdate) dataKeys.push({
+    label: t('widget.tableActive'),
+    dataKey: 'isActive',
+    Cell: ({
+      row
+    }) => canPartialUpdate ? /*#__PURE__*/React.createElement(Toggle, {
+      switchClass: switchClass,
+      isChecked: row === null || row === void 0 ? void 0 : row.isActive,
+      onChange: status => updateClosure(row, 'isActive', status)
+    }) : null
+  });
   return /*#__PURE__*/React.createElement(Table, {
     data: list,
     loader: loader,
@@ -6228,20 +6263,10 @@ const WidgetTable = () => {
     }, {
       label: t('widget.tableCode'),
       dataKey: 'code'
-    }, {
-      label: t('widget.tableActive'),
-      dataKey: 'isActive',
-      Cell: ({
-        row
-      }) => /*#__PURE__*/React.createElement(Toggle, {
-        switchClass: switchClass,
-        isChecked: row === null || row === void 0 ? void 0 : row.isActive,
-        onChange: status => updateClosure(row, 'isActive', status)
-      })
     }],
     actions: {
-      edit: onUpdateClick,
-      delete: onDeleteClick
+      edit: canUpdate ? onUpdateClick : false,
+      delete: canDelete ? onDeleteClick : false
     }
   });
 };
@@ -6742,6 +6767,11 @@ const WidgetForm = ({
     type: 'checkbox',
     show: showAutoPlay,
     switchClass: switchClass
+  }, {
+    label: t('widget.color'),
+    accessor: 'backgroundColor',
+    type: 'color',
+    className: 'khb_input-color'
   }, {
     label: t('widget.webPerRow'),
     accessor: 'webPerRow',
@@ -6798,6 +6828,11 @@ const WidgetForm = ({
     accessor: 'title',
     type: 'text',
     placeholder: t('item.titlePlaceholder')
+  }, {
+    label: `${t('item.subtitle')}`,
+    accessor: 'subtitle',
+    type: 'text',
+    placeholder: t('item.subTitlePlaceholder')
   }, {
     label: `${t('item.altText')}`,
     accessor: 'altText',
@@ -6940,7 +6975,8 @@ const WidgetPagination = () => {
 const WidgetSearch = () => {
   const {
     getWidgets,
-    t
+    t,
+    canList
   } = useWidgetState();
   const callerRef = useRef(null);
   const [search, setSearch] = useState('');
@@ -6954,6 +6990,7 @@ const WidgetSearch = () => {
   return /*#__PURE__*/React.createElement(Input, {
     type: "search",
     value: search,
+    disabled: !canList,
     onChange: e => onChangeSearch(e.target.value),
     placeholder: t('widget.searchPlaceholder')
   });
@@ -6977,7 +7014,7 @@ const WidgetFormActions = ({
     if (!formRef) {
       return onError(CALLBACK_CODES.INTERNAL, 'error', `formRef is required to submit the form!`);
     } else if (!formRef.current) {
-      return onError(CALLBACK_CODES.INTERNAL, 'error', `formRef is empty, make sure it's passed as 'ref' prop to the form!`);
+      return onError(CALLBACK_CODES.INTERNAL, 'error', `formRef is empty, make sure it's passed as 'formRef' prop to the form!`);
     }
     // formRef is provided
     e === null || e === void 0 ? void 0 : e.preventDefault();
@@ -7015,12 +7052,15 @@ const Widget = ({
   routes,
   loader,
   explicitForm: _explicitForm = false,
-  permissions: _permissions = DEFAULT_PERMISSIONS,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  permissions: _permissions = {},
   preConfirmDelete,
   formatListItem,
   formatOptionLabel,
   children
 }) => {
+  const derivedPermissions = Object.assign(DEFAULT_PERMISSIONS, _permissions);
   const widgetFormRef = useRef(null);
   const derivedT = createTranslation(t, Object.assign(Object.assign(Object.assign({}, TRANSLATION_PAIRS_COMMON), TRANSLATION_PAIRS_WIDGET), TRANSLATION_PAIRS_ITEM));
   const {
@@ -7053,6 +7093,7 @@ const Widget = ({
     itemsLoading,
     onItemFormSubmit
   } = useWidget({
+    canList: derivedPermissions.list,
     routes,
     defaultLimit: 10,
     preConfirmDelete
@@ -7089,11 +7130,11 @@ const Widget = ({
     itemsLoading: itemsLoading,
     onItemFormSubmit: onItemFormSubmit,
     // Permissions
-    canAdd: _permissions.add,
-    canDelete: _permissions.delete,
-    canList: _permissions.list,
-    canUpdate: _permissions.update,
-    canPartialUpdate: _permissions.partialUpdate,
+    canAdd: derivedPermissions.add,
+    canDelete: derivedPermissions.delete,
+    canList: derivedPermissions.list,
+    canUpdate: derivedPermissions.update,
+    canPartialUpdate: derivedPermissions.partialUpdate,
     formState: formState,
     closeForm: onCloseForm
   }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AddButton, null), /*#__PURE__*/React.createElement(WidgetSearch, null), /*#__PURE__*/React.createElement("div", {

package/package.json

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