Web: Added setting default quota for rooms.
This commit is contained in:
parent
39ed06b99c
commit
12f6a30617
@ -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));
|
@ -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}
|
||||
<QuotaPerItemComponent
|
||||
formLabel={t("QuotaPerRoom")}
|
||||
toggleLabel={t("DefineQuotaPerRoom")}
|
||||
disableQuota={() => setRoomQuota(-1, t)}
|
||||
saveQuota={(size) => setRoomQuota(size, t)}
|
||||
/>
|
||||
<Text className="toggle_label">{t("SetDefaultRoomQuota")}</Text>
|
||||
{isToggleChecked && (
|
||||
<QuotaForm
|
||||
isButtonsEnable
|
||||
label={t("QuotaPerRoom")}
|
||||
maxInputWidth={"214px"}
|
||||
onSave={onSaveRoomQuota}
|
||||
isLoading={isLoading}
|
||||
isDisabled={isDisabled}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</StyledBaseQuotaComponent>
|
||||
);
|
||||
};
|
||||
|
||||
export default QuotaPerRoomComponent;
|
||||
export default inject(({ auth }) => {
|
||||
const { currentQuotaStore } = auth;
|
||||
const { setRoomQuota } = currentQuotaStore;
|
||||
|
||||
return { setRoomQuota };
|
||||
})(observer(QuotaPerRoomComponent));
|
||||
|
@ -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}
|
||||
<QuotaPerItemComponent
|
||||
formLabel={t("QuotaPerUser")}
|
||||
toggleLabel={t("DefineQuotaPerUser")}
|
||||
disableQuota={() => setUserQuota(-1, t)}
|
||||
saveQuota={(size) => setUserQuota(size, t)}
|
||||
/>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth }) => {
|
||||
const { currentQuotaStore } = auth;
|
||||
const { setUserQuota } = currentQuotaStore;
|
||||
const { isItemQuotaAvailable } = currentQuotaStore;
|
||||
|
||||
return { setUserQuota, isDisabled: !isItemQuotaAvailable };
|
||||
return { setUserQuota };
|
||||
})(observer(QuotaPerUserComponent));
|
||||
|
@ -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",
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user