luxolus/open-consul
2
0
Fork 0
Code Issues 1 Pull requests Packages Releases Wiki Activity

ui: Adds uid to tabular-details for/id's used in toggling for uniqueness (#5584)

Browse source
This commit is contained in:
John Cowen 2019-04-08 11:17:30 +01:00 committed by John Cowen
parent 1c0cc9353a
commit efb4341087
2 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
ui-v2/app/components/tabular-details.js
View file

@ -1,11 +1,20 @@
import Component from '@ember/component';
import SlotsMixin from 'block-slots';
import { inject as service } from '@ember/service';
import { get } from '@ember/object';
import { get, set } from '@ember/object';
import { subscribe } from 'consul-ui/utils/computed/purify';
let uid = 0;
export default Component.extend(SlotsMixin, {
dom: service('dom'),
onchange: function() {},
init: function() {
this._super(...arguments);
set(this, 'uid', uid++);
},
inputId: subscribe('name', 'uid', function(name = 'name') {
return `tabular-details-${name}-toggle-${uid}_`;
}),
actions: {
click: function(e) {
get(this, 'dom').clickFirstAnchor(e);

6
ui-v2/app/templates/components/tabular-details.hbs
View file

@ -11,14 +11,14 @@
<tr data-test-tabular-row onclick={{action 'click'}}>
{{#yield-slot 'row'}}{{yield item index}}{{/yield-slot}}
<td class="actions">
<label for={{concat name '-summary-' index '-toggle'}}><span>Show details</span></label>
<label for={{concat inputId index}}><span>Show details</span></label>
</td>
</tr>
<tr>
<td colspan="3">
<input type="checkbox" value={{index}} name={{name}} id={{{ concat name '-summary-' index '-toggle'}}} onchange={{action 'change' item}} />
<input type="checkbox" value={{index}} name={{name}} id={{concat inputId index}} onchange={{action 'change' item}} />
<div>
<label for={{concat name '-summary-' index '-toggle'}}><span>Hide details</span></label>
<label for={{concat inputId index}}><span>Hide details</span></label>
<div>
{{#yield-slot 'details'}}
{{yield item index}}