refactor to ts

City-of-Helsinki · May 30, 2024 · 762306a · 762306a
1 parent ebbc0f7
commit 762306a
Show file tree

Hide file tree

Showing 6 changed files with 560 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "file-saver": "^2.0.5",
     "font-awesome": "^4.7.0",
     "foundation-sites": "6.5.3",
+    "hds-react": "^3.8.0",
     "history": "^4.9.0",
     "leaflet": "^1.5.1",
     "leaflet-draw": "^1.0.4",

diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -55,12 +55,14 @@ type Props = OwnProps & {
 type State = {
   displaySideMenu: boolean;
   loggedIn: boolean;
+  displayUserGroups: boolean,
 };
 
 class App extends Component<Props, State> {
   state = {
     displaySideMenu: false,
-    loggedIn: false
+    loggedIn: false,
+    displayUserGroups: false
   };
   timerID: any;
 
@@ -154,6 +156,13 @@ class App extends Component<Props, State> {
       displaySideMenu: !this.state.displaySideMenu
     });
   };
+
+  toggleDisplayUserGroups = () => {
+    this.setState({
+      displayUserGroups: !this.state.displayUserGroups,
+    });
+  };
+
   handleDismissErrorModal = () => {
     this.props.closeReveal('apiError');
     this.props.clearError();
@@ -175,7 +184,8 @@ class App extends Component<Props, State> {
       userServiceUnits
     } = this.props;
     const {
-      displaySideMenu
+      displaySideMenu,
+      displayUserGroups
     } = this.state;
     const appStyle = IS_DEVELOPMENT_URL ? 'app-dev' : 'app';
 
@@ -216,13 +226,61 @@ class App extends Component<Props, State> {
           };
 
           return <div className={appStyle}>
-                <ApiErrorModal size={Sizes.LARGE} data={apiError} isOpen={Boolean(apiError)} handleDismiss={this.handleDismissErrorModal} />
+                <ApiErrorModal 
+                  size={Sizes.LARGE} 
+                  data={apiError} 
+                  isOpen={Boolean(apiError)} 
+                  handleDismiss={this.handleDismissErrorModal} 
+                />
+
+                <ConfirmationModal 
+                  confirmButtonClassName={confirmationModalButtonClassName} 
+                  confirmButtonLabel={confirmationModalButtonText} 
+                  isOpen={isConfirmationModalOpen} 
+                  label={confirmationModalLabel} 
+                  onCancel={handleHideConfirmationModal} 
+                  onClose={handleHideConfirmationModal} 
+                  onSave={handleConfirmation} 
+                  title={confirmationModalTitle || ''} 
+                />
 
-                <ConfirmationModal confirmButtonClassName={confirmationModalButtonClassName} confirmButtonLabel={confirmationModalButtonText} isOpen={isConfirmationModalOpen} label={confirmationModalLabel} onCancel={handleHideConfirmationModal} onClose={handleHideConfirmationModal} onSave={handleConfirmation} title={confirmationModalTitle || ''} />
+                <ReduxToastr 
+                  newestOnTop={true}
+                  position="bottom-right"
+                  preventDuplicates={true}
+                  progressBar={false}
+                  timeOut={2000}
+                  transitionIn="fadeIn"
+                  transitionOut="fadeOut"
+                  closeOnToastrClick={true}
+                />
 
-                <ReduxToastr newestOnTop={true} position="bottom-right" preventDuplicates={true} progressBar={false} timeOut={2000} transitionIn="fadeIn" transitionOut="fadeOut" closeOnToastrClick={true} />
+                <TopNavigation
+                  isMenuOpen={displaySideMenu}
+                  linkUrl={linkUrl}
+                  onLogout={this.logOut}
+                  pageTitle={pageTitle}
+                  showSearch={showSearch}
+                  toggleSideMenu={this.toggleSideMenu}
+                  toggleDisplayUserGroups={this.toggleDisplayUserGroups}
+                  username={get(user, 'profile.name')}
+                  userServiceUnits={userServiceUnits}
+                  userActiveServiceUnit={userActiveServiceUnit}
+                />
 
-                <TopNavigation isMenuOpen={displaySideMenu} linkUrl={linkUrl} onLogout={this.logOut} pageTitle={pageTitle} showSearch={showSearch} toggleSideMenu={this.toggleSideMenu} userGroups={userGroups} username={get(user, 'profile.name')} userServiceUnits={userServiceUnits} userActiveServiceUnit={userActiveServiceUnit} />
+                {displayUserGroups &&
+                  <section className="app__usergroup-list">
+                    <strong>Käyttäjäryhmät ja palvelukokonaisuudet</strong>
+                    {userGroups && userGroups.length > 1 &&
+                      userGroups.map((group, index) => {
+                        return (
+                          <p className="usergroup-list-item" key={group}>
+                            {group}
+                          </p>
+                        );
+                      })}
+                  </section>
+                }
 
                 <section className="app__content">
                   <SideMenu isOpen={displaySideMenu} onLinkClick={this.toggleSideMenu} />

diff --git a/src/app/_app.scss b/src/app/_app.scss
@@ -14,6 +14,21 @@
     }
   }
 
