Merge master

frontend/scenes/Document/components/DocumentMove/DocumentMove.js

@@ -0,0 +1,153 @@
+// @flow
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { observable, action } from 'mobx';
+import { observer, inject } from 'mobx-react';
+import { withRouter } from 'react-router';
+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';
+
+type Props = {
+  match: Object,
+  history: Object,
+  document: Document,
+  documents: DocumentsStore,
+};
+
+@observer class DocumentMove extends Component {
+  props: Props;
+  firstDocument: HTMLElement;
+
+  @observable isSaving: boolean;
+  @observable resultIds: Array<string> = []; // Document IDs
+  @observable searchTerm: ?string = null;
+  @observable isFetching = false;
+
+  componentDidMount() {
+    this.setDefaultResult();
+  }
+
+  handleKeyDown = ev => {
+    // Down
+    if (ev.which === 40) {
+      ev.preventDefault();
+      if (this.firstDocument) {
+        const element = ReactDOM.findDOMNode(this.firstDocument);
+        // $FlowFixMe
+        if (element && element.focus) element.focus();
+      }
+    }
+  };
+
+  handleClose = () => {
+    this.props.history.push(this.props.document.url);
+  };
+
+  handleFilter = (e: SyntheticInputEvent) => {
+    const value = e.target.value;
+    this.searchTerm = value;
+    this.updateSearchResults();
+  };
+
+  updateSearchResults = _.debounce(() => {
+    this.search();
+  }, 250);
+
+  setFirstDocumentRef = ref => {
+    this.firstDocument = ref;
+  };
+
+  @action setDefaultResult() {
+    this.resultIds = this.props.document.collection.documents.map(
+      doc => doc.id
+    );
+  }
+
+  @action search = async () => {
+    this.isFetching = true;
+
+    if (this.searchTerm) {
+      try {
+        this.resultIds = await this.props.documents.search(this.searchTerm);
+      } catch (e) {
+        console.error('Something went wrong');
+      }
+    } else {
+      this.setDefaultResult();
+    }
+
+    this.isFetching = false;
+  };
+
+  render() {
+    const { document, documents } = this.props;
+
+    return (
+      <Modal isOpen onRequestClose={this.handleClose} title="Move document">
+        <Section>
+          <Labeled label="Current location">
+            <PathToDocument documentId={document.id} documents={documents} />
+          </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}
+            >
+              <PathToDocument
+                document={document}
+                documents={documents}
+                ref={ref => this.setFirstDocumentRef(ref)}
+                onSuccess={this.handleClose}
+              />
+              {this.resultIds.map((documentId, index) => (
+                <PathToDocument
+                  key={documentId}
+                  documentId={documentId}
+                  documents={documents}
+                  document={document}
+                  onSuccess={this.handleClose}
+                />
+              ))}
+            </StyledArrowKeyNavigation>
+          </Flex>
+        </Section>
+      </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')(DocumentMove));

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

@@ -0,0 +1,99 @@
+// @flow
+import React from 'react';
+import { observer } from 'mobx-react';
+import _ from 'lodash';
+import invariant from 'invariant';
+import styled from 'styled-components';
+import { color } from 'styles/constants';
+
+import Flex from 'components/Flex';
+import ChevronIcon from 'components/Icon/ChevronIcon';
+
+import Document from 'models/Document';
+import DocumentsStore from 'stores/DocumentsStore';
+
+const ResultWrapper = styled.div`
+display: flex;
+margin-bottom: 10px;
+
+color: ${color.text};
+cursor: default;
+`;
+
+const ResultWrapperLink = ResultWrapper.withComponent('a').extend`
+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;
+}
+`;
+
+type Props = {
+  documentId?: string,
+  onSuccess?: Function,
+  documents: DocumentsStore,
+  document?: Document,
+  ref?: Function,
+  selectable?: boolean,
+};
+
+@observer class PathToDocument extends React.Component {
+  props: Props;
+
+  get resultDocument(): ?Document {
+    const { documentId } = this.props;
+    if (documentId) return this.props.documents.getById(documentId);
+  }
+
+  handleSelect = async (event: SyntheticEvent) => {
+    const { document, onSuccess } = this.props;
+
+    invariant(onSuccess && document, 'onSuccess unavailable');
+    event.preventDefault();
+    await document.move(this.resultDocument ? this.resultDocument.id : null);
+    onSuccess();
+  };
+
+  render() {
+    const { document, onSuccess, ref } = this.props;
+    // $FlowIssue we'll always have a document
+    const { collection } = document || this.resultDocument;
+    const Component = onSuccess ? ResultWrapperLink : ResultWrapper;
+
+    return (
+      <Component
+        innerRef={ref}
+        selectable
+        href={!!onSuccess}
+        onClick={onSuccess && this.handleSelect}
+      >
+        {collection.name}
+        {this.resultDocument &&
+          <Flex>
+            {' '}
+            <ChevronIcon />
+            {' '}
+            {this.resultDocument.pathToDocument
+              .map(doc => <span key={doc.id}>{doc.title}</span>)
+              .reduce((prev, curr) => [prev, <ChevronIcon />, curr])}
+          </Flex>}
+        {document &&
+          <Flex>
+            {' '}
+            <ChevronIcon />
+            {' '}{document.title}
+          </Flex>}
+      </Component>
+    );
+  }
+}
+
+export default PathToDocument;

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

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