@plone/volto 19.0.0-alpha.18 → 19.0.0-alpha.19

package/src/components/manage/Contents/Contents.jsx

@@ -1,8 +1,3 @@
-/**
- * Contents component.
- * @module components/manage/Contents/Contents
- */
-
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
@@ -90,6 +85,7 @@ 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';
 import clearSVG from '@plone/volto/icons/clear.svg';
+import DropzoneContent from './DropZoneContent';
 
 const messages = defineMessages({
   back: {
@@ -1153,699 +1149,717 @@ class Contents extends Component {
                   {this.props.intl.formatMessage(messages.loading)}
                 </Loader>
               </Dimmer>
-
               <Helmet
                 title={this.props.intl.formatMessage(messages.contents)}
               />
-              <div className="container">
-                <article id="content">
-                  <ContentsDeleteModal
-                    open={this.state.showDelete}
-                    onCancel={this.onDeleteCancel}
-                    onOk={this.onDeleteOk}
-                    items={this.state.items}
-                    itemsToDelete={this.state.itemsToDelete}
-                    hasMultiplePages={
-                      Math.ceil(this.props.total / this.state.pageSize) > 1
-                    }
-                  />
-                  <ContentsUploadModal
-                    open={this.state.showUpload}
-                    onCancel={this.onUploadCancel}
-                    onOk={this.onUploadOk}
-                    pathname={getBaseUrl(this.props.pathname)}
-                  />
-                  <ContentsRenameModal
-                    open={this.state.showRename}
-                    onCancel={this.onRenameCancel}
-                    onOk={this.onRenameOk}
-                    items={map(this.state.selected, (item) => ({
-                      url: item,
-                      title: this.getFieldById(item, 'title'),
-                      id: this.getFieldById(item, 'id'),
-                    }))}
-                  />
-                  <ContentsTagsModal
-                    open={this.state.showTags}
-                    onCancel={this.onTagsCancel}
-                    onOk={this.onTagsOk}
-                    items={map(this.state.selected, (item) => ({
-                      url: item,
-                      subjects: this.getFieldById(item, 'Subject'),
-                    }))}
-                  />
-                  <ContentsPropertiesModal
-                    open={this.state.showProperties}
-                    onCancel={this.onPropertiesCancel}
-                    onOk={this.onPropertiesOk}
-                    items={this.state.selected}
-                    values={map(this.state.selected, (id) =>
-                      find(this.state.items, { '@id': id }),
-                    ).filter((item) => item)}
-                  />
-                  {this.state.showWorkflow && (
-                    <ContentsWorkflowModal
-                      open={this.state.showWorkflow}
-                      onCancel={this.onWorkflowCancel}
-                      onOk={this.onWorkflowOk}
+              <DropzoneContent
+                onOk={this.onUploadOk}
+                onCancel={this.onUploadCancel}
+                pathname={getBaseUrl(this.props.pathname)}
+              >
+                <div className="container">
+                  <article id="content">
+                    <ContentsDeleteModal
+                      open={this.state.showDelete}
+                      onCancel={this.onDeleteCancel}
+                      onOk={this.onDeleteOk}
+                      items={this.state.items}
+                      itemsToDelete={this.state.itemsToDelete}
+                      hasMultiplePages={
+                        Math.ceil(this.props.total / this.state.pageSize) > 1
+                      }
+                    />
+                    <ContentsUploadModal
+                      open={this.state.showUpload}
+                      onCancel={this.onUploadCancel}
+                      onOk={this.onUploadOk}
+                      pathname={getBaseUrl(this.props.pathname)}
+                    />
+                    <ContentsRenameModal
+                      open={this.state.showRename}
+                      onCancel={this.onRenameCancel}
+                      onOk={this.onRenameOk}
+                      items={map(this.state.selected, (item) => ({
+                        url: item,
+                        title: this.getFieldById(item, 'title'),
+                        id: this.getFieldById(item, 'id'),
+                      }))}
+                    />
+                    <ContentsTagsModal
+                      open={this.state.showTags}
+                      onCancel={this.onTagsCancel}
+                      onOk={this.onTagsOk}
+                      items={map(this.state.selected, (item) => ({
+                        url: item,
+                        subjects: this.getFieldById(item, 'Subject'),
+                      }))}
+                    />
+                    <ContentsPropertiesModal
+                      open={this.state.showProperties}
+                      onCancel={this.onPropertiesCancel}
+                      onOk={this.onPropertiesOk}
                       items={this.state.selected}
+                      values={map(this.state.selected, (id) =>
+                        find(this.state.items, { '@id': id }),
+                      ).filter((item) => item)}
                     />
-                  )}
-                  <section id="content-core">
-                    <Segment.Group raised>
-                      <Menu secondary attached className="top-menu">
-                        <Menu.Menu className="top-menu-menu">
-                          <Popup
-                            trigger={
-                              <Menu.Item
-                                icon
-                                as={Button}
-                                onClick={this.upload}
-                                className="upload"
-                                aria-controls="contents-table-wrapper"
-                                aria-label={this.props.intl.formatMessage(
-                                  messages.filter,
-                                )}
-                              >
-                                <Icon
-                                  name={uploadSVG}
-                                  color="#007eb1"
-                                  size="24px"
+                    {this.state.showWorkflow && (
+                      <ContentsWorkflowModal
+                        open={this.state.showWorkflow}
+                        onCancel={this.onWorkflowCancel}
+                        onOk={this.onWorkflowOk}
+                        items={this.state.selected}
+                      />
+                    )}
+                    <section id="content-core">
+                      <Segment.Group raised>
+                        <Menu secondary attached className="top-menu">
+                          <Menu.Menu className="top-menu-menu">
+                            <Popup
+                              trigger={
+                                <Menu.Item
+                                  icon
+                                  as={Button}
+                                  onClick={this.upload}
                                   className="upload"
-                                />
-                              </Menu.Item>
-                            }
-                            position="top center"
-                            content={this.props.intl.formatMessage(
-                              messages.upload,
-                            )}
-                            size="mini"
-                          />
-                        </Menu.Menu>
-                        <Menu.Menu className="top-menu-menu">
-                          <Popup
-                            trigger={
-                              <Menu.Item
-                                icon
-                                as={Button}
-                                onClick={this.rename}
-                                disabled={!selected}
-                                aria-label={this.props.intl.formatMessage(
-                                  messages.rename,
-                                )}
-                              >
-                                <Icon
-                                  name={renameSVG}
-                                  color={selected ? '#826a6a' : 'grey'}
-                                  size="24px"
-                                  className="rename"
-                                />
-                              </Menu.Item>
-                            }
-                            position="top center"
-                            content={this.props.intl.formatMessage(
-                              messages.rename,
-                            )}
-                            size="mini"
-                          />
-                          <Popup
-                            trigger={
-                              <Menu.Item
-                                icon
-                                as={Button}
-                                onClick={this.workflow}
-                                disabled={!selected}
-                                aria-label={this.props.intl.formatMessage(
-                                  messages.state,
-                                )}
-                              >
-                                <Icon
-                                  name={semaphoreSVG}
-                                  color={selected ? '#826a6a' : 'grey'}
-                                  size="24px"
-                                  className="semaphore"
-                                />
-                              </Menu.Item>
-                            }
-                            position="top center"
-                            content={this.props.intl.formatMessage(
-                              messages.state,
-                            )}
-                            size="mini"
-                          />
-                          <Popup
-                            trigger={
-                              <Menu.Item
-                                icon
-                                as={Button}
-                                onClick={this.tags}
-                                disabled={!selected}
-                                aria-label={this.props.intl.formatMessage(
-                                  messages.tags,
-                                )}
-                              >
-                                <Icon
-                                  name={tagSVG}
-                                  color={selected ? '#826a6a' : 'grey'}
-                                  size="24px"
-                                  className="tag"
-                                />
-                              </Menu.Item>
-                            }
-                            position="top center"
-                            content={this.props.intl.formatMessage(
-                              messages.tags,
-                            )}
-                            size="mini"
-                          />
-
-                          <Popup
-                            trigger={
-                              <Menu.Item
-                                icon
-                                as={Button}
-                                onClick={this.properties}
-                                disabled={!selected}
-                                aria-label={this.props.intl.formatMessage(
-                                  messages.properties,
-                                )}
-                              >
-                                <Icon
-                                  name={propertiesSVG}
-                                  color={selected ? '#826a6a' : 'grey'}
-                                  size="24px"
-                                  className="properties"
-                                />
-                              </Menu.Item>
-                            }
-                            position="top center"
-                            content={this.props.intl.formatMessage(
-                              messages.properties,
-                            )}
-                            size="mini"
-                          />
-                        </Menu.Menu>
-                        <Menu.Menu className="top-menu-menu">
-                          <Popup
-                            trigger={
-                              <Menu.Item
-                                icon
-                                as={Button}
-                                onClick={this.cut}
-                                disabled={!selected}
-                                aria-label={this.props.intl.formatMessage(
-                                  messages.cut,
-                                )}
-                              >
-                                <Icon
-                                  name={cutSVG}
-                                  color={selected ? '#826a6a' : 'grey'}
-                                  size="24px"
-                                  className="cut"
-                                />
-                              </Menu.Item>
-                            }
-                            position="top center"
-                            content={this.props.intl.formatMessage(
-                              messages.cut,
-                            )}
-                            size="mini"
-                          />
-                          <Popup
-                            trigger={
-                              <Menu.Item
-                                icon
-                                as={Button}
-                                onClick={this.copy}
-                                disabled={!selected}
-                                aria-label={this.props.intl.formatMessage(
-                                  messages.copy,
-                                )}
-                              >
-                                <Icon
-                                  name={copySVG}
-                                  color={selected ? '#826a6a' : 'grey'}
-                                  size="24px"
-                                  className="copy"
-                                />
-                              </Menu.Item>
-                            }
-                            position="top center"
-                            content={this.props.intl.formatMessage(
-                              messages.copy,
-                            )}
-                            size="mini"
-                          />
-
-                          <Popup
-                            trigger={
-                              <Menu.Item
-                                icon
-                                as={Button}
-                                onClick={this.paste}
-                                disabled={!this.props.action}
-                                aria-label={this.props.intl.formatMessage(
-                                  messages.paste,
-                                )}
-                              >
-                                <Icon
-                                  name={pasteSVG}
-                                  color={selected ? '#826a6a' : 'grey'}
-                                  size="24px"
-                                  className="paste"
-                                />
-                              </Menu.Item>
-                            }
-                            position="top center"
-                            content={this.props.intl.formatMessage(
-                              messages.paste,
-                            )}
-                            size="mini"
-                          />
+                                  aria-controls="contents-table-wrapper"
+                                  aria-label={this.props.intl.formatMessage(
+                                    messages.filter,
+                                  )}
+                                >
+                                  <Icon
+                                    name={uploadSVG}
+                                    color="#007eb1"
+                                    size="24px"
+                                    className="upload"
+                                  />
+                                </Menu.Item>
+                              }
+                              position="top center"
+                              content={this.props.intl.formatMessage(
+                                messages.upload,
+                              )}
+                              size="mini"
+                            />
+                          </Menu.Menu>
+                          <Menu.Menu className="top-menu-menu">
+                            <Popup
+                              trigger={
+                                <Menu.Item
+                                  icon
+                                  as={Button}
+                                  onClick={this.rename}
+                                  disabled={!selected}
+                                  aria-label={this.props.intl.formatMessage(
+                                    messages.rename,
+                                  )}
+                                >
+                                  <Icon
+                                    name={renameSVG}
+                                    color={selected ? '#826a6a' : 'grey'}
+                                    size="24px"
+                                    className="rename"
+                                  />
+                                </Menu.Item>
+                              }
+                              position="top center"
+                              content={this.props.intl.formatMessage(
+                                messages.rename,
+                              )}
+                              size="mini"
+                            />
+                            <Popup
+                              trigger={
+                                <Menu.Item
+                                  icon
+                                  as={Button}
+                                  onClick={this.workflow}
+                                  disabled={!selected}
+                                  aria-label={this.props.intl.formatMessage(
+                                    messages.state,
+                                  )}
+                                >
+                                  <Icon
+                                    name={semaphoreSVG}
+                                    color={selected ? '#826a6a' : 'grey'}
+                                    size="24px"
+                                    className="semaphore"
+                                  />
+                                </Menu.Item>
+                              }
+                              position="top center"
+                              content={this.props.intl.formatMessage(
+                                messages.state,
+                              )}
+                              size="mini"
+                            />
+                            <Popup
+                              trigger={
+                                <Menu.Item
+                                  icon
+                                  as={Button}
+                                  onClick={this.tags}
+                                  disabled={!selected}
+                                  aria-label={this.props.intl.formatMessage(
+                                    messages.tags,
+                                  )}
+                                >
+                                  <Icon
+                                    name={tagSVG}
+                                    color={selected ? '#826a6a' : 'grey'}
+                                    size="24px"
+                                    className="tag"
+                                  />
+                                </Menu.Item>
+                              }
+                              position="top center"
+                              content={this.props.intl.formatMessage(
+                                messages.tags,
+                              )}
+                              size="mini"
+                            />
 
-                          <Popup
-                            trigger={
-                              <Menu.Item
-                                icon
-                                as={Button}
-                                onClick={this.delete}
-                                disabled={!selected}
-                                aria-label={this.props.intl.formatMessage(
-                                  messages.delete,
-                                )}
-                              >
-                                <Icon
-                                  name={deleteSVG}
-                                  color={selected ? '#e40166' : 'grey'}
-                                  size="24px"
-                                  className="delete"
-                                />
-                              </Menu.Item>
-                            }
-                            position="top center"
-                            content={this.props.intl.formatMessage(
-                              messages.delete,
-                            )}
-                            size="mini"
-                          />
-                        </Menu.Menu>
-                        <Menu.Menu
-                          position="right"
-                          className="top-menu-searchbox"
-                        >
-                          <div className="ui right aligned category search item">
-                            <Input
-                              type="text"
-                              transparent
-                              placeholder={this.props.intl.formatMessage(
-                                messages.filter,
+                            <Popup
+                              trigger={
+                                <Menu.Item
+                                  icon
+                                  as={Button}
+                                  onClick={this.properties}
+                                  disabled={!selected}
+                                  aria-label={this.props.intl.formatMessage(
+                                    messages.properties,
+                                  )}
+                                >
+                                  <Icon
+                                    name={propertiesSVG}
+                                    color={selected ? '#826a6a' : 'grey'}
+                                    size="24px"
+                                    className="properties"
+                                  />
+                                </Menu.Item>
+                              }
+                              position="top center"
+                              content={this.props.intl.formatMessage(
+                                messages.properties,
                               )}
-                              size="small"
-                              value={this.state.filter}
-                              onChange={this.onChangeFilter}
+                              size="mini"
                             />
-                            {this.state.filter && (
-                              <Button
-                                className="icon icon-container"
-                                onClick={() => {
-                                  this.onChangeFilter('', { value: '' });
-                                }}
-                              >
-                                <Icon
-                                  name={clearSVG}
-                                  size="30px"
-                                  color="#e40166"
-                                />
-                              </Button>
-                            )}
-                            <Icon
-                              name={zoomSVG}
-                              size="30px"
-                              color="#007eb1"
-                              className="zoom"
-                              style={{ flexShrink: '0' }}
+                          </Menu.Menu>
+                          <Menu.Menu className="top-menu-menu">
+                            <Popup
+                              trigger={
+                                <Menu.Item
+                                  icon
+                                  as={Button}
+                                  onClick={this.cut}
+                                  disabled={!selected}
+                                  aria-label={this.props.intl.formatMessage(
+                                    messages.cut,
+                                  )}
+                                >
+                                  <Icon
+                                    name={cutSVG}
+                                    color={selected ? '#826a6a' : 'grey'}
+                                    size="24px"
+                                    className="cut"
+                                  />
+                                </Menu.Item>
+                              }
+                              position="top center"
+                              content={this.props.intl.formatMessage(
+                                messages.cut,
+                              )}
+                              size="mini"
                             />
-                            <div className="results" />
-                          </div>
-                        </Menu.Menu>
-                      </Menu>
-                      <Segment
-                        secondary
-                        attached
-                        className="contents-breadcrumbs"
-                      >
-                        <ContentsBreadcrumbs items={this.props.breadcrumbs} />
-                        <Dropdown
-                          item
-                          upward={false}
-                          icon={
-                            <Icon name={moreSVG} size="24px" color="#826a6a" />
-                          }
-                          className="right floating selectIndex"
-                        >
-                          <Dropdown.Menu className="left">
-                            <Dropdown.Header
+                            <Popup
+                              trigger={
+                                <Menu.Item
+                                  icon
+                                  as={Button}
+                                  onClick={this.copy}
+                                  disabled={!selected}
+                                  aria-label={this.props.intl.formatMessage(
+                                    messages.copy,
+                                  )}
+                                >
+                                  <Icon
+                                    name={copySVG}
+                                    color={selected ? '#826a6a' : 'grey'}
+                                    size="24px"
+                                    className="copy"
+                                  />
+                                </Menu.Item>
+                              }
+                              position="top center"
                               content={this.props.intl.formatMessage(
-                                messages.selectColumns,
+                                messages.copy,
                               )}
+                              size="mini"
                             />
-                            <Dropdown.Menu scrolling>
-                              {map(
-                                filter(
-                                  this.state.index.order,
-                                  (index) => index !== 'sortable_title',
-                                ),
-                                (index) => (
-                                  <Dropdown.Item
-                                    key={index}
-                                    value={index}
-                                    onClick={this.onSelectIndex}
-                                    className="iconAlign"
-                                  >
-                                    {this.state.index.values[index].selected ? (
-                                      <Icon
-                                        name={checkboxCheckedSVG}
-                                        size="24px"
-                                        color="#007eb1"
-                                        className={
-                                          this.state.index.values[index].label
-                                        }
-                                      />
-                                    ) : (
-                                      <Icon
-                                        name={checkboxUncheckedSVG}
-                                        className={
-                                          this.state.index.values[index].label
-                                        }
-                                        size="24px"
-                                      />
-                                    )}
-                                    <span>
-                                      {' '}
-                                      {this.props.intl.formatMessage({
-                                        id: this.state.index.values[index]
-                                          .label,
-                                        defaultMessage:
-                                          this.state.index.values[index].label,
-                                      })}
-                                    </span>
-                                  </Dropdown.Item>
-                                ),
+
+                            <Popup
+                              trigger={
+                                <Menu.Item
+                                  icon
+                                  as={Button}
+                                  onClick={this.paste}
+                                  disabled={!this.props.action}
+                                  aria-label={this.props.intl.formatMessage(
+                                    messages.paste,
+                                  )}
+                                >
+                                  <Icon
+                                    name={pasteSVG}
+                                    color={selected ? '#826a6a' : 'grey'}
+                                    size="24px"
+                                    className="paste"
+                                  />
+                                </Menu.Item>
+                              }
+                              position="top center"
+                              content={this.props.intl.formatMessage(
+                                messages.paste,
                               )}
-                            </Dropdown.Menu>
-                          </Dropdown.Menu>
-                        </Dropdown>
-                      </Segment>
-                      <div
-                        id="contents-table-wrapper"
-                        className="contents-table-wrapper"
-                        role="region"
-                      >
-                        <span
-                          aria-live="polite"
-                          className="search-feedback"
-                          role="status"
-                        >
-                          {`${this.props.intl.formatMessage(
-                            messages.resultCount,
-                          )}: ${this.props.total || 0}`}
-                        </span>
-                        <Table selectable compact singleLine attached>
-                          <Table.Header>
-                            <Table.Row>
-                              <Table.HeaderCell>
-                                <Popup
-                                  menu={true}
-                                  position="bottom left"
-                                  flowing={true}
-                                  basic={true}
-                                  on="click"
-                                  popper={{
-                                    className: 'dropdown-popup',
+                              size="mini"
+                            />
+
+                            <Popup
+                              trigger={
+                                <Menu.Item
+                                  icon
+                                  as={Button}
+                                  onClick={this.delete}
+                                  disabled={!selected}
+                                  aria-label={this.props.intl.formatMessage(
+                                    messages.delete,
+                                  )}
+                                >
+                                  <Icon
+                                    name={deleteSVG}
+                                    color={selected ? '#e40166' : 'grey'}
+                                    size="24px"
+                                    className="delete"
+                                  />
+                                </Menu.Item>
+                              }
+                              position="top center"
+                              content={this.props.intl.formatMessage(
+                                messages.delete,
+                              )}
+                              size="mini"
+                            />
+                          </Menu.Menu>
+                          <Menu.Menu
+                            position="right"
+                            className="top-menu-searchbox"
+                          >
+                            <div className="ui right aligned category search item">
+                              <Input
+                                type="text"
+                                transparent
+                                placeholder={this.props.intl.formatMessage(
+                                  messages.filter,
+                                )}
+                                size="small"
+                                value={this.state.filter}
+                                onChange={this.onChangeFilter}
+                              />
+                              {this.state.filter && (
+                                <Button
+                                  className="icon icon-container"
+                                  onClick={() => {
+                                    this.onChangeFilter('', { value: '' });
                                   }}
-                                  trigger={
-                                    <Icon
-                                      name={configurationSVG}
-                                      size="24px"
-                                      color="#826a6a"
-                                      className="dropdown-popup-trigger configuration-svg"
-                                    />
-                                  }
                                 >
-                                  <Menu vertical borderless fluid>
-                                    <Menu.Header
-                                      content={this.props.intl.formatMessage(
-                                        messages.rearrangeBy,
-                                      )}
-                                    />
-                                    {map(
-                                      [
-                                        'id',
-                                        'sortable_title',
-                                        'EffectiveDate',
-                                        'CreationDate',
-                                        'ModificationDate',
-                                        'portal_type',
-                                      ],
-                                      (index) => (
-                                        <Dropdown
-                                          key={index}
-                                          item
-                                          simple
-                                          className={`sort_${index} icon-align`}
-                                          icon={
-                                            <Icon
-                                              name={downKeySVG}
-                                              size="24px"
-                                              className="left"
-                                            />
+                                  <Icon
+                                    name={clearSVG}
+                                    size="30px"
+                                    color="#e40166"
+                                  />
+                                </Button>
+                              )}
+                              <Icon
+                                name={zoomSVG}
+                                size="30px"
+                                color="#007eb1"
+                                className="zoom"
+                                style={{ flexShrink: '0' }}
+                              />
+                              <div className="results" />
+                            </div>
+                          </Menu.Menu>
+                        </Menu>
+                        <Segment
+                          secondary
+                          attached
+                          className="contents-breadcrumbs"
+                        >
+                          <ContentsBreadcrumbs items={this.props.breadcrumbs} />
+                          <Dropdown
+                            item
+                            upward={false}
+                            icon={
+                              <Icon
+                                name={moreSVG}
+                                size="24px"
+                                color="#826a6a"
+                              />
+                            }
+                            className="right floating selectIndex"
+                          >
+                            <Dropdown.Menu className="left">
+                              <Dropdown.Header
+                                content={this.props.intl.formatMessage(
+                                  messages.selectColumns,
+                                )}
+                              />
+                              <Dropdown.Menu scrolling>
+                                {map(
+                                  filter(
+                                    this.state.index.order,
+                                    (index) => index !== 'sortable_title',
+                                  ),
+                                  (index) => (
+                                    <Dropdown.Item
+                                      key={index}
+                                      value={index}
+                                      onClick={this.onSelectIndex}
+                                      className="iconAlign"
+                                    >
+                                      {this.state.index.values[index]
+                                        .selected ? (
+                                        <Icon
+                                          name={checkboxCheckedSVG}
+                                          size="24px"
+                                          color="#007eb1"
+                                          className={
+                                            this.state.index.values[index].label
                                           }
-                                          text={this.props.intl.formatMessage({
-                                            id: Indexes[index].label,
-                                          })}
-                                        >
-                                          <Dropdown.Menu>
-                                            <Dropdown.Item
-                                              onClick={this.onSortItems}
-                                              value={`${Indexes[index].sort_on}|ascending`}
-                                              className={`sort_${Indexes[index].sort_on}_ascending icon-align`}
-                                            >
-                                              <Icon
-                                                name={sortDownSVG}
-                                                size="24px"
-                                              />{' '}
-                                              <FormattedMessage
-                                                id="Ascending"
-                                                defaultMessage="Ascending"
-                                              />
-                                            </Dropdown.Item>
-                                            <Dropdown.Item
-                                              onClick={this.onSortItems}
-                                              value={`${Indexes[index].sort_on}|descending`}
-                                              className={`sort_${Indexes[index].sort_on}_descending icon-align`}
-                                            >
+                                        />
+                                      ) : (
+                                        <Icon
+                                          name={checkboxUncheckedSVG}
+                                          className={
+                                            this.state.index.values[index].label
+                                          }
+                                          size="24px"
+                                        />
+                                      )}
+                                      <span>
+                                        {' '}
+                                        {this.props.intl.formatMessage({
+                                          id: this.state.index.values[index]
+                                            .label,
+                                          defaultMessage:
+                                            this.state.index.values[index]
+                                              .label,
+                                        })}
+                                      </span>
+                                    </Dropdown.Item>
+                                  ),
+                                )}
+                              </Dropdown.Menu>
+                            </Dropdown.Menu>
+                          </Dropdown>
+                        </Segment>
+                        <div
+                          id="contents-table-wrapper"
+                          className="contents-table-wrapper"
+                          role="region"
+                        >
+                          <span
+                            aria-live="polite"
+                            className="search-feedback"
+                            role="status"
+                          >
+                            {`${this.props.intl.formatMessage(
+                              messages.resultCount,
+                            )}: ${this.props.total || 0}`}
+                          </span>
+                          <Table selectable compact singleLine attached>
+                            <Table.Header>
+                              <Table.Row>
+                                <Table.HeaderCell>
+                                  <Popup
+                                    menu={true}
+                                    position="bottom left"
+                                    flowing={true}
+                                    basic={true}
+                                    on="click"
+                                    popper={{
+                                      className: 'dropdown-popup',
+                                    }}
+                                    trigger={
+                                      <Icon
+                                        name={configurationSVG}
+                                        size="24px"
+                                        color="#826a6a"
+                                        className="dropdown-popup-trigger configuration-svg"
+                                      />
+                                    }
+                                  >
+                                    <Menu vertical borderless fluid>
+                                      <Menu.Header
+                                        content={this.props.intl.formatMessage(
+                                          messages.rearrangeBy,
+                                        )}
+                                      />
+                                      {map(
+                                        [
+                                          'id',
+                                          'sortable_title',
+                                          'EffectiveDate',
+                                          'CreationDate',
+                                          'ModificationDate',
+                                          'portal_type',
+                                        ],
+                                        (index) => (
+                                          <Dropdown
+                                            key={index}
+                                            item
+                                            simple
+                                            className={`sort_${index} icon-align`}
+                                            icon={
                                               <Icon
-                                                name={sortUpSVG}
+                                                name={downKeySVG}
                                                 size="24px"
-                                              />{' '}
-                                              <FormattedMessage
-                                                id="Descending"
-                                                defaultMessage="Descending"
+                                                className="left"
                                               />
-                                            </Dropdown.Item>
-                                          </Dropdown.Menu>
-                                        </Dropdown>
-                                      ),
-                                    )}
-                                  </Menu>
-                                </Popup>
-                              </Table.HeaderCell>
-                              <Table.HeaderCell>
-                                <Popup
-                                  menu={true}
-                                  position="bottom left"
-                                  flowing={true}
-                                  basic={true}
-                                  on="click"
-                                  popper={{
-                                    className: 'dropdown-popup',
-                                  }}
-                                  trigger={
-                                    <Icon
-                                      name={
-                                        this.state.selected.length === 0
-                                          ? checkboxUncheckedSVG
-                                          : this.state.selected.length ===
-                                              this.state.items.length
-                                            ? checkboxCheckedSVG
-                                            : checkboxIndeterminateSVG
-                                      }
-                                      color={
-                                        this.state.selected.length > 0
-                                          ? '#007eb1'
-                                          : '#826a6a'
-                                      }
-                                      className="dropdown-popup-trigger"
-                                      size="24px"
-                                    />
-                                  }
-                                >
-                                  <Menu vertical borderless fluid>
-                                    <Menu.Header
-                                      content={this.props.intl.formatMessage(
-                                        messages.select,
+                                            }
+                                            text={this.props.intl.formatMessage(
+                                              {
+                                                id: Indexes[index].label,
+                                              },
+                                            )}
+                                          >
+                                            <Dropdown.Menu>
+                                              <Dropdown.Item
+                                                onClick={this.onSortItems}
+                                                value={`${Indexes[index].sort_on}|ascending`}
+                                                className={`sort_${Indexes[index].sort_on}_ascending icon-align`}
+                                              >
+                                                <Icon
+                                                  name={sortDownSVG}
+                                                  size="24px"
+                                                />{' '}
+                                                <FormattedMessage
+                                                  id="Ascending"
+                                                  defaultMessage="Ascending"
+                                                />
+                                              </Dropdown.Item>
+                                              <Dropdown.Item
+                                                onClick={this.onSortItems}
+                                                value={`${Indexes[index].sort_on}|descending`}
+                                                className={`sort_${Indexes[index].sort_on}_descending icon-align`}
+                                              >
+                                                <Icon
+                                                  name={sortUpSVG}
+                                                  size="24px"
+                                                />{' '}
+                                                <FormattedMessage
+                                                  id="Descending"
+                                                  defaultMessage="Descending"
+                                                />
+                                              </Dropdown.Item>
+                                            </Dropdown.Menu>
+                                          </Dropdown>
+                                        ),
                                       )}
-                                    />
-                                    <Menu.Item onClick={this.onSelectAll}>
+                                    </Menu>
+                                  </Popup>
+                                </Table.HeaderCell>
+                                <Table.HeaderCell>
+                                  <Popup
+                                    menu={true}
+                                    position="bottom left"
+                                    flowing={true}
+                                    basic={true}
+                                    on="click"
+                                    popper={{
+                                      className: 'dropdown-popup',
+                                    }}
+                                    trigger={
                                       <Icon
-                                        name={checkboxCheckedSVG}
-                                        color="#007eb1"
+                                        name={
+                                          this.state.selected.length === 0
+                                            ? checkboxUncheckedSVG
+                                            : this.state.selected.length ===
+                                                this.state.items.length
+                                              ? checkboxCheckedSVG
+                                              : checkboxIndeterminateSVG
+                                        }
+                                        color={
+                                          this.state.selected.length > 0
+                                            ? '#007eb1'
+                                            : '#826a6a'
+                                        }
+                                        className="dropdown-popup-trigger"
                                         size="24px"
-                                      />{' '}
-                                      <FormattedMessage
-                                        id="All"
-                                        defaultMessage="All"
                                       />
-                                    </Menu.Item>
-                                    <Menu.Item onClick={this.onSelectNone}>
-                                      <Icon
-                                        name={checkboxUncheckedSVG}
-                                        size="24px"
-                                      />{' '}
-                                      <FormattedMessage
-                                        id="None"
-                                        defaultMessage="None"
+                                    }
+                                  >
+                                    <Menu vertical borderless fluid>
+                                      <Menu.Header
+                                        content={this.props.intl.formatMessage(
+                                          messages.select,
+                                        )}
                                       />
-                                    </Menu.Item>
-                                    <Divider />
-                                    <Menu.Header
-                                      content={this.props.intl.formatMessage(
-                                        messages.selected,
-                                        {
-                                          count: this.state.selected.length,
-                                        },
-                                      )}
-                                    />
-                                    <Input
-                                      icon={<Icon name={zoomSVG} size="24px" />}
-                                      iconPosition="left"
-                                      className="item search"
-                                      placeholder={this.props.intl.formatMessage(
-                                        messages.filter,
-                                      )}
-                                      value={
-                                        this.state.selectedMenuFilter || ''
-                                      }
-                                      onChange={this.onChangeSelected}
-                                      onClick={(e) => {
-                                        e.preventDefault();
-                                        e.stopPropagation();
-                                      }}
-                                    />
-                                    <Menu.Menu scrolling>
-                                      {map(filteredItems, (item) => (
-                                        <Menu.Item
-                                          key={item}
-                                          value={item}
-                                          onClick={this.onDeselect}
-                                        >
-                                          <Icon
-                                            name={deleteSVG}
-                                            color="#e40166"
-                                            size="24px"
-                                          />{' '}
-                                          {this.getFieldById(item, 'title')}
-                                        </Menu.Item>
-                                      ))}
-                                    </Menu.Menu>
-                                  </Menu>
-                                </Popup>
-                              </Table.HeaderCell>
-                              <Table.HeaderCell
-                                width={Math.ceil(
-                                  16 / this.state.index.selectedCount,
+                                      <Menu.Item onClick={this.onSelectAll}>
+                                        <Icon
+                                          name={checkboxCheckedSVG}
+                                          color="#007eb1"
+                                          size="24px"
+                                        />{' '}
+                                        <FormattedMessage
+                                          id="All"
+                                          defaultMessage="All"
+                                        />
+                                      </Menu.Item>
+                                      <Menu.Item onClick={this.onSelectNone}>
+                                        <Icon
+                                          name={checkboxUncheckedSVG}
+                                          size="24px"
+                                        />{' '}
+                                        <FormattedMessage
+                                          id="None"
+                                          defaultMessage="None"
+                                        />
+                                      </Menu.Item>
+                                      <Divider />
+                                      <Menu.Header
+                                        content={this.props.intl.formatMessage(
+                                          messages.selected,
+                                          {
+                                            count: this.state.selected.length,
+                                          },
+                                        )}
+                                      />
+                                      <Input
+                                        icon={
+                                          <Icon name={zoomSVG} size="24px" />
+                                        }
+                                        iconPosition="left"
+                                        className="item search"
+                                        placeholder={this.props.intl.formatMessage(
+                                          messages.filter,
+                                        )}
+                                        value={
+                                          this.state.selectedMenuFilter || ''
+                                        }
+                                        onChange={this.onChangeSelected}
+                                        onClick={(e) => {
+                                          e.preventDefault();
+                                          e.stopPropagation();
+                                        }}
+                                      />
+                                      <Menu.Menu scrolling>
+                                        {map(filteredItems, (item) => (
+                                          <Menu.Item
+                                            key={item}
+                                            value={item}
+                                            onClick={this.onDeselect}
+                                          >
+                                            <Icon
+                                              name={deleteSVG}
+                                              color="#e40166"
+                                              size="24px"
+                                            />{' '}
+                                            {this.getFieldById(item, 'title')}
+                                          </Menu.Item>
+                                        ))}
+                                      </Menu.Menu>
+                                    </Menu>
+                                  </Popup>
+                                </Table.HeaderCell>
+                                <Table.HeaderCell
+                                  width={Math.ceil(
+                                    16 / this.state.index.selectedCount,
+                                  )}
+                                >
+                                  <FormattedMessage
+                                    id="Title"
+                                    defaultMessage="Title"
+                                  />
+                                </Table.HeaderCell>
+                                {map(
+                                  this.state.index.order,
+                                  (index, order) =>
+                                    this.state.index.values[index].selected && (
+                                      <ContentsIndexHeader
+                                        key={index}
+                                        width={Math.ceil(
+                                          16 / this.state.index.selectedCount,
+                                        )}
+                                        label={
+                                          this.state.index.values[index].label
+                                        }
+                                        order={order}
+                                        onOrderIndex={this.onOrderIndex}
+                                      />
+                                    ),
                                 )}
-                              >
-                                <FormattedMessage
-                                  id="Title"
-                                  defaultMessage="Title"
-                                />
-                              </Table.HeaderCell>
-                              {map(
-                                this.state.index.order,
-                                (index, order) =>
-                                  this.state.index.values[index].selected && (
-                                    <ContentsIndexHeader
-                                      key={index}
-                                      width={Math.ceil(
-                                        16 / this.state.index.selectedCount,
-                                      )}
-                                      label={
-                                        this.state.index.values[index].label
-                                      }
-                                      order={order}
-                                      onOrderIndex={this.onOrderIndex}
-                                    />
-                                  ),
-                              )}
-                              <Table.HeaderCell textAlign="right">
-                                <FormattedMessage
-                                  id="Actions"
-                                  defaultMessage="Actions"
+                                <Table.HeaderCell textAlign="right">
+                                  <FormattedMessage
+                                    id="Actions"
+                                    defaultMessage="Actions"
+                                  />
+                                </Table.HeaderCell>
+                              </Table.Row>
+                            </Table.Header>
+                            <Table.Body>
+                              {this.state.items.map((item, order) => (
+                                <ContentsItem
+                                  key={item['@id']}
+                                  item={item}
+                                  order={order}
+                                  selected={
+                                    indexOf(
+                                      this.state.selected,
+                                      item['@id'],
+                                    ) !== -1
+                                  }
+                                  onClick={this.onSelect}
+                                  indexes={filter(
+                                    map(this.state.index.order, (index) => ({
+                                      id: index,
+                                      type: this.state.index.values[index].type,
+                                    })),
+                                    (index) =>
+                                      this.state.index.values[index.id]
+                                        .selected,
+                                  )}
+                                  onCut={this.cut}
+                                  onCopy={this.copy}
+                                  onDelete={this.delete}
+                                  onOrderItem={this.onOrderItem}
+                                  onMoveToTop={this.onMoveToTop}
+                                  onMoveToBottom={this.onMoveToBottom}
                                 />
-                              </Table.HeaderCell>
-                            </Table.Row>
-                          </Table.Header>
-                          <Table.Body>
-                            {this.state.items.map((item, order) => (
-                              <ContentsItem
-                                key={item['@id']}
-                                item={item}
-                                order={order}
-                                selected={
-                                  indexOf(this.state.selected, item['@id']) !==
-                                  -1
-                                }
-                                onClick={this.onSelect}
-                                indexes={filter(
-                                  map(this.state.index.order, (index) => ({
-                                    id: index,
-                                    type: this.state.index.values[index].type,
-                                  })),
-                                  (index) =>
-                                    this.state.index.values[index.id].selected,
-                                )}
-                                onCut={this.cut}
-                                onCopy={this.copy}
-                                onDelete={this.delete}
-                                onOrderItem={this.onOrderItem}
-                                onMoveToTop={this.onMoveToTop}
-                                onMoveToBottom={this.onMoveToBottom}
-                              />
-                            ))}
-                          </Table.Body>
-                        </Table>
-                      </div>
-
-                      <div className="contents-pagination">
-                        <Pagination
-                          current={this.state.currentPage}
-                          total={Math.ceil(
-                            this.props.total / this.state.pageSize,
-                          )}
-                          pageSize={this.state.pageSize}
-                          pageSizes={[
-                            50,
-                            this.props.intl.formatMessage(messages.all),
-                          ]}
-                          onChangePage={this.onChangePage}
-                          onChangePageSize={this.onChangePageSize}
-                        />
-                      </div>
-                    </Segment.Group>
-                  </section>
-                </article>
-              </div>
+                              ))}
+                            </Table.Body>
+                          </Table>
+                        </div>
+
+                        <div className="contents-pagination">
+                          <Pagination
+                            current={this.state.currentPage}
+                            total={Math.ceil(
+                              this.props.total / this.state.pageSize,
+                            )}
+                            pageSize={this.state.pageSize}
+                            pageSizes={[
+                              50,
+                              this.props.intl.formatMessage(messages.all),
+                            ]}
+                            onChangePage={this.onChangePage}
+                            onChangePageSize={this.onChangePageSize}
+                          />
+                        </div>
+                      </Segment.Group>
+                    </section>
+                  </article>
+                </div>
+              </DropzoneContent>
               {this.state.isClient &&
                 createPortal(
                   <Toolbar