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

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

@@ -0,0 +1,9 @@
+import React from "react";
+import styled from "styled-components";
+import { BulkSelectionOptions } from "@ax/components";
+
+const StyledBulkSelectionOptions = styled((props) => <BulkSelectionOptions {...props} />)`
+  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.m}`};
+`;
+
+export { StyledBulkSelectionOptions };

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

@@ -0,0 +1,125 @@
+import React from "react";
+import { connect } from "react-redux";
+import { DraggableProvided } from "react-beautiful-dnd";
+
+import { formsActions } from "@ax/containers/Forms";
+import { useModal } from "@ax/hooks";
+import { FormCategory, ICheck } from "@ax/types";
+import { CheckField, Icon } from "@ax/components";
+import CategoryPanel from "../CategoryPanel";
+import { DeleteModal } from "../atoms";
+
+import * as S from "./style";
+
+const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
+  const { category, isSelected, hoverCheck, isDragging, provided, deleteFormCategory, onChange, toggleToast } = props;
+
+  const { isOpen, toggleModal } = useModal();
+  const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
+
+  const { content } = category;
+
+  const handleClick = () => !isDragging && toggleModal();
+
+  const handleCloseModal = () => {
+    toggleModal();
+  };
+
+  const handleOnChange = (value: ICheck) => onChange(value);
+
+  const handleCheckClick = (e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation();
+
+  const removeCategory = async () => {
+    const deleted = await deleteFormCategory(category.id, category.categoryType);
+
+    if (deleted) {
+      isDeleteOpen && toggleDeleteModal();
+      toggleToast("1 form category deleted");
+    }
+  };
+
+  const menuOptions = [
+    {
+      label: "delete",
+      icon: "delete",
+      action: toggleDeleteModal,
+    },
+  ];
+
+  const mainDeleteModalAction = {
+    title: "Yes, delete it",
+    onClick: removeCategory,
+  };
+
+  const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
+
+  return (
+    <>
+      <S.CategoryRow
+        role="rowgroup"
+        selected={isSelected}
+        onClick={handleClick}
+        ref={provided.innerRef}
+        {...provided.draggableProps}
+        {...provided.dragHandleProps}
+      >
+        <S.HandleCell>
+          <S.IconWrapperDrag role="cell">
+            <Icon name="drag" size="16" />
+          </S.IconWrapperDrag>
+        </S.HandleCell>
+        <S.CheckCell role="cell" onClick={handleCheckClick}>
+          <CheckField name="check" value={category.id} checked={isSelected || hoverCheck} onChange={handleOnChange} />
+        </S.CheckCell>
+        <S.NameCell role="cell" clickable={true}>
+          <div>{content?.title || ""}</div>
+        </S.NameCell>
+        <S.CodeCell role="cell" clickable={true}>
+          {category.content.code}
+        </S.CodeCell>
+        <S.ActionsCell role="cell">
+          <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />
+        </S.ActionsCell>
+      </S.CategoryRow>
+      {isOpen && (
+        <CategoryPanel
+          isOpen={isOpen}
+          toggleModal={handleCloseModal}
+          item={category}
+          toggleToast={toggleToast}
+          type={category.categoryType}
+        />
+      )}
+      {isDeleteOpen && (
+        <DeleteModal
+          isOpen={isDeleteOpen}
+          toggleModal={toggleDeleteModal}
+          mainModalAction={mainDeleteModalAction}
+          secondaryModalAction={secondaryDeleteModalAction}
+        />
+      )}
+    </>
+  );
+};
+
+interface IProps {
+  category: FormCategory;
+  isSelected: boolean;
+  onChange: (e: any) => void;
+  toggleToast(state: any): void;
+  hoverCheck?: boolean;
+  isDragging: boolean;
+  provided: DraggableProvided;
+}
+
+interface IDispatchProps {
+  deleteFormCategory(id: number | number[], categoryType: string): Promise<boolean>;
+}
+
+type ICategoryItemProps = IProps & IDispatchProps;
+
+const mapDispatchToProps = {
+  deleteFormCategory: formsActions.deleteFormCategory,
+};
+
+export default connect(null, mapDispatchToProps)(CategoryItem);

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

@@ -0,0 +1,91 @@
+import styled from "styled-components";
+
+import { Cell, Row } from "@ax/components/TableList/TableItem/style";
+import { ActionMenu } from "@ax/components";
+
+const CheckCell = styled(Cell)`
+  padding-left: 0;
+  padding-right: 0;
+  width: 32px;
+  label {
+    margin-bottom: ${(p) => p.theme.spacing.s};
+  }
+`;
+
+const NameCell = styled(Cell)<{ clickable: boolean }>`
+  ${(p) => p.theme.textStyle.uiL};
+  padding-left: ${(p) => p.theme.spacing.xs};
+  pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: flex-start;
+  flex-grow: 1;
+`;
+
+const ActionsCell = styled(Cell)`
+  flex: 0 0 80px;
+`;
+
+const CodeCell = styled(Cell)<{ clickable: boolean }>`
+  ${(p) => p.theme.textStyle.uiXS};
+  pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
+  flex: 0 0 250px;
+`;
+
+const StyledActionMenu = styled(ActionMenu)`
+  opacity: 0;
+  width: 32px;
+  display: flex;
+  margin-left: auto;
+`;
+
+const CategoryRow = styled(Row)`
+  &:hover {
+    ${StyledActionMenu} {
+      opacity: 1;
+    }
+  }
+`;
+
+const FlagsWrapper = styled.div`
+  display: flex;
+  svg {
+    margin-right: 2px;
+    margin-bottom: -3px; // TODO
+    display: inline;
+    vertical-align: baseline;
+  }
+`;
+
+const HandleCell = styled(Cell)`
+  flex-flow: row nowrap;
+  padding: ${(p) => `0 ${p.theme.spacing.xs} 0 0`};
+  align-items: center;
+`;
+
+const IconWrapperDrag = styled.div`
+  display: flex;
+  align-items: center;
+  padding: ${(p) => `${p.theme.spacing.s} 0 ${p.theme.spacing.s} ${p.theme.spacing.xs}`};
+  height: 100%;
+  opacity: 1;
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.textLowEmphasis};
+    }
+  }
+`;
+
+export {
+  CheckCell,
+  NameCell,
+  ActionsCell,
+  CodeCell,
+  StyledActionMenu,
+  CategoryRow,
+  FlagsWrapper,
+  IconWrapperDrag,
+  HandleCell,
+};

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

@@ -0,0 +1,50 @@
+import React from "react";
+
+import { FieldsBehavior } from "@ax/components";
+import { slugify } from "@ax/helpers";
+import { IFormState } from "..";
+
+const Form = (props: IFormProps): JSX.Element => {
+  const { edit, form, setForm } = props;
+
+  const setNameValue = (value: string) => {
+    if (!edit) {
+      setForm({ ...form, name: value, code: slugify(value) });
+    } else {
+      setForm({ ...form, name: value });
+    }
+  };
+
+  const setCodeValue = (value: string) => setForm({ ...form, code: value });
+
+  return (
+    <>
+      <FieldsBehavior
+        title="Name"
+        name="name"
+        fieldType="TextField"
+        value={form.name}
+        onChange={setNameValue}
+        autoComplete="category-name"
+        mandatory={true}
+      />
+      <FieldsBehavior
+        title="Code"
+        name="code"
+        fieldType="TextField"
+        value={form.code}
+        onChange={setCodeValue}
+        autoComplete="category-code"
+        mandatory={true}
+      />
+    </>
+  );
+};
+
+interface IFormProps {
+  edit: boolean | undefined;
+  form: IFormState;
+  setForm: (values: IFormState) => void;
+}
+
+export default Form;

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

@@ -0,0 +1,112 @@
+import React, { useState } from "react";
+import { connect } from "react-redux";
+
+import { formsActions } from "@ax/containers/Forms";
+import { FormCategory } from "@ax/types";
+import { Button, FloatingPanel } from "@ax/components";
+import Form from "./Form";
+
+import * as S from "./style";
+
+const CategoryPanel = (props: IProps): JSX.Element => {
+  const { isOpen, item, type, toggleModal, toggleToast, createFormCategory, updateFormCategory } = props;
+
+  const initState: IFormState = {
+    name: item?.content.title || "",
+    code: item?.content.code || "",
+  };
+
+  const [form, setForm] = useState(initState);
+
+  const addItemAction = async () => {
+    const newCategory = {
+      title: form.name,
+      code: form.code,
+    };
+
+    const isCreated = await createFormCategory(newCategory, type);
+
+    if (isCreated) {
+      toggleModal();
+    }
+  };
+
+  const editItemAction = async () => {
+    let isUpdated = false;
+    let toastString = "";
+
+    const updatedCategory = {
+      title: form.name,
+      code: form.code,
+    };
+
+    isUpdated = !!item && (await updateFormCategory(item.id, updatedCategory));
+    toastString = "1 form category edited";
+
+    if (isUpdated) {
+      toggleToast(toastString);
+    }
+
+    toggleModal();
+  };
+
+  const addButton = {
+    label: "Add",
+    action: addItemAction,
+    disabled: false,
+  };
+
+  const editButton = {
+    label: "Update",
+    action: editItemAction,
+    disabled: false,
+  };
+
+  const title = !item ? "New Category" : "Edit Category";
+
+  return (
+    <FloatingPanel title={title} toggleModal={toggleModal} isOpen={isOpen}>
+      <S.Wrapper>
+        <Form edit={!!item} form={form} setForm={setForm} />
+        <S.Footer>
+          {!item ? (
+            <Button className="button" type="button" onClick={addButton.action} disabled={addButton.disabled}>
+              {addButton.label}
+            </Button>
+          ) : (
+            <Button className="button" type="button" onClick={editButton.action} disabled={editButton.disabled}>
+              {editButton.label}
+            </Button>
+          )}
+        </S.Footer>
+      </S.Wrapper>
+    </FloatingPanel>
+  );
+};
+
+interface ICategoryPanelProps {
+  item?: FormCategory;
+  type: string;
+  isOpen: boolean;
+  toggleModal(): void;
+  toggleToast(state: string): void;
+}
+
+export interface IFormState {
+  name: string;
+  code: string;
+}
+
+const mapDispatchToProps = {
+  createFormCategory: formsActions.createFormCategory,
+  updateFormCategory: formsActions.updateFormCategory,
+};
+
+interface IDispatchProps {
+  createFormCategory: (content: { title: string; code: string }, categoryType: string) => Promise<boolean>;
+  updateFormCategory: (id: number, content: { title: string; code: string }) => Promise<boolean>;
+}
+
+type IProps = IDispatchProps & ICategoryPanelProps;
+
+export default connect(null, mapDispatchToProps)(CategoryPanel);

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

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+  height: 100%;
+`;
+
+const Footer = styled.div`
+  position: absolute;
+  bottom: ${(p) => p.theme.spacing.m};
+  right: ${(p) => p.theme.spacing.m};
+`;
+
+const FlagWrapper = styled.div`
+  display: flex;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const TranslationText = styled.div`
+  ${(p) => p.theme.textStyle.headingXXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-left: ${(p) => p.theme.spacing.xs};
+`;
+
+const Translation = styled.div`
+  ${(p) => p.theme.textStyle.uiL};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+export { Wrapper, Footer, FlagWrapper, TranslationText, Translation };

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

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { IModal } from "@ax/types";
+import { Modal } from "@ax/components";
+
+import * as S from "./style";
+
+const DeleteModal = (props: IModal): JSX.Element => {
+  const { isOpen, toggleModal, mainModalAction, secondaryModalAction } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      hide={toggleModal}
+      title="Delete category"
+      secondaryAction={secondaryModalAction}
+      mainAction={mainModalAction}
+      size="S"
+      height={240}
+    >
+      <S.ModalContent>
+        <p>
+          Are you sure you want to delete <strong>this category</strong>? It won&apos;t be assignable to new froms, and
+          existing forms with this category will lose it.
+          <br />
+          <strong>This action cannot be undone</strong>.
+        </p>
+      </S.ModalContent>
+    </Modal>
+  );
+};
+
+export { DeleteModal };

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

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { IQueryValue } from "@ax/types";
+
+const useFilterQuery = () => {
+  const initialQueryValues: Record<string, IQueryValue[]> = {
+    translated: [{ value: "all", label: "All" }],
+  };
+
+  const [query, setQuery] = useState(initialQueryValues);
+  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
+
+  const setFilterQuery = (filterValues: Record<string, IQueryValue[]>) => {
+    const { translated } = filterValues;
+    let filterQuery = "";
+
+    const currentQuery = (pointer: string, values: IQueryValue[]): string => {
+      const stringValues =
+        Array.isArray(values) && values.length
+          ? values.map((value) => (value.value !== "all" ? value.value : "")).join(",")
+          : "";
+
+      return !stringValues.length
+        ? filterQuery
+        : filterQuery.length
+        ? filterQuery.concat(`&${pointer}=${stringValues}`)
+        : `&${pointer}=${stringValues}`;
+    };
+
+    const isNotInitialValue = (pointer: string) => {
+      return filterValues[pointer] && initialQueryValues[pointer] !== filterValues[pointer];
+    };
+
+    if (isNotInitialValue("translated")) filterQuery = currentQuery("translated", translated);
+
+    setCurrentFilterQuery(filterQuery);
+  };
+
+  const setFiltersSelection = (pointer: string, filter: IQueryValue[]) => {
+    const { translated } = query;
+    const filterValues = {
+      translated: pointer === "translated" ? filter : translated,
+    };
+
+    setQuery(filterValues);
+    setFilterQuery(filterValues);
+  };
+
+  const resetFilterQuery = () => {
+    setQuery(initialQueryValues);
+    setCurrentFilterQuery("");
+  };
+
+  return {
+    setFiltersSelection,
+    resetFilterQuery,
+    filterValues: query,
+    filterQuery: currentFilterQuery,
+  };
+};
+
+export { useFilterQuery };