From 32f99b4824d18945f560ca9dbcb606b71392c592 Mon Sep 17 00:00:00 2001 From: Nipun Arora Date: Fri, 3 Nov 2023 21:02:23 +0530 Subject: [PATCH 1/2] updated to latest core version in code --- micro-ui/web/core/package.json | 2 +- micro-ui/web/micro-ui-internals/example/package.json | 2 +- micro-ui/web/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/micro-ui/web/core/package.json b/micro-ui/web/core/package.json index dffae10d6c2..4b3292caac9 100644 --- a/micro-ui/web/core/package.json +++ b/micro-ui/web/core/package.json @@ -16,7 +16,7 @@ "dependencies": { "@egovernments/digit-ui-libraries": "1.8.0-beta", "@egovernments/digit-ui-module-workbench": "1.0.0-beta", - "@egovernments/digit-ui-module-core": "1.8.0-beta.8", + "@egovernments/digit-ui-module-core": "1.8.0-beta.9", "@egovernments/digit-ui-module-hrms": "1.8.0-beta.2", "@egovernments/digit-ui-react-components": "1.8.0-beta.1", "@egovernments/digit-ui-module-dss": "1.8.0-beta", diff --git a/micro-ui/web/micro-ui-internals/example/package.json b/micro-ui/web/micro-ui-internals/example/package.json index dfe1e6d5196..7d6d6c7fec6 100644 --- a/micro-ui/web/micro-ui-internals/example/package.json +++ b/micro-ui/web/micro-ui-internals/example/package.json @@ -12,7 +12,7 @@ "@egovernments/digit-ui-libraries": "1.8.0-beta", "@egovernments/digit-ui-module-workbench": "1.0.0-beta", "@egovernments/digit-ui-module-dss": "1.8.0-beta", - "@egovernments/digit-ui-module-core": "1.8.0-beta.8", + "@egovernments/digit-ui-module-core": "1.8.0-beta.9", "@egovernments/digit-ui-module-common": "1.8.0-beta", "@egovernments/digit-ui-module-hrms": "1.8.0-beta.2", "@egovernments/digit-ui-module-utilities": "1.0.0-beta", diff --git a/micro-ui/web/package.json b/micro-ui/web/package.json index fd16a3d49b4..c87e6245cb0 100644 --- a/micro-ui/web/package.json +++ b/micro-ui/web/package.json @@ -16,7 +16,7 @@ "dependencies": { "@egovernments/digit-ui-libraries": "1.8.0-beta", "@egovernments/digit-ui-module-workbench": "1.0.0-beta", - "@egovernments/digit-ui-module-core": "1.8.0-beta.8", + "@egovernments/digit-ui-module-core": "1.8.0-beta.9", "@egovernments/digit-ui-module-hrms": "1.8.0-beta.2", "@egovernments/digit-ui-react-components": "1.8.0-beta.1", "@egovernments/digit-ui-module-dss": "1.8.0-beta", From f89ba87a106bccfa8c287997a821fd8b08b0509f Mon Sep 17 00:00:00 2001 From: Nipun Arora Date: Fri, 3 Nov 2023 21:28:49 +0530 Subject: [PATCH 2/2] Generic ViewComposer --- .../src/hoc/ViewComposer/Readme.md | 126 ++++++++++++ .../src/hoc/ViewComposer/index.js | 182 ++++++++++++++++++ .../src/hoc/ViewComposer/renderUtils.js | 151 +++++++++++++++ .../packages/react-components/src/index.js | 3 + 4 files changed, 462 insertions(+) create mode 100644 micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/ViewComposer/Readme.md create mode 100644 micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/ViewComposer/index.js create mode 100644 micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/ViewComposer/renderUtils.js diff --git a/micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/ViewComposer/Readme.md b/micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/ViewComposer/Readme.md new file mode 100644 index 00000000000..b4889bd20d6 --- /dev/null +++ b/micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/ViewComposer/Readme.md @@ -0,0 +1,126 @@ +# Intro: + +ViewComposer is basically a replacement of ApplicationDetails component which was a generic component for View Screens. That got very cluttered with custom logic. So to keep the business logic abstract and generic we made this component. + +## High level steps to use: +1. Simply import it from react-components library +2. It expects two things as props -> data,isLoading +3. data contains all the details to show in the view screen with specific format, basically we'll be returning this data object from the hook call. + +### Format of data expected by ViewComposer +Below is an example object: + + + + +4. Basically cards is an array of objects each representing a Card in the View Screen. +5. Each card can have multiple sections with the following types defined: [DATA,DOCUMENTS,WFHISTORY,WFACTIONS,COMPONENT] +6. We can render content based on these types defined. + + +#### Final Summary +1. Import ViewComposer +2. Write hook call that returns data expected by the ViewComposer +3. Pass in the data and isLoading props and Viola! + + + + + diff --git a/micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/ViewComposer/index.js b/micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/ViewComposer/index.js new file mode 100644 index 00000000000..6658a227b31 --- /dev/null +++ b/micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/ViewComposer/index.js @@ -0,0 +1,182 @@ +import React, { Fragment, useState } from "react"; +import Card from "../../atoms/Card"; +import { Loader } from "../../atoms/Loader"; +import { RenderDataSection, RenderDocumentsSection, RenderWfActions, RenderWfHistorySection } from "./renderUtils"; +import HorizontalNav from "../../atoms/HorizontalNav"; +import CardSubHeader from "../../atoms/CardSubHeader"; + +// format of data expected by this component + +// { +// cards:[ +// { +// sections: [ +// { +// type: "DATA", +// sectionHeader: { value: "Section 1", inlineStyles: {} }, +// cardHeader: { value: "Card 2", inlineStyles: {} }, +// values: [ +// { +// key: "key 1", +// value: "value 1", +// }, +// { +// key: "key 2", +// value: "value 2", +// }, +// { +// key: "key 3", +// value: "value 3", +// }, +// ], +// }, +// { +// type: "DATA", +// sectionHeader: { value: "Section 2", inlineStyles: { marginTop: "2rem" } }, +// // cardHeader:{value:"Card 1",inlineStyles:{}}, +// values: [ +// { +// key: "key 1", +// value: "value 1", +// }, +// { +// key: "key 2", +// value: "value 2", +// }, +// { +// key: "key 3", +// value: "value 3", +// }, +// ], +// }, +// { +// type: "DOCUMENTS", +// documents: [ +// { +// title: "WORKS_RELEVANT_DOCUMENTS", +// BS: "Works", +// values: [ +// { +// title: "Proposal document", +// documentType: "PROJECT_PROPOSAL", +// documentUid: "cfed582b-31b0-42e9-985f-fb9bb4543670", +// fileStoreId: "cfed582b-31b0-42e9-985f-fb9bb4543670", +// }, +// { +// title: "Finalised worklist", +// documentType: "FINALIZED_WORKLIST", +// documentUid: "f7543894-d3a1-4263-acb2-58b1383eebec", +// fileStoreId: "f7543894-d3a1-4263-acb2-58b1383eebec", +// }, +// { +// title: "Feasibility analysis", +// documentType: "FEASIBILITY_ANALYSIS", +// documentUid: "c4fb4f5d-a4c3-472e-8991-e05bc2d671f5", +// fileStoreId: "c4fb4f5d-a4c3-472e-8991-e05bc2d671f5", +// }, +// ], +// }, +// ], +// inlineStyles: { +// marginTop: "1rem", +// }, +// }, +// { +// type: "WFHISTORY", +// businessService: "ESTIMATE", +// applicationNo: "ES/2023-24/000828", +// tenantId: "pg.citya", +// timelineStatusPrefix: "TEST", +// }, +// { +// type: "WFACTIONS", +// forcedActionPrefix: "TEST", +// businessService: "ESTIMATE", +// applicationNo: "ES/2023-24/000828", +// tenantId: "pg.citya", +// applicationDetails: {}, +// url: "/estimate/v1/_update", +// moduleCode: "Estimate", +// editApplicationNumber: undefined, +// }, +// ], +// }, +// ], +// apiResponse:{}, +// additionalDetails:{} +// } + +const renderCardSectionJSX = (section) => { + const { type } = section; + switch (type) { + case "DATA": + return ; + case "DOCUMENTS": + return ; + case "WFHISTORY": + return ; + case "WFACTIONS": + return ; + case "COMPONENT": + const Component = Digit.ComponentRegistryService.getComponent(section.component); + return ( + <> + {section.cardHeader && {section.cardHeader.value}} + + + ); + default: + return null; + } +}; + +//data is the response of the hook call for View Screen +const ViewComposer = ({ isLoading = false, data, ...props }) => { + const { cards } = data; + const [activeNav, setActiveNav] = useState(data?.horizontalNav?.activeByDefault); + + + if (isLoading) return ; + + return ( + <> + {/* This first {} is for rendering cards at the top without navigationKey(out of navbar) */} + {cards + ?.filter((card) => !card?.navigationKey && card?.sections) + ?.map((card, cardIdx) => { + const { sections } = card; + return ( + + {sections?.map((section, sectionIdx) => { + return renderCardSectionJSX(section); + })} + + ); + })} + {/* This second section is for rendering cards that are part of the navBar) */} + + + {cards + ?.filter((card) => card?.navigationKey) + ?.map((card, cardIdx) => { + const { sections } = card; + return ( + + {sections?.map((section, sectionIdx) => { + return renderCardSectionJSX(section); + })} + + ); + })} + + + ); +}; + +export default ViewComposer; diff --git a/micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/ViewComposer/renderUtils.js b/micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/ViewComposer/renderUtils.js new file mode 100644 index 00000000000..78035cfd025 --- /dev/null +++ b/micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/ViewComposer/renderUtils.js @@ -0,0 +1,151 @@ +import React, { Fragment, useState, useEffect } from "react"; +import CardSectionHeader from "../../atoms/CardSectionHeader"; +import { StatusTable, Row } from "../../atoms/StatusTable"; +import CardSubHeader from "../../atoms/CardSubHeader"; +import { useTranslation } from "react-i18next"; +import { PDFSvg } from "../../atoms/svgindex"; +import WorkflowTimeline from "../../atoms/WorkflowTimeline"; +import WorkflowActions from "../../atoms/WorkflowActions"; +import { Link } from "react-router-dom"; + +export const RenderDataSection = ({ section }) => { + const { t } = useTranslation(); + return ( + <> + {section.cardHeader && {section.cardHeader.value}} + + {section.sectionHeader && {section.sectionHeader.value}} + {section.values.map((row, rowIdx) => { + return ( + + + + {row?.value} + + + + ) : row?.isSla ? ( + {row?.value} + ) : ( + row.value + ) + } + last={rowIdx === section.values?.length - 1} + caption={row.caption} + className="border-none" + /* privacy object set to the Row Component */ + privacy={row?.value?.privacy} + rowContainerStyle={{}} + textStyle={{}} + labelStyle={{}} + amountStyle={{}} + /> + ); + })} + + + ); +}; + +export const RenderDocumentsSection = ({ section }) => { + const { documents } = section; + const { t } = useTranslation(); + const [filesArray, setFilesArray] = useState(() => []); + const tenantId = Digit.ULBService.getCurrentTenantId(); + const [pdfFiles, setPdfFiles] = useState({}); + + useEffect(() => { + let acc = []; + documents?.forEach((element, index, array) => { + acc = [...acc, ...(element.values ? element.values : [])]; + }); + setFilesArray(acc?.map((value) => value?.fileStoreId)); + }, [documents]); + + useEffect(() => { + if (filesArray?.length && documents?.[0]?.BS === "BillAmend") { + Digit.UploadServices.Filefetch(filesArray, Digit.ULBService.getCurrentTenantId()).then((res) => { + setPdfFiles(res?.data); + }); + } else if (filesArray?.length) { + Digit.UploadServices.Filefetch(filesArray, Digit.ULBService.getCurrentTenantId()).then((res) => { + setPdfFiles(res?.data); + }); + } + }, [filesArray]); + + return ( +
+ {documents?.map((document, index) => ( + + {document?.title ? {t(document?.title)} : null} +
+ {document?.values && document?.values.length > 0 + ? document?.values?.map((value, index) => ( + +
+ +
+

{t(value?.title)}

+ + )) + : !window.location.href.includes("citizen") && ( +
+

{t("BPA_NO_DOCUMENTS_UPLOADED_LABEL")}

+
+ )} +
+ + ))} +
+ ); +}; + +export const RenderWfHistorySection = ({ section }) => { + const { businessService, applicationNo, tenantId, timelineStatusPrefix = undefined, statusAttribute = undefined } = section; + return ( + + ); +}; + +export const RenderWfActions = ({ section }) => { + const { + forcedActionPrefix = undefined, + businessService, + applicationNo, + tenantId, + applicationDetails, + url, + moduleCode = "Estimate", + editApplicationNumber, + } = section; + + return ( + + ); +}; diff --git a/micro-ui/web/micro-ui-internals/packages/react-components/src/index.js b/micro-ui/web/micro-ui-internals/packages/react-components/src/index.js index 37e39463971..701e930735a 100644 --- a/micro-ui/web/micro-ui-internals/packages/react-components/src/index.js +++ b/micro-ui/web/micro-ui-internals/packages/react-components/src/index.js @@ -288,7 +288,10 @@ import Tutorial from "./hoc/Tutorial/Tutorial"; import { useTourState,TourProvider } from "./hoc/Tutorial/TourProvider"; import Help from "./hoc/Tutorial/Help"; +//View Composer +import ViewComposer from "./hoc/ViewComposer"; export { + ViewComposer, HelpOutlineIcon, Help, Tutorial,