Skip to content

Commit e8f4d5a

Browse files
author
Dennis Labordus
committed
Add filtering on labesl when opening SCL File and small improvements in Save menu items
Signed-off-by: Dennis Labordus <[email protected]>
1 parent d64cf4c commit e8f4d5a

20 files changed

+644
-173
lines changed

‎src/compas/CompasOpen.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import '../WizardDivider.js';
2121
import './CompasSclTypeList.js';
2222
import './CompasSclList.js';
2323

24-
/* Event that will be used when a SCL Document is retrieved. */
24+
/* Event that will be used when an SCL Document is retrieved. */
2525
export interface DocRetrievedDetail {
2626
localFile: boolean;
2727
doc: Document;
@@ -33,7 +33,7 @@ export function newDocRetrievedEvent(
3333
doc: Document,
3434
docName?: string
3535
): DocRetrievedEvent {
36-
return new CustomEvent<DocRetrievedDetail>('docRetrieved', {
36+
return new CustomEvent<DocRetrievedDetail>('doc-retrieved', {
3737
bubbles: true,
3838
composed: true,
3939
detail: { localFile, doc, docName },
@@ -110,7 +110,7 @@ export default class CompasOpenElement extends LitElement {
110110
type: this.selectedType ?? '',
111111
})}</p>
112112
<compas-scl-list .type=${this.selectedType}
113-
@sclSelected=${(evt: SclSelectedEvent) =>
113+
@scl-selected=${(evt: SclSelectedEvent) =>
114114
this.dispatchEvent(
115115
newPendingStateEvent(
116116
this.getSclDocument(evt.detail.docId)

‎src/compas/CompasSave.ts‎

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
html,
55
LitElement,
66
property,
7+
PropertyValues,
78
query,
89
TemplateResult,
910
} from 'lit-element';
@@ -42,6 +43,15 @@ import './CompasLabelsField.js';
4243
import './CompasLoading.js';
4344
import './CompasSclTypeSelect.js';
4445

46+
/* Event that will be used when an SCL Document is saved. */
47+
export type DocSavedEvent = CustomEvent<void>;
48+
export function newDocSavedEvent(): DocSavedEvent {
49+
return new CustomEvent<void>('doc-saved', {
50+
bubbles: true,
51+
composed: true,
52+
});
53+
}
54+
4555
@customElement('compas-save')
4656
export default class CompasSaveElement extends CompasExistsIn(LitElement) {
4757
@property()
@@ -62,6 +72,17 @@ export default class CompasSaveElement extends CompasExistsIn(LitElement) {
6272
@query('compas-labels-field')
6373
private labelsField!: CompasLabelsFieldElement;
6474

75+
protected updated(_changedProperties: PropertyValues): void {
76+
super.updated(_changedProperties);
77+
78+
// When the document is updated, we reset the selected IED.
79+
if (_changedProperties.has('doc')) {
80+
if (this.commentField) {
81+
this.commentField.value = null;
82+
}
83+
}
84+
}
85+
6586
valid(): boolean {
6687
if (!this.existInCompas) {
6788
return this.nameField.checkValidity() && this.sclTypeRadioGroup.valid();
@@ -79,16 +100,14 @@ export default class CompasSaveElement extends CompasExistsIn(LitElement) {
79100
this.labelsField.updateLabelsInPrivateElement(privateElement!);
80101
}
81102

82-
private async addSclToCompas(doc: XMLDocument): Promise<boolean> {
103+
private async addSclToCompas(doc: XMLDocument): Promise<void> {
83104
const name = stripExtensionFromName(this.nameField.value);
84105
const comment = this.commentField.value;
85106
const docType = this.sclTypeRadioGroup.getSelectedValue() ?? '';
86-
let success = false;
87107

88108
await CompasSclDataService()
89109
.addSclDocument(docType, { sclName: name, comment: comment, doc: doc })
90110
.then(sclDocument => {
91-
this.commentField.value = null;
92111
updateDocumentInOpenSCD(this, sclDocument);
93112

94113
this.dispatchEvent(
@@ -97,22 +116,20 @@ export default class CompasSaveElement extends CompasExistsIn(LitElement) {
97116
title: get('compas.save.addSuccess'),
98117
})
99118
);
100-
success = true;
119+
120+
this.dispatchEvent(newDocSavedEvent());
101121
})
102122
.catch(reason => createLogEvent(this, reason));
103-
104-
return success;
105123
}
106124

107125
private async updateSclInCompas(
108126
docId: string,
109127
docName: string,
110128
doc: XMLDocument
111-
): Promise<boolean> {
129+
): Promise<void> {
112130
const changeSet = this.changeSetRadiogroup.getSelectedValue();
113131
const comment = this.commentField.value;
114132
const docType = getTypeFromDocName(docName);
115-
let success = false;
116133

117134
await CompasSclDataService()
118135
.updateSclDocument(docType, docId, {
@@ -121,7 +138,6 @@ export default class CompasSaveElement extends CompasExistsIn(LitElement) {
121138
doc: doc,
122139
})
123140
.then(sclDocument => {
124-
this.commentField.value = null;
125141
updateDocumentInOpenSCD(this, sclDocument);
126142

127143
this.dispatchEvent(
@@ -130,19 +146,18 @@ export default class CompasSaveElement extends CompasExistsIn(LitElement) {
130146
title: get('compas.save.updateSuccess'),
131147
})
132148
);
133-
success = true;
149+
150+
this.dispatchEvent(newDocSavedEvent());
134151
})
135152
.catch(reason => createLogEvent(this, reason));
136-
137-
return success;
138153
}
139154

140-
async saveToCompas(): Promise<boolean> {
155+
async saveToCompas(): Promise<void> {
141156
this.updateLabels();
142157
if (!this.docId || !this.existInCompas) {
143-
return this.addSclToCompas(this.doc);
158+
await this.addSclToCompas(this.doc);
144159
} else {
145-
return this.updateSclInCompas(this.docId, this.docName, this.doc);
160+
await this.updateSclInCompas(this.docId, this.docName, this.doc);
146161
}
147162
}
148163

@@ -153,6 +168,8 @@ export default class CompasSaveElement extends CompasExistsIn(LitElement) {
153168
@click=${() => {
154169
this.updateLabels();
155170
saveDocumentToFile(this.doc, this.docName);
171+
172+
this.dispatchEvent(newDocSavedEvent());
156173
}}
157174
>
158175
</mwc-button>

‎src/compas/CompasSclList.ts‎

Lines changed: 133 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
import {
2+
css,
23
customElement,
34
html,
45
LitElement,
56
property,
7+
PropertyValues,
8+
state,
69
TemplateResult,
710
} from 'lit-element';
811
import { translate } from 'lit-translate';
912

1013
import '@material/mwc-list';
1114
import '@material/mwc-list/mwc-list-item';
1215

16+
import { SelectedItemsChangedEvent } from '../oscd-filter-button.js';
17+
18+
import '../filtered-list.js';
19+
import '../oscd-filter-button.js';
20+
1321
import {
1422
CompasSclDataService,
1523
SDS_NAMESPACE,
@@ -21,7 +29,7 @@ export interface SclSelectedDetail {
2129
}
2230
export type SclSelectedEvent = CustomEvent<SclSelectedDetail>;
2331
export function newSclSelectedEvent(docId: string): SclSelectedEvent {
24-
return new CustomEvent<SclSelectedDetail>('sclSelected', {
32+
return new CustomEvent<SclSelectedDetail>('scl-selected', {
2533
bubbles: true,
2634
composed: true,
2735
detail: { docId },
@@ -30,54 +38,146 @@ export function newSclSelectedEvent(docId: string): SclSelectedEvent {
3038

3139
@customElement('compas-scl-list')
3240
export class CompasSclList extends LitElement {
33-
@property({ type: String })
34-
type = '';
35-
3641
@property()
37-
scls!: Element[];
42+
type?: string;
43+
44+
@state()
45+
private items?: Element[];
46+
47+
@state()
48+
private labels: string[] = [];
49+
50+
@state()
51+
private selectedLabels: string[] = [];
52+
53+
@state()
54+
private get filteredItems(): Element[] | undefined {
55+
// If items are still being retrieved, return undefined.
56+
if (!this.items) {
57+
return undefined;
58+
}
59+
60+
// If all labels are selected, show all items, including the ones not having a Label.
61+
if (this.labels.length === this.selectedLabels.length) {
62+
return this.items;
63+
}
64+
65+
return this.items.filter(item => {
66+
const labels = Array.from(item.querySelectorAll('Label') ?? [])
67+
.map(element => element.textContent)
68+
.filter(value => !!value) as string[];
69+
return (
70+
labels.filter(label => this.selectedLabels.includes(label)).length > 0
71+
);
72+
});
73+
}
3874

3975
firstUpdated(): void {
4076
this.fetchData();
4177
}
4278

79+
protected updated(_changedProperties: PropertyValues): void {
80+
super.updated(_changedProperties);
81+
82+
// When the document is updated, we reset the selected IED.
83+
if (_changedProperties.has('type')) {
84+
this.items = undefined;
85+
this.labels = [];
86+
this.selectedLabels = [];
87+
this.fetchData();
88+
}
89+
}
90+
4391
fetchData(): void {
44-
CompasSclDataService()
45-
.listScls(this.type)
46-
.then(xmlResponse => {
47-
this.scls = Array.from(xmlResponse.querySelectorAll('Item') ?? []);
48-
});
92+
if (this.type) {
93+
CompasSclDataService()
94+
.listScls(this.type)
95+
.then(xmlResponse => {
96+
this.items = Array.from(xmlResponse.querySelectorAll('Item') ?? []);
97+
this.labels = Array.from(
98+
new Set(
99+
Array.from(xmlResponse.querySelectorAll('Label') ?? [])
100+
.map(element => element.textContent)
101+
.filter(value => !!value)
102+
)
103+
) as string[];
104+
this.selectedLabels = this.labels;
105+
});
106+
}
49107
}
50108

51109
render(): TemplateResult {
52-
if (!this.scls) {
110+
if (!this.items) {
53111
return html` <compas-loading></compas-loading> `;
54112
}
55-
if (this.scls?.length <= 0) {
113+
if (this.items?.length <= 0) {
56114
return html` <mwc-list>
57115
<mwc-list-item><i>${translate('compas.noScls')}</i></mwc-list-item>
58116
</mwc-list>`;
59117
}
60-
return html` <mwc-list>
61-
${this.scls.map(item => {
62-
const id =
63-
item.getElementsByTagNameNS(SDS_NAMESPACE, 'Id').item(0)!
64-
.textContent ?? '';
65-
let name =
66-
item.getElementsByTagNameNS(SDS_NAMESPACE, 'Name').item(0)!
67-
.textContent ?? '';
68-
if (name === '') {
69-
name = id;
70-
}
71-
const version =
72-
item.getElementsByTagNameNS(SDS_NAMESPACE, 'Version').item(0)!
73-
.textContent ?? '';
74-
return html`<mwc-list-item
75-
tabindex="0"
76-
@click=${() => this.dispatchEvent(newSclSelectedEvent(id))}
118+
const filteredItems = this.filteredItems;
119+
return html`<div class="filters">
120+
<span>${translate('compas.sclFilter')}</span>
121+
<oscd-filter-button
122+
id="labelsFilter"
123+
icon="label"
124+
multi="true"
125+
?disabled="${this.labels.length <= 0}"
126+
.header=${translate('compas.label.selectLabels')}
127+
@selected-items-changed="${(e: SelectedItemsChangedEvent) => {
128+
this.selectedLabels = e.detail.selectedItems;
129+
this.requestUpdate('items');
130+
this.requestUpdate('filteredItems');
131+
}}"
77132
>
78-
${name} (${version})
79-
</mwc-list-item>`;
80-
})}
81-
</mwc-list>`;
133+
${this.labels.map(label => {
134+
return html`<mwc-check-list-item
135+
value="${label}"
136+
?selected="${this.selectedLabels.includes(label)}"
137+
>
138+
${label}
139+
</mwc-check-list-item>`;
140+
})}
141+
</oscd-filter-button>
142+
</div>
143+
${filteredItems && filteredItems.length > 0
144+
? html` <filtered-list>
145+
${filteredItems.map(item => {
146+
const id =
147+
item.getElementsByTagNameNS(SDS_NAMESPACE, 'Id').item(0)!
148+
.textContent ?? '';
149+
let name =
150+
item.getElementsByTagNameNS(SDS_NAMESPACE, 'Name').item(0)!
151+
.textContent ?? '';
152+
if (name === '') {
153+
name = id;
154+
}
155+
const version =
156+
item.getElementsByTagNameNS(SDS_NAMESPACE, 'Version').item(0)!
157+
.textContent ?? '';
158+
return html`<mwc-list-item
159+
tabindex="0"
160+
@click=${() => this.dispatchEvent(newSclSelectedEvent(id))}
161+
>
162+
${name} (${version})
163+
</mwc-list-item>`;
164+
})}
165+
</filtered-list>`
166+
: html` <mwc-list>
167+
<mwc-list-item>
168+
<i>${translate('compas.noFilteredScls')}</i>
169+
</mwc-list-item>
170+
</mwc-list>`} `;
82171
}
172+
173+
static styles = css`
174+
.filters {
175+
padding-left: var(--mdc-list-side-padding, 16px);
176+
display: flex;
177+
}
178+
179+
.filters > span {
180+
line-height: 48px;
181+
}
182+
`;
83183
}

‎src/menu/CompasCompareIED.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default class CompasCompareIEDPlugin extends CompareIEDPlugin {
1515
*/
1616
protected renderSelectTemplateFile(): TemplateResult {
1717
return html`<compas-open
18-
@docRetrieved=${(evt: DocRetrievedEvent) => {
18+
@doc-retrieved=${(evt: DocRetrievedEvent) => {
1919
this.templateDoc = evt.detail.doc;
2020
}}
2121
></compas-open>

0 commit comments

Comments
 (0)