Workable document moving
This commit is contained in:
29
frontend/components/Labeled/Labeled.js
Normal file
29
frontend/components/Labeled/Labeled.js
Normal file
@ -0,0 +1,29 @@
|
||||
// @flow
|
||||
import React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import Flex from 'components/Flex';
|
||||
import styled from 'styled-components';
|
||||
import { size } from 'styles/constants';
|
||||
|
||||
type Props = {
|
||||
label: React.Element<*> | string,
|
||||
children: React.Element<*>,
|
||||
};
|
||||
|
||||
const Labeled = ({ label, children, ...props }: Props) => (
|
||||
<Flex column {...props}>
|
||||
<Header>{label}</Header>
|
||||
{children}
|
||||
</Flex>
|
||||
);
|
||||
|
||||
const Header = styled(Flex)`
|
||||
margin-bottom: ${size.medium};
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: #9FA6AB;
|
||||
letter-spacing: 0.04em;
|
||||
`;
|
||||
|
||||
export default observer(Labeled);
|
3
frontend/components/Labeled/index.js
Normal file
3
frontend/components/Labeled/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
// @flow
|
||||
import Labeled from './Labeled';
|
||||
export default Labeled;
|
@ -1,5 +1,6 @@
|
||||
// @flow
|
||||
import React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import styled from 'styled-components';
|
||||
import ReactModal from 'react-modal';
|
||||
import { color } from 'styles/constants';
|
||||
@ -75,4 +76,4 @@ const Close = styled.a`
|
||||
}
|
||||
`;
|
||||
|
||||
export default Modal;
|
||||
export default observer(Modal);
|
||||
|
@ -39,6 +39,8 @@ import RouteSidebarHidden from 'components/RouteSidebarHidden';
|
||||
|
||||
import flatpages from 'static/flatpages';
|
||||
|
||||
import { matchDocumentSlug } from 'utils/routeHelpers';
|
||||
|
||||
let DevTools;
|
||||
if (__DEV__) {
|
||||
DevTools = require('mobx-react-devtools').default; // eslint-disable-line global-require
|
||||
@ -93,8 +95,6 @@ const RedirectDocument = ({ match }: { match: Object }) => (
|
||||
<Redirect to={`/doc/${match.params.documentSlug}`} />
|
||||
);
|
||||
|
||||
const matchDocumentSlug = ':documentSlug([0-9a-zA-Z-]*-[a-zA-z0-9]{10,15})';
|
||||
|
||||
render(
|
||||
<div style={{ display: 'flex', flex: 1, height: '100%' }}>
|
||||
<Provider {...stores}>
|
||||
@ -123,6 +123,11 @@ render(
|
||||
path={`/doc/${matchDocumentSlug}`}
|
||||
component={Document}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path={`/doc/${matchDocumentSlug}/move`}
|
||||
component={Document}
|
||||
/>
|
||||
|
||||
<Route exact path="/search" component={Search} />
|
||||
<Route exact path="/search/:query" component={Search} />
|
||||
@ -132,7 +137,7 @@ render(
|
||||
|
||||
<RouteSidebarHidden
|
||||
exact
|
||||
path={`/doc/${matchDocumentSlug}/:edit`}
|
||||
path={`/doc/${matchDocumentSlug}/edit`}
|
||||
component={Document}
|
||||
/>
|
||||
<RouteSidebarHidden
|
||||
|
@ -115,6 +115,9 @@ class Collection extends BaseModel {
|
||||
if (data.id === this.id) this.fetch();
|
||||
}
|
||||
);
|
||||
this.on('documents.move', (data: { collectionId: string }) => {
|
||||
if (data.collectionId === this.id) this.fetch();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -47,11 +47,17 @@ class Document extends BaseModel {
|
||||
return !!this.lastViewedAt && this.lastViewedAt < this.updatedAt;
|
||||
}
|
||||
|
||||
@computed get pathToDocument(): Array<string> {
|
||||
@computed get pathToDocument(): Array<{ id: string, title: string }> {
|
||||
let path;
|
||||
const traveler = (nodes, previousPath) => {
|
||||
nodes.forEach(childNode => {
|
||||
const newPath = [...previousPath, childNode.id];
|
||||
const newPath = [
|
||||
...previousPath,
|
||||
{
|
||||
id: childNode.id,
|
||||
title: childNode.title,
|
||||
},
|
||||
];
|
||||
if (childNode.id === this.id) {
|
||||
path = newPath;
|
||||
return;
|
||||
@ -174,6 +180,23 @@ class Document extends BaseModel {
|
||||
return this;
|
||||
};
|
||||
|
||||
@action move = async (parentDocumentId: ?string) => {
|
||||
try {
|
||||
const res = await client.post('/documents.move', {
|
||||
id: this.id,
|
||||
parentDocument: parentDocumentId,
|
||||
});
|
||||
this.updateData(res.data);
|
||||
this.emit('documents.move', {
|
||||
id: this.id,
|
||||
collectionId: this.collection.id,
|
||||
});
|
||||
} catch (e) {
|
||||
this.errors.add('Error while moving the document');
|
||||
}
|
||||
return;
|
||||
};
|
||||
|
||||
@action delete = async () => {
|
||||
try {
|
||||
await client.post('/documents.delete', { id: this.id });
|
||||
|
@ -2,13 +2,16 @@
|
||||
import React, { Component } from 'react';
|
||||
import get from 'lodash/get';
|
||||
import styled from 'styled-components';
|
||||
import { observable } from 'mobx';
|
||||
import { observer, inject } from 'mobx-react';
|
||||
import { withRouter, Prompt } from 'react-router';
|
||||
import { withRouter, Prompt, Route } from 'react-router';
|
||||
import Flex from 'components/Flex';
|
||||
import { color, layout } from 'styles/constants';
|
||||
import { collectionUrl, updateDocumentUrl } from 'utils/routeHelpers';
|
||||
|
||||
import Document from 'models/Document';
|
||||
import Modal from 'components/Modal';
|
||||
import DocumentMove from './components/DocumentMove';
|
||||
import UiStore from 'stores/UiStore';
|
||||
import DocumentsStore from 'stores/DocumentsStore';
|
||||
import Menu from './components/Menu';
|
||||
@ -22,6 +25,8 @@ import CenteredContent from 'components/CenteredContent';
|
||||
import PageTitle from 'components/PageTitle';
|
||||
import Search from 'scenes/Search';
|
||||
|
||||
import { matchDocumentEdit, matchDocumentMove } from 'utils/routeHelpers';
|
||||
|
||||
const DISCARD_CHANGES = `
|
||||
You have unsaved changes.
|
||||
Are you sure you want to discard them?
|
||||
@ -51,6 +56,8 @@ type Props = {
|
||||
notFound: false,
|
||||
};
|
||||
|
||||
@observable moveModalOpen: boolean = false;
|
||||
|
||||
componentDidMount() {
|
||||
this.loadDocument(this.props);
|
||||
}
|
||||
@ -120,6 +127,9 @@ type Props = {
|
||||
this.props.history.push(`${this.document.collection.url}/new`);
|
||||
};
|
||||
|
||||
handleCloseMoveModal = () => (this.moveModalOpen = false);
|
||||
handleOpenMoveModal = () => (this.moveModalOpen = true);
|
||||
|
||||
onSave = async (redirect: boolean = false) => {
|
||||
if (this.document && !this.document.allowSave) return;
|
||||
let document = this.document;
|
||||
@ -181,7 +191,8 @@ type Props = {
|
||||
|
||||
render() {
|
||||
const isNew = this.props.newDocument;
|
||||
const isEditing = !!this.props.match.params.edit || isNew;
|
||||
const isMoving = this.props.match.path === matchDocumentMove;
|
||||
const isEditing = this.props.match.path === matchDocumentEdit || isNew;
|
||||
const isFetching = !this.document;
|
||||
const titleText = get(this.document, 'title', '');
|
||||
const document = this.document;
|
||||
@ -192,6 +203,8 @@ type Props = {
|
||||
|
||||
return (
|
||||
<Container column auto>
|
||||
{isMoving && document && <DocumentMove document={document} />}
|
||||
|
||||
{this.state.isDragging &&
|
||||
<DropHere align="center" justify="center">
|
||||
Drop files here to import into Atlas.
|
||||
|
252
frontend/scenes/Document/components/DocumentMove/DocumentMove.js
Normal file
252
frontend/scenes/Document/components/DocumentMove/DocumentMove.js
Normal file
@ -0,0 +1,252 @@
|
||||
// @flow
|
||||
import React, { Component } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { observable, runInAction, 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 invariant from 'invariant';
|
||||
import { client } from 'utils/ApiClient';
|
||||
import styled from 'styled-components';
|
||||
import { size, color } from 'styles/constants';
|
||||
|
||||
import Modal from 'components/Modal';
|
||||
import Button from 'components/Button';
|
||||
import Input from 'components/Input';
|
||||
import HelpText from 'components/HelpText';
|
||||
import Labeled from 'components/Labeled';
|
||||
import Flex from 'components/Flex';
|
||||
import ChevronIcon from 'components/Icon/ChevronIcon';
|
||||
|
||||
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;
|
||||
store: DocumentMoveStore;
|
||||
firstDocument: HTMLElement;
|
||||
|
||||
@observable isSaving: boolean;
|
||||
@observable resultIds: Array<string> = []; // Document IDs
|
||||
@observable searchTerm: ?string = null;
|
||||
@observable isFetching = false;
|
||||
|
||||
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: SyntheticEvent) => {
|
||||
const value = e.target.value;
|
||||
this.searchTerm = value;
|
||||
this.updateSearchResults();
|
||||
};
|
||||
|
||||
updateSearchResults = _.debounce(() => {
|
||||
this.search();
|
||||
}, 250);
|
||||
|
||||
setFirstDocumentRef = ref => {
|
||||
this.firstDocument = ref;
|
||||
};
|
||||
|
||||
@action search = async () => {
|
||||
this.isFetching = true;
|
||||
|
||||
if (this.searchTerm) {
|
||||
try {
|
||||
const res = await client.get('/documents.search', {
|
||||
query: this.searchTerm,
|
||||
});
|
||||
invariant(res && res.data, 'res or res.data missing');
|
||||
const { data } = res;
|
||||
runInAction('search document', () => {
|
||||
// Fill documents store
|
||||
data.forEach(documentData =>
|
||||
this.props.documents.add(new Document(documentData))
|
||||
);
|
||||
this.resultIds = data.map(documentData => documentData.id);
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Something went wrong');
|
||||
}
|
||||
} else {
|
||||
this.resultIds = [];
|
||||
}
|
||||
|
||||
this.isFetching = false;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { document, documents } = this.props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen
|
||||
onRequestClose={this.handleClose}
|
||||
title={`Move ${document.title}`}
|
||||
>
|
||||
<HelpText />
|
||||
<Section>
|
||||
<Labeled label="Current location">
|
||||
<PathToDocument documentId={document.id} documents={documents} />
|
||||
</Labeled>
|
||||
</Section>
|
||||
|
||||
<Section column>
|
||||
<Labeled label="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>
|
||||
|
||||
{false &&
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={this.isSaving || !this.store.hasSelected}
|
||||
>
|
||||
{this.isSaving ? 'Moving…' : 'Move'}
|
||||
</Button>}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const Section = styled(Flex)`
|
||||
margin-bottom: ${size.huge};
|
||||
`;
|
||||
|
||||
const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
`;
|
||||
|
||||
type PathToDocumentProps = {
|
||||
documentId: string,
|
||||
onSuccess?: Function,
|
||||
documents: DocumentsStore,
|
||||
document?: Document,
|
||||
ref?: Function,
|
||||
selectable?: boolean,
|
||||
};
|
||||
|
||||
class PathToDocument extends React.Component {
|
||||
props: PathToDocumentProps;
|
||||
|
||||
get resultDocument(): ?Document {
|
||||
return this.props.documents.getById(this.props.documentId);
|
||||
}
|
||||
|
||||
handleSelect = async event => {
|
||||
const { document } = this.props;
|
||||
invariant(this.props.onSuccess, 'onSuccess unavailable');
|
||||
event.preventDefault();
|
||||
await document.move(this.resultDocument ? this.resultDocument.id : null);
|
||||
this.props.onSuccess();
|
||||
};
|
||||
|
||||
render() {
|
||||
const { document, onSuccess, ref } = this.props;
|
||||
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>{doc.title}</span>)
|
||||
.reduce((prev, curr) => [prev, <ChevronIcon />, curr])}
|
||||
</Flex>}
|
||||
{document &&
|
||||
<Flex>
|
||||
{' '}
|
||||
<ChevronIcon />
|
||||
{' '}{document.title}
|
||||
</Flex>}
|
||||
</Component>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const ResultWrapper = styled.div`
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
|
||||
color: ${color.text};
|
||||
cursor: default;
|
||||
`;
|
||||
|
||||
const ResultWrapperLink = ResultWrapper.withComponent('a').extend`
|
||||
padding-top: 3px;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
margin-left: -8px;
|
||||
padding-left: 6px;
|
||||
background: ${color.smokeLight};
|
||||
border-left: 2px solid ${color.primary};
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
||||
export default withRouter(inject('documents')(DocumentMove));
|
@ -0,0 +1,3 @@
|
||||
// @flow
|
||||
import DocumentMove from './DocumentMove';
|
||||
export default DocumentMove;
|
@ -51,6 +51,10 @@ type Props = {
|
||||
}
|
||||
};
|
||||
|
||||
onMove = () => {
|
||||
this.props.history.push(`${this.props.document.url}/move`);
|
||||
};
|
||||
|
||||
render() {
|
||||
const document = get(this.props, 'document');
|
||||
if (document) {
|
||||
@ -69,6 +73,7 @@ type Props = {
|
||||
New document
|
||||
</DropdownMenuItem>
|
||||
</div>}
|
||||
<DropdownMenuItem onClick={this.onMove}>Move</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={this.onExport}>Export</DropdownMenuItem>
|
||||
{allowDelete &&
|
||||
<DropdownMenuItem onClick={this.onDelete}>Delete</DropdownMenuItem>}
|
||||
|
@ -2,18 +2,23 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import keydown from 'react-keydown';
|
||||
import { observer } from 'mobx-react';
|
||||
import { observable, action, runInAction } from 'mobx';
|
||||
import { observer, inject } from 'mobx-react';
|
||||
import _ from 'lodash';
|
||||
import Flex from 'components/Flex';
|
||||
import invariant from 'invariant';
|
||||
import { client } from 'utils/ApiClient';
|
||||
import Document from 'models/Document';
|
||||
import DocumentsStore from 'stores/DocumentsStore';
|
||||
|
||||
import { withRouter } from 'react-router';
|
||||
import { searchUrl } from 'utils/routeHelpers';
|
||||
import styled from 'styled-components';
|
||||
import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
|
||||
|
||||
import Flex from 'components/Flex';
|
||||
import CenteredContent from 'components/CenteredContent';
|
||||
import LoadingIndicator from 'components/LoadingIndicator';
|
||||
import SearchField from './components/SearchField';
|
||||
import SearchStore from './SearchStore';
|
||||
|
||||
import DocumentPreview from 'components/DocumentPreview';
|
||||
import PageTitle from 'components/PageTitle';
|
||||
@ -21,6 +26,7 @@ import PageTitle from 'components/PageTitle';
|
||||
type Props = {
|
||||
history: Object,
|
||||
match: Object,
|
||||
documents: DocumentsStore,
|
||||
notFound: ?boolean,
|
||||
};
|
||||
|
||||
@ -55,9 +61,11 @@ const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)`
|
||||
props: Props;
|
||||
store: SearchStore;
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.store = new SearchStore();
|
||||
@observable resultIds: Array<string> = []; // Document IDs
|
||||
@observable searchTerm: ?string = null;
|
||||
@observable isFetching = false;
|
||||
|
||||
componentDidMount() {
|
||||
this.updateSearchResults();
|
||||
}
|
||||
|
||||
@ -91,9 +99,35 @@ const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)`
|
||||
};
|
||||
|
||||
updateSearchResults = _.debounce(() => {
|
||||
this.store.search(this.props.match.params.query);
|
||||
this.search(this.props.match.params.query);
|
||||
}, 250);
|
||||
|
||||
@action search = async (query: string) => {
|
||||
this.searchTerm = query;
|
||||
this.isFetching = true;
|
||||
|
||||
if (query) {
|
||||
try {
|
||||
const res = await client.get('/documents.search', { query });
|
||||
invariant(res && res.data, 'res or res.data missing');
|
||||
const { data } = res;
|
||||
runInAction('search document', () => {
|
||||
// Fill documents store
|
||||
data.forEach(documentData =>
|
||||
this.props.documents.add(new Document(documentData))
|
||||
);
|
||||
this.resultIds = data.map(documentData => documentData.id);
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Something went wrong');
|
||||
}
|
||||
} else {
|
||||
this.resultIds = [];
|
||||
}
|
||||
|
||||
this.isFetching = false;
|
||||
};
|
||||
|
||||
updateQuery = query => {
|
||||
this.props.history.replace(searchUrl(query));
|
||||
};
|
||||
@ -103,20 +137,21 @@ const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)`
|
||||
};
|
||||
|
||||
get title() {
|
||||
const query = this.store.searchTerm;
|
||||
const query = this.searchTerm;
|
||||
const title = 'Search';
|
||||
if (query) return `${query} - ${title}`;
|
||||
return title;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { documents } = this.props;
|
||||
const query = this.props.match.params.query;
|
||||
const hasResults = this.store.documents.length > 0;
|
||||
const hasResults = this.resultIds.length > 0;
|
||||
|
||||
return (
|
||||
<Container auto>
|
||||
<PageTitle title={this.title} />
|
||||
{this.store.isFetching && <LoadingIndicator />}
|
||||
{this.isFetching && <LoadingIndicator />}
|
||||
{this.props.notFound &&
|
||||
<div>
|
||||
<h1>Not Found</h1>
|
||||
@ -125,7 +160,7 @@ const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)`
|
||||
</div>}
|
||||
<ResultsWrapper pinToTop={hasResults} column auto>
|
||||
<SearchField
|
||||
searchTerm={this.store.searchTerm}
|
||||
searchTerm={this.searchTerm}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
onChange={this.updateQuery}
|
||||
value={query || ''}
|
||||
@ -135,15 +170,20 @@ const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)`
|
||||
mode={ArrowKeyNavigation.mode.VERTICAL}
|
||||
defaultActiveChildIndex={0}
|
||||
>
|
||||
{this.store.documents.map((document, index) => (
|
||||
{this.resultIds.map((documentId, index) => {
|
||||
const document = documents.getById(documentId);
|
||||
if (document)
|
||||
return (
|
||||
<DocumentPreview
|
||||
innerRef={ref => index === 0 && this.setFirstDocumentRef(ref)}
|
||||
key={document.id}
|
||||
innerRef={ref =>
|
||||
index === 0 && this.setFirstDocumentRef(ref)}
|
||||
key={documentId}
|
||||
document={document}
|
||||
highlight={this.store.searchTerm}
|
||||
highlight={this.searchTerm}
|
||||
showCollection
|
||||
/>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</StyledArrowKeyNavigation>
|
||||
</ResultList>
|
||||
</ResultsWrapper>
|
||||
@ -152,4 +192,4 @@ const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)`
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(Search);
|
||||
export default withRouter(inject('documents')(Search));
|
||||
|
@ -1,37 +0,0 @@
|
||||
// @flow
|
||||
import { observable, action, runInAction } from 'mobx';
|
||||
import invariant from 'invariant';
|
||||
import { client } from 'utils/ApiClient';
|
||||
import Document from 'models/Document';
|
||||
|
||||
class SearchStore {
|
||||
@observable documents: Array<Document> = [];
|
||||
@observable searchTerm: ?string = null;
|
||||
@observable isFetching = false;
|
||||
|
||||
/* Actions */
|
||||
|
||||
@action search = async (query: string) => {
|
||||
this.searchTerm = query;
|
||||
this.isFetching = true;
|
||||
|
||||
if (query) {
|
||||
try {
|
||||
const res = await client.get('/documents.search', { query });
|
||||
invariant(res && res.data, 'res or res.data missing');
|
||||
const { data } = res;
|
||||
runInAction('search document', () => {
|
||||
this.documents = data.map(documentData => new Document(documentData));
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Something went wrong');
|
||||
}
|
||||
} else {
|
||||
this.documents = [];
|
||||
}
|
||||
|
||||
this.isFetching = false;
|
||||
};
|
||||
}
|
||||
|
||||
export default SearchStore;
|
@ -39,6 +39,12 @@ export function notFoundUrl(): string {
|
||||
return '/404';
|
||||
}
|
||||
|
||||
export const matchDocumentSlug =
|
||||
':documentSlug([0-9a-zA-Z-]*-[a-zA-z0-9]{10,15})';
|
||||
|
||||
export const matchDocumentEdit = `/doc/${matchDocumentSlug}/edit`;
|
||||
export const matchDocumentMove = `/doc/${matchDocumentSlug}/move`;
|
||||
|
||||
/**
|
||||
* Replace full url's document part with the new one in case
|
||||
* the document slug has been updated
|
||||
|
@ -281,6 +281,8 @@ router.post('documents.move', auth(), async ctx => {
|
||||
await collection.deleteDocument(document);
|
||||
await collection.addDocumentToStructure(document, index);
|
||||
}
|
||||
// Update collection
|
||||
document.collection = collection;
|
||||
|
||||
document.collection = collection;
|
||||
|
||||
|
Reference in New Issue
Block a user