@isoftdata/svelte-user-configuration 1.0.27 → 1.0.28

package/README.md

@@ -1,5 +1,7 @@
 # Svelte UserConfiguration
 
+This Svelte component provides a user configuration interface, including user account details, site access, group membership, and permissions.
+
 ## Install
 
 ```sh
@@ -7,23 +9,140 @@ npm i @isoftdata/svelte-user-configuration
 ```
 
 ## Props
-| Name | Type | Description | Default Value |
-|------|------|-------------|---------------|
-|      |      |             |               |
-|      |      |             |               |
-|      |      |             |               |
+
+### User Account Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `userAccount` | `UserAccount` | ✅ | - | The user account information. |
+| `canToggleActive` | `CanToggleActive` | ❌ | `true` | Whether the user can be activated/deactivated. |
+| `canEditAccountInfo` | `CanEditAccountInfo` | ❌ | `true` | Whether account details can be edited. |
+| `doSendPasswordRecoveryToken` | `DoSendPasswordRecoveryToken` | ❌ | `false` | Whether to allow sending password recovery tokens. |
+| `hasPermissionToChangePassword` | `HasPermissionToChangePassword` | ❌ | `false` | Whether the user has permission to change passwords. |
+
+### Site Access Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `userSites` | `UserSites` | ✅ | - | List of sites the user has access to. |
+| `canEditSiteAccess` | `CanEditSiteAccess` | ❌ | `true` | Whether site access can be edited. |
+
+### Group Membership Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `groupMembership` | `GroupMembership` | ✅ | - | The user's group membership information. |
+| `canEditGroupMembership` | `CanEditGroupMembership` | ❌ | `true` | Whether group memberships can be edited. |
+
+### Permission List Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `permissions` | `Permissions` | ✅ | - | The list of permissions for the user. |
+| `permissionValueMap` | `PermissionValueMap` | ✅ | `new Map()` | A mapping of permissions to their values. |
+| `groupPermissionValueMap` | `GroupPermissionValueMap` | ❌ | `undefined` | A mapping of group-based permissions. |
+
+### Other Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `siteLabel` | `SiteLabel` | ❌ | `"Site"` | Label for the site. |
+| `userAccountInfoIcon` | `IconName` | ❌ | `"user"` | Icon for the user account section. |
+| `groupMembershipIcon` | `IconName` | ❌ | `"users"` | Icon for the group membership section. |
+| `permissionListIcon` | `IconName` | ❌ | `"user-lock"` | Icon for the permission list section. |
+| `userSiteAccessIcon` | `IconName` | ❌ | `"industry-windows"` | Icon for the site access section. |
+| `permissionListCardHeaderTitle` | `PermissionListCardHeaderTitle` | ❌ | `"Permissions"` | Title for the permission list card header. |
+| `usernameInput` | `HTMLInputElement \| undefined` | ❌ | `undefined` | Reference to the username input element. |
+
+### Callbacks
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `error` | `ErrorFn` | Callback for handling errors. |
+| `success` | `SuccessFn` | Callback for handling success messages. |
+| `deactivateUser` | `DeactivateUserFn` | Function to deactivate a user. |
+| `confirmPasswordSet` | `ConfirmPasswordSetFn` | Function called when a password is set. |
+| `accountInfoChanged` | `AccountInfoChangedFn` | Function called when account info changes. |
+| `sendPasswordRecoveryToken` | `SendPasswordRecoveryTokenFn` | Function to send password recovery token. |
+| `generateNewActivationPIN` | `GenerateNewActivationPINFn` | Function to generate a new activation PIN. |
+| `permissionValueChange` | `PermissionValueChangeFn` | Function called when permissions change. |
+| `siteAccessChange` | `SiteAccessChangeFn` | Function called when site access is changed. |
+| `groupMembershipChange` | `GroupMembershipChangeFn` | Function called when group membership changes. |
 
 ## Slots
-* default - A brief description of the slot, if there is one
+This component provides named slots for injecting additional content.
 
