@griddo/ax 10.4.37 → 10.5.0

package/src/modules/Categories/CategoriesList/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 };

package/src/modules/Categories/CategoriesList/index.tsx

@@ -1,18 +1,56 @@
 import React, { useEffect, useCallback, useState, useRef, useLayoutEffect } from "react";
 import { connect } from "react-redux";
+import Tree, {
+  mutateTree,
+  moveItemOnTree,
+  RenderItemParams,
+  TreeItem,
+  TreeData,
+  ItemId,
+  TreeSourcePosition,
+  TreeDestinationPosition,
+} from "@atlaskit/tree";
 
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { appActions } from "@ax/containers/App";
-import { IRootState, IStructuredData, IStructuredDataContent, IGetStructuredDataParams, IDataPack } from "@ax/types";
+import {
+  IRootState,
+  IStructuredData,
+  IGetStructuredDataParams,
+  IDataPack,
+  IStructuredDataCategory,
+  ICategoryGroup,
+  IOrderCategoryParams,
+  IQueryValue,
+} from "@ax/types";
 import { useBulkSelection, useModal, usePermission, useToast } from "@ax/hooks";
-import { MainWrapper, TableList, ErrorToast, Toast, EmptyState } from "@ax/components";
-
-import { DeleteModal } from "./atoms";
-import { getAllLangCategoriesIds } from "./utils";
+import {
+  MainWrapper,
+  TableList,
+  ErrorToast,
+  Toast,
+  EmptyState,
+  Icon,
+  SearchTagsBar,
+  FilterTagsBar,
+} from "@ax/components";
+import { sortBy } from "@ax/helpers";
+
+import { DeleteGroupModal, DeleteModal } from "./atoms";
+import { filterCategoriesAndGroups, getAllLangCategoriesIds } from "./utils";
 import CategoryItem from "./CategoryItem";
 import CategoryPanel from "./CategoryPanel";
 import CategoryNav from "./CategoryNav";
 import BulkHeader from "./BulkHeader";
+import {
+  findChild,
+  findChildByIndex,
+  formatItem,
+  getElementsFromTree,
+  getIDsFromTree,
+  normalizeItems,
+} from "./helpers";
+import { useFilterQuery } from "./hooks";
 
 import * as S from "./style";
 
