Show error messages on create/edit

src/components/domains/ARow.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {isAaaaRecord, isARecord, type AaaaValue, type ApiRecordFormat, type AValue} from "../../types/records";
+  import {isARecord, type AaaaValue, type ApiRecordFormat, type AValue} from "../../types/records";
   import type {RestItem} from "../../utils/rest-table";
   import ActionMenu from "../ActionMenu.svelte";
   import ActionPopup from "../ActionPopup.svelte";
@@ -14,9 +14,17 @@
   };
 
   let editPopup: boolean = false;
+  let errorMessage: string | null = null;
 
   function save() {
-    item.update(editItem);
+    item
+      .update(editItem)
+      .then(() => {
+        editPopup = false;
+      })
+      .catch(x => {
+        errorMessage = x;
+      });
   }
 </script>
 
@@ -36,6 +44,10 @@
 
     <ActionPopup name="Edit {isARecord(item.data) ? 'A' : 'AAAA'} Record" bind:show={editPopup} on:save={save}>
       <ACreate bind:editItem editMode={true} />
+
+      {#if errorMessage}
+        <div>{errorMessage}</div>
+      {/if}
     </ActionPopup>
   </td>
 </tr>

src/components/domains/CaaRow.svelte

@@ -18,9 +18,17 @@
   };
 
   let editPopup: boolean = false;
+  let errorMessage: string | null = null;
 
   function save() {
-    item.update(editItem);
+    item
+      .update(editItem)
+      .then(() => {
+        editPopup = false;
+      })
+      .catch(x => {
+        errorMessage = x;
+      });
   }
 </script>
 
@@ -41,6 +49,10 @@
 
     <ActionPopup name="Edit CAA Record" bind:show={editPopup} on:save={save}>
       <CaaCreate bind:editItem editMode={true} />
+
+      {#if errorMessage}
+        <div>{errorMessage}</div>
+      {/if}
     </ActionPopup>
   </td>
 </tr>

src/components/domains/CnameRow.svelte

@@ -14,9 +14,17 @@
   };
 
   let editPopup: boolean = false;
+  let errorMessage: string | null = null;
 
   function save() {
-    item.update(editItem);
+    item
+      .update(editItem)
+      .then(() => {
+        editPopup = false;
+      })
+      .catch(x => {
+        errorMessage = x;
+      });
   }
 </script>
 
@@ -36,6 +44,10 @@
 
     <ActionPopup name="Edit CNAME Record" bind:show={editPopup} on:save={save}>
       <CnameCreate bind:editItem editMode={true} />
+
+      {#if errorMessage}
+        <div>{errorMessage}</div>
+      {/if}
     </ActionPopup>
   </td>
 </tr>

src/components/domains/MxRow.svelte

@@ -17,9 +17,17 @@
   };
 
   let editPopup: boolean = false;
+  let errorMessage: string | null = null;
 
   function save() {
-    item.update(editItem);
+    item
+      .update(editItem)
+      .then(() => {
+        editPopup = false;
+      })
+      .catch(x => {
+        errorMessage = x;
+      });
   }
 </script>
 
@@ -40,6 +48,10 @@
 
     <ActionPopup name="Edit MX Record" bind:show={editPopup} on:save={save}>
       <MxCreate bind:editItem editMode={true} />
