feat(webui): labels can be edited via column header (banner)
ci/woodpecker/push/woodpecker Pipeline was successful
Details
ci/woodpecker/push/woodpecker Pipeline was successful
Details
fixes #55 known issue: replaces all labels with onefeat/tables
parent
dd9ff79e20
commit
2faa113691
|
@ -400,7 +400,9 @@
|
|||
<header>
|
||||
<h2>
|
||||
{#if $entity}
|
||||
<UpObject banner {address} on:resolved={onResolved} />
|
||||
{#key $entity}
|
||||
<UpObject banner {address} on:resolved={onResolved} on:change={onChange} />
|
||||
{/key}
|
||||
{:else}
|
||||
<Spinner centered />
|
||||
{/if}
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
import { vaultInfo } from '$lib/util/info';
|
||||
import type { BrowseContext } from '$lib/util/browse';
|
||||
import { Query, type UpObject } from '@upnd/upend';
|
||||
import type { ADDRESS_TYPE, EntityInfo } from '@upnd/upend/types';
|
||||
import type { ADDRESS_TYPE, EntityInfo, IValue } from '@upnd/upend/types';
|
||||
import { useEntity } from '$lib/entity';
|
||||
import { i18n } from '$lib/i18n';
|
||||
import api from '$lib/api';
|
||||
|
@ -19,8 +19,11 @@
|
|||
import { selected } from '../EntitySelect.svelte';
|
||||
import { Any } from '@upnd/upend/query';
|
||||
import type { AddressComponents } from '@upnd/upend/wasm';
|
||||
import Editable from '$lib/components/utils/Editable.svelte';
|
||||
import type { WidgetChange } from '$lib/types/base';
|
||||
import type { SelectorValue } from '$lib/components/utils/Selector.svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher<{ change: WidgetChange; resolved: string[] }>();
|
||||
|
||||
export let address: string;
|
||||
export let labels: string[] | undefined = undefined;
|
||||
|
@ -143,6 +146,12 @@
|
|||
);
|
||||
});
|
||||
}
|
||||
|
||||
function onLabelEdit(ev: CustomEvent<SelectorValue>) {
|
||||
if (ev.detail.t == 'String') {
|
||||
dispatch('change', { type: 'upsert', attribute: ATTR_LABEL, value: ev.detail });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
|
@ -161,17 +170,24 @@
|
|||
<HashBadge {address} />
|
||||
<div class="separator" />
|
||||
<div class="label" class:resolving title={displayLabel}>
|
||||
<div class="label-inner">
|
||||
{#if banner && hasFile}
|
||||
<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
|
||||
{:else if link}
|
||||
<UpLink to={{ entity: address }}>
|
||||
<Editable
|
||||
value={{ t: 'String', c: displayLabel }}
|
||||
editable={banner}
|
||||
types={['String']}
|
||||
on:edit={onLabelEdit}
|
||||
>
|
||||
<div class="label-inner">
|
||||
{#if banner && hasFile}
|
||||
<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
|
||||
</UpLink>
|
||||
{:else}
|
||||
<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
|
||||
{/if}
|
||||
</div>
|
||||
{:else if link}
|
||||
<UpLink to={{ entity: address }}>
|
||||
<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
|
||||
</UpLink>
|
||||
{:else}
|
||||
<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
|
||||
{/if}
|
||||
</div>
|
||||
</Editable>
|
||||
{#if $entity?.get(ATTR_KEY) && !$entity?.get(ATTR_KEY)?.toString()?.startsWith('TYPE_')}
|
||||
<div class="key">{$entity.get(ATTR_KEY)}</div>
|
||||
{/if}
|
||||
|
|
|
@ -4,8 +4,9 @@
|
|||
import type { IValue } from '@upnd/upend/types';
|
||||
import IconButton from './IconButton.svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher<{ edit: SelectorValue }>();
|
||||
|
||||
export let editable = true;
|
||||
export let value: IValue | undefined = undefined;
|
||||
export let types: SELECTOR_TYPE[] | undefined = undefined;
|
||||
let newValue: SelectorValue | undefined = value;
|
||||
|
@ -53,7 +54,7 @@
|
|||
<IconButton
|
||||
name="save"
|
||||
on:click={() => {
|
||||
dispatch('edit', newValue);
|
||||
if (newValue) dispatch('edit', newValue);
|
||||
editing = false;
|
||||
}}
|
||||
/>
|
||||
|
@ -61,9 +62,11 @@
|
|||
<div class="content">
|
||||
<slot />
|
||||
</div>
|
||||
<div class="edit-icon">
|
||||
<IconButton name="edit" on:click={() => (editing = true)} />
|
||||
</div>
|
||||
{#if editable}
|
||||
<div class="edit-icon">
|
||||
<IconButton name="edit" on:click={() => (editing = true)} plain />
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -92,4 +95,8 @@
|
|||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.editing {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue