feat(editors/ied): Improve IED editor UI for IED and LN selection, cl…

…oses openscd#1287
danyill · Aug 4, 2023 · 06b3af9 · 06b3af9
1 parent 2706f82
commit 06b3af9
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 20 deletions.
diff --git a/src/editors/IED.ts b/src/editors/IED.ts
@@ -32,6 +32,7 @@ export default class IedPlugin extends LitElement {
   /** The document being edited as provided to plugins by [[`OpenSCD`]]. */
   @property()
   doc!: XMLDocument;
+
   @property({ type: Number })
   editCount = -1;
 
@@ -69,6 +70,11 @@ export default class IedPlugin extends LitElement {
           uniqueLNClassList.push(lnClass);
           return true;
         })
+        .sort((a, b) =>
+          (a.getAttribute('lnClass') ?? '').localeCompare(
+            b.getAttribute('lnClass') ?? ''
+          )
+        )
         .map(element => {
           const lnClass = element.getAttribute('lnClass');
           const label = this.nsdoc.getDataDescription(element).label;
@@ -92,17 +98,24 @@ export default class IedPlugin extends LitElement {
     return undefined;
   }
 
+  lNClassListOpenedOnce = false;
+
   protected updated(_changedProperties: PropertyValues): void {
     super.updated(_changedProperties);
 
-    // When the document is updated, we reset the selected IED.
+    // When the document is updated, we reset the selected IED if it no longer exists
     if (
       _changedProperties.has('doc') ||
       _changedProperties.has('editCount') ||
       _changedProperties.has('nsdoc')
     ) {
+      // if the IED exists, retain selection
+      if (this.doc?.querySelector(`IED[name="${this.selectedIEDs[0]}"]`))
+        return;
+
       this.selectedIEDs = [];
       this.selectedLNClasses = [];
+      this.lNClassListOpenedOnce = false;
 
       const iedList = this.iedList;
       if (iedList.length > 0) {
@@ -129,6 +142,14 @@ export default class IedPlugin extends LitElement {
             icon="developer_board"
             .header=${translate('iededitor.iedSelector')}
             @selected-items-changed="${(e: SelectedItemsChangedEvent) => {
+              // if selection not changed, do nothing
+              if (
+                JSON.stringify(this.selectedIEDs) ===
+                JSON.stringify(e.detail.selectedItems)
+              )
+                return;
+
+              this.lNClassListOpenedOnce = false;
               this.selectedIEDs = e.detail.selectedItems;
               this.selectedLNClasses = this.lnClassList.map(
                 lnClassInfo => lnClassInfo[0]
@@ -162,6 +183,7 @@ export default class IedPlugin extends LitElement {
             @selected-items-changed="${(e: SelectedItemsChangedEvent) => {
               this.selectedLNClasses = e.detail.selectedItems;
               this.requestUpdate('selectedIed');
+              this.lNClassListOpenedOnce = true;
             }}"
           >
             <span slot="icon">${getIcon('lNIcon')}</span>
@@ -170,7 +192,8 @@ export default class IedPlugin extends LitElement {
               const label = lnClassInfo[1];
               return html`<mwc-check-list-item
                 value="${value}"
-                ?selected="${this.selectedLNClasses.includes(value)}"
+                ?selected="${this.lNClassListOpenedOnce &&
+                this.selectedLNClasses.includes(value)}"
               >
                 ${label}
               </mwc-check-list-item>`;

diff --git a/test/integration/editors/IED.test.ts b/test/integration/editors/IED.test.ts
@@ -145,14 +145,35 @@ describe('IED Plugin', () => {
           ).length
         ).to.eql(5);
 
-        await deselectLNClasses('CSWI');
+        await selectLNClasses('CSWI');
         await new Promise(resolve => setTimeout(resolve, 100)); // await animation
 
         expect(
           getLDeviceContainer(getIedContainer()).shadowRoot!.querySelectorAll(
             'ln-container'
           ).length
-        ).to.eql(3);
+        ).to.eql(2);
+      });
+
+      it('when other IED selected, all LNs are selected by default', async () => {
+        await selectLNClasses('XCBR');
+
+        await selectIed('IED3');
+        await new Promise(resolve => setTimeout(resolve, 100)); // await animation
+
+        expect(
+          element.shadowRoot?.querySelectorAll('ied-container').length
+        ).to.eql(1);
+        expect(
+          getIedContainer().shadowRoot?.querySelector('action-pane')!.shadowRoot
+            ?.innerHTML
+        ).to.include('IED3');
+
+        expect(
+          getLDeviceContainer(getIedContainer()).shadowRoot!.querySelectorAll(
+            'ln-container'
+          ).length
+        ).to.eql(9);
       });
 
       it('then renders the path of elements correctly', async () => {
@@ -277,7 +298,7 @@ describe('IED Plugin', () => {
         );
       }
 
-      async function deselectLNClasses(lnClass: string): Promise<void> {
+      async function selectLNClasses(lnClass: string): Promise<void> {
         const oscdFilterButton = <FilterButton>(
           element.shadowRoot!.querySelector(
             'oscd-filter-button[id="lnClassesFilter"]'

diff --git a/test/integration/editors/__snapshots__/IED.test.snap.js b/test/integration/editors/__snapshots__/IED.test.snap.js
@@ -116,51 +116,46 @@ snapshots["IED Plugin with a doc loaded containing IEDs looks like the latest sn
         aria-disabled="false"
         graphic="control"
         mwc-list-item=""
-        selected=""
         tabindex="0"
-        value="LLN0"
+        value="CILO"
       >
-        LLN0
+        CILO
       </mwc-check-list-item>
       <mwc-check-list-item
         aria-disabled="false"
         graphic="control"
         mwc-list-item=""
-        selected=""
         tabindex="-1"
-        value="XCBR"
+        value="CSWI"
       >
-        XCBR
+        CSWI
       </mwc-check-list-item>
       <mwc-check-list-item
         aria-disabled="false"
         graphic="control"
         mwc-list-item=""
-        selected=""
         tabindex="-1"
-        value="CSWI"
+        value="LLN0"
       >
-        CSWI
+        LLN0
       </mwc-check-list-item>
       <mwc-check-list-item
         aria-disabled="false"
         graphic="control"
         mwc-list-item=""
-        selected=""
         tabindex="-1"
-        value="XSWI"
+        value="XCBR"
       >
-        XSWI
+        XCBR
       </mwc-check-list-item>
       <mwc-check-list-item
         aria-disabled="false"
         graphic="control"
         mwc-list-item=""
-        selected=""
         tabindex="-1"
-        value="CILO"
+        value="XSWI"
       >
-        CILO
+        XSWI
       </mwc-check-list-item>
     </oscd-filter-button>
     <element-path class="elementPath">