111 lines
3.7 KiB
JavaScript
Raw Normal View History

/**
*
* List
*
*/
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { map, omitBy, size } from 'lodash';
2018-06-14 12:33:57 +02:00
import cn from 'classnames';
// Components from strapi-helper-plugin
import LoadingBar from 'components/LoadingBar';
import LoadingIndicator from 'components/LoadingIndicator';
// Design
import Button from 'components/Button';
2017-11-06 18:15:53 +01:00
import ListRow from 'components/ListRow';
import styles from './styles.scss';
const generateListTitle = (data, settingType) => {
switch (settingType) {
2017-11-08 16:06:21 +01:00
case 'roles': {
const title = size(data) < 2 ?
<FormattedMessage id="users-permissions.List.title.roles.singular" values={{ number: size(data) }} />
: <FormattedMessage id="users-permissions.List.title.roles.plural" values={{ number: size(data) }} />;
2017-11-08 16:06:21 +01:00
return title;
2017-11-08 16:06:21 +01:00
}
case 'providers': {
const enabledProvidersSize = data.filter(o => o.enabled).length;
const enabledProviders = enabledProvidersSize > 1 ?
<FormattedMessage id="users-permissions.List.title.providers.enabled.plural" values={{ number: enabledProvidersSize }} />
: <FormattedMessage id="users-permissions.List.title.providers.enabled.singular" values={{ number: enabledProvidersSize }} />;
const disabledProviders = size(data) - enabledProvidersSize > 1 ?
<FormattedMessage id="users-permissions.List.title.providers.disabled.plural" values={{ number: size(data) - enabledProvidersSize }} />
2018-10-04 15:16:41 -05:00
: <FormattedMessage id="users-permissions.List.title.providers.disabled.singular" values={{ number: size(data) - enabledProvidersSize }} />;
return <div>{enabledProviders}&nbsp;{disabledProviders}</div>;
2017-11-08 16:06:21 +01:00
}
case 'email-templates': {
return size(data) > 1 ?
<FormattedMessage id="users-permissions.List.title.emailTemplates.plural" values={{ number: size(data) }} />
: <FormattedMessage id="users-permissions.List.title.emailTemplates.singular" values={{ number: size(data) }} />;
2017-11-08 16:06:21 +01:00
}
default:
return '';
}
2017-11-08 16:06:21 +01:00
};
2018-06-14 12:33:57 +02:00
function List({ data, deleteData, noButton, onButtonClick, settingType, showLoaders, values }) {
const object = omitBy(data, (v) => v.name === 'server'); // Remove the server key when displaying providers
return (
<div className={styles.list}>
<div className={styles.flex}>
<div className={styles.titleContainer}>
2018-06-14 12:33:57 +02:00
{showLoaders ? <LoadingBar style={{ marginTop: '0' }} /> : generateListTitle(data, settingType)}
</div>
<div className={styles.buttonContainer}>
{noButton ? (
''
) : (
<Button onClick={onButtonClick} secondaryHotlineAdd>
<FormattedMessage id={`users-permissions.List.button.${settingType}`} />
</Button>
)}
</div>
</div>
2018-06-18 12:19:22 +02:00
<div className={cn(styles.ulContainer, showLoaders && styles.loadingContainer, showLoaders && settingType === 'roles' && styles.loadingContainerRole )}>
2018-06-14 12:33:57 +02:00
{showLoaders ? <LoadingIndicator /> : (
<ul className={noButton ? styles.listPadded : ''}>
{map(object, item => (
<ListRow
deleteData={deleteData}
item={item}
key={item.name}
settingType={settingType}
values={values}
/>
))}
</ul>
)}
</div>
</div>
);
}
List.defaultProps = {
noButton: false,
onButtonClick: () => {},
2018-06-14 12:33:57 +02:00
showLoaders: true,
};
2017-11-08 16:06:21 +01:00
List.propTypes = {
data: PropTypes.array.isRequired,
deleteData: PropTypes.func.isRequired,
noButton: PropTypes.bool,
onButtonClick: PropTypes.func,
2017-11-08 16:06:21 +01:00
settingType: PropTypes.string.isRequired,
2018-06-14 12:33:57 +02:00
showLoaders: PropTypes.bool,
2018-01-22 11:00:41 +01:00
values: PropTypes.object.isRequired,
};
export default List;