Close Save Dialog only if service call is successful

src/compas/CompasLabelsField.ts

@@ -77,6 +77,16 @@ export class CompasLabelsFieldElement extends LitElement {
     this.requestUpdate('labels');
   }
 
+  public updateLabelsInPrivateElement(privateElement: Element): void {
+    // We will just add or replace the complete Labels Element, so if it exists
+    // first remove it and always add the new one.
+    if (this.originalLabelsElement) {
+      privateElement?.removeChild(this.originalLabelsElement);
+    }
+    privateElement?.append(this.newLabelsElement);
+    this.originalLabelsElement = this.newLabelsElement;
+  }
+
   render(): TemplateResult {
     const labels = this.labels;
     return html`

src/compas/CompasSave.ts

@@ -76,18 +76,14 @@ export default class CompasSaveElement extends CompasExistsIn(LitElement) {
   private updateLabels() {
     const sclElement = this.doc.documentElement;
     const privateElement = getPrivate(sclElement, COMPAS_SCL_PRIVATE_TYPE);
-    // We will just add or replace the complete Labels Element, so if it exists
-    // first remove it and always add the new one.
-    if (this.labelsField.originalLabelsElement) {
-      privateElement?.removeChild(this.labelsField.originalLabelsElement);
-    }
-    privateElement?.append(this.labelsField.newLabelsElement);
+    this.labelsField.updateLabelsInPrivateElement(privateElement!);
   }
 
-  private async addSclToCompas(doc: XMLDocument): Promise<void> {
+  private async addSclToCompas(doc: XMLDocument): Promise<boolean> {
     const name = stripExtensionFromName(this.nameField.value);
     const comment = this.commentField.value;
     const docType = this.sclTypeRadioGroup.getSelectedValue() ?? '';
+    let success = false;
 
     await CompasSclDataService()
       .addSclDocument(docType, { sclName: name, comment: comment, doc: doc })
@@ -101,18 +97,22 @@ export default class CompasSaveElement extends CompasExistsIn(LitElement) {
             title: get('compas.save.addSuccess'),
           })
         );
+        success = true;
       })
       .catch(reason => createLogEvent(this, reason));
+
+    return success;
   }
 
   private async updateSclInCompas(
     docId: string,
     docName: string,
     doc: XMLDocument
-  ): Promise<void> {
+  ): Promise<boolean> {
     const changeSet = this.changeSetRadiogroup.getSelectedValue();
     const comment = this.commentField.value;
     const docType = getTypeFromDocName(docName);
+    let success = false;
 
     await CompasSclDataService()
       .updateSclDocument(docType, docId, {
@@ -130,16 +130,19 @@ export default class CompasSaveElement extends CompasExistsIn(LitElement) {
             title: get('compas.save.updateSuccess'),
           })
         );
+        success = true;
       })
       .catch(reason => createLogEvent(this, reason));
+
+    return success;
   }
 
-  async saveToCompas(): Promise<void> {
+  async saveToCompas(): Promise<boolean> {
     this.updateLabels();
     if (!this.docId || !this.existInCompas) {
-      await this.addSclToCompas(this.doc);
+      return this.addSclToCompas(this.doc);
     } else {
-      await this.updateSclInCompas(this.docId, this.docName, this.doc);
+      return this.updateSclInCompas(this.docId, this.docName, this.doc);
     }
   }
 

src/menu/CompasSave.ts

@@ -34,6 +34,13 @@ export default class CompasSaveMenuPlugin extends LitElement {
     this.dialog.open = true;
   }
 
+  private async saveToCoMPAS(): Promise<void> {
+    const success = await this.compasSaveElement.saveToCompas();
+    if (success) {
+      this.dialog.close();
+    }
+  }
+
   render(): TemplateResult {
     return html`<mwc-dialog
       id="compas-save-dlg"
@@ -55,10 +62,7 @@ export default class CompasSaveMenuPlugin extends LitElement {
               label="${translate('save')}"
               @click=${() => {
                 if (this.compasSaveElement.valid()) {
-                  this.dispatchEvent(
-                    newPendingStateEvent(this.compasSaveElement.saveToCompas())
-                  );
-                  this.dialog.close();
+                  this.dispatchEvent(newPendingStateEvent(this.saveToCoMPAS()));
                 }
               }}
             ></mwc-button>

src/menu/CompasSaveAs.ts

@@ -31,6 +31,13 @@ export default class CompasSaveAsMenuPlugin extends LitElement {
     this.dialog.open = true;
   }
 
+  private async saveToCoMPAS(): Promise<void> {
+    const success = await this.compasSaveElement.saveToCompas();
+    if (success) {
+      this.dialog.close();
+    }
+  }
+
   render(): TemplateResult {
     return html`<mwc-dialog
       id="compas-save-as-dlg"
@@ -48,10 +55,7 @@ export default class CompasSaveAsMenuPlugin extends LitElement {
               label="${translate('save')}"
               @click=${() => {
                 if (this.compasSaveElement.valid()) {
-                  this.dispatchEvent(
-                    newPendingStateEvent(this.compasSaveElement.saveToCompas())
-                  );
-                  this.dialog.close();
+                  this.dispatchEvent(newPendingStateEvent(this.saveToCoMPAS()));
                 }
               }}
             ></mwc-button>

test/unit/compas/CompasLabelsField.test.ts

@@ -39,6 +39,15 @@ describe('compas-labels-field', () => {
       expect(labelElements.length).to.be.equal(1);
     });
 
+    it('when calling updateLabelsInPrivateElement then Private Element is updated', async () => {
+      expect(privateElement.querySelectorAll('Label').length).to.be.equal(0);
+
+      await addLabel(element, 'Label1');
+      element.updateLabelsInPrivateElement(privateElement);
+
+      expect(privateElement.querySelectorAll('Label').length).to.be.equal(1);
+    });
+
     it('looks like the latest snapshot', async () => {
       await expect(element).shadowDom.to.equalSnapshot();
     });
@@ -72,6 +81,15 @@ describe('compas-labels-field', () => {
       expect(labelElements.length).to.be.equal(2);
     });
 
+    it('when calling updateLabelsInPrivateElement then Private Element is updated', async () => {
+      expect(privateElement.querySelectorAll('Label').length).to.be.equal(1);
+
+      await addLabel(element, 'Label2');
+      element.updateLabelsInPrivateElement(privateElement);
+
+      expect(privateElement.querySelectorAll('Label').length).to.be.equal(2);
+    });
+
     it('when removing a label then label element removed', async () => {
       await removeLabel(element, 'Label1');