feat: add prefix field to ln dialog

Author: noraeb

packages/openscd/src/translations/de.ts

@@ -278,6 +278,7 @@ export const de: Translations = {
     addLnDialog: {
       title: 'LN hinzufügen',
       amount: 'Menge',
+      prefix: 'Prefix',
       filter: 'Logical Node Types filtern',
       noResults: 'Keine Logical Node Types gefunden',
     },

packages/openscd/src/translations/en.ts

@@ -275,6 +275,7 @@ export const en = {
     addLnDialog: {
       title: 'Add LN',
       amount: 'Amount',
+      prefix: 'Prefix',
       filter: 'Filter Logical Node Types',
       noResults: 'No Logical Node Types found',
     },

packages/plugins/src/editors/ied/add-ln-dialog.ts

@@ -23,6 +23,7 @@ export interface LNData {
   lnType: string;
   lnClass: string;
   amount: number;
+  prefix?: string;
 }
 
 /** Dialog for adding a new LN to a LDevice. */
@@ -46,6 +47,9 @@ export class AddLnDialog extends LitElement {
   @state()
   filterText = '';
 
+  @state()
+  prefix: string = '';
+
   private get lNodeTypes(): Array<{
     id: string;
     lnClass: string;
@@ -74,21 +78,31 @@ export class AddLnDialog extends LitElement {
     this.lnType = '';
     this.amount = 1;
     this.filterText = '';
+    this.prefix = '';
     this.dialog.show();
   }
 
   private close(): void {
     this.dialog.close();
   }
 
+  private isPrefixValid(prefix: string): boolean {
+    if (prefix === '') return true;
+    if (prefix.length > 11) return false;
+    return /^[A-Za-z][0-9A-Za-z_]*$/.test(prefix);
+  }
+
   private handleCreate(): void {
     const selectedType = this.lNodeTypes.find(t => t.id === this.lnType);
     if (!selectedType) return;
-    this.onConfirm({
+    const data: LNData = {
       lnType: selectedType.id,
       lnClass: selectedType.lnClass,
       amount: this.amount,
-    });
+      ...(this.prefix && { prefix: this.prefix }),
+    };
+
+    this.onConfirm(data);
     this.close();
   }
 
@@ -145,6 +159,19 @@ export class AddLnDialog extends LitElement {
               </mwc-list>
             </div>
           </div>
+          <mwc-textfield
+            label="${translate('iededitor.addLnDialog.prefix')}"
+            type="text"
+            maxlength="11"
+            .value=${this.prefix}
+            @input=${(e: Event) => {
+              e.stopPropagation();
+              this.prefix = (e.target as HTMLInputElement).value;
+            }}
+            pattern="[A-Za-z][0-9A-Za-z_]*"
+            style="width: 100%; margin-top: 12px;"
+            data-testid="prefix"
+          ></mwc-textfield>
           <mwc-textfield
             label=${translate('iededitor.addLnDialog.amount')}
             type="number"
@@ -174,13 +201,17 @@ export class AddLnDialog extends LitElement {
           trailingIcon
           data-testid="add-ln-button"
           @click=${this.handleCreate}
-          ?disabled=${!this.lnType || this.amount < 1 || this.amount % 1 != 0}
+          ?disabled=${!this.lnType ||
+          this.amount < 1 ||
+          this.amount % 1 != 0 ||
+          !this.isPrefixValid(this.prefix)}
         >
           ${translate('add')}
         </mwc-button>
       </mwc-dialog>
     `;
   }
+
   static styles = css`
     .dialog-content {
       margin-top: 16px;

packages/plugins/src/editors/ied/ldevice-container.ts

@@ -91,11 +91,13 @@ export class LDeviceContainer extends Container {
     for (let i = 0; i < data.amount; i++) {
       const inst = getInst(data.lnClass);
       if (!inst) break;
-      const ln = createElement(this.doc, 'LN', {
+      const lnAttrs = {
         lnClass: data.lnClass,
         lnType: data.lnType,
-        inst,
-      });
+        inst: inst,
+        ...(data.prefix ? { prefix: data.prefix } : {}),
+      };
+      const ln = createElement(this.doc, 'LN', lnAttrs);
       inserts.push({ parent: this.element, node: ln, reference: null });
     }
 

packages/plugins/test/unit/editors/ied/__snapshots__/add-ln-dialog.test.snap.js

@@ -37,6 +37,15 @@ snapshots["add-ln-dialog looks like the latest snapshot"] =
         </mwc-list>
       </div>
     </div>
+    <mwc-textfield
+      data-testid="prefix"
+      label="[iededitor.addLnDialog.prefix]"
+      maxlength="11"
+      pattern="[A-Za-z][0-9A-Za-z_]*"
+      style="width: 100%; margin-top: 12px;"
+      type="text"
+    >
+    </mwc-textfield>
     <mwc-textfield
       data-testid="amount"
       label="[iededitor.addLnDialog.amount]"

packages/plugins/test/unit/editors/ied/add-ln-dialog.test.ts

@@ -60,13 +60,22 @@ describe('add-ln-dialog', () => {
       await element.updateComplete;
     }
 
+    const prefixInput = element.shadowRoot?.querySelector(
+      '[data-testid="prefix"]'
+    );
+    (prefixInput as HTMLInputElement).value = 'MyPrefix';
+    (prefixInput as HTMLInputElement).dispatchEvent(
+      new Event('input', { bubbles: true, composed: true })
+    );
+
     const amountInput = element.shadowRoot?.querySelector(
       '[data-testid="amount"]'
     );
     (amountInput as HTMLInputElement).value = '3';
     (amountInput as HTMLInputElement).dispatchEvent(
       new Event('input', { bubbles: true, composed: true })
     );
+
     await element.updateComplete;
     const addButton = element.shadowRoot?.querySelector(
       '[data-testid="add-ln-button"]'
@@ -78,6 +87,7 @@ describe('add-ln-dialog', () => {
     expect(onConfirmSpy.firstCall.args[0]).to.deep.include({
       lnType: 'PlaceholderLLN0',
       lnClass: 'LLN0',
+      prefix: 'MyPrefix',
       amount: 3,
     });
   });