thm
/
upend
1
0
Fork 0
Code Issues 73 Pull Requests Packages Projects Releases 5 Wiki Activity

add button to delete attribute in Inspect.vue

feat/vaults
Tomáš Mládek 2021-02-21 17:38:56 +01:00
parent dc05b05873
commit 367698bfbe
1 changed files with 26 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
ui/src/views/Inspect.vue
View File

@ -1,17 +1,21 @@
<template>
<div class="inspect">
<h2>
<Address :address="address" :is-file="backlinks.some((e) => e.key === 'FILE_IS')"/>
<Address :address="address" :is-file="backlinks.some(([_, e]) => e.key === 'FILE_IS')"/>
</h2>
<div v-if="!error">
<template v-if="attributes.length">
<h3>Own attributes ({{ attributes.length }})</h3>
<table>
<tr>
<th></th>
<th>Key name</th>
<th>Value</th>
</tr>
<tr v-for="entry in attributes">
<tr v-for="[id, entry] in attributes">
<td>
<sl-icon-button name="x-circle" @click="removeAttribute(id)"/>
</td>
<td>{{ entry.key }}</td>
<td>
<Address link v-if="entry.value.t === 'Address'" :address="entry.value.c"/>
@ -29,7 +33,7 @@
<th>Targets</th>
<th>Key names</th>
</tr>
<tr v-for="entry in backlinks">
<tr v-for="[id, entry] in backlinks">
<td>
<Address link :address="entry.target"/>
</td>
@ -61,34 +65,40 @@ export default defineComponent({
props: {
"address": String
},
data: () => {
return {};
},
computed: {
objectEntries(): IEntry[] {
objectEntries(): [string, IEntry][] {
if (this.data) {
const entries = Object.values(this.data) as IEntry[];
const entries = Object.entries(this.data) as [string, IEntry][];
return entries
.sort((a, b) => a.value.c.localeCompare(b.value.c))
.sort((a, b) => a.value.t.localeCompare(b.value.t))
.sort((a, b) => a.key.localeCompare(b.key));
.sort(([_, a], [__, b]) => a.value.c.localeCompare(b.value.c))
.sort(([_, a], [__, b]) => a.value.t.localeCompare(b.value.t))
.sort(([_, a], [__, b]) => a.key.localeCompare(b.key));
} else {
return [];
}
},
attributes(): IEntry[] {
return this.objectEntries.filter((e) => e.target === this.address);
attributes(): [string, IEntry][] {
return this.objectEntries.filter(([_, e]) => e.target === this.address);
},
backlinks(): IEntry[] {
return this.objectEntries.filter((e) => e.target !== this.address);
backlinks(): [string, IEntry][] {
return this.objectEntries.filter(([_, e]) => e.target !== this.address);
}
},
methods: {
async removeAttribute(id: string) {
if (confirm("Are you sure you want to remove the attribute?")) {
await fetch(`/api/obj/${id}`, {method: "DELETE"});
await this.mutate();
}
}
},
setup(props) {
const {data, error} = useSWRV<ListingResult, unknown>(() => `/api/obj/${props.address}`, fetcher);
const {data, error, mutate} = useSWRV<ListingResult, unknown>(() => `/api/obj/${props.address}`, fetcher);
return {
data,
error,
mutate
};
}
});