[ui] basic table editing
parent
738cc81e0a
commit
0fbb5ac9c4
|
@ -5,7 +5,8 @@
|
|||
import type { Component, UpType, Widget } from "../lib/types";
|
||||
import Table from "./widgets/Table.svelte";
|
||||
import TableComponent from "./widgets/Table.svelte"; // silence false svelte(reactive-component) warnings
|
||||
const dispatcher = createEventDispatcher();
|
||||
import type { AttributeChange } from "../types/base";
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let attributes: [string, IEntry][];
|
||||
export let type: UpType | undefined = undefined;
|
||||
|
@ -43,8 +44,30 @@
|
|||
)!.components;
|
||||
}
|
||||
|
||||
function processChange() {
|
||||
// noop
|
||||
async function onChange(change: AttributeChange) {
|
||||
switch (change.type) {
|
||||
case "create":
|
||||
await fetch(`/api/obj`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
entity: address,
|
||||
attribute: change.attribute,
|
||||
value: {
|
||||
t: "Value",
|
||||
c: change.value,
|
||||
},
|
||||
}),
|
||||
});
|
||||
break;
|
||||
case "delete":
|
||||
await fetch(`/api/obj/${change.addr}`, { method: "DELETE" });
|
||||
break;
|
||||
default:
|
||||
console.error("Unimplemented AttributeChange", change);
|
||||
return;
|
||||
}
|
||||
dispatch("changed");
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -82,7 +105,7 @@
|
|||
{...component.props || {}}
|
||||
{attributes}
|
||||
{editable}
|
||||
on:edit={processChange}
|
||||
on:change={(ev) => onChange(ev.detail)}
|
||||
/>
|
||||
{/each}
|
||||
{:else}
|
||||
|
|
|
@ -93,7 +93,7 @@
|
|||
{address}
|
||||
type={allTypes[typeAddr]}
|
||||
{attributes}
|
||||
on:edit={revalidate}
|
||||
on:changed={revalidate}
|
||||
/>
|
||||
{/each}
|
||||
{#if filteredUntypedAttributes.length > 0 || editable}
|
||||
|
@ -102,7 +102,7 @@
|
|||
{editable}
|
||||
{address}
|
||||
attributes={untypedAttributes}
|
||||
on:change={revalidate}
|
||||
on:changed={revalidate}
|
||||
/>
|
||||
{/if}
|
||||
{#if $backlinks.length > 0}
|
||||
|
@ -111,6 +111,7 @@
|
|||
{address}
|
||||
attributes={$backlinks}
|
||||
reverse
|
||||
on:changed={revalidate}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
@ -1,10 +1,13 @@
|
|||
<script lang="ts">
|
||||
import filesize from "filesize";
|
||||
import { format, fromUnixTime } from "date-fns";
|
||||
import type { Readable } from "svelte/store";
|
||||
import type { OrderedListing } from "upend/types";
|
||||
import Marquee from "../Marquee.svelte";
|
||||
import Address from "../Address.svelte";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import type { AttributeChange } from "../../types/base";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let columns = "attribute, value";
|
||||
export let header = true;
|
||||
|
@ -26,34 +29,34 @@
|
|||
let newEntryValue = "";
|
||||
|
||||
async function addEntry() {
|
||||
// this.$emit("edit", {
|
||||
// type: "create",
|
||||
// attribute: this.newEntryAttribute,
|
||||
// value: this.newEntryValue,
|
||||
// } as AttributeChange);
|
||||
// this.newEntryAttribute = "";
|
||||
// this.newEntryValue = "";
|
||||
dispatch("change", {
|
||||
type: "create",
|
||||
attribute: newEntryAttribute,
|
||||
value: newEntryValue,
|
||||
} as AttributeChange);
|
||||
newEntryAttribute = "";
|
||||
newEntryValue = "";
|
||||
}
|
||||
async function removeEntry(addr: string) {
|
||||
// if (confirm("Are you sure you want to remove the attribute?")) {
|
||||
// this.$emit("edit", { type: "delete", addr } as AttributeChange);
|
||||
// }
|
||||
if (confirm("Are you sure you want to remove the attribute?")) {
|
||||
dispatch("change", { type: "delete", addr } as AttributeChange);
|
||||
}
|
||||
}
|
||||
async function updateEntry(addr: string, attribute: string, value: string) {
|
||||
// this.$emit("edit", {
|
||||
// type: "update",
|
||||
// addr,
|
||||
// value
|
||||
// } as AttributeChange);
|
||||
// this.$emit("edit", {
|
||||
// type: "delete",
|
||||
// addr,
|
||||
// } as AttributeChange);
|
||||
// this.$emit("edit", {
|
||||
// type: "create",
|
||||
// attribute,
|
||||
// value,
|
||||
// } as AttributeChange);
|
||||
dispatch("change", {
|
||||
type: "update",
|
||||
addr,
|
||||
value,
|
||||
} as AttributeChange);
|
||||
dispatch("change", {
|
||||
type: "delete",
|
||||
addr,
|
||||
} as AttributeChange);
|
||||
dispatch("change", {
|
||||
type: "create",
|
||||
attribute,
|
||||
value,
|
||||
} as AttributeChange);
|
||||
}
|
||||
|
||||
// Sorting
|
||||
|
@ -233,16 +236,22 @@
|
|||
{#if editable}
|
||||
<tr>
|
||||
<td class="attr-action">
|
||||
<sl-icon-button name="plus-circle" on:click={addEntry()} />
|
||||
<sl-icon-button name="plus-circle" on:click={addEntry} />
|
||||
</td>
|
||||
{#if showAttribute}
|
||||
<td>
|
||||
<sl-input v-sl-model:newEntryAttribute size="small" />
|
||||
<sl-input
|
||||
on:sl-input={(ev) => (newEntryAttribute = ev.target.value)}
|
||||
size="small"
|
||||
/>
|
||||
</td>
|
||||
{/if}
|
||||
{#if showValue}
|
||||
<td>
|
||||
<sl-input v-sl-model:newEntryValue size="small" />
|
||||
<sl-input
|
||||
on:sl-input={(ev) => (newEntryValue = ev.target.value)}
|
||||
size="small"
|
||||
/>
|
||||
</td>
|
||||
{/if}
|
||||
</tr>
|
||||
|
|
|
@ -75,25 +75,3 @@ const TYPE_WIDGETS: { [key: string]: Widget } = {
|
|||
],
|
||||
},
|
||||
};
|
||||
|
||||
export type AttributeChange =
|
||||
| AttributeCreate
|
||||
| AttributeUpdate
|
||||
| AttributeDelete;
|
||||
|
||||
export interface AttributeCreate {
|
||||
type: "create";
|
||||
attribute: string;
|
||||
value: any;
|
||||
}
|
||||
|
||||
export interface AttributeUpdate {
|
||||
type: "update";
|
||||
addr: string;
|
||||
value: any;
|
||||
}
|
||||
|
||||
export interface AttributeDelete {
|
||||
type: "delete";
|
||||
addr: string;
|
||||
}
|
||||
|
|
|
@ -0,0 +1,21 @@
|
|||
export type AttributeChange =
|
||||
| AttributeCreate
|
||||
| AttributeUpdate
|
||||
| AttributeDelete;
|
||||
|
||||
export interface AttributeCreate {
|
||||
type: "create";
|
||||
attribute: string;
|
||||
value: any;
|
||||
}
|
||||
|
||||
export interface AttributeUpdate {
|
||||
type: "update";
|
||||
addr: string;
|
||||
value: any;
|
||||
}
|
||||
|
||||
export interface AttributeDelete {
|
||||
type: "delete";
|
||||
addr: string;
|
||||
}
|
Loading…
Reference in New Issue