Fix: #317 Configure Data sources

src/components/dataAgreements/DataAgreementActions.tsx

@@ -3,7 +3,7 @@ import { convertYearsToDays } from "../../utils/convertYearsToDays";
 export interface createdDataProps {
   Name: string;
   Version: string;
-  AttributeType: number;
+  AttributeType: string;
   Description: string;
   LawfulBasisOfProcessing: number;
   PolicyURL: string;
@@ -16,18 +16,17 @@ export interface createdDataProps {
   DpiaDate: any;
   DpiaSummaryURL: string;
   dataAttributes: any;
+  dataSources: any;
 }
 
-
-
 export const DataAgreementPayload = (
   createdData: createdDataProps,
   active: boolean,
   lifecycle: string,
   mode: string,
   selectedDataAgreement?: any
 ): any => {
-  return {
+  const payload: any = {
     dataAgreement: {
       id: mode === "Update" ? selectedDataAgreement.id : "",
       version: createdData.Version,
@@ -101,6 +100,7 @@ export const DataAgreementPayload = (
         ? selectedDataAgreement?.forgettable
         : "string",
       lifecycle: lifecycle,
+
       dataAttributes: createdData?.dataAttributes?.map(
         (dataAttributes: any) => {
           return {
@@ -112,6 +112,55 @@ export const DataAgreementPayload = (
           };
         }
       ),
+      dataSources: [],
     },
   };
+
+  // Update dataSources if AttributeType is "data_using_service" and all names are not empty
+  if (
+    createdData.AttributeType === "data_using_service" &&
+    createdData.dataSources
+  ) {
+    const validDataSources = createdData.dataSources.filter(
+      (source: any) => source.name !== ""
+    );
+    if (validDataSources.length === createdData.dataSources.length) {
+      payload.dataAgreement.dataSources = validDataSources;
+    }
+  }
+
+  return payload;
 };
+
+export function validateSources(data: any[]): boolean {
+  if (!data || data.length === 0) {
+    return true; // Return true for empty or undefined data
+  }
+
+  for (const item of data) {
+    if (!item || typeof item !== "object") {
+      return false; // Invalid item
+    }
+
+    const name = item.name || "";
+    const location = item.location || "";
+    const sector = item.sector || "";
+
+    const allEmpty =
+      name.length === 0 && location.length === 0 && sector.length === 0;
+    const allValidLength =
+      name.length >= 3 && location.length >= 3 && sector.length >= 3;
+    const anyNonEmpty =
+      name.length > 0 || location.length > 0 || sector.length > 0;
+
+    if (allEmpty) {
+      continue; // This item is valid, check the next one
+    }
+
+    if (anyNonEmpty && !allValidLength) {
+      return false; // If any field is non-empty, all must be at least 3 characters
+    }
+  }
+
+  return true; // All items passed the check
+}

src/components/dataAgreements/DataSourcesTable.tsx

@@ -0,0 +1,202 @@
+import CSS from "csstype";
+
+import { Box } from "@mui/material";
+
+import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
+import { useTranslation } from "react-i18next";
+
+const titleAttrRestrictionStyle = {
+  fontWeight: "normal",
+  margin: "10px 10px 5px 10px",
+  borderBottom: "solid 1px #dee2e6",
+  lineHeight: "1.5rem",
+};
+
+const tableAttrAdditionalInfoStyle = {
+  border: 0,
+  width: "100%",
+  maxWidth: "100%",
+  marginBottom: "0rem",
+  backgroundColor: "#FFFF",
+};
+
+const tableAttrAdditionalInfoColumn: CSS.Properties = {
+  fontWeight: "normal",
+  border: "0px",
+};
+
+const inputStyleAttr = {
+  width: "85%",
+  color: "#495057",
+  border: "1",
+  borderWidth: 0,
+  padding: 0,
+  paddingBottom: 1,
+  borderRadius: 0,
+  fontSize: "14px",
+  borderBottomWidth: 1.2,
+  backgroundColor: "#FFFF",
+  borderBottomColor: "red", //'#DFE0E1',
+  marginRight: "10px",
+  fontFamily: "Inter,Helvetica,Arial,sans-serif",
+};
+
+export interface Props {
+  mode: string;
+  index: number;
+  formController: any;
+  fieldsDataAttributes: any;
+  removeDataAttributes: any;
+  addDataAttributeField: any;
+  methods: any;
+}
+
+export const DataSourcesTable = (props: Props) => {
+  const { index, removeDataAttributes, formController } = props;
+  const { register } = formController;
+  const { t } = useTranslation("translation");
+
+  return (
+    <Box
+      style={{
+        marginBottom: "25px",
+        border: "1px solid #DFE0E1",
+        borderRadius: 5,
+      }}
+    >
+      <Box style={titleAttrRestrictionStyle}>
+        <table style={tableAttrAdditionalInfoStyle}>
+          <tbody>
+            <tr style={{ display: "flex", alignItems: "center" }}>
+              <input
+                {...register(`dataSources.${props.index}.name`, {
+                  // required: true,
+                  // minLength: 3,
+                  pattern: {
+                    value: /.*\D.*/,
+                    message: "",
+                  },
+                })}
+                placeholder={t("dataAgreements.dataSourceName")}
+                disabled={props.mode === "Read"}
+                style={{
+                  ...inputStyleAttr,
+                  border: "none",
+                  outline: "none",
+                  width: "100%",
+                  cursor: props.mode === "Read" ? "not-allowed" : "auto",
+                }}
+                type="text"
+                autoComplete="off"
+              />
+
+              <th>
+                <DeleteOutlineOutlinedIcon
+                  style={{
+                    cursor: props.mode === "Read" ? "not-allowed" : "pointer",
+                  }}
+                  onClick={() => {
+                    props.mode === "Read"
+                      ? () => {}
+                      : removeDataAttributes(index);
+                  }}
+                />
+              </th>
+            </tr>
+          </tbody>
+        </table>
+      </Box>
+
+      <Box style={{ ...titleAttrRestrictionStyle }}>
+        <table style={tableAttrAdditionalInfoStyle}>
+          <tbody>
+            <tr style={{ display: "flex" }}>
+              <td style={{ ...tableAttrAdditionalInfoColumn, flexGrow: 1 }}>
+                <input
+                  {...register(`dataSources.${index}.sector`, {
+                    pattern: {
+                      value: /.*\D.*/,
+                      message: "",
+                    },
+                  })}
+                  placeholder={t("dataAgreements.dataSourceSector")}
+                  disabled={props.mode === "Read"}
+                  style={{
+                    ...inputStyleAttr,
+                    border: "none",
+                    outline: "none",
+                    width: "100%",
+                    cursor: props.mode === "Read" ? "not-allowed" : "auto",
+                  }}
+                  type="text"
+                  autoComplete="off"
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </Box>
+
+      <Box style={{ ...titleAttrRestrictionStyle }}>
+        <table style={tableAttrAdditionalInfoStyle}>
+          <tbody>
+            <tr style={{ display: "flex" }}>
+              <td style={{ ...tableAttrAdditionalInfoColumn, flexGrow: 1 }}>
+                <input
+                  {...register(`dataSources.${index}.location`, {
+                    pattern: {
+                      value: /.*\D.*/,
+                      message: "",
+                    },
+                  })}
+                  placeholder={t("dataAgreements.dataSourceLocation")}
+                  disabled={props.mode === "Read"}
+                  style={{
+                    ...inputStyleAttr,
+                    border: "none",
+                    outline: "none",
+                    width: "100%",
+                    cursor: props.mode === "Read" ? "not-allowed" : "auto",
+                  }}
+                  type="text"
+                  autoComplete="off"
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </Box>
+
+      <Box style={{ ...titleAttrRestrictionStyle, borderBottom: 0 }}>
+        <table style={tableAttrAdditionalInfoStyle}>
+          <tbody>
+            <tr style={{ display: "flex" }}>
+              <td style={{ ...tableAttrAdditionalInfoColumn, flexGrow: 1 }}>
+                <input
+                  {...register(`dataSources.${index}.privacyDashboardUrl`, {
+                    required: false,
+                    pattern: {
+                      value: /^(ftp|http|https):\/\/[^ "]+$/,
+                      message: "",
+                    },
+                  })}
+                  placeholder={`${t("dataAgreements.privacyDashboardURL")}`}
+                  disabled={props.mode === "Read"}
+                  style={{
+                    ...inputStyleAttr,
+                    border: "none",
+                    outline: "none",
+                    width: "100%",
+                    cursor: props.mode === "Read" ? "not-allowed" : "auto",
+                  }}
+                  type="text"
+                  autoComplete="off"
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </Box>
+    </Box>
+  );
+};

src/components/dataAgreements/DataSourcesTableContainer.tsx

@@ -0,0 +1,84 @@
+import { Fragment } from "react";
+
+import { Box, Typography } from "@mui/material";
+
+import AddCircleOutlineOutlinedIcon from "@mui/icons-material/AddCircleOutlineOutlined";
+
+import { useTranslation } from "react-i18next";
+import { DataSourcesTable } from "./DataSourcesTable";
+
+interface Props {
+  mode: string;
+  appendDataAttributes: any;
+  fieldsDataAttributes: any;
+  removeDataAttributes: any;
+  formController: any;
+  methods: any;
+}
+
+const DataSourcesTableContainer = (props: Props) => {
+  const { t } = useTranslation("translation");
+  const {
+    mode,
+    appendDataAttributes,
+    fieldsDataAttributes,
+    removeDataAttributes,
+    formController,
+    methods,
+  } = props;
+
+  const addDataAttributeField = () => {
+    appendDataAttributes({
+      name: "",
+      sector: "",
+      location: "",
+      privacyDashboardUrl: "",
+    });
+  };
+
+  return (
+    <>
+      <Box>
+        <Box
+          style={{
+            display: "flex",
+            alignItems: "center",
+            marginBottom: "15px",
+          }}
+        >
+          <Typography variant="subtitle1">
+            {t("dataAgreements.dataSources")}
+          </Typography>
+          <AddCircleOutlineOutlinedIcon
+            type="submit"
+            onClick={mode === "Read" ? () => {} : () => addDataAttributeField()}
+            style={{
+              cursor: mode === "Read" ? "not-allowed" : "pointer",
+              marginLeft: "5px",
+            }}
+          />
+        </Box>
+        <Typography variant="body2" style={{ marginBottom: "15px" }}>
+          {t("dataAgreements.dataSourceSubText")}
+        </Typography>
+      </Box>
+      {fieldsDataAttributes?.map((item: any, index: number) => {
+        return (
+          <Fragment key={item.id}>
+            <DataSourcesTable
+              index={index}
+              mode={mode}
+              formController={formController}
+              addDataAttributeField={addDataAttributeField}
+              methods={methods}
+              fieldsDataAttributes={fieldsDataAttributes}
+              removeDataAttributes={removeDataAttributes}
+            />
+          </Fragment>
+        );
+      })}
+    </>
+  );
+};
+
+export default DataSourcesTableContainer;