frontend > app

app/scenes/Document/components/DocumentMove/DocumentMove.js

@@ -0,0 +1,189 @@
+// @flow
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { observable, computed } from 'mobx';
+import { observer, inject } from 'mobx-react';
+import { withRouter } from 'react-router';
+import { Search } from 'js-search';
+import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
+import _ from 'lodash';
+import styled from 'styled-components';
+import { size } from 'styles/constants';
+
+import Modal from 'components/Modal';
+import Input from 'components/Input';
+import Labeled from 'components/Labeled';
+import Flex from 'components/Flex';
+import PathToDocument from './components/PathToDocument';
+
+import Document from 'models/Document';
+import DocumentsStore from 'stores/DocumentsStore';
+import CollectionsStore, { type DocumentPath } from 'stores/CollectionsStore';
+
+type Props = {
+  match: Object,
+  history: Object,
+  document: Document,
+  documents: DocumentsStore,
+  collections: CollectionsStore,
+};
+
+@observer class DocumentMove extends Component {
+  props: Props;
+  firstDocument: HTMLElement;
+
+  @observable searchTerm: ?string;
+  @observable isSaving: boolean;
+
+  @computed get searchIndex() {
+    const { document, collections } = this.props;
+    const paths = collections.pathsToDocuments;
+    const index = new Search('id');
+    index.addIndex('title');
+
+    // Build index
+    const indexeableDocuments = [];
+    paths.forEach(path => {
+      // TMP: For now, exclude paths to other collections
+      if (_.first(path.path).id !== document.collection.id) return;
+
+      indexeableDocuments.push(path);
+    });
+    index.addDocuments(indexeableDocuments);
+
+    return index;
+  }
+
+  @computed get results(): DocumentPath[] {
+    const { document, collections } = this.props;
+
+    let results = [];
+    if (collections.isLoaded) {
+      if (this.searchTerm) {
+        // Search by the keyword
+        results = this.searchIndex.search(this.searchTerm);
+      } else {
+        // Default results, root of the current collection
+        results = [];
+        document.collection.documents.forEach(doc => {
+          const path = collections.getPathForDocument(doc.id);
+          if (doc && path) {
+            results.push(path);
+          }
+        });
+      }
+    }
+
+    if (document && document.parentDocumentId) {
+      // Add root if document does have a parent document
+      const rootPath = collections.getPathForDocument(document.collection.id);
+      if (rootPath) {
+        results = [rootPath, ...results];
+      }
+    }
+
+    // Exclude root from search results if document is already at the root
+    if (!document.parentDocumentId) {
+      results = results.filter(result => result.id !== document.collection.id);
+    }
+
+    // Exclude document if on the path to result, or the same result
+    results = results.filter(
+      result =>
+        !result.path.map(doc => doc.id).includes(document.id) &&
+        !result.path.map(doc => doc.id).includes(document.parentDocumentId)
+    );
+
+    return results;
+  }
+
+  handleKeyDown = ev => {
+    // Down
+    if (ev.which === 40) {
+      ev.preventDefault();
+      if (this.firstDocument) {
+        const element = ReactDOM.findDOMNode(this.firstDocument);
+        if (element instanceof HTMLElement) element.focus();
+      }
+    }
+  };
+
+  handleClose = () => {
+    this.props.history.push(this.props.document.url);
+  };
+
+  handleFilter = (e: SyntheticInputEvent) => {
+    this.searchTerm = e.target.value;
+  };
+
+  setFirstDocumentRef = ref => {
+    this.firstDocument = ref;
+  };
+
+  renderPathToCurrentDocument() {
+    const { collections, document } = this.props;
+    const result = collections.getPathForDocument(document.id);
+    if (result) {
+      return <PathToDocument result={result} />;
+    }
+  }
+
+  render() {
+    const { document, collections } = this.props;
+
+    return (
+      <Modal isOpen onRequestClose={this.handleClose} title="Move document">
+        {document &&
+          collections.isLoaded &&
+          <Flex column>
+            <Section>
+              <Labeled label="Current location">
+                {this.renderPathToCurrentDocument()}
+              </Labeled>
+            </Section>
+
+            <Section column>
+              <Labeled label="Choose a new location">
+                <Input
+                  type="text"
+                  placeholder="Filter by document name…"
+                  onKeyDown={this.handleKeyDown}
+                  onChange={this.handleFilter}
+                  required
+                  autoFocus
+                />
+              </Labeled>
+              <Flex column>
+                <StyledArrowKeyNavigation
+                  mode={ArrowKeyNavigation.mode.VERTICAL}
+                  defaultActiveChildIndex={0}
+                >
+                  {this.results.map((result, index) => (
+                    <PathToDocument
+                      key={result.id}
+                      result={result}
+                      document={document}
+                      ref={ref => index === 0 && this.setFirstDocumentRef(ref)}
+                      onSuccess={this.handleClose}
+                    />
+                  ))}
+                </StyledArrowKeyNavigation>
+              </Flex>
+            </Section>
+          </Flex>}
+      </Modal>
+    );
+  }
+}
+
+const Section = styled(Flex)`
+  margin-bottom: ${size.huge};
+`;
+
+const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+
+export default withRouter(inject('documents', 'collections')(DocumentMove));

app/scenes/Document/components/DocumentMove/components/PathToDocument.js

@@ -0,0 +1,97 @@
+// @flow
+import React from 'react';
+import { observer } from 'mobx-react';
+import invariant from 'invariant';
+import _ from 'lodash';
+import styled from 'styled-components';
+import { color } from 'styles/constants';
+
+import Flex from 'components/Flex';
+import GoToIcon from 'components/Icon/GoToIcon';
+
+import Document from 'models/Document';
+
+const ResultWrapper = styled.div`
+  display: flex;
+  margin-bottom: 10px;
+
+  color: ${color.text};
+  cursor: default;
+`;
+
+const StyledGoToIcon = styled(GoToIcon)`
+`;
+
+const ResultWrapperLink = ResultWrapper.withComponent('a').extend`
+  height: 32px;
+  padding-top: 3px;
+  padding-left: 5px;
+
+  &:hover,
+  &:active,
+  &:focus {
+    margin-left: 0px;
+    border-radius: 2px;
+    background: ${color.black};
+    color: ${color.smokeLight};
+    outline: none;
+    cursor: pointer;
+
+    ${StyledGoToIcon} {
+      fill: ${color.white};
+    }
+  }
+`;
+
+type Props = {
+  result: Object,
+  document?: Document,
+  onSuccess?: Function,
+  ref?: Function,
+};
+
+@observer class PathToDocument extends React.Component {
+  props: Props;
+
+  handleClick = async (ev: SyntheticEvent) => {
+    ev.preventDefault();
+    const { document, result, onSuccess } = this.props;
+
+    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 (
+      <Component innerRef={ref} onClick={this.handleClick} selectable href>
+        {result.path
+          .map(doc => <span key={doc.id}>{doc.title}</span>)
+          .reduce((prev, curr) => [prev, <StyledGoToIcon />, curr])}
+        {document &&
+          <Flex>
+            {' '}
+            <StyledGoToIcon />
+            {' '}{document.title}
+          </Flex>}
+      </Component>
+    );
+  }
+}
+
+export default PathToDocument;

app/scenes/Document/components/DocumentMove/index.js

@@ -0,0 +1,3 @@
+// @flow
+import DocumentMove from './DocumentMove';
+export default DocumentMove;