@nu-art/permissions-frontend 0.400.5

package/ui/permission-editors/permission-groups-editor.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { ModuleFE_Toaster, TS_ErrorBoundary, TS_PropRenderer } from '@nu-art/thunderstorm-frontend/index';
+import { MUSTNeverHappenException, sortArray, StaticLogger } from '@nu-art/ts-common';
+import { MultiSelect } from '../ui-props.js';
+import { TS_Icons } from '@nu-art/ts-styles';
+import { ModuleFE_PermissionAccessLevel, ModuleFE_PermissionDomain, ModuleFE_PermissionGroup } from '../../_entity.js';
+import { Component_BasePermissionItemEditor } from './editor-base.js';
+import { Input_Text_Blur } from './components.js';
+import { DropDown_PermissionProject } from '../../_entity/permission-project/ui-components.js';
+import { Page_ItemsEditor } from '@nu-art/thunderstorm-frontend/components/Page_ItemsEditor/index';
+import { TS_EditableItemControllerProto } from '@nu-art/thunderstorm-frontend/editable-item';
+class Component_EditGroup extends Component_BasePermissionItemEditor {
+    static defaultProps = {
+        module: ModuleFE_PermissionGroup,
+        displayResolver: (item) => ModuleFE_PermissionGroup.cache.unique(item._id)?.label ?? 'Not Found'
+    };
+    renderLevels = () => {
+        const group = this.state.editable;
+        if (!group)
+            return '';
+        return _jsx(TS_ErrorBoundary, { children: _jsx(TS_PropRenderer.Vertical, { label: 'Levels', children: _jsx(MultiSelect.AccessLevel, { editable: group, prop: 'accessLevelIds', className: 'domain-level-list', itemRenderer: (levelId, onDelete) => {
+                        const level = ModuleFE_PermissionAccessLevel.cache.unique(levelId);
+                        if (!level)
+                            throw new MUSTNeverHappenException(`Could not find access level with id ${levelId}`);
+                        const domain = ModuleFE_PermissionDomain.cache.unique(level.domainId);
+                        if (!domain)
+                            throw new MUSTNeverHappenException(`Could not find domain with id ${level.domainId}`);
+                        return _jsxs(Fragment, { children: [_jsx(TS_Icons.x.component, { onClick: onDelete }), `${domain.namespace}: ${level.name} (${level.value})`] }, levelId);
+                    } }) }) });
+    };
+    editorContent = () => {
+        const group = this.state.editable;
+        return _jsxs(_Fragment, { children: [_jsx(TS_PropRenderer.Vertical, { label: 'Label', children: _jsx(Input_Text_Blur, { editable: group, prop: 'label' }) }), _jsx(TS_PropRenderer.Vertical, { label: 'Project', children: _jsx(DropDown_PermissionProject.editable, { editable: group, prop: 'projectId' }) }), this.renderLevels()] });
+    };
+}
+class Controller_EditGroup extends TS_EditableItemControllerProto {
+    static defaultProps = {
+        keys: ['selected'],
+        module: ModuleFE_PermissionGroup,
+        editor: Component_EditGroup,
+        createInitialInstance: () => ({}),
+        autoSave: true
+    };
+}
+export class PermissionGroupsEditor extends Page_ItemsEditor {
+    //######################### Static #########################
+    static Route = {
+        key: 'group-permission-editor',
+        path: 'group-permission-editor',
+        Component: this
+    };
+    static defaultProps = {
+        keys: ['selected'],
+        module: ModuleFE_PermissionGroup,
+        mapper: group => [group.label ?? 'Not Found'],
+        sort: (items) => sortArray(items, 'label'),
+        itemRenderer: group => _jsx(_Fragment, { children: group.label ?? 'Not Found' }),
+        EditorRenderer: Controller_EditGroup,
+        route: this.Route,
+        contextMenuActions: [
+            {
+                label: 'Delete Group',
+                action: async (item) => {
+                    try {
+                        await ModuleFE_PermissionGroup.v1.delete(item).executeSync();
+                        return true;
+                    }
+                    catch (err) {
+                        StaticLogger.logError({ ...err });
+                        ModuleFE_Toaster.toastError(err.errorResponse.debugMessage.split('\n')[0]);
+                    }
+                }
+            }
+        ]
+    };
+    renderHeader() {
+        return _jsx(_Fragment, { children: "Permission Group" });
+    }
+}

