@knovator/pagecreator-admin 1.2.2 → 1.2.3

package/src/lib/components/Widget/Form/{index.d.ts → index.ts}

@@ -1,2 +1,3 @@
 import MasterForm from "./WidgetForm";
+
 export default MasterForm;

package/src/lib/components/Widget/Pagination/WidgetPagination.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Pagination from '../../common/Pagination';
+import { useWidgetState } from '../../../context/WidgetContext';
+import { useProviderState } from '../../../context/ProviderContext';
+
+const WidgetPagination = () => {
+  const { commonTranslations } = useProviderState();
+  const { totalPages, totalRecords, currentPage, pageSize, setCurrentPage } =
+    useWidgetState();
+  return (
+    <Pagination
+      ofText={commonTranslations.of}
+      pageText={commonTranslations.page}
+      showingText={commonTranslations.showing}
+      nextContent={commonTranslations.next}
+      previousContent={commonTranslations.previous}
+      totalPages={totalPages}
+      totalRecords={totalRecords}
+      currentPage={currentPage}
+      pageSize={pageSize}
+      setCurrentPage={setCurrentPage}
+    />
+  );
+};
+
+export default WidgetPagination;

package/src/lib/components/Widget/Pagination/{index.d.ts → index.ts}

@@ -1,2 +1,3 @@
 import WidgetPagination from "./WidgetPagination";
+
 export default WidgetPagination;

package/src/lib/components/Widget/Search/WidgetSearch.tsx

@@ -0,0 +1,32 @@
+import React, { useRef, useState } from 'react';
+import Input from '../../common/Input';
+import { useWidgetState } from '../../../context/WidgetContext';
+
+const WidgetSearch = () => {
+  const { changeSearch, widgetTranslations, canList, setCurrentPage } =
+    useWidgetState();
+  const callerRef = useRef<NodeJS.Timeout | null>(null);
+  const [searchVal, setSearchVal] = useState<string>();
+
+  const onChangeSearch = (str: string) => {
+    setSearchVal(str);
+    changeSearch(str);
+    if (callerRef.current) clearTimeout(callerRef.current);
+
+    callerRef.current = setTimeout(() => {
+      setCurrentPage(1);
+    }, 300);
+  };
+
+  return (
+    <Input
+      type="search"
+      value={searchVal}
+      disabled={!canList}
+      onChange={(e) => onChangeSearch(e.target.value)}
+      placeholder={widgetTranslations.searchPlaceholder}
+    />
+  );
+};
+
+export default WidgetSearch;

package/src/lib/components/Widget/Search/{index.d.ts → index.tsx}

@@ -1,2 +1,3 @@
 import WidgetSearch from "./WidgetSearch";
+
 export default WidgetSearch;

package/src/lib/components/Widget/Table/WidgetTable.tsx

@@ -0,0 +1,70 @@
+import React, { useCallback } from 'react';
+import Table from '../../common/Table';
+import ToggleWidget from '../../common/Toggle';
+import { useWidgetState } from '../../../context/WidgetContext';
+import {
+  CombineObjectType,
+  DerivedTableProps,
+  ObjectType,
+  ValuesType,
+} from '../../../types';
+import { useProviderState } from '../../../context/ProviderContext';
+
+const WidgetTable = ({ extraActions, extraColumns }: DerivedTableProps) => {
+  const { commonTranslations, switchClass } = useProviderState();
+  const {
+    list,
+    canUpdate,
+    canDelete,
+    canPartialUpdate,
+    onChangeFormState,
+    onPartialUpdateWidget,
+    loading,
+    loader,
+  } = useWidgetState();
+  const updateClosure = useCallback(
+    (item: ObjectType, key: string, value: ValuesType) => {
+      onPartialUpdateWidget({ [key]: value }, item['_id']);
+    },
+    [onPartialUpdateWidget]
+  );
+  const onUpdateClick = (item: CombineObjectType) =>
+    onChangeFormState('UPDATE', item);
+  const onDeleteClick = (item: CombineObjectType) =>
+    onChangeFormState('DELETE', item);
+
+  const dataKeys: any[] = [
+    { label: commonTranslations.name, dataKey: 'name', highlight: true },
+    { label: commonTranslations.code, dataKey: 'code' },
+  ];
+  if (canPartialUpdate)
+    dataKeys.push({
+      label: commonTranslations.active,
+      dataKey: 'isActive',
+      Cell: ({ row }: any) =>
+        canPartialUpdate ? (
+          <ToggleWidget
+            switchClass={switchClass}
+            isChecked={row?.isActive}
+            onChange={(status) => updateClosure(row, 'isActive', status)}
+          />
+        ) : null,
+    });
+
+  return (
+    <Table
+      data={list}
+      loader={loader}
+      loading={loading}
+      dataKeys={dataKeys}
+      actionsLabel={commonTranslations.actions}
+      extraColumns={extraColumns}
+      extraActions={extraActions}
+      actions={{
+        edit: canUpdate ? onUpdateClick : false,
+        delete: canDelete ? onDeleteClick : false,
+      }}
+    />
+  );
+};
+export default WidgetTable;

