@griddo/ax 10.3.23 → 10.3.25

package/src/modules/Users/UserList/BulkHeader/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { BulkSelectionOptions } from "@ax/components";
-import { IRole } from "@ax/types";
+import { IQueryValue, IRole } from "@ax/types";
 import { usePermission } from "@ax/hooks";
 import TableHeader from "./TableHeader";
 
@@ -23,13 +23,15 @@ const BulkHeader = (props: IProps): JSX.Element => {
 
   const isAllowedToRemoveUsers = usePermission("usersRoles.removeUsers");
 
-  const bulkActions = isAllowedToRemoveUsers ? [
-    {
-      icon: "delete",
-      text: isSiteView ? "Remove from this site" : "delete",
-      action: bulkDelete,
-    },
-  ] : [];
+  const bulkActions = isAllowedToRemoveUsers
+    ? [
+        {
+          icon: "delete",
+          text: isSiteView ? "Remove from this site" : "delete",
+          action: bulkDelete,
+        },
+      ]
+    : [];
 
   return showBulk ? (
     <BulkSelectionOptions
@@ -56,16 +58,16 @@ const BulkHeader = (props: IProps): JSX.Element => {
 interface IProps {
   showBulk: boolean;
   isSiteView?: boolean;
-  checkState: any;
+  checkState: Record<string, boolean>;
   bulkDelete: () => void;
   selectItems: () => void;
   selectAllItems: () => void;
   totalItems: number;
   isScrolling: boolean;
-  sortItems: (orderPointer: string, isAscending: boolean) => void;
-  sortedListStatus: any;
-  filterValues: any;
-  filterItems: (filterPointer: string, filtersSelected: string) => void;
+  sortItems: (orderPointer: IQueryValue[], isAscending: boolean) => void;
+  sortedListStatus: { isAscending: boolean; sortedByName: boolean; sortedByDateCreated: boolean };
+  filterValues: Record<string, IQueryValue[]>;
+  filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
   roles: IRole[];
 }
 

package/src/modules/Users/UserList/hooks.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { IUsersQueryValues } from "@ax/types";
+import { IQueryValue, IUsersQueryValues } from "@ax/types";
 
 const useSortedListStatus = () => {
   const sortedInitialState: { isAscending: boolean; sortedByName: boolean; sortedByDateCreated: boolean } = {
@@ -16,23 +16,30 @@ const useSortedListStatus = () => {
   };
 };
 
-const useFilterQuery = (): IUseFilterQuery => {
-  const initialQueryValues = {
-    order: "",
-    filterSites: "noFilter",
-    filterRoles: "all",
+const useFilterQuery = () => {
+  const initialQueryValues: Record<string, IQueryValue[]> = {
+    order: [],
+    filterSites: [{ value: "all", label: "All" }],
+    filterRoles: [{ value: "all", label: "All" }],
   };
 
   const [query, setQuery] = useState(initialQueryValues);
+  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
 
   const setFilterQuery = (filterValues: IUsersQueryValues) => {
     const { order, filterSites, filterRoles } = filterValues;
-
-    const filterRolesValue = filterRoles === "all" ? "" : filterRoles;
     let filterQuery = "";
 
-    const currentQuery = (pointer: string, values: string) => {
-      return filterQuery ? filterQuery.concat(`&${pointer}=${values}`) : `?${pointer}=${values}`;
+    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: keyof IUsersQueryValues) => {
@@ -41,40 +48,35 @@ const useFilterQuery = (): IUseFilterQuery => {
 
     if (isNotInitialValue("order")) filterQuery = currentQuery("order", order);
     if (isNotInitialValue("filterSites")) filterQuery = currentQuery("filterSites", filterSites);
-    if (isNotInitialValue("filterRoles")) filterQuery = currentQuery("filterRoles", filterRolesValue);
+    if (isNotInitialValue("filterRoles")) filterQuery = currentQuery("filterRoles", filterRoles);
 
-    return filterQuery;
+    setCurrentFilterQuery(filterQuery);
   };
 
-  const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
+  const setFiltersSelection = (pointer: string, filter: IQueryValue[], isAscendent?: boolean) => {
     const { order, filterSites, filterRoles } = query;
     const orderMethod = isAscendent ? "asc" : "desc";
     const filterValues = {
-      order: pointer === "order" ? `${filter}-${orderMethod}` : order,
+      order: pointer === "order" ? [{ value: `${filter[0].value}-${orderMethod}`, label: filter[0].label }] : order,
       filterSites: pointer === "filterSites" ? filter : filterSites,
       filterRoles: pointer === "filterRoles" ? filter : filterRoles,
     };
 
     setQuery(filterValues);
-
-    return filterValues;
+    setFilterQuery(filterValues);
   };
 
-  const resetFilterQuery = () => setQuery(initialQueryValues);
+  const resetFilterQuery = () => {
+    setQuery(initialQueryValues);
+    setCurrentFilterQuery("");
+  }
 
   return {
     setFiltersSelection,
-    setFilterQuery,
     resetFilterQuery,
     filterValues: query,
+    filterQuery: currentFilterQuery,
   };
 };
 
-interface IUseFilterQuery {
-  setFiltersSelection(pointer: string, filter: string, isAscendent?: boolean): IUsersQueryValues;
-  setFilterQuery(filterValues: IUsersQueryValues): string;
-  resetFilterQuery(): void;
-  filterValues: IUsersQueryValues;
-}
-
 export { useSortedListStatus, useFilterQuery };

package/src/modules/Users/UserList/index.tsx

@@ -1,13 +1,23 @@
 import React, { useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
-import { IRootState, IUser, ISite, IGetRoles, IRole, IGetSitesParams } from "@ax/types";
+import { IRootState, IUser, ISite, IGetRoles, IRole, IGetSitesParams, IQueryValue } from "@ax/types";
 import { useBulkSelection, useModal, usePermission, useToast } from "@ax/hooks";
 import { appActions } from "@ax/containers/App";
 import { usersActions } from "@ax/containers/Users";
 import { sitesActions } from "@ax/containers/Sites";
 
-import { MainWrapper, TableList, ErrorToast, EmptyState, Modal, Nav, Toast } from "@ax/components";
+import {
+  MainWrapper,
+  TableList,
+  ErrorToast,
+  EmptyState,
+  Modal,
+  Nav,
+  Toast,
+  SearchTagsBar,
+  FilterTagsBar,
+} from "@ax/components";
 
 import BulkHeader from "./BulkHeader";
 import UserItem from "./UserItem";
@@ -40,11 +50,10 @@ const UserList = (props: IUserListProps): JSX.Element => {
   const [page, setPage] = useState(1);
   const [isScrolling, setIsScrolling] = useState(false);
   const [searchQuery, setSearchQuery] = useState<string>("");
-  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
   const [usersDeleted, setUSersDeleted] = useState(1);
 
   const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
-  const { setFiltersSelection, setFilterQuery, filterValues } = useFilterQuery();
+  const { setFiltersSelection, resetFilterQuery, filterValues, filterQuery } = useFilterQuery();
   const { isVisible, toggleToast, setIsVisible } = useToast();
 
   const tableRef = useRef<HTMLDivElement>(null);
@@ -69,14 +78,14 @@ const UserList = (props: IUserListProps): JSX.Element => {
 
   useEffect(() => {
     const handleGetUsers = async () => {
-      const query = searchQuery ? (currentFilterQuery ? `&query=${searchQuery}` : `?query=${searchQuery}`) : "";
+      const query = searchQuery ? (filterQuery ? `&query=${searchQuery}` : `?query=${searchQuery}`) : "";
       const currentFilterQuerySite =
-        isSiteView && currentFilterQuery ? `${currentFilterQuery}&site=${currentSiteInfo.id}` : currentFilterQuery;
+        isSiteView && filterQuery ? `${filterQuery}&site=${currentSiteInfo.id}` : filterQuery;
       await getUsers({ filterQuery: currentFilterQuerySite, query }, currentSiteInfo?.id);
     };
     handleGetUsers();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentFilterQuery, searchQuery]);
+  }, [filterQuery, searchQuery]);
 
   useEffect(() => {
     if (wrapperRef.current) {
@@ -88,7 +97,7 @@ const UserList = (props: IUserListProps): JSX.Element => {
   useEffect(() => {
     const handleRolesSites = async () => {
       const siteId = isSiteView ? currentSiteInfo.id : "global";
-      await getRoles({ siteId });
+      await getRoles({ siteId }, undefined, false);
       await getSites({ pagination: false, recentSitesNumber: 0 });
     };
     handleRolesSites();
@@ -139,20 +148,16 @@ const UserList = (props: IUserListProps): JSX.Element => {
       }
     : undefined;
 
-  const sortItems = async (orderPointer: string, isAscending: boolean) => {
+  const sortItems = async (orderPointer: IQueryValue[], isAscending: boolean) => {
     setPage(firstPage);
-    const sortedState = getSortedListStatus(orderPointer, isAscending);
+    const sortedState = getSortedListStatus(orderPointer[0].value.toString(), isAscending);
     setSortedListStatus(sortedState);
-    const filtersSelection = setFiltersSelection("order", orderPointer, isAscending);
-    const filterQuery = setFilterQuery(filtersSelection);
-    setCurrentFilterQuery(filterQuery);
+    setFiltersSelection("order", orderPointer, isAscending);
   };
 
-  const filterItems = async (filterPointer: string, filtersSelected: string) => {
+  const filterItems = async (filterPointer: string, filtersSelected: IQueryValue[]) => {
     setPage(firstPage);
-    const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
-    const filterQuery = setFilterQuery(filtersSelection);
-    setCurrentFilterQuery(filterQuery);
+    setFiltersSelection(filterPointer, filtersSelected);
   };
 
   const handleClick = (id: number) => async () => {
@@ -194,8 +199,18 @@ const UserList = (props: IUserListProps): JSX.Element => {
   const mainDeleteAction = { title: isSiteView ? "Remove from this site" : "Delete Users", onClick: bulkDelete };
   const secondaryDeleteAction = { title: "Cancel", onClick: toggleModal };
 
+  const filterLabels = {
+    filterRoles: "Role",
+    filterSites: "Site",
+  };
+
   return (
-    <MainWrapper title="Users & Roles" rightButton={rightButtonProps} searchAction={setSearchQuery}>
+    <MainWrapper
+      title="Users & Roles"
+      rightButton={rightButtonProps}
+      searchAction={setSearchQuery}
+      searchValue={searchQuery}
+    >
       <S.UsersWrapper ref={wrapperRef} data-testid="users-wrapper">
         <Nav current={currentNavItem} items={navItems} onClick={handleMenuClick} />
         <S.TableListWrapper>
@@ -207,30 +222,41 @@ const UserList = (props: IUserListProps): JSX.Element => {
             hasFixedHeader={true}
             tableRef={tableRef}
           >
-            {isEmpty ? (
-              <S.EmptyWrapper data-testid="empty-wrapper">
-                <EmptyState message="No users found" />
-              </S.EmptyWrapper>
-            ) : (
-              pageUsers &&
-              pageUsers.map((user: any) => {
-                const isItemSelected = isSelected(user.id);
-                return (
-                  <UserItem
-                    siteId={currentSiteInfo?.id}
-                    isSiteView={isSiteView}
-                    key={user.id}
-                    user={user}
-                    sites={sites}
-                    isSelected={isItemSelected}
-                    onChange={addToBulkSelection}
-                    onClick={handleClick(user.id)}
-                    roles={roles}
-                    toggleDeleteToast={handleToggleToast}
-                  />
-                );
-              })
-            )}
+            <>
+              <S.SearchTags>
+                <SearchTagsBar query={searchQuery} setQuery={setSearchQuery} />
+                <FilterTagsBar
+                  filters={filterValues}
+                  setFilters={setFiltersSelection}
+                  resetFilters={resetFilterQuery}
+                  labels={filterLabels}
+                />
+              </S.SearchTags>
+              {isEmpty ? (
+                <S.EmptyWrapper data-testid="empty-wrapper">
+                  <EmptyState message="No users found" />
+                </S.EmptyWrapper>
+              ) : (
+                pageUsers &&
+                pageUsers.map((user: any) => {
+                  const isItemSelected = isSelected(user.id);
+                  return (
+                    <UserItem
+                      siteId={currentSiteInfo?.id}
+                      isSiteView={isSiteView}
+                      key={user.id}
+                      user={user}
+                      sites={sites}
+                      isSelected={isItemSelected}
+                      onChange={addToBulkSelection}
+                      onClick={handleClick(user.id)}
+                      roles={roles}
+                      toggleDeleteToast={handleToggleToast}
+                    />
+                  );
+                })
+              )}
+            </>
           </TableList>
         </S.TableListWrapper>
       </S.UsersWrapper>
@@ -285,7 +311,7 @@ interface IDispatchProps {
   setHistoryPush(route: string): void;
   deleteUser(id: number[]): Promise<boolean>;
   removeUsersBulk(siteId: number, users: number[]): void;
-  getRoles(params: IGetRoles): Promise<void>;
+  getRoles(params: IGetRoles, token?: string, hasLoading?: boolean): Promise<void>;
   getSites(params: IGetSitesParams): Promise<void>;
 }
 

package/src/modules/Users/UserList/style.tsx

@@ -31,4 +31,13 @@ const ModalContent = styled.div`
   }
 `;
 
-export { UsersWrapper, NotificationWrapper, TableListWrapper, EmptyWrapper, ModalContent };
+const SearchTags = styled.div`
+  & > div:nth-child(1) {
+    margin-bottom: ${(p) => p.theme.spacing.xs};
+  }
+  & > div:nth-child(2) {
+    margin-bottom: ${(p) => p.theme.spacing.xs};
+  }
+`;
+
+export { UsersWrapper, NotificationWrapper, TableListWrapper, EmptyWrapper, ModalContent, SearchTags };

package/src/types/index.tsx

@@ -359,6 +359,7 @@ export interface IMenu {
 
 export interface IMenuItem {
   id: number;
+  name: string;
   editorID?: number;
   label: string;
   url: any;
@@ -665,28 +666,33 @@ export interface IStructuredDataSortedInitialState {
 }
 
 export interface IStructuredDataQueryValues {
-  types: string;
-  translated: string;
-  liveStatus: string;
-  order: string;
-  filterSites: string;
-  categories: string;
-  related: string;
+  types: IQueryValue[];
+  translated: IQueryValue[];
+  liveStatus: IQueryValue[];
+  order: IQueryValue[];
+  filterSites: IQueryValue[];
+  categories: IQueryValue[];
+  related: IQueryValue[];
+}
+
+export interface IQueryValue {
+  value: string | number;
+  label: string;
 }
 
 export interface IUsersQueryValues {
-  order: string;
-  filterSites: string;
-  filterRoles: string;
+  order: IQueryValue[];
+  filterSites: IQueryValue[];
+  filterRoles: IQueryValue[];
 }
 
 export interface IRolesQueryValues {
-  order: string;
+  order: IQueryValue[];
 }
 
 export interface ISitesQueryValues {
-  order: string;
-  liveStatus: string;
+  order: IQueryValue[];
+  liveStatus: IQueryValue[];
 }
 
 export interface IDataPackConfigImportCategory {