@@ -22,7 +60,6 @@ const CategoriesList = (props: IProps): JSX.Element => {
     currentStructuredData,
     currentDataContent,
     getStructuredDataContents,
-    resetCategoryValues,
     lang,
     siteLanguages,
     globalLangs,
@@ -32,19 +69,22 @@ const CategoriesList = (props: IProps): JSX.Element => {
     setSelectedCategory,
     activatedDataPacks,
     deleteDataContent,
-    restoreDataContent,
     setHistoryPush,
     resetCurrentData,
+    deleteCategoryGroup,
+    orderCategory,
   } = props;
 
-  const itemsPerPage = 50;
-  const [page, setPage] = useState(1);
+  const [tree, setTree] = useState<TreeData>({ rootId: "root", items: {} });
   const [isScrolling, setIsScrolling] = useState(false);
-  const [deletedItem, setDeletedItem] = useState<number | number[] | null>(null);
-  const [deleteAllVersions, setDeleteAllVersions] = useState(false);
-  const { isVisible, toggleToast, setIsVisible } = useToast();
+  const [deleteGroupCategories, setDeleteGroupCategories] = useState(false);
+  const [itemDragging, setItemDragging] = useState<ItemId | null>(null);
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
+  const { isOpen: isGroupOpen, toggleModal: toggleGroupModal } = useModal();
   const tableRef = useRef<HTMLDivElement>(null);
+  const { setFiltersSelection, resetFilterQuery, filterValues, filterQuery } = useFilterQuery();
 
   const allowedToCreateSiteCategory = usePermission("categories.createSiteTaxonomies");
   const allowedToCreateGlobalCategory = usePermission("global.globalData.createTaxonomies");
@@ -54,9 +94,9 @@ const CategoriesList = (props: IProps): JSX.Element => {
   const allowedToCreateTaxonomy = currentSiteID ? allowedToCreateSiteCategory : allowedToCreateGlobalCategory;
 
   const scope = currentSiteID ? "site" : "global";
-  const currentCategories = categories[scope];
+  const currentCategories = categories[scope].sort(sortBy("title", false));
 
-  const catIds = currentDataContent && currentDataContent.map((cat: any) => cat.id);
+  const catIds = getIDsFromTree(currentDataContent);
 
   const {
     resetBulkSelection,
@@ -68,70 +108,81 @@ const CategoriesList = (props: IProps): JSX.Element => {
     selectAllItems,
   } = useBulkSelection(catIds);
 
-  const getParams = useCallback(() => {
+  const getParams = useCallback((): IGetStructuredDataParams => {
     return {
-      page,
-      itemsPerPage,
-      pagination: true,
+      page: 1,
+      itemsPerPage: 50,
+      pagination: false,
       deleted: false,
       include_draft: false,
+      groupingCategories: true,
+      query: searchQuery,
+      filterQuery,
     };
-  }, [page]);
+  }, [searchQuery, filterQuery]);
 
   const getContents = useCallback(
     async (id: string) => {
-      const params: any = getParams();
+      const params = getParams();
       params.dataID = id;
-      setSelectedCategory(id, scope);
       await getStructuredDataContents(params, currentSiteID);
     },
-    [getStructuredDataContents, currentSiteID, getParams, setSelectedCategory, scope]
+    [getStructuredDataContents, currentSiteID, getParams]
   );
 
-  useEffect(() => {
-    currentStructuredData && getContents(currentStructuredData.id);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [lang, currentStructuredData, page]);
-
   useLayoutEffect(() => {
+    if (currentCategories.length) {
+      setSelectedCategory(currentCategories[0].id, scope);
+    }
     return () => {
       resetCurrentData();
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    currentStructuredData?.taxonomy && getContents(currentStructuredData.id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lang, currentStructuredData, searchQuery, filterValues]);
+
+  useEffect(() => {
+    setTree(normalizeItems(currentDataContent, tree));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentDataContent]);
+
   const handleClick = (dataID: string) => {
     setSelectedCategory(dataID, scope);
   };
 
   const { isOpen, toggleModal } = useModal();
 
-  const openModal = () => {
-    resetCategoryValues();
-    toggleModal();
-  };
-
   const rightButtonProps = allowedToCreateTaxonomy
     ? {
         label: "New",
-        action: openModal,
+        action: toggleModal,
       }
     : undefined;
 
   const bulkDelete = async () => {
-    const idsToBeDeleted = getAllLangCategoriesIds(currentDataContent, selectedItems, deleteAllVersions);
-    const deleted = await deleteDataContent(idsToBeDeleted);
-    if (deleted) {
+    const { groups, categories } = filterCategoriesAndGroups(currentDataContent);
+    const idsCatsToBeDeleted = getAllLangCategoriesIds(categories, selectedItems);
+    const idsGroupsToBeDeleted = getAllLangCategoriesIds(groups, selectedItems);
+    const deletedCats = idsCatsToBeDeleted.length && (await deleteDataContent(idsCatsToBeDeleted, false));
+    const deletedGroups =
+      idsGroupsToBeDeleted.length && (await deleteCategoryGroup(idsGroupsToBeDeleted, deleteGroupCategories, false));
+    if (deletedCats || deletedGroups) {
+      currentStructuredData && getContents(currentStructuredData.id);
+      toggleToast(`${selectedItems.all.length} categories and/or groups deleted`);
       unselectAllItems();
-      setDeletedItem(idsToBeDeleted);
       isDeleteOpen && toggleDeleteModal();
-      toggleToast();
+      isGroupOpen && toggleGroupModal();
     }
   };
 
   const handleToggleDeleteModal = () => {
     const selectedCategories = currentDataContent.filter((category) => selectedItems.all.includes(category.id));
-    const hasTranslations = selectedCategories.some((category) => category.dataLanguages.length > 1);
-    hasTranslations ? toggleDeleteModal() : bulkDelete();
+    const hasGroups = selectedCategories.some((category) => category.type === "group");
+    hasGroups ? toggleGroupModal() : toggleDeleteModal();
   };
 
   const unselectAllItems = () => resetBulkSelection();
@@ -142,17 +193,12 @@ const CategoriesList = (props: IProps): JSX.Element => {
 
   const onScroll = (e: any) => setIsScrolling(e.target.scrollTop > 0);
 
-  const undoAction = () => {
-    if (deletedItem) {
-      restoreDataContent(deletedItem);
-    }
-    setIsVisible(false);
-  };
+  const filterItems = async (filterPointer: string, filtersSelected: IQueryValue[]) =>
+    setFiltersSelection(filterPointer, filtersSelected);
 
   const toastProps = {
-    action: () => undoAction(),
     setIsVisible,
-    message: deletedItem ? `Categories deleted` : "",
+    message: toastState,
   };
 
   const bulkActions = allowedToDeleteTaxonomy
@@ -174,6 +220,8 @@ const CategoriesList = (props: IProps): JSX.Element => {
       checkState={checkState}
       isScrolling={isScrolling}
       bulkActions={bulkActions}
+      filterValues={filterValues}
+      filterItems={filterItems}
     />
   );
 
@@ -185,11 +233,121 @@ const CategoriesList = (props: IProps): JSX.Element => {
     setLanguage,
   };
 
-  const pagination = {
-    setPage,
-    itemsPerPage,
-    totalItems,
-    currPage: page,
+  const getIcon = (item: TreeItem, onExpand: (itemId: ItemId) => void, onCollapse: (itemId: ItemId) => void) => {
+    const handleCollapse = (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent) => {
+      e.stopPropagation();
+      onCollapse(item.id);
+    };
+
+    const handleExpand = (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent) => {
+      e.stopPropagation();
+      onExpand(item.id);
+    };
+
+    if (item.children && item.children.length > 0) {
+      return item.isExpanded ? (
+        <div onClick={handleCollapse} role="button" tabIndex={0} onKeyDown={handleCollapse}>
+          <Icon name="UpArrow" />
+        </div>
+      ) : (
+        <div onClick={handleExpand} role="button" tabIndex={0} onKeyDown={handleExpand}>
+          <Icon name="DownArrow" />
+        </div>
+      );
+    } else {
+      return <></>;
+    }
+  };
+
+  const renderItem = ({ item, onExpand, onCollapse, provided }: RenderItemParams) => {
+    const category = formatItem(item, tree);
+    const isItemSelected = isSelected(category.id);
+    return (
+      <S.Draggable ref={provided.innerRef} {...provided.draggableProps}>
+        <CategoryItem
+          category={category}
+          key={category.id}
+          languages={availableLanguages}
+          lang={lang}
+          isTranslatable={isTranslatable}
+          isSelected={isItemSelected}
+          onChange={addToBulkSelection}
+          toggleToast={toggleToast}
+          getContents={getContents}
+          icon={getIcon(item, onExpand, onCollapse)}
+          dragHandleProps={provided.dragHandleProps}
+        />
+      </S.Draggable>
+    );
+  };
+
+  const onExpand = (itemId: ItemId) => {
+    const newTree = mutateTree(tree, itemId, { isExpanded: true });
+    setTree(newTree);
+  };
+
+  const onCollapse = (itemId: ItemId) => {
+    const newTree = mutateTree(tree, itemId, { isExpanded: false });
+    setTree(newTree);
+  };
+
+  const onDragStart = (item: ItemId) => setItemDragging(item);
+
+  const onDragEnd = async (source: TreeSourcePosition, destination?: TreeDestinationPosition) => {
+    if (!destination) {
+      setItemDragging(null);
+      return;
+    }
+
+    if (destination.index === source.index && destination.parentId === source.parentId) {
+      setItemDragging(null);
+      return;
+    }
+
+    const item = itemDragging ? findChild(tree, itemDragging) : null;
+
+    if (!item) {
+      setItemDragging(null);
+      return;
+    }
+
+    const { parentId } = destination;
+    const parentIdNumber = parentId === "root" ? 0 : parseInt(parentId as string);
+    const parent: any = getElementsFromTree(tree).find((data: any) => data.id === parentIdNumber);
+
+    if (parentId === "root" || parent?.type === "group") {
+      const newTree = moveItemOnTree(tree, source, destination);
+      newTree.items[parentId].isExpanded = true;
+      setTree(newTree);
+
+      const isGoingUp =
+        (destination.parentId === source.parentId &&
+          destination.index !== undefined &&
+          destination.index < source.index) ||
+        destination.parentId !== source.parentId;
+
+      const index =
+        destination.index !== undefined
+          ? destination.index - (isGoingUp ? 1 : 0)
+          : parent
+          ? parent.children.length - 1
+          : 0;
+
+      const itemDestination = findChildByIndex(tree, parentId, index);
+
+      const params: IOrderCategoryParams = {
+        contentId: item.id,
+        type: item.type,
+        position: itemDestination ? itemDestination.position + 1 : 1,
+        parentGroup: parentIdNumber,
+        structuredData: item.structuredData,
+        relatedSite: currentSiteID || null,
+        language: lang.id,
+      };
+
+      await orderCategory(params);
+      setItemDragging(null);
+    }
   };
 
   const isEmpty = currentDataContent && currentDataContent.length === 0;
@@ -200,16 +358,23 @@ const CategoriesList = (props: IProps): JSX.Element => {
       ? `To start using ${categoryName} categories, create as many of them as yo need.`
       : "To start using categories in your site, you must active all Content type packages as you need.",
     button: hasCategories ? `Create ${categoryName} category` : "Activate Content type packages",
-    action: hasCategories ? openModal : () => setHistoryPush("/sites/settings/content-types"),
+    action: hasCategories ? toggleModal : () => setHistoryPush("/sites/settings/content-types"),
   };
 
   const mainDeleteModalAction = {
-    title: "Delete categories",
+    title: "Yes, delete it",
     onClick: bulkDelete,
   };
 
   const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
 
+  const mainDeleteGroupModalAction = {
+    title: "Delete",
+    onClick: bulkDelete,
+  };
+
+  const secondaryDeleteGroupModalAction = { title: "Cancel", onClick: toggleGroupModal };
+
   return (
     <MainWrapper
       title="Categories"
@@ -217,6 +382,8 @@ const CategoriesList = (props: IProps): JSX.Element => {
       language={lang}
       availableLanguages={availableLanguages}
       languageActions={languageActions}
+      searchAction={setSearchQuery}
+      searchValue={searchQuery}
     >
       <S.CategoryListWrapper>
         <CategoryNav
@@ -224,52 +391,71 @@ const CategoriesList = (props: IProps): JSX.Element => {
           categories={currentCategories}
           onClick={handleClick}
           dataPacks={activatedDataPacks}
-          setSelectedCategory={setSelectedCategory}
-          scope={scope}
         />
         <S.TableWrapper>
           <ErrorToast />
-          <TableList
-            tableHeader={TableHeader}
-            pagination={pagination}
-            onScroll={onScroll}
-            hasFixedHeader={true}
-            tableRef={tableRef}
-          >
+          <S.Intro>
+            <S.IntroTitle>Create and manage categories</S.IntroTitle>
+            <div>Define your categories by creating the elements you need and asign them to your content types.</div>
+          </S.Intro>
+          <TableList tableHeader={TableHeader} onScroll={onScroll} hasFixedHeader={true} tableRef={tableRef}>
+            <S.SearchTags>
+              <SearchTagsBar query={searchQuery} setQuery={setSearchQuery} />
+              <FilterTagsBar
+                filters={filterValues}
+                setFilters={setFiltersSelection}
+                resetFilters={resetFilterQuery}
+                labels={{ translated: "Translated" }}
+              />
+            </S.SearchTags>
             {isEmpty ? (
               <S.EmptyWrapper>
                 <EmptyState {...emptyStateProps} />
               </S.EmptyWrapper>
             ) : (
-              currentDataContent.map((category: any) => {
-                const isItemSelected = isSelected(category.id);
-                return (
-                  <CategoryItem
-                    category={category}
-                    key={category.id}
-                    languages={availableLanguages}
-                    lang={lang}
-                    isTranslatable={isTranslatable}
-                    isSelected={isItemSelected}
-                    onChange={addToBulkSelection}
-                    toggleToast={toggleToast}
-                    setDeletedItem={setDeletedItem}
-                    getContents={getContents}
+              <>
+                <S.Notification>
+                  Arrange your category list by <strong>drag & drop</strong>. You can move categories between groups,
+                  but <strong>it&apos;s not possible to nest one category within another to create a new group.</strong>
+                </S.Notification>
+                <S.Droppable>
+                  <Tree
+                    tree={tree}
+                    renderItem={renderItem}
+                    onExpand={onExpand}
+                    onCollapse={onCollapse}
+                    onDragEnd={onDragEnd}
+                    onDragStart={onDragStart}
+                    isDragEnabled
+                    isNestingEnabled
                   />
-                );
-              })
+                </S.Droppable>
+              </>
             )}
           </TableList>
         </S.TableWrapper>
       </S.CategoryListWrapper>
-      <CategoryPanel isOpen={isOpen} toggleModal={toggleModal} getContents={getContents} />
-      {isDeleteOpen && <DeleteModal
-        isOpen={isDeleteOpen}
-        toggleModal={toggleDeleteModal}
-        mainModalAction={mainDeleteModalAction}
-        secondaryModalAction={secondaryDeleteModalAction}
-        {...{ deleteAllVersions, setDeleteAllVersions }}
-      />}
+      {isOpen && (
+        <CategoryPanel isOpen={isOpen} toggleModal={toggleModal} getContents={getContents} toggleToast={toggleToast} />
+      )}
+      {isDeleteOpen && (
+        <DeleteModal
+          isOpen={isDeleteOpen}
+          toggleModal={toggleDeleteModal}
+          mainModalAction={mainDeleteModalAction}
+          secondaryModalAction={secondaryDeleteModalAction}
+        />
+      )}
+      {isGroupOpen && (
+        <DeleteGroupModal
+          isOpen={isGroupOpen}
+          toggleModal={toggleGroupModal}
+          mainModalAction={mainDeleteGroupModalAction}
+          secondaryModalAction={secondaryDeleteGroupModalAction}
+          deleteGroupCategories={deleteGroupCategories}
+          setDeleteGroupCategories={setDeleteGroupCategories}
+        />
+      )}
       {isVisible && <Toast {...toastProps} />}
     </MainWrapper>
   );
@@ -280,7 +466,7 @@ const mapStateToProps = (state: IRootState) => ({
   currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
   siteLanguages: state.sites.currentSiteLanguages,
   globalLangs: state.app.globalLangs,
-  currentDataContent: state.structuredData.currentDataContent,
+  currentDataContent: state.structuredData.currentDataCategory,
   currentStructuredData: state.structuredData.currentStructuredData,
   lang: state.app.lang,
   totalItems: state.sites.totalItems,
@@ -289,24 +475,24 @@ const mapStateToProps = (state: IRootState) => ({
 
 interface IDispatchProps {
   getStructuredDataContents(params: IGetStructuredDataParams, siteID: number | null): Promise<void>;
-  resetCategoryValues(): void;
   setLanguage(lang: { locale: string; id: number | null }): void;
   setSelectedCategory(id: string, scope: string): void;
-  deleteDataContent(catID: number[]): Promise<boolean>;
-  restoreDataContent(catID: number | number[]): void;
+  deleteDataContent(catID: number[], refresh?: boolean): Promise<boolean>;
   setHistoryPush(path: string): void;
   resetCurrentData(): Promise<void>;
+  deleteCategoryGroup(id: number | number[], deleteChildren: boolean, refresh?: boolean): Promise<boolean>;
+  orderCategory(params: IOrderCategoryParams): Promise<boolean>;
 }
 
 interface ICategoriesProps {
   currentSiteID: number | null;
-  currentDataContent: IStructuredDataContent[];
+  currentDataContent: (IStructuredDataCategory | ICategoryGroup)[];
   currentStructuredData: IStructuredData | null;
-  lang: { locale: string; id: number | null };
+  lang: { locale: string; id: number };
   siteLanguages: any[];
   globalLangs: any[];
   totalItems: number;
-  categories: any;
+  categories: { global: IStructuredData[]; site: IStructuredData[] };
   activatedDataPacks: IDataPack[];
 }
 
@@ -314,13 +500,13 @@ type IProps = ICategoriesProps & IDispatchProps;
 
 const mapDispatchToProps = {
   getStructuredDataContents: structuredDataActions.getStructuredDataContents,
-  resetCategoryValues: structuredDataActions.resetCategoryValues,
   setLanguage: appActions.setLanguage,
   setSelectedCategory: structuredDataActions.setSelectedCategory,
   deleteDataContent: structuredDataActions.deleteStructuredDataContent,
-  restoreDataContent: structuredDataActions.restoreStructuredDataContent,
+  deleteCategoryGroup: structuredDataActions.deleteCategoryGroup,
   setHistoryPush: appActions.setHistoryPush,
   resetCurrentData: structuredDataActions.resetCurrentData,
+  orderCategory: structuredDataActions.orderCategory,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(CategoriesList);