package/src/lib/components/Widget/Table/{index.d.ts → index.ts}

@@ -1,2 +1,3 @@
 import WidgetTable from "./WidgetTable";
+
 export default WidgetTable;

package/src/lib/components/Widget/Widget/Widget.tsx

@@ -0,0 +1,173 @@
+import React, { useRef } from 'react';
+import useWidget from '../../../hooks/useWidget';
+import WidgetContextProvider from '../../../context/WidgetContext';
+import {
+  TRANSLATION_PAIRS_WIDGET,
+  DEFAULT_PERMISSIONS,
+} from '../../../constants/common';
+import { WidgetProps } from '../../../types';
+
+import Table from '../Table';
+import WidgetForm from '../Form';
+import AddButton from '../AddButton';
+import Pagination from '../Pagination';
+import WidgetSearch from '../Search';
+import Drawer from '../../common/Drawer';
+import DeleteModal from '../../common/DeleteModal';
+import WidgetFormActions from '../WidgetFormActions';
+import WiddgetFormWrapper from '../WidgetFormWrapper';
+import { useProviderState } from '../../../context/ProviderContext';
+
+const Widget = ({
+  routes,
+  loader,
+  explicitForm = false,
+  imageBaseUrl,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  permissions = {},
+  preConfirmDelete,
+  formatListItem,
+  formatOptionLabel,
+  imageMaxSize,
+  translations,
+  children,
+}: WidgetProps) => {
+  const { commonTranslations } = useProviderState();
+  const derivedPermissions = Object.assign(DEFAULT_PERMISSIONS, permissions);
+  const widgetFormRef = useRef<HTMLFormElement | null>(null);
+  const derivedT = {
+    ...TRANSLATION_PAIRS_WIDGET,
+    ...(translations || {}),
+  };
+  const {
+    list,
+    loading,
+    searchText,
+    changeSearch,
+    onChangeFormState,
+    formState,
+    onCloseForm,
+    onWidgetFormSubmit,
+    itemData,
+    getWidgets,
+    onCofirmDeleteWidget,
+    onImageRemove,
+    onImageUpload,
+    onPartialUpdateWidget,
+    itemsTypes,
+    widgetTypes,
+    getCollectionData,
+    collectionData,
+    collectionDataLoading,
+    // Pagination
+    totalPages,
+    totalRecords,
+    currentPage,
+    pageSize,
+    languages,
+    setCurrentPage,
+  } = useWidget({
+    canList: derivedPermissions.list,
+    routes,
+    defaultLimit: 10,
+    preConfirmDelete,
+    imageBaseUrl,
+  });
+  return (
+    <WidgetContextProvider
+      loading={loading}
+      list={list}
+      languages={languages}
+      imageBaseUrl={imageBaseUrl}
+      onChangeFormState={onChangeFormState}
+      searchText={searchText}
+      changeSearch={changeSearch}
+      loader={loader}
+      onWidgetFormSubmit={onWidgetFormSubmit}
+      data={itemData}
+      getWidgets={getWidgets}
+      onImageRemove={onImageRemove}
+      onImageUpload={onImageUpload}
+      onPartialUpdateWidget={onPartialUpdateWidget}
+      itemsTypes={itemsTypes}
+      widgetTypes={widgetTypes}
+      getCollectionData={getCollectionData}
+      collectionData={collectionData}
+      collectionDataLoading={collectionDataLoading}
+      formatListItem={formatListItem}
+      formatOptionLabel={formatOptionLabel}
+      // Pagination
+      totalPages={totalPages}
+      totalRecords={totalRecords}
+      currentPage={currentPage}
+      pageSize={pageSize}
+      setCurrentPage={setCurrentPage}
+      // Permissions
+      canAdd={derivedPermissions.add}
+      canDelete={derivedPermissions.delete}
+      canList={derivedPermissions.list}
+      canUpdate={derivedPermissions.update}
+      canPartialUpdate={derivedPermissions.partialUpdate}
+      formState={formState}
+      closeForm={onCloseForm}
+      imageMaxSize={imageMaxSize}
+      widgetTranslations={translations}
+    >
+      {children ? (
+        children
+      ) : (
+        <>
+          <AddButton />
+          <WidgetSearch />
+          <div className="khb_table-wrapper">
+            <Table />
+            <Pagination />
+          </div>
+        </>
+      )}
+
+      {!explicitForm && (
+        <Drawer
+          open={formState === 'ADD' || formState === 'UPDATE'}
+          onClose={onCloseForm}
+          title={
+            formState === 'ADD'
+              ? derivedT.addWidgetTitle
+              : formState === 'UPDATE'
+              ? derivedT.updateWidgetTitle
+              : ''
+          }
+          footerContent={<WidgetFormActions formRef={widgetFormRef} />}
+        >
+          <WidgetForm formRef={widgetFormRef} />
+        </Drawer>
+      )}
+      {itemData && (
+        <DeleteModal
+          formState={formState}
+          itemData={itemData}
+          onClose={onCloseForm}
+          onConfirmDelete={onCofirmDeleteWidget}
+          confirmationRequired={commonTranslations.confirmationRequired}
+          confirm={commonTranslations.confirm}
+          lossOfData={commonTranslations.lossOfData}
+          permanentlyDelete={commonTranslations.permanentlyDelete}
+          pleaseType={commonTranslations.pleaseType}
+          toProceedOrCancel={commonTranslations.toProceedOrCancel}
+          typeHerePlaceholder={commonTranslations.typeHerePlaceholder}
+        />
+      )}
+    </WidgetContextProvider>
+  );
+};
+
+Widget.Table = Table;
+Widget.Form = WidgetForm;
+Widget.AddButton = AddButton;
+Widget.Search = WidgetSearch;
+Widget.Pagination = Pagination;
+Widget.FormWrapper = WiddgetFormWrapper;
+Widget.FormActions = WidgetFormActions;
+
+export default Widget;

