@griddo/ax 10.1.96 → 10.2.0

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

@@ -2,36 +2,65 @@ import React, { useState, useEffect } from "react";
 import { connect } from "react-redux";
 
 import { appActions } from "@ax/containers/App";
-import { Button, ErrorToast, FieldsBehavior, SearchField } from "@ax/components";
-import { IImage, IRootState, IUser, ISite } from "@ax/types";
-import { useModal } from "@ax/hooks";
+import { Button, ErrorToast, FieldsBehavior, SearchField, Tooltip } from "@ax/components";
+import { IImage, IRootState, IUser, ISite, IRole, ISiteRoles } from "@ax/types";
+import { useModal, usePermission } from "@ax/hooks";
 import { RouteLeavingGuard } from "@ax/guards";
 
 import { timezones } from "../../Settings/Globals/constants";
-import { PasswordModal } from "./atoms";
+import { PasswordModal, TypeChangeModal } from "./atoms";
 import { shouldBeSaved } from "./helpers";
 
 import SiteItem from "../UserCreate/SiteItem";
+import RolesModal from "../UserCreate/SiteItem/RolesModal";
+import RoleItem from "../UserCreate/SiteItem/RolesModal/RoleItem";
+import OptionItem from "../UserCreate/OptionItem";
 
 import * as S from "./style";
 
 const UserForm = (props: IProps) => {
-  const { user, form, setForm, setHistoryPush, currentUser, sites, readOnlySites = false, isSiteView = false } = props;
-  const { id, username, name, email, image, company, description, timezone } = form;
+  const {
+    user,
+    form,
+    setForm,
+    setHistoryPush,
+    currentUser,
+    sites,
+    roles,
+    readOnlySites = false,
+    isSiteView = false,
+    site,
+  } = props;
 
-  const getSortedItemsByName = (items: any) => items.sort((item1: any, item2: any) => item1.name.localeCompare(item2.name));
+  const { id, username, name, email, image, company, description, timezone, isSuperAdmin } = form;
+
+  const getSortedItemsByName = (items: ISite[]) =>
+    items.sort((item1: ISite, item2: ISite) => item1.name.localeCompare(item2.name));
 
   const sortedByNameSites = getSortedItemsByName(sites);
 
   const { isOpen, toggleModal } = useModal(false);
+  const { isOpen: isOpenRoleModal, toggleModal: toggleRoleModal } = useModal(false);
+  const { isOpen: isOpenTypeChangeModal, toggleModal: toggleTypeChangeModal } = useModal(false);
   const [sitesList, setSiteList] = useState(sortedByNameSites);
   const [showMore, setShowMore] = useState(false);
 
+  const isAllowedToAccessSiteGallery = usePermission("mediaGallery.accessToSiteGallery");
+  const isAllowedToAccessGlobalGallery = usePermission("global.mediaGallery.accessToGlobalGallery");
+
+  const allowedRoutes = ["/profile"];
+  const { isDirty } = shouldBeSaved(user, form);
+
+  const isSameUser = currentUser && currentUser.id === user.id;
+  const isEditDisabled = currentUser && !currentUser.isSuperAdmin && isSiteView && !isSameUser;
+  const isAvatarDisabled =
+    (isSiteView && !isAllowedToAccessSiteGallery) || (!isSiteView && !isAllowedToAccessGlobalGallery);
+
   useEffect(() => {
-    if (!form.sites[0]) {
+    if (form.roles.length === 0) {
       setShowMore(true);
     }
-  }, [form.sites]);
+  }, [form.roles]);
 
   const handleImageChange = (value: IImage) => setForm({ ...form, image: value || null });
   const handleNameChange = (value: string) => setForm({ ...form, name: value });
