mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-25 23:02:26 +00:00
optimize ui of file update and permission
This commit is contained in:
@@ -16,6 +16,7 @@ import ModalPortal from '../../../components/modal-portal';
|
|||||||
import CommitDetails from '../../../components/dialog/commit-details';
|
import CommitDetails from '../../../components/dialog/commit-details';
|
||||||
import LogsExportExcelDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog';
|
import LogsExportExcelDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog';
|
||||||
import LogUserSelector from '../../dashboard/log-user-selector';
|
import LogUserSelector from '../../dashboard/log-user-selector';
|
||||||
|
import LogRepoSelector from '../../dashboard/log-repo-selector';
|
||||||
|
|
||||||
dayjs.extend(relativeTime);
|
dayjs.extend(relativeTime);
|
||||||
|
|
||||||
@@ -176,6 +177,9 @@ class FileUpdateLogs extends Component {
|
|||||||
isExportExcelDialogOpen: false,
|
isExportExcelDialogOpen: false,
|
||||||
availableUsers: [],
|
availableUsers: [],
|
||||||
selectedUsers: [],
|
selectedUsers: [],
|
||||||
|
availableRepos: [],
|
||||||
|
selectedRepos: [],
|
||||||
|
openSelector: null,
|
||||||
};
|
};
|
||||||
this.initPage = 1;
|
this.initPage = 1;
|
||||||
}
|
}
|
||||||
@@ -196,10 +200,9 @@ class FileUpdateLogs extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
getLogsByPage = (page) => {
|
getLogsByPage = (page) => {
|
||||||
let { perPage, selectedUsers } = this.state;
|
let { perPage, selectedUsers, selectedRepos } = this.state;
|
||||||
let emails = selectedUsers.map(user => user.email);
|
let emails = selectedUsers.map(user => user.email);
|
||||||
|
systemAdminAPI.sysAdminListFileUpdateLogs(page, perPage, emails, selectedRepos).then((res) => {
|
||||||
systemAdminAPI.sysAdminListFileUpdateLogs(page, perPage, emails).then((res) => {
|
|
||||||
this.setState({
|
this.setState({
|
||||||
logList: res.data.file_update_log_list,
|
logList: res.data.file_update_log_list,
|
||||||
loading: false,
|
loading: false,
|
||||||
@@ -246,8 +249,70 @@ class FileUpdateLogs extends Component {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
getAvailableUsers = () => {
|
||||||
|
systemAdminAPI.sysAdminListUsers().then((res) => {
|
||||||
|
this.setState({
|
||||||
|
availableUsers: res.data.data
|
||||||
|
});
|
||||||
|
}).catch((error) => {
|
||||||
|
this.setState({
|
||||||
|
errorMsg: Utils.getErrorMsg(error, true)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
getAvailableRepos = () => {
|
||||||
|
systemAdminAPI.sysAdminListRepos().then((res) => {
|
||||||
|
this.setState({
|
||||||
|
availableRepos: res.data.repos
|
||||||
|
});
|
||||||
|
}).catch((error) => {
|
||||||
|
this.setState({
|
||||||
|
errorMsg: Utils.getErrorMsg(error, true)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
handleSelectorToggle = (selectorType) => {
|
||||||
|
const { openSelector } = this.state;
|
||||||
|
const wasOpen = openSelector === selectorType;
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
openSelector: wasOpen ? null : selectorType
|
||||||
|
}, () => {
|
||||||
|
if (wasOpen) {
|
||||||
|
this.getLogsByPage(1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
handleRepoFilter = (repo, shouldFetchData = true) => {
|
||||||
|
const { selectedRepos } = this.state;
|
||||||
|
let newSelectedRepos;
|
||||||
|
|
||||||
|
if (repo === null) {
|
||||||
|
newSelectedRepos = selectedRepos;
|
||||||
|
} else {
|
||||||
|
const isSelected = selectedRepos.find(item => item.id === repo.id);
|
||||||
|
if (isSelected) {
|
||||||
|
newSelectedRepos = selectedRepos.filter(item => item.id !== repo.id);
|
||||||
|
} else {
|
||||||
|
newSelectedRepos = [...selectedRepos, repo];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
selectedRepos: newSelectedRepos,
|
||||||
|
currentPage: 1
|
||||||
|
}, () => {
|
||||||
|
if (shouldFetchData) {
|
||||||
|
this.getLogsByPage(1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let { logList, currentPage, perPage, hasNextPage, isExportExcelDialogOpen, availableUsers, selectedUsers } = this.state;
|
let { logList, currentPage, perPage, hasNextPage, isExportExcelDialogOpen, availableUsers, selectedUsers, availableRepos, selectedRepos } = this.state;
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<MainPanelTopbar {...this.props}>
|
<MainPanelTopbar {...this.props}>
|
||||||
@@ -258,12 +323,23 @@ class FileUpdateLogs extends Component {
|
|||||||
<LogsNav currentItem="fileUpdateLogs" />
|
<LogsNav currentItem="fileUpdateLogs" />
|
||||||
<div className="cur-view-content">
|
<div className="cur-view-content">
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<LogUserSelector
|
<div className="d-flex align-items-center mb-2">
|
||||||
label={gettext('User')}
|
<LogUserSelector
|
||||||
items={availableUsers}
|
items={availableUsers}
|
||||||
selectedItems={selectedUsers}
|
selectedItems={selectedUsers}
|
||||||
onSelect={this.handleUserFilter}
|
onSelect={this.handleUserFilter}
|
||||||
/>
|
isOpen={this.state.openSelector === 'user'}
|
||||||
|
onToggle={() => this.handleSelectorToggle('user')}
|
||||||
|
/>
|
||||||
|
<div className="mx-3"></div>
|
||||||
|
<LogRepoSelector
|
||||||
|
items={availableRepos}
|
||||||
|
selectedItems={selectedRepos}
|
||||||
|
onSelect={this.handleRepoFilter}
|
||||||
|
isOpen={this.state.openSelector === 'repo'}
|
||||||
|
onToggle={() => this.handleSelectorToggle('repo')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<Content
|
<Content
|
||||||
loading={this.state.loading}
|
loading={this.state.loading}
|
||||||
errorMsg={this.state.errorMsg}
|
errorMsg={this.state.errorMsg}
|
||||||
|
@@ -16,6 +16,7 @@ import MainPanelTopbar from '../main-panel-topbar';
|
|||||||
import UserLink from '../user-link';
|
import UserLink from '../user-link';
|
||||||
import LogsNav from './logs-nav';
|
import LogsNav from './logs-nav';
|
||||||
import LogUserSelector from '../../dashboard/log-user-selector';
|
import LogUserSelector from '../../dashboard/log-user-selector';
|
||||||
|
import LogRepoSelector from '../../dashboard/log-repo-selector';
|
||||||
|
|
||||||
dayjs.extend(relativeTime);
|
dayjs.extend(relativeTime);
|
||||||
|
|
||||||
@@ -154,6 +155,9 @@ class SharePermissionLogs extends Component {
|
|||||||
isExportExcelDialogOpen: false,
|
isExportExcelDialogOpen: false,
|
||||||
availableUsers: [],
|
availableUsers: [],
|
||||||
selectedUsers: [],
|
selectedUsers: [],
|
||||||
|
availableRepos: [],
|
||||||
|
selectedRepos: [],
|
||||||
|
openSelector: null,
|
||||||
};
|
};
|
||||||
this.initPage = 1;
|
this.initPage = 1;
|
||||||
}
|
}
|
||||||
@@ -174,9 +178,9 @@ class SharePermissionLogs extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
getLogsByPage = (page) => {
|
getLogsByPage = (page) => {
|
||||||
let { perPage, selectedUsers } = this.state;
|
let { perPage, selectedUsers, selectedRepos } = this.state;
|
||||||
let emails = selectedUsers.map(user => user.email);
|
let emails = selectedUsers.map(user => user.email);
|
||||||
systemAdminAPI.sysAdminListSharePermissionLogs(page, perPage, emails).then((res) => {
|
systemAdminAPI.sysAdminListSharePermissionLogs(page, perPage, emails, selectedRepos).then((res) => {
|
||||||
this.setState({
|
this.setState({
|
||||||
logList: res.data.share_permission_log_list,
|
logList: res.data.share_permission_log_list,
|
||||||
loading: false,
|
loading: false,
|
||||||
@@ -222,8 +226,70 @@ class SharePermissionLogs extends Component {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
getAvailableUsers = () => {
|
||||||
|
systemAdminAPI.sysAdminListUsers().then((res) => {
|
||||||
|
this.setState({
|
||||||
|
availableUsers: res.data.data
|
||||||
|
});
|
||||||
|
}).catch((error) => {
|
||||||
|
this.setState({
|
||||||
|
errorMsg: Utils.getErrorMsg(error, true)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
getAvailableRepos = () => {
|
||||||
|
systemAdminAPI.sysAdminListRepos().then((res) => {
|
||||||
|
this.setState({
|
||||||
|
availableRepos: res.data.repos
|
||||||
|
});
|
||||||
|
}).catch((error) => {
|
||||||
|
this.setState({
|
||||||
|
errorMsg: Utils.getErrorMsg(error, true)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
handleSelectorToggle = (selectorType) => {
|
||||||
|
const { openSelector } = this.state;
|
||||||
|
const wasOpen = openSelector === selectorType;
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
openSelector: wasOpen ? null : selectorType
|
||||||
|
}, () => {
|
||||||
|
if (wasOpen) {
|
||||||
|
this.getLogsByPage(1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
handleRepoFilter = (repo, shouldFetchData = true) => {
|
||||||
|
const { selectedRepos } = this.state;
|
||||||
|
let newSelectedRepos;
|
||||||
|
|
||||||
|
if (repo === null) {
|
||||||
|
newSelectedRepos = selectedRepos;
|
||||||
|
} else {
|
||||||
|
const isSelected = selectedRepos.find(item => item.id === repo.id);
|
||||||
|
if (isSelected) {
|
||||||
|
newSelectedRepos = selectedRepos.filter(item => item.id !== repo.id);
|
||||||
|
} else {
|
||||||
|
newSelectedRepos = [...selectedRepos, repo];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
selectedRepos: newSelectedRepos,
|
||||||
|
currentPage: 1
|
||||||
|
}, () => {
|
||||||
|
if (shouldFetchData) {
|
||||||
|
this.getLogsByPage(1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let { logList, currentPage, perPage, hasNextPage, isExportExcelDialogOpen, availableUsers, selectedUsers } = this.state;
|
let { logList, currentPage, perPage, hasNextPage, isExportExcelDialogOpen, availableUsers, selectedUsers, availableRepos, selectedRepos } = this.state;
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<MainPanelTopbar {...this.props}>
|
<MainPanelTopbar {...this.props}>
|
||||||
@@ -234,12 +300,23 @@ class SharePermissionLogs extends Component {
|
|||||||
<LogsNav currentItem="sharePermissionLogs" />
|
<LogsNav currentItem="sharePermissionLogs" />
|
||||||
<div className="cur-view-content">
|
<div className="cur-view-content">
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<LogUserSelector
|
<div className="d-flex align-items-center mb-2">
|
||||||
label={gettext('User')}
|
<LogUserSelector
|
||||||
items={availableUsers}
|
items={availableUsers}
|
||||||
selectedItems={selectedUsers}
|
selectedItems={selectedUsers}
|
||||||
onSelect={this.handleUserFilter}
|
onSelect={this.handleUserFilter}
|
||||||
/>
|
isOpen={this.state.openSelector === 'user'}
|
||||||
|
onToggle={() => this.handleSelectorToggle('user')}
|
||||||
|
/>
|
||||||
|
<div className="mx-3"></div>
|
||||||
|
<LogRepoSelector
|
||||||
|
items={availableRepos}
|
||||||
|
selectedItems={selectedRepos}
|
||||||
|
onSelect={this.handleRepoFilter}
|
||||||
|
isOpen={this.state.openSelector === 'repo'}
|
||||||
|
onToggle={() => this.handleSelectorToggle('repo')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<Content
|
<Content
|
||||||
loading={this.state.loading}
|
loading={this.state.loading}
|
||||||
errorMsg={this.state.errorMsg}
|
errorMsg={this.state.errorMsg}
|
||||||
|
@@ -707,7 +707,7 @@ class SystemAdminAPI {
|
|||||||
return this.req.get(url, { params: params });
|
return this.req.get(url, { params: params });
|
||||||
}
|
}
|
||||||
|
|
||||||
sysAdminListFileUpdateLogs(page, perPage, emails, repoID) {
|
sysAdminListFileUpdateLogs(page, perPage, emails, repos) {
|
||||||
const url = this.server + '/api/v2.1/admin/logs/file-update-logs/';
|
const url = this.server + '/api/v2.1/admin/logs/file-update-logs/';
|
||||||
let params = {
|
let params = {
|
||||||
page: page,
|
page: page,
|
||||||
@@ -716,13 +716,13 @@ class SystemAdminAPI {
|
|||||||
if (emails && emails.length) {
|
if (emails && emails.length) {
|
||||||
params.emails = emails.join(',');
|
params.emails = emails.join(',');
|
||||||
}
|
}
|
||||||
if (repoID != undefined) {
|
if (repos && repos.length) {
|
||||||
params.repo_id = repoID;
|
params.repos = repos.map(repo => repo.id).join(',');
|
||||||
}
|
}
|
||||||
return this.req.get(url, { params: params });
|
return this.req.get(url, { params: params });
|
||||||
}
|
}
|
||||||
|
|
||||||
sysAdminListSharePermissionLogs(page, perPage, emails, repoID) {
|
sysAdminListSharePermissionLogs(page, perPage, emails, repos) {
|
||||||
const url = this.server + '/api/v2.1/admin/logs/share-permission-logs/';
|
const url = this.server + '/api/v2.1/admin/logs/share-permission-logs/';
|
||||||
let params = {
|
let params = {
|
||||||
page: page,
|
page: page,
|
||||||
@@ -731,8 +731,8 @@ class SystemAdminAPI {
|
|||||||
if (emails && emails.length) {
|
if (emails && emails.length) {
|
||||||
params.emails = emails.join(',');
|
params.emails = emails.join(',');
|
||||||
}
|
}
|
||||||
if (repoID != undefined) {
|
if (repos && repos.length) {
|
||||||
params.repo_id = repoID;
|
params.repos = repos.map(repo => repo.id).join(',');
|
||||||
}
|
}
|
||||||
return this.req.get(url, { params: params });
|
return this.req.get(url, { params: params });
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user