package/ui/permission-editors/permission-project-editor/permission-project-editor.scss

@@ -0,0 +1,10 @@
+#permission-projects-editor {
+  .editor-content{
+
+    .item-editor {
+      .item-editor__main {
+        height: 100%;
+      }
+    }
+  }
+}

package/ui/permission-editors/permission-project-editor/permission-projects-editor.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { InferProps, TS_Route } from '@nu-art/thunderstorm-frontend/index';
+import { Page_ItemsEditor } from '@nu-art/thunderstorm-frontend/components/Page_ItemsEditor/index';
+import './permission-project-editor.scss';
+import { DBProto_PermissionProject } from '@nu-art/permissions-shared';
+export declare class PermissionProjectsEditor extends Page_ItemsEditor<DBProto_PermissionProject> {
+    static Route: TS_Route;
+    static defaultProps: Partial<InferProps<PermissionProjectsEditor>>;
+    protected renderHeader(): React.ReactNode;
+}

package/ui/permission-editors/permission-project-editor/permission-projects-editor.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { TS_PropRenderer } from '@nu-art/thunderstorm-frontend/index';
+import { ModuleFE_PermissionProject } from '../../../_entity.js';
+import { Component_BasePermissionItemEditor } from '../editor-base.js';
+import { Input_Text_Blur } from '../components.js';
+import { PermissionAPIEditor } from '../permission-api-edior/permission-api-editor.js';
+import { Page_ItemsEditor } from '@nu-art/thunderstorm-frontend/components/Page_ItemsEditor/index';
+import './permission-project-editor.scss';
+import { TS_EditableItemControllerProto } from '@nu-art/thunderstorm-frontend/components/TS_EditableItemControllerProto/index';
+import { sortArray } from '@nu-art/ts-common';
+class Component_EditProject extends Component_BasePermissionItemEditor {
+    static defaultProps = {
+        module: ModuleFE_PermissionProject,
+        displayResolver: (item) => ModuleFE_PermissionProject.cache.unique(item._id)?.name ?? 'Not Found'
+    };
+    editorContent = () => {
+        const project = this.state.editable;
+        return _jsxs(_Fragment, { children: [_jsx(TS_PropRenderer.Vertical, { label: 'Name', style: { flex: 0 }, children: _jsx(Input_Text_Blur, { editable: project, prop: 'name' }) }), project.item._id && _jsx(PermissionAPIEditor, { projectId: project.item._id })] });
+    };
+}
+class Controller_ProjectEditor extends TS_EditableItemControllerProto {
+    static defaultProps = {
+        keys: ['selected'],
+        module: ModuleFE_PermissionProject,
+        editor: Component_EditProject,
+        createInitialInstance: () => ({}),
+        autoSave: true
+    };
+}
+export class PermissionProjectsEditor extends Page_ItemsEditor {
+    //######################### Static #########################
+    static Route = {
+        key: 'project-permission-editor',
+        path: 'project-permission-editor',
+        Component: this,
+        children: [PermissionAPIEditor.Route]
+    };
+    static defaultProps = {
+        keys: ['selected'],
+        id: 'permission-projects-editor',
+        module: ModuleFE_PermissionProject,
+        mapper: project => [project.name ?? 'Not Found'],
+        sort: (items) => sortArray(items, 'name'),
+        itemRenderer: project => _jsx(_Fragment, { children: project.name ?? 'Not Found' }),
+        EditorRenderer: Controller_ProjectEditor,
+        hideAddItem: true,
+        route: this.Route
+    };
+    renderHeader() {
+        return _jsx(_Fragment, { children: "Permission Project" });
+    }
+}

