Fix: #83 Show error message for update dda status & Headertext of mod…

…al should not show to next line if its overflowing instead show ...
decentralised-dataexchange · Apr 6, 2024 · 725293d · 725293d
1 parent 2fb66e7
commit 725293d
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 26 deletions.
diff --git a/src/container/DDAgreements/ViewDDAgreementModal.tsx b/src/container/DDAgreements/ViewDDAgreementModal.tsx
@@ -36,8 +36,8 @@ export default function ViewDataAgreementModal(props: Props) {
         <Box className="dd-modal-container">
           <form>
             <Box className="dd-modal-header">
-              <Box pl={2}>
-                <Typography color="#F3F3F6">
+              <Box pl={2} style={{ width: "90%" }}>
+                <Typography className="dd-modal-header-text ">
                   View Data Disclosure Agreement: {selectedData?.purpose}
                 </Typography>
                 {mode !== "Create" && (

diff --git a/src/container/DDAgreements/dataPolicyCardModal.tsx b/src/container/DDAgreements/dataPolicyCardModal.tsx
@@ -70,14 +70,7 @@ export default function DataAgreementPolicyCardModal(props: Props) {
       name: "Agreement Period",
       value:selectedData.agreementPeriod,
     },
-    {
-      name: "Blink",
-      value: "",
-    },
-    {
-      name: "did:mydata",
-      value: "",
-    },
+
   ];
 
   return (

diff --git a/src/container/DDAgreements/ddaTable.tsx → src/container/DDAgreements/ddaTable.jsx b/src/container/DDAgreements/ddaTable.tsx → src/container/DDAgreements/ddaTable.jsx
@@ -26,7 +26,6 @@ const StyledTableCell = styled(TableCell)({
   fontWeight: "lighter !important",
   fontSize: "14px !important",
   border: "1px solid #D7D6D6",
-  textTransform: "capitalize",
 });
 
 const StyledTableRow = styled(TableRow)({
@@ -46,6 +45,20 @@ const DDAtable = ({
 }) => {
   const { t } = useTranslation("translation");
 
+  const getStatus = (status) => {
+    if (status === "unlisted") {
+      return "Unlisted";
+    } else if (status === "awaitingForApproval") {
+      return "In Review";
+    } else if (status === "approved") {
+      return "Approved";
+    } else if (status === "rejected") {
+      return "Rejected";
+    } else if (status === "listed") {
+      return "Listed";
+    }
+  };
+
   return (
     <RootTableContainer>
       <Table aria-label="simple table">
@@ -61,12 +74,12 @@ const DDAtable = ({
         <TableBody>
           {tabledata?.dataDisclosureAgreements?.length > 0 ? (
             tabledata.dataDisclosureAgreements.map((row, index) => (
-              <StyledTableRow key={index}>
+              <StyledTableRow key={row.templateId}>
                 <StyledTableCell>{row.purpose}</StyledTableCell>
                 <StyledTableCell>
                   <VersionDropdown record={row} />
                 </StyledTableCell>
-                <StyledTableCell>{row.status}</StyledTableCell>
+                <StyledTableCell>{getStatus(row.status)}</StyledTableCell>
                 <StyledTableCell>{row.lawfulBasis}</StyledTableCell>
                 <StyledTableCell
                   style={{

diff --git a/src/container/DDAgreements/generalModal.tsx b/src/container/DDAgreements/generalModal.tsx
@@ -60,8 +60,8 @@ export default function GeneralModal(props: Props) {
       <Drawer anchor="right" open={open}>
         <Box className="dd-modal-container">
           <Box className="dd-modal-header">
-            <Box pl={2}>
-              <Typography color="#F3F3F6">
+            <Box pl={2} style={{ width: "90%" }}>
+              <Typography className="dd-modal-header-text ">
                 {headerText}: {selectedData?.purpose}
               </Typography>
               <Typography color="#F3F3F6">
@@ -93,7 +93,7 @@ export default function GeneralModal(props: Props) {
                 value={confirmationTextInput}
                 onChange={handleCancelConfirmationText}
                 size="small"
-                sx={{marginTop:"5px"}}
+                sx={{ marginTop: "5px" }}
               />
             </Box>
           </Box>

diff --git a/src/container/DDAgreements/listDDAModal.tsx b/src/container/DDAgreements/listDDAModal.tsx
@@ -13,6 +13,7 @@ import {
 import CloseIcon from "@mui/icons-material/Close";
 import { useTranslation } from "react-i18next";
 import { HttpService } from "../../service/HttpService";
+import SnackbarComponent from "../../component/notification";
 
 interface Props {
   open: boolean;
@@ -37,8 +38,10 @@ export default function ListDDAModal(props: Props) {
     confirmButtonText,
   } = props;
   const [isOk, setIsOk] = useState(false);
-  const [status, setStatus] = useState(""); 
+  const [status, setStatus] = useState("");
   const { t } = useTranslation("translation");
+  const [openSnackBar, setOpenSnackBar] = useState(false);
+  const [error, setError] = useState("");
 
   useEffect(() => {
     if (selectedData && selectedData.status) {
@@ -59,14 +62,18 @@ export default function ListDDAModal(props: Props) {
         status: status,
       };
 
-      HttpService.updateDDAStatus(selectedData?.templateId, payload).then(
-        () => {
+      HttpService.updateDDAStatus(selectedData?.templateId, payload)
+        .then(() => {
           setOpen(false);
           setIsOk(false);
           setStatus("");
           setRefetchTable(!refetchTable);
-        }
-      );
+        })
+        .catch((error) => {
+          console.log("error", error.response.data.error);
+          setError(error.response.data.error);
+          setOpenSnackBar(true);
+        });
     }
   };
 
@@ -75,8 +82,14 @@ export default function ListDDAModal(props: Props) {
       <Drawer anchor="right" open={open}>
         <Box className="dd-modal-container">
           <Box className="dd-modal-header">
-            <Box pl={2}>
-              <Typography color="#F3F3F6">
+            <SnackbarComponent
+              open={openSnackBar}
+              setOpen={setOpenSnackBar}
+              message={error}
+              topStyle={100}
+            />
+            <Box pl={2} style={{ width: "90%" }}>
+              <Typography className="dd-modal-header-text ">
                 {headerText}: {selectedData?.purpose}
               </Typography>
               <Typography color="#F3F3F6">
@@ -112,12 +125,17 @@ export default function ListDDAModal(props: Props) {
                 variant="outlined"
                 sx={{ marginTop: "5px" }}
                 size="small"
+                defaultValue=""
               >
                 <MenuItem value="unlisted">Unlisted</MenuItem>
-                <MenuItem value="awaitingForApproval">
-                  Awaiting for Approval
-                </MenuItem>
+                <MenuItem value="awaitingForApproval">In Review</MenuItem>
                 <MenuItem value="listed">Listed</MenuItem>
+                <MenuItem value="approved" disabled>
+                  Approved
+                </MenuItem>
+                <MenuItem value="rejected" disabled>
+                  Rejected
+                </MenuItem>
               </Select>
             </Box>
           </Box>

diff --git a/src/container/DDAgreements/style.scss b/src/container/DDAgreements/style.scss
@@ -112,3 +112,10 @@
     border-radius: 0 !important;
     border: 1px solid #EAEAEA !important;
 }
+
+.dd-modal-header-text {
+    color: #F3F3F6;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis
+}