Web: Added setting default quota for rooms.

This commit is contained in:
Tatiana Lopaeva 2023-09-27 15:32:23 +03:00
parent 39ed06b99c
commit 12f6a30617
5 changed files with 135 additions and 134 deletions

View File

@ -0,0 +1,83 @@
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { inject, observer } from "mobx-react";
import Text from "@docspace/components/text";
import ToggleButton from "@docspace/components/toggle-button";
import { StyledBaseQuotaComponent } from "../StyledComponent";
import QuotaForm from "../../../../../components/QuotaForm";
let timerId = null;
const QuotaPerItemComponent = (props) => {
const { isDisabled, saveQuota, disableQuota, toggleLabel, formLabel } = props;
const { t } = useTranslation("Settings");
const [isToggleChecked, setIsToggleChecked] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const onToggleChange = async (e) => {
const { checked } = e.currentTarget;
setIsToggleChecked(checked);
if (checked) return;
setIsLoading(true);
await disableQuota();
setIsLoading(false);
};
const onSaveQuota = async (size) => {
console.log("onSaveUserQuota", size);
timerId = setTimeout(() => setIsLoading(true), 200);
await saveQuota(size);
timerId && clearTimeout(timerId);
timerId = null;
setIsLoading(false);
};
return (
<StyledBaseQuotaComponent isDisabled={isDisabled}>
<div className="toggle-container">
<ToggleButton
fontWeight={600}
fontSize="14px"
className="quotas_toggle-button"
label={toggleLabel}
onChange={onToggleChange}
isChecked={isToggleChecked}
isDisabled={isDisabled || isLoading}
/>
<Text className="toggle_label" fontSize="12px">
{t("SetDefaultUserQuota")}
</Text>
{isToggleChecked && (
<QuotaForm
isButtonsEnable
label={formLabel}
maxInputWidth={"214px"}
isLoading={isLoading}
isDisabled={isDisabled}
onSave={onSaveQuota}
/>
)}
</div>
</StyledBaseQuotaComponent>
);
};
export default inject(({ auth }) => {
const { currentQuotaStore } = auth;
const { setUserQuota } = currentQuotaStore;
const { isItemQuotaAvailable } = currentQuotaStore;
return { setUserQuota, isDisabled: !isItemQuotaAvailable };
})(observer(QuotaPerItemComponent));

View File

@ -1,78 +1,25 @@
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { inject, observer } from "mobx-react";
import Text from "@docspace/components/text";
import ToggleButton from "@docspace/components/toggle-button";
import QuotaPerItemComponent from "./QuotaPerItem";
import { StyledBaseQuotaComponent } from "../StyledComponent";
import QuotaForm from "../../../../../components/QuotaForm";
let timerId = null;
const QuotaPerRoomComponent = (props) => {
const { isDisabled } = props;
const { setRoomQuota } = props;
const { t } = useTranslation("Settings");
const [isToggleChecked, setIsToggleChecked] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const onToggleChange = (e) => {
const { checked } = e.currentTarget;
setIsToggleChecked(checked);
};
const startLoading = (name) => {
setTimeout(() => setIsLoading({ ...isLoading, [name]: true }), 200);
};
const resetLoading = (name) => {
setIsLoading({ [name]: false });
};
const onSaveRoomQuota = async (size) => {
const name = "room";
console.log("onSaveRoomQuota", size);
timerId = startLoading(name);
var promise = new Promise((resolve, reject) => {
setTimeout(() => {
//reject(new Error("timeout"));
resolve();
}, [1000]);
});
await promise;
timerId && clearTimeout(timerId);
timerId = null;
resetLoading(name);
};
return (
<StyledBaseQuotaComponent isDisabled={isDisabled}>
<div className="toggle-container">
<ToggleButton
className="quotas_toggle-button"
name="room"
label={t("DefineQuotaPerRoom")}
onChange={onToggleChange}
isChecked={isToggleChecked}
isDisabled={isDisabled || isLoading}
/>
<Text className="toggle_label">{t("SetDefaultRoomQuota")}</Text>
{isToggleChecked && (
<QuotaForm
isButtonsEnable
label={t("QuotaPerRoom")}
maxInputWidth={"214px"}
onSave={onSaveRoomQuota}
isLoading={isLoading}
isDisabled={isDisabled}
/>
)}
</div>
</StyledBaseQuotaComponent>
<QuotaPerItemComponent
formLabel={t("QuotaPerRoom")}
toggleLabel={t("DefineQuotaPerRoom")}
disableQuota={() => setRoomQuota(-1, t)}
saveQuota={(size) => setRoomQuota(size, t)}
/>
);
};
export default QuotaPerRoomComponent;
export default inject(({ auth }) => {
const { currentQuotaStore } = auth;
const { setRoomQuota } = currentQuotaStore;
return { setRoomQuota };
})(observer(QuotaPerRoomComponent));

