You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
158 lines
4.0 KiB
158 lines
4.0 KiB
import _ from 'lodash';
|
|
import PropTypes from 'prop-types';
|
|
import React, { Component } from 'react';
|
|
import FormGroup from 'Components/Form/FormGroup';
|
|
import FormInputHelpText from 'Components/Form/FormInputHelpText';
|
|
import FormLabel from 'Components/Form/FormLabel';
|
|
import { sizes } from 'Helpers/Props';
|
|
import translate from 'Utilities/String/translate';
|
|
import InlineMarkdown from '../../../Components/Markdown/InlineMarkdown';
|
|
import QualityProfileFormatItem from './QualityProfileFormatItem';
|
|
import styles from './QualityProfileFormatItems.css';
|
|
|
|
function calcOrder(profileFormatItems) {
|
|
const items = profileFormatItems.reduce((acc, cur, index) => {
|
|
acc[cur.format] = index;
|
|
return acc;
|
|
}, {});
|
|
|
|
return [...profileFormatItems].sort((a, b) => {
|
|
if (b.score !== a.score) {
|
|
return b.score - a.score;
|
|
}
|
|
return a.name > b.name ? 1 : -1;
|
|
}).map((x) => items[x.format]);
|
|
}
|
|
|
|
class QualityProfileFormatItems extends Component {
|
|
|
|
//
|
|
// Lifecycle
|
|
|
|
constructor(props, context) {
|
|
super(props, context);
|
|
|
|
this.state = {
|
|
order: calcOrder(this.props.profileFormatItems)
|
|
};
|
|
}
|
|
|
|
//
|
|
// Listeners
|
|
|
|
onScoreChange = (formatId, value) => {
|
|
const {
|
|
onQualityProfileFormatItemScoreChange
|
|
} = this.props;
|
|
|
|
onQualityProfileFormatItemScoreChange(formatId, value);
|
|
this.reorderItems();
|
|
};
|
|
|
|
reorderItems = _.debounce(() => this.setState({ order: calcOrder(this.props.profileFormatItems) }), 1000);
|
|
|
|
//
|
|
// Render
|
|
|
|
render() {
|
|
const {
|
|
profileFormatItems,
|
|
errors,
|
|
warnings
|
|
} = this.props;
|
|
|
|
const {
|
|
order
|
|
} = this.state;
|
|
|
|
if (profileFormatItems.length < 1) {
|
|
return (
|
|
<InlineMarkdown className={styles.addCustomFormatMessage} data={translate('WantMoreControlAddACustomFormat')} />
|
|
);
|
|
}
|
|
|
|
return (
|
|
<FormGroup size={sizes.EXTRA_SMALL}>
|
|
<FormLabel size={sizes.SMALL}>
|
|
{translate('CustomFormats')}
|
|
</FormLabel>
|
|
|
|
<div>
|
|
<FormInputHelpText
|
|
text={translate('CustomFormatHelpText')}
|
|
/>
|
|
|
|
{
|
|
errors.map((error, index) => {
|
|
return (
|
|
<FormInputHelpText
|
|
key={index}
|
|
text={error.message}
|
|
isError={true}
|
|
isCheckInput={false}
|
|
/>
|
|
);
|
|
})
|
|
}
|
|
|
|
{
|
|
warnings.map((warning, index) => {
|
|
return (
|
|
<FormInputHelpText
|
|
key={index}
|
|
text={warning.message}
|
|
isWarning={true}
|
|
isCheckInput={false}
|
|
/>
|
|
);
|
|
})
|
|
}
|
|
|
|
<div className={styles.formats}>
|
|
<div className={styles.headerContainer}>
|
|
<div className={styles.headerTitle}>
|
|
{translate('CustomFormat')}
|
|
</div>
|
|
<div className={styles.headerScore}>
|
|
{translate('Score')}
|
|
</div>
|
|
</div>
|
|
{
|
|
order.map((index) => {
|
|
const {
|
|
format,
|
|
name,
|
|
score
|
|
} = profileFormatItems[index];
|
|
return (
|
|
<QualityProfileFormatItem
|
|
key={format}
|
|
formatId={format}
|
|
name={name}
|
|
score={score}
|
|
onScoreChange={this.onScoreChange}
|
|
/>
|
|
);
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
</FormGroup>
|
|
);
|
|
}
|
|
}
|
|
|
|
QualityProfileFormatItems.propTypes = {
|
|
profileFormatItems: PropTypes.arrayOf(PropTypes.object).isRequired,
|
|
errors: PropTypes.arrayOf(PropTypes.object),
|
|
warnings: PropTypes.arrayOf(PropTypes.object),
|
|
onQualityProfileFormatItemScoreChange: PropTypes.func
|
|
};
|
|
|
|
QualityProfileFormatItems.defaultProps = {
|
|
errors: [],
|
|
warnings: []
|
|
};
|
|
|
|
export default QualityProfileFormatItems;
|