@knovator/pagecreator-admin 1.2.6 → 1.2.8

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

@@ -0,0 +1,26 @@
+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/Pagination/{index.d.ts → index.ts}

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

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

@@ -0,0 +1,32 @@
+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/Search/{index.d.ts → index.tsx}

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

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

@@ -0,0 +1,36 @@
+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/Page/Table/{index.d.ts → index.ts}

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

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

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

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

@@ -0,0 +1,16 @@
+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;

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

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

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

@@ -0,0 +1,354 @@
+import React, { useEffect, useState } from 'react';
+import { Controller, useFieldArray } from 'react-hook-form';
+
+import Input from '../../common/Input';
+import Button from '../../common/Button';
+import Accordian from '../../common/Accordian';
+import ImageUpload from '../../common/ImageUpload';
+import { ItemsAccordianProps } from '../../../types';
+import ConfirmPopover from '../../common/ConfirmPopover';
+import { useWidgetState } from '../../../context/WidgetContext';
+import { useProviderState } from '../../../context/ProviderContext';
+
+interface ImageInputProps {
+  label: string;
+  control: any;
+  name: string;
+  error: any;
+  baseUrl: string;
+  imageMaxSize: number;
+  onImageUpload: (file: File) => Promise<void | {
+    fileUrl: string;
+    fileId: string;
+    fileUri: string;
+  }>;
+  text: string | JSX.Element;
+  onImageRemove: (fileId: string) => Promise<void>;
+  setError: (name: string, error: any) => void;
+  clearError: (name: string) => void;
+}
+
+const ImageInput = ({
+  label,
+  control,
+  name,
+  text,
+  error,
+  baseUrl,
+  setError,
+  clearError,
+  onImageRemove,
+  imageMaxSize,
+  onImageUpload,
+}: ImageInputProps) => {
+  return (
+    <div className="kms_input-wrapper">
+      <label className="kms_input-label">{label}</label>
+      <Controller
+        control={control}
+        name={name}
+        render={({ field }) => (
+          <ImageUpload
+            imgId={field.value}
+            clearError={() => clearError(name)}
+            maxSize={imageMaxSize}
+            onError={(msg) =>
+              setError(name, {
+                type: 'custom',
+                message: msg,
+              })
+            }
+            error={error}
+            setImgId={(value) => {
+              field.onChange(value);
+            }}
+            baseUrl={baseUrl}
+            text={text}
+            onImageUpload={onImageUpload}
+            onImageRemove={onImageRemove}
+            className="khb_img-upload-wrapper-3"
+          />
+        )}
+      />
+    </div>
+  );
+};
+
+const ItemsAccordian = ({
+  show,
+  title,
+  id,
+  collapseId,
+  toggleShow,
+  loading,
+  name,
+  errors,
+  control,
+  register,
+  setError,
+  itemType,
+  languages,
+  clearError,
+  addText = 'Add',
+  deleteText = 'Delete',
+}: ItemsAccordianProps) => {
+  const { baseUrl, commonTranslations } = useProviderState();
+  const {
+    onImageUpload,
+    onImageRemove,
+    imageBaseUrl,
+    imageMaxSize,
+    widgetTranslations,
+  } = useWidgetState();
+  const [itemsShow, setItemsShow] = useState<boolean[]>([]);
+  const {
+    fields: items,
+    append: appendItem,
+    remove: removeItem,
+  } = useFieldArray({ name, control });
+
+  const onItemsToggleClick = (index: number, status?: boolean) => {
+    const newItemsShow: boolean[] = [...itemsShow];
+    const newStatus = errors?.[name]?.[index]
+      ? true
+      : typeof status === 'undefined'
+      ? !newItemsShow[index]
+      : status;
+    newItemsShow[index] = newStatus;
+    setItemsShow(newItemsShow);
+  };
+
+  useEffect(() => {
+    if (errors && errors?.[name]?.length > 0) {
+      errors?.[name]?.forEach((errorItem: any, index: number) => {
+        if (errorItem) onItemsToggleClick(index, true);
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [errors, name, errors?.[name]]);
+
+  const addTab = (index: number) => {
+    appendItem({
+      altText: '',
+      link: '',
+      img: '',
+      srcset: [],
+      itemType,
+      sequence: index,
+    });
+  };
+
+  return (
+    <Accordian
+      open={show}
+      onToggle={() => toggleShow(!show)}
+      title={title}
+      collapseId={collapseId}
+      id={id}
+      footerContent={
+        <Button
+          size="sm"
+          disabled={loading}
+          onClick={() => addTab(items.length)}
+        >
+          {addText}
+        </Button>
+      }
+    >
+      <div className="khb_item-items">
+        {items?.map((field, index) => (
+          <Accordian
+            key={index}
+            open={itemsShow[index]}
+            onToggle={() => onItemsToggleClick(index)}
+            title={`Item ${index + 1}`}
+            collapseId={`${id}-item-content-${index}`}
+            id={`${id}-item-${index}`}
+            footerContent={
+              <ConfirmPopover
+                onConfirm={() => removeItem(index)}
+                title={widgetTranslations.deleteTitle}
+                confirmText={commonTranslations.yes}
+                cancelText={commonTranslations.cancel}
+              >
+                <Button type="danger" size="sm" disabled={loading}>
+                  {deleteText}
+                </Button>
+              </ConfirmPopover>
+            }
+          >
+            <div className="khb-form-items">
+              {Array.isArray(languages) && languages.length > 0 ? (
+                <>
+                  {languages.map((lang) => (
+                    <Input
+                      rest={register(`${name}.${index}.titles.${lang.code}`)}
+                      label={commonTranslations.title + ` (${lang.name})`}
+                      error={
+                        errors[name]?.[index]?.['titles']?.[lang.code]
+                          ? errors[name]?.[index]?.['titles']?.[
+                              lang.code
+                            ]?.message?.toString() + ` (${lang.name})`
+                          : ''
+                      }
+                      type="text"
+                      className="w-full p-2"
+                      placeholder={
+                        commonTranslations.titlePlaceholder + ` (${lang.name})`
+                      }
+                     
+                    />
+                  ))}
+                </>
+              ) : (
+                <Input
+                  rest={register(`${name}.${index}.title`)}
+                  label={commonTranslations.title}
+                  error={errors[name]?.[index]?.['title']?.message?.toString()}
+                  type="text"
+                  className="w-full p-2"
+                  placeholder={commonTranslations.titlePlaceholder}
+                
+                />
+              )}
+              {Array.isArray(languages) && languages.length > 0 ? (
+                <>
+                  {languages.map((lang) => (
+                    <Input
+                      rest={register(`${name}.${index}.subtitles.${lang.code}`)}
+                      label={widgetTranslations.subtitle + ` (${lang.name})`}
+                      type="text"
+                      className="w-full p-2"
+                      placeholder={
+                        widgetTranslations.subTitlePlaceholder +
+                        ` (${lang.name})`
+                      }
+                    />
+                  ))}
+                </>
+              ) : (
+                <Input
+                  rest={register(`${name}.${index}.subtitle`)}
+                  label={widgetTranslations.subtitle}
+                  type="text"
+                  className="w-full p-2"
+                  placeholder={widgetTranslations.subTitlePlaceholder}
+                />
+              )}
+              {Array.isArray(languages) && languages.length > 0 ? (
+                <>
+                  {languages.map((lang) => (
+                    <Input
+                      rest={register(`${name}.${index}.altTexts.${lang.code}`)}
+                      label={widgetTranslations.altText + ` (${lang.name})`}
+                      type="text"
+                      className="w-full p-2"
+                      placeholder={
+                        widgetTranslations.altTextPlaceholder +
+                        ` (${lang.name})`
+                      }
+                    />
+                  ))}
+                </>
+              ) : (
+                <Input
+                  rest={register(`${name}.${index}.altText`)}
+                  label={widgetTranslations.altText}
+                  type="text"
+                  className="w-full p-2"
+                  placeholder={widgetTranslations.altTextPlaceholder}
+                />
+              )}
+              <Input
+                rest={register(`${name}.${index}.link`)}
+                label={widgetTranslations.link}
+                type="url"
+                className="w-full p-2"
+                placeholder={widgetTranslations.linkPlaceholder}
+              />
+              <Input.SrcSet
+                control={control}
+                register={register}
+                label={widgetTranslations.srcset}
+                name={`${name}.${index}.srcset`}
+                errors={errors[name]?.[index]?.['srcset']}
+                screenSizeRequired={widgetTranslations.screenSizeRequired}
+                heightRequired={widgetTranslations.heightRequired}
+                minHeight={widgetTranslations.minHeight}
+                minScreenSize={widgetTranslations.minScreenSize}
+                minWidth={widgetTranslations.minWidth}
+                widthRequired={widgetTranslations.widthRequired}
+              />
+              {Array.isArray(languages) && languages.length > 0 ? (
+                <>
+                  {languages.map((lang) => (
+                    <ImageInput
+                      key={lang.code}
+                      label={widgetTranslations.image + ` (${lang.name})`}
+                      control={control}
+                      name={`${name}.${index}.imgs.${lang.code}`}
+                      error={errors[name]?.[index]?.['imgs']?.[
+                        lang.code
+                      ]?.message?.toString()}
+                      baseUrl={imageBaseUrl ? imageBaseUrl : baseUrl}
+                      setError={setError}
+                      clearError={clearError}
+                      onImageRemove={onImageRemove}
+                      imageMaxSize={imageMaxSize}
+                      onImageUpload={onImageUpload}
+                      text={
+                        <>
+                          <div className="khb_img-text-wrapper">
+                            <div className="khb_img-text-label">
+                              <span>{widgetTranslations.uploadFile}</span>
+                            </div>
+                            <p className="khb_img-text-1">
+                              {widgetTranslations.dragDrop}
+                            </p>
+                          </div>
+                          <p className="khb_img-text-2">
+                            {widgetTranslations.allowedFormat}
+                          </p>
+                        </>
+                      }
+                    />
+                  ))}
+                </>
+              ) : (
+                <ImageInput
+                  label={widgetTranslations.image}
+                  control={control}
+                  name={`${name}.${index}.img`}
+                  error={errors[name]?.[index]?.['img']?.message?.toString()}
+                  baseUrl={imageBaseUrl ? imageBaseUrl : baseUrl}
+                  setError={setError}
+                  clearError={clearError}
+                  onImageRemove={onImageRemove}
+                  imageMaxSize={imageMaxSize}
+                  onImageUpload={onImageUpload}
+                  text={
+                    <>
+                      <div className="khb_img-text-wrapper">
+                        <div className="khb_img-text-label">
+                          <span>{widgetTranslations.uploadFile}</span>
+                        </div>
+                        <p className="khb_img-text-1">
+                          {widgetTranslations.dragDrop}
+                        </p>
+                      </div>
+                      <p className="khb_img-text-2">
+                        {widgetTranslations.allowedFormat}
+                      </p>
+                    </>
+                  }
+                />
+              )}
+            </div>
+          </Accordian>
+        ))}
+      </div>
+    </Accordian>
+  );
+};
+
+export default ItemsAccordian;

package/src/lib/components/Widget/Form/Tabs/TabItem.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import Trash from '../../../../icons/trash';
+import { TabItemProps } from '../../../../types';
+import ConfirmPopover from '../../../common/ConfirmPopover';
+
+const TabItem = ({
+  showDelete,
+  isDisabled,
+  deleteTitle,
+  onRemoveTab,
+  register,
+  error,
+  noButtonText,
+  yesButtonText,
+}: TabItemProps) => {
+  return (
+    <>
+      <input
+        type="text"
+        className="khb_tabs-input"
+        autoFocus
+        style={{ display: 'block' }}
+        disabled={isDisabled}
+        {...(register || {})}
+      />
+      {error && <p className="khb_input-error ">{error}</p>}
+      {showDelete ? (
+        <ConfirmPopover
+          onConfirm={onRemoveTab}
+          title={deleteTitle}
+          confirmText={yesButtonText}
+          cancelText={noButtonText}
+        >
+          <Trash className="khb_tabs-remove" />
+        </ConfirmPopover>
+      ) : (
+        ''
+      )}
+    </>
+  );
+};
+
+export default TabItem;