View File

@ -1,82 +1,26 @@
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { inject, observer } from "mobx-react";
import Text from "@docspace/components/text";
import ToggleButton from "@docspace/components/toggle-button";
import QuotaPerItemComponent from "./QuotaPerItem";
import { StyledBaseQuotaComponent } from "../StyledComponent";
import QuotaForm from "../../../../../components/QuotaForm";
let timerId = null;
const QuotaPerUserComponent = (props) => {
const { isDisabled, setUserQuota } = props;
const { setUserQuota } = props;
const { t } = useTranslation("Settings");
const [isToggleChecked, setIsToggleChecked] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const onToggleChange = async (e) => {
const { checked } = e.currentTarget;
setIsToggleChecked(checked);
if (checked) return;
setIsLoading(true);
await setUserQuota(-1, t);
setIsLoading(false);
};
const onSaveUserQuota = async (size) => {
console.log("onSaveUserQuota", size);
timerId = setTimeout(() => setIsLoading(true), 200);
await setUserQuota(size, t);
timerId && clearTimeout(timerId);
timerId = null;
setIsLoading(false);
};
return (
<StyledBaseQuotaComponent isDisabled={isDisabled}>
<div className="toggle-container">
<ToggleButton
fontWeight={600}
fontSize="14px"
className="quotas_toggle-button"
label={t("DefineQuotaPerUser")}
onChange={onToggleChange}
isChecked={isToggleChecked}
isDisabled={isDisabled || isLoading}
/>
<Text className="toggle_label" fontSize="12px">
{t("SetDefaultUserQuota")}
</Text>
{isToggleChecked && (
<QuotaForm
isButtonsEnable
label={t("QuotaPerUser")}
maxInputWidth={"214px"}
isLoading={isLoading}
isDisabled={isDisabled}
onSave={onSaveUserQuota}
/>
)}
</div>
</StyledBaseQuotaComponent>
<QuotaPerItemComponent
formLabel={t("QuotaPerUser")}
toggleLabel={t("DefineQuotaPerUser")}
disableQuota={() => setUserQuota(-1, t)}
saveQuota={(size) => setUserQuota(size, t)}
/>
);
};
export default inject(({ auth }) => {
const { currentQuotaStore } = auth;
const { setUserQuota } = currentQuotaStore;
const { isItemQuotaAvailable } = currentQuotaStore;
return { setUserQuota, isDisabled: !isItemQuotaAvailable };
return { setUserQuota };
})(observer(QuotaPerUserComponent));

View File

@ -781,7 +781,19 @@ export function setDefaultUserQuota(enableQuota, defaultQuota) {
return request(options);
}
export function setDefaultRoomQuota(enableQuota, defaultQuota) {
const data = {
enableQuota,
defaultQuota,
};
const options = {
method: "post",
url: "/settings/roomquotasettings",
data,
};
return request(options);
}
export function createWebhook(name, uri, secretKey, ssl) {
return request({
method: "post",

View File

@ -4,7 +4,7 @@ import toastr from "@docspace/components/toast/toastr";
import api from "../api";
import { PortalFeaturesLimitations } from "../constants";
import authStore from "./AuthStore";
import { setDefaultUserQuota } from "../api/settings";
import { setDefaultUserQuota, setDefaultRoomQuota } from "../api/settings";
const MANAGER = "manager";
const TOTAL_SIZE = "total_size";
@ -262,6 +262,21 @@ class QuotasStore {
toastr.error(e);
}
};
setRoomQuota = async (quota, t) => {
const isEnable = quota !== -1;
try {
await setDefaultRoomQuota(isEnable, quota);
const toastrText = isEnable
? t("MemoryQuotaEnabled")
: t("MemoryQuotaDisabled");
toastr.success(toastrText);
} catch (e) {
toastr.error(e);
}
};
}
export default QuotasStore;