@griddo/ax 11.10.11-rc.0 → 11.10.11

package/src/modules/Forms/FormList/FormItem/style.tsx

@@ -75,15 +75,15 @@ const FlagsWrapper = styled.div`
 `;
 
 export {
-  CheckCell,
-  NameCell,
-  TypeCell,
-  UpdateCell,
-  StateCell,
-  LangCell,
-  ActionsCell,
-  ActionsWrapper,
-  StyledActionMenu,
-  FormRow,
-  FlagsWrapper,
+	CheckCell,
+	NameCell,
+	TypeCell,
+	UpdateCell,
+	StateCell,
+	LangCell,
+	ActionsCell,
+	ActionsWrapper,
+	StyledActionMenu,
+	FormRow,
+	FlagsWrapper,
 };

package/src/modules/Forms/FormList/Summary/index.tsx

@@ -5,53 +5,53 @@ import { IQueryValue } from "@ax/types";
 import * as S from "./style";
 
 const Summary = (props: ISummaryProps) => {
-  const { summary, filterItems } = props;
-  const { total, active, inactive } = summary;
+	const { summary, filterItems } = props;
+	const { total, active, inactive } = summary;
 
-  const totalString = total < 10 ? `0${total}` : total;
-  const activeString = active < 10 ? `0${active}` : active;
-  const inactiveString = inactive < 10 ? `0${inactive}` : inactive;
+	const totalString = total < 10 ? `0${total}` : total;
+	const activeString = active < 10 ? `0${active}` : active;
+	const inactiveString = inactive < 10 ? `0${inactive}` : inactive;
 
-  const handleClickAll = () => filterItems("state", [{ value: "all", label: "All states" }]);
-  const handleClickActive = () => filterItems("state", [{ value: "active", label: "Active" }]);
-  const handleClickInactive = () => filterItems("state", [{ value: "inactive", label: "Inactive" }]);
+	const handleClickAll = () => filterItems("state", [{ value: "all", label: "All states" }]);
+	const handleClickActive = () => filterItems("state", [{ value: "active", label: "Active" }]);
+	const handleClickInactive = () => filterItems("state", [{ value: "inactive", label: "Inactive" }]);
 
-  return (
-    <S.Wrapper>
-      <S.Card color="rgba(219, 221, 233, 1)" onClick={handleClickAll}>
-        <S.Number>{totalString}</S.Number>
-        <S.Description>
-          <S.IconWrapper>
-            <Icon name="form" size="24" />
-          </S.IconWrapper>
-          <S.Text>Total Forms</S.Text>
-        </S.Description>
-      </S.Card>
-      <S.Card color="rgba(175, 198, 40, 0.2)" onClick={handleClickActive}>
-        <S.Number>{activeString}</S.Number>
-        <S.Description>
-          <S.IconWrapper>
-            <Icon name="active" />
-          </S.IconWrapper>
-          <S.Text>Active Forms</S.Text>
-        </S.Description>
-      </S.Card>
-      <S.Card color="rgba(210, 211, 219, 0.3)" onClick={handleClickInactive}>
-        <S.Number>{inactiveString}</S.Number>
-        <S.Description>
-          <S.IconWrapper>
-            <Icon name="offline" />
-          </S.IconWrapper>
-          <S.Text>Inactive Forms</S.Text>
-        </S.Description>
-      </S.Card>
-    </S.Wrapper>
-  );
+	return (
+		<S.Wrapper>
+			<S.Card color="rgba(219, 221, 233, 1)" onClick={handleClickAll}>
+				<S.Number>{totalString}</S.Number>
+				<S.Description>
+					<S.IconWrapper>
+						<Icon name="form" size="24" />
+					</S.IconWrapper>
+					<S.Text>Total Forms</S.Text>
+				</S.Description>
+			</S.Card>
+			<S.Card color="rgba(175, 198, 40, 0.2)" onClick={handleClickActive}>
+				<S.Number>{activeString}</S.Number>
+				<S.Description>
+					<S.IconWrapper>
+						<Icon name="active" />
+					</S.IconWrapper>
+					<S.Text>Active Forms</S.Text>
+				</S.Description>
+			</S.Card>
+			<S.Card color="rgba(210, 211, 219, 0.3)" onClick={handleClickInactive}>
+				<S.Number>{inactiveString}</S.Number>
+				<S.Description>
+					<S.IconWrapper>
+						<Icon name="offline" />
+					</S.IconWrapper>
+					<S.Text>Inactive Forms</S.Text>
+				</S.Description>
+			</S.Card>
+		</S.Wrapper>
+	);
 };
 
 interface ISummaryProps {
-  summary: { total: number; active: number; inactive: number };
-  filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
+	summary: { total: number; active: number; inactive: number };
+	filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
 }
 
 export default Summary;

