-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Phani | A - 1206804799445947 | Update IPD & CareViewDashboard Header …
…with the navigations links and profile actions (#165) * Phani : Remove patient dashboard link from Patient Header * Phani : Refactor redirection link to open in same tab * Phani : Add Navigation icons & links in Header * Phani : Add hover state for icons * Phani : Refactor CSS for User Actions, Change Password * Phani : Update tests & snapshots * Phani : Refactor based on feedbacks * Phani : Update tests * Phani : Update CSS for home dashboard icon in CareViewDashboard
- Loading branch information
1 parent
bb044fe
commit 36cec0e
Showing
21 changed files
with
397 additions
and
174 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import React, { useEffect, useState } from "react"; | ||
| import { | ||
| Logout24, | ||
| UserAvatar24, | ||
| ChevronUp16, | ||
| ChevronDown16, | ||
| IbmCloudHyperProtectCryptoServices24, | ||
| } from "@carbon/icons-react"; | ||
| import "./ProviderActions.scss"; | ||
| import { FormattedMessage } from "react-intl"; | ||
| import { getCookies } from "../../utils/CommonUtils"; | ||
| import PropTypes from "prop-types"; | ||
|
|
||
| export const ProviderActions = (props) => { | ||
| const { onLogOut } = props; | ||
| const [isDropdownOpen, setIsDropdownOpen] = useState(false); | ||
| const cookies = getCookies(); | ||
| const username = cookies["bahmni.user"]?.replace(/^"(.*)"$/, "$1"); | ||
| const handleChangePassword = () => { | ||
| window.location = "/bahmni/home/#/changePassword"; | ||
| }; | ||
| const handleMenu = () => { | ||
| setIsDropdownOpen(!isDropdownOpen); | ||
| }; | ||
| useEffect(() => { | ||
| const handleOutsideClick = (event) => { | ||
| if (!event.target.closest(".provider-actions")) { | ||
| setIsDropdownOpen(false); | ||
| } | ||
| }; | ||
| window.addEventListener("click", handleOutsideClick); | ||
|
|
||
| return () => { | ||
| window.removeEventListener("click", handleOutsideClick); | ||
| }; | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div className={"provider-actions"}> | ||
| <div> | ||
| <div | ||
| className={`provider-menu ${isDropdownOpen && "menu-selected"}`} | ||
| onClick={handleMenu} | ||
| > | ||
| <UserAvatar24 className={"user-avatar"} /> | ||
| <div className={"username"}>{username}</div> | ||
| {isDropdownOpen ? <ChevronUp16 /> : <ChevronDown16 />} | ||
| </div> | ||
| {isDropdownOpen && ( | ||
| <div className={"dropdown"}> | ||
| <div onClick={handleChangePassword}> | ||
| <IbmCloudHyperProtectCryptoServices24 /> | ||
| <FormattedMessage | ||
| id={"CHANGE_PASSWORD"} | ||
| defaultMessage={"Change Password"} | ||
| /> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| <span onClick={onLogOut} className={"logout"}> | ||
| <Logout24 /> | ||
| </span> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| ProviderActions.propTypes = { | ||
| onLogOut: PropTypes.func.isRequired, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| .provider-actions { | ||
| display: flex; | ||
| align-items: center; | ||
| height: 3rem; | ||
| .options { | ||
| cursor: pointer; | ||
| padding: 0 8px; | ||
| height: 3rem; | ||
| display: flex; | ||
| align-items: center; | ||
| &:hover, | ||
| &:focus { | ||
| outline: none; | ||
| background-color: #004144; | ||
| } | ||
| } | ||
| .menu-selected { | ||
| background-color: #004144; | ||
| } | ||
| .provider-menu { | ||
| @extend .options; | ||
| } | ||
| .logout { | ||
| width: 50px; | ||
| justify-content: center; | ||
| box-sizing: border-box; | ||
| @extend .options; | ||
| } | ||
| .user-avatar { | ||
| margin-right: 8px; | ||
| } | ||
| .username { | ||
| max-width: 100px; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| margin-right: 8px; | ||
| } | ||
| .dropdown { | ||
| position: absolute; | ||
| top: 3rem; | ||
| right: 3rem; | ||
| background-color: #004144; | ||
| cursor: pointer; | ||
| > * { | ||
| height: 3rem; | ||
| padding: 12px; | ||
| box-sizing: border-box; | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 8px; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.