UI toc generation components, WIP

app/api/files/files.ts

@@ -32,12 +32,11 @@ export const files = {
     return toDeleteFiles;
   },
 
-  async tocReviewed(_id: string) {
+  async tocReviewed(_id: string, language) {
     const savedFile = await files.save({ _id, generatedToc: false });
     const sameEntityFiles = await files.get({ entity: savedFile.entity }, { generatedToc: 1 });
     const [entity] = await entities.get({
       sharedId: savedFile.entity,
-      language: savedFile.language,
     });
 
     await entities.save(
@@ -50,7 +49,7 @@ export const files = {
           false
         ),
       },
-      { user: {}, language: savedFile.language }
+      { user: {}, language }
     );
 
     return savedFile;

app/api/files/routes.ts

@@ -73,7 +73,7 @@ export default (app: Application) => {
     }),
     async (req, res, next) => {
       try {
-        res.json(await files.tocReviewed(req.body.fileId));
+        res.json(await files.tocReviewed(req.body.fileId, req.language));
       } catch (e) {
         next(e);
       }

app/api/files/specs/fixtures.ts

@@ -13,7 +13,6 @@ const fixtures: DBFixture = {
     {
       _id: uploadId,
       entity: 'sharedId1',
-      language: 'es',
       generatedToc: true,
       originalname: 'upload1',
       filename: fileName1,
@@ -22,7 +21,6 @@ const fixtures: DBFixture = {
     {
       _id: uploadId2,
       generatedToc: true,
-      language: 'es',
       entity: 'sharedId1',
       filename: 'fileNotInDisk',
     },

app/react/App/scss/modules/_toc.scss

@@ -1,5 +1,10 @@
 .toc {
-  padding: 15px;
+  padding: 0px 15px 15px 15px;
+}
+
+div.tocHeader {
+  padding-left: 15px;
+  border-bottom: 1px solid #f4f4f4;
 }
 
 .toc-view{

app/react/Attachments/components/File.tsx

@@ -10,6 +10,7 @@ import { APIURL } from 'app/config.js';
 import { LocalForm, Control } from 'react-redux-form';
 import { updateFile, deleteFile } from 'app/Attachments/actions/actions';
 import { wrapDispatch } from 'app/Multireducer';
+import { TocGeneratedLabel } from 'app/ToggledFeatures/tocGeneration';
 import { NeedAuthorization } from 'app/Auth';
 import { EntitySchema } from 'shared/types/entityType';
 import { ViewDocumentLink } from './ViewDocumentLink';
@@ -102,7 +103,10 @@ export class File extends Component<FileProps, FileState> {
       <div>
         <div className="file-language">
           <Translate>{language ? transformLanguage(language) || '' : ''}</Translate>
-        </div>{' '}
+        </div>
+        <TocGeneratedLabel file={this.props.file}>
+          <Translate>ML TOC</Translate>
+        </TocGeneratedLabel>
         <a
           href={`${APIURL}files/${filename}`}
           target="_blank"
@@ -206,4 +210,7 @@ export class File extends Component<FileProps, FileState> {
 const mapDispatchToProps = (dispatch: Dispatch<{}>, props: FileProps) =>
   bindActionCreators({ updateFile, deleteFile }, wrapDispatch(dispatch, props.storeKey));
 
-export const ConnectedFile = connect(null, mapDispatchToProps)(File);
+export const ConnectedFile = connect(
+  null,
+  mapDispatchToProps
+)(File);

app/react/Attachments/components/specs/File.spec.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { LocalForm } from 'react-redux-form';
 import { FileType } from 'shared/types/fileType';
-import { File, FileProps } from '../File';
 import { Translate } from 'app/I18N';
+import { File, FileProps } from '../File';
 
 describe('file', () => {
   let component: ShallowWrapper<File>;
@@ -32,6 +32,7 @@ describe('file', () => {
   });
 
   const render = () => {
+    //eslint-disable-next-line react/jsx-props-no-spreading
     component = shallow(<File {...props} />, { context });
   };
 

app/react/Documents/components/DocumentSidePanel.js

@@ -16,6 +16,8 @@ import ShowIf from 'app/App/ShowIf';
 import SidePanel from 'app/Layout/SidePanel';
 import DocumentSemanticSearchResults from 'app/SemanticSearch/components/DocumentResults';
 import { CopyFromEntity } from 'app/Metadata/components/CopyFromEntity';
+import { FeatureToggle } from 'app/components/Elements/FeatureToggle';
+import { TocGeneratedLabel, ReviewTocButton } from 'app/ToggledFeatures/tocGeneration';
 import { Icon } from 'UI';
 
 import * as viewerModule from 'app/Viewer';
@@ -321,11 +323,14 @@ export class DocumentSidePanel extends Component {
             <div className="sidepanel-footer">
               <button
                 onClick={() => this.props.editToc(this.props.file.toc || [])}
-                className="edit-toc btn btn-success"
+                className="edit-toc btn btn-info"
               >
                 <Icon icon="pencil-alt" />
                 <span className="btn-label">Edit</span>
               </button>
+              <ReviewTocButton file={this.props.file}>
+                <Translate>Mark as Reviewed</Translate>
+              </ReviewTocButton>
             </div>
           </ShowIf>
         </NeedAuthorization>
@@ -340,6 +345,14 @@ export class DocumentSidePanel extends Component {
               />
             </TabContent>
             <TabContent for="toc">
+              <div className="tocHeader">
+                <h1>
+                  <Translate>Table of contents</Translate>
+                </h1>
+                <TocGeneratedLabel file={this.props.file}>
+                  <Translate>auto-created ⓘ </Translate>
+                </TocGeneratedLabel>
+              </div>
               <ShowIf if={!this.props.tocBeingEdited}>
                 <ShowToc
                   toc={defaultDocumentToC}

app/react/Documents/components/ShowToc.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { scrollTo } from 'app/Viewer/actions/uiActions';
 import Immutable from 'immutable';
 import ShowIf from 'app/App/ShowIf';
-import { t } from 'app/I18N';
+import { t, Translate} from 'app/I18N';
 import { Icon } from 'UI';
 
 export class ShowToc extends Component {
@@ -66,4 +66,7 @@ function mapDispatchToProps() {
   return { scrollTo };
 }
 
-export default connect(null, mapDispatchToProps)(ShowToc);
+export default connect(
+  null,
+  mapDispatchToProps
+)(ShowToc);

app/react/Library/actions/libraryActions.js

@@ -12,6 +12,7 @@ import { toUrlParams } from 'shared/JSONRequest';
 import { RequestParams } from 'app/utils/RequestParams';
 import { store } from 'app/store';
 import searchAPI from 'app/Search/SearchAPI';
+import { tocGenerationUtils } from 'app/ToggledFeatures/tocGeneration';
 import { selectedDocumentsChanged, maybeSaveQuickLabels } from './quickLabelActions';
 
 export function enterLibrary() {
@@ -249,7 +250,11 @@ export function searchDocuments(
       dispatch(actions.set(`${storeKey}.selectedSorting`, currentSearch));
     }
 
-    setSearchInUrl(searchParams);
+    searchParams.customFilters = currentSearch.customFilters;
+
+    setSearchInUrl(
+      tocGenerationUtils.aggregations(searchParams, getState().settings.collection.toJS())
+    );
   };
 }
 

app/react/Library/actions/specs/filterActions.spec.js

@@ -24,10 +24,7 @@ describe('filterActions', () => {
   let filtersState;
 
   beforeEach(() => {
-    libraryFilters = [
-      { name: 'author', filter: true },
-      { name: 'country', filter: true },
-    ];
+    libraryFilters = [{ name: 'author', filter: true }, { name: 'country', filter: true }];
     search = { searchTerm: '', filters: { author: 'RR Martin', country: '' } };
     filtersState = {
       documentTypes,
@@ -36,6 +33,9 @@ describe('filterActions', () => {
     };
 
     store = {
+      settings: {
+        collection: Immutable.Map({}),
+      },
       library: {
         filters: Immutable.fromJS(filtersState),
         search,

app/react/Library/actions/specs/libraryActions.spec.js

@@ -48,9 +48,12 @@ describe('libraryActions', () => {
 
     beforeEach(() => {
       dispatch = jasmine.createSpy('dispatch');
-      getState = jasmine
-        .createSpy('getState')
-        .and.returnValue({ library: { filters: Immutable.fromJS(filters), search: {} } });
+      getState = jasmine.createSpy('getState').and.returnValue({
+        settings: {
+          collection: Immutable.Map({}),
+        },
+        library: { filters: Immutable.fromJS(filters), search: {} },
+      });
     });
 
     it('should dispatch a SET_LIBRARY_TEMPLATES action ', () => {
@@ -178,15 +181,24 @@ describe('libraryActions', () => {
             {
               name: 'relationshipfilter',
               type: 'relationshipfilter',
-              filters: [
-                { name: 'status', type: 'select' },
-                { name: 'empty', type: 'date' },
-              ],
+              filters: [{ name: 'status', type: 'select' }, { name: 'empty', type: 'date' }],
             },
           ],
           documentTypes: ['decision'],
         };
-        store = { library: { filters: Immutable.fromJS(state), search: { searchTerm: 'batman' } } };
+        store = {
+          settings: {
+            collection: Immutable.Map({}),
+          },
+          library: {
+            filters: Immutable.fromJS(state),
+            search: {
+              searchTerm: 'batman',
+              customFilters: { property: { values: ['value'] } },
+              filters: {},
+            },
+          },
+        };
         spyOn(browserHistory, 'getCurrentLocation').and.returnValue({
           pathname: '/library',
           query: { view: 'chart' },
@@ -261,6 +273,16 @@ describe('libraryActions', () => {
         );
       });
 
+      it('should use customFilters from the current search on the store', () => {
+        const limit = 60;
+        spyOn(browserHistory, 'push');
+        actions.searchDocuments({}, storeKey, limit)(dispatch, getState);
+
+        expect(browserHistory.push).toHaveBeenCalledWith(
+          "/library/?view=chart&q=(customFilters:(property:(values:!(value))),filters:(),from:0,limit:60,searchTerm:'batman',sort:_score,types:!(decision))" //eslint-disable-line
+        );
+      });
+
       it('should set the storeKey selectedSorting if user has selected a custom sorting', () => {
         const expectedDispatch = {
           type: 'library.selectedSorting/SET',
@@ -365,10 +387,7 @@ describe('libraryActions', () => {
           },
           {
             type: types.UPDATE_DOCUMENTS,
-            docs: [
-              { sharedId: '1', metadataResponse },
-              { sharedId: '2', metadataResponse },
-            ],
+            docs: [{ sharedId: '1', metadataResponse }, { sharedId: '2', metadataResponse }],
           },
         ];
         const store = mockStore({});

app/react/Library/components/FiltersForm.js

@@ -11,6 +11,7 @@ import { t } from 'app/I18N';
 import { wrapDispatch } from 'app/Multireducer';
 import debounce from 'app/utils/debounce';
 import libraryHelper from 'app/Library/helpers/libraryFilters';
+import { FilterTocGeneration } from 'app/ToggledFeatures/tocGeneration';
 
 import Filters from './FiltersFromProperties';
 
@@ -97,6 +98,7 @@ export class FiltersForm extends Component {
             translationContext={translationContext}
             storeKey={this.props.storeKey}
           />
+          <FilterTocGeneration onChange={this.activateAutoSearch} aggregations={aggregations} />
         </Form>
       </div>
     );
@@ -126,4 +128,7 @@ function mapDispatchToProps(dispatch, props) {
   return bindActionCreators({ searchDocuments }, wrapDispatch(dispatch, props.storeKey));
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(FiltersForm);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FiltersForm);

app/react/Library/helpers/libraryFilters.js

@@ -56,6 +56,7 @@ function URLQueryToState(query, templates, _thesauris, _relationTypes, forcedPro
     search: {
       searchTerm,
       filters,
+      customFilters: query.customFilters,
       sort,
       order,
       userSelectedSorting,

app/react/Library/helpers/specs/libraryFilters.spec.js

@@ -33,26 +33,17 @@ describe('library helper', () => {
   const thesauris = [
     {
       _id: 'abc1',
-      values: [
-        { id: 1, value: 'value1' },
-        { id: 2, value: 'value2' },
-      ],
+      values: [{ id: 1, value: 'value1' }, { id: 2, value: 'value2' }],
     },
     {
       _id: 'thesauri2',
       type: 'template',
-      values: [
-        { id: 3, value: 'value3' },
-        { id: 4, value: 'value4' },
-      ],
+      values: [{ id: 3, value: 'value3' }, { id: 4, value: 'value4' }],
     },
     {
       _id: 'thesauri3',
       type: 'template',
-      values: [
-        { id: 5, value: 'value5' },
-        { id: 6, value: 'value6' },
-      ],
+      values: [{ id: 5, value: 'value5' }, { id: 6, value: 'value6' }],
     },
   ];
 
@@ -83,10 +74,14 @@ describe('library helper', () => {
         sort: 'sort',
         types: ['3'],
         filters: { country: 'countryValue', rich: 'search' },
+        customFilters: {
+          property: { values: ['value'] },
+        },
       };
 
       const state = libraryHelper.URLQueryToState(query, templates);
       expect(state.properties.length).toBe(1);
+      expect(state.search.customFilters).toEqual(query.customFilters);
       expect(state.search.filters.country).toBe('countryValue');
       expect(state.search.filters.rich).toBe('search');
       expect(state.search.searchTerm).toBe('searchTerm');
@@ -146,10 +141,7 @@ describe('library helper', () => {
           filter: true,
           type: 'select',
           content: 'abc1',
-          options: [
-            { id: 1, value: 'value1' },
-            { id: 2, value: 'value2' },
-          ],
+          options: [{ id: 1, value: 'value1' }, { id: 2, value: 'value2' }],
         },
         { name: 'date', filter: true, type: 'text' },
       ];