yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-10-24 14:29:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add sorting options and created extensions.json files

Browse Source 
The extensions.json file is used to associate the correct icon with the extension of a file
This commit is contained in:
cyril lopez 2018-02-23 14:57:15 +01:00
parent c621209605
commit c3231b9f5e
15 changed files with 150 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/strapi-plugin-upload/admin/src/components/FileIcon/extensions.json Normal file
View File

@ -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"]
}

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

@ -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) {
case 'jpg':
case 'jpeg':
case 'png':
case 'gif':
return 'image';
case 'mov':
case 'avi':
case 'mpg':
case 'm4v':
case 'mp4':
return 'video';
switch (true) {
case ext.archive.includes(fileType):
return 'file-archive-o';
case ext.code.includes(fileType):
return 'file-code-o';
case ext.img.includes(fileType):
return 'file-image-o';
case ext.pdf.includes(fileType):
return 'file-pdf-o';
case ext.powerpoint.includes(fileType):
return 'file-powerpoint-o';
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 === 'zip' && styles.zip,
iconType === 'image' && styles.image,
iconType === 'video' && styles.video,
iconType === 'file-pdf-o' && styles.pdf,
iconType === 'file-zip-o' && styles.zip,
iconType === 'file-image-o' && styles.image,
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>
);
}

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

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

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

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

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

@ -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;

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

@ -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;
}
}

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

@ -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;

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

@ -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';
}
}
}

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

@ -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 = {

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

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

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

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

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

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

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

@ -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",

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

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

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

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