@knovator/pagecreator-admin 0.7.6 → 0.8.0

package/index.cjs

@@ -1758,6 +1758,8 @@ const TRANSLATION_PAIRS_WIDGET = {
   'widget.widgetTitleInfo': 'HTML is supported',
   'widget.minPerRow': 'Value must be greater than zero',
   'widget.actionsLabel': 'Actions',
+  'widget.category': 'Category',
+  'widget.categoryPlaceholder': 'Select Category',
   'widget.tabNameRequired': 'Tab Name is required'
 };
 const TRANSLATION_PAIRS_ITEM = {
@@ -2692,6 +2694,12 @@ const apiList = {
     url: `${prefix}/collection-data`,
     method: 'POST'
   }),
+  CATEGORIES: ({
+    prefix
+  }) => ({
+    url: `${prefix}/categories`,
+    method: 'GET'
+  }),
   // Image Upload API
   IMAGE_UPLOAD: ({
     prefix
@@ -4510,6 +4518,7 @@ const useWidget = ({
   const [formState, setFormState] = React.useState();
   const [itemsTypes, setItemsTypes] = React.useState([]);
   const [widgetTypes, setWidgetTypes] = React.useState([]);
+  const [categories, setCategories] = React.useState([]);
   const [collectionDataLoading, setCollectionDataLoading] = React.useState(false);
   const [collectionData, setCollectionData] = React.useState([]);
   const {
@@ -4688,6 +4697,27 @@ const useWidget = ({
     }
     setLoading(false);
   });
+  const getCategories = () => __awaiter(void 0, void 0, void 0, function* () {
+    if ((categories === null || categories === void 0 ? void 0 : categories.length) > 0) return;
+    setLoading(true);
+    const api = getApiType({
+      routes,
+      action: 'CATEGORIES',
+      prefix: widgetRoutesPrefix
+    });
+    const response = yield commonApi({
+      baseUrl,
+      token,
+      method: api.method,
+      url: api.url,
+      onError: handleError(CALLBACK_CODES.GET_ALL)
+    });
+    if ((response === null || response === void 0 ? void 0 : response.code) === 'SUCCESS') {
+      setLoading(false);
+      return setCategories(dataGatter(response));
+    }
+    setLoading(false);
+  });
   const getCollectionData = (collectionName, search, callback, collectionItems) => __awaiter(void 0, void 0, void 0, function* () {
     setCollectionDataLoading(true);
     const api = getApiType({
@@ -4790,6 +4820,7 @@ const useWidget = ({
     if (state === 'ADD' || state === 'UPDATE') {
       getWidgetsTypes();
       getWidgetTypes();
+      getCategories();
     }
     // get Item data if widget is updating
     if (state === 'UPDATE' && data) {
@@ -4884,6 +4915,7 @@ const useWidget = ({
     // Form
     formState,
     itemData,
+    categories,
     onChangeFormState,
     onCloseForm,
     onWidgetFormSubmit,
@@ -5993,6 +6025,7 @@ const WidgetContextProvider = ({
   onImageRemove: _onImageRemove = id => __awaiter(void 0, void 0, void 0, function* () {}),
   itemsTypes: _itemsTypes = [],
   widgetTypes: _widgetTypes = [],
+  categories: _categories = [],
   getCollectionData: _getCollectionData = () => Promise.resolve(),
   collectionDataLoading: _collectionDataLoading = false,
   collectionData: _collectionData = [],
@@ -6040,6 +6073,7 @@ const WidgetContextProvider = ({
       onImageRemove: _onImageRemove,
       onPartialUpdateWidget: _onPartialUpdateWidget,
       itemsTypes: _itemsTypes,
+      categories: _categories,
       widgetTypes: _widgetTypes,
       getCollectionData: _getCollectionData,
       collectionDataLoading: _collectionDataLoading,
@@ -6722,6 +6756,7 @@ const Tabs = ({
 };
 
 const constants = {
+  categoryTypeAccessor: 'category',
   widgetTypeAccessor: 'widgetType',
   itemTypeAccessor: 'itemsType',
   collectionNameAccessor: 'collectionName',
@@ -6765,6 +6800,7 @@ const WidgetForm = ({
     canUpdate,
     formState,
     itemsTypes,
+    categories,
     widgetTypes,
     loading,
     onWidgetFormSubmit,
@@ -6876,6 +6912,9 @@ const WidgetForm = ({
   const getFirstWidgetTypeValue = React.useCallback(() => {
     return widgetTypes[0].value;
   }, [widgetTypes]);
+  const getFirstCategoryValue = React.useCallback(() => {
+    return categories[0].value;
+  }, [categories]);
   // Widget Form Functions
   const onWidgetFormInputChange = React.useCallback((value, name) => {
     if (name === 'widgetType') {
@@ -6902,6 +6941,9 @@ const WidgetForm = ({
   const onFormSubmit = data => {
     var _a, _b;
     const formData = Object.assign({}, data);
+    if (!formData[constants.categoryTypeAccessor] && categories && categories.length > 0) {
+      formData[constants.categoryTypeAccessor] = getFirstCategoryValue();
+    }
     // setting widget type if undefined
     if (!formData[constants.widgetTypeAccessor] && formState === 'ADD') {
       formData[constants.widgetTypeAccessor] = getFirstWidgetTypeValue();
@@ -7019,6 +7061,13 @@ const WidgetForm = ({
       required: t('widget.widgetTypeRequired')
     },
     options: widgetTypes
+  }, {
+    label: `${t('widget.category')}`,
+    placeholder: t('widget.categoryPlaceholder'),
+    accessor: 'category',
+    type: 'select',
+    show: categories && categories.length > 0,
+    options: categories
   }, {
     label: t('widget.autoPlay'),
     accessor: 'autoPlay',
@@ -7318,6 +7367,7 @@ const Widget = ({
     onImageUpload,
     onPartialUpdateWidget,
     itemsTypes,
+    categories,
     widgetTypes,
     getCollectionData,
     collectionData,
@@ -7350,6 +7400,7 @@ const Widget = ({
     onImageRemove: onImageRemove,
     onImageUpload: onImageUpload,
     onPartialUpdateWidget: onPartialUpdateWidget,
+    categories: categories,
     itemsTypes: itemsTypes,
     widgetTypes: widgetTypes,
     getCollectionData: getCollectionData,

package/index.js

@@ -1746,6 +1746,8 @@ const TRANSLATION_PAIRS_WIDGET = {
   'widget.widgetTitleInfo': 'HTML is supported',
   'widget.minPerRow': 'Value must be greater than zero',
   'widget.actionsLabel': 'Actions',
+  'widget.category': 'Category',
+  'widget.categoryPlaceholder': 'Select Category',
   'widget.tabNameRequired': 'Tab Name is required'
 };
 const TRANSLATION_PAIRS_ITEM = {
@@ -2680,6 +2682,12 @@ const apiList = {
     url: `${prefix}/collection-data`,
     method: 'POST'
   }),
+  CATEGORIES: ({
+    prefix
+  }) => ({
+    url: `${prefix}/categories`,
+    method: 'GET'
+  }),
   // Image Upload API
   IMAGE_UPLOAD: ({
     prefix
@@ -4498,6 +4506,7 @@ const useWidget = ({
   const [formState, setFormState] = useState();
   const [itemsTypes, setItemsTypes] = useState([]);
   const [widgetTypes, setWidgetTypes] = useState([]);
+  const [categories, setCategories] = useState([]);
   const [collectionDataLoading, setCollectionDataLoading] = useState(false);
   const [collectionData, setCollectionData] = useState([]);
   const {
@@ -4676,6 +4685,27 @@ const useWidget = ({
     }
     setLoading(false);
   });
+  const getCategories = () => __awaiter(void 0, void 0, void 0, function* () {
+    if ((categories === null || categories === void 0 ? void 0 : categories.length) > 0) return;
+    setLoading(true);
+    const api = getApiType({
+      routes,
+      action: 'CATEGORIES',
+      prefix: widgetRoutesPrefix
+    });
+    const response = yield commonApi({
+      baseUrl,
+      token,
+      method: api.method,
+      url: api.url,
+      onError: handleError(CALLBACK_CODES.GET_ALL)
+    });
+    if ((response === null || response === void 0 ? void 0 : response.code) === 'SUCCESS') {
+      setLoading(false);
+      return setCategories(dataGatter(response));
+    }
+    setLoading(false);
+  });
   const getCollectionData = (collectionName, search, callback, collectionItems) => __awaiter(void 0, void 0, void 0, function* () {
     setCollectionDataLoading(true);
     const api = getApiType({
@@ -4778,6 +4808,7 @@ const useWidget = ({
     if (state === 'ADD' || state === 'UPDATE') {
       getWidgetsTypes();
       getWidgetTypes();
+      getCategories();
     }
     // get Item data if widget is updating
     if (state === 'UPDATE' && data) {
@@ -4872,6 +4903,7 @@ const useWidget = ({
     // Form
     formState,
     itemData,
+    categories,
     onChangeFormState,
     onCloseForm,
     onWidgetFormSubmit,
@@ -5981,6 +6013,7 @@ const WidgetContextProvider = ({
   onImageRemove: _onImageRemove = id => __awaiter(void 0, void 0, void 0, function* () {}),
   itemsTypes: _itemsTypes = [],
   widgetTypes: _widgetTypes = [],
+  categories: _categories = [],
   getCollectionData: _getCollectionData = () => Promise.resolve(),
   collectionDataLoading: _collectionDataLoading = false,
   collectionData: _collectionData = [],
@@ -6028,6 +6061,7 @@ const WidgetContextProvider = ({
       onImageRemove: _onImageRemove,
       onPartialUpdateWidget: _onPartialUpdateWidget,
       itemsTypes: _itemsTypes,
+      categories: _categories,
       widgetTypes: _widgetTypes,
       getCollectionData: _getCollectionData,
       collectionDataLoading: _collectionDataLoading,
@@ -6710,6 +6744,7 @@ const Tabs = ({
 };
 
 const constants = {
+  categoryTypeAccessor: 'category',
   widgetTypeAccessor: 'widgetType',
   itemTypeAccessor: 'itemsType',
   collectionNameAccessor: 'collectionName',
@@ -6753,6 +6788,7 @@ const WidgetForm = ({
     canUpdate,
     formState,
     itemsTypes,
+    categories,
     widgetTypes,
     loading,
     onWidgetFormSubmit,
@@ -6864,6 +6900,9 @@ const WidgetForm = ({
   const getFirstWidgetTypeValue = useCallback(() => {
     return widgetTypes[0].value;
   }, [widgetTypes]);
+  const getFirstCategoryValue = useCallback(() => {
+    return categories[0].value;
+  }, [categories]);
   // Widget Form Functions
   const onWidgetFormInputChange = useCallback((value, name) => {
     if (name === 'widgetType') {
@@ -6890,6 +6929,9 @@ const WidgetForm = ({
   const onFormSubmit = data => {
     var _a, _b;
     const formData = Object.assign({}, data);
+    if (!formData[constants.categoryTypeAccessor] && categories && categories.length > 0) {
+      formData[constants.categoryTypeAccessor] = getFirstCategoryValue();
+    }
     // setting widget type if undefined
     if (!formData[constants.widgetTypeAccessor] && formState === 'ADD') {
       formData[constants.widgetTypeAccessor] = getFirstWidgetTypeValue();
@@ -7007,6 +7049,13 @@ const WidgetForm = ({
       required: t('widget.widgetTypeRequired')
     },
     options: widgetTypes
+  }, {
+    label: `${t('widget.category')}`,
+    placeholder: t('widget.categoryPlaceholder'),
+    accessor: 'category',
+    type: 'select',
+    show: categories && categories.length > 0,
+    options: categories
   }, {
     label: t('widget.autoPlay'),
     accessor: 'autoPlay',
@@ -7306,6 +7355,7 @@ const Widget = ({
     onImageUpload,
     onPartialUpdateWidget,
     itemsTypes,
+    categories,
     widgetTypes,
     getCollectionData,
     collectionData,
@@ -7338,6 +7388,7 @@ const Widget = ({
     onImageRemove: onImageRemove,
     onImageUpload: onImageUpload,
     onPartialUpdateWidget: onPartialUpdateWidget,
+    categories: categories,
     itemsTypes: itemsTypes,
     widgetTypes: widgetTypes,
     getCollectionData: getCollectionData,

package/package.json

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

package/src/lib/api/list.d.ts

@@ -40,6 +40,10 @@ declare const apiList: {
         url: string;
         method: string;
     };
+    CATEGORIES: ({ prefix }: API_INPUT_TYPE) => {
+        url: string;
+        method: string;
+    };
     IMAGE_UPLOAD: ({ prefix }: API_INPUT_TYPE) => {
         url: string;
         method: string;

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

@@ -87,6 +87,8 @@ declare const TRANSLATION_PAIRS_WIDGET: {
     'widget.widgetTitleInfo': string;
     'widget.minPerRow': string;
     'widget.actionsLabel': string;
+    'widget.category': string;
+    'widget.categoryPlaceholder': string;
     'widget.tabNameRequired': string;
 };
 declare const TRANSLATION_PAIRS_ITEM: {

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

@@ -2,6 +2,6 @@ import React from 'react';
 import { WidgetContextType } from '../types';
 interface WidgetContextProviderProps extends React.PropsWithChildren, Partial<WidgetContextType> {
 }
-declare const WidgetContextProvider: ({ t, list, imageBaseUrl, searchText, changeSearch, formState, closeForm, loading, onChangeFormState, onWidgetFormSubmit, updateData, canAdd, canUpdate, onDeleteItem, getWidgets, onImageUpload, onImageRemove, itemsTypes, widgetTypes, getCollectionData, collectionDataLoading, collectionData, formatListItem, formatOptionLabel, currentPage, limits, pageSize, setCurrentPage, setPageSize, totalPages, totalRecords, canList, canPartialUpdate, columns, data, canDelete, loader, onPartialUpdateWidget, reactSelectStyles, children, }: WidgetContextProviderProps) => JSX.Element;
+declare const WidgetContextProvider: ({ t, list, imageBaseUrl, searchText, changeSearch, formState, closeForm, loading, onChangeFormState, onWidgetFormSubmit, updateData, canAdd, canUpdate, onDeleteItem, getWidgets, onImageUpload, onImageRemove, itemsTypes, widgetTypes, categories, getCollectionData, collectionDataLoading, collectionData, formatListItem, formatOptionLabel, currentPage, limits, pageSize, setCurrentPage, setPageSize, totalPages, totalRecords, canList, canPartialUpdate, columns, data, canDelete, loader, onPartialUpdateWidget, reactSelectStyles, children, }: WidgetContextProviderProps) => JSX.Element;
 export declare function useWidgetState(): WidgetContextType;
 export default WidgetContextProvider;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Routes_Input, WidgetType, ItemsType } from '../types';
+import { Routes_Input, WidgetType, ItemsType, Category } from '../types';
 import { FormActionTypes, ObjectType } from '../types/common';
 interface UseWidgetProps {
     canList?: boolean;
@@ -10,7 +10,7 @@ interface UseWidgetProps {
     }) => Promise<boolean>;
     imageBaseUrl?: string;
 }
-declare const useWidget: ({ canList, defaultLimit, routes, preConfirmDelete, imageBaseUrl }: UseWidgetProps) => {
+declare const useWidget: ({ canList, defaultLimit, routes, preConfirmDelete, imageBaseUrl, }: UseWidgetProps) => {
     list: ObjectType[];
     getWidgets: (search?: string) => Promise<void>;
     loading: boolean;
@@ -24,6 +24,7 @@ declare const useWidget: ({ canList, defaultLimit, routes, preConfirmDelete, ima
     setPageSize: (value: number) => void;
     formState: FormActionTypes | undefined;
     itemData: ObjectType | null;
+    categories: Category[];
     onChangeFormState: (state: FormActionTypes, data?: ObjectType) => Promise<void>;
     onCloseForm: () => void;
     onWidgetFormSubmit: (data: ObjectType) => Promise<void>;

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

@@ -1,4 +1,4 @@
-export type ACTION_TYPES = 'IMAGE_UPLOAD' | 'IMAGE_REMOVE' | 'CREATE' | 'LIST' | 'DELETE' | 'UPDATE' | 'ITEM' | 'PARTIAL_UPDATE' | 'WIDGET_TYPES' | 'SELECTION_TYPES' | 'COLLECTION_DATA' | 'GET_ONE';
+export type ACTION_TYPES = 'IMAGE_UPLOAD' | 'IMAGE_REMOVE' | 'CREATE' | 'LIST' | 'DELETE' | 'UPDATE' | 'ITEM' | 'PARTIAL_UPDATE' | 'WIDGET_TYPES' | 'SELECTION_TYPES' | 'COLLECTION_DATA' | 'GET_ONE' | 'CATEGORIES';
 export type API_TYPE = {
     url: string;
     method: string;
@@ -18,6 +18,10 @@ export type WidgetType = {
     value: string;
     label: string;
 };
+export type Category = {
+    value: string;
+    label: string;
+};
 export interface BaseAPIProps {
     config?: any;
     baseUrl: string;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { WidgetType, ItemsType } from './api';
+import { WidgetType, ItemsType, Category } from './api';
 import { FormActionTypes, OptionType } from './common';
 export interface ProviderContextType {
     baseUrl: string;
@@ -43,6 +43,7 @@ export interface WidgetContextType {
     onImageRemove: (id: string) => Promise<void>;
     itemsTypes: ItemsType[];
     widgetTypes: WidgetType[];
+    categories: Category[];
     getCollectionData: (collectionName: string, search?: string, callback?: (options: OptionType[]) => void, collectionItems?: string[]) => Promise<void>;
     collectionDataLoading: boolean;
     collectionData: any[];