status-im/consul
2
0
Fork 0
mirror of https://github.com/status-im/consul.git synced 2025-01-11 06:16:08 +00:00
Code Issues Projects 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 255528aaa7
commit 417d3030be
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 Component from '@ember/component';
import SlotsMixin from 'block-slots'; import SlotsMixin from 'block-slots';
import { inject as service } from '@ember/service'; 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, { export default Component.extend(SlotsMixin, {
dom: service('dom'), dom: service('dom'),
onchange: function() {}, 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: { actions: {
click: function(e) { click: function(e) {
get(this, 'dom').clickFirstAnchor(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'}}> <tr data-test-tabular-row onclick={{action 'click'}}>
{{#yield-slot 'row'}}{{yield item index}}{{/yield-slot}} {{#yield-slot 'row'}}{{yield item index}}{{/yield-slot}}
<td class="actions"> <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> </td>
</tr> </tr>
<tr> <tr>
<td colspan="3"> <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> <div>
<label for={{concat name '-summary-' index '-toggle'}}><span>Hide details</span></label> <label for={{concat inputId index}}><span>Hide details</span></label>
<div> <div>
{{#yield-slot 'details'}} {{#yield-slot 'details'}}
{{yield item index}} {{yield item index}}