Merge branch 'develop' into feature/js-sdk-presets
This commit is contained in:
commit
a85f2c70a5
@ -91,6 +91,7 @@ export type useRoomsHelperProps = {
|
||||
};
|
||||
|
||||
export type useFilesHelpersProps = {
|
||||
roomsFolderId?: number;
|
||||
setBreadCrumbs: (items: BreadCrumb[]) => void;
|
||||
setIsBreadCrumbsLoading: (value: boolean) => void;
|
||||
setIsSelectedParentFolder: (value: boolean) => void;
|
||||
@ -221,4 +222,6 @@ export type FilesSelectorProps = {
|
||||
withHeader: boolean;
|
||||
withCancelButton: boolean;
|
||||
settings: any;
|
||||
|
||||
roomsFolderId?: number;
|
||||
};
|
||||
|
@ -133,6 +133,7 @@ export const useFilesHelper = ({
|
||||
getIcon,
|
||||
t,
|
||||
setIsSelectedParentFolder,
|
||||
roomsFolderId,
|
||||
}: useFilesHelpersProps) => {
|
||||
const getFileList = React.useCallback(
|
||||
async (
|
||||
@ -278,7 +279,7 @@ export const useFilesHelper = ({
|
||||
return {
|
||||
label: title,
|
||||
id: id,
|
||||
isRoom: currentFolder?.current?.rootFolderId === id,
|
||||
isRoom: roomsFolderId === id,
|
||||
roomType,
|
||||
};
|
||||
}
|
||||
@ -334,7 +335,7 @@ export const useFilesHelper = ({
|
||||
}
|
||||
}
|
||||
},
|
||||
[selectedItemId, searchValue, isFirstLoad, disabledItems]
|
||||
[selectedItemId, searchValue, isFirstLoad, disabledItems, roomsFolderId]
|
||||
);
|
||||
|
||||
return { getFileList };
|
||||
|
@ -104,6 +104,8 @@ const FilesSelector = ({
|
||||
withCancelButton = true,
|
||||
getIcon,
|
||||
isRoomBackup,
|
||||
|
||||
roomsFolderId,
|
||||
}: FilesSelectorProps) => {
|
||||
const { t } = useTranslation(["Files", "Common", "Translations"]);
|
||||
|
||||
@ -208,6 +210,7 @@ const FilesSelector = ({
|
||||
getIcon,
|
||||
t,
|
||||
setIsSelectedParentFolder,
|
||||
roomsFolderId,
|
||||
});
|
||||
|
||||
const onSelectAction = (item: Item) => {
|
||||
@ -272,7 +275,9 @@ const FilesSelector = ({
|
||||
|
||||
if (
|
||||
needRoomList ||
|
||||
(!isThirdParty && parentId === 0 && rootFolderType === FolderType.Rooms)
|
||||
(!isThirdParty &&
|
||||
parentId === roomsFolderId &&
|
||||
rootFolderType === FolderType.Rooms)
|
||||
) {
|
||||
getRoomSettings();
|
||||
|
||||
@ -633,7 +638,7 @@ export default inject(
|
||||
|
||||
const sessionPath = window.sessionStorage.getItem("filesSelectorPath");
|
||||
|
||||
const { treeFolders } = treeFoldersStore;
|
||||
const { treeFolders, roomsFolderId } = treeFoldersStore;
|
||||
|
||||
const {
|
||||
restorePanelVisible,
|
||||
@ -747,6 +752,8 @@ export default inject(
|
||||
setBackupToPublicRoomVisible,
|
||||
currentDeviceType,
|
||||
getIcon,
|
||||
|
||||
roomsFolderId,
|
||||
};
|
||||
}
|
||||
)(observer(FilesSelector));
|
||||
|
@ -8,7 +8,7 @@ import Text from "@docspace/components/text";
|
||||
|
||||
const StyledInfoBar = styled.div`
|
||||
display: flex;
|
||||
background-color: #f8f9f9;
|
||||
background-color: ${(props) => props.theme.infoBar.background};
|
||||
color: #333;
|
||||
font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
|
||||
padding: 12px 16px;
|
||||
@ -33,9 +33,13 @@ const StyledInfoBar = styled.div`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: ${(props) => props.theme.infoBar.title};
|
||||
}
|
||||
}
|
||||
.body-container {
|
||||
color: #555f65;
|
||||
color: ${(props) => props.theme.infoBar.description};
|
||||
font-weight: 400;
|
||||
}
|
||||
.close-icon {
|
||||
@ -44,8 +48,8 @@ const StyledInfoBar = styled.div`
|
||||
fill: ${({ theme }) => theme.iconButton.color};
|
||||
}
|
||||
svg {
|
||||
weight: 10px;
|
||||
height: 10px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@ -60,7 +64,7 @@ const InfoBar = (props) => {
|
||||
<div className="header-icon">
|
||||
<ReactSVG src={InfoIcon} />
|
||||
</div>
|
||||
<Text fontSize="12px" fontWeight={600}>
|
||||
<Text className="header-body__title" fontSize="12px" fontWeight={600}>
|
||||
{t("Common:Info")}
|
||||
</Text>
|
||||
</div>
|
||||
|
@ -251,7 +251,7 @@ const ComponentPure = ({
|
||||
);
|
||||
|
||||
setIsRequestRunning && setIsRequestRunning(false);
|
||||
|
||||
setModalRequestRunning && setModalRequestRunning(false);
|
||||
if (isSaveButton) {
|
||||
setSettingsModalRequestRunning &&
|
||||
setSettingsModalRequestRunning(false);
|
||||
@ -263,15 +263,15 @@ const ComponentPure = ({
|
||||
? isSaveButton
|
||||
? modalRequestRunning
|
||||
: isRequestRunning
|
||||
? isRequestRunning
|
||||
: rest.isLoading
|
||||
? isRequestRunning
|
||||
: rest.isLoading
|
||||
: rest.isLoading;
|
||||
const isDisabled = disableWhileRequestRunning
|
||||
? isSaveButton
|
||||
? modalRequestRunning
|
||||
: isRequestRunning
|
||||
? isRequestRunning
|
||||
: rest.isDisabled
|
||||
? isRequestRunning
|
||||
: rest.isDisabled
|
||||
: rest.isDisabled;
|
||||
|
||||
return (
|
||||
@ -317,7 +317,7 @@ const ComponentPure = ({
|
||||
return (
|
||||
<iframe
|
||||
{...elementProps}
|
||||
style={{ minHeight: "100%", border: "none" }}
|
||||
style={{ minHeight: "100%", border: "none", ...elementProps.style }}
|
||||
></iframe>
|
||||
);
|
||||
}
|
||||
@ -382,15 +382,18 @@ const WrappedComponent = ({
|
||||
|
||||
const [isRequestRunning, setIsRequestRunning] = React.useState(false);
|
||||
|
||||
const updatePropsContext = (name, props) => {
|
||||
if (saveButton && name === saveButton.contextName) {
|
||||
setSaveButtonProps && setSaveButtonProps((val) => ({ ...val, props }));
|
||||
} else {
|
||||
const newProps = { ...contextProps };
|
||||
newProps[name] = props;
|
||||
const updatePropsContext = (newContextProps) => {
|
||||
const newProps = { ...contextProps };
|
||||
|
||||
setContextProps(newProps);
|
||||
}
|
||||
newContextProps.forEach(({ name, props }) => {
|
||||
if (saveButton && name === saveButton.contextName) {
|
||||
setSaveButtonProps && setSaveButtonProps((val) => ({ ...val, props }));
|
||||
} else {
|
||||
newProps[name] = props;
|
||||
}
|
||||
});
|
||||
|
||||
setContextProps(newProps);
|
||||
};
|
||||
|
||||
return (
|
||||
|
@ -40,9 +40,7 @@ export const messageActions = (
|
||||
|
||||
case PluginActions.updateContext:
|
||||
if (message.contextProps) {
|
||||
message.contextProps.forEach((prop) => {
|
||||
updatePropsContext && updatePropsContext(prop.name, prop.props);
|
||||
});
|
||||
updatePropsContext(contextProps);
|
||||
}
|
||||
break;
|
||||
|
||||
|
@ -45,6 +45,10 @@ const SectionBodyContent = ({
|
||||
resetFilters,
|
||||
submitToGalleryTileIsVisible,
|
||||
canSubmitToFormGallery,
|
||||
setOformFilesLoaded,
|
||||
categoryFilterLoaded,
|
||||
languageFilterLoaded,
|
||||
oformFilesLoaded,
|
||||
}) => {
|
||||
const onMouseDown = (e) => {
|
||||
if (
|
||||
@ -66,7 +70,11 @@ const SectionBodyContent = ({
|
||||
};
|
||||
}, [onMouseDown]);
|
||||
|
||||
return !tReady || !oformFiles ? (
|
||||
useEffect(() => {
|
||||
setOformFilesLoaded(tReady && oformFiles);
|
||||
}, [tReady, oformFiles]);
|
||||
|
||||
return !(categoryFilterLoaded && languageFilterLoaded && oformFilesLoaded) ? (
|
||||
<Loaders.Tiles foldersCount={0} withTitle={false} />
|
||||
) : !hasGalleryFiles ? (
|
||||
<EmptyScreenContainer
|
||||
@ -120,4 +128,8 @@ export default inject(({ auth, accessRightsStore, oformsStore }) => ({
|
||||
resetFilters: oformsStore.resetFilters,
|
||||
submitToGalleryTileIsVisible: oformsStore.submitToGalleryTileIsVisible,
|
||||
canSubmitToFormGallery: accessRightsStore.canSubmitToFormGallery,
|
||||
setOformFilesLoaded: oformsStore.setOformFilesLoaded,
|
||||
categoryFilterLoaded: oformsStore.categoryFilterLoaded,
|
||||
languageFilterLoaded: oformsStore.languageFilterLoaded,
|
||||
oformFilesLoaded: oformsStore.oformFilesLoaded,
|
||||
}))(withTranslation("Common, FormGallery")(observer(SectionBodyContent)));
|
||||
|
@ -3,6 +3,7 @@ import { inject, observer } from "mobx-react";
|
||||
import CategoryFilterDesktop from "./DesktopView";
|
||||
import CategoryFilterMobile from "./MobileView";
|
||||
import { mobile } from "@docspace/components/utils/device";
|
||||
import RectangleSkeleton from "@docspace/components/skeletons/rectangle";
|
||||
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
@ -34,21 +35,43 @@ export const StyledCategoryFilterWrapper = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledSkeleton = styled(RectangleSkeleton)`
|
||||
width: 220px;
|
||||
height: 32px;
|
||||
|
||||
@media ${mobile} {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
${({ noLocales }) =>
|
||||
!noLocales &&
|
||||
css`
|
||||
@media ${mobile} {
|
||||
max-width: calc(100% - 49px);
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const CategoryFilter = ({
|
||||
oformsFilter,
|
||||
noLocales,
|
||||
fetchCategoryTypes,
|
||||
fetchCategoriesOfCategoryType,
|
||||
filterOformsByLocaleIsLoading,
|
||||
setFilterOformsByLocaleIsLoading,
|
||||
setCategoryFilterLoaded,
|
||||
categoryFilterLoaded,
|
||||
languageFilterLoaded,
|
||||
oformFilesLoaded,
|
||||
}) => {
|
||||
const [menuItems, setMenuItems] = useState([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
setIsLoading(true);
|
||||
let newMenuItems = await fetchCategoryTypes();
|
||||
if (!newMenuItems) {
|
||||
setIsLoading(false);
|
||||
filterOformsByLocaleIsLoading &&
|
||||
setFilterOformsByLocaleIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
@ -77,12 +100,21 @@ const CategoryFilter = ({
|
||||
})
|
||||
.finally(() => {
|
||||
setMenuItems(newMenuItems);
|
||||
setIsLoading(false);
|
||||
filterOformsByLocaleIsLoading &&
|
||||
setFilterOformsByLocaleIsLoading(false);
|
||||
});
|
||||
})();
|
||||
}, [oformsFilter.locale]);
|
||||
|
||||
if (!isLoading && menuItems.length === 0) return null;
|
||||
useEffect(() => {
|
||||
setCategoryFilterLoaded(menuItems.length !== 0);
|
||||
}, [menuItems.length]);
|
||||
|
||||
if (
|
||||
filterOformsByLocaleIsLoading ||
|
||||
!(categoryFilterLoaded && languageFilterLoaded && oformFilesLoaded)
|
||||
)
|
||||
return <StyledSkeleton $noLocales={noLocales} />;
|
||||
|
||||
return (
|
||||
<StyledCategoryFilterWrapper
|
||||
@ -100,4 +132,11 @@ export default inject(({ oformsStore }) => ({
|
||||
oformsStore.oformLocales !== null && oformsStore.oformLocales?.length === 0,
|
||||
fetchCategoryTypes: oformsStore.fetchCategoryTypes,
|
||||
fetchCategoriesOfCategoryType: oformsStore.fetchCategoriesOfCategoryType,
|
||||
filterOformsByLocaleIsLoading: oformsStore.filterOformsByLocaleIsLoading,
|
||||
setFilterOformsByLocaleIsLoading:
|
||||
oformsStore.setFilterOformsByLocaleIsLoading,
|
||||
setCategoryFilterLoaded: oformsStore.setCategoryFilterLoaded,
|
||||
categoryFilterLoaded: oformsStore.categoryFilterLoaded,
|
||||
languageFilterLoaded: oformsStore.languageFilterLoaded,
|
||||
oformFilesLoaded: oformsStore.oformFilesLoaded,
|
||||
}))(observer(CategoryFilter));
|
||||
|
@ -2,13 +2,14 @@ import * as Styled from "./index.styled";
|
||||
|
||||
import { withTranslation } from "react-i18next";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
|
||||
import { flagsIcons } from "@docspace/common/utils/image-flags";
|
||||
import { convertToCulture } from "@docspace/common/utils";
|
||||
import Backdrop from "@docspace/components/backdrop";
|
||||
import { isMobile } from "@docspace/components/utils/device";
|
||||
import RectangleSkeleton from "@docspace/components/skeletons/rectangle";
|
||||
|
||||
const LanguageFilter = ({
|
||||
t,
|
||||
@ -16,6 +17,11 @@ const LanguageFilter = ({
|
||||
defaultOformLocale,
|
||||
oformLocales,
|
||||
filterOformsByLocale,
|
||||
filterOformsByLocaleIsLoading,
|
||||
setLanguageFilterLoaded,
|
||||
categoryFilterLoaded,
|
||||
languageFilterLoaded,
|
||||
oformFilesLoaded,
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const onToggleDropdownIsOpen = () => setIsOpen(!isOpen);
|
||||
@ -29,7 +35,15 @@ const LanguageFilter = ({
|
||||
sectionScroll.scrollTop = 0;
|
||||
};
|
||||
|
||||
if (oformLocales !== null && oformLocales?.length === 0) return null;
|
||||
useEffect(() => {
|
||||
setLanguageFilterLoaded(oformLocales && oformLocales?.length !== 0);
|
||||
}, [oformLocales, oformLocales?.length]);
|
||||
|
||||
if (
|
||||
filterOformsByLocaleIsLoading ||
|
||||
!(categoryFilterLoaded && languageFilterLoaded && oformFilesLoaded)
|
||||
)
|
||||
return <RectangleSkeleton width="41px" height="32px" />;
|
||||
|
||||
return (
|
||||
<Styled.LanguageFilter>
|
||||
@ -100,4 +114,9 @@ export default inject(({ oformsStore }) => ({
|
||||
defaultOformLocale: oformsStore.defaultOformLocale,
|
||||
oformLocales: oformsStore.oformLocales,
|
||||
filterOformsByLocale: oformsStore.filterOformsByLocale,
|
||||
filterOformsByLocaleIsLoading: oformsStore.filterOformsByLocaleIsLoading,
|
||||
setLanguageFilterLoaded: oformsStore.setLanguageFilterLoaded,
|
||||
categoryFilterLoaded: oformsStore.categoryFilterLoaded,
|
||||
languageFilterLoaded: oformsStore.languageFilterLoaded,
|
||||
oformFilesLoaded: oformsStore.oformFilesLoaded,
|
||||
}))(withTranslation(["Common"])(observer(LanguageFilter)));
|
||||
|
@ -63,6 +63,8 @@ const FormGallery = ({
|
||||
}
|
||||
}, [fromFolderId]);
|
||||
|
||||
if (isInitLoading) return <></>;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Section
|
||||
|
@ -46,12 +46,6 @@ const StyledComponent = styled.div`
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 700px) {
|
||||
.save-cancel-buttons {
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const CompanyInfoSettings = (props) => {
|
||||
|
@ -146,19 +146,17 @@ const StyledSettingsComponent = styled.div`
|
||||
`}
|
||||
|
||||
.send-request-container {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
padding-block: 30px;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
right: 0;
|
||||
`
|
||||
: css`
|
||||
left: 0;
|
||||
`}
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
margin-top: 32px;
|
||||
background-color: ${({ theme }) => theme.backgroundColor};
|
||||
|
||||
@media ${mobile} {
|
||||
position: fixed;
|
||||
padding-inline: 16px;
|
||||
inset-inline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.send-request-button {
|
||||
|
@ -23,6 +23,7 @@ import Text from "@docspace/components/text";
|
||||
import Link from "@docspace/components/link";
|
||||
import BetaBadge from "@docspace/common/components/BetaBadge";
|
||||
import { isBetaLanguage } from "@docspace/common/utils";
|
||||
import withCultureNames from "@docspace/common/hoc/withCultureNames";
|
||||
|
||||
const mapTimezonesToArray = (timezones) => {
|
||||
return timezones.map((timezone) => {
|
||||
@ -566,7 +567,9 @@ export default inject(({ auth, setup, common }) => {
|
||||
currentDeviceType,
|
||||
};
|
||||
})(
|
||||
withLoading(
|
||||
withTranslation(["Settings", "Common"])(observer(LanguageAndTimeZone))
|
||||
withCultureNames(
|
||||
withLoading(
|
||||
withTranslation(["Settings", "Common"])(observer(LanguageAndTimeZone))
|
||||
)
|
||||
)
|
||||
);
|
||||
|
@ -78,7 +78,8 @@ const PortalRenaming = (props) => {
|
||||
|
||||
useEffect(() => {
|
||||
setDocumentTitle(t("PortalRenaming"));
|
||||
if (!isLoaded) initSettings().then(() => setIsLoaded(true));
|
||||
const page = isMobileView ? "language-and-time-zone" : "general";
|
||||
if (!isLoaded) initSettings(page).then(() => setIsLoaded(true));
|
||||
|
||||
const checkScroll = checkScrollSettingsBlock();
|
||||
checkInnerWidth();
|
||||
|
@ -86,7 +86,8 @@ const WelcomePageSettings = (props) => {
|
||||
? greetingSettings
|
||||
: greetingTitleDefaultFromSessionStorage;
|
||||
|
||||
if (!isLoaded) initSettings().then(() => setIsLoaded(true));
|
||||
const page = isMobileView ? "language-and-time-zone" : "general";
|
||||
if (!isLoaded) initSettings(page).then(() => setIsLoaded(true));
|
||||
|
||||
checkInnerWidth();
|
||||
window.addEventListener("resize", checkInnerWidth);
|
||||
@ -197,8 +198,7 @@ const WelcomePageSettings = (props) => {
|
||||
.finally(() => {
|
||||
getGreetingSettingsIsDefault();
|
||||
setState((val) => ({ ...val, isLoadingGreetingSave: false }));
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
setState((val) => ({ ...val, showReminder: false }));
|
||||
|
||||
@ -225,8 +225,7 @@ const WelcomePageSettings = (props) => {
|
||||
.finally(() => {
|
||||
getGreetingSettingsIsDefault();
|
||||
setState((val) => ({ ...val, isLoadingGreetingRestore: false }));
|
||||
}
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const settingIsEqualInitialValue = (stateName, value) => {
|
||||
|
@ -42,6 +42,8 @@ const Appearance = (props) => {
|
||||
const defaultAppliedColorAccent = currentColorScheme.main.accent;
|
||||
const defaultAppliedColorButtons = currentColorScheme.main.buttons;
|
||||
|
||||
const isMobileView = currentDeviceType === DeviceType.mobile;
|
||||
|
||||
const headerAddTheme = t("Settings:NewColorScheme");
|
||||
const headerEditTheme = t("Settings:EditColorScheme");
|
||||
|
||||
@ -166,7 +168,7 @@ const Appearance = (props) => {
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("resize", onCheckView);
|
||||
resetIsInit();
|
||||
!isMobileView && resetIsInit();
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
@ -399,6 +399,20 @@ const StyledRestoreBackup = styled.div`
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.restore-backup_button-container {
|
||||
padding-block: 30px;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
margin-top: 32px;
|
||||
background-color: ${({ theme }) => theme.backgroundColor};
|
||||
|
||||
@media ${mobile} {
|
||||
position: fixed;
|
||||
padding-inline: 16px;
|
||||
inset-inline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.restore-backup_button {
|
||||
@media ${mobile} {
|
||||
width: 100%;
|
||||
|
@ -103,7 +103,7 @@ const ButtonContainer = (props) => {
|
||||
const isLoadingButton = isLoading;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="restore-backup_button-container">
|
||||
<Button
|
||||
className="restore-backup_button"
|
||||
label={t("Common:Restore")}
|
||||
@ -123,7 +123,7 @@ const ButtonContainer = (props) => {
|
||||
percent={downloadingProgress}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -6,6 +6,7 @@ import { Link, Button, InputBlock, Label, Text } from "@docspace/components";
|
||||
import toastr from "@docspace/components/toast/toastr";
|
||||
import Loaders from "@docspace/common/components/Loaders";
|
||||
import { DeviceType } from "@docspace/common/constants";
|
||||
import SaveCancelButtons from "@docspace/components/save-cancel-buttons";
|
||||
|
||||
const URL_REGEX = /^https?:\/\/[-a-zA-Z0-9@:%._\+~#=]{1,256}\/?$/;
|
||||
const DNS_PLACEHOLDER = `${window.location.protocol}//<docspace-dns-name>/`;
|
||||
@ -224,31 +225,25 @@ const DocumentService = ({
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-buttons">
|
||||
<Button
|
||||
onClick={onSubmit}
|
||||
className="button"
|
||||
primary
|
||||
size={buttonSize}
|
||||
label={t("Common:SaveButton")}
|
||||
isDisabled={
|
||||
isFormEmpty ||
|
||||
isValuesInit ||
|
||||
!allInputsValid ||
|
||||
isSaveLoading ||
|
||||
isResetLoading
|
||||
}
|
||||
isLoading={isSaveLoading}
|
||||
/>
|
||||
<Button
|
||||
onClick={onReset}
|
||||
className="button"
|
||||
size={buttonSize}
|
||||
label={t("Common:Restore")}
|
||||
isDisabled={isDefaultSettings || isSaveLoading || isResetLoading}
|
||||
isLoading={isResetLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SaveCancelButtons
|
||||
onSaveClick={onSubmit}
|
||||
onCancelClick={onReset}
|
||||
saveButtonLabel={t("Common:SaveButton")}
|
||||
cancelButtonLabel={t("Common:Restore")}
|
||||
saveButtonDisabled={
|
||||
isFormEmpty ||
|
||||
isValuesInit ||
|
||||
!allInputsValid ||
|
||||
isSaveLoading ||
|
||||
isResetLoading
|
||||
}
|
||||
cancelButtonDisabled={
|
||||
isDefaultSettings || isSaveLoading || isResetLoading
|
||||
}
|
||||
displaySettings={true}
|
||||
isSaving={isSaveLoading || isResetLoading}
|
||||
/>
|
||||
</Styled.LocationForm>
|
||||
</Styled.Location>
|
||||
);
|
||||
|
@ -55,16 +55,4 @@ export const LocationForm = styled.form`
|
||||
color: ${(props) => props.theme.client.settings.common.descriptionColor};
|
||||
}
|
||||
}
|
||||
|
||||
.form-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
|
||||
@media ${mobile} {
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
@ -14,33 +14,18 @@ import { useIsMobileView } from "../../../utils/useIsMobileView";
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
.button-wrapper {
|
||||
margin-top: 24px;
|
||||
}
|
||||
padding-block: 16px;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
margin-top: 32px;
|
||||
background-color: ${({ theme }) => theme.backgroundColor};
|
||||
|
||||
@media ${mobile} {
|
||||
.button-wrapper {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
right: 0;
|
||||
`
|
||||
: css`
|
||||
left: 0;
|
||||
`}
|
||||
width: 100%;
|
||||
padding: 16px 16px 16px 24px;
|
||||
@media ${mobile} {
|
||||
position: fixed;
|
||||
padding-inline: 16px;
|
||||
inset-inline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media ${mobile}{
|
||||
.button-wrapper {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const ProviderMetadata = (props) => {
|
||||
|
@ -86,6 +86,18 @@ const DownLoadWrapper = styled.div`
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
padding-block: 16px 30px;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
margin-top: 32px;
|
||||
background-color: ${({ theme }) => theme.backgroundColor};
|
||||
|
||||
@media ${mobile} {
|
||||
position: fixed;
|
||||
padding-inline: 16px;
|
||||
inset-inline: 0;
|
||||
}
|
||||
|
||||
.download-report_button {
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
@ -34,6 +34,10 @@ class OformsStore {
|
||||
categoryTitles = [];
|
||||
|
||||
oformLocales = null;
|
||||
filterOformsByLocaleIsLoading = false;
|
||||
categoryFilterLoaded = false;
|
||||
languageFilterLoaded = false;
|
||||
oformFilesLoaded = false;
|
||||
|
||||
submitToGalleryTileIsVisible = !localStorage.getItem(
|
||||
"submitToGalleryTileIsHidden"
|
||||
@ -45,8 +49,13 @@ class OformsStore {
|
||||
}
|
||||
|
||||
get defaultOformLocale() {
|
||||
const userLocale = convertToLanguage(getCookie(LANGUAGE)) || "en";
|
||||
return this.oformLocales?.includes(userLocale) ? userLocale : "en";
|
||||
const userLocale =
|
||||
getCookie(LANGUAGE) || this.authStore.userStore.user?.cultureName || "en";
|
||||
const convertedLocale = convertToLanguage(userLocale);
|
||||
|
||||
return this.oformLocales?.includes(convertedLocale)
|
||||
? convertedLocale
|
||||
: "en";
|
||||
}
|
||||
|
||||
setOformFiles = (oformFiles) => (this.oformFiles = oformFiles);
|
||||
@ -70,6 +79,22 @@ class OformsStore {
|
||||
|
||||
setOformLocales = (oformLocales) => (this.oformLocales = oformLocales);
|
||||
|
||||
setFilterOformsByLocaleIsLoading = (filterOformsByLocaleIsLoading) => {
|
||||
this.filterOformsByLocaleIsLoading = filterOformsByLocaleIsLoading;
|
||||
};
|
||||
|
||||
setCategoryFilterLoaded = (categoryFilterLoaded) => {
|
||||
this.categoryFilterLoaded = categoryFilterLoaded;
|
||||
};
|
||||
|
||||
setLanguageFilterLoaded = (languageFilterLoaded) => {
|
||||
this.languageFilterLoaded = languageFilterLoaded;
|
||||
};
|
||||
|
||||
setOformFilesLoaded = (oformFilesLoaded) => {
|
||||
this.oformFilesLoaded = oformFilesLoaded;
|
||||
};
|
||||
|
||||
fetchOformLocales = async () => {
|
||||
const { uploadDomain, uploadDashboard } =
|
||||
this.authStore.settingsStore.formGallery;
|
||||
@ -78,9 +103,7 @@ class OformsStore {
|
||||
|
||||
try {
|
||||
const fetchedLocales = await getOformLocales(url);
|
||||
const localeKeys = fetchedLocales.map((locale) =>
|
||||
convertToLanguage(locale.code)
|
||||
);
|
||||
const localeKeys = fetchedLocales.map((locale) => locale.code);
|
||||
this.setOformLocales(localeKeys);
|
||||
} catch (err) {
|
||||
this.setOformLocales([]);
|
||||
@ -260,6 +283,9 @@ class OformsStore {
|
||||
filterOformsByLocale = async (locale) => {
|
||||
if (!locale) return;
|
||||
|
||||
if (locale !== this.oformsFilter.locale)
|
||||
this.setFilterOformsByLocaleIsLoading(true);
|
||||
|
||||
this.currentCategory = null;
|
||||
|
||||
this.oformsFilter.page = 1;
|
||||
|
@ -494,10 +494,10 @@ class SsoFormStore {
|
||||
setSloUrls = (o) => {
|
||||
switch (o.sloBinding) {
|
||||
case BINDING_POST:
|
||||
this.sloUrlPost = o.ssoUrl;
|
||||
this.sloUrlPost = o.sloUrl;
|
||||
break;
|
||||
case BINDING_REDIRECT:
|
||||
this.sloUrlRedirect = o.ssoUrl;
|
||||
this.sloUrlRedirect = o.sloUrl;
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -429,7 +429,10 @@ export function convertToCulture(key: string) {
|
||||
}
|
||||
|
||||
export function convertToLanguage(key: string) {
|
||||
if (!key) return;
|
||||
|
||||
const splittedKey = key.split("-");
|
||||
|
||||
if (splittedKey.length > 1) return splittedKey[0];
|
||||
|
||||
return key;
|
||||
|
@ -111,6 +111,7 @@ const StyledSaveCancelButtons = styled.div`
|
||||
align-items: center;
|
||||
bottom: ${(props) => props.theme.saveCancelButtons.bottom};
|
||||
width: ${(props) => props.theme.saveCancelButtons.width};
|
||||
background-color: ${({ theme }) => theme.backgroundColor};
|
||||
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
@ -120,8 +121,12 @@ const StyledSaveCancelButtons = styled.div`
|
||||
.save-button {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? `margin-left: ${props.theme.saveCancelButtons.marginRight};`
|
||||
: `margin-right: ${props.theme.saveCancelButtons.marginRight};`}
|
||||
? css`
|
||||
margin-left: ${props.theme.saveCancelButtons.marginRight};
|
||||
`
|
||||
: css`
|
||||
margin-right: ${props.theme.saveCancelButtons.marginRight};
|
||||
`}
|
||||
}
|
||||
.unsaved-changes {
|
||||
color: ${(props) => props.theme.saveCancelButtons.unsavedColor};
|
||||
@ -133,14 +138,25 @@ const StyledSaveCancelButtons = styled.div`
|
||||
${(props) => props.displaySettings && tabletButtons}
|
||||
${(props) =>
|
||||
!props.displaySettings &&
|
||||
`
|
||||
css`
|
||||
justify-content: flex-end;
|
||||
position: fixed;
|
||||
|
||||
.unsaved-changes {
|
||||
display: none;
|
||||
}
|
||||
`}
|
||||
`}
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
position: fixed;
|
||||
inset-inline: 0;
|
||||
bottom: 0;
|
||||
${({ showReminder }) =>
|
||||
showReminder &&
|
||||
css`
|
||||
padding-top: 30px;
|
||||
`}
|
||||
}
|
||||
`;
|
||||
StyledSaveCancelButtons.defaultProps = { theme: Base };
|
||||
|
@ -26,6 +26,11 @@ const StyledBreadCrumbs = styled.div<{
|
||||
|
||||
.context-menu-button {
|
||||
transform: rotate(90deg);
|
||||
svg {
|
||||
path {
|
||||
fill: ${(props) => props.theme.selector.breadCrumbs.prevItemColor};
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -134,23 +134,39 @@ class TableHeader extends React.Component {
|
||||
|
||||
addNewColumns = (gridTemplateColumns, activeColumnIndex, containerWidth) => {
|
||||
const { columns, columnStorageName } = this.props;
|
||||
const filterColumns = columns.filter((x) => !x.defaultSize);
|
||||
|
||||
const clearSize = gridTemplateColumns.map((c) => this.getSubstring(c));
|
||||
const maxSize = Math.max.apply(Math, clearSize);
|
||||
|
||||
const defaultSize = columns[activeColumnIndex - 1].defaultSize;
|
||||
const indexOfMaxSize = clearSize.findLastIndex((s) => s === maxSize);
|
||||
|
||||
const defaultColSize = defaultSize
|
||||
const addedColumn = 1;
|
||||
const enableColumnsLength =
|
||||
columns.filter((column) => !column.defaultSize && column.enable).length -
|
||||
addedColumn;
|
||||
|
||||
const allColumnsLength = columns.filter(
|
||||
(column) => !column.defaultSize
|
||||
).length;
|
||||
|
||||
const defaultSizeColumn = columns.find(
|
||||
(column) => column.defaultSize
|
||||
)?.defaultSize;
|
||||
|
||||
const widthColumns =
|
||||
containerWidth -
|
||||
settingsSize -
|
||||
(defaultSizeColumn ? defaultSizeColumn : 0);
|
||||
|
||||
const newColumnSize = defaultSize
|
||||
? defaultSize
|
||||
: containerWidth / filterColumns.length;
|
||||
const indexOfMaxSize = clearSize.findIndex((s) => s === maxSize);
|
||||
: widthColumns / allColumnsLength;
|
||||
|
||||
const newSize = maxSize - defaultColSize;
|
||||
const newSizeMaxColumn = maxSize - newColumnSize;
|
||||
|
||||
const AddColumn = () => {
|
||||
gridTemplateColumns[indexOfMaxSize] = newSize + "px";
|
||||
gridTemplateColumns[activeColumnIndex] = defaultColSize + "px";
|
||||
gridTemplateColumns[indexOfMaxSize] = newSizeMaxColumn + "px";
|
||||
gridTemplateColumns[activeColumnIndex] = newColumnSize + "px";
|
||||
return false;
|
||||
};
|
||||
|
||||
@ -161,8 +177,10 @@ class TableHeader extends React.Component {
|
||||
};
|
||||
|
||||
if (
|
||||
(indexOfMaxSize === 0 && newSize < minSizeFirstColumn) ||
|
||||
newSize <= defaultColSize
|
||||
(indexOfMaxSize === 0 && newSizeMaxColumn < minSizeFirstColumn) ||
|
||||
(indexOfMaxSize !== 0 && newSizeMaxColumn < defaultMinColumnSize) ||
|
||||
newColumnSize < defaultMinColumnSize ||
|
||||
enableColumnsLength === 1
|
||||
)
|
||||
return ResetColumnsSize();
|
||||
else return AddColumn();
|
||||
@ -297,12 +315,12 @@ class TableHeader extends React.Component {
|
||||
});
|
||||
|
||||
//If content column sizes are calculated as empty after changing view
|
||||
if (!hasContent) return this.resetColumns(true);
|
||||
if (!hasContent) return this.resetColumns();
|
||||
}
|
||||
|
||||
// columns.length + 1 - its settings column
|
||||
if (tableContainer.length !== columns.length + 1) {
|
||||
return this.resetColumns(true);
|
||||
return this.resetColumns();
|
||||
}
|
||||
|
||||
if (!container) return;
|
||||
@ -636,7 +654,7 @@ class TableHeader extends React.Component {
|
||||
? gridTemplateColumnsWithoutOverfilling.join(" ")
|
||||
: gridTemplateColumns.join(" ");
|
||||
} else {
|
||||
this.resetColumns(true);
|
||||
this.resetColumns();
|
||||
}
|
||||
|
||||
if (str) {
|
||||
@ -724,7 +742,7 @@ class TableHeader extends React.Component {
|
||||
}
|
||||
};
|
||||
|
||||
resetColumns = (resetToDefault = false) => {
|
||||
resetColumns = () => {
|
||||
const {
|
||||
containerRef,
|
||||
columnStorageName,
|
||||
@ -732,9 +750,6 @@ class TableHeader extends React.Component {
|
||||
columns,
|
||||
infoPanelVisible,
|
||||
} = this.props;
|
||||
const defaultSize = this.props.columns.find(
|
||||
(col) => col.defaultSize
|
||||
)?.defaultSize;
|
||||
|
||||
let str = "";
|
||||
|
||||
@ -748,39 +763,21 @@ class TableHeader extends React.Component {
|
||||
: document.getElementById("table-container");
|
||||
const containerWidth = +container.clientWidth;
|
||||
|
||||
if (resetToDefault) {
|
||||
const firstColumnPercent = 40;
|
||||
const percent = 60 / enableColumns.length;
|
||||
const firstColumnPercent = 40;
|
||||
const percent = 60 / enableColumns.length;
|
||||
|
||||
const wideColumnSize = (containerWidth * firstColumnPercent) / 100 + "px";
|
||||
const otherColumns = (containerWidth * percent) / 100 + "px";
|
||||
const wideColumnSize = (containerWidth * firstColumnPercent) / 100 + "px";
|
||||
const otherColumns = (containerWidth * percent) / 100 + "px";
|
||||
|
||||
for (let col of columns) {
|
||||
if (col.default) {
|
||||
str += `${wideColumnSize} `;
|
||||
} else
|
||||
str += col.enable
|
||||
? col.defaultSize
|
||||
? `${col.defaultSize}px `
|
||||
: `${otherColumns} `
|
||||
: "0px ";
|
||||
}
|
||||
} else {
|
||||
const percent = 100 / enableColumns.length;
|
||||
const newContainerWidth =
|
||||
containerWidth - containerMargin - (defaultSize || 0);
|
||||
const otherColumns = (newContainerWidth * percent) / 100 + "px";
|
||||
|
||||
str = "";
|
||||
for (let col of this.props.columns) {
|
||||
for (let col of columns) {
|
||||
if (col.default) {
|
||||
str += `${wideColumnSize} `;
|
||||
} else
|
||||
str += col.enable
|
||||
? /* col.minWidth
|
||||
? `${col.minWidth}px `
|
||||
: */ col.defaultSize
|
||||
? col.defaultSize
|
||||
? `${col.defaultSize}px `
|
||||
: `${otherColumns} `
|
||||
: "0px ";
|
||||
}
|
||||
}
|
||||
|
||||
str += `${settingsSize}px`;
|
||||
|
@ -1954,7 +1954,7 @@ const Base = {
|
||||
navigation: {
|
||||
expanderColor: black,
|
||||
background: white,
|
||||
rootFolderTitleColor: "#A3A9AE",
|
||||
rootFolderTitleColor: "#657077",
|
||||
publicIcon: black,
|
||||
boxShadow: " 0px 12px 40px 0px #040F1B1F",
|
||||
|
||||
@ -2300,8 +2300,8 @@ const Base = {
|
||||
border: `1px solid ${grayLightMid}`,
|
||||
|
||||
breadCrumbs: {
|
||||
prevItemColor: "#A3A9AE",
|
||||
arrowRightColor: "#A3A9AE",
|
||||
prevItemColor: "#657077",
|
||||
arrowRightColor: "#657077",
|
||||
},
|
||||
|
||||
bodyDescriptionText: "#A3A9AE",
|
||||
@ -3182,6 +3182,12 @@ const Base = {
|
||||
descriptionColor: "#555F65",
|
||||
},
|
||||
|
||||
infoBar: {
|
||||
background: "#f8f9f9",
|
||||
title: black,
|
||||
description: cyanBlueDarkShade,
|
||||
},
|
||||
|
||||
roomIcon: {
|
||||
backgroundArchive: "#A3A9AE",
|
||||
opacityBackground: "1",
|
||||
|
@ -1949,7 +1949,7 @@ const Dark = {
|
||||
navigation: {
|
||||
expanderColor: "#eeeeee",
|
||||
background: black,
|
||||
rootFolderTitleColor: "#858585",
|
||||
rootFolderTitleColor: "#ADADAD",
|
||||
publicIcon: "#858585",
|
||||
boxShadow: "0px 12px 40px 0px #00000066",
|
||||
|
||||
@ -2302,8 +2302,8 @@ const Dark = {
|
||||
border: `1px solid #474747`,
|
||||
|
||||
breadCrumbs: {
|
||||
prevItemColor: "#858585",
|
||||
arrowRightColor: "#858585",
|
||||
prevItemColor: "#ADADAD",
|
||||
arrowRightColor: "#ADADAD",
|
||||
},
|
||||
|
||||
bodyDescriptionText: "#858585",
|
||||
@ -3183,6 +3183,12 @@ const Dark = {
|
||||
descriptionColor: "#ADADAD",
|
||||
},
|
||||
|
||||
infoBar: {
|
||||
background: "#282828",
|
||||
title: white,
|
||||
description: "#ADADAD",
|
||||
},
|
||||
|
||||
roomIcon: {
|
||||
backgroundArchive: "#FFFFFF",
|
||||
opacityBackground: "0.1",
|
||||
|
Loading…
Reference in New Issue
Block a user