feat(ui/quota): add ui for quota
This commit is contained in:
parent
fb160c0418
commit
ffc62023e8
1 changed files with 79 additions and 18 deletions
|
@ -27,6 +27,7 @@ export interface UserFormState {
|
|||
newPwd1: string;
|
||||
newPwd2: string;
|
||||
role: string;
|
||||
quota: Quota;
|
||||
}
|
||||
|
||||
export class UserForm extends React.Component<
|
||||
|
@ -42,6 +43,11 @@ export class UserForm extends React.Component<
|
|||
newPwd1: "",
|
||||
newPwd2: "",
|
||||
role: p.role,
|
||||
quota: {
|
||||
spaceLimit: p.quota.spaceLimit,
|
||||
uploadSpeedLimit: p.quota.uploadSpeedLimit,
|
||||
downloadSpeedLimit: p.quota.downloadSpeedLimit,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -54,6 +60,33 @@ export class UserForm extends React.Component<
|
|||
changeRole = (ev: React.ChangeEvent<HTMLInputElement>) => {
|
||||
this.setState({ role: ev.target.value });
|
||||
};
|
||||
changeSpaceLimit = (ev: React.ChangeEvent<HTMLInputElement>) => {
|
||||
this.setState({
|
||||
quota: {
|
||||
spaceLimit: parseInt(ev.target.value, 10),
|
||||
uploadSpeedLimit: this.state.quota.uploadSpeedLimit,
|
||||
downloadSpeedLimit: this.state.quota.downloadSpeedLimit,
|
||||
},
|
||||
});
|
||||
};
|
||||
changeUploadSpeedLimit = (ev: React.ChangeEvent<HTMLInputElement>) => {
|
||||
this.setState({
|
||||
quota: {
|
||||
spaceLimit: this.state.quota.spaceLimit,
|
||||
uploadSpeedLimit: parseInt(ev.target.value, 10),
|
||||
downloadSpeedLimit: this.state.quota.downloadSpeedLimit,
|
||||
},
|
||||
});
|
||||
};
|
||||
changeDownloadSpeedLimit = (ev: React.ChangeEvent<HTMLInputElement>) => {
|
||||
this.setState({
|
||||
quota: {
|
||||
spaceLimit: this.state.quota.spaceLimit,
|
||||
uploadSpeedLimit: this.state.quota.uploadSpeedLimit,
|
||||
downloadSpeedLimit: parseInt(ev.target.value, 10),
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
setPwd = () => {
|
||||
if (this.state.newPwd1 !== this.state.newPwd2) {
|
||||
|
@ -76,6 +109,8 @@ export class UserForm extends React.Component<
|
|||
);
|
||||
};
|
||||
|
||||
setUser = () => {};
|
||||
|
||||
delUser = () => {
|
||||
PanesUpdater.delUser(this.state.id)
|
||||
.then((ok: boolean) => {
|
||||
|
@ -112,6 +147,50 @@ export class UserForm extends React.Component<
|
|||
{this.props.quota.uploadSpeedLimit} / DownloadSpeedLimit:{" "}
|
||||
{this.props.quota.downloadSpeedLimit}
|
||||
</div>
|
||||
<div className="margin-t-m">
|
||||
<div className="flex-list-item-l">
|
||||
<input
|
||||
name={`${this.props.id}-role`}
|
||||
type="text"
|
||||
onChange={this.changeRole}
|
||||
value={this.state.role}
|
||||
className="black0-font margin-r-m"
|
||||
placeholder={this.state.role}
|
||||
/>
|
||||
<input
|
||||
name={`${this.props.id}-spaceLimit`}
|
||||
type="text"
|
||||
onChange={this.changeSpaceLimit}
|
||||
value={this.state.quota.spaceLimit}
|
||||
className="black0-font margin-r-m"
|
||||
placeholder={`${this.state.quota.spaceLimit}`}
|
||||
/>
|
||||
<input
|
||||
name={`${this.props.id}-uploadSpeedLimit`}
|
||||
type="text"
|
||||
onChange={this.changeUploadSpeedLimit}
|
||||
value={this.state.quota.uploadSpeedLimit}
|
||||
className="black0-font margin-r-m"
|
||||
placeholder={`${this.state.quota.uploadSpeedLimit}`}
|
||||
/>
|
||||
<input
|
||||
name={`${this.props.id}-downloadSpeedLimit`}
|
||||
type="text"
|
||||
onChange={this.changeDownloadSpeedLimit}
|
||||
value={this.state.quota.downloadSpeedLimit}
|
||||
className="black0-font margin-r-m"
|
||||
placeholder={`${this.state.quota.downloadSpeedLimit}`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-list-item-r">
|
||||
<button
|
||||
onClick={this.setUser}
|
||||
className="grey1-bg white-font margin-r-m"
|
||||
>
|
||||
Update User
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
@ -130,24 +209,6 @@ export class UserForm extends React.Component<
|
|||
Delete User
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* no API yet */}
|
||||
{/* <div className="margin-t-m">
|
||||
<input
|
||||
name={`${this.props.id}-role`}
|
||||
type="text"
|
||||
onChange={this.changeRole}
|
||||
value={this.state.role}
|
||||
className="black0-font margin-r-m"
|
||||
placeholder={this.props.role}
|
||||
/>
|
||||
<button
|
||||
onClick={this.setRole}
|
||||
className="grey1-bg white-font margin-r-m"
|
||||
>
|
||||
Update Role
|
||||
</button>
|
||||
</div> */}
|
||||
</div>
|
||||
</span>
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue