fix(editors/cleanup): Fix filter issue with in cleanup plugin (openscd#910)

* refactor(editors/cleanup): make linter happy

* fix(editors/cleanup): make type and string filter work together

* fix(editors/cleanup/control-clock-list): make sure check all works

Author: JakobVogelsang

src/editors/cleanup/control-blocks-container.ts

@@ -10,6 +10,7 @@ import {
   query,
   queryAll,
 } from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map';
 import { translate } from 'lit-translate';
 
 import '@material/mwc-button';
@@ -76,7 +77,7 @@ function getCommAddress(controlBlock: Element): Element | null | undefined {
 @customElement('cleanup-control-blocks')
 export class CleanupControlBlocks extends LitElement {
   /** The document being edited as provided to plugins by [[`OpenSCD`]]. */
-  @property()
+  @property({ attribute: false })
   doc!: XMLDocument;
 
   @property({ type: Boolean })
@@ -85,7 +86,7 @@ export class CleanupControlBlocks extends LitElement {
   @property({ type: Array })
   unreferencedControls: Element[] = [];
 
-  @property()
+  @property({ attribute: false })
   selectedControlItems: MWCListIndex | [] = [];
 
   @query('.deleteButton')
@@ -118,7 +119,9 @@ export class CleanupControlBlocks extends LitElement {
    */
   private toggleHiddenClass(selectorType: string) {
     this.cleanupList!.querySelectorAll(`.${selectorType}`).forEach(element => {
-      element.classList.toggle('hidden');
+      element.classList.toggle('hiddenontypefilter');
+      if (element.hasAttribute('disabled')) element.removeAttribute('disabled');
+      else element.setAttribute('disabled', 'true');
     });
   }
 
@@ -164,7 +167,13 @@ export class CleanupControlBlocks extends LitElement {
   private renderListItem(controlBlock: Element): TemplateResult {
     return html`<mwc-check-list-item
       twoline
-      class="cleanupListItem t${controlBlock.tagName}"
+      class="${classMap({
+        cleanupListItem: true,
+        tReportControl: controlBlock.tagName === 'ReportControl',
+        tLogControl: controlBlock.tagName === 'LogControl',
+        tGSEControl: controlBlock.tagName === 'GSEControl',
+        tSampledValueControl: controlBlock.tagName === 'SampledValueControl',
+      })}"
       value="${identity(controlBlock)}"
       graphic="large"
       ><span class="unreferencedControl"
@@ -228,13 +237,15 @@ export class CleanupControlBlocks extends LitElement {
    * @returns html for the Delete Button of this container.
    */
   private renderDeleteButton(): TemplateResult {
+    const sizeSelectedItems = (<Set<number>>this.selectedControlItems).size;
+
     return html`<mwc-button
       outlined
       icon="delete"
       class="deleteButton"
-      label="${translate('cleanup.unreferencedControls.deleteButton')} (${(<
-        Set<number>
-      >this.selectedControlItems).size || '0'})"
+      label="${translate(
+        'cleanup.unreferencedControls.deleteButton'
+      )} (${sizeSelectedItems || '0'})"
       ?disabled=${(<Set<number>>this.selectedControlItems).size === 0 ||
       (Array.isArray(this.selectedControlItems) &&
         !this.selectedControlItems.length)}
@@ -399,22 +410,12 @@ export class CleanupControlBlocks extends LitElement {
       opacity: 1;
     }
 
-    /* items are disabled if the filter is deselected */
-    .tGSEControl,
-    .tSampledValueControl,
-    .tLogControl,
-    .tReportControl {
+    /* Make sure to type filter here
+    .hidden is set on string filter in filtered-list and must always filter*/
+    .cleanupListItem.hiddenontypefilter:not(.hidden) {
       display: none;
     }
 
-    /* items enabled if filter is selected */
-    .tGSEControlFilter[on] ~ .cleanupList > .tGSEControl,
-    .tSampledValueControlFilter[on] ~ .cleanupList > .tSampledValueControl,
-    .tLogControlFilter[on] ~ .cleanupList > .tLogControl,
-    .tReportControlFilter[on] ~ .cleanupList > .tReportControl {
-      display: flex;
-    }
-
     /* filter disabled, Material Design guidelines for opacity */
     .tGSEControlFilter,
     .tSampledValueControlFilter,

src/editors/cleanup/datasets-container.ts

@@ -38,7 +38,7 @@ import { cleanSCLItems, identitySort } from './foundation.js';
 @customElement('cleanup-datasets')
 export class CleanupDatasets extends LitElement {
   /** The document being edited as provided to plugins by [[`OpenSCD`]]. */
-  @property()
+  @property({ attribute: false })
   doc!: XMLDocument;
 
   @property({ type: Boolean })
@@ -47,7 +47,7 @@ export class CleanupDatasets extends LitElement {
   @property({ type: Array })
   unreferencedDataSets: Element[] = [];
 
-  @property()
+  @property({ attribute: false })
   selectedDatasetItems: MWCListIndex | [] = [];
 
   @query('.deleteButton')
@@ -107,13 +107,15 @@ export class CleanupDatasets extends LitElement {
    * @returns html for the Delete Button of this container.
    */
   private renderDeleteButton(): TemplateResult {
+    const sizeSelectedItems = (<Set<number>>this.selectedDatasetItems).size;
+
     return html` <mwc-button
       outlined
       icon="delete"
       class="deleteButton cleanupDeleteButton"
-      label="${translate('cleanup.unreferencedDataSets.deleteButton')} (${(<
-        Set<number>
-      >this.selectedDatasetItems).size || '0'})"
+      label="${translate(
+        'cleanup.unreferencedDataSets.deleteButton'
+      )} (${sizeSelectedItems || '0'})"
       ?disabled=${(<Set<number>>this.selectedDatasetItems).size === 0 ||
       (Array.isArray(this.selectedDatasetItems) &&
         !this.selectedDatasetItems.length)}

test/unit/editors/cleanup/__snapshots__/control-blocks-container.test.snap.js

@@ -241,8 +241,9 @@ snapshots["Cleanup: Control Blocks Container With a test file loaded looks like
         </mwc-icon>
       </mwc-check-list-item>
       <mwc-check-list-item
-        aria-disabled="false"
-        class="cleanupListItem hidden tReportControl"
+        aria-disabled="true"
+        class="cleanupListItem hiddenontypefilter tReportControl"
+        disabled=""
         graphic="large"
         mwc-list-item=""
         tabindex="-1"