@@ -41,40 +70,92 @@ const UserForm = (props: IProps) => {
   const handleDescriptionChange = (value: string) => setForm({ ...form, description: value });
   const handleTimezoneChange = (value: string) => setForm({ ...form, timezone: value });
 
+  const toggleSuperAdmin = () => {
+    setForm({ ...form, isSuperAdmin: !form.isSuperAdmin });
+    toggleTypeChangeModal();
+  };
+
+  const handleAddRoles = (newRoles: ISiteRoles) => {
+    const oldRoles =
+      newRoles.siteId === "all"
+        ? form.roles.filter((role: ISiteRoles) => role.siteId === "global")
+        : form.roles.filter((role: ISiteRoles) => role.siteId !== newRoles.siteId);
+
+    const updatedRoles = [...oldRoles, newRoles];
+
+    setForm({ ...form, roles: updatedRoles });
+  };
+
+  const getAllSitesWithRoles = () => {
+    const siteRoles = form.roles.find((role: ISiteRoles) => role.siteId === "all");
+    return sites.map((site: ISite) => {
+      return { siteId: site.id, roles: siteRoles ? siteRoles.roles : [] };
+    });
+  };
+
+  const handleAddSiteRoles = (newRoles: number[]) => {
+    if (!site) return;
+    const hasAllSites = form.roles.find((role: ISiteRoles) => role.siteId === "all");
+    const userRoles = hasAllSites ? getAllSitesWithRoles() : form.roles;
+    const oldRoles = userRoles.filter((role: ISiteRoles) => role.siteId !== site.id);
+    const newSiteRoles = { siteId: site.id, roles: newRoles };
+    const updatedRoles = newRoles.length > 0 ? [...oldRoles, newSiteRoles] : oldRoles;
+    setForm({ ...form, roles: updatedRoles });
+  };
+
+  const handleChangeType = (value: string) => {
+    if ((isSuperAdmin && value === "member") || (!isSuperAdmin && value === "superadmin")) {
+      toggleTypeChangeModal();
+    }
+  };
+
   const modalProps = {
     isOpen,
     toggleModal,
     id,
   };
 
+  const mainTypeChangeModalAction = {
+    title: "Change user type",
+    onClick: toggleSuperAdmin,
+  };
+
+  const secondaryTypeChangeModalAction = { title: "Cancel", onClick: toggleTypeChangeModal };
+
+  const modalTypeChangeProps = {
+    isOpen: isOpenTypeChangeModal,
+    toggleModal: toggleTypeChangeModal,
+    email,
+    isSuperAdmin,
+    mainModalAction: mainTypeChangeModalAction,
+    secondaryModalAction: secondaryTypeChangeModalAction,
+  };
+
   const action = (path: string) => setHistoryPush(path);
 
   const filterSitesList = (query: string) => {
-    const filteredSites = sites.filter((site: any) =>
+    const filteredSites = sites.filter((site: ISite) =>
       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 });
+    const { roles } = form;
+    const hasSite = roles.find((siteRole: ISiteRoles) => siteRole.siteId === id);
+    if (hasSite) {
+      const filteredRoles = roles.filter(
+        (siteRole: ISiteRoles) =>
+          (Number.isInteger(id) && siteRole.siteId !== id && siteRole.siteId !== "all") ||
+          (!Number.isInteger(id) && siteRole.siteId !== id)
+      );
+      setForm({ ...form, roles: filteredRoles });
+      if (id === "all") {
+        setShowMore(true);
+      }
     } else {
-      const filteredSites = [...currentSites].filter((site) => site && site !== "all");
-      setForm({ ...form, sites: [...filteredSites, id] });
+      setForm({ ...form, roles: [...form.roles, { siteId: id, roles: [] }] });
     }
   };
 
@@ -84,14 +165,9 @@ const UserForm = (props: IProps) => {
     </>
   );
 
-  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"}
+      {showMore ? "Show less sites & roles" : "Show more sites & roles"}
     </Button>
   );
 
@@ -100,6 +176,32 @@ const UserForm = (props: IProps) => {
     return currentSite.name;
   };
 
