@nu-art/user-account-frontend 0.400.5

package/ui/PopUp_AccountMenu/PopUp_AccountMenu.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { _className, ComponentSync, getElementCenterPos, Grid, LL_H_C, LL_V_C, LL_V_L, ModuleFE_MouseInteractivity, ModuleFE_Thunderstorm, mouseInteractivity_PopUp, TS_ComponentTransition, TS_ErrorBoundary, Button } from '@nu-art/thunderstorm-frontend/index';
+import { resolveContent, RuntimeVersion } from '@nu-art/ts-common';
+import { Component_AccountThumbnail } from '../Component_AccountThumbnail/Component_AccountThumbnail.js';
+import './PopUp_AccountMenu.scss';
+import { Component_ChangePassword } from '../Component_ChangePassword/Component_ChangePassword.js';
+import { ModuleFE_Utils } from '@nu-art/thunderstorm-frontend/modules/ModuleFE_Utils/ModuleFE_Utils';
+import { RendererKey_AccountMenu_SubHeader } from '../../consts.js';
+import { ModuleFE_Account } from '../../_entity/account/index.js';
+export class PopUp_AccountMenu extends ComponentSync {
+    // ######################### Static #########################
+    static show(e, props, modalProps) {
+        ModuleFE_MouseInteractivity.showContent({
+            id: 'pop-up__account-menu',
+            originPos: getElementCenterPos(e.currentTarget),
+            modalPos: modalProps?.modalPos ?? { x: -1, y: 1 },
+            content: () => _jsx(PopUp_AccountMenu, { ...props }),
+            offset: modalProps?.offset,
+        });
+    }
+    static Action_AppToolsButton = (url) => ({
+        label: 'App Tools',
+        type: 'action',
+        closePopUp: true,
+        action: () => {
+            ModuleFE_Thunderstorm.openUrl(url, '_blank');
+        }
+    });
+    static Action_EditPassword = {
+        label: 'Edit Password',
+        type: 'page',
+        pageKey: 'edit-password',
+        content: (account, closePageTrigger) => _jsx(Component_ChangePassword, { postSubmitAction: closePageTrigger })
+    };
+    static defaultProps = {
+        menuActions: [PopUp_AccountMenu.Action_AppToolsButton('/app-tools'), PopUp_AccountMenu.Action_EditPassword]
+    };
+    // ######################### Life Cycle #########################
+    deriveStateFromProps(nextProps, state) {
+        state.account = ModuleFE_Account.cache.unique(nextProps.accountId);
+        if (!state.account)
+            this.logError('Could not get account', `account id: ${nextProps.accountId}`);
+        //Gather menu actions
+        state.menuActions = nextProps.menuActions?.map(menuAction => resolveContent(menuAction));
+        //Prepare page map from actions
+        state.pageMap = state.menuActions?.reduce((map, action) => {
+            if (action.type === 'page')
+                map[action.pageKey] = action.content;
+            return map;
+        }, {}) ?? {};
+        return state;
+    }
+    // ######################### Logic #########################
+    closePopUp = () => {
+        ModuleFE_MouseInteractivity.hide(mouseInteractivity_PopUp);
+    };
+    logOut = async () => {
+        this.closePopUp();
+        ModuleFE_Account.logout();
+    };
+    onActionClick = (action) => {
+        switch (action.type) {
+            case 'action': {
+                if (action.closePopUp)
+                    this.closePopUp();
+                action.action();
+                break;
+            }
+            case 'page': {
+                this.setState({ pageKey: action.pageKey, prevPageKey: action.pageKey });
+                break;
+            }
+            default:
+                // @ts-ignore
+                this.logError(`Unknown action type ${action.type}`);
+        }
+    };
+    closeCustomPage = () => {
+        this.setState({ pageKey: undefined });
+    };
+    // ######################### Render #########################
+    render() {
+        return _jsxs(TS_ErrorBoundary, { children: [this.renderNoAccount(), this.renderAccount()] });
+    }
+    renderNoAccount = () => {
+        if (this.state.account)
+            return;
+        return _jsx("div", { className: 'account-menu__not-found', children: "Account Not Found" });
+    };
+    renderAccount = () => {
+        if (!this.state.account)
+            return;
+        return _jsxs(_Fragment, { children: [_jsxs(LL_V_L, { className: 'account-menu', children: [this.renderHeader(), this.renderBody(), this.renderFooter()] }), this.renderCustomPage()] });
+    };
+    renderSeparatorBar = (style) => {
+        return _jsx("span", { className: 'account-menu__separator', style: style });
+    };
+    // ######################### Render - Account Parts #########################
+    renderHeader = () => {
+        const account = this.state.account;
+        if (!account)
+            return;
+        const accountDisplay = this.props.accountDisplayModifier?.(account) ?? account.displayName ?? account.email;
+        const AdditionalHeaderRenderer = ModuleFE_Utils.getRenderer(RendererKey_AccountMenu_SubHeader, { account: account });
+        return _jsxs(_Fragment, { children: [_jsxs(LL_H_C, { className: 'account-menu__header', children: [_jsx(Component_AccountThumbnail, { accountId: () => account._id, acronymComposer: this.props.acronymComposer }), _jsx("div", { className: 'account-menu__header__display-name', children: accountDisplay })] }), AdditionalHeaderRenderer && _jsx(AdditionalHeaderRenderer, {}), this.renderSeparatorBar()] });
+    };
+    renderBody = () => {
+        const account = this.state.account;
+        if (!account)
+            return;
+        return _jsx(Grid, { className: 'account-menu__body', children: this.state.menuActions?.map((menuAction, i) => {
+                return _jsx(Button, { variant: 'secondary', id: menuAction.id, className: _className(menuAction.className), onClick: () => this.onActionClick(menuAction), children: menuAction.label }, i);
+            }) });
+    };
+    renderFooter = () => {
+        const account = this.state.account;
+        if (!account)
+            return;
+        return _jsxs(_Fragment, { children: [this.renderSeparatorBar({ marginTop: 'auto' }), _jsxs(LL_V_C, { className: 'account-menu__footer', children: [_jsx(Button, { variant: 'primary', onClick: this.logOut, children: "Log Out" }), _jsx("div", { className: "version", children: RuntimeVersion() })] })] });
+    };
+    // ######################### Render - Custom Page #########################
+    renderCustomPage = () => {
+        const pageKey = this.state.pageKey;
+        const account = this.state.account;
+        if (!account)
+            return;
+        const className = _className('account-menu__custom-page', !!pageKey && 'show');
+        return _jsxs(LL_V_L, { className: className, children: [_jsx("div", { className: 'account-menu__custom-page__back-button', onClick: this.closeCustomPage, children: "Back" }), _jsx(TS_ComponentTransition, { trigger: !!pageKey, unmountTimeout: 200, onExitDone: () => this.setState({ prevPageKey: undefined }), children: this.state.pageMap[pageKey ?? this.state.prevPageKey]?.(account, this.closeCustomPage) })] });
+    };
+}

