@griddo/ax 10.4.37 → 10.5.0

package/src/modules/Categories/CategoriesList/BulkHeader/TableHeader/style.tsx

@@ -5,7 +5,7 @@ const TableHeader = styled.div<{ isScrolling?: boolean }>`
   width: 100%;
   display: flex;
   flex-direction: row;
-  padding: ${(p) => p.theme.spacing.m};
+  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.m} ${p.theme.spacing.xs} ${p.theme.spacing.m}`};
   border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
 `;
 
@@ -15,22 +15,28 @@ const CheckHeader = styled(Header)`
 `;
 
 const NameHeader = styled(Header)`
-  width: 40%;
+  flex-grow: 1;
 `;
 
 const CodeHeader = styled(Header)`
-  width: 40%;
+  flex: 0 0 250px;
 `;
 
 const TransHeader = styled(Header)`
-  width: 10%;
+  flex: 0 0 115px;
+  justify-content: center;
+  position: relative;
+`;
+
+const SelectHeader = styled(Header)`
+  flex: 0 0 115px;
   justify-content: center;
 `;
 
 const ActionsHeader = styled(Header)`
-  width: 125px;
+  flex: 0 0 80px;
   padding-right: 0;
   justify-content: flex-end;
 `;
 
-export { TableHeader, CheckHeader, NameHeader, CodeHeader, TransHeader, ActionsHeader };
+export { TableHeader, CheckHeader, NameHeader, CodeHeader, TransHeader, ActionsHeader, SelectHeader };

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

@@ -1,9 +1,20 @@
 import React from "react";
 import { BulkSelectionOptions } from "@ax/components";
+import { IQueryValue } from "@ax/types";
 import TableHeader from "./TableHeader";
 
 const BulkHeader = (props: IProps): JSX.Element => {
-  const { showBulk, checkState, selectItems, selectAllItems, totalItems, isScrolling, bulkActions } = props;
+  const {
+    showBulk,
+    checkState,
+    selectItems,
+    selectAllItems,
+    totalItems,
+    isScrolling,
+    bulkActions,
+    filterItems,
+    filterValues,
+  } = props;
 
   return showBulk ? (
     <BulkSelectionOptions
@@ -13,7 +24,13 @@ const BulkHeader = (props: IProps): JSX.Element => {
       totalItems={totalItems}
     />
   ) : (
-    <TableHeader totalItems={totalItems} selectAllItems={selectAllItems} isScrolling={isScrolling} />
+    <TableHeader
+      totalItems={totalItems}
+      selectAllItems={selectAllItems}
+      isScrolling={isScrolling}
+      filterItems={filterItems}
+      filterValues={filterValues}
+    />
   );
 };
 
@@ -25,6 +42,8 @@ interface IProps {
   totalItems: number;
   isScrolling: boolean;
   bulkActions: { icon: string; text: string; action: () => void }[];
+  filterValues: Record<string, IQueryValue[]>;
+  filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
 }
 
 export default BulkHeader;

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

@@ -3,35 +3,42 @@ import { connect } from "react-redux";
 
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { useModal, usePermission } from "@ax/hooks";
-import { IStructuredDataContent, ICategory, ICheck, IRootState, IDataLanguage } from "@ax/types";
-import { CheckField, FloatingMenu, Flag, LanguageMenu } from "@ax/components";
+import { ICheck, IRootState, IDataLanguage, IStructuredDataCategory, ILanguage, ICategoryGroup } from "@ax/types";
+import { CheckField, FloatingMenu, Flag, LanguageMenu, Icon, Tag } from "@ax/components";
+import { structuredData } from "@ax/api";
+import { isReqOk } from "@ax/helpers";
 import CategoryPanel from "../CategoryPanel";
-import { DeleteModal } from "../atoms";
+import { DeleteGroupModal, DeleteModal } from "../atoms";
+import { isCategory, isCategoryGroup } from "../utils";
 
 import * as S from "./style";
 
 const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
   const {
     category,
-    setCategoryValues,
     deleteStructuredDataContent,
-    resetCategoryValues,
-    setEntity,
-    getTranslatedCategory,
     lang,
     languages,
     isTranslatable,
     isSelected,
     onChange,
     toggleToast,
-    setDeletedItem,
     getContents,
     currentSiteID,
+    dragHandleProps,
+    icon,
+    deleteCategoryGroup,
   } = props;
 
   const { isOpen, toggleModal } = useModal();
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
-  const [deleteAllVersions, setDeleteAllVersions] = useState(false);
+  const { isOpen: isGroupOpen, toggleModal: toggleGroupModal } = useModal();
+  const [deleteGroupCategories, setDeleteGroupCategories] = useState(false);
+  const [translation, setTranslation] = useState<{
+    lang: { locale: string; id: number };
+    isNew: boolean;
+    content: IStructuredDataCategory | ICategoryGroup | null;
+  } | null>(null);
 
   const allowedToEditSiteCategory = usePermission("categories.editSiteTaxonomies");
   const allowedToEditGlobalCategory = usePermission("global.globalData.editTaxonomies");
@@ -41,26 +48,38 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
   const allowedToDeleteTaxonomy = currentSiteID ? allowedToDeleteSiteCategory : allowedToDeleteGlobalCategory;
 
   const { locale } = lang;
-  const { dataLanguages, content } = category;
-  const isTranslated = dataLanguages.length > 1;
+  const { dataLanguages = [], content } = category;
+  const isGroup = category.type === "group";
 
-  const handleClick = () => {
-    resetCategoryValues();
-    setCategoryValues({ name: content.title, code: content.code, lang, isTranslation: false, isNew: false });
+  const handleClick = () => toggleModal();
+
+  const handleCloseModal = () => {
+    setTranslation(null);
     toggleModal();
   };
 
   const handleOnChange = (value: ICheck) => onChange(value);
 
-  const removeItem = async () => {
-    const allPageVersions = dataLanguages.map((lang: IDataLanguage) => lang.id);
-    const catIds = deleteAllVersions ? allPageVersions : category.id;
-    const deleted = await deleteStructuredDataContent(catIds);
+  const removeCategory = async () => {
+    const categoryIDs = dataLanguages.length > 0 ? dataLanguages.map((lang: IDataLanguage) => lang.id) : category.id;
+    const deleted = await deleteStructuredDataContent(categoryIDs);
 
     if (deleted) {
-      setDeletedItem(catIds);
       isDeleteOpen && toggleDeleteModal();
-      toggleToast();
+      toggleToast("1 category deleted");
+    }
+  };
+
+  const removeGroup = async () => {
+    const categoryIDs =
+      dataLanguages && dataLanguages.length > 0 ? dataLanguages.map((lang: IDataLanguage) => lang.id) : category.id;
+    const deleted = await deleteCategoryGroup(categoryIDs, deleteGroupCategories);
+
+    if (deleted) {
+      isGroupOpen && toggleGroupModal();
+      toggleToast(
+        deleteGroupCategories ? "1 grouping category and its categories deleted" : "1 grouping category deleted"
+      );
     }
   };
 
@@ -69,7 +88,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
         {
           label: "delete",
           icon: "delete",
-          action: isTranslated ? toggleDeleteModal : removeItem,
+          action: isGroup ? toggleGroupModal : toggleDeleteModal,
         },
       ]
     : [];
@@ -77,42 +96,50 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
   const getCurrentLanguages = () => {
     const availables: any[] = [];
 
-    dataLanguages.forEach(
-      (dataLang: any) =>
-        languages &&
-        languages.forEach((language) => {
-          if (language.id === dataLang.language) {
-            availables.push(language);
-          }
-        })
-    );
+    dataLanguages &&
+      dataLanguages.forEach(
+        (dataLang: any) =>
+          languages &&
+          languages.forEach((language) => {
+            if (language.id === dataLang.language) {
+              availables.push(language);
+            }
+          })
+      );
 
     return availables;
   };
 
   const currentLanguages = getCurrentLanguages();
 
-  const handleLanguage = (language: any) => () => {
-    const {
-      category: { content, entity, id: idCat },
-    } = props;
-
-    const { locale, id } = language;
+  const getDataTranslation = async (
+    dataID: number,
+    langID: number,
+    type: "category" | "group"
+  ): Promise<IStructuredDataCategory | ICategoryGroup | null> => {
+    const response =
+      type === "group" ? await structuredData.getGroup(dataID) : await structuredData.getDataContent(dataID, langID);
+    if (isReqOk(response?.status)) {
+      return response.data;
+    } else {
+      console.log("Error en getDataTranslation");
+      return null;
+    }
+  };
 
+  const handleLanguage = (language: ILanguage) => async () => {
     const lang = {
-      locale,
-      id,
+      locale: language.locale,
+      id: language.id,
     };
 
     const isNew = currentLanguages.find((l) => l.id === language.id) ? false : true;
-
-    resetCategoryValues();
-    if (isNew) {
-      setCategoryValues({ name: content.title, code: content.code, lang, isTranslation: true, isNew });
-    } else {
-      getTranslatedCategory(idCat, lang);
+    let content: IStructuredDataCategory | ICategoryGroup | null = null;
+    if (!isNew) {
+      const translationLang = category.dataLanguages.find((dataLang) => dataLang.language === lang.id);
+      content = await getDataTranslation(translationLang?.id || category.id, lang.id, category.type);
     }
-    setEntity(entity);
+    setTranslation({ lang, isNew, content });
     toggleModal();
   };
 
@@ -141,37 +168,83 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
   );
 
   const mainDeleteModalAction = {
-    title: "Delete category",
-    onClick: removeItem,
+    title: "Yes, delete it",
+    onClick: removeCategory,
   };
 
   const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
 
+  const mainDeleteGroupModalAction = {
+    title: "Delete",
+    onClick: removeGroup,
+  };
+
+  const secondaryDeleteGroupModalAction = { title: "Cancel", onClick: toggleGroupModal };
+
+  const selectable = isCategoryGroup(category) && category.selectable === false ? false : true;
+
   return (
     <>
       <S.CategoryRow role="rowgroup" selected={isSelected}>
+        <S.HandleCell>
+          <S.IconWrapperDrag role="cell" {...dragHandleProps}>
+            <Icon name="drag" size="16" />
+          </S.IconWrapperDrag>
+          <S.IconWrapper>{icon}</S.IconWrapper>
+        </S.HandleCell>
         <S.CheckCell role="cell">
           <CheckField name="check" value={category.id} checked={isSelected} onChange={handleOnChange} />
         </S.CheckCell>
-        <S.NameCell role="cell" onClick={handleClick} clickable={allowedToEditTaxonomy}>
-          {content.title}
+        <S.NameCell role="cell" onClick={handleClick} clickable={allowedToEditTaxonomy} isGroup={isGroup}>
+          {isGroup && (
+            <S.FolderWrapper>
+              <Icon name="project" size="24" />
+            </S.FolderWrapper>
+          )}
+          <div>{content?.title || ""}</div>
         </S.NameCell>
         <S.CodeCell role="cell" onClick={handleClick} clickable={allowedToEditTaxonomy}>
-          {content.code}
+          {isCategory(category) && category.content ? category.content.code : ""}
         </S.CodeCell>
+        <S.SelectableCell role="cell">
+          <Tag
+            type="square"
+            color={selectable ? "" : "#FFD4C7"}
+            text={selectable ? "Yes" : "No"}
+            textColor={selectable ? "" : "#20224C"}
+          />
+        </S.SelectableCell>
         <S.TransCell role="cell">{translations}</S.TransCell>
         <S.ActionsCell role="cell">
           <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />
         </S.ActionsCell>
       </S.CategoryRow>
-      <CategoryPanel isOpen={isOpen} toggleModal={toggleModal} item={category} getContents={getContents} />
+      {isOpen && (
+        <CategoryPanel
+          isOpen={isOpen}
+          toggleModal={handleCloseModal}
+          item={translation?.content || category}
+          getContents={getContents}
+          translation={translation}
+          toggleToast={toggleToast}
+        />
+      )}
       {isDeleteOpen && (
         <DeleteModal
           isOpen={isDeleteOpen}
           toggleModal={toggleDeleteModal}
           mainModalAction={mainDeleteModalAction}
           secondaryModalAction={secondaryDeleteModalAction}
-          {...{ deleteAllVersions, setDeleteAllVersions, title: category.title }}
+        />
+      )}
+      {isGroupOpen && (
+        <DeleteGroupModal
+          isOpen={isGroupOpen}
+          toggleModal={toggleGroupModal}
+          mainModalAction={mainDeleteGroupModalAction}
+          secondaryModalAction={secondaryDeleteGroupModalAction}
+          deleteGroupCategories={deleteGroupCategories}
+          setDeleteGroupCategories={setDeleteGroupCategories}
         />
       )}
     </>
@@ -179,24 +252,22 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 };
 
 interface IProps {
-  category: IStructuredDataContent;
+  category: IStructuredDataCategory | ICategoryGroup;
   languages: any[];
   lang: { locale: string; id: number | null };
   isTranslatable: boolean;
   isSelected: boolean;
   onChange: (e: any) => void;
-  toggleToast(): void;
-  setDeletedItem(item: number | number[]): void;
+  toggleToast(state: any): void;
   getContents(dataId: string): void;
   currentSiteID: number | null;
+  icon: JSX.Element;
+  dragHandleProps?: any;
 }
 
 interface IDispatchProps {
-  setCategoryValues(value: ICategory): void;
   deleteStructuredDataContent(id: number | number[]): Promise<boolean>;
-  resetCategoryValues(): void;
-  setEntity(entity: string): void;
-  getTranslatedCategory(id: number, lang: { locale: string; id: number }): any;
+  deleteCategoryGroup(id: number | number[], deleteChildren: boolean): Promise<boolean>;
 }
 
 type ICategoryItemProps = IProps & IDispatchProps;
@@ -206,11 +277,8 @@ const mapStateToProps = (state: IRootState) => ({
 });
 
 const mapDispatchToProps = {
-  setCategoryValues: structuredDataActions.setCategoryValues,
   deleteStructuredDataContent: structuredDataActions.deleteStructuredDataContent,
-  resetCategoryValues: structuredDataActions.resetCategoryValues,
-  setEntity: structuredDataActions.setEntity,
-  getTranslatedCategory: structuredDataActions.getTranslatedCategory,
+  deleteCategoryGroup: structuredDataActions.deleteCategoryGroup,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(CategoryItem);

package/src/modules/Categories/CategoriesList/CategoryItem/style.tsx

@@ -4,32 +4,46 @@ import { Cell, Row } from "@ax/components/TableList/TableItem/style";
 import { ActionMenu } from "@ax/components";
 
 const CheckCell = styled(Cell)`
