Allow to disable particular items in ObjectPopup (#2824)

Signed-off-by: Denis Bunakalya <denis.bunakalya@xored.com>
This commit is contained in:
Denis Bunakalya 2023-03-27 17:05:08 +03:00 committed by GitHub
parent 6077d564e9
commit ed96300f2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -58,6 +58,7 @@
export let create: ObjectCreate | undefined = undefined export let create: ObjectCreate | undefined = undefined
export let readonly = false export let readonly = false
export let disallowDeselect: Ref<Doc>[] | undefined = undefined
let search: string = '' let search: string = ''
let objects: Doc[] = [] let objects: Doc[] = []
@ -191,6 +192,8 @@
} }
$: updateLocation(scrollDiv, selectedDiv, objects, selected) $: updateLocation(scrollDiv, selectedDiv, objects, selected)
const forbiddenDeselectItemIds = new Set(disallowDeselect)
</script> </script>
<FocusHandler {manager} /> <FocusHandler {manager} />
@ -246,11 +249,12 @@
</svelte:fragment> </svelte:fragment>
<svelte:fragment slot="item" let:item> <svelte:fragment slot="item" let:item>
{@const obj = objects[item]} {@const obj = objects[item]}
{@const isDeselectDisabled = selectedElements.has(obj._id) && forbiddenDeselectItemIds.has(obj._id)}
<button <button
class="menu-item w-full flex-row-center" class="menu-item w-full flex-row-center"
class:background-button-bg-color={!allowDeselect && obj._id === selected} class:background-button-bg-color={!allowDeselect && obj._id === selected}
class:border-radius-1={!allowDeselect && obj._id === selected} class:border-radius-1={!allowDeselect && obj._id === selected}
disabled={readonly} disabled={readonly || isDeselectDisabled}
on:click={() => { on:click={() => {
handleSelection(undefined, objects, item) handleSelection(undefined, objects, item)
}} }}
@ -271,7 +275,7 @@
</div> </div>
{/if} {/if}
<span class="label" class:disabled={readonly}> <span class="label" class:disabled={readonly || isDeselectDisabled}>
{#if obj._id === selected} {#if obj._id === selected}
<div bind:this={selectedDiv}> <div bind:this={selectedDiv}>
<slot name="item" item={obj} /> <slot name="item" item={obj} />
@ -282,7 +286,7 @@
</span> </span>
{#if multiSelect} {#if multiSelect}
<div class="check-right pointer-events-none"> <div class="check-right pointer-events-none">
<CheckBox checked={selectedElements.has(obj._id)} primary /> <CheckBox checked={selectedElements.has(obj._id)} primary readonly={readonly || isDeselectDisabled} />
</div> </div>
{/if} {/if}
</button> </button>