package/ui/PopUp_AccountMenu/PopUp_AccountMenu.scss

@@ -0,0 +1,167 @@
+@use '@nu-art/ts-styles' as S;
+
+%main-button-design {
+  width: 95%;
+  height: 30px;
+  margin: 0 auto;
+  @include S.mouse-interactive-background(S.dark-blue(2), S.dark-blue(1));
+}
+
+#pop-up__account-menu {
+  width: 280px;
+  height: 400px;
+  overflow: hidden;
+  background: white;
+  border-radius: 10px;
+  border: 2px solid S.dark-blue(1);
+  position: relative;
+
+  .account-menu__not-found {
+    width: 100%;
+    height: 100%;
+    font-size: 18px;
+    color: S.dark-blue(1);
+  }
+
+  .account-menu {
+    width: 100%;
+    height: 100%;
+
+    .account-menu__separator {
+      background: S.dark-blue(1);
+      width: 95%;
+      flex-shrink: 0;
+      margin: 0 auto;
+      height: 2px;
+      border-radius: 1px;
+    }
+
+    .account-menu__header {
+      width: 100%;
+      height: 65px;
+      flex-shrink: 0;
+      align-items: center;
+      gap: 10px;
+      padding: 0 10px;
+
+      .user-thumbnail {
+        width: 50px;
+        height: 50px;
+
+        .user-thumbnail__acronym {
+          font-size: 26px;
+        }
+      }
+
+      .account-menu__header__display-name {
+        font: {
+          size: 18px;
+          weight: 600;
+        }
+        color: S.dark-blue(1);
+      }
+    }
+
+    .container_role-names {
+      max-height: 200px;
+      padding: 4px;
+      width: 100%;
+
+      @include S.customScrollbar('vertical');
+
+      .role-name {
+        font: {
+          size: 12px;
+          weight: 550;
+        }
+        color: S.dark-blue(1);
+      }
+    }
+
+    .account-menu__body {
+      width: 100%;
+      padding: 10px;
+      gap: 10px;
+      grid-template-columns: 1fr 1fr;
+
+      .ts-button, .ts-busy-button {
+        margin: 0;
+        height: 30px;
+        background: transparent;
+        border: 2px solid S.dark-blue(2);
+
+        @include S.mouse-interactive-text(S.dark-blue(2), white);
+        @include S.mouse-interactive-background(white, S.dark-blue(2));
+      }
+    }
+
+    .account-menu__footer {
+      width: 100%;
+      margin-block: 4px;
+      gap: 4px;
+      align-items: center;
+      flex-shrink: 0;
+
+      .ts-button {
+        @extend %main-button-design;
+      }
+
+      .version {
+        color: #006fab;
+      }
+    }
+  }
+
+  .account-menu__custom-page {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    transition: translate 200ms linear;
+    background: white;
+    padding: 10px 0;
+
+    .account-menu__custom-page__back-button {
+      transition: background 100ms, color 100ms;
+      cursor: pointer;
+      padding: 4px 10px;
+      border-radius: 6px;
+      margin-left: 10px;
+      font: {
+        size: 14px;
+      }
+
+      @include S.mouse-interactive-background(white, S.dark-blue(2));
+      @include S.mouse-interactive-text(S.dark-blue(2), white);
+    }
+
+    &:not(.show) {
+      translate: 100% 0;
+    }
+
+    //Custom look for the change password page
+    .ts-account__change-password {
+      width: 100%;
+      padding: 10px 20px;
+      gap: 20px;
+      flex-grow: 1;
+      height: 0;
+
+      .ts-prop-renderer {
+        .ts-input {
+          border: 1px solid S.dark-blue(2);
+          border-radius: 6px;
+          min-height: 35px;
+        }
+      }
+
+      .ts-busy-button {
+        margin-top: auto;
+        width: 100%;
+
+        @extend %main-button-design;
+      }
+    }
+  }
+}