Feat: #23 panel issues

decentralised-dataexchange · Oct 3, 2024 · 31bb323 · 31bb323
1 parent 62896e8
commit 31bb323
Show file tree

Hide file tree

Showing 6 changed files with 268 additions and 228 deletions.
diff --git a/src/Components/CollapseUsage/PanelHeader.jsx b/src/Components/CollapseUsage/PanelHeader.jsx
@@ -1,10 +1,7 @@
-import React, { useState } from "react";
+import React from "react";
 import { Switch } from "antd";
 import { withNamespaces } from "react-i18next";
 import { Popover } from "antd";
-import { ModalComponentWithNamespace } from "../modals/modal";
-import { DataAgreementDetailsWithNamespace } from "../modals/detailsContainer/dataAgreementDetails";
-import { DataSourcesDetailsWithNamespace } from "../modals/detailsContainer/dataSourcesDetails";
 
 const content = (description) => (
   <div>
@@ -24,123 +21,75 @@ export const PanelHeader = ({
   disabled,
   checked,
   elemRef,
-  showDescription,
-  lawfulBasisOfProcessing,
-  policyURL,
-  jurisdiction,
-  thirdPartyDisclosure,
-  industryScope,
-  geographicRestriction,
-  retentionPeriod,
-  storageLocation,
-  methodOfUse,
-  dataAgreement,
+  disableDataAttributes,
+  key,
+  setOpenViewDataSources,
+  onOpenDataAgreementModal,
 }) => {
-  const [openViewDataAgreementModal, setOpenViewDataAgreementModal] = useState(
-    false
-  );
-  const [openDataSources, setOpenViewDataSources] = useState(false);
-
-  const disableDataAttrubutes =
-    methodOfUse !== "data_using_service" ||
-    (!dataAgreement["dataSources"] ||
-      dataAgreement["dataSources"] === undefined || dataAgreement["dataSources"].length === 0);
-
   return (
-    <>
-      <Popover
-        content={content(description)}
-        placement="bottomRight"
-        trigger="hover|focus"
-        overlayClassName="purpose-tooltip"
-      >
-        <div ref={elemRef}>
-          <div>
-            <div className="panel-header">
-              <div>
-                <p className="title">{text}</p>
-              </div>
-              <Switch
-                disabled={disabled}
-                checked={checked}
-                onChange={onChange}
-              />
-            </div>
-            {showDescription && (
-              <p style={{ width: "97%", fontSize: "12px" }}>
-                {description}
-                <span style={{ float: "right" }}>
-                  {t("dataAgreements.read")}{" "}
-                  <span
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setOpenViewDataAgreementModal(true);
-                    }}
-                    style={{ textDecoration: "underline", color: "#1890FF" }}
-                  >
-                    {t("dataAgreements.daDetails")}
-                  </span>
-                </span>
-              </p>
-            )}
-            <div className="panel-header-count">
-              <p>
-                {" "}
-                {t("userRequests.panelAllow")}
-                {` ${consented} of ${total}`}
-              </p>
-              {showDescription && (
-                <p
-                  style={{
-                    textDecoration: "underline",
-                    color: disableDataAttrubutes ? "grey" : "#1890FF",
-                    cursor: disableDataAttrubutes ? "not-allowed" : "pointer",
-                  }}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    if (!disableDataAttrubutes) {
-                      setOpenViewDataSources(true);
-                    }
-                  }}
-                >
-                  {t("dataAgreements.dataSources")}
-                </p>
-              )}
+    <Popover
+      content={content(description)}
+      placement="bottomRight"
+      trigger="hover|focus"
+      overlayClassName="purpose-tooltip"
+      key={key}
+    >
+      <div ref={elemRef}>
+        <div>
+          <div className="panel-header">
+            <div>
+              <p className="title">{text}</p>
             </div>
+            <Switch disabled={disabled} checked={checked} onChange={onChange} />
           </div>
