Folder contents view: Store additional indexes and order of indexes (#1568)

* folder contents view: store selection and order of columns

New action 'indexContent' stores 'index' with selection and order of columns
Sticky columns: title and actions

* tests on folder content view moved to folder-contents.js

* revert changes

* New action INDEX_CONTENT to store selection and order of columns in folder contents view

No layout changes.
Layout changes ( overlapping table, ... ) are postponed to a later PR.

* folder contents view: rename action: Save additional columns and updated order of columns

* Update CHANGELOG.md

Co-authored-by: Timo Stollenwerk <[email protected]>
Co-authored-by: Timo Stollenwerk <[email protected]>

Author: ksuess

CHANGELOG.md

@@ -11,6 +11,7 @@
 
 ### Bugfix
 
+- Folder contents view: Save additional columns and updated order of columns @ksuess
 - Fixed edit link in draft-js when link is selected from word-end to word-start @giuliaghisini
 
 ### Internal

cypress/integration/content.js

@@ -188,44 +188,3 @@ describe('Add Content Tests', () => {
     });
   }
 });
-
-// // TODO: occasional timeout problem while testing: click on invisible node "sort on id ascending"
-// // click, hover, click is difficult to test.
-// describe('Contents', () => {
-//   beforeEach(() => {
-//     cy.autologin();
-//     if (Cypress.env('API') === 'guillotina') {
-//       cy.createContent('CMSFolder', 'blog', 'Blog');
-//       cy.createContent('CMSFolder', 'january', 'January', '/blog');
-//       cy.createContent('CMSFolder', 'february', 'February', '/blog');
-//     } else {
-//       cy.createContent('Document', 'blog', 'Blog');
-//       cy.createContent('Document', 'january', 'January', '/blog');
-//       cy.createContent('Document', 'february', 'February', '/blog');
-//     };
-//   });
-//   it('is sortable', function() {
-//     cy.visit('/blog/contents');
-//     // January is first item
-//     cy.get('a[href^="/blog/"]')
-//       .first()
-//       .should(($a) => {
-//         expect($a).to.contain('January')
-//       });
-//     cy
-//       .get('div.sort-icon')
-//       .click()
-//       .get('div.item.sort_id')
-//       .should('be.visible')
-//       .trigger('mousover')
-//       .get('div.item.sort_id_ascending')
-//       .should('be.visible')
-//       .click({force: true})
-//       // Now February is first item
-//       .get('a[href^="/blog/"]')
-//       .first()
-//       .should(($a) => {
-//         expect($a).to.contain('February')
-//       });
-//   });
-// });

cypress/integration/folder-contents.js

@@ -28,12 +28,8 @@ if (Cypress.env('API') !== 'guillotina') {
       // when I rename a content object
       cy.get('svg[class="icon unchecked"]').click();
       cy.get('svg[class="icon rename"]').click();
-      cy.get('input[name="0_title"]')
-        .clear()
-        .type('Brand new document title');
-      cy.get('input[name="0_id"]')
-        .clear()
-        .type('brand-new-document-title');
+      cy.get('input[name="0_title"]').clear().type('Brand new document title');
+      cy.get('input[name="0_id"]').clear().type('brand-new-document-title');
       cy.get('.modal button[title="Save"]').click();
 
       // then the new document title and ID should show up in the folder contents view
@@ -86,9 +82,7 @@ if (Cypress.env('API') !== 'guillotina') {
       });
       cy.get('svg[class="icon unchecked"]').click();
       cy.get('svg[class="icon semaphore"]').click();
-      cy.get('#field-state')
-        .click()
-        .type('Publish{enter}');
+      cy.get('#field-state').click().type('Publish{enter}');
       cy.get('.checkbox').click();
       cy.get('button[title="Save"]').click();
 
@@ -118,5 +112,22 @@ if (Cypress.env('API') !== 'guillotina') {
         ' My Child',
       );
     });
+
+    it('Remember indexes', () => {
+      // Add the tags index.
+      cy.visit('my-folder/contents')
+        .get('.selectIndex > .icon')
+        .click()
+        .get('.icon.Creator')
+        .click()
+        .get('thead tr')
+        .contains('Creator');
+
+      // Tags index shows up on visiting another folder-contents view.
+      cy.get('.folder-contents .breadcrumb a.section').first().click();
+      cy.url().should('eq', Cypress.config().baseUrl + '/contents');
+      cy.waitForResourceToLoad('@breadcrumbs');
+      cy.get('thead tr').contains('Creator');
+    });
   });
 }

src/actions/content/content.js

@@ -10,6 +10,7 @@ import {
   GET_CONTENT,
   ORDER_CONTENT,
   RESET_CONTENT,
+  UPDATECOLUMNS_CONTENT,
 } from '@plone/volto/constants/ActionTypes';
 import { nestContent } from '@plone/volto/helpers';
 import { settings } from '~/config';
