Browser: Implement multiple object delete (#3859)

This commit is contained in:
Rushan 2017-03-07 05:13:43 +05:30 committed by Harshavardhana
parent e49efcb9d9
commit 966818955e
4 changed files with 68 additions and 19 deletions

View File

@ -412,13 +412,14 @@ export const setLoginError = () => {
} }
} }
export const downloadAllasZip = (url, req, xhr) => { export const downloadSelected = (url, req, xhr) => {
return (dispatch) => { return (dispatch) => {
xhr.open('POST', url, true) xhr.open('POST', url, true)
xhr.responseType = 'blob' xhr.responseType = 'blob'
xhr.onload = function(e) { xhr.onload = function(e) {
if (this.status == 200) { if (this.status == 200) {
dispatch(checkedObjectsReset())
var blob = new Blob([this.response], { var blob = new Blob([this.response], {
type: 'application/zip' type: 'application/zip'
}) })

View File

@ -226,15 +226,43 @@ export default class Browse extends React.Component {
} }
removeObject() { removeObject() {
const {web, dispatch, currentPath, currentBucket, deleteConfirmation} = this.props const {web, dispatch, currentPath, currentBucket, deleteConfirmation, checkedObjects} = this.props
let objects = checkedObjects.length > 0 ? checkedObjects : [deleteConfirmation.object]
web.RemoveObject({ web.RemoveObject({
bucketname: currentBucket, bucketname: currentBucket,
objects: [deleteConfirmation.object] objects: objects
}) })
.then(() => { .then(() => {
this.hideDeleteConfirmation() this.hideDeleteConfirmation()
let delObject = deleteConfirmation.object.replace(currentPath, '') if (checkedObjects.length > 0) {
dispatch(actions.removeObject(delObject)) for (let i = 0; i < checkedObjects.length; i++) {
dispatch(actions.removeObject(checkedObjects[i].replace(currentPath, '')))
}
dispatch(actions.checkedObjectsReset())
} else {
let delObject = deleteConfirmation.object.replace(currentPath, '')
dispatch(actions.removeObject(delObject))
}
})
.catch(e => dispatch(actions.showAlert({
type: 'danger',
message: e.message
})))
}
removeObjectSelected() {
const {web, dispatch, currentPath, currentBucket, checkedObjects} = this.props
web.RemoveObject({
bucketname: currentBucket,
objects: checkedObjects
})
.then(() => {
this.hideDeleteConfirmation()
for (let i = 0; i < checkedObjects.length; i++) {
dispatch(actions.removeObject(checkedObjects[i].replace(currentPath, '')))
}
dispatch(actions.checkedObjectsReset())
}) })
.catch(e => dispatch(actions.showAlert({ .catch(e => dispatch(actions.showAlert({
type: 'danger', type: 'danger',
@ -368,7 +396,7 @@ export default class Browse extends React.Component {
e.target.checked ? dispatch(actions.checkedObjectsAdd(objectName)) : dispatch(actions.checkedObjectsRemove(objectName)) e.target.checked ? dispatch(actions.checkedObjectsAdd(objectName)) : dispatch(actions.checkedObjectsRemove(objectName))
} }
downloadAll() { downloadSelected() {
const {dispatch} = this.props const {dispatch} = this.props
let req = { let req = {
bucketName: this.props.currentBucket, bucketName: this.props.currentBucket,
@ -378,7 +406,12 @@ export default class Browse extends React.Component {
let requestUrl = location.origin + "/minio/zip?token=" + localStorage.token let requestUrl = location.origin + "/minio/zip?token=" + localStorage.token
this.xhr = new XMLHttpRequest() this.xhr = new XMLHttpRequest()
dispatch(actions.downloadAllasZip(requestUrl, req, this.xhr)) dispatch(actions.downloadSelected(requestUrl, req, this.xhr))
}
clearSelected() {
const {dispatch} = this.props
dispatch(actions.checkedObjectsReset())
} }
render() { render() {
@ -511,7 +544,9 @@ export default class Browse extends React.Component {
' list-actions-toggled': checkedObjects.length > 0 ' list-actions-toggled': checkedObjects.length > 0
})) }> })) }>
<span className="la-label"><i className="fa fa-check-circle" /> { checkedObjects.length } Objects selected</span> <span className="la-label"><i className="fa fa-check-circle" /> { checkedObjects.length } Objects selected</span>
<span className="la-actions pull-right"><button onClick={ this.downloadAll.bind(this) }> Download all as zip </button></span> <span className="la-actions pull-right"><button onClick={ this.downloadSelected.bind(this) }> Download all as zip </button></span>
<span className="la-actions pull-right"><button onClick={ this.showDeleteConfirmation.bind(this) }> Delete selected </button></span>
<i className="la-close fa fa-times" onClick={ this.clearSelected.bind(this) }></i>
</div> </div>
<Dropzone> <Dropzone>
{ alertBox } { alertBox }

View File

@ -29,23 +29,35 @@ let ObjectsList = ({objects, currentPath, selectPrefix, dataType, showDeleteConf
let deleteButton = '' let deleteButton = ''
if (web.LoggedIn()) if (web.LoggedIn())
deleteButton = <a href="" className="fiad-action" onClick={ (e) => showDeleteConfirmation(e, `${currentPath}${object.name}`) }><i className="fa fa-trash"></i></a> deleteButton = <a href="" className="fiad-action" onClick={ (e) => showDeleteConfirmation(e, `${currentPath}${object.name}`) }><i className="fa fa-trash"></i></a>
if (!object.name.endsWith('/')) {
actionButtons = <Dropdown id="fia-dropdown"> if (!checkedObjectsArray.length > 0) {
<Dropdown.Toggle noCaret className="fia-toggle"></Dropdown.Toggle> if (!object.name.endsWith('/')) {
<Dropdown.Menu> actionButtons = <Dropdown id={ "fia-dropdown-" + object.name.replace('.', '-') }>
<a href="" className="fiad-action" onClick={ (e) => shareObject(e, `${currentPath}${object.name}`) }><i className="fa fa-copy"></i></a> <Dropdown.Toggle noCaret className="fia-toggle"></Dropdown.Toggle>
{ deleteButton } <Dropdown.Menu>
</Dropdown.Menu> <a href="" className="fiad-action" onClick={ (e) => shareObject(e, `${currentPath}${object.name}`) }><i className="fa fa-copy"></i></a>
</Dropdown> { deleteButton }
</Dropdown.Menu>
</Dropdown>
}
} }
let activeClass = checkedObjectsArray.indexOf(object.name) > -1 ? ' fesl-row-selected' : '' let activeClass = ''
let isChecked = ''
if (checkedObjectsArray.indexOf(object.name) > -1) {
activeClass = ' fesl-row-selected'
isChecked = true
}
return ( return (
<div key={ i } className={ "fesl-row " + loadingClass + activeClass } data-type={ dataType(object.name, object.contentType) }> <div key={ i } className={ "fesl-row " + loadingClass + activeClass } data-type={ dataType(object.name, object.contentType) }>
<div className="fesl-item fesl-item-icon"> <div className="fesl-item fesl-item-icon">
<div className="fi-select"> <div className="fi-select">
<input type="checkbox" name={ object.name } onChange={ (e) => checkObject(e, object.name) } /> <input type="checkbox"
name={ object.name }
checked={ isChecked }
onChange={ (e) => checkObject(e, object.name) } />
<i className="fis-icon"></i> <i className="fis-icon"></i>
<i className="fis-helper"></i> <i className="fis-helper"></i>
</div> </div>

View File

@ -391,7 +391,7 @@ div.fesl-row {
.opacity(0); .opacity(0);
.transition(all); .transition(all);
.transition-duration(200ms); .transition-duration(200ms);
padding: 20px 25px; padding: 20px 70px 20px 25px;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
@ -450,6 +450,7 @@ div.fesl-row {
font-size: 13px; font-size: 13px;
.transition(all); .transition(all);
.transition-duration(300ms); .transition-duration(300ms);
margin-left: 10px;
&:hover { &:hover {
background-color: @white; background-color: @white;