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,20 +28,22 @@
<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">
{#each Object.entries(available) as [flag, badge] (flag)} {#key value}
{#if (reactiveValue & Number(flag)) !== 0} {#each Object.entries(available) as [flag, badge] (flag)}
<div class="badge badge-outline gap-1"> {#if (value & Number(flag)) !== 0}
{#if !readonly} <div class="badge badge-outline gap-1">
<button class="cursor-pointer" type="button" onclick={() => onBadgeRemove(Number(flag))}>✕</button> {#if !readonly}
{/if} <button class="cursor-pointer" type="button" onclick={() => onBadgeRemove(Number(flag))}>✕</button>
<span>{badge}</span> {/if}
</div> <span>{badge}</span>
{/if} </div>
{/each} {/if}
{/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`);
--- ---