Team Panel Change Organization Modal
This commit is contained in:
Daniel Cojocea committed
1 parent
dd0767dea4
commit
f8bc872475
2 files changed
+223
-90
No files matched your search
@@ -1,29 +1,50 @@
|
||||
.edit-profile-form,
|
||||
.edit-password-form,
|
||||
.delete-profile-form {
|
||||
.delete-profile-form,
|
||||
.edit-team-form {
|
||||
width: inherit;
|
||||
}
|
||||
.edit-profile-form__wrapper,
|
||||
.delete-profile-form__wrapper {
|
||||
width: 90%;
|
||||
}
|
||||
.edit-password-form {
|
||||
width: 100%;
|
||||
}
|
||||
.edit-profile-form__wrapper,
|
||||
.delete-profile-form__wrapper,
|
||||
.edit-password-form__wrapper {
|
||||
.edit-password-form__wrapper,
|
||||
.edit-team-form__wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.edit-profile-form__wrapper h1.MuiTypography-root,
|
||||
.delete-profile-form__wrapper h1.MuiTypography-root,
|
||||
.edit-password-form__wrapper h1.MuiTypography-root,
|
||||
.edit-team-form__wrapper h1.MuiTypography-root {
|
||||
font-size: 13px;
|
||||
color: var(--env-var-color-2);
|
||||
font-weight: 600;
|
||||
}
|
||||
.edit-profile-form__wrapper p.MuiTypography-root,
|
||||
.delete-profile-form__wrapper p.MuiTypography-root {
|
||||
font-size: 13px;
|
||||
color: var(--env-var-color-2);
|
||||
opacity: 0.6;
|
||||
}
|
||||
#modal-delete-account,
|
||||
#modal-edit-org-name {
|
||||
font-size: 16px;
|
||||
color: var(--env-var-color-2);
|
||||
font-weight: 600;
|
||||
}
|
||||
.edit-profile-form__wrapper:not(:first-of-type),
|
||||
.edit-password-form__wrapper:not(:first-of-type) {
|
||||
.edit-password-form__wrapper:not(:first-of-type),
|
||||
.edit-team-form__wrapper:not(:first-of-type) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.edit-profile-form__wrapper input,
|
||||
.edit-password-form__wrapper input {
|
||||
.edit-password-form__wrapper input,
|
||||
#edit-organization-name {
|
||||
font-size: 13px;
|
||||
padding: 10px;
|
||||
}
|
||||
@@ -51,3 +72,7 @@
|
||||
color: var(--env-var-color-15);
|
||||
fill: var(--env-var-color-15) !important;
|
||||
}
|
||||
|
||||
.edit-team-form .Mui-disabled {
|
||||
color: var(--env-var-color-2) !important;
|
||||
}
|
||||
@@ -69,6 +69,12 @@ const passwordConfig = {
|
||||
type: "notice",
|
||||
},
|
||||
};
|
||||
const orgConfig = {
|
||||
name: "Bluewave Labs",
|
||||
isLoading: false,
|
||||
isOpen: false,
|
||||
newName: "",
|
||||
};
|
||||
|
||||
const Settings = () => {
|
||||
//(tab) 0 - Profile
|
||||
@@ -114,6 +120,32 @@ const Settings = () => {
|
||||
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
const [orgStates, setOrgStates] = useState(orgConfig);
|
||||
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);
|
||||
};
|
||||
return (
|
||||
<Box
|
||||
//TODO - need to figure out document sizing
|
||||
@@ -162,27 +194,11 @@ const Settings = () => {
|
||||
gap="8px"
|
||||
sx={{ flex: 1, marginRight: "10px" }}
|
||||
>
|
||||
<Typography
|
||||
variant="h4"
|
||||
component="h1"
|
||||
sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
fontSize: "13px",
|
||||
fontWeight: "600",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4" component="h1">
|
||||
{field.label}
|
||||
</Typography>
|
||||
{field ? (
|
||||
<Typography
|
||||
variant="h5"
|
||||
component="p"
|
||||
sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
opacity: 0.6,
|
||||
fontSize: "13px",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h5" component="p">
|
||||
{field.description}
|
||||
</Typography>
|
||||
) : (
|
||||
@@ -245,26 +261,10 @@ const Settings = () => {
|
||||
<form className="delete-profile-form" noValidate spellCheck="false">
|
||||
<div className="delete-profile-form__wrapper">
|
||||
<Stack direction="column" gap="15px">
|
||||
<Typography
|
||||
variant="h4"
|
||||
component="h1"
|
||||
sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
fontSize: "13px",
|
||||
fontWeight: "600",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4" component="h1">
|
||||
Delete account
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h4"
|
||||
component="p"
|
||||
sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
opacity: 0.6,
|
||||
fontSize: "13px",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h5" component="p">
|
||||
Note that deleting your account will remove all data from our
|
||||
system. This is permanent and non-recoverable.
|
||||
</Typography>
|
||||
@@ -330,15 +330,7 @@ const Settings = () => {
|
||||
gap="8px"
|
||||
sx={{ flex: 1, marginRight: "10px" }}
|
||||
>
|
||||
<Typography
|
||||
variant="h4"
|
||||
component="h1"
|
||||
sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
fontSize: "13px",
|
||||
fontWeight: "600",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4" component="h1">
|
||||
{field.label}
|
||||
</Typography>
|
||||
</Stack>
|
||||
@@ -386,35 +378,103 @@ const Settings = () => {
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<Divider
|
||||
aria-hidden="true"
|
||||
width="0"
|
||||
sx={{ marginY: theme.spacing(6.25) }}
|
||||
/>
|
||||
{/* !!! - All save buttons are tied to the same state */}
|
||||
{/* TODO - Implement Save Password function */}
|
||||
<Stack direction="row" justifyContent="flex-end">
|
||||
<Box width="fit-content">
|
||||
<ButtonSpinner
|
||||
level="primary"
|
||||
label="Save"
|
||||
onClick={handleSaveProfile}
|
||||
isLoading={isLoading}
|
||||
loadingText="Saving..."
|
||||
sx={{
|
||||
paddingX: "40px",
|
||||
height: "fit-content",
|
||||
fontSize: "13px",
|
||||
"&:focus": {
|
||||
outline: "none",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
</form>
|
||||
</TabPanel>
|
||||
<TabPanel
|
||||
value="2"
|
||||
sx={{ padding: "0", marginTop: theme.spacing(6.25), width: "100%" }}
|
||||
>
|
||||
<form className="edit-team-form" noValidate spellCheck="false">
|
||||
<div className="edit-team-form__wrapper">
|
||||
<Stack
|
||||
direction="column"
|
||||
gap="8px"
|
||||
sx={{ flex: 1, marginRight: "10px" }}
|
||||
>
|
||||
<Typography variant="h4" component="h1">
|
||||
Organization name
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="flex-end"
|
||||
gap="8px"
|
||||
sx={{ flex: 1 }}
|
||||
>
|
||||
<ButtonSpinner
|
||||
level="tertiary"
|
||||
label={!orgStates.isLoading && orgStates.name}
|
||||
disabled
|
||||
onClick={() => toggleOrgModal(true)}
|
||||
isLoading={orgStates.isLoading}
|
||||
/>
|
||||
<Button
|
||||
level="primary"
|
||||
label="Rename"
|
||||
sx={{ paddingX: "30px" }}
|
||||
onClick={() => toggleOrgModal(true)}
|
||||
/>
|
||||
</Stack>
|
||||
</div>
|
||||
<div className="edit-team-form__wrapper">
|
||||
<Typography variant="h4" component="h1">
|
||||
Team members
|
||||
</Typography>
|
||||
</div>
|
||||
<Divider
|
||||
aria-hidden="true"
|
||||
width="0"
|
||||
sx={{ marginY: theme.spacing(6.25) }}
|
||||
/>
|
||||
{/* !!! - All save buttons are tied to the same state */}
|
||||
{/* TODO - Implement Save Team function */}
|
||||
<Stack direction="row" justifyContent="flex-end">
|
||||
<Box width="fit-content">
|
||||
<ButtonSpinner
|
||||
level="primary"
|
||||
label="Save"
|
||||
onClick={handleSaveProfile}
|
||||
isLoading={isLoading}
|
||||
loadingText="Saving..."
|
||||
sx={{
|
||||
paddingX: "40px",
|
||||
height: "fit-content",
|
||||
fontSize: "13px",
|
||||
"&:focus": {
|
||||
outline: "none",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
</form>
|
||||
<Divider
|
||||
aria-hidden="true"
|
||||
width="0"
|
||||
sx={{ marginY: theme.spacing(6.25) }}
|
||||
/>
|
||||
{/* !!! - All save buttons are tied to the same state */}
|
||||
{/* TODO - Implement Save Password function */}
|
||||
<Stack direction="row" justifyContent="flex-end">
|
||||
<Box width="fit-content">
|
||||
<ButtonSpinner
|
||||
level="primary"
|
||||
label="Save"
|
||||
onClick={handleSaveProfile}
|
||||
isLoading={isLoading}
|
||||
loadingText="Saving..."
|
||||
sx={{
|
||||
paddingX: "40px",
|
||||
height: "fit-content",
|
||||
fontSize: "13px",
|
||||
"&:focus": {
|
||||
outline: "none",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
</TabPanel>
|
||||
<TabPanel value="2">Team</TabPanel>
|
||||
</TabContext>
|
||||
{/* TODO - Update ModalPopup Component with @mui for reusability */}
|
||||
{/* <DualButtonPopupModal
|
||||
@@ -448,21 +508,12 @@ const Settings = () => {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
id="modal-delete-account"
|
||||
variant="h4"
|
||||
component="h1"
|
||||
sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
fontSize: "16px",
|
||||
fontWeight: "600",
|
||||
}}
|
||||
>
|
||||
<Typography id="modal-delete-account" variant="h4" component="h1">
|
||||
Really delete this account?
|
||||
</Typography>
|
||||
<Typography
|
||||
id="delete-account-confirmation"
|
||||
variant="h4"
|
||||
variant="h5"
|
||||
component="p"
|
||||
sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
@@ -490,6 +541,63 @@ const Settings = () => {
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Modal>
|
||||
<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: "4px",
|
||||
boxShadow: 24,
|
||||
p: "30px",
|
||||
"&:focus": {
|
||||
outline: "none",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Typography id="modal-edit-org-name" variant="h4" 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)}
|
||||
sx={{ fontSize: "13px" }}
|
||||
/>
|
||||
<ButtonSpinner
|
||||
level="primary"
|
||||
label="Rename"
|
||||
onClick={handleRenameOrg}
|
||||
isLoading={orgStates.isLoading}
|
||||
sx={{ fontSize: "13px", paddingX: "30px" }}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Modal>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in new issue
Block a user