Commit a852c641 authored by hh1966's avatar hh1966
Browse files

Add collection selection to export-collections-modal

parent 0afa0d5e
Pipeline #49741 failed with stage
......@@ -33,18 +33,13 @@ const ExportImportButton = ({ isDisabled, updateModalProps, customClass }) => (
</MenuItem>
<MenuItem divider />
<MenuItem onSelect={() => exportCollectionFunction(updateModalProps)}
title='Export collections as ZIP archive'>
Export selected collection
title='Export as ZIP archive'>
Export collections
</MenuItem>
<MenuItem onSelect={() => importCollectionFunction(updateModalProps)}
title='Import collections from ZIP archive'>
Import collections
</MenuItem>
<MenuItem divider />
<MenuItem onSelect={() => exportCollectionFunctionFull(updateModalProps)}
title='Export all collections as one ZIP archive'>
Export all collections
</MenuItem>
{/* <MenuItem onSelect={() => importChemScannerFunction(updateModalProps)} disabled={isDisabled} */}
{/* title='Import from Docs'> */}
{/* Import elements from Docs */}
......@@ -117,7 +112,7 @@ const exportReactionFunction = (updateModalProps) => {
}
const exportCollectionFunction = (updateModalProps) => {
const title = "Export Collection as ZIP archive";
const title = "Export Collections as ZIP archive";
const component = ModalExportCollection;
const action = CollectionActions.exportCollectionsToFile;
const full = false;
......@@ -135,25 +130,6 @@ const exportCollectionFunction = (updateModalProps) => {
updateModalProps(modalProps);
}
const exportCollectionFunctionFull = (updateModalProps) => {
const title = "Export all collections as one ZIP archive";
const component = ModalExportCollection;
const action = CollectionActions.exportCollectionsToFile;
const full = true;
const listSharedCollections = false;
const modalProps = {
show: true,
title,
component,
action,
full,
listSharedCollections,
};
updateModalProps(modalProps);
}
const importCollectionFunction = (updateModalProps) => {
const title = "Import Collections from ZIP archive";
const component = ModalImportCollection;
......
......@@ -2,55 +2,95 @@ import React from 'react';
import {Button, ButtonToolbar} from 'react-bootstrap';
import UIStore from './../stores/UIStore';
import NotificationActions from '../actions/NotificationActions';
import CollectionStore from './../stores/CollectionStore';
export default class ModalExportCollection extends React.Component {
constructor(props) {
super(props);
let collecState = CollectionStore.getState()
let checkboxes = {}
this.gatherCheckboxes(collecState.unsharedRoots, checkboxes)
this.gatherCheckboxes(collecState.sharedRoots, checkboxes)
this.gatherCheckboxes(collecState.remoteRoots, checkboxes)
this.gatherCheckboxes(collecState.lockedRoots, checkboxes)
this.state = {
nested: true
unsharedRoots: collecState.unsharedRoots,
sharedRoots: collecState.sharedRoots,
remoteRoots: collecState.remoteRoots,
lockedRoots: collecState.lockedRoots,
checkboxes: checkboxes
}
this.handleCheckAll = this.handleCheckAll.bind(this)
this.handleCheckboxChange = this.handleCheckboxChange.bind(this)
this.handleClick = this.handleClick.bind(this)
this.toggleCheckbox = this.toggleCheckbox.bind(this)
}
checkbox() {
return (
<div>
<input type="checkbox"
onChange={this.toggleCheckbox}
checked={this.state.nested}
className="common-checkbox" />
<span className="g-marginLeft--10"> Include nested collections </span>
</div>
)
gatherCheckboxes(roots, checkboxes) {
if (Array.isArray(roots) && roots.length > 0) {
roots.map((root, index) => {
checkboxes[root.id] = false;
this.gatherCheckboxes(root.children, checkboxes)
})
}
}
buttonBar() {
const { onHide } = this.props;
return (
<ButtonToolbar>
<div className="pull-right">
<ButtonToolbar>
<Button bsStyle="primary" onClick={onHide}>Cancel</Button>
<Button bsStyle="warning" id="md-export-dropdown"
title="Export as ZIP file (incl. attachments)" onClick={this.handleClick}>
Export ZIP
</Button>
</ButtonToolbar>
</div>
</ButtonToolbar>
)
hasChecked() {
let checkboxes = this.state.checkboxes
if (Object.keys(checkboxes).every(key => checkboxes[key] === false)) {
// all checkboxes are unchecked
return false
} else {
return true
}
}
isChecked(id) {
return this.state.checkboxes[id]
}
handleCheckAll() {
let checkboxes = this.state.checkboxes,
hasChecked = this.hasChecked()
Object.keys(checkboxes).forEach(key => {
checkboxes[key] = !hasChecked
})
this.setState({
checkboxes: checkboxes
})
}
handleCheckboxChange(e) {
let checkboxes = this.state.checkboxes
checkboxes[e.target.value] = e.target.checked
this.setState({
checkboxes: checkboxes
})
}
handleClick() {
const uiState = UIStore.getState();
const { onHide, action, full } = this.props;
let collections = []
Object.keys(this.state.checkboxes).map((key) => {
if (this.state.checkboxes[key]) {
collections.push(key)
}
})
let params = {
collections: (full ? [] : [uiState.currentCollection.id]),
collections: collections,
format: 'zip',
nested: this.state.nested
nested: false
}
action(params);
onHide();
......@@ -68,12 +108,116 @@ export default class ModalExportCollection extends React.Component {
NotificationActions.add(notification);
}
toggleCheckbox() {
let newNested = !this.state.nested;
renderCheckAll() {
return (
<div>
<input type="checkbox" id="export-collection-check-all"
checked={this.hasChecked()} onChange={this.handleCheckAll} className="common-checkbox" />
<label className="g-marginLeft--10" htmlFor="export-collection-check-all">
{this.hasChecked() ? "Deselect all" : "Select all" }
</label>
</div>
)
}
this.setState({
nested: newNested
})
renderCollections(label, key) {
let roots = this.state[key]
if (Array.isArray(roots) && roots.length > 0) {
return (
<div>
<h4>{label}</h4>
{this.renderSubtrees(roots)}
</div>
)
}
}
renderSharedCollections(label, key) {
let roots = this.state[key]
if (Array.isArray(roots) && roots.length > 0) {
return (
<div>
<h4>{label}</h4>
{this.renderUserSubtrees(roots)}
</div>
)
}
}
renderUserSubtrees(roots) {
if (Array.isArray(roots) && roots.length > 0) {
let nodes = roots.map((root, index) => {
let label
if (root.shared_by) {
label = 'by ' + root.shared_by.initials
} else if (root.shared_to) {
label = 'with ' + root.shared_to.initials
} else {
label = root.label
}
return (
<li key={index}>
<h6>{label}</h6>
{this.renderSubtrees(root.children)}
</li>
)
})
return (
<ul className="list-unstyled">
{nodes}
</ul>
)
}
}
renderSubtrees(roots) {
if (Array.isArray(roots) && roots.length > 0) {
let nodes = roots.map((root, index) => {
return (
<li key={index}>
<input className="common-checkbox" type="checkbox"
id={"export-collection-" + root.id}
value={root.id}
onChange={this.handleCheckboxChange}
checked={this.isChecked(root.id)} />
<label className="g-marginLeft--10" htmlFor={"export-collection-" + root.id}>
{ root.label }
</label>
{this.renderSubtrees(root.children)}
</li>
)
})
return (
<ul className="list-unstyled">
{nodes}
</ul>
)
}
}
renderButtonBar() {
const { onHide } = this.props;
return (
<ButtonToolbar>
<div className="pull-right">
<ButtonToolbar>
<Button bsStyle="primary" onClick={onHide}>Cancel</Button>
<Button bsStyle="warning" id="md-export-dropdown"
title="Export as ZIP file (incl. attachments)" onClick={this.handleClick}>
Export ZIP
</Button>
</ButtonToolbar>
</div>
</ButtonToolbar>
)
}
render() {
......@@ -82,9 +226,13 @@ export default class ModalExportCollection extends React.Component {
)
const { full } = this.props;
return (
<div>
{!full && this.checkbox()}
{this.buttonBar()}
<div className="export-collections-modal">
{this.renderCollections('Global collections', 'lockedRoots')}
{this.renderCollections('My collections', 'unsharedRoots')}
{this.renderSharedCollections('My shared collections', 'sharedRoots')}
{this.renderSharedCollections('Shared with me', 'remoteRoots')}
{this.renderCheckAll()}
{this.renderButtonBar()}
</div>
)
}
......
.export-collections-modal {
label {
font-weight: normal;
}
ul > li > ul {
margin-left: 10px;
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment