Add sorting options and created extensions.json files

The extensions.json file is used to associate the correct icon with the extension of a file

packages/strapi-plugin-upload/admin/src/components/FileIcon/extensions.json

@@ -0,0 +1,9 @@
+{
+  "archive":  ["rar", "zip"],
+  "code": ["js", "json", "rb", "erb", "txt", "css", "scss", "html", "jsx"],
+  "img": ["jpg", "jpeg", "png", "gif"],
+  "pdf": ["pdf"],
+  "powerpoint": ["ppt", "key", "xls"],
+  "video": ["mov", "avi", "mpg", "mp4", "m4v"],
+  "word": ["doc", "pages"]
+}

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

@@ -8,24 +8,29 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 
+import ext from './extensions.json';
+
 import styles from './styles.scss';
 
 function FileIcon({ fileType }) {
   const iconType = (() => {
-    switch (fileType) {
+    switch (true) {
-      case 'jpg':
+      case ext.archive.includes(fileType):
-      case 'jpeg':
+        return 'file-archive-o';
-      case 'png':
+      case ext.code.includes(fileType):
-      case 'gif':
+        return 'file-code-o';
-        return 'image';
+      case ext.img.includes(fileType):
-      case 'mov':
+        return 'file-image-o';
-      case 'avi':
+      case ext.pdf.includes(fileType):
-      case 'mpg':
+        return 'file-pdf-o';
-      case 'm4v':
+      case ext.powerpoint.includes(fileType):
-      case 'mp4':
+        return 'file-powerpoint-o';
-        return 'video';
+      case ext.video.includes(fileType):
+        return 'file-video-o';
+      case ext.word.includes(fileType):
+        return 'file-word-o';
       default:
-        return fileType;
+        return 'file';
     }
   })();
 
@@ -33,13 +38,14 @@ function FileIcon({ fileType }) {
     <div
       className={(cn(
         styles.fileIconContainer,
-        iconType === 'pdf' && styles.pdf,
+        iconType === 'file-pdf-o' && styles.pdf,
-        iconType === 'zip' && styles.zip,
+        iconType === 'file-zip-o' && styles.zip,
-        iconType === 'image' && styles.image,
+        iconType === 'file-image-o' && styles.image,
-        iconType === 'video' && styles.video,
+        iconType === 'file-video-o' && styles.video,
+        iconType === 'file-code-o' && styles.code,
       ))}
     >
-      <i className={`fa fa-file-${iconType}-o`} />
+      <i className={`fa fa-${iconType}`} />
     </div>
   );
 }

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

@@ -17,3 +17,7 @@
 .zip {
   color: #A16B26;
 }
+
+.code {
+  color: #BDBFC2;
+}

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

@@ -1,4 +1,4 @@
-  .liWrapper {
+.liWrapper {
   height: 54px;
   background-color: #fff;
   padding-top: 5px;

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

@@ -6,6 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 import cn from 'classnames';
 
 import Li from 'components/Li';
@@ -13,28 +14,41 @@ import ListHeader from 'components/ListHeader';
 
 import styles from './styles.scss';
 
+const EmptyLi = () => (
+  <li className={styles.emptyLiWrapper}>
+    <div>
+      <FormattedMessage id="upload.EmptyLi.message" />
+    </div>
+  </li>
+);
+
 function List(props) {
   return (
     <div className={cn('container-fluid', styles.listWrapper)}>
       <div className="row">
         <ul className={styles.ulList}>
-          <ListHeader />
+          <ListHeader changeSort={props.changeSort} sort={props.sort} />
           {props.data.map((item, key) => (
             <Li
               key={item.hash || key}
               item={item}
             />
           ))}
+          {props.data.length === 0 && <EmptyLi />}
         </ul>
       </div>
     </div>
   );
 }
 
-List.defaultProps = {};
+List.defaultProps = {
+  sort: 'id',
+};
 
 List.propTypes = {
+  changeSort: PropTypes.func.isRequired,
   data: PropTypes.arrayOf(PropTypes.object).isRequired,
+  sort: PropTypes.string,
 };
 
 export default List;

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

@@ -22,3 +22,20 @@
     }
   }
 }
+
+.emptyLiWrapper {
+  height: 54px;
+  background-color: #fff;
+  padding-top: 5px;
+  cursor: pointer;
+  > div {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    padding-top: 1px;
+    text-align: center;
+    font-size: 12px;
+    line-height: 54px;
+    text-transform: uppercase;
+  }
+}

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

@@ -7,15 +7,14 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import cn from 'classnames';
+import PropTypes from 'prop-types';
 
 // import InputCheckBox from 'components/InputCheckbox';
 
 import styles from './styles.scss';
 
-function ListHeader() {
+function ListHeader({ changeSort, sort }) {
   const titles = [
-    // '',
-    // 'type',
     'hash',
     'name',
     'updated',
@@ -23,20 +22,37 @@ function ListHeader() {
     'related',
     '',
   ];
+
+  const handleChangeSort = (name) => {
+    if (sort === name) {
+      changeSort(`-${name}`);
+    } else if (sort === `-${name}`) {
+      changeSort('hash');
+    } else if (name === 'updated' || name === 'related') {
+      changeSort('hash');
+    } else {
+      changeSort(name);
+    }
+  };
+
+  const shouldDisplaySort = (title) => sort === title && styles.icon || sort === `-${title}` && styles.iconDesc || '';
+
   return (
     <li className={styles.listheaderWrapper}>
       <div className={cn(styles.listHeader)}>
         <div>
           <div />
-          <div>
+          <div className={shouldDisplaySort('type')} onClick={() => handleChangeSort('type')}>
             <FormattedMessage id="upload.ListHeader.type" />
+            <span />
           </div>
         </div>
         {titles.map((title, key) => {
           if (title !== '') {
             return (
-              <div key={key}>
+              <div key={key} className={shouldDisplaySort(title)} onClick={() => handleChangeSort(title)}>
                 <FormattedMessage id={`upload.ListHeader.${title}`} />
+                <span />
               </div>
             );
           }
@@ -48,4 +64,13 @@ function ListHeader() {
   );
 }
 
+ListHeader.defaultProps = {
+  changeSort: () => {},
+};
+
+ListHeader.propTypes = {
+  changeSort: PropTypes.func,
+  sort: PropTypes.string.isRequired,
+};
+
 export default ListHeader;

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

@@ -32,13 +32,6 @@
   > div:nth-child(4) {
     width: 184px;
     flex-shrink: 0;
-    > span {
-      &:after {
-        content: '\f0d8';
-        margin-left: 10px;
-        font-family: 'FontAwesome';
-      }
-    }
   }
   > div:nth-child(5) {
     width: 100px;
@@ -53,3 +46,23 @@
     flex-shrink: 0;
   }
 }
+
+.icon {
+  > span:last-child {
+    &:after {
+      content: '\f0d8';
+      margin-left: 10px;
+      font-family: 'FontAwesome';
+    }
+  }
+}
+
+.iconDesc {
+  > span:last-child {
+    &:after {
+      content: '\f0d7';
+      margin-left: 10px;
+      font-family: 'FontAwesome';
+    }
+  }
+}

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

@@ -81,6 +81,21 @@ export class HomePage extends React.Component {
 
   getURLParams = (type) => getQueryParameters(this.props.location.search, type);
 
+  changeSort = (name) => {
+    const { params: { limit, page } } = this.props;
+    const target = {
+      name: 'params.sort',
+      value: name,
+    };
+    const search = `page=${page}&limit=${limit}&sort=${name}`;
+
+    this.props.changeParams({ target });
+    this.props.history.push({
+      pathname: this.props.history.pathname,
+      search,
+    });
+  }
+
   handleChangeParams = (e) => {
     const { history, params } = this.props;
     const search = e.target.name === 'params.limit' ?
@@ -138,6 +153,8 @@ export class HomePage extends React.Component {
         </div>
         <List
           data={this.props.uploadedFiles}
+          changeSort={this.changeSort}
+          sort={this.props.params.sort}
         />
         <div className="col-md-12">
           <PageFooter
@@ -165,7 +182,7 @@ HomePage.defaultProps = {
     page: 1,
     sort: 'updatedAt',
   },
-  uploadedFiles: [{}],
+  uploadedFiles: [],
 };
 
 HomePage.propTypes = {

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

@@ -20,7 +20,7 @@ const initialState = fromJS({
   dataToDelete: '',
   entriesNumber: 0,
   search: '',
-  uploadedFiles: List([Map({})]),
+  uploadedFiles: List([]),
   params: Map({
     sort: 'hash',
     limit: 10,

packages/strapi-plugin-upload/admin/src/translations/de.json

@@ -1,4 +1,6 @@
 {
+  "EmptyLi.message": "There is no uploaded files",
+  
   "EntriesNumber.number": "{number} file found",
   "EntriesNumber.number.plural": "{number} files found",
 

packages/strapi-plugin-upload/admin/src/translations/en.json

@@ -1,4 +1,6 @@
 {
+  "EmptyLi.message": "There is no uploaded files",
+
   "EntriesNumber.number": "{number} file found",
   "EntriesNumber.number.plural": "{number} files found",
 

packages/strapi-plugin-upload/admin/src/translations/fr.json

@@ -1,4 +1,6 @@
 {
+  "EmptyLi.message": "Aucun fichier n'a été téléchargé",
+
   "EntriesNumber.number": "{number} fichier trouvé",
   "EntriesNumber.number.plural": "{number} fichiers trouvés",
 

packages/strapi-plugin-upload/admin/src/translations/pl.json

@@ -1,4 +1,6 @@
 {
+  "EmptyLi.message": "There is no uploaded files",
+  
   "EntriesNumber.number": "{number} file found",
   "EntriesNumber.number.plural": "{number} files found",
 

packages/strapi-plugin-upload/admin/src/translations/tr.json

@@ -1,4 +1,6 @@
 {
+  "EmptyLi.message": "There is no uploaded files",
+  
   "EntriesNumber.number": "{number} file found",
   "EntriesNumber.number.plural": "{number} files found",