Skip to content

Commit

Permalink
Fix: Update styles for data source read public page; connection view …
Browse files Browse the repository at this point in the history 
…DDA modal

Signed-off-by: George J Padayatti <[email protected]>
  • Loading branch information
@georgepadayatti
georgepadayatti committed Apr 7, 2024
1 parent 7a51f74 commit 28a890e
Show file tree
Hide file tree
Showing 10 changed files with 370 additions and 237 deletions.
4 changes: 2 additions & 2 deletions src/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
121 changes: 12 additions & 109 deletions src/container/DDAgreements/ViewDDAgreementModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -31,107 +25,16 @@ export default function ViewDataAgreementModal(props: Props) {
);

return (
<>
<Drawer anchor="right" open={open}>
<Box className="dd-modal-container">
<form>
<Box className="dd-modal-header">
<Box pl={2} style={{ width: "90%" }}>
<Typography className="dd-modal-header-text ">
View Data Disclosure Agreement: {selectedData?.purpose}
</Typography>
{mode !== "Create" && (
<Typography color="#F3F3F6">
{selectedData?.templateId}
</Typography>
)}
</Box>
<CloseIcon
onClick={() => setOpen(false)}
sx={{
paddingRight: 2,
cursor: "pointer",
color: "#F3F3F6",
}}
/>
</Box>
<Box className="dd-modal-banner-container">
<Box
style={{ height: "150px", width: "100%" }}
component="img"
alt="Banner"
src={defaultCoverImage}
/>
</Box>
<Box sx={{ marginBottom: "60px" }}>
<Avatar
src={defaultLogoImg}
style={{
position: "absolute",
marginLeft: 50,
marginTop: "-65px",
width: "110px",
height: "110px",
border: "solid white 6px",
}}
/>
</Box>

<Box className="dd-modal-details" style={{ paddingBottom: "80px" }}>
<Box p={1.5}>
<Typography variant="h6" fontWeight="bold">
{gettingStartData?.name}
</Typography>
<Typography color="#9F9F9F">
{gettingStartData?.location}
</Typography>
<Typography variant="subtitle1" mt={3}>
{t("common.overView")}
</Typography>
<Typography
variant="subtitle2"
color="#9F9F9F"
mt={1}
sx={{ wordWrap: "breakWord" }}
>
{gettingStartData?.description}
</Typography>

<Typography color="grey" mt={3} variant="subtitle1">
{selectedData?.purpose.toUpperCase()}
</Typography>

<DataAttributeCardForDDA selectedData={selectedData} />

<DDAPolicyCard
selectedData={selectedData}
handleCloseViewDDAModal={setOpen}
/>
</Box>

<Box className="modal-footer ">
<Button
onClick={() => {
setOpen(false);
}}
className="delete-btn"
sx={{
marginRight: "15px",
color: "black",
"&:hover": {
backgroundColor: "black",
color: "white",
},
}}
variant="outlined"
>
{t("common.close")}
</Button>
</Box>
</Box>
</form>
</Box>
</Drawer>
</>
<ViewDataAgreementModalInner
open={open}
setOpen={setOpen}
mode={mode}
selectedData={selectedData}
dataSourceName={gettingStartData?.name}
dataSourceLocation={gettingStartData?.location}
dataSourceDescription={gettingStartData?.description}
logoImage={gettingStartData?.logoUrl}
coverImage={gettingStartData?.coverImageUrl}
/>
);
}
149 changes: 149 additions & 0 deletions src/container/DDAgreements/ViewDDAgreementModalInner.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<SetStateAction<boolean>>;
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 (
<>
<Drawer anchor="right" open={open}>
<Box className="dd-modal-container">
<form>
<Box className="dd-modal-header">
<Box pl={2} style={{ width: "90%" }}>
<Typography className="dd-modal-header-text ">
View Data Disclosure Agreement: {selectedData?.purpose}
</Typography>
{mode !== "Create" && (
<Typography color="#F3F3F6">
{selectedData?.templateId}
</Typography>
)}
</Box>
<CloseIcon
onClick={() => setOpen(false)}
sx={{
paddingRight: 2,
cursor: "pointer",
color: "#F3F3F6",
}}
/>
</Box>
<Box className="dd-modal-banner-container">
<Box
style={{ height: "150px", width: "100%" }}
component="img"
alt="Banner"
src={coverImage ? coverImage : defaultCoverImage}
/>
</Box>
<Box sx={{ marginBottom: "60px" }}>
<Avatar
src={logoImage ? logoImage : defaultLogoImg}
style={{
position: "absolute",
marginLeft: 50,
marginTop: "-65px",
width: "110px",
height: "110px",
border: "solid white 6px",
}}
/>
</Box>

<Box className="dd-modal-details" style={{ paddingBottom: "80px" }}>
<Box p={1.5}>
<Typography variant="h6" fontWeight="bold">
{dataSourceName}
</Typography>
<Typography color="#9F9F9F">
{dataSourceLocation}
</Typography>
<Typography variant="subtitle1" mt={3}>
{t("common.overView")}
</Typography>
<Typography
variant="subtitle2"
color="#9F9F9F"
mt={1}
sx={{ wordWrap: "breakWord" }}
>
{dataSourceDescription}
</Typography>

<Typography color="grey" mt={3} variant="subtitle1">
{selectedData?.purpose.toUpperCase()}
</Typography>

<DataAttributeCardForDDA selectedData={selectedData} />

<DDAPolicyCard
selectedData={selectedData}
handleCloseViewDDAModal={setOpen}
/>
</Box>

<Box className="modal-footer ">
<Button
onClick={() => {
navigator.clipboard.writeText(selectedData?.connection?.invitationUrl);
}}
className="copy-connection-btn"
sx={{
marginLeft: "15px",
marginRight: "auto",
color: "black",
"&:hover": {
backgroundColor: "black",
color: "white",
},
}}
variant="outlined"
>
{"Copy Connection URL"}
</Button>
<Button
onClick={() => {
setOpen(false);
}}
className="delete-btn"
sx={{
marginRight: "15px",
color: "black",
"&:hover": {
backgroundColor: "black",
color: "white",
},
}}
variant="outlined"
>
{t("common.close")}
</Button>
</Box>
</Box>
</form>
</Box>
</Drawer>
</>
);
}
7 changes: 7 additions & 0 deletions src/container/DDAgreements/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
53 changes: 49 additions & 4 deletions src/container/Home/DataSource.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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");
Expand All @@ -36,7 +81,7 @@ const DataSourceCard = ({ dataSource }: DataSourceCardProp) => {

const handleClick = (obj: DataSourceCardProp) => {
dispatch(dataSourceEachList(obj));
navigate('/data-source-list');
navigate('/data-source/read');
}

return (
Expand Down Expand Up @@ -70,7 +115,7 @@ const DataSourceCard = ({ dataSource }: DataSourceCardProp) => {
</Typography>

<Box className="actionBtn">
<Button size="small" sx={{fontSize: "14px"}} onClick={() => handleClick(dataSource)}>
<Button size="small" sx={{fontSize: "14px"}} onClick={() => handleClick({dataSource, dataDisclosureAgreements})}>
{t('home.btn-signData')}
</Button>
{/* <Button size="small" sx={{fontSize: "14px"}}>
Expand Down
Loading

0 comments on commit 28a890e

Please sign in to comment.