-        </div>
-      </Popover>
+          <p style={{ width: "97%", fontSize: "12px" }}>
+            {description.length > 80
+              ? `${description.substring(0, 80)} ...`
+              : description}
 
-      {/* View Data agreements */}
-      <ModalComponentWithNamespace
-        open={openViewDataAgreementModal}
-        setOpen={setOpenViewDataAgreementModal}
-        header={t("dataAgreements.daataAgreement")}
-      >
-        <DataAgreementDetailsWithNamespace
-          purpose={text}
-          purposeDescription={description}
-          lawfulBasisOfProcessing={lawfulBasisOfProcessing}
-          policyURL={policyURL}
-          jurisdiction={jurisdiction}
-          thirdPartyDisclosure={thirdPartyDisclosure}
-          industryScope={industryScope}
-          geographicRestriction={geographicRestriction}
-          retentionPeriod={retentionPeriod}
-          storageLocation={storageLocation}
-        />
-      </ModalComponentWithNamespace>
+            <span
+              style={{ float: "right", color: "#1890FF", cursor: "pointer" }}
+              onClick={(e) => {
+                onOpenDataAgreementModal(e);
+              }}
+            >
+              {t("dataAgreements.read")} {t("dataAgreements.daDetails")}
+            </span>
+          </p>
 
-      {/* View Data Sources */}
-      <ModalComponentWithNamespace
-        open={openDataSources}
-        setOpen={setOpenViewDataSources}
-        header={t("dataAgreements.dataSources")}
-      >
-        <DataSourcesDetailsWithNamespace dataAgreement={dataAgreement} />
-      </ModalComponentWithNamespace>
-    </>
+          <div className="panel-header-count">
+            <p
+              style={{
+                margin: 0,
+                padding: 0,
+              }}
+            >
+              {" "}
+              {t("userRequests.panelAllow")}
+              {` ${consented} of ${total}`}
+            </p>
+            {!disableDataAttributes && (
+              <span
+                style={{
+                  color: "#1890FF",
+                  cursor: "pointer",
+                  margin: 0,
+                  padding: 0,
+                }}
+                onClick={(e) => {
+                  // if (!disableDataAttributes) {
+                  setOpenViewDataSources(e);
+                  // }
+                }}
+              >
+                {t("dataAgreements.dataSources")}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+    </Popover>
   );
 };
 
-export const PanelHeaderWithNamespace = withNamespaces()(PanelHeader);
+export const PanelHeaderWithNamespace = withNamespaces()(PanelHeader);
diff --git a/src/Components/CollapseUsage/SubCollapse.jsx b/src/Components/CollapseUsage/SubCollapse.jsx
@@ -7,14 +7,15 @@ const Panel = Collapse.Panel;
 const RadioGroup = Radio.Group;
 
 export const SubCollapse = ({ title, consented, lawfulUsage }) => (
+
   <Collapse
     className="collapse-usage bg-transparent"
     bordered={false}
     expandIcon={({ isActive }) => (
       <Icon type="caret-right" rotate={isActive ? 90 : 0} />
     )}
   >
-    <Panel className="sub-collapse-panel" header={title} key="1">
+    <Panel className="sub-collapse-panel" header={title} key="1" style={{marginTop:  "5px"}}>
       <div className="group">
         <RadioGroup
           className="radio-group-small"

diff --git a/src/Components/CollapseUsage/collapse.css b/src/Components/CollapseUsage/collapse.css
@@ -72,7 +72,7 @@
   display: flex;
   justify-content: space-between;
   align-items: top;
-  width:97%
+  width: 97%;
 }
 
 .panel-header > button {
@@ -216,3 +216,7 @@
 .read-text {
   white-space: nowrap;
 }
+
+.collapse-usage .ant-collapse > .ant-collapse-item > .ant-collapse-header {
+  padding: 0 12px 0 40px;
+}