From dd6e229fce96722deaff1a8cf6d00cdbca9bf08a Mon Sep 17 00:00:00 2001 From: hexxa Date: Sun, 23 Jan 2022 14:59:17 +0800 Subject: [PATCH] fix(fe): enable loading icon --- src/client/web/src/components/pane_admin.tsx | 211 ++++++++++++------ .../web/src/components/pane_settings.tsx | 86 ++++--- .../web/src/components/panel_sharings.tsx | 26 ++- .../web/src/components/panel_uploadings.tsx | 25 ++- 4 files changed, 226 insertions(+), 122 deletions(-) diff --git a/src/client/web/src/components/pane_admin.tsx b/src/client/web/src/components/pane_admin.tsx index 55346d2..fbd4b9f 100644 --- a/src/client/web/src/components/pane_admin.tsx +++ b/src/client/web/src/components/pane_admin.tsx @@ -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; @@ -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 { 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 { 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 { 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 { 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 { 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 = () => { diff --git a/src/client/web/src/components/pane_settings.tsx b/src/client/web/src/components/pane_settings.tsx index b9f6f33..ac1d4d9 100644 --- a/src/client/web/src/components/pane_settings.tsx +++ b/src/client/web/src/components/pane_settings.tsx @@ -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 { }; } + 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 => { 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 = () => { diff --git a/src/client/web/src/components/panel_sharings.tsx b/src/client/web/src/components/panel_sharings.tsx index f8c43ce..7bacd7c 100644 --- a/src/client/web/src/components/panel_sharings.tsx +++ b/src/client/web/src/components/panel_sharings.tsx @@ -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; @@ -36,7 +36,14 @@ export class SharingsPanel extends React.Component { 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 { 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): List => { diff --git a/src/client/web/src/components/panel_uploadings.tsx b/src/client/web/src/components/panel_uploadings.tsx index 7650861..0348841 100644 --- a/src/client/web/src/components/panel_uploadings.tsx +++ b/src/client/web/src/components/panel_uploadings.tsx @@ -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; @@ -36,7 +36,14 @@ export class UploadingsPanel extends React.Component { this.state = {}; } + setLoading = (state: boolean) => { + updater().setControlOption(loadingCtrl, state ? ctrlOn : ctrlOff); + this.props.update(updater().updateUI); + }; + deleteUpload = async (filePath: string): Promise => { + this.setLoading(true); + try { const deleteStatus = await updater().deleteUpload(filePath); if (deleteStatus !== "") { @@ -55,6 +62,8 @@ export class UploadingsPanel extends React.Component { 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 { ); - // file path, size, progress - const sortVals = List([ - uploading.filePath, - `${uploading.size}`, - `${progress}`, - ]); + // file path + const sortVals = List([uploading.filePath]); return { elem, sortVals, @@ -148,11 +153,7 @@ export class UploadingsPanel extends React.Component { 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 = (