Add checkbox based multiselect util component
Takes an array of objects (name, checked, description) and turns it into a list of checkboxes, one for each element
This commit is contained in:
parent
e802027236
commit
07614e9a6d
3 changed files with 60 additions and 0 deletions
13
frontend-reactive/app/components/util/multiselect.hbs
Normal file
13
frontend-reactive/app/components/util/multiselect.hbs
Normal file
|
@ -0,0 +1,13 @@
|
|||
<div class={{@wrapper-class}}>
|
||||
{{#each this.args.elements as |element|}}
|
||||
<label class={{@label-class}}>
|
||||
{{element.description}}
|
||||
<Input
|
||||
@type="checkbox"
|
||||
name="{{element.name}}"
|
||||
@checked={{element.checked}}
|
||||
{{on "change" this.onChange}}
|
||||
/>
|
||||
</label>
|
||||
{{/each}}
|
||||
</div>
|
21
frontend-reactive/app/components/util/multiselect.ts
Normal file
21
frontend-reactive/app/components/util/multiselect.ts
Normal file
|
@ -0,0 +1,21 @@
|
|||
import { action } from '@ember/object'
|
||||
import Component from '@glimmer/component'
|
||||
|
||||
export interface UtilMultiselectSignature {
|
||||
// The arguments accepted by the component
|
||||
Args: {
|
||||
elements: Array<{ name: string; checked: boolean; description: string }>
|
||||
}
|
||||
// Any blocks yielded by the component
|
||||
Blocks: {
|
||||
default: []
|
||||
}
|
||||
// The element to which `...attributes` is applied in the component template
|
||||
Element: null
|
||||
}
|
||||
|
||||
export default class UtilMultiselect extends Component<UtilMultiselectSignature> {
|
||||
@action onChange() {
|
||||
console.log(this.args.elements)
|
||||
}
|
||||
}
|
|
@ -0,0 +1,26 @@
|
|||
import { module, test } from 'qunit';
|
||||
import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
|
||||
import { render } from '@ember/test-helpers';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
|
||||
module('Integration | Component | util/multiselect', function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test('it renders', async function (assert) {
|
||||
// Set any properties with this.set('myProperty', 'value');
|
||||
// Handle any actions with this.set('myAction', function(val) { ... });
|
||||
|
||||
await render(hbs`<Util::Multiselect />`);
|
||||
|
||||
assert.dom().hasText('');
|
||||
|
||||
// Template block usage:
|
||||
await render(hbs`
|
||||
<Util::Multiselect>
|
||||
template block text
|
||||
</Util::Multiselect>
|
||||
`);
|
||||
|
||||
assert.dom().hasText('template block text');
|
||||
});
|
||||
});
|
Loading…
Reference in a new issue