@griddo/ax 10.1.96 → 10.2.0

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

@@ -3,9 +3,9 @@ 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, ISite, IUser } from "@ax/types";
-import { useModal } from "@ax/hooks";
+import { Loading, MainWrapper, Modal, Toast } from "@ax/components";
+import { IRootState, ISite, ISiteRoles, IUser } from "@ax/types";
+import { useModal, useToast } from "@ax/hooks";
 import UserForm from "../UserForm";
 
 import * as S from "./style";
@@ -14,13 +14,15 @@ const UserEdit = (props: IProps) => {
   const { user, updateUser, isSaving, isLoading, deleteUser, currentUser, setHistoryPush, site, sites } = props;
 
   const { timezone } = user;
-  const initForm = { ...user, sites: user.sites || [] };
+  const initForm = { ...user };
   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();
+  const { isOpen: isOpenAdvise, toggleModal: toggleAdviseModal } = useModal(false);
+  const { isVisible, toggleToast, setIsVisible } = useToast();
 
   useEffect(() => {
     const { timezone } = user;
@@ -29,14 +31,20 @@ const UserEdit = (props: IProps) => {
     setForm(initForm);
   }, [user]);
 
-  const handleSave = () => {
-    form.id && updateUser(form.id, form, false);
+  const handleSave = async () => {
+    if(isOpenAdvise){
+      toggleAdviseModal();
+    }
+    const updated = form.id ? await updateUser(form.id, form, false) : false;
+    if (updated) {
+      toggleToast();
+    }
   };
 
   const rightButtonProps = {
     label: isSaving ? "Saving" : "Update User",
     disabled: isSaving,
-    action: handleSave,
+    action: form.roles.length === 0 && !form.isSuperAdmin ? toggleAdviseModal : handleSave,
   };
 
   const handleDelete = () => {
@@ -49,36 +57,61 @@ const UserEdit = (props: IProps) => {
       });
   };
 
-  const isSameUser = currentUser.id === user.id;
+  const isSameUser = currentUser && currentUser.id === user.id;
+  const isDeleteDisabled = isSiteView && user.isSuperAdmin;
 
-  const rightLineButtonProps = !isSameUser
+  const rightLineButtonProps = !isSameUser && !isDeleteDisabled
     ? {
         label: isSiteView ? "Remove user from this site" : "Delete User",
         action: toggleModal,
       }
     : undefined;
 
-  const getUpdatedSites = (currentUserSiteIds: any) =>
-    currentUserSiteIds[0] === "all"
-      ? sitesIds.filter((id: number) => id !== site.id)
-      : currentUserSiteIds.filter((id: number) => id !== site.id);
+  const getUpdatedSites = () => {
+    const hasAll = form.roles.find((siteRole: ISiteRoles) => siteRole.siteId === "all");
+    if (hasAll) {
+      const oldRoleSites = form.roles.filter((siteRole: ISiteRoles) => siteRole.siteId !== "all");
+      const roleSites = sitesIds
+        .filter((siteId: number) => siteId !== site?.id)
+        .map((siteId: number) => {
+          return { siteId, roles: hasAll.roles };
+        });
+      return [...oldRoleSites, ...roleSites];
+    } else {
+      return form.roles.filter((siteRole: ISiteRoles) => siteRole.siteId !== site?.id);
+    }
+  };
 
-  const removeUserFromSite = () => {
-    const updatedSites = getUpdatedSites(form.sites);
-    const formWithUpdatedSites = { ...form, sites: updatedSites };
+  const removeUserFromSite = async () => {
+    if (!user.id) return;
+    const updatedSites = getUpdatedSites();
+    const formWithUpdatedSites = { ...form, roles: updatedSites };
 
-    user.id &&
-      updateUser(user.id, formWithUpdatedSites, true).then(() => {
-        setHistoryPush(usersRoute);
-      });
+    const updated = await updateUser(user.id, formWithUpdatedSites, true);
+    if (updated) {
+      setHistoryPush(usersRoute);
+    }
   };
 
   const mainDeleteAction = {
     title: isSiteView ? "Remove user" : "Delete User",
     onClick: isSiteView ? removeUserFromSite : handleDelete,
   };
+
   const secondaryDeleteAction = { title: "Cancel", onClick: toggleModal };
 
+  const toastProps = {
+    setIsVisible,
+    message: "User updated",
+  };
+
+  const mainModalAction = {
+    title: "Edit User",
+    onClick: handleSave,
+  };
+
+  const secondaryModalAction = { title: "Cancel", onClick: toggleAdviseModal };
+
   if (isLoading) return <Loading />;
 
   return (
@@ -88,7 +121,7 @@ const UserEdit = (props: IProps) => {
       backLink={true}
       rightLineButton={isSiteView ? rightLineButtonProps : undefined}
     >
-      <UserForm form={form} setForm={setForm} user={user} isSiteView={isSiteView} />
+      <UserForm form={form} setForm={setForm} user={user} isSiteView={isSiteView} site={site} />
       <Modal
         isOpen={isOpen}
         hide={toggleModal}
@@ -115,6 +148,20 @@ const UserEdit = (props: IProps) => {
           </S.ModalContent>
         ) : null}
       </Modal>
+      <Modal
+        isOpen={isOpenAdvise}
+        hide={toggleAdviseModal}
+        title="Edit User?"
+        secondaryAction={secondaryModalAction}
+        mainAction={mainModalAction}
+        size="S"
+      >
+        <S.ModalContent>
+          Before editing an user, <strong>select the user's permissions and site access</strong>. If you proceed without selecting
+          any permissions, the user <strong>won't have access to anything or view any content</strong>.
+        </S.ModalContent>
+      </Modal>
+      {isVisible && <Toast {...toastProps} />}
     </MainWrapper>
   );
 };
@@ -130,7 +177,7 @@ const mapStateToProps = (state: IRootState) => ({
 
 interface IDispatchProps {
   setHistoryPush(path: string): void;
-  updateUser(id: number, data: any, isProfile: boolean): any;
+  updateUser(id: number, data: any, isProfile: boolean): Promise<boolean>;
   deleteUser(id: number): Promise<boolean>;
 }
 
@@ -142,10 +189,10 @@ const mapDispatchToProps = {
 
 interface IProfileProps {
   user: IUser;
-  site: ISite;
+  site: ISite | null;
   isSaving: boolean;
   isLoading: boolean;
-  currentUser: IUser;
+  currentUser: IUser | null;
   sites: ISite[];
 }
 

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

@@ -3,14 +3,35 @@ import { connect } from "react-redux";
 
 import { ErrorToast, FieldsBehavior, Modal } from "@ax/components";
 import { usersActions } from "@ax/containers/Users";
-import { IRootState } from "@ax/types";
+import { IModal, IRootState } from "@ax/types";
 
 import * as S from "./style";
 
-const PasswordForm = (props: IProps) => {
+const TypeChangeModal = (props: ITypeChangeProps): JSX.Element => {
+  const { isOpen, toggleModal, mainModalAction, secondaryModalAction, email, isSuperAdmin } = props;
+
+  const type = isSuperAdmin ? "member" : "Super admin";
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      hide={toggleModal}
+      title="Change user type?"
+      secondaryAction={secondaryModalAction}
+      mainAction={mainModalAction}
+      size="S"
+    >
+      <S.ModalContent>
+        Are you sure you want to change {email} as a {type} user?
+      </S.ModalContent>
+    </Modal>
+  );
+};
+
+const PasswordForm = (props: IPasswordFormProps) => {
   const { id, isOpen, toggleModal, isSaving, updatePassword } = props;
 
-  const initForm = { currentPassword: "", password: "", retypedPassword: "" };
+  const initForm: IState = { currentPassword: "", password: "", retypedPassword: "" };
   const [form, setForm] = useState(initForm);
 
   const handleCurrentPasswordChange = (value: string) => setForm({ ...form, currentPassword: value });
@@ -80,12 +101,17 @@ const PasswordForm = (props: IProps) => {
   );
 };
 
+interface ITypeChangeProps extends IModal {
+  email: string;
+  isSuperAdmin: boolean;
+}
+
 const mapStateToProps = (state: IRootState) => ({
   isSaving: state.app.isSaving,
 });
 
 interface IDispatchProps {
-  updatePassword(id: string, data: any): any;
+  updatePassword(id: number | null, data: IState): Promise<boolean>;
 }
 
 const mapDispatchToProps = {
@@ -93,14 +119,20 @@ const mapDispatchToProps = {
 };
 
 interface IPasswordProps {
-  id: string;
+  id: number | null;
   isOpen: boolean;
-  toggleModal: any;
+  toggleModal: () => void;
   isSaving: boolean;
 }
 
-type IProps = IPasswordProps & IDispatchProps;
+interface IState {
+  currentPassword: string;
+  password: string;
+  retypedPassword: string;
+}
+
+type IPasswordFormProps = IPasswordProps & IDispatchProps;
 
 const PasswordModal = connect(mapStateToProps, mapDispatchToProps)(PasswordForm);
 
-export { PasswordModal };
+export { PasswordModal, TypeChangeModal };