package/ui/permission-editors/permission-users-editor.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Page_ItemsEditor } from '@nu-art/thunderstorm-frontend/components/Page_ItemsEditor/index';
+import { InferProps, TS_Route } from '@nu-art/thunderstorm-frontend/index';
+import { DBProto_PermissionUser } from '@nu-art/permissions-shared';
+export declare class PermissionUsersEditor extends Page_ItemsEditor<DBProto_PermissionUser> {
+    static Route: TS_Route;
+    protected renderHeader(): React.ReactNode;
+    static defaultProps: Partial<InferProps<PermissionUsersEditor>>;
+}

package/ui/permission-editors/permission-users-editor.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { ModuleFE_Account } from '@nu-art/user-account-frontend/index';
+import { ModuleFE_PermissionUser } from '../../_entity.js';
+import { Page_ItemsEditor } from '@nu-art/thunderstorm-frontend/components/Page_ItemsEditor/index';
+import { TS_PropRenderer } from '@nu-art/thunderstorm-frontend/index';
+import { MultiSelect } from '../ui-props.js';
+import { Component_BasePermissionItemEditor } from './editor-base.js';
+import { TS_EditableItemControllerProto } from '@nu-art/thunderstorm-frontend/editable-item';
+import { sortArray } from '@nu-art/ts-common';
+class Component_EditAccount extends Component_BasePermissionItemEditor {
+    static defaultProps = {
+        module: ModuleFE_PermissionUser,
+        displayResolver: (item) => ModuleFE_Account.cache.unique(item._id)?.email ?? 'Not Found'
+    };
+    editorContent = () => {
+        return _jsx(TS_PropRenderer.Vertical, { label: 'Groups', children: _jsx(MultiSelect.Group, { className: 'user-permission-groups', editable: this.state.editable, prop: 'groups' }) });
+    };
+}
+class Controller_EditAccount extends TS_EditableItemControllerProto {
+    static defaultProps = {
+        keys: ['selected'],
+        module: ModuleFE_PermissionUser,
+        editor: Component_EditAccount,
+        createInitialInstance: () => ({}),
+        autoSave: true
+    };
+}
+export class PermissionUsersEditor extends Page_ItemsEditor {
+    //######################### Static #########################
+    static Route = {
+        key: 'user-permission-editor',
+        path: 'user-permission-editor',
+        Component: this
+    };
+    renderHeader() {
+        return _jsx(_Fragment, { children: "User Permissions" });
+    }
+    static defaultProps = {
+        keys: ['selected'],
+        module: ModuleFE_PermissionUser,
+        mapper: (user) => [ModuleFE_Account.cache.unique(user._id)?.email ?? 'Not Found'],
+        sort: (items) => sortArray(items, (user) => ModuleFE_Account.cache.unique(user._id)?.email),
+        itemRenderer: (user) => _jsx(_Fragment, { children: ModuleFE_Account.cache.unique(user._id)?.email ?? 'Not Found' }),
+        EditorRenderer: Controller_EditAccount,
+        hideAddItem: true,
+        route: this.Route
+    };
+}

package/ui/ui-props.d.ts

