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

feat(ui/browser): support used space

Browse source
This commit is contained in:
hexxa 2021-08-29 22:34:28 +08:00 • committed by Hexxa
parent 93d946e535
commit c76e61a686
11 changed files with 162 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/client/web/src/client/users_mock.ts
View file

@ -1,7 +1,6 @@
// TODO: replace this with jest mocks
import { Response, Quota } from "./";
export interface UsersClientResps {
loginMockResp: Response;
logoutMockResp: Response;
@ -77,6 +76,11 @@ export const resps = {
name: "mockUser",
role: "admin",
usedSpace: "256",
quota: {
spaceLimit: "7",
uploadSpeedLimit: 3,
downloadSpeedLimit: 3,
},
},
},
getCaptchaIDMockResp: {
@ -125,7 +129,6 @@ export class MockUsersClient {
setUser = (id: string, role: string, quota: Quota): Promise<Response> => {
return this.wrapPromise(this.resps.setUserMockResp);
};
forceSetPwd = (userID: string, newPwd: string): Promise<Response> => {
return this.wrapPromise(this.resps.forceSetPwdMockResp);

6
src/client/web/src/components/__test__/pane_login.test.tsx
View file

@ -36,6 +36,12 @@ describe("Login", () => {
userName: "mockUser",
userRole: "admin",
authed: true,
usedSpace: "256",
quota: {
spaceLimit: "7",
uploadSpeedLimit: 3,
downloadSpeedLimit: 3,
},
captchaID: "",
});

10
src/client/web/src/components/__test__/state_mgr.test.tsx
View file

@ -22,8 +22,8 @@ describe("State Manager", () => {
// TODO: depress warning
mgr.update = (apply: (prevState: ICoreState) => ICoreState): void => {
// no op
};
// no op
};
const coreState = newWithWorker(mockWorker);
await mgr.initUpdater(coreState);
@ -52,6 +52,12 @@ describe("State Manager", () => {
userID: "0",
userName: "mockUser",
userRole: "admin",
usedSpace: "256",
quota: {
spaceLimit: "7",
uploadSpeedLimit: 3,
downloadSpeedLimit: 3,
},
authed: true,
captchaID: "mockCaptchaID",
});

117
src/client/web/src/components/browser.tsx
View file

@ -6,7 +6,7 @@ import { RiFolder2Fill } from "@react-icons/all-files/ri/RiFolder2Fill";
import { RiFileList2Fill } from "@react-icons/all-files/ri/RiFileList2Fill";
import { RiFile2Fill } from "@react-icons/all-files/ri/RiFile2Fill";
import { RiShareBoxLine } from "@react-icons/all-files/ri/RiShareBoxLine";
import { RiShareForwardBoxFill } from "@react-icons/all-files/ri/RiShareForwardBoxFill";
import { RiFolderSharedFill } from "@react-icons/all-files/ri/RiFolderSharedFill";
import { RiUploadCloudFill } from "@react-icons/all-files/ri/RiUploadCloudFill";
import { RiUploadCloudLine } from "@react-icons/all-files/ri/RiUploadCloudLine";
import { RiEmotionSadLine } from "@react-icons/all-files/ri/RiEmotionSadLine";
@ -14,6 +14,7 @@ import { RiEmotionSadLine } from "@react-icons/all-files/ri/RiEmotionSadLine";
import { alertMsg, comfirmMsg } from "../common/env";
import { updater } from "./state_updater";
import { ICoreState, MsgProps } from "./core_state";
import { LoginProps } from "./pane_login";
import { MetadataResp, UploadInfo } from "../client";
import { Up } from "../worker/upload_mgr";
import { UploadEntry } from "../worker/interface";
@ -44,6 +45,7 @@ export interface BrowserProps {
export interface Props {
browser: BrowserProps;
msg: MsgProps;
login: LoginProps;
update?: (updater: (prevState: ICoreState) => ICoreState) => void;
}
@ -477,6 +479,15 @@ export class Browser extends React.Component<Props, State, {}> {
);
});
const usedSpace = FileSize(parseInt(this.props.login.usedSpace, 10), {
round: 0,
});
const spaceLimit = FileSize(
parseInt(this.props.login.quota.spaceLimit, 10),
{
round: 0,
}
);
const itemListPane =
this.props.browser.tab === "" || this.props.browser.tab === "item" ? (
<div>
@ -485,49 +496,61 @@ export class Browser extends React.Component<Props, State, {}> {
</div>
<div className="container">
<div className="padding-m">
{this.props.browser.isSharing ? (
<button
type="button"
onClick={() => {
this.deleteSharing(this.props.browser.dirPath.join("/"));
}}
className="red0-bg white-font margin-r-m"
>
{this.props.msg.pkg.get("browser.share.del")}
</button>
) : (
<button
type="button"
onClick={this.addSharing}
className="green0-bg white-font margin-r-m"
>
{this.props.msg.pkg.get("browser.share.add")}
</button>
)}
{this.state.selectedItems.size > 0 ? (
<Flexbox
children={List([
<span>
<button
type="button"
onClick={() => this.delete()}
className="red0-bg white-font margin-r-m"
>
{this.props.msg.pkg.get("browser.delete")}
</button>
{this.props.browser.isSharing ? (
<button
type="button"
onClick={() => {
this.deleteSharing(
this.props.browser.dirPath.join("/")
);
}}
className="red0-bg white-font margin-r-m"
>
{this.props.msg.pkg.get("browser.share.del")}
</button>
) : (
<button
type="button"
onClick={this.addSharing}
className="green0-bg white-font margin-r-m"
>
{this.props.msg.pkg.get("browser.share.add")}
</button>
)}
<button
type="button"
onClick={() => this.moveHere()}
className="margin-r-m"
>
{this.props.msg.pkg.get("browser.paste")}
</button>
</span>
) : null}
{this.state.selectedItems.size > 0 ? (
<span>
<button
type="button"
onClick={() => this.delete()}
className="red0-bg white-font margin-r-m"
>
{this.props.msg.pkg.get("browser.delete")}
</button>
<div className="hr white0-bg margin-t-m"></div>
</div>
<button
type="button"
onClick={() => this.moveHere()}
className="margin-r-m"
>
{this.props.msg.pkg.get("browser.paste")}
</button>
</span>
) : null}
</span>,
<span>
<span className="desc-m grey0-font">{`${this.props.msg.pkg.get(
"browser.used"
)} ${usedSpace} / ${spaceLimit}`}</span>
</span>,
])}
className="padding-m"
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
<Flexbox
children={List([
@ -539,18 +562,8 @@ export class Browser extends React.Component<Props, State, {}> {
className="margin-r-m black-font"
/>,
// <span>
// <span className="title-l">
// {this.props.msg.pkg.get("browser.item.title")}
// </span>
// <span className="desc-l grey0-font">
// Files and folders in current path
// </span>
// </span>,
<Flexbox children={breadcrumb} />,
])}
// style={{ flex: "column nowrap" }}
/>
</span>,
@ -687,7 +700,7 @@ export class Browser extends React.Component<Props, State, {}> {
children={List([
<Flexbox
children={List([
<RiShareForwardBoxFill
<RiFolderSharedFill
size="3rem"
className="purple0-font margin-r-m"
/>,

6
src/client/web/src/components/core_state.ts
View file

@ -69,6 +69,12 @@ export function initState(): ICoreState {
userID: "",
userName: "",
userRole: "",
usedSpace: "0",
quota: {
spaceLimit: "0",
uploadSpeedLimit: 0,
downloadSpeedLimit: 0,
},
authed: false,
captchaID: "",
},

16
src/client/web/src/components/pane_login.tsx
View file

@ -3,11 +3,14 @@ import * as React from "react";
import { ICoreState, MsgProps } from "./core_state";
import { updater } from "./state_updater";
import { alertMsg } from "../common/env";
import { Quota } from "../client";
export interface LoginProps {
userID: string;
userName: string;
userRole: string;
usedSpace: string;
quota: Quota;
authed: boolean;
captchaID: string;
}
@ -85,11 +88,17 @@ export class AuthPane extends React.Component<Props, State, {}> {
updater().initLan();
this.update(updater().updateMsg);
})
.then(() => {
return updater().isSharing(updater().props.browser.dirPath.join("/"));
})
.then(() => {
this.update(updater().updateBrowser);
});
};
logout = () => {
updater()
logout = async () => {
return updater()
.logout()
.then((ok: boolean) => {
if (ok) {
@ -97,6 +106,9 @@ export class AuthPane extends React.Component<Props, State, {}> {
} else {
alertMsg(this.props.msg.pkg.get("login.logout.fail"));
}
})
.then(() => {
return this.refreshCaptcha();
});
};

3
src/client/web/src/components/root_frame.tsx
View file

@ -52,13 +52,14 @@ export class RootFrame extends React.Component<Props, State, {}> {
<Browser
browser={this.props.browser}
msg={this.props.msg}
login={this.props.login}
update={this.props.update}
/>
</div>
<div id="tail" className="container-center black0-font">
<a href="https://github.com/ihexxa/quickshare">Quickshare</a> -
sharing in simple way.
quick and simple file sharing.
</div>
</div>
</div>

2
src/client/web/src/components/state_updater.ts
View file

@ -258,6 +258,8 @@ export class Updater {
this.props.login.userID = resp.data.id;
this.props.login.userName = resp.data.name;
this.props.login.userRole = resp.data.role;
this.props.login.usedSpace = resp.data.usedSpace;
this.props.login.quota = resp.data.quota;
return true;
}
return false;

54
src/client/web/src/components/topbar.tsx
View file

@ -1,8 +1,11 @@
import * as React from "react";
import { List } from "immutable";
import { RiGithubFill } from "@react-icons/all-files/ri/RiGithubFill";
import { ICoreState, MsgProps } from "./core_state";
import { LoginProps } from "./pane_login";
import { updater } from "./state_updater";
import { Flexbox } from "./layout/flexbox";
export interface State {}
export interface Props {
@ -43,6 +46,7 @@ export class TopBar extends React.Component<Props, State, {}> {
<button
onClick={this.showAdmin}
className="grey3-bg grey4-font margin-r-m"
style={{ minWidth: "7rem" }}
>
{this.props.msg.pkg.get("admin")}
</button>
@ -53,7 +57,48 @@ export class TopBar extends React.Component<Props, State, {}> {
id="top-bar"
className="top-bar cyan1-font padding-t-m padding-b-m padding-l-l padding-r-l"
>
<div className="flex-2col-parent">
<Flexbox
children={List([
<a
href="https://github.com/ihexxa/quickshare"
target="_blank"
className="h5"
>
Quickshare
{/* <RiGithubFill size="2rem" className="grey4-font margin-r-m" /> */}
</a>,
<Flexbox
children={List([
<span>
<span className="grey3-font font-s">
{this.props.login.userName}
</span>
&nbsp;-&nbsp;
<span className="grey0-font font-s margin-r-m">
{this.props.login.userRole}
</span>
</span>,
<button
onClick={this.showSettings}
className="grey3-bg grey4-font margin-r-m"
style={{ minWidth: "7rem" }}
>
{this.props.msg.pkg.get("settings")}
</button>,
adminBtn,
])}
childrenStyles={List([{}, {}, {}, {}])}
/>,
])}
childrenStyles={List([
{},
{ justifyContent: "flex-end", alignItems: "center" },
])}
/>
{/* <div className="flex-2col-parent">
<a
href="https://github.com/ihexxa/quickshare"
className="flex-13col h5"
@ -75,8 +120,13 @@ export class TopBar extends React.Component<Props, State, {}> {
{this.props.msg.pkg.get("settings")}
</button>
{adminBtn}
<RiGithubFill
size="2rem"
className="grey4-font margin-r-m"
/>
</span>
</div>
</div> */}
</div>
);
}

1
src/client/web/src/i18n/en_US.ts
View file

@ -26,6 +26,7 @@ export const msgs: Map<string, string> = Map({
"browser.disable": "Disable",
"browser.location": "Location",
"browser.item.title": "Items",
"browser.used": "Used Space",
"panes.close": "Close",
"login.logout.fail": "Failed to log out",
"login.username": "User Name",

1
src/client/web/src/i18n/zh_CN.ts
View file

@ -25,6 +25,7 @@ export const msgs: Map<string, string> = Map({
"browser.stop": "停止",
"browser.location": "位置",
"browser.item.title": "列表",
"browser.used": "已用空间",
"panes.close": "关闭",
"login.logout.fail": "登出失败",
"login.username": "用户名",