Skip to content

Commit ebe32fc

Browse files
author
Dennis Labordus
committed
Used 2 different icons to show filterin is on/off.
Signed-off-by: Dennis Labordus <[email protected]>
1 parent a1f2f6a commit ebe32fc

File tree

3 files changed

+176
-23
lines changed

3 files changed

+176
-23
lines changed

‎src/compas/CompasSclList.ts‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
} from 'lit-element';
1111
import { translate } from 'lit-translate';
1212

13+
import '@material/mwc-icon';
1314
import '@material/mwc-list';
1415
import '@material/mwc-list/mwc-list-item';
1516

@@ -117,22 +118,30 @@ export class CompasSclList extends LitElement {
117118
</mwc-list>`;
118119
}
119120
const filteredItems = this.filteredItems;
120-
return html`<div class="filters">
121+
return html`
122+
<div class="filters">
121123
<span>${translate('compas.sclFilter')}</span>
122124
<oscd-filter-button
123125
id="labelsFilter"
124-
icon="label"
125126
multi="true"
126127
?disabled="${this.labels.length <= 0}"
127128
.header=${translate('compas.label.selectLabels')}
128129
@selected-items-changed="${(e: SelectedItemsChangedEvent) => {
129130
this.selectedLabels = e.detail.selectedItems;
130131
this.requestUpdate('items');
131132
this.requestUpdate('filteredItems');
133+
this.requestUpdate('selectedLabels');
132134
}}"
133135
>
136+
<span slot="icon">
137+
<mwc-icon>
138+
${this.labels.length != this.selectedLabels.length
139+
? 'label'
140+
: 'label_off'}
141+
</mwc-icon>
142+
</span>
134143
${this.labels.map(label => {
135-
return html`<mwc-check-list-item
144+
return html` <mwc-check-list-item
136145
value="${label}"
137146
?selected="${this.selectedLabels.includes(label)}"
138147
>
@@ -156,7 +165,7 @@ export class CompasSclList extends LitElement {
156165
const version =
157166
item.getElementsByTagNameNS(SDS_NAMESPACE, 'Version').item(0)!
158167
.textContent ?? '';
159-
return html`<mwc-list-item
168+
return html` <mwc-list-item
160169
tabindex="0"
161170
@click=${() => this.dispatchEvent(newSclSelectedEvent(id))}
162171
>
@@ -168,7 +177,8 @@ export class CompasSclList extends LitElement {
168177
<mwc-list-item>
169178
<i>${translate('compas.noFilteredScls')}</i>
170179
</mwc-list-item>
171-
</mwc-list>`} `;
180+
</mwc-list>`}
181+
`;
172182
}
173183

174184
static styles = css`

‎test/unit/compas/CompasSclList.test.ts‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ describe('compas-scl-list', () => {
7676
});
7777
});
7878

