[ui] refactor table widget
parent
4c9f7572f8
commit
6cfb245c4f
|
|
@ -1,9 +1,10 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher, SvelteComponent } from "svelte";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import type { IEntry } from "upend/types";
|
||||
import UpLink from "./UpLink.svelte";
|
||||
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();
|
||||
|
||||
export let attributes: [string, IEntry][];
|
||||
|
|
@ -23,7 +24,7 @@
|
|||
icon: "table",
|
||||
components: [
|
||||
{
|
||||
component: Table,
|
||||
component: TableComponent,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -73,17 +74,19 @@
|
|||
</div>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
{#each components as component}
|
||||
<svelte:component
|
||||
this={component.component}
|
||||
{...component.props || {}}
|
||||
{attributes}
|
||||
{editable}
|
||||
{reverse}
|
||||
on:edit={processChange}
|
||||
/>
|
||||
{/each}
|
||||
{#if !reverse}
|
||||
{#each components as component}
|
||||
<svelte:component
|
||||
this={component.component}
|
||||
{...component.props || {}}
|
||||
{attributes}
|
||||
{editable}
|
||||
on:edit={processChange}
|
||||
/>
|
||||
{/each}
|
||||
{:else}
|
||||
<Table entity attribute value={false} {attributes} />
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
|
|
@ -6,9 +6,12 @@
|
|||
import Marquee from "../Marquee.svelte";
|
||||
import Address from "../Address.svelte";
|
||||
|
||||
export let entity = false;
|
||||
export let attribute = true;
|
||||
export let value = true;
|
||||
|
||||
export let attributes: OrderedListing;
|
||||
export let editable = false;
|
||||
export let reverse = false;
|
||||
|
||||
let newEntryAttribute = "'";
|
||||
let newEntryValue = "";
|
||||
|
|
@ -72,109 +75,121 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="table">
|
||||
<table class:reverse>
|
||||
<colgroup>
|
||||
{#if editable}
|
||||
<col class="attr-action-col" />
|
||||
{/if}
|
||||
<col class="attr-col" />
|
||||
<col />
|
||||
</colgroup>
|
||||
{#if !reverse}
|
||||
<tr>
|
||||
{#if editable}
|
||||
<th />
|
||||
{/if}
|
||||
<th>Attribute</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
{#each attributes as [id, entry] (id)}
|
||||
<tr>
|
||||
{#if editable}
|
||||
<td class="attr-action">
|
||||
<sl-icon-button name="x-circle" on:click={removeEntry(id)} />
|
||||
</td>
|
||||
{/if}
|
||||
<td class:formatted={Boolean(formatAttribute(entry.attribute))}>
|
||||
<Marquee>
|
||||
{formatAttribute(entry.attribute) || entry.attribute}
|
||||
</Marquee>
|
||||
</td>
|
||||
<td class="value">
|
||||
<text-input
|
||||
{editable}
|
||||
value={entry.value.c}
|
||||
on:edit={(val) => updateEntry(id, entry.attribute, val)}
|
||||
>
|
||||
{#if entry.value.t === "Address"}
|
||||
<Address
|
||||
link
|
||||
address={entry.value.c}
|
||||
resolve={Boolean(resolve[id]) || true}
|
||||
data-id={id}
|
||||
/>
|
||||
{:else}
|
||||
<div
|
||||
class:formatted={Boolean(
|
||||
formatValue(entry.value.c, entry.attribute)
|
||||
)}
|
||||
>
|
||||
<Marquee>
|
||||
{formatValue(entry.value.c, entry.attribute) ||
|
||||
entry.value.c}
|
||||
</Marquee>
|
||||
</div>
|
||||
{/if}
|
||||
</text-input>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
{#if attributes.length > currentDisplay}
|
||||
<tr>
|
||||
<td colspan={editable ? 3 : 2}>
|
||||
<sl-button
|
||||
class="more-button"
|
||||
on:click={(currentDisplay += MAX_DISPLAY)}
|
||||
>
|
||||
+ {attributes.length - currentDisplay} more...
|
||||
</sl-button>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{#if editable}
|
||||
<tr>
|
||||
<td class="attr-action">
|
||||
<sl-icon-button name="plus-circle" on:click={addEntry()} />
|
||||
</td>
|
||||
<td>
|
||||
<sl-input v-sl-model:newEntryAttribute size="small" />
|
||||
</td>
|
||||
<td>
|
||||
<sl-input v-sl-model:newEntryValue size="small" />
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{:else}
|
||||
<tr>
|
||||
<th>Entities</th>
|
||||
<th>Attribute name</th>
|
||||
</tr>
|
||||
{#each attributes as [id, entry] (id)}
|
||||
<tr>
|
||||
<td>
|
||||
<Address link address={entry.entity} />
|
||||
</td>
|
||||
<td>
|
||||
<Marquee>
|
||||
{entry.attribute}
|
||||
</Marquee>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
<table>
|
||||
<colgroup>
|
||||
{#if editable}
|
||||
<col class="attr-action-col" />
|
||||
{/if}
|
||||
</table>
|
||||
</div>
|
||||
{#if entity}
|
||||
<col class="entity-col" />
|
||||
{/if}
|
||||
{#if attribute}
|
||||
<col class="attr-col" />
|
||||
{/if}
|
||||
{#if value}
|
||||
<col class="val-col" />
|
||||
{/if}
|
||||
</colgroup>
|
||||
|
||||
<tr>
|
||||
{#if editable}
|
||||
<th />
|
||||
{/if}
|
||||
{#if entity}
|
||||
<th>Entity</th>
|
||||
{/if}
|
||||
{#if attribute}
|
||||
<th>Attribute</th>
|
||||
{/if}
|
||||
{#if value}
|
||||
<th>Value</th>
|
||||
{/if}
|
||||
</tr>
|
||||
|
||||
{#each attributes as [id, entry] (id)}
|
||||
<tr>
|
||||
{#if editable}
|
||||
<td class="attr-action">
|
||||
<sl-icon-button name="x-circle" on:click={removeEntry(id)} />
|
||||
</td>
|
||||
{/if}
|
||||
|
||||
{#if entity}
|
||||
<td>
|
||||
<Address link address={entry.entity} />
|
||||
</td>
|
||||
{/if}
|
||||
|
||||
{#if attribute}
|
||||
<td class:formatted={Boolean(formatAttribute(entry.attribute))}>
|
||||
<Marquee>
|
||||
{formatAttribute(entry.attribute) || entry.attribute}
|
||||
</Marquee>
|
||||
</td>
|
||||
{/if}
|
||||
|
||||
{#if value}
|
||||
<td class="value">
|
||||
<text-input
|
||||
{editable}
|
||||
value={entry.value.c}
|
||||
on:edit={(val) => updateEntry(id, entry.attribute, val)}
|
||||
>
|
||||
{#if entry.value.t === "Address"}
|
||||
<Address
|
||||
link
|
||||
address={entry.value.c}
|
||||
resolve={Boolean(resolve[id]) || true}
|
||||
data-id={id}
|
||||
/>
|
||||
{:else}
|
||||
<div
|
||||
class:formatted={Boolean(
|
||||
formatValue(entry.value.c, entry.attribute)
|
||||
)}
|
||||
>
|
||||
<Marquee>
|
||||
{formatValue(entry.value.c, entry.attribute) || entry.value.c}
|
||||
</Marquee>
|
||||
</div>
|
||||
{/if}
|
||||
</text-input>
|
||||
</td>
|
||||
{/if}
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
{#if attributes.length > currentDisplay}
|
||||
<tr>
|
||||
<td colspan={editable ? 3 : 2}>
|
||||
<sl-button
|
||||
class="more-button"
|
||||
on:click={(currentDisplay += MAX_DISPLAY)}
|
||||
>
|
||||
+ {attributes.length - currentDisplay} more...
|
||||
</sl-button>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
|
||||
{#if editable}
|
||||
<tr>
|
||||
<td class="attr-action">
|
||||
<sl-icon-button name="plus-circle" on:click={addEntry()} />
|
||||
</td>
|
||||
{#if attribute}
|
||||
<td>
|
||||
<sl-input v-sl-model:newEntryAttribute size="small" />
|
||||
</td>
|
||||
{/if}
|
||||
{#if value}
|
||||
<td>
|
||||
<sl-input v-sl-model:newEntryValue size="small" />
|
||||
</td>
|
||||
{/if}
|
||||
</tr>
|
||||
{/if}
|
||||
</table>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
table {
|
||||
|
|
@ -208,10 +223,6 @@
|
|||
width: 33%;
|
||||
}
|
||||
|
||||
&.reverse .attr-col {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
sl-icon-button {
|
||||
&::part(base) {
|
||||
padding: 2px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue