2017-11-06 17:03:20 +01:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
* List
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { FormattedMessage } from 'react-intl';
|
2018-01-26 17:31:52 +01:00
|
|
|
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';
|
2017-11-06 17:03:20 +01:00
|
|
|
|
|
|
|
// Design
|
|
|
|
import Button from 'components/Button';
|
2017-11-06 18:15:53 +01:00
|
|
|
import ListRow from 'components/ListRow';
|
2017-11-06 17:03:20 +01:00
|
|
|
|
|
|
|
import styles from './styles.scss';
|
|
|
|
|
|
|
|
const generateListTitle = (data, settingType) => {
|
|
|
|
switch (settingType) {
|
2017-11-08 16:06:21 +01:00
|
|
|
case 'roles': {
|
2017-11-06 17:03:20 +01:00
|
|
|
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
|
|
|
|
2017-11-06 17:03:20 +01:00
|
|
|
return title;
|
2017-11-08 16:06:21 +01:00
|
|
|
}
|
|
|
|
case 'providers': {
|
2017-11-06 17:03:20 +01:00
|
|
|
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 }} />;
|
2017-11-06 17:03:20 +01:00
|
|
|
|
|
|
|
return <div>{enabledProviders} {disabledProviders}</div>;
|
|
|
|
|
2017-11-08 16:06:21 +01:00
|
|
|
}
|
|
|
|
case 'email-templates': {
|
2017-11-06 17:03:20 +01:00
|
|
|
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
|
|
|
}
|
2017-11-06 17:03:20 +01:00
|
|
|
default:
|
|
|
|
return '';
|
|
|
|
}
|
2017-11-08 16:06:21 +01:00
|
|
|
};
|
2017-11-06 17:03:20 +01:00
|
|
|
|
2018-06-14 12:33:57 +02:00
|
|
|
function List({ data, deleteData, noButton, onButtonClick, settingType, showLoaders, values }) {
|
2018-01-26 17:31:52 +01:00
|
|
|
const object = omitBy(data, (v) => v.name === 'server'); // Remove the server key when displaying providers
|
|
|
|
|
2017-11-06 17:03:20 +01:00
|
|
|
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)}
|
2017-11-06 17:03:20 +01:00
|
|
|
</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>
|
|
|
|
)}
|
2017-11-06 17:03:20 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
List.defaultProps = {
|
|
|
|
noButton: false,
|
|
|
|
onButtonClick: () => {},
|
2018-06-14 12:33:57 +02:00
|
|
|
showLoaders: true,
|
2017-11-06 17:03:20 +01:00
|
|
|
};
|
|
|
|
|
2017-11-08 16:06:21 +01:00
|
|
|
List.propTypes = {
|
|
|
|
data: PropTypes.array.isRequired,
|
2017-11-07 14:32:31 +01:00
|
|
|
deleteData: PropTypes.func.isRequired,
|
2017-11-06 17:03:20 +01:00
|
|
|
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,
|
2017-11-06 17:03:20 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
export default List;
|