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"
|
v-bind="component.props"
|
||||||
:attributes="attributes"
|
:attributes="attributes"
|
||||||
:insertable="insertable"
|
:insertable="insertable"
|
||||||
|
:reverse="reverse"
|
||||||
@edit="processChange"
|
@edit="processChange"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -42,6 +43,10 @@ export default defineComponent({
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
reverse: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
components(): ComponentOptions[] {
|
components(): ComponentOptions[] {
|
||||||
|
|
|
@ -2,18 +2,23 @@
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<table>
|
<table>
|
||||||
<colgroup>
|
<colgroup>
|
||||||
<col class="attr-action-col" />
|
<col v-if="editable" class="attr-action-col" />
|
||||||
<col class="attr-col" />
|
<col class="attr-col" />
|
||||||
<col />
|
<col />
|
||||||
</colgroup>
|
</colgroup>
|
||||||
|
<template v-if="!reverse">
|
||||||
<tr>
|
<tr>
|
||||||
<th></th>
|
<th v-if="editable"></th>
|
||||||
<th>Attribute</th>
|
<th>Attribute</th>
|
||||||
<th>Value</th>
|
<th>Value</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr v-for="[id, entry] in limitedAttributes" :key="id">
|
<tr v-for="[id, entry] in limitedAttributes" :key="id">
|
||||||
<td class="attr-action">
|
<td v-if="editable" class="attr-action">
|
||||||
<sl-icon-button name="x-circle" @click="removeEntry(id)" />
|
<sl-icon-button
|
||||||
|
v-if="deletable"
|
||||||
|
name="x-circle"
|
||||||
|
@click="removeEntry(id)"
|
||||||
|
/>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<Marquee>{{ entry.attribute }}</Marquee>
|
<Marquee>{{ entry.attribute }}</Marquee>
|
||||||
|
@ -39,8 +44,11 @@
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr v-if="attributes.length > currentDisplay">
|
<tr v-if="attributes.length > currentDisplay">
|
||||||
<td colspan="3">
|
<td :colspan="editable ? 3 : 2">
|
||||||
<sl-button class="more-button" @click="currentDisplay += MAX_DISPLAY">
|
<sl-button
|
||||||
|
class="more-button"
|
||||||
|
@click="currentDisplay += MAX_DISPLAY"
|
||||||
|
>
|
||||||
+ {{ attributes.length - currentDisplay }} more...
|
+ {{ attributes.length - currentDisplay }} more...
|
||||||
</sl-button>
|
</sl-button>
|
||||||
</td>
|
</td>
|
||||||
|
@ -56,6 +64,23 @@
|
||||||
<sl-input v-sl-model:newEntryValue size="small" />
|
<sl-input v-sl-model:newEntryValue size="small" />
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</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>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -94,6 +119,10 @@ export default defineComponent({
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
reverse: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -102,6 +131,10 @@ export default defineComponent({
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
|
const editable = computed(() => {
|
||||||
|
return (props.deletable || props.insertable) && !props.reverse;
|
||||||
|
});
|
||||||
|
|
||||||
// Enable IntersectionObserver for performance reasons
|
// Enable IntersectionObserver for performance reasons
|
||||||
const addressEls = ref<InstanceType<typeof Address>[]>([]);
|
const addressEls = ref<InstanceType<typeof Address>[]>([]);
|
||||||
const resolve = reactive<{ [key: string]: boolean }>({});
|
const resolve = reactive<{ [key: string]: boolean }>({});
|
||||||
|
@ -129,6 +162,7 @@ export default defineComponent({
|
||||||
});
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
editable,
|
||||||
addressEls,
|
addressEls,
|
||||||
resolve,
|
resolve,
|
||||||
limitedAttributes,
|
limitedAttributes,
|
||||||
|
|
|
@ -41,22 +41,7 @@
|
||||||
<template v-if="backlinks.length">
|
<template v-if="backlinks.length">
|
||||||
<section class="backlinks">
|
<section class="backlinks">
|
||||||
<h3>Referred to ({{ backlinks.length }})</h3>
|
<h3>Referred to ({{ backlinks.length }})</h3>
|
||||||
<table>
|
<AttributeView :address="address" :attributes="backlinks" reverse />
|
||||||
<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>
|
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue