feat: save searchValue on editor change

Author: noraeb

editors/dataset/data-set-editor.ts

@@ -38,15 +38,6 @@ export class DataSetEditor extends ScopedElementsMixin(LitElement) {
 
   @property({ type: String }) searchValue = '';
 
-  private handleSearchChange = (event: CustomEvent) => {
-    this.dispatchEvent(
-      new CustomEvent('search-change', {
-        detail: event.detail,
-        bubbles: true,
-      })
-    );
-  };
-
   @state()
   selectedDataSet?: Element;
 
@@ -72,6 +63,13 @@ export class DataSetEditor extends ScopedElementsMixin(LitElement) {
     super.update(props);
   } */
 
+  updated(changedProps: Map<string | number | symbol, unknown>) {
+    super.updated?.(changedProps);
+    if (changedProps.has('searchValue') && this.selectionList) {
+      this.selectionList.searchValue = this.searchValue;
+    }
+  }
+
   private renderElementEditorContainer(): TemplateResult {
     if (this.selectedDataSet)
       return html`<div class="elementeditorcontainer">
@@ -148,8 +146,6 @@ export class DataSetEditor extends ScopedElementsMixin(LitElement) {
     return html`<action-list
       class="selectionlist"
       .items=${items}
-      .searchValue=${this.searchValue}
-      @search-change=${this.handleSearchChange}
       filterable
       searchhelper="Filter DataSet's"
     ></action-list>`;

editors/gsecontrol/gse-control-editor.ts

@@ -40,15 +40,6 @@ export class GseControlEditor extends BaseElementEditor {
 
   @property({ type: String }) searchValue = '';
 
-  private handleSearchChange = (event: CustomEvent) => {
-    this.dispatchEvent(
-      new CustomEvent('search-change', {
-        detail: event.detail,
-        bubbles: true,
-      })
-    );
-  };
-
   @query('.selectionlist') selectionList!: ActionList;
 
   @query('.change.scl.element') selectGSEControlButton!: MdOutlinedButton;
@@ -80,6 +71,13 @@ export class GseControlEditor extends BaseElementEditor {
     }
   } */
 
+  updated(changedProps: Map<string | number | symbol, unknown>) {
+    super.updated?.(changedProps);
+    if (changedProps.has('searchValue') && this.selectionList) {
+      this.selectionList.searchValue = this.searchValue;
+    }
+  }
+
   protected renderElementEditorContainer(): TemplateResult {
     if (this.selectCtrlBlock !== undefined)
       return html`<div class="elementeditorcontainer">
@@ -197,8 +195,6 @@ export class GseControlEditor extends BaseElementEditor {
         filterable
         searchhelper="Filter GSEControl's"
         .items=${items}
-        .searchValue=${this.searchValue}
-        @search-change=${this.handleSearchChange}
       ></action-list>`;
   }
 

editors/report/report-control-editor.ts

@@ -41,17 +41,6 @@ export class ReportControlEditor extends BaseElementEditor {
     'md-checkbox': MdCheckbox,
   };
 
-  @property({ type: String }) searchValue = '';
-
-  private handleSearchChange = (event: CustomEvent) => {
-    this.dispatchEvent(
-      new CustomEvent('search-change', {
-        detail: event.detail,
-        bubbles: true,
-      })
-    );
-  };
-
   @query('.selectionlist') selectionList!: ActionList;
 
   @query('.change.scl.element') selectReportControlButton!: MdOutlinedButton;
@@ -62,6 +51,8 @@ export class ReportControlEditor extends BaseElementEditor {
   @query('data-set-element-editor')
   dataSetElementEditor!: DataSetElementEditor;
 
+  @property({ type: String }) searchValue = '';
+
   /** Resets selected Report and its DataSet, if not existing in new doc 
   update(props: Map<string | number | symbol, unknown>): void {
     super.update(props);
@@ -87,6 +78,13 @@ export class ReportControlEditor extends BaseElementEditor {
     }
   } */
 
+  updated(changedProps: Map<string | number | symbol, unknown>) {
+    super.updated?.(changedProps);
+    if (changedProps.has('searchValue') && this.selectionList) {
+      this.selectionList.searchValue = this.searchValue;
+    }
+  }
+
   private renderElementEditorContainer(): TemplateResult {
     if (this.selectCtrlBlock !== undefined)
       return html`<div class="elementeditorcontainer">
@@ -204,8 +202,6 @@ export class ReportControlEditor extends BaseElementEditor {
         filterable
         searchhelper="Filter ReportControl's"
         .items=${items}
-        .searchValue=${this.searchValue}
-        @search-change=${this.handleSearchChange}
       ></action-list>`;
   }
 

editors/sampledvalue/sampled-value-control-editor.ts

@@ -47,15 +47,6 @@ export class SampledValueControlEditor extends BaseElementEditor {
 
   @property({ type: String }) searchValue = '';
 
-  private handleSearchChange = (event: CustomEvent) => {
-    this.dispatchEvent(
-      new CustomEvent('search-change', {
-        detail: event.detail,
-        bubbles: true,
-      })
-    );
-  };
-
   @query('.selectionlist') selectionList!: ActionList;
 
   @query('.change.scl.element')
@@ -92,6 +83,13 @@ export class SampledValueControlEditor extends BaseElementEditor {
     }
   } */
 
+  updated(changedProps: Map<string | number | symbol, unknown>) {
+    super.updated?.(changedProps);
+    if (changedProps.has('searchValue') && this.selectionList) {
+      this.selectionList.searchValue = this.searchValue;
+    }
+  }
+
   private renderElementEditorContainer(): TemplateResult {
     if (this.selectCtrlBlock !== undefined)
       return html`<div class="elementeditorcontainer">
@@ -197,8 +195,6 @@ export class SampledValueControlEditor extends BaseElementEditor {
         filterable
         searchhelper="Filter SampledValueControl's"
         .items=${items}
-        .searchValue=${this.searchValue}
-        @search-change=${this.handleSearchChange}
       ></action-list>`;
   }
 

oscd-publisher.ts

@@ -11,8 +11,17 @@ import { GseControlEditor } from './editors/gsecontrol/gse-control-editor.js';
 import { ReportControlEditor } from './editors/report/report-control-editor.js';
 import { SampledValueControlEditor } from './editors/sampledvalue/sampled-value-control-editor.js';
 
+const EditorSelector = {
+  Report: 'report-control-editor',
+  GOOSE: 'gse-control-editor',
+  SampledValue: 'sampled-value-control-editor',
+  DataSet: 'data-set-editor',
+} as const;
+
 type PublisherType = 'Report' | 'GOOSE' | 'SampledValue' | 'DataSet';
 
+type EditorSelectorType = (typeof EditorSelector)[keyof typeof EditorSelector];
+
 /** An editor [[`plugin`]] to configure `Report`, `GOOSE`, `SampledValue` control blocks and its `DataSet` */
 export default class PublisherPlugin extends ScopedElementsMixin(LitElement) {
   static scopedElements = {
@@ -47,7 +56,20 @@ export default class PublisherPlugin extends ScopedElementsMixin(LitElement) {
       this.requestUpdate();
     };
 
+  private saveCurrentSearchValue() {
+    const selector: EditorSelectorType = EditorSelector[this.publisherType];
+    const editor = this.renderRoot.querySelector(selector) as {
+      selectionList?: { searchValue: string };
+    } | null;
+
+    if (editor) {
+      this.filterValues[this.publisherType] =
+        editor.selectionList?.searchValue || '';
+    }
+  }
+
   private handlePublisherTypeChange(newType: PublisherType) {
+    this.saveCurrentSearchValue();
     this.publisherType = newType;
   }