@@ -157,3 +158,16 @@ export function resetContent(subrequest = null) {
     subrequest,
   };
 }
+
+/**
+ * Add, remove or order indexes
+ * @param {string} url Content url
+ * @param {string} index indexes with order
+ * @returns {Object} Index content action
+ */
+export function updateColumnsContent(url, index) {
+  return {
+    type: UPDATECOLUMNS_CONTENT,
+    indexcolumns: index,
+  };
+}

src/actions/index.js

@@ -33,6 +33,7 @@ export {
   orderContent,
   sortContent,
   resetContent,
+  updateColumnsContent,
 } from '@plone/volto/actions/content/content';
 export {
   getControlpanel,

src/components/manage/Contents/Contents.jsx

@@ -48,9 +48,10 @@ import {
   moveContent,
   orderContent,
   sortContent,
+  updateColumnsContent,
 } from '@plone/volto/actions';
 import { getBaseUrl } from '@plone/volto/helpers';
-import Indexes from '@plone/volto/constants/Indexes';
+import Indexes, { defaultIndexes } from '@plone/volto/constants/Indexes';
 import {
   ContentsIndexHeader,
   ContentsItem,
@@ -86,7 +87,6 @@ import sortDownSVG from '@plone/volto/icons/sort-down.svg';
 import sortUpSVG from '@plone/volto/icons/sort-up.svg';
 import downKeySVG from '@plone/volto/icons/down-key.svg';
 import moreSVG from '@plone/volto/icons/more.svg';
-const defaultIndexes = ['review_state', 'ModificationDate', 'EffectiveDate'];
 
 const messages = defineMessages({
   back: {
@@ -261,6 +261,7 @@ class Contents extends Component {
     moveContent: PropTypes.func.isRequired,
     orderContent: PropTypes.func.isRequired,
     sortContent: PropTypes.func.isRequired,
+    updateColumnsContent: PropTypes.func.isRequired,
     clipboardRequest: PropTypes.shape({
       loading: PropTypes.bool,
       loaded: PropTypes.bool,
@@ -304,6 +305,14 @@ class Contents extends Component {
     items: [],
     action: null,
     source: null,
+    index: {
+      order: keys(Indexes),
+      values: mapValues(Indexes, (value, key) => ({
+        ...value,
+        selected: indexOf(defaultIndexes, key) !== -1,
+      })),
+      selectedCount: defaultIndexes.length + 1,
+    },
   };
 
   /**
@@ -363,7 +372,7 @@ class Contents extends Component {
       filter: '',
       currentPage: 0,
       pageSize: 15,
-      index: {
+      index: this.props.index || {
         order: keys(Indexes),
         values: mapValues(Indexes, (value, key) => ({
           ...value,
@@ -487,19 +496,21 @@ class Contents extends Component {
    * @returns {undefined}
    */
   onSelectIndex(event, { value }) {
+    let newIndex = {
+      ...this.state.index,
+      selectedCount:
+        this.state.index.selectedCount +
+        (this.state.index.values[value].selected ? -1 : 1),
+      values: mapValues(this.state.index.values, (indexValue, indexKey) => ({
+        ...indexValue,
+        selected:
+          indexKey === value ? !indexValue.selected : indexValue.selected,
+      })),
+    };
     this.setState({
-      index: {
-        ...this.state.index,
-        selectedCount:
-          this.state.index.selectedCount +
-          (this.state.index.values[value].selected ? -1 : 1),
-        values: mapValues(this.state.index.values, (indexValue, indexKey) => ({
-          ...indexValue,
-          selected:
-            indexKey === value ? !indexValue.selected : indexValue.selected,
-        })),
-      },
+      index: newIndex,
     });
+    this.props.updateColumnsContent(getBaseUrl(this.props.pathname), newIndex);
   }
 
   /**
@@ -571,6 +582,10 @@ class Contents extends Component {
         order: move(this.state.index.order, index, index + delta),
       },
     });
+    this.props.updateColumnsContent(
+      getBaseUrl(this.props.pathname),
+      this.state.index,
+    );
   }
 
   /**
@@ -1297,7 +1312,7 @@ class Contents extends Component {
                         icon={
                           <Icon name={moreSVG} size="24px" color="#826a6a" />
                         }
-                        className="right floating"
+                        className="right floating selectIndex"
                       >
                         <Dropdown.Menu className="left">
                           <Dropdown.Header
@@ -1624,24 +1639,25 @@ class Contents extends Component {
 export const __test__ = compose(
   injectIntl,
   connect(
-    (state, props) => {
+    (store, props) => {
       return {
-        token: state.userSession.token,
-        items: state.search.items,
-        sort: state.content.update.sort,
-        breadcrumbs: state.breadcrumbs.items,
-        total: state.search.total,
+        token: store.userSession.token,
+        items: store.search.items,
+        sort: store.content.update.sort,
+        index: store.content.updatecolumns.idx,
+        breadcrumbs: store.breadcrumbs.items,
+        total: store.search.total,
         searchRequest: {
-          loading: state.search.loading,
-          loaded: state.search.loaded,
+          loading: store.search.loading,
+          loaded: store.search.loaded,
         },
         pathname: props.location.pathname,
-        action: state.clipboard.action,
-        source: state.clipboard.source,
-        clipboardRequest: state.clipboard.request,
-        deleteRequest: state.content.delete,
-        updateRequest: state.content.update,
-        objectActions: state.actions.actions.object,
+        action: store.clipboard.action,
+        source: store.clipboard.source,
+        clipboardRequest: store.clipboard.request,
+        deleteRequest: store.content.delete,
+        updateRequest: store.content.update,
+        objectActions: store.actions.actions.object,
       };
     },
     {
@@ -1654,6 +1670,7 @@ export const __test__ = compose(
       moveContent,
       orderContent,
       sortContent,
+      updateColumnsContent,
     },
   ),
 )(Contents);
@@ -1662,24 +1679,25 @@ export default compose(
   DragDropContext(HTML5Backend),
   injectIntl,
   connect(
-    (state, props) => {
+    (store, props) => {
       return {
-        token: state.userSession.token,
-        items: state.search.items,
-        sort: state.content.update.sort,
-        breadcrumbs: state.breadcrumbs.items,
-        total: state.search.total,
+        token: store.userSession.token,
+        items: store.search.items,
+        sort: store.content.update.sort,
+        index: store.content.updatecolumns.idx,
+        breadcrumbs: store.breadcrumbs.items,
+        total: store.search.total,
         searchRequest: {
-          loading: state.search.loading,
-          loaded: state.search.loaded,
+          loading: store.search.loading,
+          loaded: store.search.loaded,
         },
         pathname: props.location.pathname,
-        action: state.clipboard.action,
-        source: state.clipboard.source,
-        clipboardRequest: state.clipboard.request,
-        deleteRequest: state.content.delete,
-        updateRequest: state.content.update,
-        objectActions: state.actions.actions.object,
+        action: store.clipboard.action,
+        source: store.clipboard.source,
+        clipboardRequest: store.clipboard.request,
+        deleteRequest: store.content.delete,
+        updateRequest: store.content.update,
+        objectActions: store.actions.actions.object,
       };
     },
     {
@@ -1692,6 +1710,7 @@ export default compose(
       moveContent,
       orderContent,
       sortContent,
+      updateColumnsContent,
     },
   ),
   asyncConnect([

src/components/manage/Contents/Contents.test.jsx

@@ -26,7 +26,7 @@ jest.mock('moment', () =>
 );
 
 describe('Contents', () => {
-  it('renders a contents component', () => {
+  it('renders a folder contents view component', () => {
     const store = mockStore({
       actions: {
         actions: {
@@ -82,6 +82,10 @@ describe('Contents', () => {
           loading: false,
           loaded: false,
         },
+        updatecolumns: {
+          loading: false,
+          loaded: false,
+        },
       },
       intl: {
         locale: 'en',

src/components/manage/Contents/__snapshots__/Contents.test.jsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Contents renders a contents component 1`] = `
+exports[`Contents renders a folder contents view component 1`] = `
 <div
   className="ui container folder-contents"
   id="page-contents"
@@ -346,7 +346,7 @@ exports[`Contents renders a contents component 1`] = `
             </div>
             <div
               aria-expanded={false}
-              className="ui item dropdown right floating"
+              className="ui item dropdown right floating selectIndex"
               onBlur={[Function]}
               onChange={[Function]}
               onClick={[Function]}

src/constants/ActionTypes.js

@@ -46,6 +46,7 @@ export const GET_VOCABULARY = 'GET_VOCABULARY';
 export const GET_VOCABULARY_TOKEN_TITLE = 'GET_VOCABULARY_TOKEN_TITLE';
 export const GET_WORKFLOW = 'GET_WORKFLOW';
 export const GET_WORKFLOW_MULTIPLE = 'GET_WORKFLOW_MULTIPLE';
+export const UPDATECOLUMNS_CONTENT = 'UPDATECOLUMNS_CONTENT';
 export const INSTALL_ADDON = 'INSTALL_ADDON';
 export const LIST_ACTIONS = 'LIST_ACTIONS';
 export const LIST_ADDONS = 'LIST_ADDONS';

src/constants/Indexes.js

@@ -34,3 +34,9 @@ export default {
   start: { label: 'Start Date', type: 'date' },
   Type: { label: 'Type', type: 'string' },
 };
+
+export const defaultIndexes = [
+  'review_state',
+  'ModificationDate',
+  'EffectiveDate',
+];