-  padding-left: ${(p) => p.theme.spacing.m};
+  padding-left: 0;
+  padding-right: 0;
   width: 32px;
   label {
     margin-bottom: ${(p) => p.theme.spacing.s};
   }
 `;
 
-const NameCell = styled(Cell)<{ clickable: boolean }>`
+const NameCell = styled(Cell)<{ clickable: boolean; isGroup: boolean }>`
+  ${(p) => p.theme.textStyle.uiL};
+  padding-left: ${(p) => p.theme.spacing.xs};
   pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
-  width: 40%;
+  color: ${(p) => (p.isGroup ? p.theme.color.interactive01 : p.theme.color.textHighEmphasis)};
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: flex-start;
+  flex-grow: 1;
 `;
 
 const ActionsCell = styled(Cell)`
-  width: 125px;
+  flex: 0 0 80px;
 `;
 
 const TransCell = styled(Cell)`
   ${(p) => p.theme.textStyle.uiXS};
-  width: 10%;
+  flex: 0 0 115px;
+  align-items: center;
+`;
+
+const SelectableCell = styled(Cell)`
+  ${(p) => p.theme.textStyle.uiXS};
+  flex: 0 0 115px;
   align-items: center;
 `;
 
 const CodeCell = styled(Cell)<{ clickable: boolean }>`
   ${(p) => p.theme.textStyle.uiXS};
   pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
-  width: 40%;
+  flex: 0 0 250px;
 `;
 
 const StyledActionMenu = styled(ActionMenu)`
@@ -48,6 +62,7 @@ const CategoryRow = styled(Row)`
 `;
 
 const FlagsWrapper = styled.div`
