coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Final fixes to document move

Browse Source
This commit is contained in:
Jori Lallo
2017-10-01 23:42:17 -07:00
parent 466f6a509b
commit ccec69d431
4 changed files with 125 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
frontend/scenes/Document/components/DocumentMove/DocumentMove.js
View File

@ -1,7 +1,7 @@
// @flow // @flow
import React, { Component } from 'react'; import React, { Component } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { observable, computed, action } from 'mobx'; import { observable, computed } from 'mobx';
import { observer, inject } from 'mobx-react'; import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router'; import { withRouter } from 'react-router';
import { Search } from 'js-search'; import { Search } from 'js-search';
@ -18,7 +18,7 @@ import PathToDocument from './components/PathToDocument';
import Document from 'models/Document'; import Document from 'models/Document';
import DocumentsStore from 'stores/DocumentsStore'; import DocumentsStore from 'stores/DocumentsStore';
import CollectionsStore from 'stores/CollectionsStore'; import CollectionsStore, { type DocumentPath } from 'stores/CollectionsStore';
type Props = { type Props = {
match: Object, match: Object,
@ -28,16 +28,6 @@ type Props = {
collections: CollectionsStore, collections: CollectionsStore,
}; };
type DocumentResult = {
id: string,
title: string,
type: 'document' | 'collection',
}
type SearchResult = DocumentResult & {
path: Array<DocumentResult>,
}
@observer class DocumentMove extends Component { @observer class DocumentMove extends Component {
props: Props; props: Props;
firstDocument: HTMLElement; firstDocument: HTMLElement;
@ -45,8 +35,7 @@ type SearchResult = DocumentResult & {
@observable searchTerm: ?string; @observable searchTerm: ?string;
@observable isSaving: boolean; @observable isSaving: boolean;
@computed @computed get searchIndex() {
get searchIndex() {
const { document, collections } = this.props; const { document, collections } = this.props;
const paths = collections.pathsToDocuments; const paths = collections.pathsToDocuments;
const index = new Search('id'); const index = new Search('id');
@ -55,49 +44,53 @@ type SearchResult = DocumentResult & {
// Build index // Build index
paths.forEach(path => { paths.forEach(path => {
// TMP: For now, exclude paths to other collections // TMP: For now, exclude paths to other collections
if (_.first(path).id !== document.collection.id) return; if (_.first(path.path).id !== document.collection.id) return;
const tail = _.last(path); index.addDocuments([path]);
index.addDocuments([{
...tail,
path: path,
}]);
}); });
return index; return index;
} }
@computed get results(): Array<SearchResult> { @computed get results(): Array<DocumentPath> {
const { document, collections } = this.props; const { document, collections } = this.props;
let results = []; let results = [];
if (collections.isLoaded) { if (collections.isLoaded) {
if (this.searchTerm) { if (this.searchTerm) {
// Search by // Search by
results = this.searchIndex.search(this.searchTerm); results = this.searchIndex.search(this.searchTerm);
} else { } else {
// Default results, root of the current collection // Default results, root of the current collection
results = document.collection.documents.map( results = [];
doc => collections.getPathForDocument(doc.id) document.collection.documents.forEach(doc => {
); const path = collections.getPathForDocument(doc.id);
if (doc && path) {
results.push(path);
}
});
} }
} }
if (document.parentDocumentId) { if (document && document.parentDocumentId) {
// Add root if document does have a parent document // Add root if document does have a parent document
results = [ const rootPath = collections.getPathForDocument(document.collection.id);
collections.getPathForDocument(document.collection.id), if (rootPath) {
...results, results = [rootPath, ...results];
] }
} else { }
// Exclude root from search results if document is already at the root
results = results.filter(result => // Exclude root from search results if document is already at the root
result.id !== document.collection.id); if (!document.parentDocumentId) {
results = results.filter(result => result.id !== document.collection.id);
} }
// Exclude document if on the path to result, or the same result // Exclude document if on the path to result, or the same result
results = results.filter(result => { results = results.filter(result => {
return !result.path.map(doc => doc.id).includes(document.parentDocumentId); return (
!result.path.map(doc => doc.id).includes(document.id) &&
!result.path.map(doc => doc.id).includes(document.parentDocumentId)
);
}); });
return results; return results;
@ -126,49 +119,58 @@ type SearchResult = DocumentResult & {
this.firstDocument = ref; this.firstDocument = ref;
}; };
renderPathToCurrentDocument() {
const { collections, document } = this.props;
const result = collections.getPathForDocument(document.id);
if (result) {
return <PathToDocument result={result} />;
}
}
render() { render() {
const { document, documents, collections } = this.props; const { document, collections } = this.props;
return ( return (
<Modal isOpen onRequestClose={this.handleClose} title="Move document"> <Modal isOpen onRequestClose={this.handleClose} title="Move document">
{collections.isLoaded ? ( {document && collections.isLoaded
<Flex column> ? <Flex column>
<Section> <Section>
<Labeled label="Current location"> <Labeled label="Current location">
<PathToDocument result={collections.getPathForDocument(document.id)} /> {this.renderPathToCurrentDocument()}
</Labeled> </Labeled>
</Section> </Section>
<Section column> <Section column>
<Labeled label="Choose a new location"> <Labeled label="Choose a new location">
<Input <Input
type="text" type="text"
placeholder="Filter by document name" placeholder="Filter by document name"
onKeyDown={this.handleKeyDown} onKeyDown={this.handleKeyDown}
onChange={this.handleFilter} onChange={this.handleFilter}
required required
autoFocus autoFocus
/> />
</Labeled> </Labeled>
<Flex column> <Flex column>
<StyledArrowKeyNavigation <StyledArrowKeyNavigation
mode={ArrowKeyNavigation.mode.VERTICAL} mode={ArrowKeyNavigation.mode.VERTICAL}
defaultActiveChildIndex={0} defaultActiveChildIndex={0}
> >
{this.results.map((result, index) => ( {this.results.map((result, index) => (
<PathToDocument <PathToDocument
key={result.id} key={result.id}
result={result} result={result}
document={document} document={document}
ref={ref => index === 0 && this.setFirstDocumentRef(ref)} ref={ref =>
onClick={ () => 'move here' } index === 0 && this.setFirstDocumentRef(ref)}
/> onSuccess={this.handleClose}
))} />
</StyledArrowKeyNavigation> ))}
</Flex> </StyledArrowKeyNavigation>
</Section> </Flex>
</Flex> </Section>
) : <div>loading</div>} </Flex>
: <div />}
</Modal> </Modal>
); );
} }

43
frontend/scenes/Document/components/DocumentMove/components/PathToDocument.js
View File

@ -1,14 +1,16 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import _ from 'lodash';
import invariant from 'invariant'; import invariant from 'invariant';
import _ from 'lodash';
import styled from 'styled-components'; import styled from 'styled-components';
import { color } from 'styles/constants'; import { color } from 'styles/constants';
import Flex from 'components/Flex'; import Flex from 'components/Flex';
import ChevronIcon from 'components/Icon/ChevronIcon'; import ChevronIcon from 'components/Icon/ChevronIcon';
import Document from 'models/Document';
const ResultWrapper = styled.div` const ResultWrapper = styled.div`
display: flex; display: flex;
margin-bottom: 10px; margin-bottom: 10px;
@ -46,28 +48,41 @@ const ResultWrapperLink = ResultWrapper.withComponent('a').extend`
type Props = { type Props = {
result: Object, result: Object,
document: Document, document?: Document,
onClick?: Function, onSuccess?: Function,
ref?: Function, ref?: Function,
}; };
@observer class PathToDocument extends React.Component { @observer class PathToDocument extends React.Component {
props: Props; props: Props;
render() { handleClick = async (ev: SyntheticEvent) => {
const { result, document, onClick, ref } = this.props; ev.preventDefault();
// $FlowIssue we'll always have a document const { document, result, onSuccess } = this.props;
const Component = onClick ? ResultWrapperLink : ResultWrapper;
if (!result) return <div/>; invariant(onSuccess && document, 'onSuccess unavailable');
if (result.type === 'document') {
await document.move(result.id);
} else if (
result.type === 'collection' &&
result.id === document.collection.id
) {
await document.move(null);
} else {
throw new Error('Not implemented yet');
}
onSuccess();
};
render() {
const { result, document, ref } = this.props;
const Component = document ? ResultWrapperLink : ResultWrapper;
if (!result) return <div />;
return ( return (
<Component <Component innerRef={ref} selectable href onClick={this.handleClick}>
innerRef={ref}
selectable
href
onClick={onClick}
>
{result.path {result.path
.map(doc => <span key={doc.id}>{doc.title}</span>) .map(doc => <span key={doc.id}>{doc.title}</span>)
.reduce((prev, curr) => [prev, <StyledChevronIcon />, curr])} .reduce((prev, curr) => [prev, <StyledChevronIcon />, curr])}

30
frontend/stores/CollectionsStore.js
View File

@ -22,6 +22,16 @@ type Options = {
ui: UiStore, ui: UiStore,
}; };
type DocumentPathItem = {
id: string,
title: string,
type: 'document' | 'collection',
};
export type DocumentPath = DocumentPathItem & {
path: Array<DocumentPathItem>,
};
class CollectionsStore { class CollectionsStore {
@observable data: ObservableArray<Collection> = observable.array([]); @observable data: ObservableArray<Collection> = observable.array([]);
@observable isLoaded: boolean = false; @observable isLoaded: boolean = false;
@ -41,7 +51,7 @@ class CollectionsStore {
/** /**
* List of paths to each of the documents, where paths are composed of id and title/name pairs * List of paths to each of the documents, where paths are composed of id and title/name pairs
*/ */
@computed get pathsToDocuments(): ?[[{ id: string, title: string }]] { @computed get pathsToDocuments(): Array<DocumentPath> {
let results = []; let results = [];
const travelDocuments = (documentList, path) => const travelDocuments = (documentList, path) =>
documentList.forEach(document => { documentList.forEach(document => {
@ -60,17 +70,17 @@ class CollectionsStore {
}); });
} }
return results; return results.map(result => {
const tail = _.last(result);
return {
...tail,
path: result,
};
});
} }
getPathForDocument(documentId: string): Object { getPathForDocument(documentId: string): ?DocumentPath {
const result = this.pathsToDocuments.find(path => _.last(path).id === documentId); return this.pathsToDocuments.find(path => path.id === documentId);
const tail = _.last(result);
return {
...tail,
path: result,
}
} }
/* Actions */ /* Actions */

2
server/api/documents.js
View File

@ -264,7 +264,7 @@ router.post('documents.move', auth(), async ctx => {
// Set parent document // Set parent document
if (parentDocument) { if (parentDocument) {
const parent = await Document.findById(parentDocument); const parent = await Document.findById(parentDocument);
if (parent.atlasId !== document.atlasId) if (!parent || parent.atlasId !== document.atlasId)
throw httpErrors.BadRequest( throw httpErrors.BadRequest(
'Invalid parentDocument (must be same collection)' 'Invalid parentDocument (must be same collection)'
); );