New pages of contract

micro-ui/web/micro-ui-internals/example/package.json

@@ -11,7 +11,7 @@
  "devDependencies": {
  "@egovernments/digit-ui-libraries": "1.8.2-beta.1",
  "@egovernments/digit-ui-components": "0.0.2-beta.1",
- "@egovernments/digit-ui-module-core": "1.8.2-beta.2",
+ "@egovernments/digit-ui-module-core": "1.8.2-beta.6",
  "@egovernments/digit-ui-module-utilities": "1.0.1-beta.30",
  "@egovernments/digit-ui-react-components": "1.8.2-beta.5",
  "@egovernments/digit-ui-module-sample": "0.0.1",

micro-ui/web/micro-ui-internals/packages/modules/sample/src/Module.js

@@ -3,10 +3,13 @@ import React from "react";
 import { useRouteMatch } from "react-router-dom";
 import { default as EmployeeApp } from "./pages/employee";
 import SampleCard from "./components/SampleCard";
+import NewComponent from "./components/NewComponent";
 import ViewEstimateComponent from "./components/ViewEstimateComponent";
 import { overrideHooks, updateCustomConfigs } from "./utils";
 import AdditionalComponentWrapper from "./components/AdditionalComponent";
 import SampleMultiComponent from "./components/SampleMultiComponent";
+import NewDetailsDocument from "./components/NewDetailsDocument";
+import AdditionalDetails from "./components/AdditionalDetails";
 
 export const SampleModule = ({ stateCode, userType, tenants }) => {
  const { path, url } = useRouteMatch();
@@ -28,6 +31,9 @@ export const SampleModule = ({ stateCode, userType, tenants }) => {
 const componentsToRegister = {
  SampleModule,
  SampleCard,
+ NewComponent,
+ NewDetailsDocument,
+ AdditionalDetails,
  ViewEstimatePage: ViewEstimateComponent,
  SampleAdditionalComponent: AdditionalComponentWrapper,
  SampleMultiComponent: SampleMultiComponent,

micro-ui/web/micro-ui-internals/packages/modules/sample/src/components/AdditionalDetails.js

@@ -0,0 +1,141 @@
+
+import { AddNewIcon } from "@egovernments/digit-ui-components";
+import { AddIcon, Button, DustbinIcon, LabelFieldPair, TextInput } from "@egovernments/digit-ui-react-components";
+import React, { Fragment, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+const AdditionalDetails = ({ onSelect, ...props }) => {
+ const { t } = useTranslation();
+
+ // State for storing data
+ const [additionalDetailsData, setAdditionalDetailsData] = useState([
+ {
+ key: 1,
+ officerInChargeName: {
+ code: "",
+ name: "",
+ },
+ officerInChargeDesgn: "",
+ totalEstimatedAmount: "",
+ },
+ ]);
+
+// Function to update the value based on field name and index
+const handleChange = (index, field, value, subField = null) => {
+ const newData = [...additionalDetailsData];
+ if (subField) {
+ newData[index][field][subField] = value;
+ } else {
+ newData[index][field] = value;
+ }
+ setAdditionalDetailsData(newData);
+ };
+
+ // Function to add new row
+ const addRow = () => {
+ setAdditionalDetailsData([
+ ...additionalDetailsData,
+ {
+ key: additionalDetailsData.length + 1,
+ officerInChargeName: {
+ code: "",
+ name: "",
+ },
+ officerInChargeDesgn: "",
+ totalEstimatedAmount: "",
+ },
+ ]);
+ };
+
+ // Function to delete a row
+ const deleteItem = (index) => {
+ const newData = additionalDetailsData.filter((item, idx) => idx !== index);
+ setAdditionalDetailsData(newData);
+ };
+
+ // when doc update calling onSelect for update the value in formdata
+ useEffect(() => {
+ onSelect("additionalDetails", additionalDetailsData);
+ }, [additionalDetailsData]);
+
+ useEffect(() => {
+ onSelect("additionalDetails2", additionalDetailsData);
+ }, [additionalDetailsData]);
+
+ return (
+ <>
+ <div><strong>Additional Details </strong></div>
+ {additionalDetailsData.map((item, index) => (
+ <div
+ key={item.key}
+ style={{
+ backgroundColor: "#eee",
+ border: "1px solid #d6d5d4",
+ padding: "1.5rem",
+ marginBottom: "1.5rem",
+ }}
+ >
+ {additionalDetailsData.length > 1 && (
+ <div className="delete-resource-icon" style={{ textAlign: "right" }} onClick={() => deleteItem(index)}>
+ <DustbinIcon />
+ </div>
+ )}
+ <LabelFieldPair>
+ <div style={{ width: "30%" }}>
+ <span>{t("officerInChargeCode")}</span>
+ </div>
+ <TextInput
+ name="officerInChargeCode"
+ value={item.officerInChargeName.code || ""}
+ onChange={(event) => handleChange(index, "officerInChargeName", event.target.value, "code")}
+ />
+ </LabelFieldPair>
+ <LabelFieldPair>
+ <div style={{ width: "30%" }}>
+ <span>{t("officerInChargeName")}</span>
+ </div>
+ <TextInput
+ name="officerInChargeName"
+ isMandatory={true}
+ value={item.officerInChargeName.name || ""}
+ onChange={(event) => handleChange(index, "officerInChargeName", event.target.value, "name")}
+ />
+ </LabelFieldPair>
+ <LabelFieldPair>
+ <div style={{ width: "30%" }}>
+ <span>{t("officerInChargeDesgn")}</span>
+ </div>
+ <TextInput
+ name="officerInChargeDesgn"
+ isMandatory={true}
+ value={item.officerInChargeDesgn || ""}
+ onChange={(event) => handleChange(index, "officerInChargeDesgn", event.target.value)}
+ />
+ </LabelFieldPair>
+ <LabelFieldPair>
+ <div style={{ width: "30%" }}>
+ <span>{t("totalEstimatedAmount")}</span>
+ </div>
+ <TextInput
+ name="totalEstimatedAmount"
+ isMandatory={true}
+ type="number"
+ value={item.totalEstimatedAmount || ""}
+ onChange={(event) => handleChange(index, "totalEstimatedAmount", event.target.value)}
+ />
+ </LabelFieldPair>
+ </div>
+ ))}
+ <Button
+ variation="secondary"
+ label={t("Add more")}
+ className={"add-rule-btn hover"}
+ icon={<AddIcon fill="#c84c0e" styles={{ height: "1.5rem", width: "1.5rem" }} />}
+ onButtonClick={addRow}
+ style={{ marginLeft: "auto" }}
+ />
+ </>
+ );
+};
+
+export default AdditionalDetails;

micro-ui/web/micro-ui-internals/packages/modules/sample/src/components/NewComponent.js

@@ -0,0 +1,188 @@
+
+import { AddNewIcon } from "@egovernments/digit-ui-components";
+import { AddIcon, Button, Dropdown, DustbinIcon, LabelFieldPair, TextInput } from "@egovernments/digit-ui-react-components";
+import React, { Fragment, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+const NewComponent = ({ onSelect, ...props }) => {
+ const { t } = useTranslation();
+
+ // option for dropdown
+ const [options, setOptions] = useState([
+ { code: "ADHAAR", name: "Adhaar" },
+ { code: "PANCARD", name: "Pan Card" },
+ { code: "PASSPORT", name: "Passport" },
+ { code: "VOTERID", name: "voterid" },
+ ]);
+
+ // state for storing data
+ const [documentData, setDocumentData] = useState([
+ {
+ key: 1,
+ type: null,
+ estimateId: null,
+ estimateLineItemId: null,
+ contractLineItemRef: null,
+ tenantId: null,
+ unitRate: null,
+ noOfunit: null,
+ status: null,
+ },
+ ]);
+
+ // fn to update the value based on type
+ const handleUpdateField = ({ field, value, item, index }) => {
+ setDocumentData((prev) => {
+ return prev.map((i) => {
+ if (i.key === item.key) {
+ return {
+ ...i,
+ [field]: value,
+ };
+ }
+ return i;
+ });
+ });
+ };
+
+ // fn to add more field
+ const add = () => {
+ setDocumentData((prev) => [
+ ...prev,
+ {
+ key: prev.length + 1,
+ type: null,
+ estimateId: null,
+ estimateLineItemId: null,
+ contractLineItemRef: null,
+ tenantId: null,
+ unitRate: null,
+ noOfunit: null,
+ status: null,
+ },
+ ]);
+ };
+
+ // fn to delete field
+ const deleteItem = (data) => {
+ const fil = documentData.filter((i) => i.key !== data.key);
+ const up = fil.map((item, index) => ({ ...item, key: index + 1 }));
+ setDocumentData(up);
+ };
+
+ // when doc update calling onSelect for update the value in formdata
+ useEffect(() => {
+ onSelect("NewDetails", documentData);
+ }, [documentData]);
+
+ return (
+ <>
+ <div><strong>Line Items</strong></div>
+
+ {documentData.map((item, index) => (
+ <div
+ key={item.key}
+ style={{
+ backgroundColor: "#eee",
+ border: "1px solid #d6d5d4",
+ padding: "1.5rem",
+ marginBottom: "1.5rem",
+ }}
+ >
+ {documentData.length > 1 ? (
+ <div className="delete-resource-icon" style={{ textAlign: "right" }} onClick={() => deleteItem(item)}>
+ <DustbinIcon />
+ </div>
+ ) : null}
+ <LabelFieldPair>
+ <div style={{ width: "30%" }}>
+ <span>{t("estimateId")}</span>
+ </div>
+ <TextInput
+ name="estimateId"
+ isMandatory={true}
+ value={item.estimateId || ""}
+ onChange={(event) => handleUpdateField({ field: "estimateId", value: event.target.value, item, index })}
+ />
+ </LabelFieldPair>
+ <LabelFieldPair>
+ <div style={{ width: "30%" }}>
+ <span>{t("estimateLineItemId")}</span>
+ </div>
+ <TextInput
+ name="estimateLineItemId"
+ isMandatory={true}
+ value={item.estimateLineItemId || ""}
+ onChange={(event) => handleUpdateField({ field: "estimateLineItemId", value: event.target.value, item, index })}
+ />
+ </LabelFieldPair>
+ <LabelFieldPair>
+ <div style={{ width: "30%" }}>
+ <span>{t("contractLineItemRef")}</span>
+ </div>
+ <TextInput
+ name="contractLineItemRef"
+ isMandatory={true}
+ value={item.contractLineItemRef || ""}
+ onChange={(event) => handleUpdateField({ field: "contractLineItemRef", value: event.target.value, item, index })}
+ />
+ </LabelFieldPair>
+ <LabelFieldPair>
+ <div style={{ width: "30%" }}>
+ <span>{t("tenantId")}</span>
+ </div>
+ <TextInput
+ name="tenantId"
+ isMandatory={true}
+ value={item.tenantId || ""}
+ onChange={(event) => handleUpdateField({ field: "tenantId", value: event.target.value, item, index })}
+ />
+ </LabelFieldPair>
+ <LabelFieldPair>
+ <div style={{ width: "30%" }}>
+ <span>{t("unitRate")}</span>
+ </div>
+ <TextInput
+ name="unitRate"
+ isMandatory={true}
+ value={item.unitRate || ""}
+ onChange={(event) => handleUpdateField({ field: "unitRate", value: event.target.value, item, index })}
+ />
+ </LabelFieldPair>
+ <LabelFieldPair>
+ <div style={{ width: "30%" }}>
+ <span>{t("noOfunit")}</span>
+ </div>
+ <TextInput
+ name="noOfunit"
+ isMandatory={true}
+ value={item.noOfunit || ""}
+ onChange={(event) => handleUpdateField({ field: "noOfunit", value: event.target.value, item, index })}
+ />
+ </LabelFieldPair>
+ <LabelFieldPair>
+ <div style={{ width: "30%" }}>
+ <span>{t("status")}</span>
+ </div>
+ <TextInput
+ name="status"
+ isMandatory={true}
+ value={item.status || ""}
+ onChange={(event) => handleUpdateField({ field: "status", value: event.target.value, item, index })}
+ />
+ </LabelFieldPair>
+ </div>
+ ))}
+ <Button
+ variation="secondary"
+ label={t("Add more")}
+ className={"add-rule-btn hover"}
+ icon={<AddIcon fill="#c84c0e" styles={{ height: "1.5rem", width: "1.5rem" }} />}
+ onButtonClick={add}
+ style={{ marginLeft: "auto" }}
+ />
+ </>
+ );
+};
+
+export default NewComponent;