@griddo/ax 10.4.36 → 10.5.0

package/src/components/Tag/index.tsx

@@ -4,7 +4,7 @@ import { Icon } from "@ax/components";
 import * as S from "./style";
 
 const Tag = (props: ITagProps): JSX.Element => {
-  const { type, text, color, icon, rounded = true, className, onDeleteAction } = props;
+  const { type, text, color, icon, textColor, rounded = true, onDeleteAction, className } = props;
 
   const handleClick = () => {
     if (onDeleteAction) {
@@ -28,7 +28,7 @@ const Tag = (props: ITagProps): JSX.Element => {
       );
     case "square":
       return (
-        <S.TagSquare color={color} className={className} data-testid="tag-square">
+        <S.TagSquare color={color} textColor={textColor} className={className} data-testid="tag-square">
           {icon && (
             <S.IconTag>
               <Icon name={icon} size="16" />
@@ -55,6 +55,7 @@ export interface ITagProps {
   color?: string;
   rounded?: boolean;
   icon?: string;
+  textColor?: string;
   onDeleteAction?: () => void;
   className?: string;
 }

package/src/components/Tag/style.tsx

@@ -12,13 +12,14 @@ const TagStatus = styled.div`
   text-transform: capitalize;
 `;
 
-const TagSquare = styled.div<{ color?: string; }>`
+const TagSquare = styled.div<{ color?: string; textColor?: string }>`
   ${(p) => p.theme.textStyle.uiXS};
   display: flex;
   background-color: ${(p) => (p.color ? p.color : p.theme.colors.uiBackground01)};
   box-sizing: border-box;
   border-radius: ${(p) => p.theme.radii.xs};
-  color: ${(p) => (p.color ? p.theme.color.textMediumEmphasisInverse : p.theme.color.textMediumEmphasis)};
+  color: ${(p) =>
+    p.textColor ? p.textColor : p.color ? p.theme.color.textMediumEmphasisInverse : p.theme.color.textMediumEmphasis};
   white-space: nowrap;
   padding: 3px 8px;
   text-transform: capitalize;
@@ -33,10 +34,10 @@ const Bullet = styled.span<{ color?: string }>`
   margin-right: 4px;
 `;
 
-const TagFixed = styled.div<{ color?: string; rounded: boolean; }>`
+const TagFixed = styled.div<{ color?: string; rounded: boolean }>`
   ${(p) => p.theme.textStyle.uiS};
   background-color: ${(p) => (p.color ? p.color : p.theme.color.interactive02)};
-  border-radius: ${(p) => p.rounded ? p.theme.spacing.s : "0"};
+  border-radius: ${(p) => (p.rounded ? p.theme.spacing.s : "0")};
   box-sizing: border-box;
   color: ${(p) => p.theme.color.textMediumEmphasis};
   display: inline-block;

package/src/containers/StructuredData/actions.tsx

@@ -5,7 +5,6 @@ import {
   SET_CURRENT_STRUCTURED_DATA,
   SET_CURRENT_STRUCTURED_DATA_ID,
   SET_CURRENT_STRUCTURED_DATA_CONTENTS,
-  SET_CATEGORY,
   SET_SCHEMA,
   UPDATE_FORM,
   CREATE_FORM,
@@ -18,6 +17,7 @@ import {
   SET_VALIDATED,
   SET_CONTENT_FILTERS,
   SET_IS_IA_TRANSLATED,
+  SET_CURRENT_DATA_CATEGORY,
   SET_CURRENT_SEARCH,
 } from "./constants";
 
@@ -28,13 +28,13 @@ import {
   ISetCurrentDataID,
   ISetCurrentDataContent,
   ISetIsActive,
-  ISetCategory,
   ISetFilter,
   ISetSchemaVersion,
   ISetErrors,
   ISetValidated,
   ISetContentFilters,
   ISetIsIATranslated,
+  ISetCurrentCategories,
   ISetCurrentSearch,
 } from "./interfaces";
 import {
@@ -47,10 +47,13 @@ import {
 import {
   IStructuredData,
   IStructuredDataContent,
-  ICategory,
   IGetStructuredDataParams,
   IErrorItem,
   IStructuredDataQueryValues,
+  IStructuredDataCategory,
+  ICategoryGroupParams,
+  IRootState,
+  IOrderCategoryParams,
 } from "@ax/types";
 import { structuredData } from "@ax/api";
 import { setTotalItems } from "@ax/containers/Sites/actions";
@@ -73,20 +76,20 @@ function setStructuredData(structuredData: { global: IStructuredData[]; site: IS
   return { type: SET_STRUCTURED_DATA, payload: { structuredData } };
 }
 
-function setCurrentData(currentStructuredData: any): ISetCurrentData {
+function setCurrentData(currentStructuredData: IStructuredData | null): ISetCurrentData {
   return { type: SET_CURRENT_STRUCTURED_DATA, payload: { currentStructuredData } };
 }
 
-function setCurrentDataID(currentStructuredDataId: any): ISetCurrentDataID {
+function setCurrentDataID(currentStructuredDataId: number | null): ISetCurrentDataID {
   return { type: SET_CURRENT_STRUCTURED_DATA_ID, payload: { currentStructuredDataId } };
 }
 
-function setCurrentDataContent(currentDataContent: any): ISetCurrentDataContent {
+function setCurrentDataContent(currentDataContent: IStructuredDataContent[]): ISetCurrentDataContent {
   return { type: SET_CURRENT_STRUCTURED_DATA_CONTENTS, payload: { currentDataContent } };
 }
 
-function setCategory(category: ICategory): ISetCategory {
-  return { type: SET_CATEGORY, payload: { category } };
+function setCurrentDataCategory(currentDataCategory: IStructuredDataCategory[]): ISetCurrentCategories {
+  return { type: SET_CURRENT_DATA_CATEGORY, payload: { currentDataCategory } };
 }
 
 function setSchema(schema: any) {
@@ -101,7 +104,7 @@ function updateForm(form: any) {
   return { type: UPDATE_FORM, payload: { form } };
 }
 
-function setEntity(entity: any) {
+function setEntity(entity: string | null) {
   return { type: SET_ENTITY, payload: { entity } };
 }
 
@@ -240,11 +243,18 @@ function setSelectedCategory(id: string, scope: string): (dispatch: Dispatch, ge
 
 function getStructuredDataContents(
   params: IGetStructuredDataParams,
-  siteID?: number | null
+  siteID?: number | null,
+  hasLoading = true
 ): (dispatch: Dispatch, getState: any) => Promise<void> {
   return async (dispatch, getState) => {
+    const { groupingCategories } = params;
+
     if (!params.dataID) {
-      dispatch(setCurrentDataContent([]));
+      if (groupingCategories) {
+        dispatch(setCurrentDataCategory([]));
+      } else {
+        dispatch(setCurrentDataContent([]));
+      }
       dispatch(setIsLoading(false));
       return;
     }
@@ -263,7 +273,11 @@ function getStructuredDataContents(
       const responseActions = {
         handleSuccess: (response: any) => {
           const { items, totalItems, schemasTimestamp } = response;
-          dispatch(setCurrentDataContent(items));
+          if (groupingCategories) {
+            dispatch(setCurrentDataCategory(items));
+          } else {
+            dispatch(setCurrentDataContent(items));
+          }
           dispatch(setTotalItems(totalItems));
 
           if (!schemaVersion || schemaVersion < schemasTimestamp) {
@@ -275,7 +289,9 @@ function getStructuredDataContents(
 
       const callback = async () => structuredData.getDataContents(params, siteID);
 
-      await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
+      const loading = hasLoading ? [appActions.setIsLoading] : [];
+
+      await handleRequest(callback, responseActions, loading)(dispatch);
     } catch (e) {
       console.log(e);
     }
@@ -301,40 +317,8 @@ function getDataContent(id: number, lang?: { locale: string; id: number }): (dis
   };
 }
 
-function getTranslatedCategory(
-  id: number,
-  lang: { locale: string; id: number }
-): (dispatch: Dispatch) => Promise<void> {
-  return async (dispatch) => {
-    try {
-      const responseActions = {
-        handleSuccess: (response: any) => {
-          const { content } = response;
-          dispatch(
-            setCategory({
-              id: response.id,
-              name: content.title,
-              code: content.code,
-              lang,
-              isTranslation: true,
-              isNew: false,
-            })
-          );
-        },
-        handleError: (response: any) => appActions.handleError(response)(dispatch),
-      };
-
-      const callback = async () => structuredData.getDataContent(id, lang.id);
-
-      await handleRequest(callback, responseActions, [])(dispatch);
-    } catch (e) {
-      console.log(e); // TODO: capturar error bien
-    }
-  };
-}
-
 function createStructuredDataContent(
-  structuredDataContent: IStructuredDataContent,
+  structuredDataContent: IStructuredDataContent | IStructuredDataCategory,
   langId?: number | null
 ): (dispatch: Dispatch, getState: any) => Promise<boolean> {
   return async (dispatch, getState) => {
@@ -373,7 +357,7 @@ function createStructuredDataContent(
 }
 
 function updateStructuredDataContent(
-  structuredDataContent: IStructuredDataContent
+  structuredDataContent: IStructuredDataContent | IStructuredDataCategory
 ): (dispatch: Dispatch, getState: any) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
@@ -395,28 +379,35 @@ function updateStructuredDataContent(
 
       return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
     } catch (e) {
-      console.log(e); // TODO: capturar error bien
+      console.log(e);
       return false;
     }
   };
 }
 
-function deleteStructuredDataContent(id: number | number[]): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+function deleteStructuredDataContent(
+  id: number | number[],
+  refresh = true
+): (dispatch: Dispatch, getState: any) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
       dispatch(setIsLoading(true));
 
       const {
-        structuredData: { currentFilter },
+        structuredData: { currentFilter, currentStructuredData },
         sites: { currentSiteInfo },
-      } = getState();
+      }: IRootState = getState();
 
-      const params = { ...DEFAULT_PARAMS, dataID: currentFilter };
+      const params = {
+        ...DEFAULT_PARAMS,
+        dataID: currentFilter,
+        groupingCategories: currentStructuredData?.taxonomy || false,
+      };
 
       const siteID = currentSiteInfo && currentSiteInfo.id;
 
       const responseActions = {
-        handleSuccess: () => getStructuredDataContents(params, siteID)(dispatch, getState),
+        handleSuccess: () => refresh && getStructuredDataContents(params, siteID)(dispatch, getState),
         handleError: (response: any) => {
           const {
             data: { message },
@@ -432,7 +423,7 @@ function deleteStructuredDataContent(id: number | number[]): (dispatch: Dispatch
 
       return await handleRequest(callback, responseActions, [])(dispatch);
     } catch (e) {
-      console.log(e); // TODO: capturar error bien
+      console.log(e);
       return false;
     }
   };
@@ -471,34 +462,13 @@ function restoreStructuredDataContent(dataID: number | number[]): (dispatch: Dis
 
       await handleRequest(callback, responseActions, [])(dispatch);
     } catch (e) {
-      console.log(e); // TODO: capturar error bien
-    }
-  };
-}
-
-function setCategoryValues(category: ICategory): (dispatch: Dispatch) => Promise<void> {
-  return async (dispatch) => {
-    try {
-      dispatch(setCategory(category));
-    } catch (e) {
-      console.log("Error", e);
-    }
-  };
-}
-
-function resetCategoryValues(): (dispatch: Dispatch) => Promise<void> {
-  return async (dispatch) => {
-    try {
-      dispatch(setCategory({ name: "", code: "", lang: null, isTranslation: false, isNew: true }));
-      dispatch(setEntity(null));
-    } catch (e) {
-      console.log("Error", e);
+      console.log(e);
     }
   };
 }
 
-function getDistributorContent(data: any): (dispatch: Dispatch, getState: any) => Promise<any> {
-  return async (dispatch, getState) => {
+function getDistributorContent(data: any): (getState: any) => Promise<any> {
+  return async (getState) => {
     try {
       const {
         sites: {
@@ -664,6 +634,123 @@ function resetCurrentData(): (dispatch: Dispatch) => Promise<void> {
   };
 }
 
+function createCategoryGroup(data: ICategoryGroupParams): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+  return async (dispatch, getState) => {
+    try {
+      const {
+        sites: { currentSiteInfo },
+        app: { lang },
+      }: IRootState = getState();
+
+      const dataGroup: ICategoryGroupParams = {
+        ...data,
+        language: data.language ? data.language : lang.id,
+        relatedSite: currentSiteInfo ? currentSiteInfo.id : "global",
+      };
+
+      const responseActions = {
+        handleSuccess: () => null,
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+
+      const callback = async () => structuredData.createGroup(dataGroup);
+
+      return await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
+function updateCategoryGroup(groupID: number, data: ICategoryGroupParams): (dispatch: Dispatch) => Promise<boolean> {
+  return async (dispatch) => {
+    try {
+      const responseActions = {
+        handleSuccess: () => null,
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+
+      const callback = async () => structuredData.updateGroup(groupID, data);
+
+      return await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
+function deleteCategoryGroup(
+  id: number | number[],
+  deleteChildren: boolean,
+  refresh = true
+): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+  return async (dispatch, getState) => {
+    try {
+      const {
+        structuredData: { currentFilter, currentStructuredData },
+        sites: { currentSiteInfo },
+      }: IRootState = getState();
+
+      if (!currentStructuredData) return false;
+
+      dispatch(setIsLoading(true));
+
+      const params = { ...DEFAULT_PARAMS, dataID: currentFilter, groupingCategories: true };
+
+      const siteID = currentSiteInfo ? currentSiteInfo.id : "global";
+
+      const responseActions = {
+        handleSuccess: () => refresh && getStructuredDataContents(params, currentSiteInfo?.id)(dispatch, getState),
+        handleError: (response: any) => {
+          const {
+            data: { message },
+          } = response;
+          const isMultiple = Array.isArray(message) && message.length > 1;
+          const msg = isMultiple ? `The delete action failed due to ${message.length} errors.` : undefined;
+          appActions.handleError(response, isMultiple, msg)(dispatch);
+        },
+      };
+
+      const callback = async () =>
+        Array.isArray(id)
+          ? structuredData.deleteGroupBulk(currentStructuredData.id, siteID, id, deleteChildren)
+          : structuredData.deleteGroup(currentStructuredData.id, siteID, id, deleteChildren);
+
+      return await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
+function orderCategory(data: IOrderCategoryParams): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+  return async (dispatch, getState) => {
+    try {
+      const {
+        structuredData: { currentFilter },
+        sites: { currentSiteInfo },
+      }: IRootState = getState();
+
+      const params = { ...DEFAULT_PARAMS, dataID: currentFilter, groupingCategories: true };
+
+      const responseActions = {
+        handleSuccess: () => getStructuredDataContents(params, currentSiteInfo?.id, false)(dispatch, getState),
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+
+      const callback = async () => structuredData.orderCategory(data);
+
+      return await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
 function updateCurrentSearch(query: string): (dispatch: Dispatch) => Promise<void> {
   return async (dispatch) => {
     try {
@@ -680,7 +767,6 @@ export {
   setStructuredData,
   setCurrentData,
   setCurrentDataID,
-  setCategory,
   setSchema,
   setForm,
   updateForm,
@@ -693,11 +779,8 @@ export {
   createStructuredDataContent,
   updateStructuredDataContent,
   deleteStructuredDataContent,
-  setCategoryValues,
-  resetCategoryValues,
   getDistributorContent,
   setEntity,
-  getTranslatedCategory,
   getDataContent,
   restoreStructuredDataContent,
   setStatusStructuredDataContent,
@@ -711,5 +794,9 @@ export {
   setFormValues,
   setIsTranslated,
   resetCurrentData,
+  createCategoryGroup,
+  updateCategoryGroup,
+  deleteCategoryGroup,
+  orderCategory,
   updateCurrentSearch,
 };

package/src/containers/StructuredData/constants.tsx

@@ -6,7 +6,7 @@ const SET_STRUCTURED_DATA = `${NAME}/SET_STRUCTURED_DATA`;
 const SET_CURRENT_STRUCTURED_DATA = `${NAME}/SET_CURRENT_STRUCTURED_DATA`;
 const SET_CURRENT_STRUCTURED_DATA_ID = `${NAME}/SET_CURRENT_STRUCTURED_DATA_ID`;
 const SET_CURRENT_STRUCTURED_DATA_CONTENTS = `${NAME}/SET_CURRENT_STRUCTURED_DATA_CONTENTS`;
-const SET_CATEGORY = `${NAME}/SET_CATEGORY`;
+const SET_CURRENT_DATA_CATEGORY = `${NAME}/SET_CURRENT_CATEGORIES`;
 const SET_SCHEMA = `${NAME}/SET_SCHEMA`;
 const CREATE_FORM = `${NAME}/CREATE_FORM`;
 const UPDATE_FORM = `${NAME}/UPDATE_FORM`;
@@ -36,7 +36,7 @@ export {
   SET_CURRENT_STRUCTURED_DATA,
   SET_CURRENT_STRUCTURED_DATA_ID,
   SET_CURRENT_STRUCTURED_DATA_CONTENTS,
-  SET_CATEGORY,
+  SET_CURRENT_DATA_CATEGORY,
   SET_SCHEMA,
   CREATE_FORM,
   UPDATE_FORM,

package/src/containers/StructuredData/interfaces.tsx

@@ -7,17 +7,23 @@ import {
   SET_SCHEMA,
   UPDATE_FORM,
   SET_IS_ACTIVE,
-  SET_CATEGORY,
   SET_FILTER,
   SET_SCHEMA_VERSION,
   SET_ERRORS,
   SET_VALIDATED,
   SET_CONTENT_FILTERS,
   SET_IS_IA_TRANSLATED,
+  SET_CURRENT_DATA_CATEGORY,
   SET_CURRENT_SEARCH,
 } from "./constants";
 
-import { IStructuredData, IStructuredDataContent, ICategory, IErrorItem, IStructuredDataQueryValues } from "@ax/types";
+import {
+  IStructuredData,
+  IStructuredDataContent,
+  IErrorItem,
+  IStructuredDataQueryValues,
+  IStructuredDataCategory,
+} from "@ax/types";
 
 export interface ISetCategories {
   type: typeof SET_CATEGORIES;
@@ -36,12 +42,7 @@ export interface ISetCurrentData {
 
 export interface ISetCurrentDataID {
   type: typeof SET_CURRENT_STRUCTURED_DATA_ID;
-  payload: { currentStructuredDataId: number };
-}
-
-export interface ISetCategory {
-  type: typeof SET_CATEGORY;
-  payload: { category: ICategory };
+  payload: { currentStructuredDataId: number | null };
 }
 
 export interface ISetSchema {
@@ -53,6 +54,11 @@ export interface ISetCurrentDataContent {
   payload: { currentDataContent: IStructuredDataContent[] };
 }
 
+export interface ISetCurrentCategories {
+  type: typeof SET_CURRENT_DATA_CATEGORY;
+  payload: { currentDataCategory: IStructuredDataCategory[] };
+}
+
 export interface IUpdateForm {
   type: typeof UPDATE_FORM;
   payload: { value: any };
@@ -104,4 +110,5 @@ export type StructuredDataActionsCreators = CategoryActionsCreators &
   ISetStructuredData &
   ISetCurrentData &
   ISetCurrentDataID &
-  ISetCurrentDataContent;
+  ISetCurrentDataContent &
+  ISetCurrentCategories;

package/src/containers/StructuredData/reducer.tsx

@@ -1,11 +1,16 @@
-import { IStructuredData, IStructuredDataContent, ICategory, IErrorItem, IStructuredDataQueryValues } from "@ax/types";
+import {
+  IStructuredData,
+  IStructuredDataContent,
+  IErrorItem,
+  IStructuredDataQueryValues,
+  IStructuredDataCategory,
+} from "@ax/types";
 import {
   SET_CATEGORIES,
   SET_STRUCTURED_DATA,
   SET_CURRENT_STRUCTURED_DATA,
   SET_CURRENT_STRUCTURED_DATA_ID,
   SET_CURRENT_STRUCTURED_DATA_CONTENTS,
-  SET_CATEGORY,
   SET_SCHEMA,
   CREATE_FORM,
   UPDATE_FORM,
@@ -17,11 +22,10 @@ import {
   SET_VALIDATED,
   SET_CONTENT_FILTERS,
   SET_IS_IA_TRANSLATED,
+  SET_CURRENT_DATA_CATEGORY,
   SET_CURRENT_SEARCH,
 } from "./constants";
 
-import { StructuredDataActionsCreators } from "./interfaces";
-
 export interface IStructuredDataState {
   isActive: boolean;
   categories: { global: IStructuredData[]; site: IStructuredData[] };
@@ -29,7 +33,7 @@ export interface IStructuredDataState {
   currentStructuredData: IStructuredData | null;
   currentStructuredDataId: number | null;
   currentDataContent: IStructuredDataContent[];
-  category: ICategory;
+  currentDataCategory: IStructuredDataCategory[];
   schema: any;
   form: any;
   entity: string | null;
@@ -49,7 +53,7 @@ export const initialState = {
   currentStructuredData: null,
   currentStructuredDataId: null,
   currentDataContent: [],
-  category: { name: "", code: "", lang: null, isTranslation: false, isNew: true },
+  currentDataCategory: [],
   schema: {},
   form: {},
   entity: null,
@@ -69,7 +73,7 @@ export function reducer(state = initialState, action: any): IStructuredDataState
     case SET_CURRENT_STRUCTURED_DATA:
     case SET_CURRENT_STRUCTURED_DATA_ID:
     case SET_CURRENT_STRUCTURED_DATA_CONTENTS:
-    case SET_CATEGORY:
+    case SET_CURRENT_DATA_CATEGORY:
     case SET_SCHEMA:
     case CREATE_FORM:
     case UPDATE_FORM:

package/src/containers/StructuredData/utils.tsx

@@ -1,7 +1,7 @@
 import { deepClone } from "@ax/helpers";
-import { IStructuredDataContent, IStructuredData, ISchemaField } from "@ax/types";
+import { IStructuredDataContent, IStructuredData, ISchemaField, IStructuredDataCategory } from "@ax/types";
 
-const prepareStructuredDataContent = (structuredDataContent: IStructuredDataContent) => {
+const prepareStructuredDataContent = (structuredDataContent: IStructuredDataContent | IStructuredDataCategory) => {
   return { ...structuredDataContent, content: structuredDataContent.content };
 };
 

package/src/global.d.ts

@@ -1,6 +1,5 @@
 declare module "node";
 declare module "components";
-declare module "@thesaurus/themes";
 declare module "react-froala-wysiwyg";
 declare module "lodash.isequal";
 declare module "is-wsl";

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

@@ -1,10 +1,12 @@
 import React from "react";
 
-import { CheckField, TableCounter } from "@ax/components";
+import { CheckField, TableCounter, TranslationsFilter } from "@ax/components";
+import { IQueryValue } from "@ax/types";
+
 import * as S from "./style";
 
 const TableHeader = (props: IProps) => {
-  const { totalItems, selectAllItems, isScrolling } = props;
+  const { totalItems, selectAllItems, isScrolling, filterItems, filterValues } = props;
   return (
     <S.TableHeader isScrolling={isScrolling}>
       <S.CheckHeader>
@@ -20,7 +22,10 @@ const TableHeader = (props: IProps) => {
       </S.CheckHeader>
       <S.NameHeader>Name</S.NameHeader>
       <S.CodeHeader>Code</S.CodeHeader>
-      <S.TransHeader>Translations</S.TransHeader>
+      <S.SelectHeader>Selectable</S.SelectHeader>
+      <S.TransHeader>
+        <TranslationsFilter filterItems={filterItems} value={filterValues.translated} />
+      </S.TransHeader>
       <S.ActionsHeader>
         <TableCounter totalItems={totalItems} />
       </S.ActionsHeader>
@@ -32,6 +37,8 @@ interface IProps {
   totalItems: number;
   isScrolling: boolean;
   selectAllItems: () => void;
+  filterValues: Record<string, IQueryValue[]>;
+  filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
 }
 
 export default TableHeader;