Skip to content
Snippets Groups Projects

Show list of stream audit event types in UI

Merged Lorenz van Herwaarden requested to merge render-audit-events-backend into master
29 files
+ 383
231
Compare changes
  • Side-by-side
  • Inline
Files
29
import { n__ } from '~/locale';
/**
* Accepts an array of options and an array of selected option IDs.
* Accepts an array of options and an array of selected option IDs
* and optionally a placeholder and maximum number of options to show.
*
* Returns a string with the text of the selected options:
* - If no options are selected, returns an empty string.
* - If one option is selected, returns the text of that option.
* - If more than one option is selected, returns the text of the first option
* - If no options are selected, returns the placeholder or an empty string.
* - If less than maxOptionsShown is selected, returns the text of those options comma-separated.
* - If more than maxOptionsShown is selected, returns the text of those options comma-separated
* followed by the text "+X more", where X is the number of additional selected options
*
* @param {Array<{ id: number | string, value: string }>} options
* @param {Array<{ id: number | string }>} selected
* @param {Object} opts
* @param {Array<{ id: number | string, value: string }>} opts.options
* @param {Array<{ id: number | string }>} opts.selected
* @param {String} opts.placeholder - Placeholder when no option is selected
* @param {Integer} opts.maxOptionsShown – Max number of options to show
* @returns {String}
*/
export const getSelectedOptionsText = (options, selected, placeholder = '') => {
export const getSelectedOptionsText = ({
options,
selected,
placeholder = '',
maxOptionsShown = 1,
}) => {
const selectedOptions = options.filter(({ id, value }) => selected.includes(id || value));
if (selectedOptions.length === 0) {
return placeholder;
}
const [firstSelectedOption] = selectedOptions;
const { text: firstSelectedOptionText } = firstSelectedOption;
const optionTexts = selectedOptions.map((option) => option.text);
if (selectedOptions.length < 2) {
return firstSelectedOptionText;
if (selectedOptions.length <= maxOptionsShown) {
return optionTexts.join(', ');
}
// Prevent showing "+-1 more" when the array is empty.
const additionalItemsCount = selectedOptions.length - 1;
return `${firstSelectedOptionText} ${n__('+%d more', '+%d more', additionalItemsCount)}`;
const additionalItemsCount = selectedOptions.length - maxOptionsShown;
return `${optionTexts.slice(0, maxOptionsShown).join(', ')} ${n__(
'+%d more',
'+%d more',
additionalItemsCount,
)}`;
};
Loading