Skip to content

Commit 9d7916b

Browse files
JakobVogelsangJakobVogelsang
authored
feat(filtered-list): filter on list item value (openscd#876)
* feat(filtered-list): filter on list item value * fix(editors): hide duplicate li elements in filtered lists * refactor(editors): better value definition
1 parent b93dab2 commit 9d7916b

File tree

18 files changed

+241
-120
lines changed

18 files changed

+241
-120
lines changed

‎src/editors/publisher/data-set-editor.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,12 @@ export class DataSetEditor extends LitElement {
2323
class="listitem header"
2424
noninteractive
2525
graphic="icon"
26+
value="${Array.from(ied.querySelectorAll('DataSet'))
27+
.map(element => {
28+
const id = identity(element) as string;
29+
return typeof id === 'string' ? id : '';
30+
})
31+
.join(' ')}"
2632
>
2733
<span>${ied.getAttribute('name')}</span>
2834
<mwc-icon slot="graphic">developer_board</mwc-icon>
@@ -55,5 +61,9 @@ export class DataSetEditor extends LitElement {
5561
.listitem.header {
5662
font-weight: 500;
5763
}
64+
65+
mwc-list-item.hidden[noninteractive] + li[divider] {
66+
display: none;
67+
}
5868
`;
5969
}

‎src/editors/publisher/gse-control-editor.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@ export class GseControlEditor extends LitElement {
2929
class="listitem header"
3030
noninteractive
3131
graphic="icon"
32+
value="${Array.from(ied.querySelectorAll('GSEControl'))
33+
.map(element => {
34+
const id = identity(element) as string;
35+
return typeof id === 'string' ? id : '';
36+
})
37+
.join(' ')}"
3238
>
3339
<span>${ied.getAttribute('name')}</span>
3440
<mwc-icon slot="graphic">developer_board</mwc-icon>
@@ -67,5 +73,9 @@ export class GseControlEditor extends LitElement {
6773
.listitem.header {
6874
font-weight: 500;
6975
}
76+
77+
mwc-list-item.hidden[noninteractive] + li[divider] {
78+
display: none;
79+
}
7080
`;
7181
}

‎src/editors/publisher/report-control-editor.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@ export class ReportControlEditor extends LitElement {
2929
class="listitem header"
3030
noninteractive
3131
graphic="icon"
32+
value="${Array.from(ied.querySelectorAll('ReportControl'))
33+
.map(element => {
34+
const id = identity(element) as string;
35+
return typeof id === 'string' ? id : '';
36+
})
37+
.join(' ')}"
3238
>
3339
<span>${ied.getAttribute('name')}</span>
3440
<mwc-icon slot="graphic">developer_board</mwc-icon>
@@ -65,5 +71,9 @@ export class ReportControlEditor extends LitElement {
6571
.listitem.header {
6672
font-weight: 500;
6773
}
74+
75+
mwc-list-item.hidden[noninteractive] + li[divider] {
76+
display: none;
77+
}
6878
`;
6979
}

‎src/editors/publisher/sampled-value-control-editor.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@ export class SampledValueControlEditor extends LitElement {
2929
class="listitem header"
3030
noninteractive
3131
graphic="icon"
32+
value="${Array.from(ied.querySelectorAll('SampledValueControl'))
33+
.map(element => {
34+
const id = identity(element) as string;
35+
return typeof id === 'string' ? id : '';
36+
})
37+
.join(' ')}"
3238
>
3339
<span>${ied.getAttribute('name')}</span>
3440
<mwc-icon slot="graphic">developer_board</mwc-icon>
@@ -67,5 +73,9 @@ export class SampledValueControlEditor extends LitElement {
6773
.listitem.header {
6874
font-weight: 500;
6975
}
76+
77+
mwc-list-item.hidden[noninteractive] + li[divider] {
78+
display: none;
79+
}
7080
`;
7181
}

‎src/editors/subscription/goose/goose-list.ts‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@ import '@material/mwc-icon';
1313
import '@material/mwc-list/mwc-list-item';
1414

1515
import '../../../filtered-list.js';
16-
import { getNameAttribute, newWizardEvent } from '../../../foundation.js';
16+
import {
17+
getNameAttribute,
18+
identity,
19+
newWizardEvent,
20+
} from '../../../foundation.js';
1721
import { newGOOSESelectEvent } from './foundation.js';
1822
import { gooseIcon } from '../../../icons/icons.js';
1923
import { wizards } from '../../../wizards/wizard-library.js';
@@ -31,7 +35,7 @@ addEventListener('open-doc', onOpenDocResetSelectedGooseMsg);
3135
/** An sub element for showing all published GOOSE messages per IED. */
3236
@customElement('goose-list')
3337
export class GooseList extends LitElement {
34-
@property()
38+
@property({ attribute: false })
3539
doc!: XMLDocument;
3640

3741
private onSelect(gseControl: Element): void {
@@ -57,6 +61,7 @@ export class GooseList extends LitElement {
5761
@click=${() => this.onSelect(gseControl)}
5862
graphic="large"
5963
hasMeta
64+
value="${identity(gseControl)}"
6065
>
6166
<mwc-icon slot="graphic">${gooseIcon}</mwc-icon>
6267
<span>${gseControl.getAttribute('name')}</span>
@@ -89,7 +94,16 @@ export class GooseList extends LitElement {
8994
${getOrderedIeds(this.doc).map(
9095
ied =>
9196
html`
92-
<mwc-list-item noninteractive graphic="icon">
97+
<mwc-list-item
98+
noninteractive
99+
graphic="icon"
100+
value="${Array.from(ied.querySelectorAll('GSEControl'))
101+
.map(element => {
102+
const id = identity(element) as string;
103+
return typeof id === 'string' ? id : '';
104+
})
105+
.join(' ')}"
106+
>
93107
<span>${getNameAttribute(ied)}</span>
94108
<mwc-icon slot="graphic">developer_board</mwc-icon>
95109
</mwc-list-item>
@@ -115,5 +129,9 @@ export class GooseList extends LitElement {
115129
mwc-icon-button.hidden {
116130
display: none;
117131
}
132+
133+
mwc-list-item.hidden[noninteractive] + li[divider] {
134+
display: none;
135+
}
118136
`;
119137
}

‎src/editors/subscription/goose/subscriber-list.ts‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
Create,
1717
createElement,
1818
Delete,
19+
identity,
1920
newActionEvent,
2021
} from '../../../foundation.js';
2122
import {
@@ -323,7 +324,15 @@ export class SubscriberList extends SubscriberListContainer {
323324
}
324325

325326
renderUnSubscribers(elements: ListElement[]): TemplateResult {
326-
return html`<mwc-list-item noninteractive>
327+
return html`<mwc-list-item
328+
noninteractive
329+
value="${elements
330+
.map(element => {
331+
const id = identity(element.element) as string;
332+
return typeof id === 'string' ? id : '';
333+
})
334+
.join(' ')}"
335+
>
327336
<span
328337
>${translate('subscription.subscriber.availableToSubscribe')}</span
329338
>
@@ -339,7 +348,15 @@ export class SubscriberList extends SubscriberListContainer {
339348
}
340349

341350
renderPartiallySubscribers(elements: ListElement[]): TemplateResult {
342-
return html`<mwc-list-item noninteractive>
351+
return html`<mwc-list-item
352+
noninteractive
353+
value="${elements
354+
.map(element => {
355+
const id = identity(element.element) as string;
356+
return typeof id === 'string' ? id : '';
357+
})
358+
.join(' ')}"
359+
>
343360
<span>${translate('subscription.subscriber.partiallySubscribed')}</span>
344361
</mwc-list-item>
345362
<li divider role="separator"></li>
@@ -353,7 +370,15 @@ export class SubscriberList extends SubscriberListContainer {
353370
}
354371

355372
renderFullSubscribers(): TemplateResult {
356-
return html`<mwc-list-item noninteractive>
373+
return html`<mwc-list-item
374+
noninteractive
375+
value="${this.subscribedElements
376+
.map(element => {
377+
const id = identity(element.element) as string;
378+
return typeof id === 'string' ? id : '';
379+
})
380+
.join(' ')}"
381+
>
357382
<span>${translate('subscription.subscriber.subscribed')}</span>
358383
</mwc-list-item>
359384
<li divider role="separator"></li>

‎src/editors/subscription/sampledvalues/smv-list.ts‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,11 @@ import '@material/mwc-icon';
1212
import '@material/mwc-list';
1313
import '@material/mwc-list/mwc-list-item';
1414

15-
import { getNameAttribute, newWizardEvent } from '../../../foundation.js';
15+
import {
16+
getNameAttribute,
17+
identity,
18+
newWizardEvent,
19+
} from '../../../foundation.js';
1620
import { newSmvSelectEvent } from './foundation.js';
1721
import { smvIcon } from '../../../icons/icons.js';
1822
import { getOrderedIeds, styles } from '../foundation.js';
@@ -31,7 +35,7 @@ addEventListener('open-doc', onOpenDocResetSelectedSmvMsg);
3135
/** An sub element for showing all Sampled Values per IED. */
3236
@customElement('smv-list')
3337
export class SmvPublisherList extends LitElement {
34-
@property()
38+
@property({ attribute: false })
3539
doc!: XMLDocument;
3640

3741
private onSelect(smvControl: Element) {
@@ -64,6 +68,7 @@ export class SmvPublisherList extends LitElement {
6468
@click=${() => this.onSelect(smvControl)}
6569
graphic="large"
6670
hasMeta
71+
value="${identity(smvControl)}"
6772
>
6873
<mwc-icon slot="graphic">${smvIcon}</mwc-icon>
6974
<span>${smvControl.getAttribute('name')}</span>
@@ -85,7 +90,16 @@ export class SmvPublisherList extends LitElement {
8590
${getOrderedIeds(this.doc).map(
8691
ied =>
8792
html`
88-
<mwc-list-item noninteractive graphic="icon">
93+
<mwc-list-item
94+
noninteractive
95+
graphic="icon"
96+
value="${Array.from(ied.querySelectorAll('SampledValueControl'))
97+
.map(element => {
98+
const id = identity(element) as string;
99+
return typeof id === 'string' ? id : '';
100+
})
101+
.join(' ')}"
102+
>
89103
<span>${getNameAttribute(ied)}</span>
90104
<mwc-icon slot="graphic">developer_board</mwc-icon>
91105
</mwc-list-item>
@@ -111,5 +125,9 @@ export class SmvPublisherList extends LitElement {
111125
mwc-icon-button.hidden {
112126
display: none;
113127
}
128+
129+
mwc-list-item.hidden[noninteractive] + li[divider] {
130+
display: none;
131+
}
114132
`;
115133
}

‎src/editors/subscription/sampledvalues/subscriber-list.ts‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
Create,
1717
createElement,
1818
Delete,
19+
identity,
1920
newActionEvent,
2021
} from '../../../foundation.js';
2122
import {
@@ -325,7 +326,15 @@ export class SubscriberList extends SubscriberListContainer {
325326
}
326327

327328
renderUnSubscribers(elements: ListElement[]): TemplateResult {
328-
return html`<mwc-list-item noninteractive>
329+
return html`<mwc-list-item
330+
noninteractive
331+
value="${elements
332+
.map(element => {
333+
const id = identity(element.element) as string;
334+
return typeof id === 'string' ? id : '';
335+
})
336+
.join(' ')}"
337+
>
329338
<span
330339
>${translate('subscription.subscriber.availableToSubscribe')}</span
331340
>
@@ -341,7 +350,15 @@ export class SubscriberList extends SubscriberListContainer {
341350
}
342351

343352
renderPartiallySubscribers(elements: ListElement[]): TemplateResult {
344-
return html`<mwc-list-item noninteractive>
353+
return html`<mwc-list-item
354+
noninteractive
355+
value="${elements
356+
.map(element => {
357+
const id = identity(element.element) as string;
358+
return typeof id === 'string' ? id : '';
359+
})
360+
.join(' ')}"
361+
>
345362
<span>${translate('subscription.subscriber.partiallySubscribed')}</span>
346363
</mwc-list-item>
347364
<li divider role="separator"></li>
@@ -355,7 +372,15 @@ export class SubscriberList extends SubscriberListContainer {
355372
}
356373

357374
renderFullSubscribers(): TemplateResult {
358-
return html`<mwc-list-item noninteractive>
375+
return html`<mwc-list-item
376+
noninteractive
377+
value="${this.subscribedElements
378+
.map(element => {
379+
const id = identity(element.element) as string;
380+
return typeof id === 'string' ? id : '';
381+
})
382+
.join(' ')}"
383+
>
359384
<span>${translate('subscription.subscriber.subscribed')}</span>
360385
</mwc-list-item>
361386
<li divider role="separator"></li>

‎src/filtered-list.ts‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,13 @@ function hideFiltered(item: ListItemBase, searchText: string): void {
3030
const childInnerText = Array.from(item.children)
3131
.map(child => (<HTMLElement>child).innerText)
3232
.join('\n');
33-
const filterTarget: string = (itemInnerText + childInnerText).toUpperCase();
33+
const value = item.value;
34+
35+
const filterTarget: string = (
36+
itemInnerText +
37+
childInnerText +
38+
value
39+
).toUpperCase();
3440

3541
const terms: string[] = searchText.toUpperCase().split(' ');
3642

@@ -86,11 +92,9 @@ export class FilteredList extends ListBase {
8692
this.querySelectorAll(
8793
'mwc-list-item, mwc-check-list-item, mwc-radio-list-item'
8894
)
89-
)
90-
.filter(item => !(item as ListItemBase).noninteractive)
91-
.forEach(item =>
92-
hideFiltered(item as ListItemBase, this.searchField.value)
93-
);
95+
).forEach(item =>
96+
hideFiltered(item as ListItemBase, this.searchField.value)
97+
);
9498
}
9599

96100
protected onListItemConnected(e: CustomEvent): void {

0 commit comments

Comments
 (0)