From c0933a427457fe466966d87d24f933e328ef2f53 Mon Sep 17 00:00:00 2001 From: Michael An <2331806369@qq.com> Date: Tue, 3 Jun 2025 14:34:27 +0800 Subject: [PATCH] Add loading icon when dialog is init (#7878) * 01 system admin share base to user * 02 system admin share base to group * 03 share sub folder set user permission * 04 share sub folder set group permission * 05 share repo to user * 06 share repo to group add loading * 07 share to invite users * 08 share to other server * 09 link emails * 10 link emails * 11 fix code format --- ...-sub-folder-set-group-permission-dialog.js | 57 +++++++++++------- ...b-sub-folder-set-user-permission-dialog.js | 59 ++++++++++++------- .../src/components/dialog/share-to-group.js | 41 +++++++++---- .../dialog/share-to-invite-people.js | 54 +++++++++++------ .../dialog/share-to-other-server.js | 45 ++++++++------ .../src/components/dialog/share-to-user.js | 44 ++++++++++---- .../sysadmin-share-to-group.js | 51 ++++++++++------ .../sysadmin-dialog/sysadmin-share-to-user.js | 53 +++++++++++------ .../link-authenticated-emails.js | 51 ++++++++++------ .../link-authenticated-users.js | 51 ++++++++++------ 10 files changed, 337 insertions(+), 169 deletions(-) diff --git a/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js b/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js index dd3e945e3c..87057a7026 100644 --- a/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js +++ b/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js @@ -10,6 +10,8 @@ import FileChooser from '../file-chooser'; import GroupSelect from '../common/group-select'; import toaster from '../../components/toast'; import BackIcon from '../../components/back-icon'; +import EmptyTip from '../../components/empty-tip'; +import Loading from '../../components/loading'; class GroupItem extends React.Component { @@ -118,7 +120,8 @@ class LibSubFolderSetGroupPermissionDialog extends React.Component { permission: 'rw', groupPermissionItems: [], folderPath: '', - showFileChooser: false + showFileChooser: false, + isLoading: true }; this.options = []; if (!isPro) { @@ -157,10 +160,14 @@ class LibSubFolderSetGroupPermissionDialog extends React.Component { request.then((res) => { if (res.data.length !== 0) { this.setState({ - groupPermissionItems: res.data + groupPermissionItems: res.data, + isLoading: false }); + } else { + this.setState({ isLoading: false }); } }).catch(error => { + this.setState({ isLoading: false }); let errMessage = Utils.getErrorMsg(error); toaster.danger(errMessage); }); @@ -378,24 +385,34 @@ class LibSubFolderSetGroupPermissionDialog extends React.Component {
- - {thead} - - {this.state.groupPermissionItems.map((item, index) => { - return ( - - ); - })} - -
+ {this.state.isLoading ? ( + + ) : ( + <> + {this.state.groupPermissionItems.length === 0 ? ( + + ) : ( + + {thead} + + {this.state.groupPermissionItems.map((item, index) => { + return ( + + ); + })} + +
+ )} + + )}
); diff --git a/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js b/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js index 2ca2f434c4..197e2f0401 100644 --- a/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js +++ b/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js @@ -10,6 +10,8 @@ import SharePermissionEditor from '../select-editor/share-permission-editor'; import FileChooser from '../file-chooser'; import toaster from '../../components/toast'; import BackIcon from '../../components/back-icon'; +import EmptyTip from '../../components/empty-tip'; +import Loading from '../../components/loading'; class UserItem extends React.Component { @@ -121,7 +123,8 @@ class LibSubFolderSetUserPermissionDialog extends React.Component { permission: 'rw', userFolderPermItems: [], folderPath: '', - showFileChooser: false + showFileChooser: false, + isLoading: true }; if (!isPro) { this.permissions = ['r', 'rw']; @@ -141,9 +144,15 @@ class LibSubFolderSetUserPermissionDialog extends React.Component { seafileAPI.listUserFolderPerm(repoID, folderPath); request.then((res) => { if (res.data.length !== 0) { - this.setState({ userFolderPermItems: res.data }); + this.setState({ + userFolderPermItems: res.data, + isLoading: false + }); + } else { + this.setState({ isLoading: false }); } }).catch(error => { + this.setState({ isLoading: false }); let errMessage = Utils.getErrorMsg(error); toaster.danger(errMessage); }); @@ -341,24 +350,34 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
- - {thead} - - {userFolderPermItems.map((item, index) => { - return ( - - ); - })} - -
+ {this.state.isLoading ? ( + + ) : ( + <> + {userFolderPermItems.length === 0 ? ( + + ) : ( + + {thead} + + {userFolderPermItems.map((item, index) => { + return ( + + ); + })} + +
+ )} + + )}
); diff --git a/frontend/src/components/dialog/share-to-group.js b/frontend/src/components/dialog/share-to-group.js index 0f3a797060..e2f2ebd90a 100644 --- a/frontend/src/components/dialog/share-to-group.js +++ b/frontend/src/components/dialog/share-to-group.js @@ -10,6 +10,8 @@ import SharePermissionEditor from '../select-editor/share-permission-editor'; import EventBus from '../common/event-bus'; import { EVENT_BUS_TYPE } from '../common/event-bus-type'; import GroupSelect from '../common/group-select'; +import EmptyTip from '../../components/empty-tip'; +import Loading from '../../components/loading'; class GroupItem extends React.Component { @@ -178,7 +180,8 @@ class ShareToGroup extends React.Component { errorMsg: [], permission: 'rw', sharedItems: [], - isWiki: this.props.repoType === 'wiki' + isWiki: this.props.repoType === 'wiki', + isLoading: true }; this.permissions = []; let { itemType, isRepoOwner } = props; @@ -253,10 +256,14 @@ class ShareToGroup extends React.Component { seafileAPI.listSharedItems(repoID, path, 'group').then((res) => { if (res.data.length !== 0) { this.setState({ - sharedItems: res.data + sharedItems: res.data, + isLoading: false }); + } else { + this.setState({ isLoading: false }); } }).catch(error => { + this.setState({ isLoading: false }); let errMessage = Utils.getErrorMsg(error); toaster.danger(errMessage); }); @@ -466,16 +473,26 @@ class ShareToGroup extends React.Component {
- - {thead} - -
+ {this.state.isLoading ? ( + + ) : ( + <> + {this.state.sharedItems.length === 0 ? ( + + ) : ( + + {thead} + +
+ )} + + )}
); diff --git a/frontend/src/components/dialog/share-to-invite-people.js b/frontend/src/components/dialog/share-to-invite-people.js index f41294f7e5..116d914d20 100644 --- a/frontend/src/components/dialog/share-to-invite-people.js +++ b/frontend/src/components/dialog/share-to-invite-people.js @@ -9,6 +9,7 @@ import { Utils } from '../../utils/utils'; import toaster from '../toast'; import Loading from '../loading'; import SharePermissionEditor from '../select-editor/share-permission-editor'; +import EmptyTip from '../empty-tip'; import '../../css/invitations.css'; class UserItem extends React.Component { @@ -140,6 +141,7 @@ class ShareToInvitePeople extends React.Component { sharedItems: [], emails: '', isSubmitting: false, + isLoading: true }; this.permissions = ['rw', 'r']; } @@ -168,9 +170,15 @@ class ShareToInvitePeople extends React.Component { const repoID = this.props.repoID; seafileAPI.listRepoShareInvitations(repoID, path).then((res) => { if (res.data.length !== 0) { - this.setState({ sharedItems: res.data.repo_share_invitation_list }); + this.setState({ + sharedItems: res.data.repo_share_invitation_list, + isLoading: false + }); + } else { + this.setState({ isLoading: false }); } }).catch(error => { + this.setState({ isLoading: false }); const errMessage = Utils.getErrorMsg(error); toaster.danger(errMessage); }); @@ -327,23 +335,33 @@ class ShareToInvitePeople extends React.Component {
- - - - - - - - - - - -
{gettext('Email')}{gettext('Permission')}{gettext('Expiration')}{gettext('Inviter')}{''}
+ {this.state.isLoading ? ( + + ) : ( + <> + {sharedItems.length === 0 ? ( + + ) : ( + + + + + + + + + + + +
{gettext('Email')}{gettext('Permission')}{gettext('Expiration')}{gettext('Inviter')}{''}
+ )} + + )}
); diff --git a/frontend/src/components/dialog/share-to-other-server.js b/frontend/src/components/dialog/share-to-other-server.js index f2d1b80178..b2ad054121 100644 --- a/frontend/src/components/dialog/share-to-other-server.js +++ b/frontend/src/components/dialog/share-to-other-server.js @@ -9,6 +9,8 @@ import toaster from '../toast'; import OpIcon from '../op-icon'; import SharePermissionEditor from '../select-editor/share-permission-editor'; import { SeahubSelect } from '../common/select'; +import EmptyTip from '../empty-tip'; +import Loading from '../loading'; class ShareItem extends React.Component { @@ -60,15 +62,6 @@ class ShareItem extends React.Component { {item.to_server_name} {item.to_user} {Utils.sharePerms(item.permission)} - {/* - - */} { - this.setState({ ocmShares: res.data.ocm_share_list }); + this.setState({ + ocmShares: res.data.ocm_share_list, + isLoading: false + }); }).catch(error => { let errMessage = Utils.getErrorMsg(error); this.setState({ - errorMsg: errMessage + errorMsg: errMessage, + isLoading: false }); }); } @@ -275,13 +273,22 @@ class ShareToOtherServer extends React.Component { - {errorMsg ? -

{errorMsg}

: - - } + {errorMsg ? ( +

{errorMsg}

+ ) : this.state.isLoading ? ( + + ) : ( + <> + {ocmShares.length === 0 ? ( + + ) : ( + + )} + + )} ); } diff --git a/frontend/src/components/dialog/share-to-user.js b/frontend/src/components/dialog/share-to-user.js index 70028ff02d..8e0edce005 100644 --- a/frontend/src/components/dialog/share-to-user.js +++ b/frontend/src/components/dialog/share-to-user.js @@ -9,6 +9,8 @@ import toaster from '../toast'; import UserSelect from '../user-select'; import SharePermissionEditor from '../select-editor/share-permission-editor'; import DepartmentDetailDialog from './department-detail-dialog'; +import EmptyTip from '../../components/empty-tip'; +import Loading from '../../components/loading'; import '../../css/invitations.css'; import '../../css/share-to-user.css'; @@ -246,7 +248,8 @@ class ShareToUser extends React.Component { isWiki: this.props.repoType === 'wiki', tmpUserList: [], enableSelectMembersFromDept: false, - isShowDepartmentDetailDialog: false + isShowDepartmentDetailDialog: false, + isLoading: true }; this.options = []; this.permissions = []; @@ -287,9 +290,16 @@ class ShareToUser extends React.Component { 'permission': item.permission }; }); - this.setState({ sharedItems: res.data, tmpUserList: tmpUserList }); + this.setState({ + sharedItems: res.data, + tmpUserList: tmpUserList, + isLoading: false + }); + } else { + this.setState({ isLoading: false }); } }).catch(error => { + this.setState({ isLoading: false }); let errMessage = Utils.getErrorMsg(error); toaster.danger(errMessage); }); @@ -606,16 +616,26 @@ class ShareToUser extends React.Component {
- - {thead} - -
+ {this.state.isLoading ? ( + + ) : ( + <> + {sharedItems.length === 0 ? ( + + ) : ( + + {thead} + +
+ )} + + )} {this.state.isShowDepartmentDetailDialog && { if (res.data.length !== 0) { this.setState({ - sharedItems: res.data + sharedItems: res.data, + isLoading: false }); + } else { + this.setState({ isLoading: false }); } }).catch(error => { + this.setState({ isLoading: false }); let errMessage = Utils.getErrorMsg(error); toaster.danger(errMessage); }); @@ -301,21 +308,31 @@ class SysAdminShareToGroup extends React.Component {
- - - - - - - - - -
{gettext('Group')}{gettext('Permission')}
+ {this.state.isLoading ? ( + + ) : ( + <> + {this.state.sharedItems.length === 0 ? ( + + ) : ( + + + + + + + + + +
{gettext('Group')}{gettext('Permission')}
+ )} + + )}
); diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js index a8cfc141aa..fd817b9eeb 100644 --- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js +++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js @@ -4,6 +4,8 @@ import { isPro, gettext } from '../../../utils/constants'; import { Button } from 'reactstrap'; import { systemAdminAPI } from '../../../utils/system-admin-api'; import { Utils } from '../../../utils/utils'; +import EmptyTip from '../../../components/empty-tip'; +import Loading from '../../loading'; import toaster from '../../toast'; import UserSelect from '../../user-select'; import SharePermissionEditor from '../../select-editor/share-permission-editor'; @@ -117,7 +119,8 @@ class SysAdminShareToUser extends React.Component { selectedUsers: [], errorMsg: [], permission: 'rw', - sharedItems: [] + sharedItems: [], + isLoading: true }; this.options = []; this.permissions = ['rw', 'r']; @@ -135,9 +138,15 @@ class SysAdminShareToUser extends React.Component { let repoID = this.props.repoID; systemAdminAPI.sysAdminListRepoSharedItems(repoID, 'user').then((res) => { if (res.data.length !== 0) { - this.setState({ sharedItems: res.data }); + this.setState({ + sharedItems: res.data, + isLoading: false + }); + } else { + this.setState({ isLoading: false }); } }).catch(error => { + this.setState({ isLoading: false }); let errMessage = Utils.getErrorMsg(error); toaster.danger(errMessage); }); @@ -273,21 +282,31 @@ class SysAdminShareToUser extends React.Component {
- - - - - - - - - -
{gettext('User')}{gettext('Permission')}
+ {this.state.isLoading ? ( + + ) : ( + <> + {this.state.sharedItems.length === 0 ? ( + + ) : ( + + + + + + + + + +
{gettext('User')}{gettext('Permission')}
+ )} + + )}
); diff --git a/frontend/src/components/share-link-panel/link-authenticated-emails.js b/frontend/src/components/share-link-panel/link-authenticated-emails.js index 4c11fa320e..f0b8f5a161 100644 --- a/frontend/src/components/share-link-panel/link-authenticated-emails.js +++ b/frontend/src/components/share-link-panel/link-authenticated-emails.js @@ -6,6 +6,8 @@ import { Utils } from '../../utils/utils'; import toaster from '../toast'; import { shareLinkAPI } from '../../utils/share-link-api'; import BackIcon from '../back-icon'; +import EmptyTip from '../empty-tip'; +import Loading from '../loading'; class EmailItem extends React.Component { @@ -84,7 +86,8 @@ class LinkAuthenticatedEmails extends React.Component { this.state = { inputEmails: '', authEmails: [], - isSubmitting: false + isSubmitting: false, + isLoading: true }; } @@ -95,8 +98,12 @@ class LinkAuthenticatedEmails extends React.Component { getItems = () => { const { linkToken, path } = this.props; shareLinkAPI.listShareLinkAuthEmails(linkToken, path).then(res => { - this.setState({ authEmails: res.data.auth_list }); + this.setState({ + authEmails: res.data.auth_list, + isLoading: false + }); }).catch(error => { + this.setState({ isLoading: false }); let errMessage = Utils.getErrorMsg(error); toaster.danger(errMessage); }); @@ -198,21 +205,31 @@ class LinkAuthenticatedEmails extends React.Component {
- - {thead} - - {authEmails.map((item, index) => { - return ( - - ); - })} - -
+ {this.state.isLoading ? ( + + ) : ( + <> + {authEmails.length === 0 ? ( + + ) : ( + + {thead} + + {authEmails.map((item, index) => { + return ( + + ); + })} + +
+ )} + + )}
); diff --git a/frontend/src/components/share-link-panel/link-authenticated-users.js b/frontend/src/components/share-link-panel/link-authenticated-users.js index 48301d11ce..32b6c5673b 100644 --- a/frontend/src/components/share-link-panel/link-authenticated-users.js +++ b/frontend/src/components/share-link-panel/link-authenticated-users.js @@ -7,6 +7,8 @@ import { Utils } from '../../utils/utils'; import UserSelect from '../user-select'; import toaster from '../toast'; import BackIcon from '../../components/back-icon'; +import EmptyTip from '../empty-tip'; +import Loading from '../loading'; class UserItem extends React.Component { @@ -90,7 +92,8 @@ class LinkAuthenticatedUsers extends React.Component { super(props); this.state = { selectedUsers: [], - authUsers: [] + authUsers: [], + isLoading: true }; } @@ -101,8 +104,12 @@ class LinkAuthenticatedUsers extends React.Component { listLinkAuthUsers = () => { const { linkToken, path } = this.props; shareLinkAPI.listShareLinkAuthUsers(linkToken, path).then(res => { - this.setState({ authUsers: res.data.auth_list }); + this.setState({ + authUsers: res.data.auth_list, + isLoading: false + }); }).catch(error => { + this.setState({ isLoading: false }); let errMessage = Utils.getErrorMsg(error); toaster.danger(errMessage); }); @@ -199,21 +206,31 @@ class LinkAuthenticatedUsers extends React.Component {
- - {thead} - - {authUsers.map((item, index) => { - return ( - - ); - })} - -
+ {this.state.isLoading ? ( + + ) : ( + <> + {authUsers.length === 0 ? ( + + ) : ( + + {thead} + + {authUsers.map((item, index) => { + return ( + + ); + })} + +
+ )} + + )}
);