More utility components
One for a "map" of sorts and one for selecting one element of a list
This commit is contained in:
parent
07614e9a6d
commit
f0638af99f
5 changed files with 127 additions and 0 deletions
27
frontend-reactive/app/components/util/map-edit.hbs
Normal file
27
frontend-reactive/app/components/util/map-edit.hbs
Normal file
|
@ -0,0 +1,27 @@
|
|||
<div class="{{@wrapper-classes}}">
|
||||
<ul>
|
||||
{{#each this.args.list as |element index|}}
|
||||
<li>
|
||||
<div class="string-array-element-wrapper">
|
||||
<Input @type="text" @value={{element.key}} />
|
||||
<Input @type="text" @value={{element.value}} />
|
||||
<div
|
||||
class="{{@remove-element-classes}}"
|
||||
type="button"
|
||||
{{on "click" (fn this.removeElement index)}}
|
||||
>
|
||||
X
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
|
||||
</ul>
|
||||
<div
|
||||
class="{{@add-element-classes}}"
|
||||
type="button"
|
||||
{{on "click" this.addElement}}
|
||||
>
|
||||
Add element
|
||||
</div>
|
||||
</div>
|
36
frontend-reactive/app/components/util/map-edit.ts
Normal file
36
frontend-reactive/app/components/util/map-edit.ts
Normal file
|
@ -0,0 +1,36 @@
|
|||
import MutableArray from '@ember/array/mutable';
|
||||
import { action } from '@ember/object';
|
||||
import Component from '@glimmer/component';
|
||||
|
||||
export interface UtilMapEditSignature {
|
||||
// The arguments accepted by the component
|
||||
Args: {
|
||||
list: MutableArray<{ key: string; value: string }>;
|
||||
prefix: string;
|
||||
onNewElement: (index: number) => void;
|
||||
onDeleteElement: (index: number) => void;
|
||||
};
|
||||
// Any blocks yielded by the component
|
||||
Blocks: {
|
||||
default: [];
|
||||
};
|
||||
// The element to which `...attributes` is applied in the component template
|
||||
Element: null;
|
||||
}
|
||||
|
||||
export default class UtilMapEdit extends Component<UtilMapEditSignature> {
|
||||
@action addElement() {
|
||||
MutableArray.apply(this.args.list);
|
||||
this.args.list.pushObject({ key: '', value: '' });
|
||||
if (this.args.onNewElement)
|
||||
this.args.onNewElement(this.args.list.length - 1);
|
||||
}
|
||||
|
||||
@action removeElement(index: number) {
|
||||
MutableArray.apply(this.args.list);
|
||||
//let index = this.args.list.find((elem) => elem == content)
|
||||
//let index = this.listCopy.findIndex((d) => d == content)
|
||||
this.args.list.removeAt(index);
|
||||
if (this.args.onDeleteElement) this.args.onDeleteElement(index);
|
||||
}
|
||||
}
|
12
frontend-reactive/app/components/util/one-of-array.hbs
Normal file
12
frontend-reactive/app/components/util/one-of-array.hbs
Normal file
|
@ -0,0 +1,12 @@
|
|||
<div class="{{@wrapper-class}}">
|
||||
{{#each @elements as |element|}}
|
||||
<RadioButton
|
||||
@value="{{element}}"
|
||||
@groupValue={{@selected}}
|
||||
@name={{@name}}
|
||||
@required={{@required}}
|
||||
>
|
||||
{{element}}
|
||||
</RadioButton>
|
||||
{{/each}}
|
||||
</div>
|
|
@ -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/map-edit', 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::MapEdit />`);
|
||||
|
||||
assert.dom().hasText('');
|
||||
|
||||
// Template block usage:
|
||||
await render(hbs`
|
||||
<Util::MapEdit>
|
||||
template block text
|
||||
</Util::MapEdit>
|
||||
`);
|
||||
|
||||
assert.dom().hasText('template block text');
|
||||
});
|
||||
});
|
|
@ -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/one-of-array', 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::OneOfArray />`);
|
||||
|
||||
assert.dom().hasText('');
|
||||
|
||||
// Template block usage:
|
||||
await render(hbs`
|
||||
<Util::OneOfArray>
|
||||
template block text
|
||||
</Util::OneOfArray>
|
||||
`);
|
||||
|
||||
assert.dom().hasText('template block text');
|
||||
});
|
||||
});
|
Loading…
Reference in a new issue