fix bit badge value not updating

This commit is contained in:
2025-06-23 20:02:46 +02:00
parent 9a6e44b2d5
commit 03ee87d7cf
4 changed files with 18 additions and 19 deletions

View File

@ -9,20 +9,17 @@
// inputs // inputs
let { available, value = $bindable(), readonly }: Props = $props(); let { available, value = $bindable(), readonly }: Props = $props();
// idk why, but this is needed to trigger loop reactivity
let reactiveValue = $derived(value);
// callbacks // callbacks
function onOptionSelect(e: Event) { function onOptionSelect(e: Event) {
const selected = Number((e.target as HTMLSelectElement).value); const selected = Number((e.target as HTMLSelectElement).value);
reactiveValue |= selected; value |= selected;
(e.target as HTMLSelectElement).value = '-'; (e.target as HTMLSelectElement).value = '-';
} }
function onBadgeRemove(flag: number) { function onBadgeRemove(flag: number) {
reactiveValue &= ~flag; value &= ~flag;
} }
</script> </script>
@ -31,13 +28,14 @@
<select class="select select-xs w-min" onchange={onOptionSelect}> <select class="select select-xs w-min" onchange={onOptionSelect}>
<option selected hidden>-</option> <option selected hidden>-</option>
{#each Object.entries(available) as [flag, badge] (flag)} {#each Object.entries(available) as [flag, badge] (flag)}
<option value={flag} hidden={(reactiveValue & Number(flag)) !== 0}>{badge}</option> <option value={flag} hidden={(value & Number(flag)) !== 0}>{badge}</option>
{/each} {/each}
</select> </select>
{/if} {/if}
<div class="flex flow flex-wrap gap-2"> <div class="flex flow flex-wrap gap-2">
{#key value}
{#each Object.entries(available) as [flag, badge] (flag)} {#each Object.entries(available) as [flag, badge] (flag)}
{#if (reactiveValue & Number(flag)) !== 0} {#if (value & Number(flag)) !== 0}
<div class="badge badge-outline gap-1"> <div class="badge badge-outline gap-1">
{#if !readonly} {#if !readonly}
<button class="cursor-pointer" type="button" onclick={() => onBadgeRemove(Number(flag))}>✕</button> <button class="cursor-pointer" type="button" onclick={() => onBadgeRemove(Number(flag))}>✕</button>
@ -46,5 +44,6 @@
</div> </div>
{/if} {/if}
{/each} {/each}
{/key}
</div> </div>
</div> </div>

View File

@ -6,7 +6,7 @@ import { Session } from '@util/session.ts';
import { Permissions } from '@util/permissions.ts'; import { Permissions } from '@util/permissions.ts';
import { BASE_PATH } from 'astro:env/server'; import { BASE_PATH } from 'astro:env/server';
const session = Session.sessionFromCookies(Astro.cookies, Permissions.Admin); const session = Session.sessionFromCookies(Astro.cookies, Permissions.Users);
if (!session) return Astro.redirect(`${BASE_PATH}/admin`); if (!session) return Astro.redirect(`${BASE_PATH}/admin`);
--- ---

View File

@ -6,7 +6,7 @@ import { Session } from '@util/session.ts';
import { Permissions } from '@util/permissions.ts'; import { Permissions } from '@util/permissions.ts';
import { BASE_PATH } from 'astro:env/server'; import { BASE_PATH } from 'astro:env/server';
const session = Session.sessionFromCookies(Astro.cookies, Permissions.Admin); const session = Session.sessionFromCookies(Astro.cookies, Permissions.Users);
if (!session) return Astro.redirect(`${BASE_PATH}/admin`); if (!session) return Astro.redirect(`${BASE_PATH}/admin`);
--- ---

View File

@ -6,7 +6,7 @@ import { Session } from '@util/session.ts';
import { Permissions } from '@util/permissions.ts'; import { Permissions } from '@util/permissions.ts';
import { BASE_PATH } from 'astro:env/server'; import { BASE_PATH } from 'astro:env/server';
const session = Session.sessionFromCookies(Astro.cookies, Permissions.Admin); const session = Session.sessionFromCookies(Astro.cookies, Permissions.Users);
if (!session) return Astro.redirect(`${BASE_PATH}/admin`); if (!session) return Astro.redirect(`${BASE_PATH}/admin`);
--- ---