-## Events
-* exampleEvent - A brief description of the event, if there are any
+| Slot Name | Description |
+|-----------|-------------|
+| `userAccountInfo` | Slot at the end of the `userAccountInfo` component's card body |
+| `siteAccess` | Slot at the end of the `siteAccess` component's card body |
+| `userGroupMembership` | Slot at the end of the `userGroupMembership` component's card body |
+| `permissionList` | Slot at the end of the `permissionList` component's card body |
+
+## Usage Example in Svelte 5 w/ Runes
 
-## Example
 ```svelte
 <script lang="ts">
-	import UserConfiguration from '@isoftdata/svelte-user-configuration'
+	import { UserConfiguration, getGroupHighestPermissionValueMap } from '@isoftdata/svelte-user-configuration'
+
+	interface Props {
+		plants: PlantsForDropdown$result['plants']['data']
+		groups: Array<Group>
+		permissions: UserConfigurationData$result['permissions']['data']
+		userAccount: UserAccount
+		permissionValueMap?: PermissionValueMap
+		groupPermissionMap?: GroupPermissionMap
+		authorizedSitesSet?: any
+		groupMembershipSet?: any
+	}
+
+	let {
+		plants,
+		groups,
+		permissions,
+		userAccount = $bindable(),
+		permissionValueMap = $bindable(new SvelteMap()),
+		groupPermissionMap = new SvelteMap(),
+		authorizedSitesSet = $bindable(new SvelteSet<number>()),
+		groupMembershipSet = $bindable(new SvelteSet<number>()),
+	}: Props = $props()
+
+	let userSites = $derived(
+		plants.map(({ id, code, name }) => {
+			return { id, code, name, isAuthorized: authorizedSitesSet.has(id) }
+		}),
+	)
+	let groupMembership = $derived(
+		groups.map(({ id, name }) => {
+			return { id, name, isMember: groupMembershipSet.has(id) }
+		}),
+	)
+	let groupPermissionValueMap = $derived(getGroupHighestPermissionValueMap(groupMembershipSet, groupPermissionMap))
 </script>
 
-<UserConfiguration prop='foo' />
+<UserConfiguration
+	siteLabel="Plant"
+	bind:userAccount
+	bind:usernameInput
+	bind:doSendPasswordRecoveryToken={sendPasswordRecoveryToken}
+	{userSites}
+	{groupMembership}
+	{permissions}
+	{permissionValueMap}
+	{groupPermissionValueMap}
+	siteAccessChange={async site => {
+		site.isAuthorized ? authorizedSitesSet.add(site.id) : authorizedSitesSet.delete(site.id)
+		authorizedSitesSet = new Set(authorizedSitesSet)
+	}}
+	groupMembershipChange={async ({ id, isMember }) => {
+		isMember ? groupMembershipSet.add(id) : groupMembershipSet.delete(id)
+		groupMembershipSet = new Set(groupMembershipSet)
+	}}
+	permissionValueChange={async ({ permissionIds, value }) => {
+		for (const id of permissionIds) {
+			permissionValueMap.set(id, value)
+		}
+		permissionValueMap = new Map(permissionValueMap)
+	}}
+/>
 ```

package/dist/DeactivateUserModal.svelte

@@ -1,5 +1,6 @@
 <script>import { getContext, tick } from "svelte";
 import { klona } from "klona";
+import { translate as defaultTranslate } from "@isoftdata/utility-string";
 import Modal from "@isoftdata/svelte-modal";
 import TextArea from "@isoftdata/svelte-textarea";
 let show = false;
@@ -14,7 +15,7 @@ export async function open(userAccountCtx) {
   await tick();
   textarea?.select();
 }
-const { t: translate } = getContext("i18next") || { t: (_key, fallback) => fallback };
+const { t: translate } = getContext("i18next") || { t: defaultTranslate };
 </script>
 
 <Modal

package/dist/PasswordRecoveryModal.svelte

@@ -1,7 +1,8 @@
 <script>import { getContext } from "svelte";
 import Modal from "@isoftdata/svelte-modal";
 import Input from "@isoftdata/svelte-input";