+  &__usergroup-list {
+    position: absolute;
+    top: rem-calc(60px);
+    right: 0;
+    z-index: 1060;
+    background-color: white;
+    padding: rem-calc(8px) rem-calc(16px);
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.06);
+
+    .usergroup-list-item {
+      line-height: 1;
+      margin: rem-calc(8px) 0;
+    }
+  }
+
   &__content {
     flex: 1;
     display: flex;

diff --git a/src/components/topNavigation/TopNavigation.tsx b/src/components/topNavigation/TopNavigation.tsx
@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import classNames from "classnames";
 import { withRouter } from "react-router";
 import { Link } from "react-router-dom";
+import { IconMenuDots } from "hds-react";
 import { ActionTypes, AppConsumer } from "app/AppContext";
 import MainMenuIcon from "../icons/MainMenuIcon";
 import SearchInput from "../inputs/SearchInput";
@@ -11,7 +12,9 @@ import { ButtonColors } from "components/enums";
 import { hasAnyPageDirtyForms } from "util/forms";
 import { getSearchQuery, getUrlParams } from "util/helpers";
 import { getRouteById, Routes } from "root/routes";
+
 import type { UserGroups, UserServiceUnit, UserServiceUnits } from "usersPermissions/types";
+
 type Props = {
   history: Record<string, any>;
   isMenuOpen: boolean;
@@ -21,7 +24,7 @@ type Props = {
   pageTitle: string;
   showSearch: boolean;
   toggleSideMenu: (...args: Array<any>) => any;
-  userGroups: UserGroups;
+  toggleDisplayUserGroups: () => void,
   userActiveServiceUnit: UserServiceUnit;
   userServiceUnits: UserServiceUnits;
   username: string;
@@ -93,10 +96,10 @@ class TopNavigation extends Component<Props, State> {
       pageTitle,
       showSearch,
       toggleSideMenu,
-      userGroups,
+      toggleDisplayUserGroups,
       userActiveServiceUnit,
       userServiceUnits,
-      username
+      username,
     } = this.props;
     const {
       search
@@ -203,8 +206,7 @@ class TopNavigation extends Component<Props, State> {
 
                 <div className="username-wrapper">
                   <p className="username">
-                    {username}{!!userGroups && !!userGroups.length && ` (${userGroups.join(', ')})`}
-                  </p>
+                    {username} <button className={"user-group-button"} onClick={toggleDisplayUserGroups}><IconMenuDots color="white" size="xs" /></button>                  </p>
                   <button className='logout-link' onClick={handleLogout}>Kirjaudu ulos</button>
                 </div>
               </div>

diff --git a/src/components/topNavigation/_top-navigation.scss b/src/components/topNavigation/_top-navigation.scss
@@ -73,52 +73,38 @@
 
   &__right-wrapper {
     display: flex;
-    align-items: center;
-
-    .user-icon-wrapper {
-      position: relative;
-      line-height: 1;
-
-      .userIcon {
-        margin: 0;
-        width: 30px;
-        height: 30px;
-      }
-
-      .badge {
-        position: absolute;
-        font-family: $font-family-source;
-        font-size: rem-calc(12px);
-        min-width: rem-calc(20px);
-        padding: rem-calc(4px);
-        color: $white;
-        font-weight: 600;
-        text-align: center;
-        border-radius: 50%;
-        background-color: $red;
-        top: rem-calc(-3px);
-        right: rem-calc(-10px);
-      }
-    }
-
+
     .username-wrapper {
       line-height: 1;
       margin-left: 20px;
       text-align: right;
 
       .username {
-        line-height: 1;
-        margin: 0;
+        display: flex;
+        justify-content: flex-end;
         font-weight: 500;
         font-size: rem-calc(16px);
+        margin-bottom: 0;
+
+        .user-group-button {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: rem-calc(24px);
+          width: rem-calc(24px);
+          padding: rem-calc(2px);
+          border-radius: 50%;
+          margin-left: rem-calc(5px);
+          background-color: #0078c0;
+        }
       }
 
       .logout-link {
-        line-height: 1;
         color: $blue;
         font-weight: $semibold;
         font-size: rem-calc(16px);
         font-family: $font-family-helsinki-grotesk;
+        margin: 0;
         cursor: pointer;
 
         &:hover {
@@ -179,4 +165,6 @@
       font-weight: 500;
     }
   }
+
+
 }