doesnm/quickshare
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(fe): enable loading icon

Browse source
This commit is contained in:
hexxa 2022-01-23 14:59:17 +08:00 • committed by Hexxa
parent 5a11463386
commit dd6e229fce
4 changed files with 226 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

211
src/client/web/src/components/pane_admin.tsx
View file

@ -10,6 +10,7 @@ import { User, Quota } from "../client";
import { updater } from "./state_updater";
import { Flexbox } from "./layout/flexbox";
import { Container } from "./layout/container";
import { loadingCtrl, ctrlOn, ctrlOff } from "../common/controls";
export interface AdminProps {
users: Map<string, User>;
@ -103,41 +104,57 @@ export class UserForm extends React.Component<
});
};
setLoading = (state: boolean) => {
updater().setControlOption(loadingCtrl, state ? ctrlOn : ctrlOff);
this.props.update(updater().updateUI);
};
setPwd = async () => {
if (this.state.newPwd1 !== this.state.newPwd2) {
alertMsg(this.props.msg.pkg.get("settings.pwd.notSame"));
return;
}
return updater()
.forceSetPwd(this.state.id, this.state.newPwd1)
.then((status: string) => {
if (status === "") {
alertMsg(this.props.msg.pkg.get("update.ok"));
} else {
alertMsg(this.props.msg.pkg.get("update.fail"));
}
this.setState({
newPwd1: "",
newPwd2: "",
});
});
this.setLoading(true);
try {
const status = await updater().forceSetPwd(
this.state.id,
this.state.newPwd1
);
if (status !== "") {
alertMsg(this.props.msg.pkg.get("update.fail"));
return;
}
alertMsg(this.props.msg.pkg.get("update.ok"));
} finally {
this.setLoading(false);
}
};
setUser = async () => {
return updater()
.setUser(this.props.id, this.state.role, this.state.quota)
.then((status: string) => {
if (status === "") {
alertMsg(this.props.msg.pkg.get("update.ok"));
} else {
alertMsg(this.props.msg.pkg.get("update.fail"));
}
return updater().listUsers();
})
.then(() => {
this.props.update(updater().updateAdmin);
});
this.setLoading(true);
try {
const status = await updater().setUser(
this.props.id,
this.state.role,
this.state.quota
);
if (status !== "") {
alertMsg(this.props.msg.pkg.get("update.fail"));
return;
}
const listStatus = await updater().listUsers();
if (listStatus !== "") {
alertMsg(this.props.msg.pkg.get("update.fail"));
return;
}
alertMsg(this.props.msg.pkg.get("update.ok"));
} finally {
this.props.update(updater().updateAdmin);
this.setLoading(false);
}
};
delUser = async () => {
@ -145,17 +162,25 @@ export class UserForm extends React.Component<
return;
}
return updater()
.delUser(this.state.id)
.then((status: string) => {
if (status !== "") {
alertMsg(this.props.msg.pkg.get("delete.fail"));
}
return updater().listUsers();
})
.then((_: string) => {
this.props.update(updater().updateAdmin);
});
this.setLoading(true);
try {
const status = await updater().delUser(this.state.id);
if (status !== "") {
alertMsg(this.props.msg.pkg.get("delete.fail"));
return;
}
const listStatus = await updater().listUsers();
if (listStatus !== "") {
alertMsg(this.props.msg.pkg.get("op.fail"));
return;
}
alertMsg(this.props.msg.pkg.get("delete.ok"));
} finally {
this.props.update(updater().updateAdmin);
this.setLoading(false);
}
};
toggle = () => {
@ -369,14 +394,30 @@ export class AdminPane extends React.Component<Props, State, {}> {
this.setState({ newRole: ev.target.value });
};
setLoading = (state: boolean) => {
updater().setControlOption(loadingCtrl, state ? ctrlOn : ctrlOff);
this.props.update(updater().updateUI);
};
addRole = async () => {
const status = await updater().addRole(this.state.newRole);
if (status !== "") {
alertMsg(this.props.msg.pkg.get("add.fail"));
} else {
this.setLoading(true);
try {
const status = await updater().addRole(this.state.newRole);
if (status !== "") {
alertMsg(this.props.msg.pkg.get("add.fail"));
return;
}
const listStatus = await updater().listRoles();
if (listStatus !== "") {
alertMsg(this.props.msg.pkg.get("add.fail"));
return;
}
alertMsg(this.props.msg.pkg.get("add.ok"));
await updater().listRoles();
} finally {
this.props.update(updater().updateAdmin);
this.setLoading(false);
}
};
@ -385,12 +426,24 @@ export class AdminPane extends React.Component<Props, State, {}> {
return;
}
const status = await updater().delRole(role);
if (status !== "") {
this.props.msg.pkg.get("delete.fail");
} else {
this.setLoading(true);
try {
const status = await updater().delRole(role);
if (status !== "") {
this.props.msg.pkg.get("delete.fail");
return;
}
const listStatus = await updater().listRoles();
if (listStatus !== "") {
alertMsg(this.props.msg.pkg.get("add.fail"));
return;
}
this.props.msg.pkg.get("delete.ok");
await updater().listRoles();
} finally {
this.setLoading(false);
this.props.update(updater().updateAdmin);
}
};
@ -401,27 +454,38 @@ export class AdminPane extends React.Component<Props, State, {}> {
return;
}
const status = await updater().addUser({
id: "", // backend will fill it
name: this.state.newUserName,
pwd: this.state.newUserPwd1,
role: this.state.newUserRole,
quota: undefined,
usedSpace: "0",
preferences: undefined,
});
this.setLoading(true);
try {
const status = await updater().addUser({
id: "", // backend will fill it
name: this.state.newUserName,
pwd: this.state.newUserPwd1,
role: this.state.newUserRole,
quota: undefined,
usedSpace: "0",
preferences: undefined,
});
if (status !== "") {
alertMsg(this.props.msg.pkg.get("add.fail"));
return;
}
const listStatus = await updater().listUsers();
if (listStatus !== "") {
alertMsg(this.props.msg.pkg.get("op.fail"));
return;
}
if (status !== "") {
alertMsg(this.props.msg.pkg.get("add.fail"));
} else {
alertMsg(this.props.msg.pkg.get("add.ok"));
} finally {
this.setState({
newUserName: "",
newUserPwd1: "",
newUserPwd2: "",
newUserRole: "",
});
await updater().listUsers();
this.setLoading(false);
this.props.update(updater().updateAdmin);
}
};
@ -652,6 +716,11 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
super(p);
}
setLoading = (state: boolean) => {
updater().setControlOption(loadingCtrl, state ? ctrlOn : ctrlOff);
this.props.update(updater().updateUI);
};
setClientCfg = async () => {
const bgURL = this.props.ui.bg.url;
if (bgURL.length === 0 || bgURL.length >= 4096) {
@ -690,19 +759,23 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
return;
}
return updater()
.setClientCfgRemote({
this.setLoading(true);
try {
const status = await updater().setClientCfgRemote({
siteName: this.props.ui.siteName,
siteDesc: this.props.ui.siteDesc,
bg: this.props.ui.bg,
})
.then((status: string) => {
if (status === "") {
alertMsg(this.props.msg.pkg.get("update.ok"));
} else {
alertMsg(this.props.msg.pkg.get("update.fail"));
}
});
if (status !== "") {
alertMsg(this.props.msg.pkg.get("update.fail"));
return;
}
alertMsg(this.props.msg.pkg.get("update.ok"));
} finally {
this.setLoading(false);
}
};
resetClientCfg = () => {

86
src/client/web/src/components/pane_settings.tsx
View file

@ -11,6 +11,7 @@ import { Container } from "./layout/container";
import { Card } from "./layout/card";
import { Rows, Row } from "./layout/rows";
import { ClientErrorV001, ErrorLogger } from "../common/log_error";
import { loadingCtrl, ctrlOn, ctrlOff } from "../common/controls";
export interface Props {
login: LoginProps;
msg: MsgProps;
@ -85,59 +86,74 @@ export class PaneSettings extends React.Component<Props, State, {}> {
};
}
setLoading = (state: boolean) => {
updater().setControlOption(loadingCtrl, state ? ctrlOn : ctrlOff);
this.props.update(updater().updateUI);
};
syncPreferences = async () => {
updater()
.syncPreferences()
.then((status: string) => {
if (status === "") {
alertMsg(this.props.msg.pkg.get("update.ok"));
} else {
alertMsg(this.props.msg.pkg.get("update.fail"));
}
});
this.setLoading(true);
try {
const status = await updater().syncPreferences();
if (status !== "") {
alertMsg(this.props.msg.pkg.get("update.fail"));
return;
}
alertMsg(this.props.msg.pkg.get("update.ok"));
} finally {
this.setLoading(false);
}
};
setPwd = async (): Promise<any> => {
if (this.state.newPwd1 !== this.state.newPwd2) {
alertMsg(this.props.msg.pkg.get("settings.pwd.notSame"));
return;
} else if (
this.state.oldPwd == "" ||
this.state.newPwd1 == "" ||
this.state.newPwd2 == ""
) {
alertMsg(this.props.msg.pkg.get("settings.pwd.empty"));
return;
} else if (this.state.oldPwd == this.state.newPwd1) {
alertMsg(this.props.msg.pkg.get("settings.pwd.notChanged"));
} else {
return updater()
.setPwd(this.state.oldPwd, this.state.newPwd1)
.then((status: string) => {
if (status === "") {
alertMsg(this.props.msg.pkg.get("update.ok"));
} else {
alertMsg(this.props.msg.pkg.get("update.fail"));
}
this.setState({
oldPwd: "",
newPwd1: "",
newPwd2: "",
});
});
return;
}
this.setLoading(true);
try {
const status = await updater().setPwd(
this.state.oldPwd,
this.state.newPwd1
);
if (status !== "") {
alertMsg(this.props.msg.pkg.get("update.fail"));
return;
}
alertMsg(this.props.msg.pkg.get("update.ok"));
} finally {
this.setState({
oldPwd: "",
newPwd1: "",
newPwd2: "",
});
this.setLoading(false);
}
};
setLan = (lan: string) => {
setLan = async (lan: string) => {
updater().setLan(lan);
updater()
.syncPreferences()
.then((status: string) => {
if (status === "") {
alertMsg(this.props.msg.pkg.get("update.ok"));
this.props.update(updater().updateMsg);
} else {
alertMsg(this.props.msg.pkg.get("update.fail"));
}
});
try {
const status = await updater().syncPreferences();
if (status !== "") {
alertMsg(this.props.msg.pkg.get("update.fail"));
}
} finally {
alertMsg(this.props.msg.pkg.get("update.ok"));
this.props.update(updater().updateMsg);
}
};
truncateErrors = () => {

26
src/client/web/src/components/panel_sharings.tsx
View file

@ -1,6 +1,5 @@
import * as React from "react";
import { List, Map } from "immutable";
import QRCode from "react-qr-code";
import { RiShareBoxLine } from "@react-icons/all-files/ri/RiShareBoxLine";
import { RiCloudOffFill } from "@react-icons/all-files/ri/RiCloudOffFill";
@ -15,6 +14,7 @@ import { Flexbox } from "./layout/flexbox";
import { Container } from "./layout/container";
import { Rows, Row } from "./layout/rows";
import { shareIDQuery } from "../client/files";
import { loadingCtrl, ctrlOn, ctrlOff } from "../common/controls";
export interface SharingsProps {
sharings: Map<string, string>;
@ -36,7 +36,14 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
this.state = {};
}
setLoading = (state: boolean) => {
updater().setControlOption(loadingCtrl, state ? ctrlOn : ctrlOff);
this.props.update(updater().updateUI);
};
deleteSharing = async (dirPath: string) => {
this.setLoading(true);
try {
const deleteStatus = await updater().deleteSharing(dirPath);
if (deleteStatus !== "") {
@ -47,16 +54,23 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
await this.listSharings();
} catch (e: any) {
alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
} finally {
this.setLoading(false);
}
};
listSharings = async () => {
const status = await updater().listSharings();
if (status !== "") {
alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
this.setLoading(true);
try {
const status = await updater().listSharings();
if (status !== "") {
alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
}
this.props.update(updater().updateFilesInfo);
this.props.update(updater().updateSharingsInfo);
} finally {
this.setLoading(false);
}
this.props.update(updater().updateFilesInfo);
this.props.update(updater().updateSharingsInfo);
};
makeRows = (sharings: Map<string, string>): List<Row> => {

25
src/client/web/src/components/panel_uploadings.tsx
View file

@ -3,7 +3,6 @@ import { List } from "immutable";
import FileSize from "filesize";
import { RiUploadCloudFill } from "@react-icons/all-files/ri/RiUploadCloudFill";
import { RiUploadCloudLine } from "@react-icons/all-files/ri/RiUploadCloudLine";
import { RiCloudOffFill } from "@react-icons/all-files/ri/RiCloudOffFill";
import { alertMsg } from "../common/env";
@ -15,6 +14,7 @@ import { UploadEntry, UploadState } from "../worker/interface";
import { Flexbox } from "./layout/flexbox";
import { Container } from "./layout/container";
import { Rows, Row } from "./layout/rows";
import { loadingCtrl, ctrlOn, ctrlOff } from "../common/controls";
export interface UploadingsProps {
uploadings: List<UploadEntry>;
@ -36,7 +36,14 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
this.state = {};
}
setLoading = (state: boolean) => {
updater().setControlOption(loadingCtrl, state ? ctrlOn : ctrlOff);
this.props.update(updater().updateUI);
};
deleteUpload = async (filePath: string): Promise<void> => {
this.setLoading(true);
try {
const deleteStatus = await updater().deleteUpload(filePath);
if (deleteStatus !== "") {
@ -55,6 +62,8 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
this.props.update(updater().updateUploadingsInfo);
} catch (status: any) {
alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status.toString()));
} finally {
this.setLoading(false);
}
};
@ -122,12 +131,8 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
</div>
);
// file path, size, progress
const sortVals = List<string>([
uploading.filePath,
`${uploading.size}`,
`${progress}`,
]);
// file path
const sortVals = List<string>([uploading.filePath]);
return {
elem,
sortVals,
@ -148,11 +153,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
const uploadingRows = this.makeRowsInputs(
this.props.uploadingsInfo.uploadings
);
const sortKeys = List([
this.props.msg.pkg.get("item.path"),
this.props.msg.pkg.get("item.size"),
this.props.msg.pkg.get("item.progress"),
]);
const sortKeys = List([this.props.msg.pkg.get("item.path")]);
const view = (
<Rows
sortKeys={sortKeys}