Add filters in list view

packages/strapi-plugin-upload/admin/src/components/Li/index.js

@@ -78,11 +78,14 @@ class Li extends React.Component {
         <li className={styles.liWrapper}>
           <a href={item.url} target="_blank" style={{ display: 'none' }} ref="aTag">nothing</a>
           <div className={styles.liContainer}>
-            <div />
-            {['ext', 'hash', 'name', 'updatedAt', 'size', 'relatedTo', ''].map((value, key) => {
-              if (key === 0) {
-                return <FileIcon key={key} fileType={item[value]} />;
-              }
+            <div>
+              <div />
+              <FileIcon fileType={item.ext} />
+            </div>
+            {['hash', 'name', 'updatedAt', 'size', 'relatedTo', ''].map((value, key) => {
+              // if (key === 0) {
+              //   return <FileIcon key={key} fileType={item[value]} />;
+              // }
 
               if (value !== '') {
                 return (

packages/strapi-plugin-upload/admin/src/components/Li/styles.scss

@@ -15,19 +15,26 @@
   justify-content: space-between;
 
   > div:first-child {
-    width: 53px;
+    display: flex;
+    width: 133px;
+    > div:first-child {
+      width: 51px;
+    }
+    > div:last-child {
+      width: 82px;
+    }
   }
+
   > div:nth-child(2) {
-    width: 80px;
+    width: calc(100% - 696px);
+    padding-right: 20px;
   }
   > div:nth-child(3) {
-    width: 148px;
+    width: calc(100% - 596px);
   }
   > div:nth-child(4) {
-    width: 221px;
-  }
-  > div:nth-child(5) {
     width: 184px;
+    flex-shrink: 0;
     > span {
       &:after {
         content: '\f0d8';
@@ -36,14 +43,17 @@
       }
     }
   }
-  > div:nth-child(6) {
+  > div:nth-child(5) {
+    flex-shrink: 0;
     width: 100px;
   }
-  > div:nth-child(7) {
+  > div:nth-child(6) {
     width: 147px;
+    flex-shrink: 0;
   }
-  > div:nth-child(8) {
+  > div:nth-child(7) {
     width: 116px;
+    flex-shrink: 0;
   }
 }
 

packages/strapi-plugin-upload/admin/src/components/ListHeader/index.js

@@ -14,8 +14,8 @@ import styles from './styles.scss';
 
 function ListHeader() {
   const titles = [
-    '',
-    'type',
+    // '',
+    // 'type',
     'hash',
     'name',
     'updated',
@@ -26,6 +26,12 @@ function ListHeader() {
   return (
     <li className={styles.listheaderWrapper}>
       <div className={cn(styles.listHeader)}>
+        <div>
+          <div />
+          <div>
+            <FormattedMessage id="upload.ListHeader.type" />
+          </div>
+        </div>
         {titles.map((title, key) => {
           if (title !== '') {
             return (

packages/strapi-plugin-upload/admin/src/components/ListHeader/styles.scss

@@ -7,39 +7,6 @@
   line-height: 30px;
 }
 
-// .listHeader {
-//   display: flex;
-//   > div:first-child {
-//     min-width: 84px;
-//     text-align: center;
-//   }
-//   > div:nth-child(2) {
-//     min-width: 80px;
-//   }
-//   > div:nth-child(3) {
-//     min-width: 148px;
-//   }
-//   > div:nth-child(4) {
-//     min-width: 221px;
-//   }
-//   > div:nth-child(5) {
-//     min-width: 184px;
-//     > span {
-//       &:after {
-//         content: '\f0d8';
-//         margin-left: 10px;
-//         font-family: 'FontAwesome';
-//       }
-//     }
-//   }
-//   > div:nth-child(6) {
-//     min-width: 100px;
-//   }
-//   > div:nth-child(7) {
-//     min-width: 146px;
-//   }
-// }
-
 .listHeader {
   display: flex;
   margin-left: 32px;
@@ -47,19 +14,24 @@
   justify-content: space-between;
 
   > div:first-child {
-    width: 53px;
+    display: flex;
+    width: 133px;
+    > div:first-child {
+      width: 51px;
+    }
+    > div:last-child {
+      width: 82px;
+    }
   }
   > div:nth-child(2) {
-    width: 80px;
+    width: calc(100% - 496px - 221px);
   }
   > div:nth-child(3) {
-    width: 148px;
+    width: calc(100% - 496px - 148px);
   }
   > div:nth-child(4) {
-    width: 221px;
-  }
-  > div:nth-child(5) {
     width: 184px;
+    flex-shrink: 0;
     > span {
       &:after {
         content: '\f0d8';
@@ -68,13 +40,16 @@
       }
     }
   }
-  > div:nth-child(6) {
+  > div:nth-child(5) {
     width: 100px;
+    flex-shrink: 0;
+  }
+  > div:nth-child(6) {
+    width: 147px;
+    flex-shrink: 0;
   }
   > div:nth-child(7) {
-    width: 147px;
-  }
-  > div:nth-child(8) {
     width: 116px;
+    flex-shrink: 0;
   }
 }

packages/strapi-plugin-upload/admin/src/containers/HomePage/actions.js

@@ -13,6 +13,7 @@ import {
   GET_DATA_SUCCESS,
   ON_DROP,
   ON_SEARCH,
+  SET_PARAMS,
 } from './constants';
 
 export function changeParams({ target }) {
@@ -75,3 +76,10 @@ export function onSearch({ target }) {
     value: target.value,
   };
 }
+
+export function setParams(params) {
+  return {
+    type: SET_PARAMS,
+    params,
+  };
+}

packages/strapi-plugin-upload/admin/src/containers/HomePage/constants.js

@@ -12,3 +12,4 @@ export const GET_DATA = 'Upload/HomePage/GET_DATA';
 export const GET_DATA_SUCCESS = 'Upload/HomePage/GET_DATA_SUCCESS';
 export const ON_DROP = 'Upload/HomePage/ON_DROP';
 export const ON_SEARCH = 'Upload/HomePage/ON_SEARCH';
+export const SET_PARAMS = 'Upload/HomePage/SET_PARAMS';

packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js

@@ -10,6 +10,7 @@ import { connect } from 'react-redux';
 // import { createStructuredSelector } from 'reselect';
 import { injectIntl } from 'react-intl';
 import { bindActionCreators, compose } from 'redux';
+import { isEmpty } from 'lodash';
 
 // You can find these components in either
 // ./node_modules/strapi-helper-plugin/lib/src
@@ -26,6 +27,7 @@ import List from 'components/List';
 import PluginInputFile from 'components/PluginInputFile';
 
 // Utils
+import getQueryParameters from 'utils/getQueryParameters';
 import injectReducer from 'utils/injectReducer';
 import injectSaga from 'utils/injectSaga';
 
@@ -36,6 +38,7 @@ import {
   getData,
   onDrop,
   onSearch,
+  setParams,
 } from './actions';
 
 // Selectors
@@ -54,6 +57,15 @@ export class HomePage extends React.Component {
     }
   );
 
+  componentWillMount() {
+    if (!isEmpty(this.props.location.search)) {
+      const page = parseInt(this.getURLParams('page'), 10);
+      const limit = parseInt(this.getURLParams('limit'), 10);
+      const sort = this.getURLParams('sort');
+
+      this.props.setParams({ limit, page, sort });
+    }
+  }
   componentDidMount() {
     this.props.getData();
   }
@@ -62,8 +74,13 @@ export class HomePage extends React.Component {
     if (nextProps.deleteSuccess !== this.props.deleteSuccess) {
       this.props.getData();
     }
+    if (nextProps.location.search !== this.props.location.search) {
+      this.props.getData();
+    }
   }
 
+  getURLParams = (type) => getQueryParameters(this.props.location.search, type);
+
   handleChangeParams = (e) => {
     const { history, params } = this.props;
     const search = e.target.name === 'params.limit' ?
@@ -158,10 +175,12 @@ HomePage.propTypes = {
   entriesNumber: PropTypes.number.isRequired,
   getData: PropTypes.func.isRequired,
   history: PropTypes.object.isRequired,
+  location: PropTypes.object.isRequired,
   onDrop: PropTypes.func.isRequired,
   onSearch: PropTypes.func.isRequired,
   params: PropTypes.object,
   search: PropTypes.string.isRequired,
+  setParams: PropTypes.func.isRequired,
   uploadedFiles: PropTypes.arrayOf(PropTypes.object),
 };
 
@@ -173,6 +192,7 @@ function mapDispatchToProps(dispatch) {
       getData,
       onDrop,
       onSearch,
+      setParams,
     },
     dispatch,
   );

packages/strapi-plugin-upload/admin/src/containers/HomePage/reducer.js

@@ -12,6 +12,7 @@ import {
   DROP_SUCCESS,
   GET_DATA_SUCCESS,
   ON_SEARCH,
+  SET_PARAMS,
 } from './constants';
 
 const initialState = fromJS({
@@ -42,6 +43,8 @@ function homePageReducer(state = initialState, action) {
         .update('entriesNumber', () => action.entriesNumber);
     case ON_SEARCH:
       return state.update('search', () => action.value);
+    case SET_PARAMS:
+      return state.set('params', Map(action.params));
     default:
       return state;
   }

packages/strapi-plugin-upload/admin/src/containers/HomePage/saga.js

@@ -15,7 +15,7 @@ import {
   ON_SEARCH,
 } from './constants';
 import {
-  // makeSelectParams,
+  makeSelectParams,
   makeSelectSearch,
 } from './selectors';
 
@@ -27,25 +27,24 @@ function* dataDelete(action) {
     yield put(deleteSuccess());
     strapi.notification.success('upload.notification.delete.success');
   } catch(err) {
-    console.log(err);
+    strapi.notification.error('notification.error');
   }
 }
 
 function* dataGet() {
   try {
-    // const pageParams = yield select(makeSelectParams());
-    // const skip = ( pageParams.page - 1) * pageParams.limit;
-    // const params = {
-    //   limit: pageParams.limit,
-    //   sort: pageParams.sort,
-    //   skip,
-    // };
-
+    const pageParams = yield select(makeSelectParams());
+    const _start = ( pageParams.page - 1) * pageParams.limit;
+    const params = {
+      _limit: pageParams.limit,
+      _sort: pageParams.sort,
+      _start,
+    };
     const data = yield [
-      call(request, '/upload/files', { method: 'GET', params: {} }),
+      call(request, '/upload/files', { method: 'GET', params }),
       call(request, '/upload/files/count', { method: 'GET' }),
     ];
-    const entries = data[0].length === 0 ? [Map({})] : data[0].map(obj => Map(obj));
+    const entries = data[0].length === 0 ? [] : data[0].map(obj => Map(obj));
     yield put(getDataSuccess(entries, data[1].count));
   } catch(err) {
     strapi.notification.error('notification.error');
@@ -78,7 +77,6 @@ function* search() {
     const search = yield select(makeSelectSearch());
     console.log('will search', search);
   } catch(err) {
-    console.log(err);
     strapi.notification.error('notification.error');
   }
 }

packages/strapi-plugin-upload/config/queries/mongoose.js

@@ -6,7 +6,7 @@ module.exports = {
       .find(params.where)
       .limit(Number(params.limit))
       .sort(params.sort)
-      .skip(Number(params.skip))
+      .skip(Number(params.start))
       .populate(populate || this.associations.map(x => x.alias).join(' '))
       .lean();
   },