also make backlinks a Table
This commit is contained in:
parent
bd2ce5462f
commit
7785671684
3 changed files with 89 additions and 65 deletions
|
@ -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[] {
|
||||
|
|
|
@ -2,18 +2,23 @@
|
|||
<div class="table">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col class="attr-action-col" />
|
||||
<col v-if="editable" class="attr-action-col" />
|
||||
<col class="attr-col" />
|
||||
<col />
|
||||
</colgroup>
|
||||
<template v-if="!reverse">
|
||||
<tr>
|
||||
<th></th>
|
||||
<th v-if="editable"></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 v-if="editable" class="attr-action">
|
||||
<sl-icon-button
|
||||
v-if="deletable"
|
||||
name="x-circle"
|
||||
@click="removeEntry(id)"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<Marquee>{{ entry.attribute }}</Marquee>
|
||||
|
@ -39,8 +44,11 @@
|
|||
</td>
|
||||
</tr>
|
||||
<tr v-if="attributes.length > currentDisplay">
|
||||
<td colspan="3">
|
||||
<sl-button class="more-button" @click="currentDisplay += MAX_DISPLAY">
|
||||
<td :colspan="editable ? 3 : 2">
|
||||
<sl-button
|
||||
class="more-button"
|
||||
@click="currentDisplay += MAX_DISPLAY"
|
||||
>
|
||||
+ {{ attributes.length - currentDisplay }} more...
|
||||
</sl-button>
|
||||
</td>
|
||||
|
@ -56,6 +64,23 @@
|
|||
<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.attribute }}
|
||||
</Marquee>
|
||||
</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,
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue