Web: Client: revert customization refactoring
This commit is contained in:
Alexey
parent
57cd398457
commit
b3ebf23c7b
@ -1,48 +1,30 @@
|
||||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { withTranslation } from 'react-i18next';
|
||||
import {
|
||||
Button,
|
||||
ComboBox,
|
||||
FieldContainer,
|
||||
Link,
|
||||
Loader,
|
||||
Text,
|
||||
TextInput,
|
||||
toastr
|
||||
} from "asc-web-components";
|
||||
import { FieldContainer, Text, ComboBox, Loader, Button, toastr, Link, TextInput } from "asc-web-components";
|
||||
import styled from 'styled-components';
|
||||
import { Trans } from 'react-i18next';
|
||||
import { store, utils } from 'asc-web-common';
|
||||
import {
|
||||
getPortalTimezones,
|
||||
restoreGreetingTitle,
|
||||
setGreetingTitle,
|
||||
setLanguageAndTime
|
||||
} from '../../../../../store/settings/actions';
|
||||
import { setLanguageAndTime, getPortalTimezones, setGreetingTitle, restoreGreetingTitle } from '../../../../../store/settings/actions';
|
||||
import { default as clientStore } from '../../../../../store/store';
|
||||
|
||||
const { changeLanguage } = utils;
|
||||
const {
|
||||
getCurrentCustomSchema,
|
||||
getModules,
|
||||
getPortalCultures
|
||||
} = store.auth.actions;
|
||||
const { getPortalCultures, getModules, getCurrentCustomSchema } = store.auth.actions;
|
||||
|
||||
const mapCulturesToArray = (cultures, t) => {
|
||||
return cultures.map((culture) => {
|
||||
return { key: culture, label: t(`Culture_${culture}`) };
|
||||
});
|
||||
return cultures.map((culture) => {
|
||||
return { key: culture, label: t(`Culture_${culture}`) };
|
||||
});
|
||||
};
|
||||
|
||||
const mapTimezonesToArray = (timezones) => {
|
||||
return timezones.map((timezone) => {
|
||||
return { key: timezone.id, label: timezone.displayName };
|
||||
});
|
||||
return timezones.map((timezone) => {
|
||||
return { key: timezone.id, label: timezone.displayName };
|
||||
});
|
||||
};
|
||||
|
||||
const findSelectedItemByKey = (items, selectedItemKey) => {
|
||||
return items.find(item => item.key === selectedItemKey);
|
||||
return items.find(item => item.key === selectedItemKey);
|
||||
}
|
||||
|
||||
const StyledComponent = styled.div`
|
||||
@ -67,278 +49,256 @@ const StyledComponent = styled.div`
|
||||
}
|
||||
`;
|
||||
class Customization extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const {
|
||||
greetingSettings,
|
||||
portalLanguage,
|
||||
portalTimeZoneId,
|
||||
rawCultures,
|
||||
rawTimezones,
|
||||
t
|
||||
} = props;
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const languages = mapCulturesToArray(rawCultures, t);
|
||||
const timezones = mapTimezonesToArray(rawTimezones);
|
||||
const { portalLanguage, portalTimeZoneId, rawCultures, rawTimezones, t, greetingSettings } = props;
|
||||
const languages = mapCulturesToArray(rawCultures, t);
|
||||
const timezones = mapTimezonesToArray(rawTimezones);
|
||||
|
||||
document.title = `${t("Customization")} – ${t("OrganizationName")}`;
|
||||
document.title = `${t("Customization")} – ${t("OrganizationName")}`;
|
||||
|
||||
this.state = {
|
||||
isLoadedData: false,
|
||||
isLoading: false,
|
||||
timezones,
|
||||
timezone: findSelectedItemByKey(timezones, portalTimeZoneId || timezones[0]),
|
||||
languages,
|
||||
language: findSelectedItemByKey(languages, portalLanguage || languages[0]),
|
||||
greetingTitle: greetingSettings,
|
||||
isLoadingGreetingSave: false,
|
||||
isLoadingGreetingRestore: false,
|
||||
};
|
||||
}
|
||||
this.state = {
|
||||
isLoadedData: false,
|
||||
isLoading: false,
|
||||
timezones,
|
||||
timezone: findSelectedItemByKey(timezones, portalTimeZoneId || timezones[0]),
|
||||
languages,
|
||||
language: findSelectedItemByKey(languages, portalLanguage || languages[0]),
|
||||
greetingTitle: greetingSettings,
|
||||
isLoadingGreetingSave: false,
|
||||
isLoadingGreetingRestore: false,
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const {
|
||||
getPortalCultures,
|
||||
getPortalTimezones,
|
||||
portalLanguage,
|
||||
portalTimeZoneId,
|
||||
t
|
||||
} = this.props;
|
||||
const { timezones, languages } = this.state;
|
||||
|
||||
if (!timezones.length && !languages.length) {
|
||||
let languages;
|
||||
getPortalCultures()
|
||||
.then(() => {
|
||||
languages = mapCulturesToArray(this.props.rawCultures, t);
|
||||
})
|
||||
.then(() => getPortalTimezones())
|
||||
.then(() => {
|
||||
const timezones = mapTimezonesToArray(this.props.rawTimezones);
|
||||
const timezone = findSelectedItemByKey(timezones, portalTimeZoneId) || timezones[0];
|
||||
const language = findSelectedItemByKey(languages, portalLanguage) || languages[0];
|
||||
componentDidMount() {
|
||||
const { getPortalCultures, portalLanguage, portalTimeZoneId, t, getPortalTimezones } = this.props;
|
||||
const { timezones, languages } = this.state;
|
||||
|
||||
this.setState({ languages, language, timezones, timezone });
|
||||
});
|
||||
}
|
||||
}
|
||||
if (!timezones.length && !languages.length) {
|
||||
let languages;
|
||||
getPortalCultures()
|
||||
.then(() => {
|
||||
languages = mapCulturesToArray(this.props.rawCultures, t);
|
||||
})
|
||||
.then(() => getPortalTimezones())
|
||||
.then(() => {
|
||||
const timezones = mapTimezonesToArray(this.props.rawTimezones);
|
||||
const timezone = findSelectedItemByKey(timezones, portalTimeZoneId) || timezones[0];
|
||||
const language = findSelectedItemByKey(languages, portalLanguage) || languages[0];
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
const { timezones, languages } = this.state;
|
||||
const { i18n, language, nameSchemaId } = this.props;
|
||||
this.setState({ languages, language, timezones, timezone });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (timezones.length && languages.length && !prevState.isLoadedData) {
|
||||
this.setState({ isLoadedData: true });
|
||||
}
|
||||
if (language !== prevProps.language) {
|
||||
changeLanguage(i18n)
|
||||
.then((t) => {
|
||||
const newLocaleLanguages = mapCulturesToArray(this.props.rawCultures, t);
|
||||
const newLocaleSelectedLanguage = findSelectedItemByKey(newLocaleLanguages, this.state.language.key) || newLocaleLanguages[0];
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
const { timezones, languages } = this.state;
|
||||
const { i18n, language, nameSchemaId } = this.props;
|
||||
|
||||
this.setState({
|
||||
languages: newLocaleLanguages,
|
||||
language: newLocaleSelectedLanguage
|
||||
});
|
||||
})
|
||||
.then(() => getModules(clientStore.dispatch))
|
||||
.then(() => getCurrentCustomSchema(clientStore.dispatch, nameSchemaId));
|
||||
}
|
||||
}
|
||||
if (timezones.length && languages.length && !prevState.isLoadedData) {
|
||||
this.setState({ isLoadedData: true });
|
||||
}
|
||||
if (language !== prevProps.language) {
|
||||
changeLanguage(i18n)
|
||||
.then((t) => {
|
||||
const newLocaleLanguages = mapCulturesToArray(this.props.rawCultures, t);
|
||||
const newLocaleSelectedLanguage = findSelectedItemByKey(newLocaleLanguages, this.state.language.key) || newLocaleLanguages[0];
|
||||
|
||||
onLanguageSelect = (language) => {
|
||||
this.setState({ language })
|
||||
};
|
||||
this.setState({
|
||||
languages: newLocaleLanguages,
|
||||
language: newLocaleSelectedLanguage
|
||||
});
|
||||
})
|
||||
.then(() => getModules(clientStore.dispatch))
|
||||
.then(() => getCurrentCustomSchema(clientStore.dispatch, nameSchemaId));
|
||||
}
|
||||
}
|
||||
|
||||
onTimezoneSelect = (timezone) => {
|
||||
this.setState({ timezone })
|
||||
};
|
||||
onLanguageSelect = (language) => {
|
||||
this.setState({ language })
|
||||
};
|
||||
|
||||
onSaveLngTZSettings = () => {
|
||||
const { setLanguageAndTime, i18n } = this.props;
|
||||
this.setState({ isLoading: true }, function () {
|
||||
setLanguageAndTime(this.state.language.key, this.state.timezone.key)
|
||||
.then(() => changeLanguage(i18n))
|
||||
.then((t) => toastr.success(t("SuccessfullySaveSettingsMessage")))
|
||||
.catch((error) => toastr.error(error))
|
||||
.finally(() => this.setState({ isLoading: false }));
|
||||
})
|
||||
}
|
||||
onTimezoneSelect = (timezone) => {
|
||||
this.setState({ timezone })
|
||||
};
|
||||
|
||||
onChangeGreetingTitle = (e) => {
|
||||
this.setState({ greetingTitle: e.target.value })
|
||||
};
|
||||
onSaveLngTZSettings = () => {
|
||||
const { setLanguageAndTime, i18n } = this.props;
|
||||
this.setState({ isLoading: true }, function () {
|
||||
setLanguageAndTime(this.state.language.key, this.state.timezone.key)
|
||||
.then(() => changeLanguage(i18n))
|
||||
.then((t) => toastr.success(t("SuccessfullySaveSettingsMessage")))
|
||||
.catch((error) => toastr.error(error))
|
||||
.finally(() => this.setState({ isLoading: false }));
|
||||
})
|
||||
}
|
||||
|
||||
onSaveGreetingSettings = () => {
|
||||
const { setGreetingTitle, t } = this.props;
|
||||
this.setState({ isLoadingGreetingSave: true }, function () {
|
||||
setGreetingTitle(this.state.greetingTitle)
|
||||
.then(() => toastr.success(t('SuccessfullySaveGreetingSettingsMessage')))
|
||||
.catch((error) => toastr.error(error))
|
||||
.finally(() => this.setState({ isLoadingGreetingSave: false }));
|
||||
})
|
||||
}
|
||||
onChangeGreetingTitle = (e) => {
|
||||
this.setState({ greetingTitle: e.target.value })
|
||||
};
|
||||
|
||||
onRestoreGreetingSettings = () => {
|
||||
const { restoreGreetingTitle, t } = this.props;
|
||||
this.setState({ isLoadingGreetingRestore: true }, function () {
|
||||
restoreGreetingTitle()
|
||||
.then(() => {
|
||||
this.setState({
|
||||
greetingTitle: this.props.greetingSettings
|
||||
})
|
||||
toastr.success(t('SuccessfullySaveGreetingSettingsMessage'));
|
||||
})
|
||||
.catch((error) => toastr.error(error))
|
||||
.finally(() => this.setState({ isLoadingGreetingRestore: false }));
|
||||
})
|
||||
}
|
||||
onSaveGreetingSettings = () => {
|
||||
const { setGreetingTitle, t } = this.props;
|
||||
this.setState({ isLoadingGreetingSave: true }, function () {
|
||||
setGreetingTitle(this.state.greetingTitle)
|
||||
.then(() => toastr.success(t('SuccessfullySaveGreetingSettingsMessage')))
|
||||
.catch((error) => toastr.error(error))
|
||||
.finally(() => this.setState({ isLoadingGreetingSave: false }));
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const { t, i18n } = this.props;
|
||||
const {
|
||||
greetingTitle,
|
||||
isLoadedData,
|
||||
isLoading,
|
||||
isLoadingGreetingRestore,
|
||||
isLoadingGreetingSave,
|
||||
language,
|
||||
languages,
|
||||
timezone,
|
||||
timezones
|
||||
} = this.state;
|
||||
const supportEmail = "documentation@onlyoffice.com";
|
||||
const tooltipLanguage =
|
||||
<Text fontSize='13px'>
|
||||
<Trans i18nKey="NotFoundLanguage" i18n={i18n}>
|
||||
"In case you cannot find your language in the list of the
|
||||
available ones, feel free to write to us at
|
||||
onRestoreGreetingSettings = () => {
|
||||
const { restoreGreetingTitle, t } = this.props;
|
||||
this.setState({ isLoadingGreetingRestore: true }, function () {
|
||||
restoreGreetingTitle()
|
||||
.then(() => {
|
||||
this.setState({
|
||||
greetingTitle: this.props.greetingSettings
|
||||
})
|
||||
toastr.success(t('SuccessfullySaveGreetingSettingsMessage'));
|
||||
})
|
||||
.catch((error) => toastr.error(error))
|
||||
.finally(() => this.setState({ isLoadingGreetingRestore: false }));
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const { t, i18n } = this.props;
|
||||
const { isLoadedData, languages, language, isLoading, timezones, timezone, greetingTitle, isLoadingGreetingSave, isLoadingGreetingRestore } = this.state;
|
||||
const supportEmail = "documentation@onlyoffice.com";
|
||||
const tooltipLanguage =
|
||||
<Text fontSize='13px'>
|
||||
<Trans i18nKey="NotFoundLanguage" i18n={i18n}>
|
||||
"In case you cannot find your language in the list of the
|
||||
available ones, feel free to write to us at
|
||||
<Link href={`mailto:${supportEmail}`} isHovered={true}>
|
||||
{{ supportEmail }}
|
||||
</Link> to take part in the translation and get up to 1 year free of
|
||||
{{ supportEmail }}
|
||||
</Link> to take part in the translation and get up to 1 year free of
|
||||
charge."
|
||||
</Trans>
|
||||
{" "}
|
||||
<Link isHovered={true} href="https://helpcenter.onlyoffice.com/ru/guides/become-translator.aspx">{t("LearnMore")}</Link>
|
||||
</Text>
|
||||
{" "}
|
||||
<Link isHovered={true} href="https://helpcenter.onlyoffice.com/ru/guides/become-translator.aspx">{t("LearnMore")}</Link>
|
||||
</Text>
|
||||
|
||||
//console.log("CustomizationSettings render");
|
||||
return (
|
||||
!isLoadedData ?
|
||||
<Loader className="pageLoader" type="rombs" size='40px' />
|
||||
: <>
|
||||
<StyledComponent>
|
||||
<div className='settings-block'>
|
||||
<Text fontSize='16px'>{t('StudioTimeLanguageSettings')}</Text>
|
||||
<FieldContainer
|
||||
id='fieldContainerLanguage'
|
||||
className='margin-top field-container-width'
|
||||
labelText={`${t("Language")}:`}
|
||||
tooltipContent={tooltipLanguage}
|
||||
helpButtonHeaderContent={t("Language")}
|
||||
isVertical={true}>
|
||||
<ComboBox
|
||||
id='comboBoxLanguage'
|
||||
options={languages}
|
||||
selectedOption={language}
|
||||
onSelect={this.onLanguageSelect}
|
||||
isDisabled={isLoading}
|
||||
noBorder={false}
|
||||
scaled={true}
|
||||
scaledOptions={true}
|
||||
dropDownMaxHeight={300}
|
||||
className='dropdown-item-width'
|
||||
/>
|
||||
</FieldContainer>
|
||||
console.log("CustomizationSettings render");
|
||||
return (
|
||||
!isLoadedData ?
|
||||
<Loader className="pageLoader" type="rombs" size='40px' />
|
||||
: <>
|
||||
<StyledComponent>
|
||||
<div className='settings-block'>
|
||||
<Text fontSize='16px'>{t('StudioTimeLanguageSettings')}</Text>
|
||||
<FieldContainer
|
||||
id='fieldContainerLanguage'
|
||||
className='margin-top field-container-width'
|
||||
labelText={`${t("Language")}:`}
|
||||
tooltipContent={tooltipLanguage}
|
||||
helpButtonHeaderContent={t("Language")}
|
||||
isVertical={true}>
|
||||
<ComboBox
|
||||
id='comboBoxLanguage'
|
||||
options={languages}
|
||||
selectedOption={language}
|
||||
onSelect={this.onLanguageSelect}
|
||||
isDisabled={isLoading}
|
||||
noBorder={false}
|
||||
scaled={true}
|
||||
scaledOptions={true}
|
||||
dropDownMaxHeight={300}
|
||||
className='dropdown-item-width'
|
||||
/>
|
||||
</FieldContainer>
|
||||
|
||||
<FieldContainer
|
||||
id='fieldContainerTimezone'
|
||||
className='field-container-width'
|
||||
labelText={`${t("TimeZone")}:`}
|
||||
isVertical={true}>
|
||||
<ComboBox
|
||||
id='comboBoxTimezone'
|
||||
options={timezones}
|
||||
selectedOption={timezone}
|
||||
onSelect={this.onTimezoneSelect}
|
||||
isDisabled={isLoading}
|
||||
noBorder={false}
|
||||
scaled={true}
|
||||
scaledOptions={true}
|
||||
dropDownMaxHeight={300}
|
||||
className='dropdown-item-width'
|
||||
/>
|
||||
</FieldContainer>
|
||||
<Button
|
||||
id='btnSaveLngTZ'
|
||||
className='margin-top'
|
||||
primary={true}
|
||||
size='medium'
|
||||
label={t('SaveButton')}
|
||||
isLoading={isLoading}
|
||||
onClick={this.onSaveLngTZSettings}
|
||||
/>
|
||||
</div>
|
||||
<FieldContainer
|
||||
id='fieldContainerTimezone'
|
||||
className='field-container-width'
|
||||
labelText={`${t("TimeZone")}:`}
|
||||
isVertical={true}>
|
||||
<ComboBox
|
||||
id='comboBoxTimezone'
|
||||
options={timezones}
|
||||
selectedOption={timezone}
|
||||
onSelect={this.onTimezoneSelect}
|
||||
isDisabled={isLoading}
|
||||
noBorder={false}
|
||||
scaled={true}
|
||||
scaledOptions={true}
|
||||
dropDownMaxHeight={300}
|
||||
className='dropdown-item-width'
|
||||
/>
|
||||
</FieldContainer>
|
||||
<Button
|
||||
id='btnSaveLngTZ'
|
||||
className='margin-top'
|
||||
primary={true}
|
||||
size='medium'
|
||||
label={t('SaveButton')}
|
||||
isLoading={isLoading}
|
||||
onClick={this.onSaveLngTZSettings}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='settings-block'>
|
||||
<Text fontSize='16px'>{t('GreetingSettingsTitle')}</Text>
|
||||
<FieldContainer
|
||||
id='fieldContainerWelcomePage'
|
||||
className='margin-top field-container-width'
|
||||
labelText={`${t("GreetingTitle")}:`}
|
||||
isVertical={true}>
|
||||
<TextInput
|
||||
scale={true}
|
||||
value={greetingTitle}
|
||||
onChange={this.onChangeGreetingTitle}
|
||||
isDisabled={isLoadingGreetingSave || isLoadingGreetingRestore}
|
||||
/>
|
||||
</FieldContainer>
|
||||
<div className='settings-block'>
|
||||
<Text fontSize='16px'>{t('GreetingSettingsTitle')}</Text>
|
||||
<FieldContainer
|
||||
id='fieldContainerWelcomePage'
|
||||
className='margin-top field-container-width'
|
||||
labelText={`${t("GreetingTitle")}:`}
|
||||
isVertical={true}>
|
||||
<TextInput
|
||||
scale={true}
|
||||
value={greetingTitle}
|
||||
onChange={this.onChangeGreetingTitle}
|
||||
isDisabled={isLoadingGreetingSave || isLoadingGreetingRestore}
|
||||
/>
|
||||
|
||||
<Button
|
||||
id='btnSaveGreetingSetting'
|
||||
className='margin-top'
|
||||
primary={true}
|
||||
size='medium'
|
||||
label={t('SaveButton')}
|
||||
isLoading={isLoadingGreetingSave}
|
||||
isDisabled={isLoadingGreetingRestore}
|
||||
onClick={this.onSaveGreetingSettings}
|
||||
/>
|
||||
</FieldContainer>
|
||||
|
||||
<Button
|
||||
id='btnRestoreToDefault'
|
||||
className='margin-top margin-left'
|
||||
size='medium'
|
||||
label={t('RestoreDefaultButton')}
|
||||
isLoading={isLoadingGreetingRestore}
|
||||
isDisabled={isLoadingGreetingSave}
|
||||
onClick={this.onRestoreGreetingSettings}
|
||||
/>
|
||||
</div>
|
||||
</StyledComponent>
|
||||
</>
|
||||
);
|
||||
}
|
||||
<Button
|
||||
id='btnSaveGreetingSetting'
|
||||
className='margin-top'
|
||||
primary={true}
|
||||
size='medium'
|
||||
label={t('SaveButton')}
|
||||
isLoading={isLoadingGreetingSave}
|
||||
isDisabled={isLoadingGreetingRestore}
|
||||
onClick={this.onSaveGreetingSettings}
|
||||
/>
|
||||
|
||||
<Button
|
||||
id='btnRestoreToDefault'
|
||||
className='margin-top margin-left'
|
||||
size='medium'
|
||||
label={t('RestoreDefaultButton')}
|
||||
isLoading={isLoadingGreetingRestore}
|
||||
isDisabled={isLoadingGreetingSave}
|
||||
onClick={this.onRestoreGreetingSettings}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</StyledComponent>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
function mapStateToProps(state) {
|
||||
return {
|
||||
greetingSettings: state.auth.settings.greetingSettings,
|
||||
language: state.auth.user.cultureName || state.auth.settings.culture,
|
||||
nameSchemaId: state.auth.settings.nameSchemaId,
|
||||
portalLanguage: state.auth.settings.culture,
|
||||
portalTimeZoneId: state.auth.settings.timezone,
|
||||
rawCultures: state.auth.settings.cultures,
|
||||
rawTimezones: state.auth.settings.timezones
|
||||
};
|
||||
return {
|
||||
portalLanguage: state.auth.settings.culture,
|
||||
portalTimeZoneId: state.auth.settings.timezone,
|
||||
language: state.auth.user.cultureName || state.auth.settings.culture,
|
||||
rawTimezones: state.auth.settings.timezones,
|
||||
rawCultures: state.auth.settings.cultures,
|
||||
greetingSettings: state.auth.settings.greetingSettings,
|
||||
nameSchemaId: state.auth.settings.nameSchemaId
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, {
|
||||
getPortalCultures,
|
||||
getPortalTimezones,
|
||||
restoreGreetingTitle,
|
||||
setGreetingTitle,
|
||||
setLanguageAndTime
|
||||
getPortalCultures, setLanguageAndTime, getPortalTimezones,
|
||||
setGreetingTitle, restoreGreetingTitle
|
||||
})(withTranslation()(Customization));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user