-const { t: translate } = getContext("i18next") || { t: (_key, fallback) => fallback };
+import { translate as defaultTranslate } from "@isoftdata/utility-string";
+const { t: translate } = getContext("i18next") || { t: defaultTranslate };
 export let sendPasswordRecoveryToken = void 0;
 export let doSendPasswordRecoveryToken;
 let resetDate = void 0;

package/dist/PasswordSetModal.svelte

@@ -1,8 +1,9 @@
-<script>import { tick, getContext } from "svelte";
+<script>import { klona } from "klona";
+import { tick, getContext } from "svelte";
 import Input from "@isoftdata/svelte-input";
 import Modal from "@isoftdata/svelte-modal";
 import PasswordFields from "@isoftdata/svelte-password-fields";
-import { klona } from "klona";
+import { translate as defaultTranslate } from "@isoftdata/utility-string";
 let show = false;
 let newPassword = "";
 let confirmPassword = "";
@@ -22,7 +23,7 @@ export async function open(userAccount) {
   await tick();
   input?.focus();
 }
-const { t: translate } = getContext("i18next") || { t: (_key, fallback) => fallback };
+const { t: translate } = getContext("i18next") || { t: defaultTranslate };
 </script>
 
 <Modal

package/dist/PermissionList.svelte

@@ -5,7 +5,8 @@ import Button from "@isoftdata/svelte-button";
 import Select from "@isoftdata/svelte-select";
 import { getEventValue } from "@isoftdata/browser-event";
 import { Table, Td } from "@isoftdata/svelte-table";
-const { t: translate } = getContext("i18next") || { t: (_key, fallback) => fallback };
+import { translate as defaultTranslate } from "@isoftdata/utility-string";
+const { t: translate } = getContext("i18next") || { t: defaultTranslate };
 export let permissions;
 export let siteLabel = "Site";
 export let permissionValueChange = void 0;

package/dist/UserAccountInfo.svelte

@@ -1,13 +1,13 @@
 <script>import { getContext } from "svelte";
 import Icon from "@isoftdata/svelte-icon";
 import Input from "@isoftdata/svelte-input";
-import { translate as defaultTranslate } from "@isoftdata/utility-string";
 import Button from "@isoftdata/svelte-button";
 import TextArea from "@isoftdata/svelte-textarea";
 import PasswordSetModal from "./PasswordSetModal.svelte";
 import PasswordFields from "@isoftdata/svelte-password-fields";
 import DeactivateUserModal from "./DeactivateUserModal.svelte";
 import PasswordRecoveryModal from "./PasswordRecoveryModal.svelte";
+import { translate as defaultTranslate } from "@isoftdata/utility-string";
 export let userAccount;
 export let icon = "user";
 export let canToggleActive = true;

package/dist/UserGroupMembership.svelte

@@ -1,7 +1,8 @@
 <script>import { getContext } from "svelte";
 import Icon from "@isoftdata/svelte-icon";
 import Checkbox from "@isoftdata/svelte-checkbox";
-const { t: translate } = getContext("i18next") || { t: (_key, fallback) => fallback };
+import { translate as defaultTranslate } from "@isoftdata/utility-string";
+const { t: translate } = getContext("i18next") || { t: defaultTranslate };
 export let groupMembership;
 export let canEditGroupMembership = true;
 export let groupMembershipChange = void 0;

package/dist/UserSiteAccess.svelte

@@ -1,7 +1,8 @@
 <script>import { getContext } from "svelte";
-import Checkbox from "@isoftdata/svelte-checkbox";
 import Icon from "@isoftdata/svelte-icon";
-const { t: translate } = getContext("i18next") || { t: (_key, fallback) => fallback };
+import Checkbox from "@isoftdata/svelte-checkbox";
+import { translate as defaultTranslate } from "@isoftdata/utility-string";
+const { t: translate } = getContext("i18next") || { t: defaultTranslate };
 export let userSites;
 export let siteLabel = "Site";
 export let canEditSiteAccess = true;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@isoftdata/svelte-user-configuration",
-	"version": "1.0.27",
+	"version": "1.0.28",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",