scottk/vault
1
0
Fork 0
mirror of https://github.com/optim-enterprises-bv/vault.git synced 2025-11-01 11:08:10 +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> <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)}} {{yield (hash item=item)}}
{{else}} {{else}}
{{yield}} {{yield}}
{{/each}} {{/each}}
{{#if this.showPagination}} {{#if this.showPagination}}
<ListPagination <ListPagination
@page={{this.items.meta.currentPage}} @page={{@items.meta.currentPage}}
@lastPage={{this.items.meta.lastPage}} @lastPage={{@items.meta.lastPage}}
@link={{@paginationRouteName}} @link={{@paginationRouteName}}
data-test-list-view-pagination 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 Component from '@glimmer/component';
import { computed } from '@ember/object';
import { pluralize } from 'ember-inflector'; import { pluralize } from 'ember-inflector';
import layout from '../templates/components/list-view';
/** /**
* @module ListView * @module ListView
@@ -20,10 +18,11 @@ import layout from '../templates/components/list-view';
* </ListView> * </ListView>
* ``` * ```
* *
* @param items=null {Array} - An array of items to render as a list * @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 [itemNoun=null {String}] - A noun to use in the empty state of message and title. * @param {string} [itemNoun=item] - A noun to use in the empty state of message and title.
* @param [message=null {String}] - The message to display within the banner. * @param {string} [message=null] - The message to display within the banner.
* @yields Object with `item` that is the current item in the loop. * @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 * @yields If there are no objects in items, then `empty` will be yielded - this is an instance of
* the EmptyState component. * the EmptyState component.
* @yields If `item` or `empty` isn't present on the object, the component can still yield a block - this is * @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. * empty set.
* *
*/ */
export default Component.extend({ export default class ListView extends Component {
layout, get itemNoun() {
tagName: '', return this.args.itemNoun || 'item';
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;
}),
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); let items = pluralize(this.itemNoun);
return `No ${items} yet`; return `No ${items} yet`;
}), }
emptyMessage: computed('itemNoun', function () { get emptyMessage() {
let items = pluralize(this.itemNoun); let items = pluralize(this.itemNoun);
return `Your ${items} will be listed here. Add your first ${this.itemNoun} to get started.`; return `Your ${items} will be listed here. Add your first ${this.itemNoun} to get started.`;
}), }
}); }