@@ -0,0 +1,16 @@
+import { StaticProps_TS_MultiSelect_V2 } from '@nu-art/thunderstorm-frontend/components/TS_MultiSelect/index';
+export declare const Permissions_DropDown: {
+    Project: (props: import("@nu-art/thunderstorm-frontend/index").AppLevelProps_TS_GenericDropDownV3<import("@nu-art/permissions-shared").DB_PermissionProject>) => import("react/jsx-runtime").JSX.Element;
+    AccessLevel: (props: import("@nu-art/thunderstorm-frontend/index").AppLevelProps_TS_GenericDropDownV3<import("@nu-art/permissions-shared").DB_PermissionAccessLevel>) => import("react/jsx-runtime").JSX.Element;
+    Domain: (props: import("@nu-art/thunderstorm-frontend/index").AppLevelProps_TS_GenericDropDownV3<import("@nu-art/permissions-shared").DB_PermissionDomain>) => import("react/jsx-runtime").JSX.Element;
+    Group: (props: import("@nu-art/thunderstorm-frontend/index").AppLevelProps_TS_GenericDropDownV3<import("@nu-art/permissions-shared").DB_PermissionGroup>) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const MultiSelect: {
+    AccessLevel_StamTest: <EnclosingItem_, Prop extends import("@nu-art/ts-common").SubsetKeys<keyof EnclosingItem_, EnclosingItem_, string[] | undefined>>(props: import("@nu-art/thunderstorm-frontend/index").DynamicProps_TS_MultiSelect_V2<EnclosingItem_, Prop> & Partial<StaticProps_TS_MultiSelect_V2<string>>) => import("react/jsx-runtime").JSX.Element;
+    AccessLevel: <EnclosingItem_, Prop extends import("@nu-art/ts-common").SubsetKeys<keyof EnclosingItem_, EnclosingItem_, string[] | undefined>>(props: import("@nu-art/thunderstorm-frontend/index").DynamicProps_TS_MultiSelect_V2<EnclosingItem_, Prop> & Partial<StaticProps_TS_MultiSelect_V2<string>>) => import("react/jsx-runtime").JSX.Element;
+    Group: <EnclosingItem_, Prop extends import("@nu-art/ts-common").SubsetKeys<keyof EnclosingItem_, EnclosingItem_, {
+        groupId: string;
+    }[] | undefined>>(props: import("@nu-art/thunderstorm-frontend/index").DynamicProps_TS_MultiSelect_V2<EnclosingItem_, Prop> & Partial<StaticProps_TS_MultiSelect_V2<{
+        groupId: string;
+    }>>) => import("react/jsx-runtime").JSX.Element;
+};

package/ui/ui-props.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ComponentSync, LL_V_L } from '@nu-art/thunderstorm-frontend/index';
+import { dbObjectToId, sortArray } from '@nu-art/ts-common';
+import { TS_MultiSelect_V2 } from '@nu-art/thunderstorm-frontend/components/TS_MultiSelect/index';
+import { ModuleFE_PermissionAccessLevel, ModuleFE_PermissionDomain, ModuleFE_PermissionGroup } from '../_entity.js';
+import { DropDown_PermissionAccessLevel } from '../_entity/permission-access-level/ui-components.js';
+import { DropDown_PermissionProject } from '../_entity/permission-project/ui-components.js';
+import { DropDown_PermissionDomain } from '../_entity/permission-domain/ui-components.js';
+import { DropDown_PermissionGroup } from '../_entity/permission-group/ui-components.js';
+import { TS_Icons } from '@nu-art/ts-styles';
+export const Permissions_DropDown = {
+    Project: DropDown_PermissionProject.selectable,
+    AccessLevel: DropDown_PermissionAccessLevel.selectable,
+    Domain: DropDown_PermissionDomain.selectable,
+    Group: DropDown_PermissionGroup.selectable,
+};
+class DomainLevelRenderer extends ComponentSync {
+    render() {
+        const selectedLevels = ModuleFE_PermissionAccessLevel.cache.filter(item => this.props.existingItems.includes(item._id));
+        const availableDomainsIds = ModuleFE_PermissionDomain.cache.filter(item => !selectedLevels.find(level => level.domainId === item._id)).map(dbObjectToId);
+        return _jsxs(LL_V_L, { className: 'domain-level-renderer', children: [_jsx(Permissions_DropDown.Domain, { selected: this.state.domainId, queryFilter: domain => availableDomainsIds.includes(domain._id), onSelected: domain => this.setState({ domainId: domain._id }), sortBy: ['namespace'], placeholder: 'Domain' }), _jsx(Permissions_DropDown.AccessLevel, { disabled: !this.state.domainId, queryFilter: level => this.state.domainId === level.domainId, selected: undefined, onSelected: (accessLevel) => this.props.onSelected(accessLevel._id), sortBy: ['value'], placeholder: 'Level' })] });
+    }
+    deriveStateFromProps(nextProps, state) {
+        return { domainId: undefined, onSelected: nextProps.onSelected };
+    }
+}
+class GroupRenderer extends ComponentSync {
+    shouldComponentUpdate() {
+        return true;
+    }
+    render() {
+        return _jsx(Permissions_DropDown.Group, { onSelected: group => this.props.onSelected({ groupId: group._id }), queryFilter: group => !this.props.existingItems.find(g => g.groupId === group._id), sortBy: ['label'], selected: undefined });
+    }
+}
+const AccessLevelItemRenderer = (levelId) => {
+    const level = ModuleFE_PermissionAccessLevel.cache.unique(levelId);
+    const domain = ModuleFE_PermissionDomain.cache.unique(level?.domainId);
+    return `${domain?.namespace ?? 'Not Found'}: ${level?.name ?? 'Not Found'} (${level?.value ?? '#'})`;
+};
+const MultiSelect_PermissionsAccessLevel = {
+    itemRenderer: (accessLevelId, onDelete) => _jsxs(_Fragment, { children: [AccessLevelItemRenderer(accessLevelId), _jsx(TS_Icons.x.component, { onClick: onDelete })] }),
+    selectionRenderer: (props) => _jsx(DomainLevelRenderer, { onSelected: props.onSelected, className: props.className, existingItems: props.existingItems, queryFilter: props.queryFilter }),
+    sort: items => sortArray(items, AccessLevelItemRenderer)
+};
+const MultiSelect_PermissionsAccessLevelStam = {
+    itemRenderer: (accessLevelId, onDelete) => _jsxs(_Fragment, { children: [_jsx("div", { className: "ts-icon__small", onClick: onDelete, children: "X" }), _jsx("span", { children: ModuleFE_PermissionAccessLevel.cache.unique(accessLevelId)?.name || 'not found' })] }),
+    selectionRenderer: (selector) => _jsx(Permissions_DropDown.AccessLevel, { queryFilter: item => {
+            const selectedLevels = ModuleFE_PermissionAccessLevel.cache.filter(item => selector.existingItems.includes(item._id));
+            const availableDomainsIds = ModuleFE_PermissionDomain.cache.filter(item => !selectedLevels.find(level => level.domainId === item._id)).map(dbObjectToId);
+            return availableDomainsIds.includes(item.domainId);
+        }, onSelected: item => selector.onSelected(item._id) })
+};
+const MultiSelect_PermissionsGroup = {
+    itemRenderer: (group, onDelete) => _jsxs(_Fragment, { children: [ModuleFE_PermissionGroup.cache.unique(group?.groupId)?.label || 'not found', _jsx(TS_Icons.x.component, { className: "ts-icon__small", onClick: onDelete })] }),
+    selectionRenderer: (props) => _jsx(GroupRenderer, { onSelected: props.onSelected, className: props.className, existingItems: props.existingItems, queryFilter: props.queryFilter }),
+    sort: items => sortArray(items, item => ModuleFE_PermissionGroup.cache.unique(item?.groupId)?.label || 'not found')
+};
+export const MultiSelect = {
+    AccessLevel_StamTest: TS_MultiSelect_V2.prepare(MultiSelect_PermissionsAccessLevelStam),
+    AccessLevel: TS_MultiSelect_V2.prepare(MultiSelect_PermissionsAccessLevel),
+    Group: TS_MultiSelect_V2.prepare(MultiSelect_PermissionsGroup),
+};