package/src/modules/Forms/FormList/TemplateModal/index.tsx

@@ -7,108 +7,108 @@ import { getFormTemplateCategories, getFormTemplateThumbnailProps } from "@ax/he
 import * as S from "./style";
 
 const TemplateModal = (props: ITemplateModal): JSX.Element => {
-  const {
-    isOpen,
-    toggleModal,
-    mainModalAction,
-    secondaryModalAction,
-    templates,
-    selectedTemplate,
-    setSelectedTemplate,
-  } = props;
+	const {
+		isOpen,
+		toggleModal,
+		mainModalAction,
+		secondaryModalAction,
+		templates,
+		selectedTemplate,
+		setSelectedTemplate,
+	} = props;
 
-  const init = Object.values(templates);
-  const [items, setItems] = useState(init);
-  const [selectValue, setSelectValue] = useState<string>();
-  const [inputValue, setInputValue] = useState<string>("");
+	const init = Object.values(templates);
+	const [items, setItems] = useState(init);
+	const [selectValue, setSelectValue] = useState<string>();
+	const [inputValue, setInputValue] = useState<string>("");
 
-  const isFiltering = inputValue.length > 0 || !!selectValue;
-  const templateCategories = getFormTemplateCategories();
+	const isFiltering = inputValue.length > 0 || !!selectValue;
+	const templateCategories = getFormTemplateCategories();
 
-  const filterTemplates = (query: string, filter: string | undefined) => {
-    let filteredItems = init.filter((item) => item.displayName?.toLowerCase().includes(query.toLowerCase()));
-    if (filter) {
-      filteredItems = filteredItems.filter((item) => item.category === filter);
-    }
-    setItems(filteredItems);
-  };
+	const filterTemplates = (query: string, filter: string | undefined) => {
+		let filteredItems = init.filter((item) => item.displayName?.toLowerCase().includes(query.toLowerCase()));
+		if (filter) {
+			filteredItems = filteredItems.filter((item) => item.category === filter);
+		}
+		setItems(filteredItems);
+	};
 
-  const handleSearch = (query: string) => {
-    setInputValue(query);
-    filterTemplates(query, selectValue);
-  };
+	const handleSearch = (query: string) => {
+		setInputValue(query);
+		filterTemplates(query, selectValue);
+	};
 
-  const handleChange = (value: string | undefined) => {
-    setSelectValue(value);
-    filterTemplates(inputValue, value);
-  };
+	const handleChange = (value: string | undefined) => {
+		setSelectValue(value);
+		filterTemplates(inputValue, value);
+	};
 
-  const emptySearchStateProps = {
-    icon: "search",
-    title: "Oh! No Results Found",
-    message: "We couldn’t find what you are looking for. Please, try another search.",
-  };
+	const emptySearchStateProps = {
+		icon: "search",
+		title: "Oh! No Results Found",
+		message: "We couldn’t find what you are looking for. Please, try another search.",
+	};
 
-  return (
-    <Modal
-      isOpen={isOpen}
-      hide={toggleModal}
-      title="New form: Select a template to start creating a new form"
-      secondaryAction={secondaryModalAction}
-      mainAction={mainModalAction}
-      size="L"
-    >
-      <S.ModalContent>
-        <S.FiltersBar>
-          {templateCategories && templateCategories.length > 0 && (
-            <S.SelectWrapper>
-              <Select
-                name="formTemplateSelect"
-                value={selectValue}
-                options={templateCategories}
-                onChange={handleChange}
-                placeholder="Form Type"
-              />
-            </S.SelectWrapper>
-          )}
-          <SearchField
-            value={inputValue}
-            onChange={handleSearch}
-            placeholder="Search"
-            focus={false}
-            searchOnEnter={false}
-          />
-        </S.FiltersBar>
-        {isFiltering && !items.length ? (
-          <S.EmptyWrapper data-testid="empty-wrapper">
-            <EmptyState {...emptySearchStateProps} />
-          </S.EmptyWrapper>
-        ) : (
-          <S.TemplateGrid>
-            {items.map((template) => {
-              const handleClick = () => setSelectedTemplate(template);
-              const isSelected = template.component === selectedTemplate?.component;
-              const thumbnailProps = getFormTemplateThumbnailProps(template.component);
-              return (
-                <S.TemplateItem key={template.component}>
-                  <S.Title>{template.displayName}</S.Title>
-                  <S.ThumbnailWrapper onClick={handleClick} isSelected={isSelected}>
-                    <S.Thumbnail {...thumbnailProps} />
-                  </S.ThumbnailWrapper>
-                </S.TemplateItem>
-              );
-            })}
-          </S.TemplateGrid>
-        )}
-      </S.ModalContent>
-    </Modal>
-  );
+	return (
+		<Modal
+			isOpen={isOpen}
+			hide={toggleModal}
+			title="New form: Select a template to start creating a new form"
+			secondaryAction={secondaryModalAction}
+			mainAction={mainModalAction}
+			size="L"
+		>
+			<S.ModalContent>
+				<S.FiltersBar>
+					{templateCategories && templateCategories.length > 0 && (
+						<S.SelectWrapper>
+							<Select
+								name="formTemplateSelect"
+								value={selectValue}
+								options={templateCategories}
+								onChange={handleChange}
+								placeholder="Form Type"
+							/>
+						</S.SelectWrapper>
+					)}
+					<SearchField
+						value={inputValue}
+						onChange={handleSearch}
+						placeholder="Search"
+						focus={false}
+						searchOnEnter={false}
+					/>
+				</S.FiltersBar>
+				{isFiltering && !items.length ? (
+					<S.EmptyWrapper data-testid="empty-wrapper">
+						<EmptyState {...emptySearchStateProps} />
+					</S.EmptyWrapper>
+				) : (
+					<S.TemplateGrid>
+						{items.map((template) => {
+							const handleClick = () => setSelectedTemplate(template);
+							const isSelected = template.component === selectedTemplate?.component;
+							const thumbnailProps = getFormTemplateThumbnailProps(template.component);
+							return (
+								<S.TemplateItem key={template.component}>
+									<S.Title>{template.displayName}</S.Title>
+									<S.ThumbnailWrapper onClick={handleClick} isSelected={isSelected}>
+										<S.Thumbnail {...thumbnailProps} />
+									</S.ThumbnailWrapper>
+								</S.TemplateItem>
+							);
+						})}
+					</S.TemplateGrid>
+				)}
+			</S.ModalContent>
+		</Modal>
+	);
 };
 
 interface ITemplateModal extends IModal {
-  templates: Record<string, ISchema>;
-  selectedTemplate: ISchema | null;
-  setSelectedTemplate: React.Dispatch<React.SetStateAction<ISchema | null>>;
+	templates: Record<string, ISchema>;
+	selectedTemplate: ISchema | null;
+	setSelectedTemplate: React.Dispatch<React.SetStateAction<ISchema | null>>;
 }
 
 export { TemplateModal };