+  display: flex;
   svg {
     margin-right: 2px;
     margin-bottom: -3px; // TODO
@@ -56,4 +71,49 @@ const FlagsWrapper = styled.div`
   }
 `;
 
-export { CheckCell, NameCell, ActionsCell, TransCell, CodeCell, StyledActionMenu, CategoryRow, FlagsWrapper };
+const HandleCell = styled(Cell)`
+  flex-flow: row nowrap;
+  padding: ${(p) => `0 ${p.theme.spacing.xs} 0 0`};
+  align-items: center;
+`;
+
+const IconWrapper = styled.div`
+  div {
+    padding: ${(p) => `${p.theme.spacing.s} 0 ${p.theme.spacing.s} ${p.theme.spacing.xxs}`};
+  }
+`;
+
+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};
+    }
+  }
+`;
+
+const FolderWrapper = styled.div`
+  width: 24px;
+  height: 24px;
+  margin-right: ${(p) => p.theme.spacing.xs};
+`;
+
+export {
+  CheckCell,
+  NameCell,
+  ActionsCell,
+  TransCell,
+  CodeCell,
+  SelectableCell,
+  StyledActionMenu,
+  CategoryRow,
+  FlagsWrapper,
+  IconWrapper,
+  IconWrapperDrag,
+  HandleCell,
+  FolderWrapper,
+};

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

@@ -6,7 +6,7 @@ import { sortBy } from "@ax/helpers";
 import NavItem from "./NavItem";
 
 const CategoryNav = (props: IProps): JSX.Element => {
-  const { current, categories, onClick, dataPacks, setSelectedCategory, scope } = props;
+  const { current, categories, onClick, dataPacks } = props;
 
   return (
     <SubNav>
@@ -16,16 +16,12 @@ const CategoryNav = (props: IProps): JSX.Element => {
           const hasCategories = dataPackCategories.length > 0;
           if (hasCategories) {
             const isFirst = result.length === 0;
-            const orderedCategories = dataPackCategories.sort(sortBy("title", false));
-            if (isFirst && !current) {
-              setSelectedCategory(orderedCategories[0].id, scope);
-            }
             result.push(
               <NavItem
                 key={dataPack.title}
                 isFirst={isFirst}
                 dataPack={dataPack}
-                categories={orderedCategories}
+                categories={dataPackCategories}
                 current={current}
                 onClick={onClick}
               />
@@ -42,8 +38,6 @@ interface IProps {
   categories: IStructuredData[];
   onClick(id: string): void;
   dataPacks: IDataPack[];
-  setSelectedCategory(id: string, scope: string): void;
-  scope: string;
 }
 
 export default CategoryNav;