IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web:Client:Fix save method.

Browse Source
This commit is contained in:
Vlada Gazizova 2022-11-02 16:04:01 +03:00
parent b10a852e97
commit ce4c9d395f
1 changed files with 57 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

262
packages/client/src/pages/PortalSettings/categories/common/appearance.js
View File

@ -30,7 +30,7 @@ const Appearance = (props) => {
sendAppearanceTheme, sendAppearanceTheme,
getAppearanceTheme, getAppearanceTheme,
currentColorScheme, currentColorScheme,
onSaveSelectedNewThemes,
deleteAppearanceTheme, deleteAppearanceTheme,
tReady, tReady,
t, t,
@ -68,10 +68,6 @@ const Appearance = (props) => {
const [viewMobile, setViewMobile] = useState(false); const [viewMobile, setViewMobile] = useState(false);
const [showSaveButtonDialog, setShowSaveButtonDialog] = useState(false); const [showSaveButtonDialog, setShowSaveButtonDialog] = useState(false);
const [
showRestoreToDefaultButtonDialog,
setShowRestoreToDefaultButtonDialog,
] = useState(false);
const [isEditDialog, setIsEditDialog] = useState(false); const [isEditDialog, setIsEditDialog] = useState(false);
const [isAddThemeDialog, setIsAddThemeDialog] = useState(false); const [isAddThemeDialog, setIsAddThemeDialog] = useState(false);
@ -80,14 +76,9 @@ const Appearance = (props) => {
currentColorScheme.accentColor currentColorScheme.accentColor
); );
const [selectThemeId, setSelectThemeId] = useState(selectedThemeId); const [selectThemeId, setSelectThemeId] = useState(selectedThemeId);
const [selectNewThemeId, setSelectNewThemeId] = useState(null);
const [isDisabledSaveButton, setIsDisabledSaveButton] = useState(true); const [isDisabledSaveButton, setIsDisabledSaveButton] = useState(true);
const [newCustomThemes, setNewCustomThemes] = useState([]);
const [changeThemes, setChangeThemes] = useState([]);
const [editAppearanceTheme, setEditAppearanceTheme] = useState([]);
const [abilityAddTheme, setAbilityAddTheme] = useState(true); const [abilityAddTheme, setAbilityAddTheme] = useState(true);
const [isDisabledEditButton, setIsDisabledEditButton] = useState(true); const [isDisabledEditButton, setIsDisabledEditButton] = useState(true);
@ -128,13 +119,12 @@ const Appearance = (props) => {
); );
useEffect(() => { useEffect(() => {
const numberThemes = newCustomThemes.length + appearanceTheme.length; if (appearanceTheme.length === 10) {
if (numberThemes === 10) {
setAbilityAddTheme(false); setAbilityAddTheme(false);
} else { } else {
setAbilityAddTheme(true); setAbilityAddTheme(true);
} }
}, [newCustomThemes.length, appearanceTheme.length, setAbilityAddTheme]); }, [appearanceTheme.length, setAbilityAddTheme]);
useEffect(() => { useEffect(() => {
onCheckView(); onCheckView();
@ -145,27 +135,24 @@ const Appearance = (props) => {
useEffect(() => { useEffect(() => {
setSelectThemeId(selectedThemeId); setSelectThemeId(selectedThemeId);
}, [selectedThemeId]); }, [selectedThemeId, appearanceTheme.length]);
useEffect(() => { useEffect(() => {
if (selectThemeId < 8) { if (selectThemeId < 8) {
setIsDisabledEditButton(false); setIsDisabledEditButton(true);
setIsDisabledDeleteButton(true); setIsDisabledDeleteButton(true);
return; return;
} }
setIsDisabledEditButton(true); setIsDisabledEditButton(false);
setIsDisabledDeleteButton(false); setIsDisabledDeleteButton(false);
}, [selectThemeId]); }, [selectThemeId]);
useEffect(() => { useEffect(() => {
if ( if (selectThemeId === selectedThemeId) {
previewAccentColor !== currentColorScheme.accentColor ||
newCustomThemes.length > 0
) {
setIsDisabledSaveButton(false);
} else {
setIsDisabledSaveButton(true); setIsDisabledSaveButton(true);
} else {
setIsDisabledSaveButton(false);
} }
if ( if (
@ -183,12 +170,13 @@ const Appearance = (props) => {
setShowSaveButtonDialog(true); setShowSaveButtonDialog(true);
} }
}, [ }, [
selectedThemeId,
selectThemeId,
changeCurrentColorAccent, changeCurrentColorAccent,
changeCurrentColorButtons, changeCurrentColorButtons,
isAddThemeDialog, isAddThemeDialog,
isEditDialog, isEditDialog,
previewAccentColor, previewAccentColor,
newCustomThemes.length,
]); ]);
const onCheckView = () => { const onCheckView = () => {
@ -202,13 +190,6 @@ const Appearance = (props) => {
const onColorSelection = (item) => { const onColorSelection = (item) => {
setPreviewAccentColor(item.accentColor); setPreviewAccentColor(item.accentColor);
setSelectThemeId(item.id); setSelectThemeId(item.id);
setSelectNewThemeId(null);
};
const onColorSelectionNewThemes = (item, index) => {
setPreviewAccentColor(item.accentColor);
setSelectNewThemeId(index);
setSelectThemeId(null);
}; };
const onShowCheck = useCallback( const onShowCheck = useCallback(
@ -218,139 +199,27 @@ const Appearance = (props) => {
[selectThemeId, checkImg] [selectThemeId, checkImg]
); );
const onShowCheckNewThemes = useCallback(
(colorNumber) => {
return selectNewThemeId && selectNewThemeId === colorNumber && checkImg;
},
[selectNewThemeId, checkImg]
);
const onChangePreviewTheme = (e) => { const onChangePreviewTheme = (e) => {
setPreviewTheme(e.title); setPreviewTheme(e.title);
}; };
const onSaveNewThemes = useCallback(async () => {
try {
await sendAppearanceTheme({ themes: newCustomThemes });
await getAppearanceTheme();
setNewCustomThemes([]);
toastr.success(t("Settings:SuccessfullySaveSettingsMessage"));
} catch (error) {
toastr.error(error);
}
}, [newCustomThemes.length, sendAppearanceTheme, getAppearanceTheme]);
const onSaveSelectedThemes = useCallback(async () => {
try {
await sendAppearanceTheme({ selected: selectThemeId });
await getAppearanceTheme();
toastr.success(t("Settings:SuccessfullySaveSettingsMessage"));
} catch (error) {
toastr.error(error);
}
}, [selectThemeId, sendAppearanceTheme, getAppearanceTheme]);
const onSaveChangedThemes = useCallback(async () => {
try {
await sendAppearanceTheme({ themes: changeThemes });
await getAppearanceTheme();
toastr.success(t("Settings:SuccessfullySaveSettingsMessage"));
setChangeThemes([]);
} catch (error) {
toastr.error(error);
}
}, [
changeThemes.length,
setChangeThemes,
sendAppearanceTheme,
getAppearanceTheme,
]);
const onSaveSelectedChangedThemes = useCallback(async () => {
try {
await sendAppearanceTheme({ themes: changeThemes });
await sendAppearanceTheme({ selected: selectThemeId });
await getAppearanceTheme();
toastr.success(t("Settings:SuccessfullySaveSettingsMessage"));
setChangeThemes([]);
} catch (error) {
toastr.error(error);
}
}, [
changeThemes.length,
setChangeThemes,
sendAppearanceTheme,
getAppearanceTheme,
]);
const onSave = useCallback(async () => { const onSave = useCallback(async () => {
setIsDisabledSaveButton(true); setIsDisabledSaveButton(true);
if ( if (!selectThemeId) return;
newCustomThemes.length === 0 &&
!selectNewThemeId &&
!selectThemeId &&
changeThemes.length === 0
) {
return;
}
// Saving the modified and selected theme try {
if (changeThemes.length > 0 && selectThemeId) { await sendAppearanceTheme({ selected: selectThemeId });
onSaveSelectedChangedThemes(); await getAppearanceTheme();
return; toastr.success(t("Settings:SuccessfullySaveSettingsMessage"));
} } catch (error) {
toastr.error(error);
// Saving a modified theme
if (changeThemes.length > 0 && !selectThemeId) {
onSaveChangedThemes();
return;
}
if (newCustomThemes.length > 0 && selectNewThemeId) {
try {
await onSaveSelectedNewThemes(
newCustomThemes,
selectNewThemeId,
appearanceTheme.length
);
setNewCustomThemes([]);
setSelectNewThemeId(null);
} catch (error) {
toastr.error(error);
}
return;
}
if (newCustomThemes.length > 0) {
onSaveNewThemes();
return;
}
if (selectThemeId) {
onSaveSelectedThemes();
return;
} }
}, [ }, [
changeThemes.length,
newCustomThemes.length,
appearanceTheme.length,
selectNewThemeId,
selectThemeId, selectThemeId,
onSaveSelectedNewThemes, setIsDisabledSaveButton,
onSaveNewThemes, sendAppearanceTheme,
onSaveSelectedThemes,
getAppearanceTheme, getAppearanceTheme,
]); ]);
@ -366,8 +235,6 @@ const Appearance = (props) => {
setHeaderColorSchemeDialog("Edit color scheme"); setHeaderColorSchemeDialog("Edit color scheme");
// setShowRestoreToDefaultButtonDialog(true);
setShowColorSchemeDialog(true); setShowColorSchemeDialog(true);
}; };
@ -399,12 +266,6 @@ const Appearance = (props) => {
const onAddTheme = () => { const onAddTheme = () => {
if (!abilityAddTheme) return; if (!abilityAddTheme) return;
setIsAddThemeDialog(true); setIsAddThemeDialog(true);
// setCurrentColorAccent(
// "url(/static/images/plus.theme.svg) 15px 15px no-repeat #D0D5DA"
// );
// setCurrentColorButtons(
// "url(/static/images/plus.theme.svg) 15px 15px no-repeat #D0D5DA"
// );
setCurrentColorAccent(null); setCurrentColorAccent(null);
setCurrentColorButtons(null); setCurrentColorButtons(null);
@ -449,6 +310,34 @@ const Appearance = (props) => {
setChangeCurrentColorButtons(true); setChangeCurrentColorButtons(true);
}, [appliedColorButtons]); }, [appliedColorButtons]);
const onSaveNewThemes = useCallback(
async (theme) => {
try {
await sendAppearanceTheme({ themes: [theme] });
await getAppearanceTheme();
toastr.success(t("Settings:SuccessfullySaveSettingsMessage"));
} catch (error) {
toastr.error(error);
}
},
[sendAppearanceTheme, getAppearanceTheme]
);
const onSaveChangedThemes = useCallback(
async (editTheme) => {
try {
await sendAppearanceTheme({ themes: editTheme });
await getAppearanceTheme();
toastr.success(t("Settings:SuccessfullySaveSettingsMessage"));
} catch (error) {
toastr.error(error);
}
},
[sendAppearanceTheme, getAppearanceTheme]
);
const onSaveColorSchemeDialog = () => { const onSaveColorSchemeDialog = () => {
if (isAddThemeDialog) { if (isAddThemeDialog) {
// Saving a new custom theme // Saving a new custom theme
@ -458,7 +347,8 @@ const Appearance = (props) => {
textColor: "#FFFFFF", textColor: "#FFFFFF",
}; };
setNewCustomThemes([...newCustomThemes, theme]); onSaveNewThemes(theme);
setCurrentColorAccent(null); setCurrentColorAccent(null);
setCurrentColorButtons(null); setCurrentColorButtons(null);
@ -468,7 +358,7 @@ const Appearance = (props) => {
return; return;
} }
// Editing all themes // Editing themes
const editTheme = { const editTheme = {
id: selectThemeId, id: selectThemeId,
accentColor: currentColorAccent, accentColor: currentColorAccent,
@ -476,22 +366,7 @@ const Appearance = (props) => {
textColor: "#FFFFFF", textColor: "#FFFFFF",
}; };
const editAppearanceTheme = appearanceTheme.map((theme) => { onSaveChangedThemes(editTheme);
if (theme.id === selectThemeId) {
return {
id: selectThemeId,
accentColor: currentColorAccent,
buttonsMain: currentColorButtons,
textColor: "#FFFFFF",
};
}
return theme;
});
setChangeThemes([...changeThemes, editTheme]);
setEditAppearanceTheme(editAppearanceTheme);
setPreviewAccentColor(currentColorAccent);
onCloseColorSchemeDialog(); onCloseColorSchemeDialog();
}; };
@ -571,10 +446,7 @@ const Appearance = (props) => {
<div className="theme-name">{t("Common:Standard")}</div> <div className="theme-name">{t("Common:Standard")}</div>
<div className="theme-container"> <div className="theme-container">
{(editAppearanceTheme.length === 0 {appearanceTheme.map((item, index) => {
? appearanceTheme
: editAppearanceTheme
).map((item, index) => {
if (index > 6) return; if (index > 6) return;
return ( return (
<div <div
@ -584,7 +456,7 @@ const Appearance = (props) => {
className="box" className="box"
onClick={() => onColorSelection(item)} onClick={() => onColorSelection(item)}
> >
{!selectNewThemeId && onShowCheck(item.id)} {onShowCheck(item.id)}
</div> </div>
); );
})} })}
@ -595,10 +467,7 @@ const Appearance = (props) => {
<div className="theme-name">Custom</div> <div className="theme-name">Custom</div>
<div className="theme-container"> <div className="theme-container">
{(editAppearanceTheme.length === 0 {appearanceTheme.map((item, index) => {
? appearanceTheme
: editAppearanceTheme
).map((item, index) => {
if (index < 7) return; if (index < 7) return;
return ( return (
<div <div
@ -608,21 +477,7 @@ const Appearance = (props) => {
className="box" className="box"
onClick={() => onColorSelection(item)} onClick={() => onColorSelection(item)}
> >
{!selectNewThemeId && onShowCheck(item.id)} {onShowCheck(item.id)}
</div>
);
})}
{newCustomThemes?.map((item, index) => {
return (
<div
key={index}
// id={item.id}
style={{ background: item.accentColor }}
className="box"
onClick={() => onColorSelectionNewThemes(item, index + 1)}
>
{!selectThemeId && onShowCheckNewThemes(index + 1)}
</div> </div>
); );
})} })}
@ -666,7 +521,6 @@ const Appearance = (props) => {
viewMobile={viewMobile} viewMobile={viewMobile}
openHexColorPickerButtons={openHexColorPickerButtons} openHexColorPickerButtons={openHexColorPickerButtons}
openHexColorPickerAccent={openHexColorPickerAccent} openHexColorPickerAccent={openHexColorPickerAccent}
showRestoreToDefaultButtonDialog={showRestoreToDefaultButtonDialog}
showSaveButtonDialog={showSaveButtonDialog} showSaveButtonDialog={showSaveButtonDialog}
onSaveColorSchemeDialog={onSaveColorSchemeDialog} onSaveColorSchemeDialog={onSaveColorSchemeDialog}
/> />
@ -688,7 +542,7 @@ const Appearance = (props) => {
label="Edit current theme" label="Edit current theme"
onClick={onClickEdit} onClick={onClickEdit}
size="small" size="small"
// isDisabled={isDisabledEditButton} isDisabled={isDisabledEditButton}
/> />
<Button <Button
className="button" className="button"
@ -710,7 +564,6 @@ export default inject(({ auth }) => {
sendAppearanceTheme, sendAppearanceTheme,
getAppearanceTheme, getAppearanceTheme,
currentColorScheme, currentColorScheme,
onSaveSelectedNewThemes,
deleteAppearanceTheme, deleteAppearanceTheme,
} = settingsStore; } = settingsStore;
@ -720,7 +573,6 @@ export default inject(({ auth }) => {
sendAppearanceTheme, sendAppearanceTheme,
getAppearanceTheme, getAppearanceTheme,
currentColorScheme, currentColorScheme,
onSaveSelectedNewThemes,
deleteAppearanceTheme, deleteAppearanceTheme,
}; };
})( })(