package/src/lib/components/Widget/Widget/{index.d.ts → index.ts}

@@ -1,2 +1,3 @@
 import Widget from "./Widget";
+
 export default Widget;

package/src/lib/components/Widget/WidgetFormActions/WidgetFormActions.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import FormActions from '../../common/FormActions';
+import { FormActionWrapperProps } from '../../../types';
+import { CALLBACK_CODES } from '../../../constants/common';
+import { useWidgetState } from '../../../context/WidgetContext';
+import { useProviderState } from '../../../context/ProviderContext';
+
+const WidgetFormActions = ({ formRef }: FormActionWrapperProps) => {
+  const { onError, commonTranslations } = useProviderState();
+  const { closeForm, loading, canAdd, canUpdate, formState } = useWidgetState();
+  const onSubmitClick = (
+    e?: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    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 'formRef' prop to the form!`
+      );
+    }
+    // formRef is provided
+    e?.preventDefault();
+    formRef.current?.dispatchEvent(
+      new Event('submit', { cancelable: true, bubbles: true })
+    );
+  };
+
+  if (!canAdd && !canUpdate) return null;
+  return (
+    <FormActions
+      loading={loading}
+      primaryLabel={
+        formState === 'ADD'
+          ? commonTranslations.create
+          : commonTranslations.update
+      }
+      onPrimaryButtonClick={onSubmitClick}
+      onSecondaryButtonClick={closeForm}
+      secondaryLabel={commonTranslations.cancel}
+    />
+  );
+};
+
+export default WidgetFormActions;

package/src/lib/components/Widget/WidgetFormActions/{index.d.ts → index.ts}

@@ -1,2 +1,3 @@
 import WidgetFormActions from './WidgetFormActions';
+
 export default WidgetFormActions;

package/src/lib/components/Widget/WidgetFormWrapper/WidgetFormWrapper.tsx

@@ -0,0 +1,16 @@
+import { FormWrapperProps } from '../../../types';
+import { useWidgetState } from '../../../context/WidgetContext';
+
+const WiddgetFormWrapper = ({ children }: FormWrapperProps) => {
+  const { formState, closeForm } = useWidgetState();
+
+  return typeof children === 'function'
+    ? children({
+        formState,
+        onClose: closeForm,
+        open: formState === 'ADD' || formState === 'UPDATE',
+      })
+    : null;
+};
+
+export default WiddgetFormWrapper;

package/src/lib/components/Widget/WidgetFormWrapper/{index.d.ts → index.ts}

@@ -1,2 +1,3 @@
 import WiddgetFormWrapper from './WidgetFormWrapper';
+
 export default WiddgetFormWrapper;

package/src/lib/components/Widget/{index.d.ts → index.tsx}

@@ -1,2 +1,3 @@
 import Widget from "./Widget";
+
 export { Widget };

package/src/lib/components/common/Accordian/Accordian.tsx

@@ -0,0 +1,56 @@
+import classNames from 'classnames';
+import React from 'react';
+import ChevronDown from '../../../icons/chevronDown';
+import ChevronUp from '../../../icons/chevronUp';
+
+interface AccordianProps {
+  id?: string;
+  collapseId?: string;
+  className?: string;
+  children?: React.ReactNode;
+  open?: boolean;
+  onToggle?: (status: boolean) => void;
+  title?: string;
+  footerContent?: React.ReactNode;
+}
+
+const Accordian = ({
+  id,
+  className,
+  children,
+  open,
+  onToggle,
+  title,
+  collapseId,
+  footerContent,
+}: AccordianProps) => {
+  return (
+    <div>
+      <h2 id={id}>
+        <button
+          type="button"
+          className="khb_accordian-header"
+          data-accordion-target={`#${collapseId}`}
+          aria-expanded="true"
+          aria-controls={collapseId}
+          onClick={() => onToggle && onToggle(!open)}
+        >
+          <span>{title}</span>
+          {open ? <ChevronUp /> : <ChevronDown />}
+        </button>
+      </h2>
+      <div
+        id={collapseId}
+        className={classNames('khb_accordian-body', { hidden: !open })}
+        aria-labelledby={id}
+      >
+        <div className="khb_accordian-content">{children}</div>
+        {footerContent && (
+          <div className="khb_accordian-footer">{footerContent}</div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Accordian;

package/src/lib/components/common/Accordian/{index.d.ts → index.ts}

@@ -1,2 +1,3 @@
 import Accordian from "./Accordian";
+
 export default Accordian;

package/src/lib/components/common/Button/Button.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import classNames from 'classnames';
+import { ButtonProps } from '../../../types';
+
+const Button = ({
+  type = 'primary',
+  size = 'base',
+  onClick,
+  className,
+  children,
+  disabled,
+  loading,
+}: ButtonProps) => {
+  return (
+    <button
+      className={classNames(
+        'khb_btn',
+        `khb_btn-${type}`,
+        `khb_btn-${size}`,
+        className
+      )}
+      onClick={onClick}
+      disabled={disabled || loading}
+    >
+      {loading && (
+        <svg
+          className="khb_btn-loader"
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="13"
+          viewBox="0 0 12 13"
+        >
+          <path
+            // style={{ fill: kind }}
+            d="M5.5,12a1,1,0,1,1,1,1A1,1,0,0,1,5.5,12ZM1.75,10.5A1.25,1.25,0,1,1,3,11.75,1.25,1.25,0,0,1,1.75,10.5Zm7.531.031a.75.75,0,1,1,.75.75A.75.75,0,0,1,9.281,10.531ZM0,7A1.5,1.5,0,1,1,1.5,8.5,1.5,1.5,0,0,1,0,7ZM11,7a.5.5,0,1,1,.5.5A.5.5,0,0,1,11,7ZM1.875,4.637a1.62,1.62,0,0,1,0-2.275,1.582,1.582,0,0,1,2.253,0,1.62,1.62,0,0,1,0,2.275,1.582,1.582,0,0,1-2.253,0ZM4.5,2a2,2,0,1,1,2,2A2,2,0,0,1,4.5,2ZM9.75,3.5a.25.25,0,1,1,.25.25A.25.25,0,0,1,9.75,3.5Z"
+          />
+        </svg>
+      )}
+
+      {children}
+    </button>
+  );
+};
+
+export default Button;

package/src/lib/components/common/Button/{index.d.ts → index.ts}

@@ -1,2 +1,3 @@
 import Button from "./Button";
+
 export default Button;

package/src/lib/components/common/ConfirmPopover/ConfirmPopover.tsx

@@ -0,0 +1,47 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable react/no-unstable-nested-components */
+import React, { useState } from 'react';
+import { Popover } from 'react-tiny-popover';
+import { ConfirmPopoverProps } from '../../../types';
+import Button from '../Button';
+
+const ConfirmPopOver = ({
+  children,
+  onConfirm,
+  title,
+  confirmText = 'Yes',
+  cancelText = 'No',
+}: ConfirmPopoverProps) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const onConfirmClick = () => {
+    setIsPopoverOpen(false);
+    onConfirm();
+  };
+
+  return (
+    <Popover
+      containerClassName="khb_confirm-popover"
+      isOpen={isPopoverOpen}
+      padding={10}
+      onClickOutside={() => setIsPopoverOpen(false)}
+      content={() => (
+        <div className="khb_confirm-popover-content">
+          <div className="khb_confirm-popover-title">{title}</div>
+          <div className="khb_confirm-popover-footer">
+            <Button type="secondary" onClick={() => setIsPopoverOpen(false)}>
+              {cancelText}
+            </Button>
+            <Button type="primary" onClick={onConfirmClick}>
+              {confirmText}
+            </Button>
+          </div>
+        </div>
+      )}
+    >
+      <div onClick={() => setIsPopoverOpen(true)}>{children}</div>
+    </Popover>
+  );
+};
+export default ConfirmPopOver;

package/src/lib/components/common/ConfirmPopover/{index.d.ts → index.ts}

@@ -1,2 +1,3 @@
 import ConfirmPopover from './ConfirmPopover';
+
 export default ConfirmPopover;

package/src/lib/components/common/DNDItemsList/DNDItemsList.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { DNDItemsListProps } from '../../../types';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+
+const DNDItemsList = ({
+  onDragEnd,
+  items,
+  formatItem,
+  listCode,
+}: DNDItemsListProps) => {
+  return (
+    <DragDropContext onDragEnd={onDragEnd}>
+      <Droppable droppableId="droppable">
+        {(droppableProvided) => (
+          <div
+            className="khb_DND-items"
+            ref={droppableProvided.innerRef}
+            {...droppableProvided.droppableProps}
+          >
+            {items
+              ? items.map((item, index) => (
+                  <Draggable
+                    key={item.value}
+                    draggableId={item.value}
+                    index={index}
+                  >
+                    {(provided) => (
+                      <div
+                        className="khb_DND-item"
+                        key={item.value}
+                        ref={provided.innerRef}
+                        {...provided.draggableProps}
+                        {...provided.dragHandleProps}
+                      >
+                        {typeof formatItem === 'function' && listCode ? (
+                          formatItem(listCode, item)
+                        ) : (
+                          <p className="khb_DND-item-text">{item.label}</p>
+                        )}
+                      </div>
+                    )}
+                  </Draggable>
+                ))
+              : null}
+            {droppableProvided.placeholder}
+          </div>
+        )}
+      </Droppable>
+    </DragDropContext>
+  );
+};
+
+export default DNDItemsList;

package/src/lib/components/common/DNDItemsList/{index.d.ts → index.ts}

@@ -1,2 +1,3 @@
 import DNDItemsList from "./DNDItemsList";
+
 export default DNDItemsList;