import { ProfileMenu } from '@client/components/ProfileMenu' ; import { SCREEN_LOCK } from '@client/components/ProtectedPage' ; import { buttonMessages , constantsMessages , userMessages } from '@client/i18n/messages' ; import { messages } from '@client/i18n/messages/views/header' ; import { goToConfig , goToEvents as goToEventsAction , goToHome , goToOperationalReport , goToPerformanceHome , goToPerformanceReportList , goToSearch , goToSearchResult , goToSettings , goToTeamSearch , goToTeamUserList } from '@client/navigation' ; import { redirectToAuthentication } from '@client/profile/profileActions' ; import { getUserDetails } from '@client/profile/profileSelectors' ; import { storage } from '@client/storage' ; import { IStoreState } from '@client/store' ; import { withTheme } from '@client/styledComponents' ; import { BRN_DRN_TEXT , FIELD_AGENT_ROLES , NAME_TEXT , NATL_ADMIN_ROLES , PHONE_TEXT , SYS_ADMIN_ROLES , TRACKING_ID_TEXT } from '@client/utils/constants' ; import { getIndividualNameObj , IUserDetails } from '@client/utils/userUtils' ; import { PrimaryButton } from '@opencrvs/components/lib/buttons' ; import { ApplicationBlack , ApplicationBlue , ArrowBack , BRN , Hamburger , HelpBlack , HelpBlue , Location , LogoutBlack , LogoutBlue , Phone , Plus , SearchDark , SettingsBlack , SettingsBlue , StatsBlack , StatsBlue , SystemBlack , SystemBlue , TrackingID , User , Users } from '@opencrvs/components/lib/icons' ; import { AppHeader , ExpandingMenu , ISearchType , SearchTool } from '@opencrvs/components/lib/interface' ; import { ITheme } from '@opencrvs/components/lib/theme' ; import * as React from 'react' ; import { injectIntl , WrappedComponentProps as IntlShapeProps } from 'react-intl' ; import { connect } from 'react-redux' ; import styled from 'styled-components' ; import { getJurisdictionLocationIdFromUserDetails } from '@client/views/SysAdmin/Performance/utils' ; type IProps = IntlShapeProps & { theme : ITheme ; userDetails : IUserDetails | null ; redirectToAuthentication : typeof redirectToAuthentication ; language : string ; goToSearchResult : typeof goToSearchResult ; goToEvents : typeof goToEventsAction ; goToSearch : typeof goToSearch ; goToSettings : typeof goToSettings ; goToHomeAction : typeof goToHome ; goToConfigAction : typeof goToConfig ; goToPerformanceHomeAction : typeof goToPerformanceHome ; goToPerformanceReportListAction : typeof goToPerformanceReportList ; goToOperationalReportAction : typeof goToOperationalReport ; goToTeamSearchAction : typeof goToTeamSearch ; goToTeamUserListAction : typeof goToTeamUserList ; activeMenuItem : ACTIVE_MENU_ITEM ; title ? : string ; searchText ? : string ; selectedSearchType ? : string ; mobileSearchBar ? : boolean ; enableMenuSelection ? : boolean ; mapPinClickHandler ? : ( ) => void ; } ; interface IState { showMenu : boolean ; showLogoutModal : boolean ; } enum ACTIVE_MENU_ITEM { APPLICATIONS , CONFIG , PERFORMANCE , TEAM , USERS } const StyledPrimaryButton = styled ( PrimaryButton ) `
  ${ ( { theme } ) => theme . shadows . mistyShadow };
  width: 42px;
  height: 42px;
  @media (max-width: ${ ( { theme } ) => theme . grid . breakpoints . lg }px) {
    display: none;
  }
` ; class HeaderComp extends React . Component < IProps , IState > { constructor ( props ) { super ( props ) ; this . state = { showMenu : false , showLogoutModal : false } ; } hamburger = ( ) => { const { userDetails , language , intl } = this . props ; let name = '' ; if ( userDetails && userDetails . name ) { const nameObj = getIndividualNameObj ( userDetails . name , language ) ; name = nameObj ? `${ String ( nameObj . firstNames ) } ${ String ( nameObj . familyName ) }` : '' ; } const role = userDetails && userDetails . role ? intl . formatMessage ( userMessages [ userDetails . role ] ) : '' ; let menuItems = [ ] ; if ( userDetails && userDetails . role ) { if ( ! SYS_ADMIN_ROLES . includes ( userDetails . role ) && ! NATL_ADMIN_ROLES . includes ( userDetails . role ) ) { menuItems = menuItems . concat ( [ { icon : < ApplicationBlack />, iconHover : < ApplicationBlue />, label : this . props . intl . formatMessage ( constantsMessages . applicationTitle ) , onClick : this . props . goToHomeAction } ] ) ; } if ( ! FIELD_AGENT_ROLES . includes ( userDetails . role ) ) { menuItems = menuItems . concat ( [ { icon : < StatsBlack />, iconHover : < StatsBlue />, label : this . props . intl . formatMessage ( constantsMessages . performanceTitle ) , onClick : ( ) => this . goToPerformanceView ( this . props ) } , { icon : < Users />, iconHover : < Users stroke = { this . props . theme . colors . secondary } / > , label : this . props . intl . formatMessage ( messages . teamTitle ) , onClick : ( ) => this . goToTeamView ( this . props ) } ] ) ; } if ( NATL_ADMIN_ROLES . includes ( userDetails . role ) ) { menuItems = menuItems . concat ( [ { icon : < SystemBlack />, iconHover : < SystemBlue />, onClick : this . props . goToConfigAction } ] ) ; } } menuItems = menuItems . concat ( [ { icon : < SettingsBlack />, iconHover : < SettingsBlue />, label : this . props . intl . formatMessage ( messages . settingsTitle ) , onClick : this . props . goToSettings } , { icon : < HelpBlack />, iconHover : < HelpBlue />, label : this . props . intl . formatMessage ( messages . helpTitle ) , onClick : ( ) => alert ( 'Help!' ) } , { icon : < LogoutBlack />, iconHover : < LogoutBlue />, label : this . props . intl . formatMessage ( buttonMessages . logout ) , secondary : true , onClick : this . logout } ] ) ; const userInfo = { name , role } ; return ( < > < Hamburger /> < ExpandingMenu menuItems = { menuItems } userDetails = { userInfo } showMenu = { this . state . showMenu } menuCollapse = { ( ) => false } /> < />); } ; getMobileHeaderActionProps ( activeMenuItem ) { if ( activeMenuItem === ACTIVE_MENU_ITEM . PERFORMANCE || activeMenuItem === ACTIVE_MENU_ITEM . TEAM ) { return { mobileLeft : { icon : ( ) => this . hamburger ( ) , handler : this . toggleMenu } } ; } else if ( activeMenuItem === ACTIVE_MENU_ITEM . USERS ) { if ( this . props . mapPinClickHandler ) { return { mobileLeft : { icon : ( ) => this . hamburger ( ) , handler : this . toggleMenu } , mobileRight : { icon : ( ) => < Location inverse / > , handler : ( ) => this . props . mapPinClickHandler && this . props . mapPinClickHandler ( ) } } ; } else { return { mobileLeft : { icon : ( ) => this . hamburger ( ) , handler : this . toggleMenu } } ; } } else { if ( this . props . mobileSearchBar ) { return { mobileLeft : { icon : ( ) => < ArrowBack />, handler : ( ) => window . history . back ( ) } , mobileBody : this . renderSearchInput ( this . props , true ) } ; } else { return { mobileLeft : { icon : ( ) => this . hamburger ( ) , handler : this . toggleMenu } , mobileRight : { icon : ( ) => < SearchDark />, handler : ( ) => this . props . goToSearch ( ) } } ; } } } logout = ( ) => { storage . removeItem ( SCREEN_LOCK ) ; this . props . redirectToAuthentication ( ) ; } ; toggleMenu = ( ) => { this . setState ( ( prevState ) => ( { showMenu : ! prevState . showMenu } ) ) ; } ; renderSearchInput ( props , isMobile ? ) { const { intl , searchText , selectedSearchType , language } = props ; const searchTypeList = [ { label : intl . formatMessage ( constantsMessages . trackingId ) , value : TRACKING_ID_TEXT , icon : < TrackingID />, invertIcon : < TrackingID color = "invert" />, placeHolderText : intl . formatMessage ( messages . placeHolderTrackingId ) , isDefault : true } , { label : intl . formatMessage ( messages . typeBrnDrn ) , value : BRN_DRN_TEXT , icon : < BRN />, invertIcon : < BRN color = "invert" />, placeHolderText : intl . formatMessage ( messages . placeHolderBrnDrn ) } , { label : intl . formatMessage ( messages . typePhone ) , value : PHONE_TEXT , icon : < Phone />, invertIcon : < Phone color = "invert" />, placeHolderText : intl . formatMessage ( messages . placeHolderPhone ) } , { label : intl . formatMessage ( messages . typeName ) , value : NAME_TEXT , icon : < User />, invertIcon : < User color = "invert" />, placeHolderText : intl . formatMessage ( messages . placeholderName ) } ] ; return ( < SearchTool key = "searchMenu" language = { language } searchText = { searchText } selectedSearchType = { selectedSearchType } searchTypeList = { searchTypeList } searchHandler = { ( text , type ) => props . goToSearchResult ( text , type , isMobile ) } />); } goToTeamView ( props ) { const { userDetails , goToTeamUserListAction , goToTeamSearchAction } = props ; if ( userDetails && userDetails . role ) { if ( NATL_ADMIN_ROLES . includes ( userDetails . role ) ) { return goToTeamSearchAction ( ) ; } else { return goToTeamUserListAction ( { id : ( userDetails . primaryOffice && userDetails . primaryOffice . id ) || '' , searchableText : ( userDetails . primaryOffice && userDetails . primaryOffice . name ) || '' , displayLabel : ( userDetails . primaryOffice && userDetails . primaryOffice . name ) || '' } , true ) ; } } } goToPerformanceView ( props ) { const { userDetails , goToPerformanceHomeAction , goToOperationalReportAction } = props ; if ( userDetails && userDetails . role ) { if ( NATL_ADMIN_ROLES . includes ( userDetails . role ) ) { return goToPerformanceHomeAction ( ) ; } else { const locationId = getJurisdictionLocationIdFromUserDetails ( userDetails ) ; return ( ( locationId && goToOperationalReportAction ( locationId ) ) || goToPerformanceHomeAction ( ) ) ; } } } render ( ) { const { intl , userDetails , enableMenuSelection = true , goToHomeAction , goToConfigAction , activeMenuItem } = this . props ; const title = this . props . title || intl . formatMessage ( activeMenuItem === ACTIVE_MENU_ITEM . PERFORMANCE ? constantsMessages . performanceTitle : activeMenuItem === ACTIVE_MENU_ITEM . TEAM || activeMenuItem === ACTIVE_MENU_ITEM . USERS ? messages . teamTitle : activeMenuItem === ACTIVE_MENU_ITEM . CONFIG ? constantsMessages . configTitle : constantsMessages . applicationTitle ) ; let menuItems = [ ] ; if ( userDetails && userDetails . role ) { if ( ! SYS_ADMIN_ROLES . includes ( userDetails . role ) && ! NATL_ADMIN_ROLES . includes ( userDetails . role ) ) { menuItems = menuItems . concat ( [ { key : 'application' , title : intl . formatMessage ( constantsMessages . applicationTitle ) , onClick : goToHomeAction , selected : enableMenuSelection && activeMenuItem === ACTIVE_MENU_ITEM . APPLICATIONS } ] ) ; } if ( ! FIELD_AGENT_ROLES . includes ( userDetails . role ) ) { menuItems = menuItems . concat ( [ { key : 'performance' , title : intl . formatMessage ( constantsMessages . performanceTitle ) , onClick : ( ) => this . goToPerformanceView ( this . props ) , selected : enableMenuSelection && activeMenuItem === ACTIVE_MENU_ITEM . PERFORMANCE } , { key : 'team' , title : intl . formatMessage ( messages . teamTitle ) , onClick : ( ) => this . goToTeamView ( this . props ) , selected : enableMenuSelection && activeMenuItem === ACTIVE_MENU_ITEM . TEAM } ] ) ; } if ( NATL_ADMIN_ROLES . includes ( userDetails . role ) ) { menuItems = menuItems . concat ( [ { key : 'config' , title : intl . formatMessage ( constantsMessages . configTitle ) , onClick : goToConfigAction , selected : enableMenuSelection && activeMenuItem === ACTIVE_MENU_ITEM . CONFIG } ] ) ; } } let rightMenu = [ { element : ( < StyledPrimaryButton key = "newEvent" id = "header_new_event" onClick = { this . props . goToEvents } icon = { ( ) => < Plus />}/ > ) } , { element : this . renderSearchInput ( this . props ) } , { element : < ProfileMenu key = "profileMenu" / > } ] ; if ( activeMenuItem !== ACTIVE_MENU_ITEM . APPLICATIONS ) { rightMenu = [ { element : < ProfileMenu key = "profileMenu" /> } ] ; } const mobileHeaderActionProps = this . getMobileHeaderActionProps ( activeMenuItem ) ; return ( < > < AppHeader menuItems = { menuItems } id = "register_app_header" desktopRightMenu = { rightMenu } title = { title } { ... mobileHeaderActionProps } /> < />); } } export const Header = connect ( ( store ) => ( { activeMenuItem : window . location . href . includes ( 'performance' ) ? ACTIVE_MENU_ITEM . PERFORMANCE : window . location . href . includes ( 'team' ) ? ACTIVE_MENU_ITEM . TEAM : window . location . href . includes ( 'config' ) ? ACTIVE_MENU_ITEM . CONFIG : ACTIVE_MENU_ITEM . APPLICATIONS , language : store . i18n . language , userDetails : getUserDetails ( store ) } ) , { redirectToAuthentication , goToSearchResult , goToSearch , goToSettings , goToEvents : goToEventsAction , goToHomeAction : goToHome , goToConfigAction : goToConfig , goToPerformanceHomeAction : goToPerformanceHome , goToOperationalReportAction : goToOperationalReport , goToPerformanceReportListAction : goToPerformanceReportList , goToTeamSearchAction : goToTeamSearch , goToTeamUserListAction : goToTeamUserList } ) ( withTheme ( injectIntl < 'intl' , IProps > ( HeaderComp ) ) ) ;