@isoftdata/svelte-user-configuration 2.3.2 → 2.4.0

package/dist/PermissionList.svelte

@@ -1,304 +1,312 @@
-<script lang="ts">
-	import type { ButtonColors } from '@isoftdata/utility-bootstrap'
-	import type { i18n } from 'i18next'
-	import type { Merge } from 'type-fest'
-	import type { IconName, SiteLabel, HTMLDivAttributes } from './'
-	import type { Snippet } from 'svelte'
-
-	import { getContext } from 'svelte'
-	import camelCase from 'just-camel-case'
-	import Icon from '@isoftdata/svelte-icon'
-	import Button from '@isoftdata/svelte-button'
-	import Select from '@isoftdata/svelte-select'
-	import { getEventValueEnum } from '@isoftdata/browser-event'
-	import { Table, Td, type Column } from '@isoftdata/svelte-table'
-	import { translate as defaultTranslate } from '@isoftdata/utility-string'
-	import { SvelteSet, SvelteMap } from 'svelte/reactivity'
-	import { RadioButtonGroup } from '@isoftdata/svelte-checkbox'
-	import Badge from '@isoftdata/svelte-badge'
-
-	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
-
-	type Scope = 'NONE' | 'SITE' | 'GLOBAL'
-	type Permission = {
-		id: number
-		displayName: string
-		category: string
-		codeName: string
-	}
-	type ComputedPermission = Merge<
-		Permission,
-		{ value: PermissionValue; groupValue?: PermissionValue | undefined; computedValue?: PermissionValue }
-	>
-	type ComputedPermissionColumns = Array<Column<ComputedPermission>>
-	type PermissionValue = keyof typeof permissionValueList
-	type PermissionValueMap = Map<number, PermissionValue>
-
-	interface Props extends HTMLDivAttributes {
-		permissions: Array<Permission>
-		siteLabel?: SiteLabel
-		enableSiteScope?: boolean
-		permissionValueChange?:
-			| ((change: { value: PermissionValue; permissionIds: Array<number> }) => void | Promise<void>)
-			| undefined
-		icon?: IconName
-		cardHeaderTitle?: string
-		permissionValueMap: PermissionValueMap
-		groupPermissionValueMap?: PermissionValueMap | undefined
-		children?: Snippet
-	}
-
-	let {
-		permissions,
-		siteLabel = 'Site',
-		enableSiteScope = true,
-		permissionValueChange = undefined,
-		icon = 'user-lock',
-		cardHeaderTitle = translate('common:permissions', 'Permissions'),
-		permissionValueMap = $bindable(new SvelteMap()),
-		groupPermissionValueMap = undefined,
-		children,
-		...rest
-	}: Props = $props()
-
-	let selectedPermissionIds: SvelteSet<number> = $state(new SvelteSet())
-	let selectedPermissionValue: string | null = $state(null)
-
-	const permissionColumns: ComputedPermissionColumns = getColumns(groupPermissionValueMap)
-
-	function getColumns(groupPermissionValueMap: PermissionValueMap | undefined): ComputedPermissionColumns {
-		let columns: ComputedPermissionColumns = [
-			{
-				property: 'value',
-				name: groupPermissionValueMap ? translate('common:user', 'User') : translate('common:permission', 'Permission'),
-				width: '1rem',
-			},
-			{ property: 'category', name: translate('common:category', 'Category') },
-			{ property: 'displayName', name: translate('common:name', 'Name') },
-		]
-
-		if (groupPermissionValueMap) {
-			columns.splice(
-				1,
-				0,
-				{
-					property: 'groupValue',
-					name: translate('common:group', 'Group'),
-					align: 'center',
-					width: '1rem',
-					minWidth: '25%',
-				},
-				{
-					property: 'computedValue',
-					name: translate('common:access', 'Access'),
-					align: 'center',
-					width: '1rem',
-					minWidth: '25%',
-				},
-			)
-		}
-
-		return columns
-	}
-
-	function selectPermissions(permissionId: number) {
-		selectedPermissionIds.has(permissionId)
-			? selectedPermissionIds.delete(permissionId)
-			: selectedPermissionIds.add(permissionId)
-	}
-
-	function selectAndDeselectAllPermissions() {
-		if (selectedPermissionIds.size === computedPermissions.length) {
-			selectedPermissionIds.clear()
-			selectedPermissionValue = null
-		} else {
-			selectedPermissionIds = new SvelteSet(permissions.map(permission => permission.id))
-		}
-	}
-
-	async function updatePermissionValues(newValue: Scope, permissionIds: SvelteSet<number>) {
-		const permissionIdsArray = Array.from(permissionIds)
-		for (const id of permissionIdsArray) {
-			permissionValueMap.set(id, newValue)
-		}
-		permissionValueMap = permissionValueMap
-		await permissionValueChange?.({
-			value: newValue,
-			permissionIds: permissionIdsArray,
-		})
-	}
-
-	function getComputedPermissions(
-		permissions: Array<Permission>,
-		permissionValueMap: PermissionValueMap,
-		groupPermissionValueMap: PermissionValueMap | undefined,
-	): Array<ComputedPermission> {
-		return permissions.map(permission => {
-			const value = permissionValueMap.get(permission.id) ?? 'NONE'
-			const groupValue = groupPermissionValueMap?.get(permission.id)
-
-			return {
-				...permission,
-				displayName: translate(`permissions:${camelCase(permission.codeName)}.displayName`, permission.displayName),
-				category: translate(`permissions:categories.${camelCase(permission.category)}`, permission.category),
-				value,
-				groupValue,
-				computedValue:
-					(value === 'NONE' && groupValue) || (value === 'SITE' && groupValue === 'GLOBAL') ? groupValue : value,
-			}
-		})
-	}
-
-	const permissionValueList: Record<Scope, { label: string; value: Scope; color: ButtonColors }> = $derived({
-		NONE: {
-			label: enableSiteScope ? translate('common:permissionLevel.none', 'None') : translate('common:off', 'Off'),
-			value: 'NONE',
-			color: 'danger',
-		},
-		SITE: {
-			label: translate(`common:permissionLevel.${siteLabel.toLowerCase()}`, siteLabel),
-			value: 'SITE',
-			color: 'primary',
-		},
-		GLOBAL: {
-			label: enableSiteScope ? translate('common:permissionLevel.global', 'Global') : translate('common:on', 'On'),
-			value: 'GLOBAL',
-			color: 'success',
-		},
-	})
-	const permissionValues = $derived(
-		Object.values(permissionValueList).filter(permissionValue => enableSiteScope || permissionValue.value !== 'SITE'),
-	)
-	const computedPermissions = $derived(getComputedPermissions(permissions, permissionValueMap, groupPermissionValueMap))
-	$effect(() => {
-		if (
-			!enableSiteScope &&
-			computedPermissions.some(permission => [permission.value, permission.groupValue].includes('SITE'))
-		) {
-			console.warn(
-				'PermissionList: Permissions with site scope are not supported when `enableSiteScope` is false. Please ensure you want to disable site scope, or update/remove these permissions.',
-			)
-		}
-	})
-</script>
-
-<div
-	class="card"
-	{...rest}
->
-	<div class="card-header">
-		<h5 class="mb-0">
-			<Icon
-				{icon}
-				class="mr-1 me-1"
-			/>
-			{cardHeaderTitle}
-		</h5>
-	</div>
-	<div class="card-body">
-		<Table
-			class="mb-0"
-			idProp="id"
-			parentClass="mh-60vh overflow-y-auto"
-			filterPlaceholder={translate('common:filterPermissions', 'Filter Permissions')}
-			filterColumnClass="col-6 col-lg-4 align-self-end"
-			rows={computedPermissions}
-			columns={permissionColumns}
-			responsive
-			filterEnabled
-		>
-			{#snippet children({ row: permission })}
-				<tr
-					onclick={() => selectPermissions(permission.id)}
-					class:table-primary={selectedPermissionIds.has(permission.id)}
-					class="cursor-pointer"
-				>
-					<Td property="value">
-						<div
-							class="btn-group btn-group-toggle"
-							data-toggle="buttons"
-						>
-							<RadioButtonGroup
-								options={permissionValues}
-								value={permission.value}
-								unselectedColor="secondary"
-								change={value => updatePermissionValues(value, new SvelteSet([permission.id]))}
-							></RadioButtonGroup>
-						</div>
-					</Td>
-					{#if groupPermissionValueMap}
-						<Td
-							property="groupValue"
-							class="px-4"
-						>
-							<Badge
-								pill
-								color={permissionValueList[permission.groupValue ?? 'NONE'].color}
-								>{permissionValueList[permission.groupValue ?? 'NONE'].label}</Badge
-							>
-						</Td>
-						<Td
-							property="computedValue"
-							class="px-4"
-						>
-							<Badge
-								pill
-								color={permissionValueList[permission.computedValue ?? 'NONE'].color}
-								>{permissionValueList[permission.computedValue ?? 'NONE'].label}</Badge
-							>
-						</Td>
-					{/if}
-					<Td property="category">{permission.category}</Td>
-					<Td property="displayName">{permission.displayName}</Td>
-				</tr>
-			{/snippet}
-		</Table>
-		{@render children?.()}
-	</div>
-	<div class="card-footer">
-		<div class="d-flex justify-content-between align-items-end">
-			<Select
-				label="{translate('common:setSelectedTo', 'Set Selected To')}:"
-				bind:value={selectedPermissionValue}
-				showEmptyOption={selectedPermissionValue === null}
-				emptyValue={null}
-				emptyText={translate('common:selectValue', 'Select a Value')}
-				labelParentClass="form-inline mr-2 me-2"
-				labelClass="mr-2 me-2 p-0"
-				disabled={selectedPermissionIds.size === 0}
-				onchange={e => {
-					const value = getEventValueEnum(e, 'NONE', 'SITE', 'GLOBAL')
-					updatePermissionValues(value, selectedPermissionIds)
-					selectedPermissionIds.clear()
-					selectedPermissionValue = null
-				}}
-			>
-				{#each Object.values(permissionValueList) as permission}
-					{#if enableSiteScope || permission.value !== 'SITE'}
-						<option value={permission.value}>{permission.label}</option>
-					{/if}
-				{/each}
-			</Select>
-			<Button
-				class="mb-1"
-				outline
-				size="sm"
-				iconClass="check-double"
-				onclick={selectAndDeselectAllPermissions}
-			>
-				<span class:d-none={selectedPermissionIds.size !== computedPermissions.length}
-					>{translate('common:deselectAll', 'Deselect All')}</span
-				>
-				<span class:d-none={selectedPermissionIds.size === computedPermissions.length}
-					>{translate('common:selectAll', 'Select All')}</span
-				>
-			</Button>
-		</div>
-	</div>
-</div>
-
-<style>
-	.cursor-pointer {
-		cursor: pointer;
-	}
-</style>
+<script lang="ts">
+	import type { ButtonColors } from '@isoftdata/utility-bootstrap'
+	import type { i18n } from 'i18next'
+	import type { Merge } from 'type-fest'
+	import type { IconName, SiteLabel, HTMLDivAttributes } from './'
+	import type { Snippet } from 'svelte'
+
+	import { getContext } from 'svelte'
+	import camelCase from 'just-camel-case'
+	import Icon from '@isoftdata/svelte-icon'
+	import Button from '@isoftdata/svelte-button'
+	import Select from '@isoftdata/svelte-select'
+	import { getEventValueEnum } from '@isoftdata/browser-event'
+	import { Table, Td, type Column } from '@isoftdata/svelte-table'
+	import { translate as defaultTranslate } from '@isoftdata/utility-string'
+	import { SvelteSet, SvelteMap } from 'svelte/reactivity'
+	import { RadioButtonGroup } from '@isoftdata/svelte-checkbox'
+	import Badge from '@isoftdata/svelte-badge'
+
+	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
+
+	type Scope = 'NONE' | 'SITE' | 'GLOBAL'
+	type Permission = {
+		id: number
+		displayName: string
+		category: string
+		codeName: string
+	}
+	type ComputedPermission = Merge<
+		Permission,
+		{ value: PermissionValue; groupValue?: PermissionValue | undefined; computedValue?: PermissionValue }
+	>
+	type ComputedPermissionColumns = Array<Column<ComputedPermission>>
+	type PermissionValue = keyof typeof permissionValueList
+	type PermissionValueMap = Map<number, PermissionValue>
+
+	interface Props extends HTMLDivAttributes {
+		permissions: Array<Permission>
+		siteLabel?: SiteLabel
+		enableSiteScope?: boolean
+		permissionValueChange?:
+			| ((change: { value: PermissionValue; permissionIds: Array<number> }) => void | Promise<void>)
+			| undefined
+		icon?: IconName
+		cardHeaderTitle?: string
+		permissionValueMap: PermissionValueMap
+		groupPermissionValueMap?: PermissionValueMap | undefined
+		children?: Snippet
+		permissionTranslationNamespace?: string
+	}
+
+	let {
+		permissions,
+		siteLabel = 'Site',
+		enableSiteScope = true,
+		permissionValueChange = undefined,
+		icon = 'user-lock',
+		cardHeaderTitle = translate('common:permissions', 'Permissions'),
+		permissionValueMap = $bindable(new SvelteMap()),
+		groupPermissionValueMap = undefined,
+		children,
+		permissionTranslationNamespace = 'permissions',
+		...rest
+	}: Props = $props()
+
+	let selectedPermissionIds: SvelteSet<number> = $state(new SvelteSet())
+	let selectedPermissionValue: string | null = $state(null)
+
+	const permissionColumns: ComputedPermissionColumns = getColumns(groupPermissionValueMap)
+
+	function getColumns(groupPermissionValueMap: PermissionValueMap | undefined): ComputedPermissionColumns {
+		let columns: ComputedPermissionColumns = [
+			{
+				property: 'value',
+				name: groupPermissionValueMap ? translate('common:user', 'User') : translate('common:permission', 'Permission'),
+				width: '1rem',
+			},
+			{ property: 'category', name: translate('common:category', 'Category') },
+			{ property: 'displayName', name: translate('common:name', 'Name') },
+		]
+
+		if (groupPermissionValueMap) {
+			columns.splice(
+				1,
+				0,
+				{
+					property: 'groupValue',
+					name: translate('common:group', 'Group'),
+					align: 'center',
+					width: '1rem',
+					minWidth: '25%',
+				},
+				{
+					property: 'computedValue',
+					name: translate('common:access', 'Access'),
+					align: 'center',
+					width: '1rem',
+					minWidth: '25%',
+				},
+			)
+		}
+
+		return columns
+	}
+
+	function selectPermissions(permissionId: number) {
+		selectedPermissionIds.has(permissionId)
+			? selectedPermissionIds.delete(permissionId)
+			: selectedPermissionIds.add(permissionId)
+	}
+
+	function selectAndDeselectAllPermissions() {
+		if (selectedPermissionIds.size === computedPermissions.length) {
+			selectedPermissionIds.clear()
+			selectedPermissionValue = null
+		} else {
+			selectedPermissionIds = new SvelteSet(permissions.map(permission => permission.id))
+		}
+	}
+
+	async function updatePermissionValues(newValue: Scope, permissionIds: SvelteSet<number>) {
+		const permissionIdsArray = Array.from(permissionIds)
+		for (const id of permissionIdsArray) {
+			permissionValueMap.set(id, newValue)
+		}
+		permissionValueMap = permissionValueMap
+		await permissionValueChange?.({
+			value: newValue,
+			permissionIds: permissionIdsArray,
+		})
+	}
+
+	function getComputedPermissions(
+		permissions: Array<Permission>,
+		permissionValueMap: PermissionValueMap,
+		groupPermissionValueMap: PermissionValueMap | undefined,
+	): Array<ComputedPermission> {
+		return permissions.map(permission => {
+			const value = permissionValueMap.get(permission.id) ?? 'NONE'
+			const groupValue = groupPermissionValueMap?.get(permission.id)
+
+			return {
+				...permission,
+				displayName: translate(
+					`${permissionTranslationNamespace}:${camelCase(permission.codeName)}.displayName`,
+					permission.displayName,
+				),
+				category: translate(
+					`${permissionTranslationNamespace}:categories.${camelCase(permission.category)}`,
+					permission.category,
+				),
+				value,
+				groupValue,
+				computedValue:
+					(value === 'NONE' && groupValue) || (value === 'SITE' && groupValue === 'GLOBAL') ? groupValue : value,
+			}
+		})
+	}
+
+	const permissionValueList: Record<Scope, { label: string; value: Scope; color: ButtonColors }> = $derived({
+		NONE: {
+			label: enableSiteScope ? translate('common:permissionLevel.none', 'None') : translate('common:off', 'Off'),
+			value: 'NONE',
+			color: 'danger',
+		},
+		SITE: {
+			label: translate(`common:permissionLevel.${siteLabel.toLowerCase()}`, siteLabel),
+			value: 'SITE',
+			color: 'primary',
+		},
+		GLOBAL: {
+			label: enableSiteScope ? translate('common:permissionLevel.global', 'Global') : translate('common:on', 'On'),
+			value: 'GLOBAL',
+			color: 'success',
+		},
+	})
+	const permissionValues = $derived(
+		Object.values(permissionValueList).filter(permissionValue => enableSiteScope || permissionValue.value !== 'SITE'),
+	)
+	const computedPermissions = $derived(getComputedPermissions(permissions, permissionValueMap, groupPermissionValueMap))
+	$effect(() => {
+		if (
+			!enableSiteScope &&
+			computedPermissions.some(permission => [permission.value, permission.groupValue].includes('SITE'))
+		) {
+			console.warn(
+				'PermissionList: Permissions with site scope are not supported when `enableSiteScope` is false. Please ensure you want to disable site scope, or update/remove these permissions.',
+			)
+		}
+	})
+</script>
+
+<div
+	class="card"
+	{...rest}
+>
+	<div class="card-header">
+		<h5 class="mb-0">
+			<Icon
+				{icon}
+				class="mr-1 me-1"
+			/>
+			{cardHeaderTitle}
+		</h5>
+	</div>
+	<div class="card-body">
+		<Table
+			class="mb-0"
+			idProp="id"
+			parentClass="mh-60vh overflow-y-auto"
+			filterPlaceholder={translate('common:filterPermissions', 'Filter Permissions')}
+			filterColumnClass="col-6 col-lg-4 align-self-end"
+			rows={computedPermissions}
+			columns={permissionColumns}
+			responsive
+			filterEnabled
+		>
+			{#snippet children({ row: permission })}
+				<tr
+					onclick={() => selectPermissions(permission.id)}
+					class:table-primary={selectedPermissionIds.has(permission.id)}
+					class="cursor-pointer"
+				>
+					<Td property="value">
+						<div
+							class="btn-group btn-group-toggle"
+							data-toggle="buttons"
+						>
+							<RadioButtonGroup
+								options={permissionValues}
+								value={permission.value}
+								unselectedColor="secondary"
+								change={value => updatePermissionValues(value, new SvelteSet([permission.id]))}
+							></RadioButtonGroup>
+						</div>
+					</Td>
+					{#if groupPermissionValueMap}
+						<Td
+							property="groupValue"
+							class="px-4"
+						>
+							<Badge
+								pill
+								color={permissionValueList[permission.groupValue ?? 'NONE'].color}
+								>{permissionValueList[permission.groupValue ?? 'NONE'].label}</Badge
+							>
+						</Td>
+						<Td
+							property="computedValue"
+							class="px-4"
+						>
+							<Badge
+								pill
+								color={permissionValueList[permission.computedValue ?? 'NONE'].color}
+								>{permissionValueList[permission.computedValue ?? 'NONE'].label}</Badge
+							>
+						</Td>
+					{/if}
+					<Td property="category">{permission.category}</Td>
+					<Td property="displayName">{permission.displayName}</Td>
+				</tr>
+			{/snippet}
+		</Table>
+		{@render children?.()}
+	</div>
+	<div class="card-footer">
+		<div class="d-flex justify-content-between align-items-end">
+			<Select
+				label="{translate('common:setSelectedTo', 'Set Selected To')}:"
+				bind:value={selectedPermissionValue}
+				showEmptyOption={selectedPermissionValue === null}
+				emptyValue={null}
+				emptyText={translate('common:selectValue', 'Select a Value')}
+				labelParentClass="form-inline mr-2 me-2"
+				labelClass="mr-2 me-2 p-0"
+				disabled={selectedPermissionIds.size === 0}
+				onchange={e => {
+					const value = getEventValueEnum(e, 'NONE', 'SITE', 'GLOBAL')
+					updatePermissionValues(value, selectedPermissionIds)
+					selectedPermissionIds.clear()
+					selectedPermissionValue = null
+				}}
+			>
+				{#each Object.values(permissionValueList) as permission}
+					{#if enableSiteScope || permission.value !== 'SITE'}
+						<option value={permission.value}>{permission.label}</option>
+					{/if}
+				{/each}
+			</Select>
+			<Button
+				class="mb-1"
+				outline
+				size="sm"
+				iconClass="check-double"
+				onclick={selectAndDeselectAllPermissions}
+			>
+				<span class:d-none={selectedPermissionIds.size !== computedPermissions.length}
+					>{translate('common:deselectAll', 'Deselect All')}</span
+				>
+				<span class:d-none={selectedPermissionIds.size === computedPermissions.length}
+					>{translate('common:selectAll', 'Select All')}</span
+				>
+			</Button>
+		</div>
+	</div>
+</div>
+
+<style>
+	.cursor-pointer {
+		cursor: pointer;
+	}
+</style>

package/dist/PermissionList.svelte.d.ts

@@ -18,6 +18,7 @@ declare const PermissionList: import("svelte").Component<HTMLDivAttributes & {
     permissionValueMap: Map<number, "NONE" | "SITE" | "GLOBAL">;
     groupPermissionValueMap?: Map<number, "NONE" | "SITE" | "GLOBAL"> | undefined;
     children?: Snippet;
+    permissionTranslationNamespace?: string;
 }, {}, "permissionValueMap">;
 type PermissionList = ReturnType<typeof PermissionList>;
 export default PermissionList;