+  const sitesID = form.roles.map((roleSite: ISiteRoles) => roleSite.siteId);
+
+  const siteSelectedRoles = isSiteView
+    ? form.roles.find((roleSite: ISiteRoles) => roleSite.siteId === site?.id || roleSite.siteId === "all")
+    : undefined;
+
+  const rolesAll = form.roles.find((roleSite: ISiteRoles) => roleSite.siteId === "all");
+  const allDescription =
+    "The user will have access to all existing and future sites depending on the permissions assigned to the role.";
+
+  const rolesGlobal = form.roles.find((roleSite: ISiteRoles) => roleSite.siteId === "global");
+  const globalDescription = "Global data will be accessible to the user based on the permissions assigned to the role.";
+
+  const AvatarField = () => (
+    <FieldsBehavior
+      title="Avatar profile"
+      name="image"
+      value={image}
+      fieldType="ImageField"
+      onChange={handleImageChange}
+      helptext="Customize how people see you."
+      disabled={isEditDisabled || isAvatarDisabled}
+      site={site}
+    />
+  );
+
   return (
     <>
       <RouteLeavingGuard when={isDirty} action={action} text={text} allowedRoutes={allowedRoutes} />
@@ -107,14 +209,13 @@ const UserForm = (props: IProps) => {
       <S.Wrapper>
         <S.SubTitle>USER DATA</S.SubTitle>
         <S.NameTitle>{user.name}</S.NameTitle>
-        <FieldsBehavior
-          title="Avatar profile"
-          name="image"
-          value={image}
-          fieldType="ImageField"
-          onChange={handleImageChange}
-          helptext="Customize how people see you."
-        />
+        {isAvatarDisabled ? (
+          <Tooltip content="You don't have the permissions to access the images gallery." top={10}>
+            <AvatarField />
+          </Tooltip>
+        ) : (
+          <AvatarField />
+        )}
         <FieldsBehavior
           title="Name"
           name="name"
@@ -123,6 +224,7 @@ const UserForm = (props: IProps) => {
           mandatory
           value={name}
           onChange={handleNameChange}
+          disabled={isEditDisabled}
         />
         <FieldsBehavior
           title="Email"
@@ -132,7 +234,7 @@ const UserForm = (props: IProps) => {
           mandatory
           value={email}
           onChange={handleEmailChange}
-          disabled={isSameUser}
+          disabled={isSameUser || isEditDisabled}
         />
         <FieldsBehavior
           title="Alias"
@@ -143,14 +245,16 @@ const UserForm = (props: IProps) => {
           value={username}
           onChange={handleUsernameChange}
           prefix="@"
+          disabled={isEditDisabled}
         />
         <FieldsBehavior
           title="Company"
           name="company"
           fieldType="TextField"
           placeholder="Type a company"
-          value={company}
+          value={company || ""}
           onChange={handleCompanyChange}
+          disabled={isEditDisabled}
         />
         {isSameUser && (
           <FieldsBehavior
@@ -171,8 +275,9 @@ const UserForm = (props: IProps) => {
           name="description"
           fieldType="TextField"
           placeholder="Type a description"
-          value={description}
+          value={description || ""}
           onChange={handleDescriptionChange}
+          disabled={isEditDisabled}
         />
         <FieldsBehavior
           title="Time zone"
@@ -182,97 +287,208 @@ const UserForm = (props: IProps) => {
           options={timezones}
           onChange={handleTimezoneChange}
           mandatory={true}
+          disabled={isEditDisabled}
         />
-        {isSiteView ? null : (
+        {isSiteView ? (
           <>
             <S.SettingsWrapper>
-              <S.Heading>Sites assigned</S.Heading>
-
-              {form.sites.length > 0 ? (
+              <S.HeadingWrapper>
+                <S.Heading>Roles Assigned</S.Heading>
+                {(!siteSelectedRoles || siteSelectedRoles.roles.length === 0) && (
+                  <Button type="button" buttonStyle="text" onClick={toggleRoleModal} icon="addCircle">
+                    Add Role
+                  </Button>
+                )}
+              </S.HeadingWrapper>
+              <S.SettingContent>
+                <S.SettingText>You can add a one or more roles to this user.</S.SettingText>
+              </S.SettingContent>
+            </S.SettingsWrapper>
+            <S.RoleList>
+              {siteSelectedRoles &&
+                siteSelectedRoles.roles.map((siteRoleId: number) => {
+                  const role = roles.find((role: IRole) => role.id === siteRoleId);
+                  return role && <RoleItem key={role.name} role={role} isReadOnly={true} />;
+                })}
+              {siteSelectedRoles && siteSelectedRoles.roles.length > 0 && (
+                <Button type="button" buttonStyle="line" onClick={toggleRoleModal}>
+                  Manage user roles
+                </Button>
+              )}
+            </S.RoleList>
+            <RolesModal
+              isOpen={isOpenRoleModal}
+              toggleModal={toggleRoleModal}
+              roles={roles}
+              addRoles={handleAddSiteRoles}
+              selectedRoles={siteSelectedRoles ? siteSelectedRoles.roles : []}
+              allSites={siteSelectedRoles && siteSelectedRoles.siteId === "all"}
+              isGlobal={false}
+            />
+          </>
+        ) : (
+          <>
+            {!readOnlySites && (
+              <S.OptionsWrapper>
+                <S.Label>User type</S.Label>
+                <OptionItem
+                  name="superadmin"
+                  title="Super admin"
+                  description="The user will have full access to all features and their configuration. They will also have access to all sites."
+                  onChange={handleChangeType}
+                  value={isSuperAdmin}
+                />
+                <OptionItem
+                  name="member"
+                  title="Member"
+                  description="You can assign a specific role to this user and give them access to all sites or just some of them."
+                  onChange={handleChangeType}
+                  value={!isSuperAdmin}
+                />
+                <S.HelpText>Show the diference between types & roles in our Documentation</S.HelpText>
+              </S.OptionsWrapper>
+            )}
+            {isSuperAdmin && readOnlySites && (
+              <S.SettingsWrapper>
+                <S.Heading>Sites & roles assigned</S.Heading>
                 <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>
+                  <OptionItem
+                    name="superadmin"
+                    title="Super admin"
+                    description="The user will have full access to all features and their configuration. They will also have access to all sites."
+                    onChange={toggleSuperAdmin}
+                    value={isSuperAdmin}
+                    readOnly={readOnlySites}
+                  />
                 </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>
+              </S.SettingsWrapper>
+            )}
+            {!isSuperAdmin && (
+              <S.MemberWrapper>
+                <S.SettingsWrapper>
+                  <S.Heading>Global data Permissions</S.Heading>
+                  <S.SettingContent>
+                    <S.SettingText>The user can have access to global data with specific role.</S.SettingText>
+                  </S.SettingContent>
+                </S.SettingsWrapper>
+                <S.GlobalPermissionsFieldWrapper>
                   <SiteItem
+                    sites={sitesID}
+                    item={{ name: "Global data permissions", id: "global", onChange: selectSite }}
+                    roles={roles}
+                    addRoles={handleAddRoles}
+                    selected={rolesGlobal ? rolesGlobal.roles : []}
+                    featured={true}
+                    description={globalDescription}
                     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.GlobalPermissionsFieldWrapper>
+                <S.SettingsWrapper>
+                  <S.Heading>Sites & roles assigned</S.Heading>
+                  {form.roles.length > 0 ? (
                     <S.SettingContent>
-                      <S.SettingText>You can give access to all sites at the same time.</S.SettingText>
+                      <S.SettingText>
+                        {readOnlySites
+                          ? "You have access to this sites and this specific roles for each one."
+                          : !rolesAll
+                          ? "You can give access to one or more sites to this user and asigned specific roles."
+                          : "You can give access to all sites at the same time."}
+                      </S.SettingText>
                     </S.SettingContent>
+                  ) : null}
+
+                  <S.SiteList>
+                    {!rolesAll &&
+                      form.roles.map((siteRole: ISiteRoles, index: number) => {
+                        if (siteRole.siteId !== "all" && siteRole.siteId !== "global") {
+                          return (
+                            <SiteItem
+                              readOnly={readOnlySites}
+                              disabled={!!rolesAll}
+                              sites={sitesID}
+                              key={`${index}${getSiteName(siteRole.siteId)}`}
+                              item={{ name: getSiteName(siteRole.siteId), id: siteRole.siteId, onChange: selectSite }}
+                              selected={siteRole.roles}
+                              roles={roles}
+                              addRoles={handleAddRoles}
+                            />
+                          );
+                        } else {
+                          return null;
+                        }
+                      })}
+                  </S.SiteList>
+                  {!!rolesAll && (
                     <S.SelectAllSitesFieldWrapper>
                       <SiteItem
                         readOnly={readOnlySites}
-                        sites={form.sites}
-                        item={{ name: "Access to All Sites", id: "all", onChange: selectAllSites }}
+                        sites={sitesID}
+                        item={{ name: "Access to All Sites", id: "all", onChange: selectSite }}
+                        featured={true}
+                        description={allDescription}
+                        roles={roles}
+                        selected={rolesAll ? rolesAll.roles : []}
+                        addRoles={handleAddRoles}
                       />
                     </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) && (
+                  )}
+                  {!showMore && !readOnlySites ? <ShowMoreButton /> : null}
+                </S.SettingsWrapper>
+                {showMore ? (
+                  <>
+                    <S.SubTitle>Sites list</S.SubTitle>
+                    <S.SearchFieldWrapper>
+                      <SearchField
+                        disabled={!!rolesAll}
+                        placeholder="Search"
+                        onChange={filterSitesList}
+                        searchOnEnter={false}
+                      />
+                    </S.SearchFieldWrapper>
+                    {!rolesAll && (
+                      <S.SelectAllSitesFieldWrapper>
                         <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) }}
+                          sites={sitesID}
+                          item={{ name: "Access to All Sites", id: "all", onChange: selectSite }}
+                          featured={true}
+                          description={allDescription}
+                          roles={roles}
+                          selected={[]}
+                          addRoles={handleAddRoles}
                         />
-                      )
-                    );
-                  })}
-                {showMore && form.sites.length > 0 && !readOnlySites ? <ShowMoreButton /> : null}
-              </>
-            ) : null}
+                      </S.SelectAllSitesFieldWrapper>
+                    )}
+                    <S.SiteList>
+                      {sitesList.length > 0 &&
+                        sitesList.map((site: ISite) => {
+                          const rolesSite = form.roles.find((roleSite: any) => roleSite.siteId === site.id);
+                          return (
+                            !form.roles.find((roleSite: ISiteRoles) => roleSite.siteId === site.id) && (
+                              <SiteItem
+                                readOnly={readOnlySites}
+                                disabled={!!rolesAll}
+                                sites={sitesID}
+                                key={site.id}
+                                item={{ name: site.name, id: site.id, onChange: selectSite }}
+                                selected={rolesSite ? rolesSite.roles : []}
+                                roles={roles}
+                                addRoles={handleAddRoles}
+                              />
+                            )
+                          );
+                        })}
+                    </S.SiteList>
+                    {showMore && form.roles.length > 0 && !readOnlySites ? <ShowMoreButton /> : null}
+                  </>
+                ) : null}
+              </S.MemberWrapper>
+            )}
           </>
         )}
       </S.Wrapper>
       <PasswordModal {...modalProps} />
+      <TypeChangeModal {...modalTypeChangeProps} />
     </>
   );
 };
@@ -282,10 +498,11 @@ const mapStateToProps = (state: IRootState) => ({
   isLoading: state.app.isLoading,
   currentUser: state.users.currentUser,
   sites: state.sites.sites,
+  roles: state.users.roles,
 });
 
 interface IDispatchProps {
-  setHistoryPush(path: string): any;
+  setHistoryPush(path: string): void;
 }
 
 const mapDispatchToProps = {
@@ -294,14 +511,16 @@ const mapDispatchToProps = {
 
 interface IProfileProps {
   user: IUser;
-  form: any;
+  form: IUser;
   isSaving: boolean;
   isLoading: boolean;
-  setForm: (form: any) => void;
-  currentUser: IUser;
+  setForm: (form: IUser) => void;
+  currentUser: IUser | null;
   sites: ISite[];
   readOnlySites?: boolean;
   isSiteView?: boolean;
+  roles: IRole[];
+  site: ISite | null;
 }
 
 type IProps = IProfileProps & IDispatchProps;