Add filters to media views

frontend/components/DocumentListController/DocumentListController.jsx

@@ -4,9 +4,7 @@ import {h, Component} from 'preact'
 import {route} from '@dadi/preact-router'
 import Button from 'components/Button/Button'
 import DocumentFilters from 'containers/DocumentFilters/DocumentFilters'
-import ListController from 'components/ListController/ListController'
 import proptypes from 'proptypes'
-import Style from 'lib/Style'
 import styles from './DocumentListController.css'
 
 /**
@@ -53,7 +51,6 @@ export default class DocumentListController extends Component {
       collection,
       createNewHref,
       enableFilters,
-      onBuildBaseUrl,
       search = {}
     } = this.props
 

frontend/components/FieldNumber/FieldNumber.jsx

@@ -1,4 +1,11 @@
 import edit from './FieldNumberEdit'
 import filterEdit from './FieldNumberFilterEdit'
 
-export {edit, filterEdit}
+const filterOperators = {
+  $gt: 'is greater than',
+  $gte: 'is greater than or equal to',
+  $lt: 'is less than',
+  $lte: 'is less than or equal to'
+}
+
+export {edit, filterEdit, filterOperators}

frontend/components/FieldNumber/FieldNumberFilterEdit.jsx

@@ -29,7 +29,7 @@ export default class FieldStringFilter extends Component {
     // If the initial value isn't accepted for this field type,
     // we update it with one that is and propagate it to the
     // parent.
-    if (typeof value !== 'string') {
+    if (typeof value !== 'number') {
       onUpdate(null)
     }
   }

frontend/containers/DocumentFilters/DocumentFilters.css

@@ -140,6 +140,7 @@
 }
 
 .tooltip-heading {
+  font-family: var(--theme-font-family, sans-serif);
   font-size: var(--theme-font-size-small, 13px);
   margin-bottom: 6px;
   width: 100%;
@@ -191,7 +192,7 @@
 
 @media (--breakpoint-medium) {
   .form {
-    max-width: 350px;
+    max-width: 550px;
   }
 }
 
@@ -219,22 +220,19 @@
 }
 
 .suggestions {
-  font-size: 13px;
-  position: absolute;
-  top: 100%; left: 0;
-  z-index: 1;
-  width: 100%;
-  background-color: white;
-  padding: 10px;
   background-color: var(--theme-colour-background, #FFFFFF);
-  box-shadow: 7px 6px 25px rgba(0, 0, 0, 0.3);
   border-radius: 0 0 4px 4px;
-  z-index: 2000;
-  margin-top: -4px;
+  box-shadow: 7px 6px 25px rgba(0, 0, 0, 0.3);
   color: var(--theme-colour-primary, #000000);
   font-family: var(--theme-font-family, sans-serif);
   font-size: var(--theme-font-size-normal, 16px);
-  z-index: 1;
+  left: 0;
+  margin-top: -4px;
+  padding: 10px;
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  z-index: 2000;
 }
 
 .suggestion {

frontend/containers/DocumentFilters/DocumentFilters.jsx

@@ -1,11 +1,10 @@
 'use strict'
 
-import * as appActions from 'actions/appActions'
+import * as Constants from 'lib/constants'
 import * as fieldComponents from 'lib/field-components'
 import {connectHelper} from 'lib/util'
 import {h, Component} from 'preact'
 import {getFieldType} from 'lib/fields'
-import {bindActionCreators} from 'redux'
 import Button from 'components/Button/Button'
 import DropdownNative from 'components/DropdownNative/DropdownNative'
 import proptypes from 'proptypes'
@@ -269,8 +268,7 @@ class DocumentFilters extends Component {
 
   propagateFilters() {
     const {onUpdateFilters} = this.props
-
-    let newFiltersObject = this.filtersArray.reduce((result, filter) => {
+    const newFiltersObject = this.filtersArray.reduce((result, filter) => {
       const {field, operator, value} = filter
 
       result[field] = (!operator || operator === DEFAULT_OPERATOR_KEYWORD) ?
@@ -287,8 +285,7 @@ class DocumentFilters extends Component {
     const {
       onUpdateFilters
     } = this.props
-
-    let newFilters = this.filtersArray.reduce((result, filter, arrayIndex) => {
+    const newFilters = this.filtersArray.reduce((result, filter, arrayIndex) => {
       if (index !== arrayIndex) {
         const {field, operator, value} = filter
 
@@ -323,7 +320,7 @@ class DocumentFilters extends Component {
     this.filtersArray = this.buildFiltersArray(filters)
 
     // Finding String fields that don't already have filters applied.
-    let searchableFields = Object.keys(collection.fields).filter(field => {
+    const searchableFields = Object.keys(collection.fields).filter(field => {
       if (collection.fields[field].type.toLowerCase() !== 'string') {
         return false
       }

frontend/containers/MediaListController/MediaListController.jsx

@@ -1,21 +1,14 @@
 'use strict'
 
-import {h, Component} from 'preact'
-import proptypes from 'proptypes'
-import {connect} from 'preact-redux'
-import {bindActionCreators} from 'redux'
-
-import styles from './MediaListController.css'
-
-import * as Constants from 'lib/constants'
 import * as documentsActions from 'actions/documentsActions'
-
+import {bindActionCreators} from 'redux'
 import {connectHelper} from 'lib/util'
-
+import {h, Component} from 'preact'
+import proptypes from 'proptypes'
 import Button from 'components/Button/Button'
 import DropArea from 'components/DropArea/DropArea'
 import FileUpload from 'components/FileUpload/FileUpload'
-import ListController from 'components/ListController/ListController'
+import styles from './MediaListController.css'
 
 /**
  * A controller bar for a list of media documents.
@@ -45,8 +38,6 @@ class DocumentListController extends Component {
   render() {
     return (
       <div>
-        <ListController breadcrumbs={['Media Library']} />
-
         <DropArea
           className={styles.droparea}
           onDrop={this.handleUpload.bind(this)}

frontend/lib/constants.js

@@ -9,10 +9,37 @@ export const ERROR_ROUTE_NOT_FOUND = 'ERROR_ROUTE_NOT_FOUND'
 export const ERROR_WRONG_PASSWORD = 'ERROR_WRONG_PASSWORD'
 export const FIELD_SAVE_OPTIONS = 'publishSaveOptionsLastUsed'
 export const MEDIA_COLLECTION = 'mediaStore'
+/* eslint-disable sort-keys */
 export const MEDIA_COLLECTION_SCHEMA = {
   IS_MEDIA_BUCKET: true,
   _publishLink: '/media',
-  fields: {}
+  fields: {
+    fileName: {
+      label: 'Filename',
+      type: 'String'
+    },
+    altText: {
+      label: 'Alternative text',
+      type: 'String'
+    },
+    caption: {
+      label: 'Caption',
+      type: 'String'
+    },
+    copyright: {
+      label: 'Copyright information',
+      type: 'String'
+    },
+    height: {
+      label: 'Height',
+      type: 'Number'
+    },
+    width: {
+      label: 'Width',
+      type: 'Number'
+    }
+  },
+  name: 'Media Library'
 }
 export const NETWORK_OK = 'NETWORK_OK'
 export const NETWORK_NO_INTERNET_CONNECTION = 'NETWORK_NO_INTERNET_CONNECTION'