Fix: #60, Disp Connection API, logo and cover Image Updated

src/component/Modals/generalModal.tsx

@@ -0,0 +1,133 @@
+import * as React from "react";
+import { useState } from "react";
+import { Dispatch, SetStateAction } from "react";
+
+import { Drawer, Typography, Button, Box, TextField } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { useTranslation } from "react-i18next";
+import { HttpService } from "../../service/HttpService";
+
+interface Props {
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  confirmText: string;
+  headerText: string;
+  modalDescriptionText: any;
+  onRefetch?: any;
+  resourceName: string;
+  selectedData?: any;
+  confirmButtonText: string;
+  refetchTable: boolean;
+  handleSubmit: () => void;
+  setRefetchTable: Dispatch<SetStateAction<boolean>>;
+}
+
+export default function GeneralModal(props: Props) {
+  const {
+    open,
+    setOpen,
+    confirmText,
+    headerText,
+    modalDescriptionText,
+    selectedData,
+    confirmButtonText,
+    handleSubmit,
+  } = props;
+  const [isOk, setIsOk] = useState(false);
+  const [confirmationTextInput, setConfirmationTextInput] = useState("");
+  const { t } = useTranslation("translation");
+
+  const handleCancelConfirmationText = (event: any) => {
+    setConfirmationTextInput(event.target.value);
+    event.target.value === confirmText ? setIsOk(true) : setIsOk(false);
+  };
+
+  const onSubmit = () => {
+    handleSubmit();
+  };
+
+  return (
+    <React.Fragment>
+      <Drawer anchor="right" open={open}>
+        <Box className="dd-modal-container">
+          <Box className="dd-modal-header">
+            <Box pl={2}>
+              <Typography color="#F3F3F6">
+                {headerText}: {selectedData?.purpose}
+              </Typography>
+              <Typography color="#F3F3F6">
+                {selectedData?.templateId}
+              </Typography>
+            </Box>
+            <CloseIcon
+              onClick={() => {
+                setOpen(false);
+                setIsOk(false);
+                setConfirmationTextInput('');
+              }}
+              sx={{ paddingRight: 2, cursor: "pointer", color: "#F3F3F6" }}
+            />
+          </Box>
+          <Box>
+            <Box
+              p={1.5}
+              sx={{
+                fontSize: "1rem",
+                lineHeight: "1.5",
+                letterSpacing: "0.00938em",
+              }}
+            >
+              {modalDescriptionText}
+              <TextField
+                autoFocus
+                variant="outlined"
+                fullWidth
+                value={confirmationTextInput}
+                onChange={handleCancelConfirmationText}
+                size="small"
+                sx={{marginTop:"5px"}}
+              />
+            </Box>
+          </Box>
+          <Box className="modal-footer">
+            <Button
+              onClick={() => {
+                setOpen(false);
+                setIsOk(false);
+                setConfirmationTextInput('');
+              }}
+              className="delete-btn"
+              sx={{
+                marginRight: "10px",
+                color: "black",
+                "&:hover": {
+                  backgroundColor: "black",
+                  color: "white",
+                },
+              }}
+              variant="outlined"
+            >
+              {t("common.cancel")}
+            </Button>
+            <Button
+              className="delete-btn"
+              onClick={onSubmit}
+              variant="outlined"
+              sx={{
+                marginRight: "20px",
+                cursor: !isOk ? "not-allowed" : "pointer",
+                color: !isOk ? "#6D7676" : "black",
+                "&:hover": {
+                  backgroundColor: !isOk ? "#6D7676" : "black",
+                  color: "white",
+                },
+              }}
+            >
+              {confirmButtonText}
+            </Button>
+          </Box>
+        </Box>
+      </Drawer>
+    </React.Fragment>
+  );
+}

src/component/OrganisationDetails/OrgCoverImageUpload.tsx

@@ -55,7 +55,7 @@ const OrgCoverImageUpload = (props: Props) => {
         src={
           !coverImageBase64
             ? defaultCoverImage
-            : DefaultBanner
+            : coverImageBase64
         }
       />
 

src/component/OrganisationDetails/OrgLogoImageUpload.tsx

@@ -36,8 +36,8 @@ const OrgLogoImageUpload = (props: Props) => {
       <Avatar
         src={
           !logoImageBase64
-            ? defaultLogoImg
-            : DefaultLogo
+            ? DefaultLogo
+            : logoImageBase64
         }
         alt="logo"
         style={{

src/component/Table/TableRows.tsx

@@ -38,7 +38,6 @@ const TableRows: FC<TableRowProps> = ({
             key={`Row-Cell-${index}`}
             width={tHead?.bodyWidth}
           >
-            {console.log("tHead", tHead)}
             {tHead?.field
               ? formatDatafield(tHead?.field, item)
               : tHead?.cell(item, tHead?.reference ? tHead?.reference : i )}

src/component/Table/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-unresolved */
 import React, { FC } from "react";
-import { Paper } from "@mui/material";
+import { Paper, TableCell, TableRow } from "@mui/material";
 import Table from "@material-ui/core/Table";
 import TableBody from '@material-ui/core/TableBody';
 import TableHeading from "./TableHeading";
@@ -16,6 +16,7 @@ type BasicTableProps = {
   readonly isColumnWise?: boolean,
   readonly customTableHeadClass?: string,
   readonly customTableBodyClass?: string,
+  readonly pagination?: any[],
 };
 
 const renderTableHead = (tableField) => {
@@ -30,12 +31,20 @@ const renderTableBody = (tableData, tableField, isColumnWise?) => {
 
   return (
     <TableBody>
-      {isColumnWise ? 
-        <TableColumns tableHead={tableField} tableData={tableData} /> 
-        :
-        <TableRows tableHead={tableField} tableData={tableData} />
-      }
-
+      {tableData?.length > 0 ?
+        <>
+          {isColumnWise ? 
+          <TableColumns tableHead={tableField} tableData={tableData} /> 
+          :
+          <TableRows tableHead={tableField} tableData={tableData} />
+        }
+        </> : 
+        <TableRow>
+          <TableCell colSpan={5} align="center">
+            No data to display
+          </TableCell>
+        </TableRow>
+      }   
     </TableBody>
   );
 };
@@ -45,7 +54,7 @@ const BasicTable: FC<BasicTableProps> = ({
   tableField,
   isColumnWise = false,
   customTableHeadClass,
-  customTableBodyClass,
+  customTableBodyClass
 }: BasicTableProps) => {
   return (
     <>