major fixes
This commit is contained in:
@@ -0,0 +1,239 @@
|
||||
<script lang="ts">
|
||||
import { api } from "$lib/api";
|
||||
import { i18n } from "$lib/i18n";
|
||||
import { notifyApiError } from "$lib/notify";
|
||||
import { planCapabilities } from "$lib/plan-capabilities.svelte";
|
||||
import { sectionLabel } from "$lib/plan-feature-catalog";
|
||||
import { Badge, Button, Checkbox, Dialog, Input, Spinner } from "$lib/components/ui";
|
||||
import Alert from "$lib/components/Alert.svelte";
|
||||
import {
|
||||
catalogKeys,
|
||||
denyAll,
|
||||
filterCatalog,
|
||||
isDenied,
|
||||
permissionSummary,
|
||||
samePermissions,
|
||||
setPermissionAllowed,
|
||||
type MemberPermissionsView,
|
||||
type PermissionCatalog
|
||||
} from "$lib/member-permissions";
|
||||
|
||||
let {
|
||||
open = $bindable(false),
|
||||
member,
|
||||
canEdit = false,
|
||||
onSaved = undefined
|
||||
}: {
|
||||
open?: boolean;
|
||||
/** The teammate being edited — null while the dialog is closed. */
|
||||
member: { user_id: string; email: string; is_owner?: boolean } | null;
|
||||
/** Only the company owner may change permissions; others get a read-only view. */
|
||||
canEdit?: boolean;
|
||||
onSaved?: (view: MemberPermissionsView) => void;
|
||||
} = $props();
|
||||
|
||||
let catalog = $state<PermissionCatalog | null>(null);
|
||||
let denied = $state<string[]>([]);
|
||||
let savedDenied = $state<string[]>([]);
|
||||
let loading = $state(false);
|
||||
let saving = $state(false);
|
||||
let loadError = $state<string | null>(null);
|
||||
let search = $state("");
|
||||
let isOwnerMember = $state(false);
|
||||
|
||||
const allKeys = $derived(catalogKeys(catalog));
|
||||
const summary = $derived(permissionSummary(catalog, denied));
|
||||
const dirty = $derived(!samePermissions(denied, savedDenied));
|
||||
const readOnly = $derived(!canEdit || isOwnerMember);
|
||||
|
||||
function labelFor(key: string): string {
|
||||
const translated = i18n.t(`plan.feature.${key}`);
|
||||
// Untranslated keys fall back to the raw key rather than an empty cell.
|
||||
return translated === `plan.feature.${key}` ? key : translated;
|
||||
}
|
||||
|
||||
const visibleSections = $derived(filterCatalog(catalog, search, labelFor));
|
||||
|
||||
/** Reload whenever the dialog opens for a member (never on every keystroke). */
|
||||
$effect(() => {
|
||||
if (!open || !member) return;
|
||||
const userId = member.user_id;
|
||||
const ac = new AbortController();
|
||||
loading = true;
|
||||
loadError = null;
|
||||
search = "";
|
||||
void (async () => {
|
||||
try {
|
||||
const [catalogPayload, view] = await Promise.all([
|
||||
api<PermissionCatalog>("/api/team/permission-catalog", { signal: ac.signal }),
|
||||
api<MemberPermissionsView>(`/api/team/${userId}/permissions`, { signal: ac.signal })
|
||||
]);
|
||||
catalog = catalogPayload;
|
||||
denied = [...(view.denied ?? [])];
|
||||
savedDenied = [...(view.denied ?? [])];
|
||||
isOwnerMember = Boolean(view.is_owner);
|
||||
} catch (err) {
|
||||
if ((err as { name?: string })?.name === "AbortError") return;
|
||||
loadError = i18n.t("settings.permissions.loadFailed");
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
})();
|
||||
return () => ac.abort();
|
||||
});
|
||||
|
||||
function toggle(key: string, nextAllowed: boolean) {
|
||||
if (readOnly) return;
|
||||
denied = setPermissionAllowed(denied, key, nextAllowed, allKeys);
|
||||
}
|
||||
|
||||
function allowEverything() {
|
||||
if (readOnly) return;
|
||||
denied = [];
|
||||
}
|
||||
|
||||
function denyEverything() {
|
||||
if (readOnly) return;
|
||||
denied = denyAll(catalog);
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if (!member || readOnly || saving) return;
|
||||
saving = true;
|
||||
try {
|
||||
const view = await api<MemberPermissionsView>(`/api/team/${member.user_id}/permissions`, {
|
||||
method: "PUT",
|
||||
body: { denied }
|
||||
});
|
||||
savedDenied = [...(view.denied ?? [])];
|
||||
denied = [...(view.denied ?? [])];
|
||||
// The editor may have just restricted themselves out of a section elsewhere in
|
||||
// this tab — refetch so the sidebar and route guard agree with the server.
|
||||
await planCapabilities.refresh(undefined, true);
|
||||
onSaved?.(view);
|
||||
open = false;
|
||||
} catch (err) {
|
||||
notifyApiError(err, i18n.t("settings.permissions.saveFailed"));
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** Indent nested keys so "Products - Error tab" reads as a child of "Products". */
|
||||
function indentClass(key: string): string {
|
||||
const depth = key.split(".").length - 2;
|
||||
if (depth <= 0) return "";
|
||||
return depth === 1 ? "pl-6" : "pl-12";
|
||||
}
|
||||
</script>
|
||||
|
||||
<Dialog
|
||||
bind:open
|
||||
title={i18n.t("settings.permissions.title", { email: member?.email ?? "" })}
|
||||
description={i18n.t("settings.permissions.description")}
|
||||
class="sm:max-w-2xl sm:min-w-0"
|
||||
>
|
||||
<div class="space-y-4 py-2">
|
||||
{#if loading}
|
||||
<div class="flex justify-center py-10">
|
||||
<Spinner />
|
||||
</div>
|
||||
{:else if loadError}
|
||||
<Alert tone="error" message={loadError} />
|
||||
{:else}
|
||||
{#if isOwnerMember}
|
||||
<Alert tone="info" message={i18n.t("settings.permissions.ownerNotice")} />
|
||||
{:else if !canEdit}
|
||||
<Alert tone="info" message={i18n.t("settings.permissions.ownerOnly")} />
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<p class="text-sm text-muted-foreground" data-testid="permissions-summary">
|
||||
{i18n.t("settings.permissions.summary", {
|
||||
allowed: summary.allowed,
|
||||
total: summary.total
|
||||
})}
|
||||
</p>
|
||||
{#if !readOnly}
|
||||
<div class="flex gap-2">
|
||||
<Button variant="outline" size="sm" data-testid="permissions-allow-all" onclick={allowEverything}>
|
||||
{i18n.t("settings.permissions.allowAll")}
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" data-testid="permissions-deny-all" onclick={denyEverything}>
|
||||
{i18n.t("settings.permissions.denyAll")}
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<Input
|
||||
type="search"
|
||||
bind:value={search}
|
||||
placeholder={i18n.t("settings.permissions.searchPlaceholder")}
|
||||
aria-label={i18n.t("settings.permissions.searchPlaceholder")}
|
||||
/>
|
||||
|
||||
<div class="max-h-[24rem] space-y-5 overflow-y-auto pr-1">
|
||||
{#if visibleSections.length === 0}
|
||||
<p class="py-8 text-center text-sm text-muted-foreground">
|
||||
{i18n.t("settings.permissions.noMatches")}
|
||||
</p>
|
||||
{/if}
|
||||
{#each visibleSections as section (section.id)}
|
||||
<section class="space-y-1">
|
||||
<h3
|
||||
class="sticky top-0 bg-background py-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground"
|
||||
>
|
||||
{sectionLabel(section.id)}
|
||||
</h3>
|
||||
{#each section.entries as entry (entry.key)}
|
||||
{@const allowed = entry.plan_allowed && !isDenied(denied, entry.key)}
|
||||
{@const locked = !entry.plan_allowed}
|
||||
<div
|
||||
class="flex items-center gap-3 rounded-md px-2 py-1.5 hover:bg-muted/40 {indentClass(
|
||||
entry.key
|
||||
)}"
|
||||
>
|
||||
<Checkbox
|
||||
id={`perm-${entry.key}`}
|
||||
checked={allowed}
|
||||
disabled={readOnly || locked}
|
||||
aria-label={labelFor(entry.key)}
|
||||
data-testid={`perm-${entry.key}`}
|
||||
onchange={() => toggle(entry.key, !allowed)}
|
||||
/>
|
||||
<label
|
||||
for={`perm-${entry.key}`}
|
||||
class="min-w-0 flex-1 cursor-pointer text-sm {locked
|
||||
? 'text-muted-foreground'
|
||||
: 'text-foreground'}"
|
||||
>
|
||||
{labelFor(entry.key)}
|
||||
</label>
|
||||
{#if locked}
|
||||
<Badge variant="secondary">{i18n.t("settings.permissions.planLocked")}</Badge>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</section>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#snippet footer()}
|
||||
<Button variant="outline" onclick={() => (open = false)}>
|
||||
{readOnly ? i18n.t("common.close") : i18n.t("common.cancel")}
|
||||
</Button>
|
||||
{#if !readOnly}
|
||||
<Button
|
||||
data-testid="permissions-save"
|
||||
disabled={saving || loading || !dirty}
|
||||
loading={saving}
|
||||
onclick={save}
|
||||
>
|
||||
{i18n.t("settings.permissions.save")}
|
||||
</Button>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</Dialog>
|
||||
Reference in New Issue
Block a user