haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-04-27 02:51:00 +00:00
Code Issues Releases Wiki Activity

Share admin links batch delete (#7766)

Browse Source 
* [Share Admin] Share Links: added 'select links and delete them in batch'

* [Share Admin] Upload Links: added 'select links and delete them in batch'

* [Share Admin] Share / Upload Links: replaced 'Cancel' & 'Delete' buttons with 'xx Selected' button & 'delete' icon

* [Share Admin] Share / Upload Links: added background color for highlighted & selected items
This commit is contained in:
llj 2025-04-25 17:07:15 +08:00 committed by GitHub
parent 3488ea86b0
commit 66d923ccca
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 313 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
frontend/src/pages/share-admin/share-links.js
View File

@ -19,11 +19,15 @@ import SingleDropdownToolbar from '../../components/toolbar/single-dropdown-tool
import FixedWidthTable from '../../components/common/fixed-width-table';
import MobileItemMenu from '../../components/mobile-item-menu';
import '../../css/share-admin-links.css';
const contentPropTypes = {
loading: PropTypes.bool.isRequired,
isLoadingMore: PropTypes.bool.isRequired,
errorMsg: PropTypes.string.isRequired,
items: PropTypes.array.isRequired,
toggleSelectAllLinks: PropTypes.func.isRequired,
toggleSelectLink: PropTypes.func.isRequired,
onRemoveLink: PropTypes.func.isRequired
};
@ -40,6 +44,10 @@ class Content extends Component {
this.setState({ isItemFreezed: isFreezed });
};
toggleSelectAllLinks = (e) => {
this.props.toggleSelectAllLinks(e.target.checked);
};
render() {
const { loading, errorMsg, items } = this.props;
@ -58,6 +66,9 @@ class Content extends Component {
);
}
const selectedItems = items.filter(item => item.isSelected);
const isAllLinksSelected = selectedItems.length == items.length;
const isDesktop = Utils.isDesktop();
// only for some columns
const columnWidths = isPro ? [0.14, 0.07, 0.14] : [0.21, 0.14, 0.2];
@ -67,6 +78,7 @@ class Content extends Component {
<FixedWidthTable
className={classnames('', { 'table-thead-hidden': !isDesktop })}
headers={isDesktop ? [
{ isFixed: true, width: 30, className: 'text-center', children: (<input type="checkbox" checked={isAllLinksSelected} className="vam" onChange={this.toggleSelectAllLinks} />) }, // checkbox
{ isFixed: true, width: 40 }, // icon
{ isFixed: false, width: 0.35, children: gettext('Name') },
{ isFixed: false, width: columnWidths[0], children: gettext('Library') },
@ -88,6 +100,7 @@ class Content extends Component {
onRemoveLink={this.props.onRemoveLink}
isItemFreezed={this.state.isItemFreezed}
toggleItemFreezed={this.toggleItemFreezed}
toggleSelectLink={this.props.toggleSelectLink}
/>);
})}
</FixedWidthTable>
@ -104,7 +117,8 @@ const itemPropTypes = {
isDesktop: PropTypes.bool.isRequired,
onRemoveLink: PropTypes.func.isRequired,
isItemFreezed: PropTypes.bool.isRequired,
toggleItemFreezed: PropTypes.func.isRequired
toggleItemFreezed: PropTypes.func.isRequired,
toggleSelectLink: PropTypes.func.isRequired
};
class Item extends Component {
@ -210,9 +224,19 @@ class Item extends Component {
});
};
onCheckboxClicked = (e) => {
e.stopPropagation();
};
toggleSelectLink = (e) => {
const { item } = this.props;
this.props.toggleSelectLink(item, e.target.checked);
};
render() {
const item = this.props.item;
const { currentPermission, permissionOptions, isOpIconShown, isPermSelectDialogOpen, isLinkDialogOpen } = this.state;
const { item } = this.props;
const { isSelected = false } = item;
const { highlight, currentPermission, permissionOptions, isOpIconShown, isPermSelectDialogOpen, isLinkDialogOpen } = this.state;
this.permOptions = permissionOptions.map(item => {
return {
value: item,
@ -222,7 +246,8 @@ class Item extends Component {
});
const currentSelectedPermOption = this.permOptions.filter(item => item.isSelected)[0] || {};
let iconUrl; let objUrl;
let iconUrl;
let objUrl;
if (item.is_dir) {
let path = item.path === '/' ? '/' : item.path.slice(0, item.path.length - 1);
iconUrl = Utils.getFolderIconUrl(false);
@ -236,11 +261,23 @@ class Item extends Component {
<Fragment>
{this.props.isDesktop ?
<tr
className={this.state.highlight ? 'tr-highlight' : ''}
className={classnames({
'tr-highlight': highlight,
'tr-active': isSelected
})}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
onFocus={this.handleMouseEnter}
>
<td className="text-center">
<input
type="checkbox"
checked={isSelected}
className="vam"
onClick={this.onCheckboxClicked}
onChange={this.toggleSelectLink}
/>
</td>
<td className="pl-2 pr-2"><img src={iconUrl} width="24" alt="" /></td>
<td>
{item.is_dir ?
@ -345,13 +382,14 @@ class ShareAdminShareLinks extends Component {
constructor(props) {
super(props);
this.state = {
isCleanInvalidShareLinksDialogOpen: false,
loading: true,
hasMore: false,
isLoadingMore: false,
page: 1,
errorMsg: '',
items: [],
isCleanInvalidShareLinksDialogOpen: false,
isDeleteShareLinksDialogOpen: false
};
}
@ -441,25 +479,103 @@ class ShareAdminShareLinks extends Component {
});
};
toggleDeleteShareLinksDialog = () => {
this.setState({ isDeleteShareLinksDialogOpen: !this.state.isDeleteShareLinksDialogOpen });
};
cancelSelectAllLinks = () => {
this.toggleSelectAllLinks(false);
};
toggleSelectAllLinks = (isSelected) => {
const { items: links } = this.state;
this.setState({
items: links.map(item => {
item.isSelected = isSelected;
return item;
})
});
};
toggleSelectLink = (link, isSelected) => {
const { items: links } = this.state;
this.setState({
items: links.map(item => {
if (item.token == link.token) {
item.isSelected = isSelected;
}
return item;
})
});
};
deleteShareLinks = () => {
const { items: shareLinks } = this.state;
const tokens = shareLinks.filter(item => item.isSelected).map(link => link.token);
seafileAPI.deleteShareLinks(tokens).then(res => {
const { success, failed } = res.data;
if (success.length) {
let newShareLinkList = shareLinks.filter(shareLink => {
return !success.some(deletedShareLink => {
return deletedShareLink.token == shareLink.token;
});
});
this.setState({
items: newShareLinkList
});
const length = success.length;
const msg = length == 1 ?
gettext('Successfully deleted 1 share link') :
gettext('Successfully deleted {number_placeholder} share links')
.replace('{number_placeholder}', length);
toaster.success(msg);
}
failed.forEach(item => {
const msg = `${item.token}: ${item.error_msg}`;
toaster.danger(msg);
});
}).catch((error) => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
};
render() {
const { items } = this.state;
const selectedLinksLen = items.filter(item => item.isSelected).length;
return (
<Fragment>
<div className="main-panel-center">
<div className="cur-view-container">
<div className="cur-view-path share-upload-nav">
<ul className="nav">
<li className="nav-item">
<Link to={`${siteRoot}share-admin-share-links/`} className="nav-link active">
{gettext('Share Links')}
<SingleDropdownToolbar
opList={[{ 'text': gettext('Clean invalid share links'), 'onClick': this.toggleCleanInvalidShareLinksDialog }]}
/>
</Link>
</li>
{canGenerateUploadLink && (
<li className="nav-item"><Link to={`${siteRoot}share-admin-upload-links/`} className="nav-link">{gettext('Upload Links')}</Link></li>
)}
</ul>
<div className={classnames('cur-view-path share-upload-nav', { 'o-hidden': selectedLinksLen > 0 })}>
{selectedLinksLen > 0
? (
<div className="selected-items-toolbar">
<span className="cur-view-path-btn px-1" onClick={this.cancelSelectAllLinks}>
<span className="sf3-font-x-01 sf3-font mr-2" aria-label={gettext('Unselect')} title={gettext('Unselect')}></span>
<span>{`${selectedLinksLen} ${gettext('selected')}`}</span>
</span>
<span className="cur-view-path-btn ml-4" onClick={this.toggleDeleteShareLinksDialog}>
<span className="sf3-font-delete1 sf3-font" aria-label={gettext('Delete')} title={gettext('Delete')}></span>
</span>
</div>
)
: (
<ul className="nav">
<li className="nav-item">
<Link to={`${siteRoot}share-admin-share-links/`} className="nav-link active">
{gettext('Share Links')}
<SingleDropdownToolbar
opList={[{ 'text': gettext('Clean invalid share links'), 'onClick': this.toggleCleanInvalidShareLinksDialog }]}
/>
</Link>
</li>
{canGenerateUploadLink && (
<li className="nav-item"><Link to={`${siteRoot}share-admin-upload-links/`} className="nav-link">{gettext('Upload Links')}</Link></li>
)}
</ul>
)
}
</div>
<div className="cur-view-content" onScroll={this.handleScroll}>
<Content
@ -468,6 +584,8 @@ class ShareAdminShareLinks extends Component {
errorMsg={this.state.errorMsg}
items={this.state.items}
onRemoveLink={this.onRemoveLink}
toggleSelectAllLinks={this.toggleSelectAllLinks}
toggleSelectLink={this.toggleSelectLink}
/>
</div>
</div>
@ -481,6 +599,15 @@ class ShareAdminShareLinks extends Component {
toggleDialog={this.toggleCleanInvalidShareLinksDialog}
/>
}
{this.state.isDeleteShareLinksDialogOpen && (
<CommonOperationConfirmationDialog
title={gettext('Delete share links')}
message={gettext('Are you sure you want to delete the selected share link(s) ?')}
executeOperation={this.deleteShareLinks}
confirmBtnText={gettext('Delete')}
toggleDialog={this.toggleDeleteShareLinksDialog}
/>
)}
</Fragment>
);
}

189
frontend/src/pages/share-admin/upload-links.js
View File

@ -6,6 +6,7 @@ import { DropdownItem } from 'reactstrap';
import classnames from 'classnames';
import { gettext, siteRoot, canGenerateShareLink } from '../../utils/constants';
import { seafileAPI } from '../../utils/seafile-api';
import { repoShareAdminAPI } from '../../utils/repo-share-admin-api';
import { Utils } from '../../utils/utils';
import toaster from '../../components/toast';
import Loading from '../../components/loading';
@ -17,15 +18,23 @@ import SingleDropdownToolbar from '../../components/toolbar/single-dropdown-tool
import FixedWidthTable from '../../components/common/fixed-width-table';
import MobileItemMenu from '../../components/mobile-item-menu';
import '../../css/share-admin-links.css';
const contentPropTypes = {
loading: PropTypes.bool.isRequired,
errorMsg: PropTypes.string.isRequired,
items: PropTypes.array.isRequired,
toggleSelectAllLinks: PropTypes.func.isRequired,
toggleSelectLink: PropTypes.func.isRequired,
onRemoveLink: PropTypes.func.isRequired
};
class Content extends Component {
toggleSelectAllLinks = (e) => {
this.props.toggleSelectAllLinks(e.target.checked);
};
render() {
const { loading, errorMsg, items } = this.props;
@ -44,11 +53,20 @@ class Content extends Component {
);
}
const selectedItems = items.filter(item => item.isSelected);
const isAllLinksSelected = selectedItems.length == items.length;
const isDesktop = Utils.isDesktop();
return (
<FixedWidthTable
className={classnames('table-hover', { 'table-thead-hidden': !isDesktop })}
headers={isDesktop ? [
{
isFixed: true,
width: 30,
className: 'text-center',
children: (<input type="checkbox" checked={isAllLinksSelected} className="vam" onChange={this.toggleSelectAllLinks} />)
}, // checkbox
{ isFixed: true, width: 40 }, // icon
{ isFixed: false, width: 0.33, children: gettext('Name') },
{ isFixed: false, width: 0.25, children: gettext('Library') },
@ -62,7 +80,7 @@ class Content extends Component {
]}
>
{items.map((item, index) => {
return (<Item key={index} isDesktop={isDesktop} item={item} onRemoveLink={this.props.onRemoveLink}/>);
return (<Item key={index} isDesktop={isDesktop} item={item} onRemoveLink={this.props.onRemoveLink} toggleSelectLink={this.props.toggleSelectLink} />);
})}
</FixedWidthTable>
);
@ -74,7 +92,8 @@ Content.propTypes = contentPropTypes;
const itemPropTypes = {
isDesktop: PropTypes.bool.isRequired,
item: PropTypes.object.isRequired,
onRemoveLink: PropTypes.func.isRequired
onRemoveLink: PropTypes.func.isRequired,
toggleSelectLink: PropTypes.func.isRequired
};
class Item extends Component {
@ -82,6 +101,7 @@ class Item extends Component {
constructor(props) {
super(props);
this.state = {
highlight: false,
isOpIconShown: false,
isLinkDialogOpen: false
};
@ -94,11 +114,17 @@ class Item extends Component {
};
handleMouseOver = () => {
this.setState({ isOpIconShown: true });
this.setState({
highlight: true,
isOpIconShown: true
});
};
handleMouseOut = () => {
this.setState({ isOpIconShown: false });
this.setState({
highlight: false,
isOpIconShown: false
});
};
viewLink = (e) => {
@ -121,9 +147,19 @@ class Item extends Component {
return (<span className={item.is_expired ? 'error' : ''} title={expire_time}>{expire_date}</span>);
};
onCheckboxClicked = (e) => {
e.stopPropagation();
};
toggleSelectLink = (e) => {
const { item } = this.props;
this.props.toggleSelectLink(item, e.target.checked);
};
render() {
let item = this.props.item;
const { isOpIconShown, isLinkDialogOpen } = this.state;
const { item } = this.props;
const { isSelected = false } = item;
const { highlight, isOpIconShown, isLinkDialogOpen } = this.state;
const iconUrl = Utils.getFolderIconUrl(false);
const repoUrl = `${siteRoot}library/${item.repo_id}/${encodeURIComponent(item.repo_name)}`;
@ -132,7 +168,24 @@ class Item extends Component {
return (
<Fragment>
{this.props.isDesktop ?
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
<tr
className={classnames({
'tr-highlight': highlight,
'tr-active': isSelected
})}
onMouseOver={this.handleMouseOver}
onMouseOut={this.handleMouseOut}
onFocus={this.handleMouseOver}
>
<td className="text-center">
<input
type="checkbox"
checked={isSelected}
className="vam"
onClick={this.onCheckboxClicked}
onChange={this.toggleSelectLink}
/>
</td>
<td className="pl-2 pr-2"><img src={iconUrl} alt="" width="24" /></td>
<td>
<Link to={objUrl}>{item.obj_name}</Link>
@ -184,10 +237,11 @@ class ShareAdminUploadLinks extends Component {
constructor(props) {
super(props);
this.state = {
isCleanInvalidUploadLinksDialogOpen: false,
loading: true,
errorMsg: '',
items: []
items: [],
isCleanInvalidUploadLinksDialogOpen: false,
isDeleteLinksDialogOpen: false
};
}
@ -241,25 +295,103 @@ class ShareAdminUploadLinks extends Component {
});
};
toggleDeleteLinksDialog = () => {
this.setState({ isDeleteLinksDialogOpen: !this.state.isDeleteLinksDialogOpen });
};
cancelSelectAllLinks = () => {
this.toggleSelectAllLinks(false);
};
toggleSelectAllLinks = (isSelected) => {
const { items: links } = this.state;
this.setState({
items: links.map(item => {
item.isSelected = isSelected;
return item;
})
});
};
toggleSelectLink = (link, isSelected) => {
const { items: links } = this.state;
this.setState({
items: links.map(item => {
if (item.token == link.token) {
item.isSelected = isSelected;
}
return item;
})
});
};
deleteLinks = () => {
const { items } = this.state;
const tokens = items.filter(item => item.isSelected).map(link => link.token);
repoShareAdminAPI.deleteUploadLinks(tokens).then(res => {
const { success, failed } = res.data;
if (success.length) {
let newItems = items.filter(item => {
return !success.some(deletedItem => {
return deletedItem.token == item.token;
});
});
this.setState({
items: newItems
});
const length = success.length;
const msg = length == 1 ?
gettext('Successfully deleted 1 upload link') :
gettext('Successfully deleted {number_placeholder} upload links')
.replace('{number_placeholder}', length);
toaster.success(msg);
}
failed.forEach(item => {
const msg = `${item.token}: ${item.error_msg}`;
toaster.danger(msg);
});
}).catch((error) => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
};
render() {
const { items } = this.state;
const selectedLinksLen = items.filter(item => item.isSelected).length;
return (
<Fragment>
<div className="main-panel-center">
<div className="cur-view-container">
<div className="cur-view-path share-upload-nav">
<ul className="nav">
{canGenerateShareLink && (
<li className="nav-item"><Link to={`${siteRoot}share-admin-share-links/`} className="nav-link">{gettext('Share Links')}</Link></li>
)}
<li className="nav-item">
<Link to={`${siteRoot}share-admin-upload-links/`} className="nav-link active">
{gettext('Upload Links')}
<SingleDropdownToolbar
opList={[{ 'text': gettext('Clean invalid upload links'), 'onClick': this.toggleCleanInvalidUploadLinksDialog }]}
/>
</Link>
</li>
</ul>
<div className={classnames('cur-view-path share-upload-nav', { 'o-hidden': selectedLinksLen > 0 })}>
{selectedLinksLen > 0
? (
<div className="selected-items-toolbar">
<span className="cur-view-path-btn px-1" onClick={this.cancelSelectAllLinks}>
<span className="sf3-font-x-01 sf3-font mr-2" aria-label={gettext('Unselect')} title={gettext('Unselect')}></span>
<span>{`${selectedLinksLen} ${gettext('selected')}`}</span>
</span>
<span className="cur-view-path-btn ml-4" onClick={this.toggleDeleteLinksDialog}>
<span className="sf3-font-delete1 sf3-font" aria-label={gettext('Delete')} title={gettext('Delete')}></span>
</span>
</div>
)
: (
<ul className="nav">
{canGenerateShareLink && (
<li className="nav-item"><Link to={`${siteRoot}share-admin-share-links/`} className="nav-link">{gettext('Share Links')}</Link></li>
)}
<li className="nav-item">
<Link to={`${siteRoot}share-admin-upload-links/`} className="nav-link active">
{gettext('Upload Links')}
<SingleDropdownToolbar
opList={[{ 'text': gettext('Clean invalid upload links'), 'onClick': this.toggleCleanInvalidUploadLinksDialog }]}
/>
</Link>
</li>
</ul>
)
}
</div>
<div className="cur-view-content">
<Content
@ -267,6 +399,8 @@ class ShareAdminUploadLinks extends Component {
errorMsg={this.state.errorMsg}
items={this.state.items}
onRemoveLink={this.onRemoveLink}
toggleSelectAllLinks={this.toggleSelectAllLinks}
toggleSelectLink={this.toggleSelectLink}
/>
</div>
</div>
@ -280,6 +414,15 @@ class ShareAdminUploadLinks extends Component {
toggleDialog={this.toggleCleanInvalidUploadLinksDialog}
/>
}
{this.state.isDeleteLinksDialogOpen && (
<CommonOperationConfirmationDialog
title={gettext('Delete upload links')}
message={gettext('Are you sure you want to delete the selected upload link(s) ?')}
executeOperation={this.deleteLinks}
confirmBtnText={gettext('Delete')}
toggleDialog={this.toggleDeleteLinksDialog}
/>
)}
</Fragment>
);
}