diff --git a/src/app.tsx b/src/app.tsx index 329bc34..9c841a8 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -34,8 +34,8 @@ const App = () => { if(path === '/') { navigate('/'); return; - } else if (path === '/data-source-list') { - navigate('/data-source-list'); + } else if (path === '/data-source/read') { + navigate('/data-source/read'); } else { navigate('/login'); return; diff --git a/src/container/DDAgreements/ViewDDAgreementModal.tsx b/src/container/DDAgreements/ViewDDAgreementModal.tsx index d12582c..f3fb566 100644 --- a/src/container/DDAgreements/ViewDDAgreementModal.tsx +++ b/src/container/DDAgreements/ViewDDAgreementModal.tsx @@ -1,14 +1,8 @@ import React, { Dispatch, SetStateAction, useEffect } from "react"; - -import { Drawer, Typography, Box, Avatar, Button } from "@mui/material"; -import CloseIcon from "@mui/icons-material/Close"; - import { useTranslation } from "react-i18next"; -import { defaultCoverImage, defaultLogoImg } from "../../utils/defalultImages"; -import { DataAttributeCardForDDA } from "./dataAttributeCardForDDA"; -import { DDAPolicyCard } from "./dataPolicyCard"; import { useAppDispatch, useAppSelector } from "../../customHooks"; import { gettingStartAction } from "../../redux/actionCreators/gettingStart"; +import ViewDataAgreementModalInner from "./ViewDDAgreementModalInner"; interface Props { open: boolean; @@ -31,107 +25,16 @@ export default function ViewDataAgreementModal(props: Props) { ); return ( - <> - - -
- - - - View Data Disclosure Agreement: {selectedData?.purpose} - - {mode !== "Create" && ( - - {selectedData?.templateId} - - )} - - setOpen(false)} - sx={{ - paddingRight: 2, - cursor: "pointer", - color: "#F3F3F6", - }} - /> - - - - - - - - - - - - {gettingStartData?.name} - - - {gettingStartData?.location} - - - {t("common.overView")} - - - {gettingStartData?.description} - - - - {selectedData?.purpose.toUpperCase()} - - - - - - - - - - - - -
- - + ); } diff --git a/src/container/DDAgreements/ViewDDAgreementModalInner.tsx b/src/container/DDAgreements/ViewDDAgreementModalInner.tsx new file mode 100644 index 0000000..573d395 --- /dev/null +++ b/src/container/DDAgreements/ViewDDAgreementModalInner.tsx @@ -0,0 +1,149 @@ +import React, { Dispatch, SetStateAction } from "react"; + +import { Drawer, Typography, Box, Avatar, Button } from "@mui/material"; +import CloseIcon from "@mui/icons-material/Close"; + +import { useTranslation } from "react-i18next"; +import { defaultCoverImage, defaultLogoImg } from "../../utils/defalultImages"; +import { DataAttributeCardForDDA } from "./dataAttributeCardForDDA"; +import { DDAPolicyCard } from "./dataPolicyCard"; + +interface Props { + open: boolean; + setOpen: Dispatch>; + mode: string; + selectedData: any; + dataSourceName: any; + dataSourceLocation: any; + dataSourceDescription: any; + coverImage: any; + logoImage: any; +} + +export default function ViewDataAgreementModalInner(props: Props) { + const { open, setOpen, mode, selectedData, dataSourceName, dataSourceLocation, dataSourceDescription, coverImage, logoImage } = props; + const { t } = useTranslation("translation"); + + return ( + <> + + +
+ + + + View Data Disclosure Agreement: {selectedData?.purpose} + + {mode !== "Create" && ( + + {selectedData?.templateId} + + )} + + setOpen(false)} + sx={{ + paddingRight: 2, + cursor: "pointer", + color: "#F3F3F6", + }} + /> + + + + + + + + + + + + {dataSourceName} + + + {dataSourceLocation} + + + {t("common.overView")} + + + {dataSourceDescription} + + + + {selectedData?.purpose.toUpperCase()} + + + + + + + + + + + + + +
+ + + ); +} diff --git a/src/container/DDAgreements/style.scss b/src/container/DDAgreements/style.scss index ad20962..418272f 100644 --- a/src/container/DDAgreements/style.scss +++ b/src/container/DDAgreements/style.scss @@ -106,6 +106,13 @@ border: 1px solid #DFDFDF !important; } +.copy-connection-btn { + height: 30px !important; + // width: 150px !important; + border-radius: 0 !important; + border: 1px solid #DFDFDF !important; +} + .disable-btn { height: 30px !important; width: 150px !important; diff --git a/src/container/Home/DataSource.tsx b/src/container/Home/DataSource.tsx index 421fada..9c77650 100644 --- a/src/container/Home/DataSource.tsx +++ b/src/container/Home/DataSource.tsx @@ -12,6 +12,50 @@ import { useTranslation } from "react-i18next"; import { dataSourceEachList } from '../../redux/actionCreators/dataSource' import { useAppDispatch, useAppSelector } from "../../customHooks"; +interface DataDisclosureAgreement { + purpose: string + version: string + language: string + connection: Connection + templateId: string + lawfulBasis: string + personalData: PersonalDaum[] + codeOfConduct: string + dataController: DataController + agreementPeriod: number + purposeDescription: string + dataSharingRestrictions: DataSharingRestrictions + status: string + isLatestVersion: boolean +} + +interface Connection { + invitationUrl: string +} + +interface PersonalDaum { + attributeId: string + attributeName: string + attributeDescription: string +} + +interface DataController { + did: string + url: string + name: string + legalId: string + industrySector: string +} + +interface DataSharingRestrictions { + policyUrl: string + jurisdiction: string + industrySector: string + storageLocation: string + dataRetentionPeriod: number + geographicRestriction: string +} + interface DataSourceCardProp { dataSource: { description: string, @@ -22,10 +66,11 @@ interface DataSourceCardProp { sector: string, location: string, policyUrl: string, - } + }, + dataDisclosureAgreements: DataDisclosureAgreement[] } -const DataSourceCard = ({ dataSource }: DataSourceCardProp) => { +const DataSourceCard = ({ dataSource, dataDisclosureAgreements }: DataSourceCardProp) => { const navigate = useNavigate(); const dispatch = useAppDispatch(); const { t } = useTranslation("translation"); @@ -36,7 +81,7 @@ const DataSourceCard = ({ dataSource }: DataSourceCardProp) => { const handleClick = (obj: DataSourceCardProp) => { dispatch(dataSourceEachList(obj)); - navigate('/data-source-list'); + navigate('/data-source/read'); } return ( @@ -70,7 +115,7 @@ const DataSourceCard = ({ dataSource }: DataSourceCardProp) => { - {/* - - - - - - - - Data Disclosure Agreement: Diabetes Patient Data Summary and Stastics - - - Data Disclosure Agreement Description - - - - - - - - - - - Data Disclosure Agreement: Diabetes Patient Data Summary and Stastics - - - Data Disclosure Agreement Description - - - - - - - - - - - Data Disclosure Agreement: Diabetes Patient Data Summary and Stastics - - - Data Disclosure Agreement Description - - - - - - - - - - - Data Disclosure Agreement: Diabetes Patient Data Summary and Stastics - - - Data Disclosure Agreement Description - - - - - - - + {dataSourceItems?.dataDisclosureAgreements?.map((dataDisclosureAgreement, index) => { + return ( + + + + {dataDisclosureAgreement?.purpose} + + + {dataDisclosureAgreement?.purposeDescription} + + + + + + + + ); + }) + } diff --git a/src/container/Home/index.tsx b/src/container/Home/index.tsx index 653ed53..e299321 100644 --- a/src/container/Home/index.tsx +++ b/src/container/Home/index.tsx @@ -44,8 +44,8 @@ const LandingPage = () => { } label={t('home.check-box-all')} labelPlacement='end' /> - } disabled label={t('home.check-box-org')} labelPlacement='end' /> - } disabled label={t('home.check-box-devices')} labelPlacement='end' /> + } disabled label={t('home.check-box-org')} labelPlacement='end' /> + } disabled label={t('home.check-box-devices')} labelPlacement='end' /> @@ -56,13 +56,14 @@ const LandingPage = () => { - {dataSourceItems?.map(( { dataSource }) => { + {dataSourceItems?.map((dataSourceItem, index) => { return ( - + ); diff --git a/src/container/Home/style.scss b/src/container/Home/style.scss index df35d83..562311b 100644 --- a/src/container/Home/style.scss +++ b/src/container/Home/style.scss @@ -88,8 +88,64 @@ .dataListContainer { padding: 20px; .leftSection { - background: rgb(230 230 230); - height: 80vh; + border: 1px solid rgb(223, 223, 223); + padding: 0px; + margin-bottom: 15px; + box-shadow: none; + + .logo { + width: 100px; + height: auto; + border-radius: 100%; + position: absolute; + top: 40px; + left: 10px; + border: 5px solid white; + } + + .card-header { + // height: 40px; + display: flex; + justify-content: flex-start; + height: 100px; + position: relative; + } + + + .MuiCardContent-root { + padding: 15px; + + .MuiTypography-root { + padding: 35px 0 0 0; + + .readmore { + color: #9c9c9c; + } + } + + .card-body { + overflow: hidden; + // height: 6em; + padding: 20px 0 0 0; + } + + .datasource-location { + padding-top: 0px; + } + + .datasource-overview-label { + padding-top: 0px; + } + + .datasource-overview-label { + padding-top: 10px; + } + + .datasource-overview { + padding-top: 10px; + } + + } } .policyUrl { padding: 10px 0; @@ -105,26 +161,27 @@ padding-top: 0 !important; } .cardContainerList { - border: 1px solid #000; + border: 1px solid rgb(223, 223, 223); padding: 20px; margin-bottom: 15px; - - .logo { - width: 50%; - height: auto; - margin-left: -8px; - } + box-shadow: none; .actionListingBtn { .MuiButtonBase-root { text-transform: unset; - border: 1.5px solid black; - background: rgb(230 230 230); + border: 1px solid rgb(223, 223, 223); + background: white; + border-radius: 0px; color: #000; - margin-top: 80px; + margin-top: 8px; margin-left: 20px; padding: 5px 30px; } + + .MuiButtonBase-root:hover { + background: black; + color: white; + } } .card-body { diff --git a/src/routes.tsx b/src/routes.tsx index 5fedf8c..1a8bf3a 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -26,7 +26,7 @@ const AppRouter = () => { } <> } /> - } /> + } /> } /> diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 5bbfdc7..95b957d 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -9,7 +9,7 @@ const getDevice = () => { }; const publicRoutes = (pathname: string) => { - return pathname == "/" || pathname == "/data-source-list" + return pathname == "/" || pathname == "/data-source/read" } const formatISODateToLocalString = (isoDateTime: string) => {