+
+      {#if errorMessage}
+        <div>{errorMessage}</div>
+      {/if}
     </ActionPopup>
   </td>
 </tr>

src/components/domains/NsRow.svelte

@@ -15,9 +15,17 @@
 
   let editPopup: boolean = false;
   export let locked: boolean = false;
+  let errorMessage: string | null = null;
 
   function save() {
-    item.update(editItem);
+    item
+      .update(editItem)
+      .then(() => {
+        editPopup = false;
+      })
+      .catch(x => {
+        errorMessage = x;
+      });
   }
 </script>
 
@@ -39,6 +47,10 @@
 
     <ActionPopup name="Edit SOA Record" bind:show={editPopup} on:save={save}>
       <NsCreate bind:editItem editMode={true} />
+
+      {#if errorMessage}
+        <div>{errorMessage}</div>
+      {/if}
     </ActionPopup>
   </td>
 </tr>

src/components/domains/SoaRow.svelte

@@ -22,9 +22,17 @@
 
   let editPopup: boolean = false;
   export let locked: boolean = false;
+  let errorMessage: string | null = null;
 
   function save() {
-    item.update(editItem);
+    item
+      .update(editItem)
+      .then(() => {
+        editPopup = false;
+      })
+      .catch(x => {
+        errorMessage = x;
+      });
   }
 
   function numLength(n: number) {
@@ -64,6 +72,10 @@
       <div><input type="number" class="code-font" bind:value={editItem.value.retry} size={Math.max(20, numLength(editItem.value.retry))} /></div>
       <div>Expire</div>
       <div><input type="number" class="code-font" bind:value={editItem.value.expire} size={Math.max(20, numLength(editItem.value.expire))} /></div>
+
+      {#if errorMessage}
+        <div>{errorMessage}</div>
+      {/if}
     </ActionPopup>
   </td>
 </tr>

src/components/domains/SrvRow.svelte

@@ -19,9 +19,17 @@
   };
 
   let editPopup: boolean = false;
+  let errorMessage: string | null = null;
 
   function save() {
-    item.update(editItem);
+    item
+      .update(editItem)
+      .then(() => {
+        editPopup = false;
+      })
+      .catch(x => {
+        errorMessage = x;
+      });
   }
 </script>
 
@@ -44,6 +52,10 @@
 
     <ActionPopup name="Edit CNAME Record" bind:show={editPopup} on:save={save}>
       <SrvCreate bind:editItem editMode={true} />
+
+      {#if errorMessage}
+        <div>{errorMessage}</div>
+      {/if}
     </ActionPopup>
   </td>
 </tr>

src/components/domains/TxtRow.svelte

@@ -15,9 +15,17 @@
   };
 
   let editPopup: boolean = false;
+  let errorMessage: string | null = null;
 
   function save() {
-    item.update(editItem);
+    item
+      .update(editItem)
+      .then(() => {
+        editPopup = false;
+      })
+      .catch(x => {
+        errorMessage = x;
+      });
   }
 </script>
 
@@ -37,6 +45,10 @@
 
     <ActionPopup name="Edit TXT Record" bind:show={editPopup} on:save={save}>
       <TxtCreate bind:editItem editMode={true} />
+
+      {#if errorMessage}
+        <div>{errorMessage}</div>
+      {/if}
     </ActionPopup>
   </td>
 </tr>

src/utils/rest-table.ts

@@ -58,13 +58,11 @@ export class RestTable<T extends object> implements IPromiseLike<RestTable<T>> {
     })();
   }
 
-  addItem(item: T) {
-    (async () => {
-      let f = await LOGIN.clientRequest(this.apiUrl, {method: "POST", body: JSON.stringify(item)});
-      if (f.status !== 200) throw new Error("Unexpected status code: " + f.status);
-      this.rows.push(new RestItem(this, item));
-      this.updateSubs();
-    })();
+  async addItem(item: T): Promise<void> {
+    let f = await LOGIN.clientRequest(this.apiUrl, {method: "POST", body: JSON.stringify(item)});
+    if (f.status !== 201) throw new Error("Unexpected status code: " + f.status);
+    this.rows.push(new RestItem(this, item));
+    this.updateSubs();
   }
 
   subscribe(run: Subscriber<RestTable<T>>): Unsubscriber {

src/views/DomainTableView.svelte

@@ -20,10 +20,18 @@
 
   let createItem: ApiRecordFormat<T> | null = emptyRecord == null ? null : emptyRecord();
   let createPopup: boolean = false;
+  let errorMessage: string | null = null;
 
   function createRecord() {
     if (createItem == null) return;
-    table.addItem(createItem);
+    table
+      .addItem(createItem)
+      .then(() => {
+        createPopup = false;
+      })
+      .catch(x => {
+        errorMessage = x;
+      });
   }
 </script>
 
@@ -34,6 +42,10 @@
 
     <ActionPopup name="Create {recordName} Record" bind:show={createPopup} on:save={createRecord}>
       <slot name="create" editItem={createItem} editMode={false} />
+
+      {#if errorMessage}
+        <div>{errorMessage}</div>
+      {/if}
     </ActionPopup>
   {/if}
 </div>
@@ -51,7 +63,7 @@
         </tr>
 
         <tr slot="error" let:reason class="empty-row">
-          <td colspan="100">Error loading row for {item.data.Hdr.Name}: {reason}</td>
+          <td colspan="100">Error loading row for {item.data.name} ({item.data.id}): {reason}</td>
         </tr>
 
         <slot name="row" slot="ok" let:value {value} />