package/src/modules/Forms/FormList/TemplateModal/style.tsx

@@ -68,13 +68,13 @@ const EmptyWrapper = styled.div`
 `;
 
 export {
-  ModalContent,
-  FiltersBar,
-  TemplateGrid,
-  TemplateItem,
-  Title,
-  ThumbnailWrapper,
-  Thumbnail,
-  SelectWrapper,
-  EmptyWrapper,
+	ModalContent,
+	FiltersBar,
+	TemplateGrid,
+	TemplateItem,
+	Title,
+	ThumbnailWrapper,
+	Thumbnail,
+	SelectWrapper,
+	EmptyWrapper,
 };

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

@@ -2,100 +2,100 @@ import { useState } from "react";
 import { IQueryValue } from "@ax/types";
 
 const useSortedListStatus = () => {
-  const sortedInitialState: {
-    isAscending: boolean;
-    sortedByTitle: boolean;
-    sortedByDate: boolean;
-  } = {
-    isAscending: false,
-    sortedByTitle: false,
-    sortedByDate: false,
-  };
-
-  const [sortedListStatus, setSortedListStatus] = useState(sortedInitialState);
-
-  return {
-    sortedListStatus,
-    setSortedListStatus,
-  };
+	const sortedInitialState: {
+		isAscending: boolean;
+		sortedByTitle: boolean;
+		sortedByDate: boolean;
+	} = {
+		isAscending: false,
+		sortedByTitle: false,
+		sortedByDate: false,
+	};
+
+	const [sortedListStatus, setSortedListStatus] = useState(sortedInitialState);
+
+	return {
+		sortedListStatus,
+		setSortedListStatus,
+	};
 };
 
 const useFilterQuery = (values?: Record<string, IQueryValue[]> | null) => {
-  const initialQueryValues: Record<string, IQueryValue[]> = {
-    type: [{ value: "all", label: "All" }],
-    translated: [{ value: "all", label: "All" }],
-    state: [{ value: "all", label: "All" }],
-    order: [],
-  };
-
-  const getFilterQuery = (filterValues: Record<string, IQueryValue[]>): string => {
-    const { type, translated, state, order } = 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}`;
-    };
-
-    if (type) {
-      filterQuery = currentQuery("type", type);
-    }
-
-    if (translated) {
-      filterQuery = currentQuery("translated", translated);
-    }
-
-    if (state) {
-      filterQuery = currentQuery("state", state);
-    }
-
-    if (order) {
-      filterQuery = currentQuery("order", order);
-    }
-
-    return filterQuery;
-  };
-
-  const initState = values ? values : initialQueryValues;
-  const [state, setState] = useState(initState);
-
-  const initQuery = values ? getFilterQuery(values) : "";
-  const [query, setQuery] = useState(initQuery);
-
-  const setFiltersSelection = (pointer: string, filter: IQueryValue[], isAscendent?: boolean) => {
-    const { type, translated, state: liveState, order } = state;
-    const orderMethod = isAscendent ? "asc" : "desc";
-    const filterValues: Record<string, IQueryValue[]> = {
-      type: pointer === "type" ? filter : type,
-      translated: pointer === "translated" ? filter : translated,
-      state: pointer === "state" ? filter : liveState,
-      order: pointer === "order" ? [{ value: `${filter[0].value}-${orderMethod}`, label: filter[0].label }] : order,
-    };
-
-    setState(filterValues);
-    const filterQuery = getFilterQuery(filterValues);
-    setQuery(filterQuery);
-  };
-
-  const resetFilterQuery = () => {
-    setState(initialQueryValues);
-    setQuery("");
-  };
-
-  return {
-    setFiltersSelection,
-    resetFilterQuery,
-    filterValues: state,
-    query,
-  };
+	const initialQueryValues: Record<string, IQueryValue[]> = {
+		type: [{ value: "all", label: "All" }],
+		translated: [{ value: "all", label: "All" }],
+		state: [{ value: "all", label: "All" }],
+		order: [],
+	};
+
+	const getFilterQuery = (filterValues: Record<string, IQueryValue[]>): string => {
+		const { type, translated, state, order } = 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}`;
+		};
+
+		if (type) {
+			filterQuery = currentQuery("type", type);
+		}
+
+		if (translated) {
+			filterQuery = currentQuery("translated", translated);
+		}
+
+		if (state) {
+			filterQuery = currentQuery("state", state);
+		}
+
+		if (order) {
+			filterQuery = currentQuery("order", order);
+		}
+
+		return filterQuery;
+	};
+
+	const initState = values ? values : initialQueryValues;
+	const [state, setState] = useState(initState);
+
+	const initQuery = values ? getFilterQuery(values) : "";
+	const [query, setQuery] = useState(initQuery);
+
+	const setFiltersSelection = (pointer: string, filter: IQueryValue[], isAscendent?: boolean) => {
+		const { type, translated, state: liveState, order } = state;
+		const orderMethod = isAscendent ? "asc" : "desc";
+		const filterValues: Record<string, IQueryValue[]> = {
+			type: pointer === "type" ? filter : type,
+			translated: pointer === "translated" ? filter : translated,
+			state: pointer === "state" ? filter : liveState,
+			order: pointer === "order" ? [{ value: `${filter[0].value}-${orderMethod}`, label: filter[0].label }] : order,
+		};
+
+		setState(filterValues);
+		const filterQuery = getFilterQuery(filterValues);
+		setQuery(filterQuery);
+	};
+
+	const resetFilterQuery = () => {
+		setState(initialQueryValues);
+		setQuery("");
+	};
+
+	return {
+		setFiltersSelection,
+		resetFilterQuery,
+		filterValues: state,
+		query,
+	};
 };
 
 export { useSortedListStatus, useFilterQuery };