@knovator/pagecreator-admin 1.2.9 → 1.3.1

package/src/lib/components/Page/Form/PageForm.tsx

@@ -1,194 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { useForm } from 'react-hook-form';
-import { DropResult } from 'react-beautiful-dnd';
-import { FormProps, SchemaType } from '../../../types';
-
-import { SimpleForm } from '../../common/Form';
-import DNDItemsList from '../../common/DNDItemsList';
-
-import { usePageState } from '../../../context/PageContext';
-import {
-  capitalizeFirstLetter,
-  changeToCode,
-  changeToSlug,
-  isEmpty,
-} from '../../../helper/utils';
-import { CONSTANTS } from '../../../constants/common';
-import { useProviderState } from '../../../context/ProviderContext';
-
-const PageForm = ({ formRef }: FormProps) => {
-  const { commonTranslations } = useProviderState();
-  const {
-    data,
-    formState,
-    onPageFormSubmit,
-    selectedWidgets,
-    setSelectedWidgets,
-    widgets,
-    getWidgets,
-    onChangeWidgetSequence,
-    canAdd,
-    canUpdate,
-    pageTranslations,
-  } = usePageState();
-  const {
-    register,
-    formState: { errors },
-    handleSubmit,
-    reset,
-    setValue,
-    control,
-    setError,
-    getValues,
-  } = useForm();
-  const callerRef = useRef<NodeJS.Timeout | null>(null);
-
-  useEffect(() => {
-    if (!isEmpty(data)) {
-      reset(data);
-    }
-  }, [data, reset]);
-
-  useEffect(() => {
-    if (formState === 'ADD') {
-      setSelectedWidgets([]);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [formState]);
-
-  // Form Utility Functions
-  function handleCapitalize(event: React.ChangeEvent<HTMLInputElement>) {
-    event.target.value = capitalizeFirstLetter(event.target.value);
-    return event;
-  }
-  function handleCode(event: React.ChangeEvent<HTMLInputElement>) {
-    event.target.value = changeToCode(event.target.value);
-    return event;
-  }
-  function handleSlug(event: React.ChangeEvent<HTMLInputElement>) {
-    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?: string, callback?: (data: any) => void): any {
-    let widgetItems: any[] = [];
-    if (formState === 'UPDATE') {
-      widgetItems = getValues('widgets');
-    }
-    widgetItems = Array.isArray(widgetItems)
-      ? widgetItems
-      : data?.widgets
-      ? data?.widgets
-      : [];
-    if (callerRef.current) clearTimeout(callerRef.current);
-
-    callerRef.current = setTimeout(() => {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      getWidgets(value || '', widgetItems, (widgetsData: any) => {
-        if (callback) callback(widgetsData);
-        if (formState === 'UPDATE' && data)
-          setSelectedWidgets(
-            widgetItems
-              .map((widgetId: string) =>
-                widgetsData.find((widget: any) => widget['value'] === widgetId)
-              )
-              .filter((widget: any) => widget)
-          );
-      });
-    }, 300);
-  }
-  // Widget Form Functions
-  const onDragEnd = (result: DropResult) => {
-    const { destination, source } = result;
-    if (destination) onChangeWidgetSequence(source.index, destination.index);
-  };
-
-  // Schemas
-  const pageFormSchema: SchemaType[] = [
-    {
-      label: commonTranslations.name,
-      required: true,
-      accessor: 'name',
-      type: 'text',
-      placeholder: commonTranslations.namePlaceholder,
-      onInput: handleCapitalize,
-      validations: {
-        required: commonTranslations.nameRequired,
-      },
-    },
-    {
-      label: commonTranslations.code,
-      accessor: 'code',
-      required: true,
-      type: 'text',
-      onInput: handleCode,
-      editable: false,
-      placeholder: commonTranslations.codePlaceholder,
-      validations: {
-        required: commonTranslations.codeRequired,
-      },
-    },
-    {
-      label: pageTranslations.slug,
-      accessor: 'slug',
-      required: true,
-      type: 'text',
-      onInput: handleSlug,
-      editable: false,
-      placeholder: pageTranslations.slugPlaceholder,
-      validations: {
-        required: pageTranslations.slugRequired,
-      },
-    },
-    {
-      label: pageTranslations.widgets,
-      accessor: 'widgets',
-      type: 'ReactSelect',
-      options: widgets,
-      selectedOptions: selectedWidgets,
-      isMulti: true,
-      loadOptions: loadOptions,
-      onChange: (widgets) => setSelectedWidgets(widgets),
-    },
-  ];
-
-  if (!canAdd && !canUpdate) return null;
-  return (
-    <div className="khb_form">
-      <SimpleForm
-        schema={pageFormSchema}
-        onSubmit={onPageFormSubmit}
-        ref={formRef}
-        isUpdating={formState === 'UPDATE'}
-        register={register}
-        errors={errors}
-        handleSubmit={handleSubmit}
-        setValue={setValue}
-        control={control}
-        setError={setError}
-      />
-      {/* <Form
-        schema={pageFormSchema}
-        onSubmit={onPageFormSubmit}
-        ref={formRef}
-        data={data}
-        isUpdating={formState === 'UPDATE'}
-        updates={{
-          widgets: selectedWidgets.map(
-            (widget: { value: string }) => widget.value
-          ),
-        }}
-      /> */}
-
-      <DNDItemsList onDragEnd={onDragEnd} items={selectedWidgets} />
-    </div>
-  );
-};
-
-export default PageForm;

package/src/lib/components/Page/Page/Page.tsx

@@ -1,151 +0,0 @@
-import React, { useRef } from 'react';
-import usePage from '../../../hooks/usePage';
-import PageContextProvider from '../../../context/PageContext';
-import {
-  DEFAULT_PERMISSIONS,
-  TRANSLATION_PAIRS_PAGE,
-} from '../../../constants/common';
-import { PageProps } from '../../../types';
-
-import Table from '../Table';
-import Search from '../Search';
-import PageForm from '../Form';
-import AddButton from '../AddButton';
-import Pagination from '../Pagination';
-import Drawer from '../../common/Drawer';
-import DeleteModal from '../../common/DeleteModal';
-import PageFormActions from '../PageFormActions';
-import PageFormWrapper from '../PageFormWrapper';
-import { useProviderState } from '../../../context/ProviderContext';
-
-const Page = ({
-  loader,
-  translations,
-  explicitForm = false,
-  children,
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  permissions = {},
-  preConfirmDelete,
-}: PageProps) => {
-  const { commonTranslations } = useProviderState();
-  const derivedPermissions = Object.assign(DEFAULT_PERMISSIONS, permissions);
-  const formRef = useRef<HTMLFormElement | null>(null);
-  const combinedTranslations = {
-    ...TRANSLATION_PAIRS_PAGE,
-    ...translations,
-  };
-  const {
-    list,
-    widgets,
-    loading,
-    totalPages,
-    totalRecords,
-    currentPage,
-    pageSize,
-    itemData,
-    searchText,
-    changeSearch,
-    setCurrentPage,
-    formState,
-    getWidgets,
-    onChangeFormState,
-    onPageFormSubmit,
-    onCloseForm,
-    selectedWidgets,
-    setSelectedWidgets,
-    onCofirmDeletePage,
-    onChangeWidgetSequence,
-    getPages,
-  } = usePage({
-    defaultLimit: 10,
-    preConfirmDelete,
-    canList: derivedPermissions.list,
-  });
-
-  return (
-    <PageContextProvider
-      loader={loader}
-      list={list}
-      searchText={searchText}
-      changeSearch={changeSearch}
-      widgets={widgets}
-      data={itemData}
-      loading={loading}
-      totalPages={totalPages}
-      totalRecords={totalRecords}
-      currentPage={currentPage}
-      onChangeFormState={onChangeFormState}
-      pageSize={pageSize}
-      getWidgets={getWidgets}
-      setCurrentPage={setCurrentPage}
-      onPageFormSubmit={onPageFormSubmit}
-      selectedWidgets={selectedWidgets}
-      setSelectedWidgets={setSelectedWidgets}
-      onChangeWidgetSequence={onChangeWidgetSequence}
-      getPages={getPages}
-      formState={formState}
-      closeForm={onCloseForm}
-      // permissions
-      canAdd={derivedPermissions.add}
-      canDelete={derivedPermissions.delete}
-      canUpdate={derivedPermissions.update}
-      canList={derivedPermissions.list}
-      pageTranslations={translations}
-    >
-      {children ? (
-        children
-      ) : (
-        <>
-          <AddButton />
-          <Search />
-          <div className="khb_table-wrapper">
-            <Table />
-            <Pagination />
-          </div>
-        </>
-      )}
-      {!explicitForm && (
-        <Drawer
-          open={formState === 'ADD' || formState === 'UPDATE'}
-          onClose={onCloseForm}
-          title={
-            formState === 'ADD'
-              ? combinedTranslations.addPage
-              : formState === 'UPDATE'
-              ? combinedTranslations.updatePage
-              : ''
-          }
-          footerContent={<PageFormActions formRef={formRef} />}
-        >
-          <PageForm formRef={formRef} />
-        </Drawer>
-      )}
-      {itemData && (
-        <DeleteModal
-          formState={formState}
-          itemData={itemData}
-          onClose={onCloseForm}
-          onConfirmDelete={onCofirmDeletePage}
-          confirmationRequired={commonTranslations.confirmationRequired}
-          confirm={commonTranslations.confirm}
-          lossOfData={commonTranslations.lossOfData}
-          permanentlyDelete={commonTranslations.permanentlyDelete}
-          pleaseType={commonTranslations.pleaseType}
-          toProceedOrCancel={commonTranslations.toProceedOrCancel}
-          typeHerePlaceholder={commonTranslations.typeHerePlaceholder}
-        />
-      )}
-    </PageContextProvider>
-  );
-};
-
-Page.Table = Table;
-Page.Search = Search;
-Page.Form = PageForm;
-Page.AddButton = AddButton;
-Page.Pagination = Pagination;
-Page.FormActions = PageFormActions;
-Page.FormWrapper = PageFormWrapper;
-
-export default Page;

package/src/lib/components/Page/PageFormActions/PageFormActions.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import FormActions from '../../common/FormActions';
-import { FormActionWrapperProps } from '../../../types';
-import { CALLBACK_CODES } from '../../../constants/common';
-import { usePageState } from '../../../context/PageContext';
-import { useProviderState } from '../../../context/ProviderContext';
-
-const PageFormActions = ({ formRef }: FormActionWrapperProps) => {
-  const { onError, commonTranslations } = useProviderState();
-  const { closeForm, loading, canAdd, canUpdate, formState } = usePageState();
-  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 'ref' 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 PageFormActions;

package/src/lib/components/Page/PageFormWrapper/PageFormWrapper.tsx

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

package/src/lib/components/Page/Pagination/PagePagination.tsx

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

package/src/lib/components/Page/Search/PageSearch.tsx

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

package/src/lib/components/Page/Table/PageTable.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import Table from '../../common/Table';
-import { usePageState } from '../../../context/PageContext';
-import { useProviderState } from '../../../context/ProviderContext';
-import { CombineObjectType, DerivedTableProps } from '../../../types';
-
-const PageTable = ({ extraActions, extraColumns }: DerivedTableProps) => {
-  const { commonTranslations } = useProviderState();
-  const { list, onChangeFormState, loading, loader, canUpdate, canDelete } =
-    usePageState();
-
-  const onUpdateClick = (item: CombineObjectType) =>
-    onChangeFormState('UPDATE', item);
-  const onDeleteClick = (item: CombineObjectType) =>
-    onChangeFormState('DELETE', item);
-
-  return (
-    <Table
-      data={list}
-      loader={loader}
-      loading={loading}
-      dataKeys={[
-        { label: commonTranslations.name, dataKey: 'name', highlight: true },
-        { label: commonTranslations.code, dataKey: 'code' },
-      ]}
-      actionsLabel={commonTranslations.actions}
-      actions={{
-        edit: canUpdate ? onUpdateClick : undefined,
-        delete: canDelete ? onDeleteClick : undefined,
-      }}
-      extraColumns={extraColumns}
-      extraActions={extraActions}
-    />
-  );
-};
-export default PageTable;

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

@@ -1,16 +0,0 @@
-import React from "react";
-import Button from "../../common/Button";
-import { useWidgetState } from "../../../context/WidgetContext";
-import { useProviderState } from '../../../context/ProviderContext';
-
-const AddButton = () => {
-  const { commonTranslations } = useProviderState();
-  const { onChangeFormState, canAdd } = useWidgetState();
-  return (
-    <Button disabled={!canAdd} onClick={() => onChangeFormState('ADD')}>
-      {commonTranslations.add}
-    </Button>
-  );
-};
-
-export default AddButton;