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