@griddo/ax 11.0.29-rc.0 → 11.0.30-rc.0

package/src/modules/Forms/FormCategoriesList/index.tsx

@@ -0,0 +1,245 @@
+import React, { useEffect, useState, useRef } from "react";
+import { connect } from "react-redux";
+import { useParams } from "react-router-dom";
+import { DragDropContext, Droppable, Draggable, DropResult, BeforeCapture } from "react-beautiful-dnd";
+
+import { formsActions } from "@ax/containers/Forms";
+import { IRootState, FormCategory, FormCategoriesOrderParams } from "@ax/types";
+import { useBulkSelection, useModal, useToast } from "@ax/hooks";
+import { MainWrapper, TableList, ErrorToast, Toast, EmptyState, SearchTagsBar } from "@ax/components";
+import { getSchemaFormCategories } from "@ax/helpers";
+
+import { DeleteModal } from "./atoms";
+import CategoryItem from "./CategoryItem";
+import CategoryPanel from "./CategoryPanel";
+import BulkHeader from "./BulkHeader";
+import FormsMenu from "../FormsMenu";
+
+import * as S from "./style";
+
+const FormCategoriesList = (props: IProps): JSX.Element => {
+  const { categories, currenSiteID, getFormCategories, deleteFormCategory, orderFormCategory } = props;
+
+  const schemaCategories = getSchemaFormCategories();
+  const { cat: urlCategory } = useParams<{ cat: string }>();
+
+  const category =
+    !urlCategory || !schemaCategories.map((cat) => cat.value).includes(urlCategory)
+      ? schemaCategories[0].value
+      : urlCategory;
+  const categoryLabel = schemaCategories.find((cat) => cat.value === category)?.label;
+
+  const [isScrolling, setIsScrolling] = useState(false);
+  const [draggingId, setDraggingId] = useState<number | null>(null);
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
+  const { isOpen, toggleModal } = useModal();
+  const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
+  const tableRef = useRef<HTMLDivElement>(null);
+
+  const catIds = categories.map((category) => category.id);
+  const totalItems = categories.length;
+
+  const {
+    resetBulkSelection,
+    selectedItems,
+    isSelected,
+    areItemsSelected,
+    checkState,
+    addToBulkSelection,
+    selectAllItems,
+    setHoverCheck,
+  } = useBulkSelection(catIds);
+
+  useEffect(() => {
+    const getContents = async () => await getFormCategories(category);
+    getContents();
+    return () => {
+      //resetCurrentData();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [category]);
+
+  const rightButtonProps = {
+    label: "New",
+    action: toggleModal,
+  };
+
+  const bulkDelete = async () => {
+    const deleted = await deleteFormCategory(selectedItems.all, category);
+    if (deleted) {
+      toggleDeleteModal();
+    }
+  };
+
+  const selectItems = () => (checkState.isAllSelected ? resetBulkSelection() : selectAllItems());
+
+  const onScroll = (e: any) => setIsScrolling(e.target.scrollTop > 0);
+
+  const toastProps = {
+    setIsVisible,
+    message: toastState,
+  };
+
+  const bulkActions = [
+    {
+      icon: "delete",
+      text: "delete",
+      action: toggleDeleteModal,
+    },
+  ];
+
+  const TableHeader = (
+    <BulkHeader
+      showBulk={areItemsSelected(catIds)}
+      totalItems={totalItems}
+      selectItems={selectItems}
+      checkState={checkState}
+      isScrolling={isScrolling}
+      bulkActions={bulkActions}
+      setHoverCheck={setHoverCheck}
+    />
+  );
+
+  const ComponentList = React.memo(function ComponentList({ components }: any) {
+    return components.map((category: FormCategory, i: number) => {
+      const isItemSelected = isSelected(category.id);
+      const isDragging = !!draggingId && draggingId !== category.id;
+
+      return (
+        <Draggable draggableId={`${category.id}`} index={i} key={category.id}>
+          {(provided) => (
+            <CategoryItem
+              category={category}
+              key={category.id}
+              isSelected={isItemSelected}
+              onChange={addToBulkSelection}
+              toggleToast={toggleToast}
+              hoverCheck={checkState.hoverCheck}
+              isDragging={isDragging}
+              provided={provided}
+            />
+          )}
+        </Draggable>
+      );
+    });
+  });
+
+  const onDragEnd = async (result: DropResult) => {
+    if (!result.destination || result.destination.index === result.source.index) {
+      setDraggingId(null);
+      return;
+    }
+
+    const newPosition = result.destination.index
+      ? categories[result.destination.index - (result.destination.index > result.source.index ? 0 : 1)].position + 1
+      : 1;
+
+    const params: FormCategoriesOrderParams = {
+      id: parseInt(result.draggableId),
+      categoryType: category,
+      position: newPosition,
+      relatedSite: currenSiteID,
+    };
+
+    await orderFormCategory(params);
+
+    setDraggingId(null);
+  };
+
+  const onBeforeCapture = (start: BeforeCapture) => setDraggingId(parseInt(start.draggableId));
+
+  const isEmpty = totalItems === 0;
+  const emptyStateProps = {
+    message: "To start using categories in your forms, create as many categories as you need.",
+    button: "New Category",
+    action: toggleModal,
+  };
+
+  const mainDeleteModalAction = {
+    title: "Yes, delete it",
+    onClick: bulkDelete,
+  };
+
+  const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
+
+  return (
+    <MainWrapper title="Forms" rightButton={rightButtonProps} searchAction={setSearchQuery} searchValue={searchQuery}>
+      <S.CategoryListWrapper>
+        <FormsMenu selected={categoryLabel} />
+        <S.TableWrapper>
+          <ErrorToast />
+          <S.Intro>
+            <S.IntroTitle>Create and manage categories</S.IntroTitle>
+            <div>
+              Define your form categories by creating the elements you need and assigning them to your forms, making it
+              easier to quickly find the right form to add to your page.
+            </div>
+          </S.Intro>
+          <TableList tableHeader={TableHeader} onScroll={onScroll} hasFixedHeader={true} tableRef={tableRef}>
+            <S.SearchTags>
+              <SearchTagsBar query={searchQuery} setQuery={setSearchQuery} />
+            </S.SearchTags>
+            {isEmpty ? (
+              <S.EmptyWrapper>
+                <EmptyState {...emptyStateProps} />
+              </S.EmptyWrapper>
+            ) : (
+              <>
+                <S.Notification>
+                  Reorder your category list by <strong>drag & drop</strong>.
+                </S.Notification>
+                <DragDropContext onDragEnd={onDragEnd} onBeforeCapture={onBeforeCapture}>
+                  <Droppable droppableId="formCategoriesList">
+                    {(provided) => (
+                      <div ref={provided.innerRef} {...provided.droppableProps}>
+                        <ComponentList components={categories} />
+                        {provided.placeholder}
+                      </div>
+                    )}
+                  </Droppable>
+                </DragDropContext>
+              </>
+            )}
+          </TableList>
+        </S.TableWrapper>
+      </S.CategoryListWrapper>
+      {isOpen && <CategoryPanel isOpen={isOpen} toggleModal={toggleModal} toggleToast={toggleToast} type={category} />}
+      {isDeleteOpen && (
+        <DeleteModal
+          isOpen={isDeleteOpen}
+          toggleModal={toggleDeleteModal}
+          mainModalAction={mainDeleteModalAction}
+          secondaryModalAction={secondaryDeleteModalAction}
+        />
+      )}
+      {isVisible && <Toast {...toastProps} />}
+    </MainWrapper>
+  );
+};
+
+const mapStateToProps = (state: IRootState) => ({
+  categories: state.forms.currentFormCategories,
+  currenSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
+});
+
+interface IDispatchProps {
+  getFormCategories(type: string): Promise<void>;
+  deleteFormCategory(id: number | number[], categoryType: string): Promise<boolean>;
+  orderFormCategory(data: FormCategoriesOrderParams): Promise<boolean>;
+}
+
+interface ICategoriesProps {
+  categories: FormCategory[];
+  currenSiteID: number | null;
+}
+
+type IProps = ICategoriesProps & IDispatchProps;
+
+const mapDispatchToProps = {
+  getFormCategories: formsActions.getFormCategories,
+  deleteFormCategory: formsActions.deleteFormCategory,
+  orderFormCategory: formsActions.orderFormCategory,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(FormCategoriesList);

package/src/modules/Forms/FormCategoriesList/style.tsx

@@ -0,0 +1,82 @@
+import styled from "styled-components";
+
+const CategoryListWrapper = styled.div`
+  display: flex;
+`;
+
+const TableWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+  height: calc(100vh - ${(p) => p.theme.spacing.xl});
+  overflow: auto;
+`;
+
+const EmptyWrapper = styled.div`
+  height: ${(p) => `calc(100vh - (${p.theme.spacing.xl} * 3))`};
+  display: flex;
+  align-items: center;
+`;
+
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+
+  p {
+    margin-bottom: ${(p) => p.theme.spacing.m};
+  }
+`;
+
+const Droppable = styled.div`
+  width: 100%;
+
+  [data-react-beautiful-dnd-droppable] {
+    padding-bottom: 100px;
+  }
+`;
+
+const Draggable = styled.div``;
+
+const Notification = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  border-radius: ${(p) => p.theme.radii.s};
+  padding: ${(p) => p.theme.spacing.s};
+`;
+
+const Intro = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  padding: ${(p) => p.theme.spacing.m};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+`;
+
+const IntroTitle = styled.div`
+  ${(p) => p.theme.textStyle.headingM};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const SearchTags = styled.div`
+  & > div:nth-child(1) {
+    margin-bottom: ${(p) => p.theme.spacing.xs};
+  }
+  & > div:nth-child(2) {
+    margin-bottom: ${(p) => p.theme.spacing.xs};
+  }
+`;
+
+export {
+  CategoryListWrapper,
+  TableWrapper,
+  EmptyWrapper,
+  ModalContent,
+  Draggable,
+  Droppable,
+  Notification,
+  Intro,
+  IntroTitle,
+  SearchTags,
+};

package/src/modules/Forms/FormEditor/Editor/FormConfigPanel/Form/ConnectedField/Field/index.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+
+import { getInnerFields } from "@ax/forms";
+import { FieldContainer, FieldGroup } from "@ax/components";
+import { IErrorItem, IPage, ISite, ILanguage } from "@ax/types";
+
+const Field = (props: IFieldProps): JSX.Element => {
+  const {
+    whiteList,
+    objKey,
+    field,
+    selectedContent,
+    goTo,
+    pages,
+    actions,
+    site,
+    lang,
+    disabled,
+    readonly,
+    updateValue,
+    error,
+    errors,
+    theme,
+    moduleCopy,
+    template,
+    setHistoryPush,
+    languages,
+  } = props;
+
+  const isGroup = field.type === "FieldGroup";
+  const isCollapsed = isGroup && field.collapsed;
+  const isConditional = field.type === "ConditionalField";
+  const isArrayGroup = field.type === "ArrayFieldGroup";
+
+  let innerFields: JSX.Element[] = [];
+
+  if (isGroup || isConditional || isArrayGroup) {
+    const innerActions = { ...actions, updateValue, goTo };
+    innerFields = getInnerFields(field.fields, innerActions, selectedContent, true, theme, disabled, site, errors);
+  }
+
+  return isGroup ? (
+    <FieldGroup title={field.title} collapsed={isCollapsed}>
+      {innerFields}
+    </FieldGroup>
+  ) : (
+    <FieldContainer
+      whiteList={whiteList}
+      key={objKey}
+      objKey={objKey}
+      field={field}
+      selectedContent={selectedContent}
+      goTo={goTo}
+      updateValue={updateValue}
+      pages={pages}
+      actions={actions}
+      site={site}
+      lang={lang}
+      innerFields={innerFields}
+      disabled={disabled}
+      readonly={readonly}
+      error={error}
+      theme={theme}
+      moduleCopy={moduleCopy}
+      template={template}
+      setHistoryPush={setHistoryPush}
+      languages={languages}
+    />
+  );
+};
+
+export interface IFieldProps {
+  whiteList: any;
+  objKey: string;
+  field: any;
+  selectedContent: any;
+  goTo: any;
+  pages: IPage[];
+  actions: any;
+  site?: ISite;
+  lang?: number;
+  disabled?: boolean;
+  readonly?: boolean;
+  updateValue: (key: string, value: any, templateID?: number, slugTo?: string) => void;
+  error?: IErrorItem;
+  errors: IErrorItem[];
+  collapsed?: boolean;
+  theme: string;
+  moduleCopy: { date: string; element: Record<string, unknown> } | null;
+  template: any;
+  setHistoryPush?: (path: string, isEditor: boolean) => void;
+  languages?: ILanguage[];
+}
+
+export default Field;

package/src/modules/Forms/FormEditor/Editor/FormConfigPanel/Form/ConnectedField/TemplateManager/index.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+
+import { IErrorItem, ISchemaField, ISite } from "@ax/types";
+import Field from "../Field";
+
+import * as S from "./style";
+
+export const TemplateManager = (props: IProps): JSX.Element => {
+  const {
+    template,
+    selectedTab,
+    selectedContent,
+    objKey,
+    goTo,
+    updateValue,
+    pages,
+    actions,
+    site,
+    disabled,
+    errors,
+    theme,
+    moduleCopy,
+    setHistoryPush,
+    lang,
+  } = props;
+
+  const isConfig = selectedTab === "config";
+  const templateFields = template[selectedTab];
+  const templateContent = selectedContent.template;
+
+  const getFieldProps = (field: ISchemaField) => {
+    const { key, whiteList = [], readonly, disabled } = field;
+
+    const handleUpdate = (fieldKey: string, value: any) => updateValue(fieldKey, value, templateContent.editorID);
+    const error = errors.find((err: any) => err.editorID === templateContent.editorID && err.key === key);
+
+    return {
+      whiteList,
+      key,
+      handleUpdate,
+      error,
+      readonly,
+      disabledField: disabled,
+    };
+  };
+
+  return (
+    <>
+      {isConfig && templateFields && <S.Title>Template Options</S.Title>}
+      {templateFields &&
+        templateFields
+          .filter((templateField: ISchemaField) => !templateField.hidden)
+          .map((templateField: ISchemaField, index: number) => {
+            const { whiteList, key, handleUpdate, error, readonly, disabledField } = getFieldProps(templateField);
+
+            return (
+              <Field
+                whiteList={whiteList}
+                key={`${objKey}.${key}${index}`}
+                objKey={key}
+                field={templateField}
+                selectedContent={templateContent}
+                goTo={goTo}
+                updateValue={handleUpdate}
+                pages={pages}
+                actions={actions}
+                site={site}
+                disabled={disabled || disabledField}
+                error={error}
+                errors={errors}
+                theme={theme}
+                moduleCopy={moduleCopy}
+                template={template}
+                setHistoryPush={setHistoryPush}
+                lang={lang}
+                readonly={readonly}
+              />
+            );
+          })}
+    </>
+  );
+};
+
+interface IProps {
+  template: any;
+  updateValue: (key: string, value: any, templateID?: number) => void;
+  goTo: any;
+  objKey: string;
+  pages: any;
+  selectedTab: string;
+  selectedContent: any;
+  actions: any;
+  site?: ISite;
+  disabled?: boolean;
+  errors: IErrorItem[];
+  theme: string;
+  moduleCopy: { date: string; element: Record<string, unknown> } | null;
+  setHistoryPush?: (path: string, isEditor: boolean) => void;
+  lang: number;
+}
+
+export default TemplateManager;

package/src/modules/Forms/FormEditor/Editor/FormConfigPanel/Form/ConnectedField/TemplateManager/style.tsx

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const Title = styled.p`
+  ${(p) => p.theme.textStyle.headingXXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  padding-bottom: ${(p) => p.theme.spacing.xs};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+`;

package/src/modules/Forms/FormEditor/Editor/FormConfigPanel/Form/ConnectedField/index.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import { getFormTemplate } from "@ax/helpers";
+import { IRootState } from "@ax/types";
+import { formsActions } from "@ax/containers/Forms";
+
+import TemplateManager from "./TemplateManager";
+import Field from "./Field";
+
+const ConnectedField = (props: any) => {
+  const {
+    whiteList,
+    objKey,
+    selectedTab,
+    field,
+    selectedContent,
+    goTo,
+    updateFormContent,
+    selectedEditorID,
+    pages,
+    actions,
+    site,
+    lang,
+    errors,
+    theme,
+    moduleCopy,
+    template,
+    setHistoryPush,
+    languages,
+    isReadOnly,
+  } = props;
+
+  const isTemplate = field.type === "template" || field.type === "formTemplate";
+  const isFieldReadOnly = isReadOnly || field.readonly;
+  const isDisabled = isFieldReadOnly || field.disabled;
+  const error = errors.find((err: any) => err.editorID === selectedEditorID && err.key === objKey);
+
+  const updateValue = (key: string, value: any, templateID?: number) => {
+    const editorID = templateID ? templateID : selectedEditorID;
+    updateFormContent(editorID, key, value);
+  };
+
+  if (isTemplate) {
+    const template = getFormTemplate(selectedContent[field.key].templateType);
+
+    return (
+      <TemplateManager
+        template={template}
+        updateValue={updateValue}
+        goTo={goTo}
+        objKey={objKey}
+        pages={pages}
+        selectedTab={selectedTab}
+        selectedContent={selectedContent}
+        actions={actions}
+        site={site}
+        disabled={isDisabled}
+        errors={errors}
+        theme={theme}
+        moduleCopy={moduleCopy}
+        setHistoryPush={setHistoryPush}
+        lang={lang.id}
+      />
+    );
+  }
+
+  return (
+    <Field
+      whiteList={whiteList}
+      objKey={objKey}
+      field={field}
+      selectedContent={selectedContent}
+      goTo={goTo}
+      updateValue={updateValue}
+      pages={pages}
+      actions={actions}
+      site={site}
+      lang={lang.id}
+      disabled={isDisabled}
+      readonly={isFieldReadOnly}
+      error={error}
+      errors={errors}
+      theme={theme}
+      moduleCopy={moduleCopy}
+      template={template}
+      setHistoryPush={setHistoryPush}
+      languages={languages}
+    />
+  );
+};
+
+const mapStateToProps = (state: IRootState) => ({
+  selectedEditorID: state.forms.selectedEditorID,
+  selectedContent: { ...state.forms.selectedContent },
+  pages: state.sites.currentSitePages,
+  site: state.sites.currentSiteInfo,
+  lang: state.app.lang,
+  errors: state.pageEditor.errors,
+  moduleCopy: state.forms.moduleCopy,
+  template: state.forms.template,
+  languages: state.sites.currentSiteLanguages,
+});
+
+const mapDispatchToProps = {
+  updateFormContent: formsActions.updateFormContent,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ConnectedField);