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

also make backlinks a Table

feat/vaults
Tomáš Mládek 2021-07-03 20:43:08 +02:00
parent bd2ce5462f
commit 7785671684
3 changed files with 89 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/src/components/AttributeView.vue
View File

@ -7,6 +7,7 @@
v-bind="component.props"
:attributes="attributes"
:insertable="insertable"
:reverse="reverse"
@edit="processChange"
/>
</div>
@ -42,6 +43,10 @@ export default defineComponent({
type: Boolean,
default: false,
},
reverse: {
type: Boolean,
default: false,
},
},
computed: {
components(): ComponentOptions[] {

132
ui/src/components/widgets/Table.vue
View File

@ -2,60 +2,85 @@
<div class="table">
<table>
<colgroup>
<col class="attr-action-col" />
<col v-if="editable" class="attr-action-col" />
<col class="attr-col" />
<col />
</colgroup>
<tr>
<th></th>
<th>Attribute</th>
<th>Value</th>
</tr>
<tr v-for="[id, entry] in limitedAttributes" :key="id">
<td class="attr-action">
<sl-icon-button name="x-circle" @click="removeEntry(id)" />
</td>
<td>
<Marquee>{{ entry.attribute }}</Marquee>
</td>
<td>
<Address
link
v-if="entry.value.t === 'Address'"
:address="entry.value.c"
:resolve="Boolean(resolve[id])"
:data-id="id"
:ref="
(el) => {
if (el) addressEls.push(el);
}
"
/>
<template v-else>
<template v-if="!reverse">
<tr>
<th v-if="editable"></th>
<th>Attribute</th>
<th>Value</th>
</tr>
<tr v-for="[id, entry] in limitedAttributes" :key="id">
<td v-if="editable" class="attr-action">
<sl-icon-button
v-if="deletable"
name="x-circle"
@click="removeEntry(id)"
/>
</td>
<td>
<Marquee>{{ entry.attribute }}</Marquee>
</td>
<td>
<Address
link
v-if="entry.value.t === 'Address'"
:address="entry.value.c"
:resolve="Boolean(resolve[id])"
:data-id="id"
:ref="
(el) => {
if (el) addressEls.push(el);
}
"
/>
<template v-else>
<Marquee>
{{ entry.value.c }}
</Marquee>
</template>
</td>
</tr>
<tr v-if="attributes.length > currentDisplay">
<td :colspan="editable ? 3 : 2">
<sl-button
class="more-button"
@click="currentDisplay += MAX_DISPLAY"
>
+ {{ attributes.length - currentDisplay }} more...
</sl-button>
</td>
</tr>
<tr v-if="insertable">
<td class="attr-action">
<sl-icon-button name="plus-circle" @click="addEntry()" />
</td>
<td>
<sl-input v-sl-model:newEntryAttribute size="small" />
</td>
<td>
<sl-input v-sl-model:newEntryValue size="small" />
</td>
</tr>
</template>
<template v-else>
<tr>
<th>Entities</th>
<th>Attribute name</th>
</tr>
<tr v-for="[id, entry] in attributes" :key="id">
<td>
<Address link :address="entry.entity" />
</td>
<td>
<Marquee>
{{ entry.value.c }}
{{ entry.attribute }}
</Marquee>
</template>
</td>
</tr>
<tr v-if="attributes.length > currentDisplay">
<td colspan="3">
<sl-button class="more-button" @click="currentDisplay += MAX_DISPLAY">
+ {{ attributes.length - currentDisplay }} more...
</sl-button>
</td>
</tr>
<tr v-if="insertable">
<td class="attr-action">
<sl-icon-button name="plus-circle" @click="addEntry()" />
</td>
<td>
<sl-input v-sl-model:newEntryAttribute size="small" />
</td>
<td>
<sl-input v-sl-model:newEntryValue size="small" />
</td>
</tr>
</td>
</tr>
</template>
</table>
</div>
</template>
@ -94,6 +119,10 @@ export default defineComponent({
type: Boolean,
default: false,
},
reverse: {
type: Boolean,
default: false,
},
},
data() {
return {
@ -102,6 +131,10 @@ export default defineComponent({
};
},
setup(props) {
const editable = computed(() => {
return (props.deletable || props.insertable) && !props.reverse;
});
// Enable IntersectionObserver for performance reasons
const addressEls = ref<InstanceType<typeof Address>[]>([]);
const resolve = reactive<{ [key: string]: boolean }>({});
@ -129,6 +162,7 @@ export default defineComponent({
});
return {
editable,
addressEls,
resolve,
limitedAttributes,

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

@ -41,22 +41,7 @@
<template v-if="backlinks.length">
<section class="backlinks">
<h3>Referred to ({{ backlinks.length }})</h3>
<table>
<tr>
<th>Entities</th>
<th>Attribute names</th>
</tr>
<tr v-for="[id, entry] in backlinks" :key="id">
<td>
<Address link :address="entry.entity" />
</td>
<td>
<Marquee>
{{ entry.attribute }}
</Marquee>
</td>
</tr>
</table>
<AttributeView :address="address" :attributes="backlinks" reverse />
</section>
</template>
</div>