diff --git a/addons/core/addon/helpers/truncate-list.js b/addons/core/addon/helpers/truncate-list.js new file mode 100644 index 000000000..4bd05c037 --- /dev/null +++ b/addons/core/addon/helpers/truncate-list.js @@ -0,0 +1,42 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +/** + * Use this helper to truncate the list if there are more items than the limit specified + * + * @example + * + * {{truncate-list array limit}} + */ + +import Helper from '@ember/component/helper'; +import { inject as service } from '@ember/service'; + +export default class extends Helper { + // =services + @service intl; + + // =compute method + + /** + * This helper truncates the list if there are more items than the limit specified + * and returns the original list appended with +N remaining items + * @param {array} list List of items + * @return string + */ + + compute([translation, list, limit = 3]) { + if (list) { + const numberOfItems = Object.keys(list).length; + const items = list.map(({ value }) => value); + if (numberOfItems > limit) { + const remainingItems = items.splice(limit).length; + return items.join(', ') + this.intl.t(translation, { remainingItems }); + } else { + return items.join(', '); + } + } + } +} diff --git a/addons/core/app/helpers/truncate-list.js b/addons/core/app/helpers/truncate-list.js new file mode 100644 index 000000000..5f20142b6 --- /dev/null +++ b/addons/core/app/helpers/truncate-list.js @@ -0,0 +1,6 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +export { default } from 'core/helpers/truncate-list'; diff --git a/addons/core/tests/dummy/app/controllers/index.js b/addons/core/tests/dummy/app/controllers/index.js index c7c7df131..5f1418fff 100644 --- a/addons/core/tests/dummy/app/controllers/index.js +++ b/addons/core/tests/dummy/app/controllers/index.js @@ -14,4 +14,29 @@ export default class IndexController extends Controller { // =properties now = new Date(); + + list = [ + { key: 1, value: 'boundary' }, + { key: 2, value: 'consul' }, + { key: 3, value: 'vault' }, + { key: 4, value: 'hcp' }, + { key: 5, value: 'packer' }, + ]; + + listTwo = [ + { key: 1, value: 'boundary' }, + { key: 2, value: 'consul' }, + ]; + + listThree = [{ key: 1, value: 'boundary' }]; + + listFour = [ + { key: 1, value: 'boundary' }, + { key: 2, value: 'consul' }, + { key: 3, value: 'vault' }, + { key: 4, value: 'hcp' }, + { key: 5, value: 'packer' }, + { key: 6, value: 'new' }, + { key: 7, value: 'newA' }, + ]; } diff --git a/addons/core/tests/dummy/app/templates/index.hbs b/addons/core/tests/dummy/app/templates/index.hbs index 1121c9cb5..08abd9aa0 100644 --- a/addons/core/tests/dummy/app/templates/index.hbs +++ b/addons/core/tests/dummy/app/templates/index.hbs @@ -4,4 +4,11 @@ }}
{{relative-datetime-live this.now}}
\ No newline at end of file +{{relative-datetime-live this.now}}
+ +