scottk/vault
1
0
Fork 0
mirror of https://github.com/optim-enterprises-bv/vault.git synced 2025-10-30 02:02:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Glimmerize ListView Component for future PKI work (#16940)

Browse Source 
* first try

* 🤦🏻‍♀️

* fix

* double check on nulls for defaul

* meep
This commit is contained in:
Angel Garbarino
2022-08-30 13:13:33 -07:00
committed by GitHub
parent f0c318e4e7
commit 9c586b6a31
2 changed files with 24 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ui/lib/core/addon/templates/components/list-view.hbs → ui/lib/core/addon/components/list-view.hbs
View File

@@ -1,14 +1,14 @@
{{#if (or (and this.items.meta this.items.meta.total) this.items.length)}}
{{#if (or (and @items.meta @items.meta.total) @items.length)}}
<div class="box is-fullwidth is-bottomless is-sideless is-paddingless" data-test-list-view-list>
{{#each this.items as |item|}}
{{#each @items as |item|}}
{{yield (hash item=item)}}
{{else}}
{{yield}}
{{/each}}
{{#if this.showPagination}}
<ListPagination
@page={{this.items.meta.currentPage}}
@lastPage={{this.items.meta.lastPage}}
@page={{@items.meta.currentPage}}
@lastPage={{@items.meta.lastPage}}
@link={{@paginationRouteName}}
data-test-list-view-pagination
/>

42
ui/lib/core/addon/components/list-view.js
View File

@@ -1,7 +1,5 @@
import Component from '@ember/component';
import { computed } from '@ember/object';
import Component from '@glimmer/component';
import { pluralize } from 'ember-inflector';
import layout from '../templates/components/list-view';
/**
* @module ListView
@@ -20,10 +18,11 @@ import layout from '../templates/components/list-view';
* </ListView>
* ```
*
* @param items=null {Array} - An array of items to render as a list
* @param [itemNoun=null {String}] - A noun to use in the empty state of message and title.
* @param [message=null {String}] - The message to display within the banner.
* @yields Object with `item` that is the current item in the loop.
* @param {array} [items=null] - An Ember array of items (objects) to render as a list. Because it's an Ember array it has properties like length an meta on it.
* @param {string} [itemNoun=item] - A noun to use in the empty state of message and title.
* @param {string} [message=null] - The message to display within the banner.
* @param {string} [paginationRouteName=''] - The link used in the ListPagination component.
* @yields {object} Yields the current item in the loop.
* @yields If there are no objects in items, then `empty` will be yielded - this is an instance of
* the EmptyState component.
* @yields If `item` or `empty` isn't present on the object, the component can still yield a block - this is
@@ -31,24 +30,23 @@ import layout from '../templates/components/list-view';
* empty set.
*
*/
export default Component.extend({
layout,
tagName: '',
items: null,
itemNoun: 'item',
paginationRouteName: '',
showPagination: computed('items.met.{lastPage,total}', 'items.meta', 'paginationRouteName', function () {
let meta = this.items.meta;
return this.paginationRouteName && meta && meta.lastPage > 1 && meta.total > 0;
}),
export default class ListView extends Component {
get itemNoun() {
return this.args.itemNoun || 'item';
}
emptyTitle: computed('itemNoun', function () {
get showPagination() {
let meta = this.args.items.meta;
return this.args.paginationRouteName && meta && meta.lastPage > 1 && meta.total > 0;
}
get emptyTitle() {
let items = pluralize(this.itemNoun);
return `No ${items} yet`;
}),
}
emptyMessage: computed('itemNoun', function () {
get emptyMessage() {
let items = pluralize(this.itemNoun);
return `Your ${items} will be listed here. Add your first ${this.itemNoun} to get started.`;
}),
});
}
}