@isoftdata/svelte-user-configuration 2.0.2 → 2.0.3

package/dist/PermissionList.svelte

@@ -1,289 +1,282 @@
-<script lang="ts">
-	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 { getEventValue } 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'
-
-	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
-
-	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
-		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',
-		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)
-	const permissionValueList = {
-		NONE: { label: translate('common:permissionLevel.none', 'None'), value: 'NONE', color: 'danger' },
-		SITE: {
-			label: translate(`common:permissionLevel.${siteLabel.toLowerCase()}`, siteLabel),
-			value: 'SITE',
-			color: 'primary',
-		},
-		GLOBAL: { label: translate('common:permissionLevel.global', 'Global'), value: 'GLOBAL', color: 'success' },
-	}
-
-	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))
-		}
-	}
-
-	const getButtonColor = (optionValue: string, permissionValue: PermissionValue) =>
-		optionValue === permissionValue ? permissionValueList[optionValue].color : 'outline-secondary'
-
-	const isValidPermissionValue = (value: string): value is PermissionValue =>
-		Object.keys(permissionValueList).includes(value)
-
-	async function updatePermissionValues(event: Event, permissionIds: SvelteSet<number>) {
-		const newValue = getEventValue(event)
-		if (isValidPermissionValue(newValue)) {
-			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,
-			}
-		})
-	}
-
-	let computedPermissions = $derived.by(() =>
-		getComputedPermissions(permissions, permissionValueMap, groupPermissionValueMap),
-	)
-
-	$inspect(computedPermissions)
-</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"
-			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"
-						>
-							{#each Object.values(permissionValueList) as permissionValue}
-								<label class="btn btn-sm btn-{getButtonColor(permissionValue.value, permission.value)} cursor-pointer">
-									<input
-										class="btn-check"
-										type="radio"
-										autocomplete="off"
-										name={permission.value}
-										value={permissionValue.value}
-										onchange={e => updatePermissionValues(e, new SvelteSet([permission.id]))}
-									/>
-									{permissionValue.label}
-								</label>
-							{/each}
-						</div>
-					</Td>
-					{#if groupPermissionValueMap}
-						<Td
-							property="groupValue"
-							class="px-4"
-						>
-							<span class="badge badge-pill bg-{permissionValueList[permission.groupValue ?? 'NONE'].color}"
-								>{permissionValueList[permission.groupValue ?? 'NONE'].label}</span
-							>
-						</Td>
-						<Td
-							property="computedValue"
-							class="px-4"
-						>
-							<span class="badge badge-pill bg-{permissionValueList[permission.computedValue ?? 'NONE'].color}"
-								>{permissionValueList[permission.computedValue ?? 'NONE'].label}</span
-							>
-						</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 => {
-					updatePermissionValues(e, selectedPermissionIds)
-					selectedPermissionIds.clear()
-					selectedPermissionValue = null
-				}}
-			>
-				{#each Object.values(permissionValueList) as permission}
-					<option value={permission.value}>{permission.label}</option>
-				{/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
+		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',
+		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)
+	const permissionValueList: Record<Scope, { label: string; value: Scope; color: ButtonColors }> = {
+		NONE: { label: translate('common:permissionLevel.none', 'None'), value: 'NONE', color: 'danger' },
+		SITE: {
+			label: translate(`common:permissionLevel.${siteLabel.toLowerCase()}`, siteLabel),
+			value: 'SITE',
+			color: 'primary',
+		},
+		GLOBAL: { label: translate('common:permissionLevel.global', 'Global'), value: 'GLOBAL', color: 'success' },
+	}
+	const permissionValues = Object.values(permissionValueList)
+
+	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,
+			}
+		})
+	}
+
+	let computedPermissions = $derived(getComputedPermissions(permissions, permissionValueMap, groupPermissionValueMap))
+
+	$inspect(computedPermissions)
+</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}
+					<option value={permission.value}>{permission.label}</option>
+				{/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>