79-
describe('when there items without labels', () => {
79+
describe('when there are items without labels', () => {
8080
beforeEach(async () => {
8181
element = fixtureSync(
8282
html`<compas-scl-list .type="IID"></compas-scl-list>`
@@ -130,7 +130,7 @@ describe('compas-scl-list', () => {
130130
});
131131
});
132132

133-
describe('when there items with labels', () => {
133+
describe('when there are items with labels', () => {
134134
beforeEach(async () => {
135135
element = fixtureSync(
136136
html`<compas-scl-list .type="IID"></compas-scl-list>`
@@ -215,6 +215,31 @@ describe('compas-scl-list', () => {
215215
expect(
216216
element.shadowRoot!.querySelectorAll('filtered-list > mwc-list-item')
217217
).to.have.length(1);
218+
await expect(element).shadowDom.to.equalSnapshot();
219+
});
220+
221+
it('when filtering on labels and all items are hidden', async () => {
222+
const filterButton = <HTMLElement>(
223+
element.shadowRoot!.querySelector('oscd-filter-button#labelsFilter')
224+
);
225+
(<HTMLElement>(
226+
filterButton.shadowRoot!.querySelector('mwc-icon-button')
227+
)).click();
228+
await element.updateComplete;
229+
230+
Array.from(
231+
element.shadowRoot!.querySelectorAll(
232+
'oscd-filter-button#labelsFilter > mwc-check-list-item'
233+
)
234+
).forEach(element => (<HTMLElement>element).click());
235+
(<HTMLElement>(
236+
filterButton.shadowRoot!.querySelector(
237+
'mwc-button[slot="primaryAction"]'
238+
)
239+
)).click();
240+
await element.updateComplete;
241+
242+
await expect(element).shadowDom.to.equalSnapshot();
218243
});
219244

220245
it('looks like the latest snapshot', async () => {

‎test/unit/compas/__snapshots__/CompasSclList.test.snap.js‎

Lines changed: 134 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
/* @web/test-runner snapshot v1 */
22
export const snapshots = {};
33

4-
snapshots[
5-
'compas-scl-list when list still needs to be loaded looks like the latest snapshot'
6-
] = `<compas-loading>
4+
snapshots["compas-scl-list when list still needs to be loaded looks like the latest snapshot"] =
5+
`<compas-loading>
76
</compas-loading>
87
`;
98
/* end snapshot compas-scl-list when list still needs to be loaded looks like the latest snapshot */
109

11-
snapshots[
12-
'compas-scl-list when there are no items found in CoMPAS looks like the latest snapshot'
13-
] = `<mwc-list>
10+
snapshots["compas-scl-list when there are no items found in CoMPAS looks like the latest snapshot"] =
11+
`<mwc-list>
1412
<mwc-list-item
1513
aria-disabled="false"
1614
mwc-list-item=""
@@ -24,18 +22,21 @@ snapshots[
2422
`;
2523
/* end snapshot compas-scl-list when there are no items found in CoMPAS looks like the latest snapshot */
2624

27-
snapshots[
28-
'compas-scl-list when there items without labels looks like the latest snapshot'
29-
] = `<div class="filters">
25+
snapshots["compas-scl-list when there are items without labels looks like the latest snapshot"] =
26+
`<div class="filters">
3027
<span>
3128
[compas.sclFilter]
3229
</span>
3330
<oscd-filter-button
3431
disabled=""
35-
icon="label"
3632
id="labelsFilter"
3733
multi="true"
3834
>
35+
<span slot="icon">
36+
<mwc-icon>
37+
label_off
38+
</mwc-icon>
39+
</span>
3940
</oscd-filter-button>
4041
</div>
4142
<filtered-list>
@@ -55,19 +56,135 @@ snapshots[
5556
</mwc-list-item>
5657
</filtered-list>
5758
`;
58-
/* end snapshot compas-scl-list when there items without labels looks like the latest snapshot */
59+
/* end snapshot compas-scl-list when there are items without labels looks like the latest snapshot */
5960

60-
snapshots[
61-
'compas-scl-list when there items with labels looks like the latest snapshot'
62-
] = `<div class="filters">
61+
snapshots["compas-scl-list when there are items with labels when filtering on labels only 1 item is shown"] =
62+
`<div class="filters">
6363
<span>
6464
[compas.sclFilter]
6565
</span>
6666
<oscd-filter-button
67-
icon="label"
6867
id="labelsFilter"
6968
multi="true"
7069
>
70+
<span slot="icon">
71+
<mwc-icon>
72+
label
73+
</mwc-icon>
74+
</span>
75+
<mwc-check-list-item
76+
aria-disabled="false"
77+
graphic="control"
78+
mwc-list-item=""
79+
selected=""
80+
tabindex="-1"
81+
value="Amsterdam"
82+
>
83+
Amsterdam
84+
</mwc-check-list-item>
85+
<mwc-check-list-item
86+
aria-disabled="false"
87+
graphic="control"
88+
mwc-list-item=""
89+
tabindex="-1"
90+
value="Netherlands"
91+
>
92+
Netherlands
93+
</mwc-check-list-item>
94+
<mwc-check-list-item
95+
aria-disabled="false"
96+
graphic="control"
97+
mwc-list-item=""
98+
tabindex="0"
99+
value="Utrecht"
100+
>
101+
Utrecht
102+
</mwc-check-list-item>
103+
</oscd-filter-button>
104+
</div>
105+
<filtered-list>
106+
<mwc-list-item
107+
aria-disabled="false"
108+
mwc-list-item=""
109+
tabindex="0"
110+
>
111+
Station-Amsterdam-0001 (1.3.0)
112+
</mwc-list-item>
113+
</filtered-list>
114+
`;
115+
/* end snapshot compas-scl-list when there are items with labels when filtering on labels only 1 item is shown */
116+
117+
snapshots["compas-scl-list when there are items with labels when filtering on labels and all items are hidden"] =
118+
`<div class="filters">
119+
<span>
120+
[compas.sclFilter]
121+
</span>
122+
<oscd-filter-button
123+
id="labelsFilter"
124+
multi="true"
125+
>
126+
<span slot="icon">
127+
<mwc-icon>
128+
label
129+
</mwc-icon>
130+
</span>
131+
<mwc-check-list-item
132+
aria-disabled="false"
133+
graphic="control"
134+
mwc-list-item=""
135+
tabindex="-1"
136+
value="Amsterdam"
137+
>
138+
Amsterdam
139+
</mwc-check-list-item>
140+
<mwc-check-list-item
141+
aria-disabled="false"
142+
graphic="control"
143+
mwc-list-item=""
144+
tabindex="-1"
145+
value="Netherlands"
146+
>
147+
Netherlands
148+
</mwc-check-list-item>
149+
<mwc-check-list-item
150+
aria-disabled="false"
151+
graphic="control"
152+
mwc-list-item=""
153+
tabindex="0"
154+
value="Utrecht"
155+
>
156+
Utrecht
157+
</mwc-check-list-item>
158+
</oscd-filter-button>
159+
</div>
160+
<mwc-list>
161+
<mwc-list-item
162+
aria-disabled="false"
163+
mwc-list-item=""
164+
tabindex="0"
165+
>
166+
<i>
167+
[compas.noFilteredScls]
168+
</i>
169+
</mwc-list-item>
170+
</mwc-list>
171+
`;
172+
/* end snapshot compas-scl-list when there are items with labels when filtering on labels and all items are hidden */
173+
174+
snapshots["compas-scl-list when there are items with labels looks like the latest snapshot"] =
175+
`<div class="filters">
176+
<span>
177+
[compas.sclFilter]
178+
</span>
179+
<oscd-filter-button
180+
id="labelsFilter"
181+
multi="true"
182+
>
183+
<span slot="icon">
184+
<mwc-icon>
185+
label_off
186+
</mwc-icon>
187+
</span>
71188
<mwc-check-list-item
72189
aria-disabled="false"
73190
graphic="control"
@@ -117,4 +234,5 @@ snapshots[
117234
</mwc-list-item>
118235
</filtered-list>
119236
`;
120-
/* end snapshot compas-scl-list when there items with labels looks like the latest snapshot */
237+
/* end snapshot compas-scl-list when there are items with labels looks like the latest snapshot */
238+

0 commit comments

Comments
 (0)