From 67ca2e686c69d870c3b339c42e1b8f3885913d25 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Wed, 10 Jul 2024 15:11:07 -0400
Subject: [PATCH] Removed modal and added inline editting

---
 .../TabPanels/Account/TeamPanel.jsx           | 142 ++++++------------
 Client/src/Pages/Account/index.css            |   5 -
 Client/src/assets/icons/edit.svg              |   3 +
 3 files changed, 48 insertions(+), 102 deletions(-)
 create mode 100644 Client/src/assets/icons/edit.svg

diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index d83229bea..471752dfa 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -20,6 +20,7 @@ import {
 import ButtonSpinner from "../../ButtonSpinner";
 import Button from "../../Button";
 import { useState } from "react";
+import EditSvg from "../../../assets/icons/edit.svg?react";
 
 /**
  * TeamPanel component manages the organization and team members,
@@ -100,37 +101,25 @@ const TeamPanel = () => {
   //TODO - use redux loading state
   //!! - currently all loading buttons are tied to the same state
   const [isLoading, setIsLoading] = useState(false);
+  //TODO - connect to redux
   const [orgStates, setOrgStates] = useState({
     name: "Bluewave Labs",
     isLoading: false,
-    isOpen: false,
+    isEdit: false,
     newName: "",
   });
-  const toggleOrgModal = (state) => {
-    setOrgStates((prev) => ({
-      ...prev,
-      isOpen: state,
-    }));
-  };
-  const toggleOrgLoading = (state) => {
-    setOrgStates((prev) => ({
-      ...prev,
-      isLoading: state,
-    }));
-  };
-  const handleRenameOrg = () => {
-    toggleOrgLoading(true);
 
-    setTimeout(() => {
-      setOrgStates((prev) => ({
-        ...prev,
-        name: prev.newName !== "" ? prev.newName : prev.name,
-        isLoading: false,
-        isOpen: false,
-        newName: "",
-      }));
-    }, 2000);
+  const toggleEdit = () => {
+    setOrgStates((prev) => ({ ...prev, isEdit: !prev.isEdit }));
   };
+  const handleChange = (event) => {
+    const { value } = event.target;
+    setOrgStates((prev) => ({
+      ...prev,
+      name: value,
+    }));
+  };
+  const handleRename = () => {};
 
   const [teamStates, setTeamStates] = useState({
     members: teamConfig,
@@ -174,7 +163,7 @@ const TeamPanel = () => {
       setIsLoading(false);
     }, 2000);
   };
-  const [toggleInviteModal, setToggleInviteModal] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
   const handleInviteMember = () => {};
   const handleMembersQuery = (type) => {
     let count = 0;
@@ -191,24 +180,39 @@ const TeamPanel = () => {
             <Typography component="h1">Organization name</Typography>
           </Stack>
           <Stack
-            id="org-name-flex-container"
             className="row-stack"
             direction="row"
             justifyContent="flex-end"
-            gap="8px"
+            alignItems="center"
+            sx={{ minHeight: "34px", maxHeight: "34px" }}
           >
-            <ButtonSpinner
-              level="tertiary"
-              label={!orgStates.isLoading ? orgStates.name : ""}
-              disabled
-              onClick={() => toggleOrgModal(true)}
-              isLoading={orgStates.isLoading}
+            <TextField
+              value={orgStates.name}
+              onChange={handleChange}
+              disabled={!orgStates.isEdit}
+              sx={{
+                color: theme.palette.otherColors.bluishGray,
+                "& .Mui-disabled": {
+                  WebkitTextFillColor: "initial !important",
+                },
+                "& .Mui-disabled fieldset": {
+                  borderColor: "transparent !important",
+                },
+              }}
+              inputProps={{
+                sx: { textAlign: "end", padding: theme.gap.small },
+              }}
             />
             <Button
-              level="primary"
-              label="Rename"
-              sx={{ paddingX: "30px" }}
-              onClick={() => toggleOrgModal(true)}
+              level={orgStates.isEdit ? "secondary" : "tertiary"}
+              label={orgStates.isEdit ? "Save" : ""}
+              img={!orgStates.isEdit ? <EditSvg /> : ""}
+              onClick={() => toggleEdit()}
+              sx={{
+                minWidth: 0,
+                paddingX: theme.gap.small,
+                ml: orgStates.isEdit ? theme.gap.small : 0,
+              }}
             />
           </Stack>
         </div>
@@ -218,62 +222,6 @@ const TeamPanel = () => {
           sx={{ marginY: theme.spacing(4) }}
         />
       </form>
-      <Modal
-        aria-labelledby="modal-edit-org-name"
-        aria-describedby="edit-organization-name"
-        open={orgStates.isOpen}
-        onClose={() => toggleOrgModal(false)}
-        disablePortal
-      >
-        <Stack
-          gap="20px"
-          sx={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            width: 400,
-            bgcolor: "white",
-            border: "solid 1px #f2f2f2",
-            borderRadius: `${theme.shape.borderRadius}px`,
-            boxShadow: 24,
-            p: "30px",
-            "&:focus": {
-              outline: "none",
-            },
-          }}
-        >
-          <Typography id="modal-edit-org-name" component="h1">
-            Rename this organization?
-          </Typography>
-          <TextField
-            id="edit-organization-name"
-            placeholder={orgStates.name}
-            spellCheck="false"
-            value={orgStates.newName}
-            onChange={(event) =>
-              setOrgStates((prev) => ({
-                ...prev,
-                newName: event.target.value,
-              }))
-            }
-          ></TextField>
-          <Stack direction="row" gap="10px" mt="10px" justifyContent="flex-end">
-            <Button
-              level="tertiary"
-              label="Cancel"
-              onClick={() => toggleOrgModal(false)}
-            />
-            <ButtonSpinner
-              level="primary"
-              label="Rename"
-              onClick={handleRenameOrg}
-              isLoading={orgStates.isLoading}
-              sx={{ paddingX: "30px" }}
-            />
-          </Stack>
-        </Stack>
-      </Modal>
       <form className="edit-team-form" noValidate spellCheck="false">
         <div className="edit-team-form__wrapper">
           <Typography component="h1">Team members</Typography>
@@ -308,7 +256,7 @@ const TeamPanel = () => {
             level="primary"
             label="Invite a team member"
             sx={{ paddingX: "30px" }}
-            onClick={() => setToggleInviteModal(true)}
+            onClick={() => setIsOpen(true)}
           />
         </div>
         <div className="edit-team-form__wrapper compact">
@@ -460,8 +408,8 @@ const TeamPanel = () => {
       <Modal
         aria-labelledby="modal-invite-member"
         aria-describedby="invite-member-to-team"
-        open={toggleInviteModal}
-        onClose={() => setToggleInviteModal(false)}
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
         disablePortal
       >
         <Stack
@@ -504,7 +452,7 @@ const TeamPanel = () => {
             <Button
               level="tertiary"
               label="Cancel"
-              onClick={() => setToggleInviteModal(false)}
+              onClick={() => setIsOpen(false)}
             />
             <ButtonSpinner
               level="primary"
diff --git a/Client/src/Pages/Account/index.css b/Client/src/Pages/Account/index.css
index d85ada5a7..acf71988b 100644
--- a/Client/src/Pages/Account/index.css
+++ b/Client/src/Pages/Account/index.css
@@ -79,11 +79,6 @@
   color: var(--env-var-color-29);
 }
 
-
-#org-name-flex-container .Mui-disabled {
-  color: var(--env-var-color-2) !important;
-}
-
 .edit-team-form__wrapper td {
   padding: 10px 0;
   padding-top: 20px;
diff --git a/Client/src/assets/icons/edit.svg b/Client/src/assets/icons/edit.svg
new file mode 100644
index 000000000..be2c78408
--- /dev/null
+++ b/Client/src/assets/icons/edit.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.66699 14.3333L5.36651 12.9104C5.60313 12.8194 5.72145 12.7739 5.83214 12.7145C5.93046 12.6617 6.02419 12.6008 6.11235 12.5324C6.21161 12.4554 6.30124 12.3657 6.48051 12.1865L14.0003 4.66665C14.7367 3.93027 14.7367 2.73636 14.0003 1.99998C13.264 1.2636 12.0701 1.2636 11.3337 1.99998L3.81385 9.51979C3.63458 9.69906 3.54494 9.7887 3.46792 9.88795C3.39951 9.97611 3.33859 10.0698 3.28582 10.1682C3.2264 10.2789 3.18089 10.3972 3.08988 10.6338L1.66699 14.3333ZM1.66699 14.3333L3.03907 10.766C3.13726 10.5107 3.18635 10.383 3.27055 10.3246C3.34414 10.2735 3.43519 10.2542 3.52319 10.271C3.62388 10.2902 3.72058 10.3869 3.91398 10.5803L5.42004 12.0863C5.61344 12.2797 5.71014 12.3764 5.72937 12.4771C5.74617 12.5651 5.72685 12.6562 5.67576 12.7298C5.61729 12.814 5.48965 12.8631 5.23437 12.9613L1.66699 14.3333Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>