Merge pull request #309 from bluewave-labs/feat/inline-name-edit
Inline editing of the company name, resolves #222
This commit is contained in:
3 files changed
+48
-102
No files matched your search
@@ -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"
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
After Width: | Height: | Size: 1008 B |
Reference in new issue
Block a user