@griddo/ax 1.63.5 → 1.64.2

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

@@ -1,25 +1,34 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 
 import { appActions } from "@ax/containers/App";
 import { usersActions } from "@ax/containers/Users";
 import { Loading, MainWrapper, Modal } from "@ax/components";
-import { IRootState, IUser } from "@ax/types";
+import { IRootState, ISite, IUser } from "@ax/types";
 import { useModal } from "@ax/hooks";
 import UserForm from "../UserForm";
 
 import * as S from "./style";
 
 const UserEdit = (props: IProps) => {
-  const { user, updateUser, isSaving, isLoading, deleteUser, currentUser, setHistoryPush } = props;
+  const { user, updateUser, isSaving, isLoading, deleteUser, currentUser, setHistoryPush, site, sites } = props;
 
   const { timezone } = user;
-  const initForm = { ...user };
+  const initForm = { ...user, sites: user.sites || [] };
   if (!timezone) initForm.timezone = "Europe/Madrid";
-
+  const isSiteView = !!site;
+  const sitesIds = sites.map((site: ISite) => site.id);
+  const usersRoute = isSiteView ? "/sites/users" : "users";
   const [form, setForm] = useState<IUser>(initForm);
   const { isOpen, toggleModal } = useModal();
 
+  useEffect(() => {
+    const { timezone } = user;
+    const initForm = { ...user };
+    if (!timezone) initForm.timezone = "Europe/Madrid";
+    setForm(initForm);
+  }, [user]);
+
   const handleSave = () => {
     form.id && updateUser(form.id, form, false);
   };
@@ -35,7 +44,7 @@ const UserEdit = (props: IProps) => {
       deleteUser(user.id).then((deleted: boolean) => {
         if (deleted) {
           setForm({ ...form, id: null });
-          setHistoryPush("/users");
+          setHistoryPush(usersRoute);
         }
       });
   };
@@ -44,12 +53,30 @@ const UserEdit = (props: IProps) => {
 
   const rightLineButtonProps = !isSameUser
     ? {
-        label: "Delete User",
+        label: isSiteView ? "Remove user from this site" : "Delete User",
         action: toggleModal,
       }
     : undefined;
 
-  const mainDeleteAction = { title: "Delete User", onClick: handleDelete };
+  const getUpdatedSites = (currentUserSiteIds: any) =>
+    currentUserSiteIds[0] === "all"
+      ? sitesIds.filter((id: number) => id !== site.id)
+      : currentUserSiteIds.filter((id: number) => id !== site.id);
+
+  const removeUserFromSite = () => {
+    const updatedSites = getUpdatedSites(form.sites);
+    const formWithUpdatedSites = { ...form, sites: updatedSites };
+
+    user.id &&
+      updateUser(user.id, formWithUpdatedSites, true).then(() => {
+        setHistoryPush(usersRoute);
+      });
+  };
+
+  const mainDeleteAction = {
+    title: isSiteView ? "Remove user" : "Delete User",
+    onClick: isSiteView ? removeUserFromSite : handleDelete,
+  };
   const secondaryDeleteAction = { title: "Cancel", onClick: toggleModal };
 
   if (isLoading) return <Loading />;
@@ -59,22 +86,29 @@ const UserEdit = (props: IProps) => {
       title="Edit User"
       rightButton={rightButtonProps}
       backLink={true}
-      rightLineButton={rightLineButtonProps}
+      rightLineButton={isSiteView ? rightLineButtonProps : undefined}
     >
-      <UserForm form={form} setForm={setForm} user={user} />
+      <UserForm form={form} setForm={setForm} user={user} isSiteView={isSiteView} />
       <Modal
         isOpen={isOpen}
         hide={toggleModal}
-        title="Delete User?"
+        title={isSiteView ? "Remove user from this site?" : "Delete User?"}
         secondaryAction={secondaryDeleteAction}
         mainAction={mainDeleteAction}
       >
         {isOpen ? (
           <S.ModalContent>
-            <p>
-              Are you sure you want to delete <strong>{user.email}</strong>? If you delete it, this user will no longer
-              be able to log in.
-            </p>
+            {isSiteView ? (
+              <p>
+                Are you sure you want to remove <strong>{user.email}</strong> from this site? If you remove it, this
+                user will no longer have access to this site but it will still be able to log in.
+              </p>
+            ) : (
+              <p>
+                Are you sure you want to delete <strong>{user.email}</strong>? If you delete it, this user will no
+                longer be able to log in.
+              </p>
+            )}
             <p>
               This action <strong>cannot be undone</strong>.
             </p>
@@ -87,6 +121,8 @@ const UserEdit = (props: IProps) => {
 
 const mapStateToProps = (state: IRootState) => ({
   user: state.users.userForm,
+  site: state.sites.currentSiteInfo,
+  sites: state.sites.sites,
   isSaving: state.app.isSaving,
   isLoading: state.app.isLoading,
   currentUser: state.users.currentUser,
@@ -106,9 +142,11 @@ const mapDispatchToProps = {
 
 interface IProfileProps {
   user: IUser;
+  site: ISite;
   isSaving: boolean;
   isLoading: boolean;
   currentUser: IUser;
+  sites: ISite[];
 }
 
 type IProps = IProfileProps & IDispatchProps;

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

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { connect } from "react-redux";
 
 import { appActions } from "@ax/containers/App";
-import { ErrorToast, FieldsBehavior } from "@ax/components";
-import { IImage, IRootState, IUser } from "@ax/types";
+import { Button, ErrorToast, FieldsBehavior, SearchField } from "@ax/components";
+import { IImage, IRootState, IUser, ISite } from "@ax/types";
 import { useModal } from "@ax/hooks";
 import { RouteLeavingGuard } from "@ax/guards";
 
@@ -11,14 +11,27 @@ import { timezones } from "../../Settings/Globals/constants";
 import { PasswordModal } from "./atoms";
 import { shouldBeSaved } from "./helpers";
 
+import SiteItem from "../UserCreate/SiteItem";
+
 import * as S from "./style";
 
 const UserForm = (props: IProps) => {
-  const { user, form, setForm, setHistoryPush, currentUser } = props;
-
+  const { user, form, setForm, setHistoryPush, currentUser, sites, readOnlySites = false, isSiteView = false } = props;
   const { id, username, name, email, image, company, description, timezone } = form;
 
+  const getSortedItemsByName = (items: any) => items.sort((item1: any, item2: any) => item1.name.localeCompare(item2.name));
+
+  const sortedByNameSites = getSortedItemsByName(sites);
+
   const { isOpen, toggleModal } = useModal(false);
+  const [sitesList, setSiteList] = useState(sortedByNameSites);
+  const [showMore, setShowMore] = useState(false);
+
+  useEffect(() => {
+    if (!form.sites[0]) {
+      setShowMore(true);
+    }
+  }, [form.sites]);
 
   const handleImageChange = (value: IImage) => setForm({ ...form, image: value || null });
   const handleNameChange = (value: string) => setForm({ ...form, name: value });
@@ -35,16 +48,58 @@ const UserForm = (props: IProps) => {
   };
 
   const action = (path: string) => setHistoryPush(path);
+
+  const filterSitesList = (query: string) => {
+    const filteredSites = sites.filter((site: any) =>
+      site.name.toLowerCase().replace(" ", "").includes(query.toLowerCase().replace(" ", ""))
+    );
+    const sortedSites = getSortedItemsByName(filteredSites);
+    setSiteList(sortedSites);
+  };
+
+  const selectAllSites = () => {
+    const currentSites = form.sites;
+    if (currentSites.includes("all")) {
+      setForm({ ...form, sites: [] });
+      setShowMore(true);
+    } else {
+      setForm({ ...form, sites: ["all"] });
+    }
+  };
+
+  const selectSite = (id: number | string) => {
+    const currentSites = form.sites;
+    if (currentSites.includes(id)) {
+      const filteredSites = [...currentSites].filter((site) => site && site !== id);
+      setForm({ ...form, sites: filteredSites });
+    } else {
+      const filteredSites = [...currentSites].filter((site) => site && site !== "all");
+      setForm({ ...form, sites: [...filteredSites, id] });
+    }
+  };
+
   const text = (
     <>
       Some changes <strong>are not saved</strong>.
     </>
   );
+
   const allowedRoutes = ["/profile"];
   const { isDirty } = shouldBeSaved(user, form);
 
   const isSameUser = currentUser.id === user.id;
 
+  const ShowMoreButton = () => (
+    <Button type="button" buttonStyle="line" onClick={() => setShowMore(!showMore)}>
+      {showMore ? "Show less sites" : "Show more sites"}
+    </Button>
+  );
+
+  const getSiteName = (id: number | string) => {
+    const currentSite = sites.find((site) => site.id === id) || { name: "" };
+    return currentSite.name;
+  };
+
   return (
     <>
       <RouteLeavingGuard when={isDirty} action={action} text={text} allowedRoutes={allowedRoutes} />
@@ -128,6 +183,94 @@ const UserForm = (props: IProps) => {
           onChange={handleTimezoneChange}
           mandatory={true}
         />
+        {isSiteView ? null : (
+          <>
+            <S.SettingsWrapper>
+              <S.Heading>Sites assigned</S.Heading>
+
+              {form.sites.length > 0 ? (
+                <S.SettingContent>
+                  <S.SettingText>
+                    {readOnlySites
+                      ? "You have access to this sites."
+                      : form.sites[0] !== "all"
+                      ? "You can give access to one or more sites to this user."
+                      : "You can give access to all sites at the same time."}
+                  </S.SettingText>
+                </S.SettingContent>
+              ) : null}
+
+              {form.sites[0] !== "all" &&
+                form.sites.map((id: number | string, index: number) => {
+                  if (id && id !== "all") {
+                    return (
+                      <SiteItem
+                        readOnly={readOnlySites}
+                        disabled={form.sites[0] === "all"}
+                        sites={form.sites}
+                        key={`${index}${getSiteName(id)}`}
+                        item={{ name: getSiteName(id), id, onChange: () => selectSite(id) }}
+                      />
+                    );
+                  } else {
+                    return null;
+                  }
+                })}
+              {form.sites[0] === "all" && (
+                <S.SelectAllSitesFieldWrapper>
+                  <SiteItem
+                    readOnly={readOnlySites}
+                    sites={form.sites}
+                    item={{ name: "Access to All Sites", id: "all", onChange: selectAllSites }}
+                  />
+                </S.SelectAllSitesFieldWrapper>
+              )}
+              {!showMore && !readOnlySites ? <ShowMoreButton /> : null}
+            </S.SettingsWrapper>
+            {showMore ? (
+              <>
+                {form.sites[0] !== "all" && (
+                  <>
+                    <S.SettingContent>
+                      <S.SettingText>You can give access to all sites at the same time.</S.SettingText>
+                    </S.SettingContent>
+                    <S.SelectAllSitesFieldWrapper>
+                      <SiteItem
+                        readOnly={readOnlySites}
+                        sites={form.sites}
+                        item={{ name: "Access to All Sites", id: "all", onChange: selectAllSites }}
+                      />
+                    </S.SelectAllSitesFieldWrapper>
+                  </>
+                )}
+                <S.SubTitle>Sites list</S.SubTitle>
+                <S.SearchFieldWrapper>
+                  <SearchField
+                    disabled={form.sites[0] === "all"}
+                    placeholder="Search"
+                    onChange={filterSitesList}
+                    searchOnEnter={false}
+                  />
+                </S.SearchFieldWrapper>
+                {sitesList.length > 0 &&
+                  sitesList.map((site: ISite) => {
+                    return (
+                      !form.sites.includes(site.id) && (
+                        <SiteItem
+                          readOnly={readOnlySites}
+                          disabled={form.sites[0] === "all"}
+                          sites={form.sites}
+                          key={site.id}
+                          item={{ name: site.name, id: site.id, onChange: () => selectSite(site.id) }}
+                        />
+                      )
+                    );
+                  })}
+                {showMore && form.sites.length > 0 && !readOnlySites ? <ShowMoreButton /> : null}
+              </>
+            ) : null}
+          </>
+        )}
       </S.Wrapper>
       <PasswordModal {...modalProps} />
     </>
@@ -138,6 +281,7 @@ const mapStateToProps = (state: IRootState) => ({
   isSaving: state.app.isSaving,
   isLoading: state.app.isLoading,
   currentUser: state.users.currentUser,
+  sites: state.sites.sites,
 });
 
 interface IDispatchProps {
@@ -155,6 +299,9 @@ interface IProfileProps {
   isLoading: boolean;
   setForm: (form: any) => void;
   currentUser: IUser;
+  sites: ISite[];
+  readOnlySites?: boolean;
+  isSiteView?: boolean;
 }
 
 type IProps = IProfileProps & IDispatchProps;

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

@@ -22,9 +22,47 @@ const ModalContent = styled.div`
   padding: ${p => p.theme.spacing.m};
 `;
 
+const SettingsWrapper = styled.div`
+  position: relative;
+  border-top: 1px solid ${(p) => p.theme.color.uiLine};
+  padding-top: ${(p) => p.theme.spacing.m};
+`;
+
+const Heading = styled.div`
+  ${(p) => p.theme.textStyle.headingXS};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  padding-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const SettingContent = styled.div`
+  padding-bottom: ${(p) => p.theme.spacing.m};
+`;
+
+const SettingText = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  width: calc(${(p) => p.theme.spacing.l} * 12);
+`;
+
+const SearchFieldWrapper = styled.div`
+  padding-top: ${(p) => p.theme.spacing.xs};
+  padding-bottom: ${(p) => p.theme.spacing.xs};
+  max-width: calc(${(p) => p.theme.spacing.l} * 7);
+`;
+
+const SelectAllSitesFieldWrapper = styled.div`
+  padding-bottom: ${(p) => p.theme.spacing.s};
+`;
+
 export {
   Wrapper,
   NameTitle,
   SubTitle,
-  ModalContent
-};
+  ModalContent,
+  SettingsWrapper,
+  SettingText,
+  SettingContent,
+  Heading,
+  SearchFieldWrapper,
+  SelectAllSitesFieldWrapper
+};

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

@@ -1,11 +1,22 @@
 import React from "react";
 
-import { CheckField, TableCounter } from "@ax/components";
+import { CheckField, TableCounter, SiteFilter } from "@ax/components";
+
 import Name from "../../HeaderMenus/Name";
+
 import * as S from "./style";
 
 const TableHeader = (props: IProps) => {
-  const { totalItems, selectAllItems, isScrolling, sortItems, sortedListStatus } = props;
+  const {
+    totalItems,
+    selectAllItems,
+    isScrolling,
+    sortItems,
+    filterItems,
+    sortedListStatus,
+    filterValues,
+    showSiteFilter = true,
+  } = props;
 
   return (
     <S.TableHeader isScrolling={isScrolling}>
@@ -23,6 +34,30 @@ const TableHeader = (props: IProps) => {
       <S.NameWrapper>
         <Name sortItems={sortItems} sortedState={sortedListStatus} />
       </S.NameWrapper>
+      {showSiteFilter ? (
+        <S.NameWrapper>
+          <SiteFilter
+            filterItems={filterItems}
+            value={filterValues}
+            pointer="filterSites"
+            center={false}
+            label="Sites"
+            selectAllOption="noFilter"
+            filters={[
+              {
+                name: "noFilter",
+                value: "noFilter",
+                title: "All",
+              },
+              {
+                name: "all",
+                value: "all",
+                title: "Access to all sites",
+              },
+            ]}
+          />
+        </S.NameWrapper>
+      ) : null}
       <S.ActionsHeader>
         <TableCounter totalItems={totalItems} />
       </S.ActionsHeader>
@@ -33,9 +68,12 @@ const TableHeader = (props: IProps) => {
 interface IProps {
   totalItems: number;
   isScrolling: boolean;
+  showSiteFilter: boolean;
   selectAllItems: () => void;
+  filterItems: (filterPointer: string, filtersSelected: string) => void;
   sortItems: any;
   sortedListStatus: any;
+  filterValues: any;
 }
 
 export default TableHeader;

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

@@ -15,7 +15,6 @@ const CheckHeader = styled(Header as any)`
 `;
 
 const NameWrapper = styled.div`
-  width: 40%;
   flex-grow: 1;
   position: relative;
 `;

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

@@ -12,13 +12,16 @@ const BulkHeader = (props: IProps): JSX.Element => {
     totalItems,
     isScrolling,
     sortItems,
+    filterItems,
     sortedListStatus,
+    filterValues,
+    isSiteView = false,
   } = props;
 
   const bulkActions = [
     {
       icon: "delete",
-      text: "delete",
+      text: isSiteView ? "Remove from this site" : "delete",
       action: bulkDelete,
     },
   ];
@@ -32,17 +35,21 @@ const BulkHeader = (props: IProps): JSX.Element => {
     />
   ) : (
     <TableHeader
+      filterValues={filterValues}
       totalItems={totalItems}
       selectAllItems={selectAllItems}
+      filterItems={filterItems}
       isScrolling={isScrolling}
       sortItems={sortItems}
       sortedListStatus={sortedListStatus}
+      showSiteFilter={!isSiteView}
     />
   );
 };
 
 interface IProps {
   showBulk: boolean;
+  isSiteView?: boolean;
   checkState: any;
   bulkDelete: () => void;
   selectItems: () => void;
@@ -51,6 +58,8 @@ interface IProps {
   isScrolling: boolean;
   sortItems: (orderPointer: string, isAscending: boolean) => void;
   sortedListStatus: any;
+  filterValues: any;
+  filterItems: (filterPointer: string, filtersSelected: string) => void;
 }
 
 export default BulkHeader;

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

@@ -1,24 +1,36 @@
 import React from "react";
 import { connect } from "react-redux";
 
-import { ICheck, IUser } from "@ax/types";
+import { ICheck, IUser, ISite } from "@ax/types";
 import { useModal, useToast } from "@ax/hooks";
 import { getDaysAgo } from "@ax/helpers";
 import { usersActions } from "@ax/containers/Users";
-import { CheckField, Avatar, Modal, Tag, Tooltip, Toast } from "@ax/components";
+import { CheckField, Avatar, Modal, Tag, Tooltip, Toast, ElementsTooltip } from "@ax/components";
 
 import * as S from "./style";
 
 const UserItem = (props: IProps): JSX.Element => {
-  const { user, isSelected, onChange, handleClick, deleteUser, resendInvitation } = props;
+  const {
+    user,
+    sites,
+    siteId,
+    isSelected,
+    onChange,
+    handleClick,
+    deleteUser,
+    updateUser,
+    resendInvitation,
+    isSiteView = false,
+  } = props;
 
   const { isOpen, toggleModal } = useModal();
   const { isVisible, toggleToast, setIsVisible } = useToast();
 
   const handleOnChange = (value: ICheck) => onChange(value);
+  const sitesIds = sites.map((site: ISite) => site.id);
 
   const deleteOption = {
-    label: "delete",
+    label: isSiteView ? "remove from site" : "delete",
     icon: "delete",
     action: () => toggleModal(),
   };
@@ -48,7 +60,20 @@ const UserItem = (props: IProps): JSX.Element => {
 
   const menuOptions = user.status === "invited" ? [resendOption, deleteOption] : [deleteOption];
 
-  const mainDeleteAction = { title: "Delete User", onClick: handleDeleteUser };
+  const getUpdatedSites = (currentUserSiteIds: any) =>
+    currentUserSiteIds[0] === "all"
+      ? sitesIds.filter((id: number) => id !== siteId)
+      : currentUserSiteIds.filter((id: number) => id !== siteId);
+
+  const removeUserFromSite = () => {
+    const updatedSites = getUpdatedSites(user.sites);
+    const updatedUser = { ...user, sites: updatedSites };
+    user.id && updateUser(user.id, updatedUser, false, true).then(() => toggleModal());
+  };
+  const mainDeleteAction = {
+    title: isSiteView ? "Remove user" : "Delete user",
+    onClick: isSiteView ? removeUserFromSite : handleDeleteUser,
+  };
   const secondaryDeleteAction = { title: "Cancel", onClick: toggleModal };
 
   const tagColor = user.status === "invited" ? "#FFBB37" : "#AFC628";
@@ -61,6 +86,17 @@ const UserItem = (props: IProps): JSX.Element => {
     message: "Invitation sended",
   };
 
+  const getSiteNameById = (id: number | string) => {
+    if (id === "all") {
+      return "ALL SITES";
+    } else {
+      const currentSite = sites.find((site: ISite) => site.id === id);
+      return currentSite ? currentSite?.name : "";
+    }
+  };
+
+  const getElementsNames = () => user?.sites.map((id: string | number) => getSiteNameById(id));
+
   return (
     <>
       <S.UserRow role="rowgroup" selected={isSelected}>
@@ -77,11 +113,18 @@ const UserItem = (props: IProps): JSX.Element => {
             <S.UserUsername>@{user.username}</S.UserUsername>
           </S.UserInfo>
         </S.UserCell>
-        <S.StatusCell>
-          <Tooltip content={tooltipText} hideOnClick>
-            <Tag type="status" text={user.status ?? ""} color={tagColor} />
-          </Tooltip>
-        </S.StatusCell>
+        {isSiteView ? null : (
+          <S.UserCell role="cell" onClick={handleClick}>
+            {user?.sites?.length > 0 && <ElementsTooltip elements={getElementsNames()} elementsPerRow={3} defaultElements={3} />}
+          </S.UserCell>
+        )}
+        {isSiteView ? null : (
+          <S.StatusCell>
+            <Tooltip content={tooltipText} hideOnClick>
+              <Tag type="status" text={user.status ?? ""} color={tagColor} />
+            </Tooltip>
+          </S.StatusCell>
+        )}
         <S.ActionsCell role="cell">
           <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />
         </S.ActionsCell>
@@ -89,16 +132,23 @@ const UserItem = (props: IProps): JSX.Element => {
       <Modal
         isOpen={isOpen}
         hide={toggleModal}
-        title="Delete User?"
+        title={isSiteView ? "Remove user from this site?" : "Delete User?"}
         secondaryAction={secondaryDeleteAction}
         mainAction={mainDeleteAction}
       >
         {isOpen ? (
           <S.ModalContent>
-            <p>
-              Are you sure you want to delete <strong>{user.email}</strong>? If you delete it, this user will no longer
-              be able to log in.
-            </p>
+            {isSiteView ? (
+              <p>
+                Are you sure you want to remove <strong>{user.email}</strong> from this site? If you remove it, this
+                user will no longer have access to this site but it will still be able to log in.
+              </p>
+            ) : (
+              <p>
+                Are you sure you want to delete <strong>{user.email}</strong>? If you delete it, this user will no
+                longer be able to log in.
+              </p>
+            )}
             <p>
               This action <strong>cannot be undone</strong>.
             </p>
@@ -112,17 +162,22 @@ const UserItem = (props: IProps): JSX.Element => {
 
 interface IUserItemProps {
   user: IUser;
+  siteId?: number;
+  sites: ISite[];
   isSelected: boolean;
+  isSiteView?: boolean;
   onChange: (value: ICheck) => void;
   handleClick: (id: number) => void;
 }
 
 const mapDispatchToProps = {
   deleteUser: usersActions.deleteUser,
+  updateUser: usersActions.updateUser,
   resendInvitation: usersActions.resendInvitation,
 };
 
 interface IDispatchProps {
+  updateUser(id: number, data: any, isProfile: boolean, isList?: boolean): any;
   deleteUser(id: number): Promise<boolean>;
   resendInvitation(id: number): Promise<boolean>;
 }