Show error messages on create/edit

This commit is contained in:
Melon 2024-08-03 00:43:06 +01:00
parent 5c943c6636
commit d2c633b0d0
Signed by: melon
GPG Key ID: 6C9D970C50D26A25
10 changed files with 124 additions and 18 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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 {

View File

@ -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} />