...
6. pattern: pattern for the field.
phoneNumber configuration:
mihyLoginPhonenumber: {
uiFramework: "custom-molecules",
componentPath: "TextfieldWithIcon",
props: {
label: "Phone",
type:"mobilenumber",
margin: "normal",
fullWidth: true,
autoFocus: true,
required: true,
iconObj: {
position: "end",
iconName: "phone"
}
},
required: true,
jsonPath: "body.mihy.phonenumber",
pattern: "^([0-9]){10}$",
}
Atoms:
1)AppBar:
mihyappBar: {
uiFramework: "custom-atoms",
componentPath: "AppBar",
props: {
position: "static"
},
children: {
mihyToolbar: {
uiFramework: "custom-atoms",
componentPath: "Toolbar",
props: {
variant: "regular",
style: {
width: "maxContent"
},
},
children: {
mihyButton: {
uiFrameWork: "custom-atoms",
componentPath: "Button",
props: {
},
children: {
mihyIcon: {
uiFramework: "custom-atoms",
componentPath: "Icon",
props: {
iconName: "menu",
autoFocus: true,
}
}
}
},
mihyTypography: {
uiFramework: "custom-atoms",
componentPath: "Typegraphy",
children: { mihyLoginButtonText: getLabel({ label: "Home" }) },
props: {
variant: "h6",color:"inherit" ,
style: {
fontSize: "large", flexGrow: 1
}
}
},
mihyTypography1: {
uiFramework: "custom-atoms",
componentPath: "Typegraphy",
children: {
mihyButton: {
uiFrameWork: "custom-atoms",
componentPath: "Button",
props: {
},
children: {
mihyIcon: {
uiFramework: "custom-atoms",
componentPath: "Icon",
props: {
iconName: "email",
autoFocus: true,
}
}
}
}
},
props: {
variant:"h6",
color:"inherit"
}
}
}
}
}
}
2)Button:
Configuration:
mihyLoginButton: {
componentPath: "Button",
props: {
Buttoncolor: "primary" “secondary” “inherit” “default”,
fullWidth: true,
href: “https://www.googole.com”,
size:”small” “medium” “large”,
Variant: “contained” “text” “outlined”,
disabled: “true”
},
children: {
mihyLoginButtonText: getLabel({label:"Let's go"})
},
onClickDefination:{
action:"submit",
method:"get",
endPoint:"afbc.com",
purpose:"authLogin",
redirectionUrl:"/"
}
}
3)Card:
Configuration:
getCommonCard({
name: “card name”,
mihyloginDiv: {
uiFramework: "custom-atoms",
componentPath: "Div",
children: {
className: "text-center",
Props:{
color: “#FFFF”,
justifyContent: “center”,
boxShadow: “ 0 1px 4px 0 rgpa(0,0,0,0.14)”
},
gridDefination:{
xs:12
}
})
CardContent:
Configuration:
children: {
cardContent: {
componentPath: "CardContent",
children
}
}
CardMedia:
Configuration:
<CardMedia className={classes.cover} image={src} title={title} />
4)TextField:
Configuration:
name: {
id: "person-name",
type: "textfield",
jsonPath: "otp.name",
required: true,
floatingLabelText: "NAME",
hintText: "CORE_COMMON_NAME_PLACEHOLDER",
placeholder: “Name”,
disabled: “flase”,
Value: “ “ ,
variant: “outline”
}
5)Typography
Configuration:
mihyLoginHeader: {
componentPath: "Typography",
children: {
mihyLoginHeaderText: getLabel({label:"Login"})
},
props: {
align: "center",
variant: "title",
Style:{
color: "primary"
}
}
}
6)HTML Elements:
Div: Configuration:
div: {
uiFramework: "custom-atoms",
componentPath: "Div",
children: {
selectButton: {
componentPath: "Button",
props: {
variant: "contained",
color: "primary",
className: "hrmsCityPickerButton"
},
children: {
previousButtonLabel: getLabel({
labelName: "SELECT",
labelKey: "HR_CITY_SELECT_LABEL"
})
},
onClickDefination: {
action: "condition",
callBack: createEmployee
}
}
}
}
Form :
Configuration:
div: {
uiFramework: "custom-atoms",
componentPath: "Form",
props: {
className: "common-div-css",
id: "billSearch"
}
children: {
headerDiv: {
uiFramework: "custom-atoms",
componentPath: "Container",
children: {
header: {
gridDefination: {
xs: 12,
sm: 6
},
...header
}
}
}
}
}
Iframe:
Configuration:
iframe: {
componentPath: "Iframe",
props: {
src,},}
7)Icon:
Configuration:
previousButtonIcon: {
uiFramework: "custom-atoms",
componentPath: "Icon",
props: {
iconName: "close"
}
}
submitButtonIcon: {
uiFramework: "custom-atoms",
componentPath: "Icon",
props: {
iconName: "keyboard_arrow_right"
}
}
8)Container
Configuration:
headerDiv: {
uiFramework: "custom-atoms",
componentPath: "Container",
children: {
header: {
gridDefination: {
xs: 12,
sm: 6
},
...header
}}}
9)MenuButton:
Configuration:
downloadMenu: {
uiFramework: "custom-atoms",
componentPath: "MenuButton",
props: {
data: {
label: "Download",
leftIcon: "cloud_download",
rightIcon: "arrow_drop_down",
props: { variant: "outlined", style: { marginLeft: 10 } },
menu: []
}
}
}
9)Item
Configuration:
mihyLoginItem: {
uiFramework: "custom-atoms",
componentPath: "Item",
props: {
sm: 4,
xs: 12
},
Children: {
{
mihyloginDiv: {
uiFramework: "custom-atoms",
componentPath: "Div",
props: {
className: "text-center"
},
children: {
mihyLoginUsername: {
uiFramework: "custom-molecules",
componentPath: "TextfieldWithIcon",
props: {
label: "Email",
margin: "normal",
fullWidth: true,
autoFocus: true,
required: true,
iconObj: {
position: "end",
iconName: "email"
}
},
required: true,
jsonPath: "body.mihy.username",
pattern: "^([a-zA-Z0-9@.])+$"
},
}
}
10)Break:
Configuration:
mihyBreakOne: {
uiFramework: "custom-atoms",
componentPath: "Break"
}
11)UploadFile:
Configuration:
<UploadFile
buttonProps={{
variant: "outlined",
color: "primary",
onClick: onButtonClick
}}
handleFileUpload={handleFileUpload}
inputProps={{ multiple: false, ...inputProps }}
classes={classes}
buttonLabel={buttonLabel}
/>
12)Uploaded Document:
Configuration:
<UploadedDocument
document={document}
removeDocument={removeDocument}
/>
MoleCules:
The above atoms are using inside a molecules
One Molecule is the combination of different atoms
1)TextFieldWithIcon:
Configuration:
mihyLoginUsername: {
uiFramework: "custom-molecules",
componentPath: "TextfieldWithIcon",
props: {
label: "Email",
margin: "normal",
fullWidth: true,
autoFocus: true,
required: true,
iconObj: {
position: "end",
iconName: "email"
}
},
required: true,
jsonPath: "body.mihy.username",
pattern: "^([a-zA-Z0-9@.])+$"
}
2)LandingPage:
Configuration:
applyCard: {
uiFramework: "custom-molecules",
componentPath: "LandingPage",
props: {
items: cardItems,
history: {}
}
}
3)SingleApplication
Configuration:
applicationsCard: {
uiFramework: "custom-molecules",
componentPath: "SingleApplication",
visible: true,
props: {
applicationName: {
label: "TL_COMMON_TABLE_COL_TRD_NAME",
jsonPath: "tradeName"
},
applicationNumber: {
label: "TL_COMMON_TABLE_COL_APP_NO",
jsonPath: "applicationNumber"
},
}
4)DocumentList:
Configuration:
export const getUploadFile = {
uiFramework: "custom-molecules",
componentPath: "DocumentList",
props: {
documents: [
{
name: "Upload Document"
}
]
}
};
5)UploadMultipleFiles:
Configuration:
export const getUploadFilesMultiple =jsonPath=>{
return: {
uiFramework: "custom-molecules",
componentPath: "UploadMultipleFiles",
props: {
maxFiles: 4,
jsonPath: jsonPath,
inputProps: {
accept: "image/*, .pdf, .png, .jpeg"
},
buttonLabel: "UPLOAD FILES",
maxFileSize: 5000,
moduleName: "TL"
}
};
6)Stepper:
Configuration:
stepperData = {
componentPath: "Stepper",
uiFramework: "custom-molecules",
props: {
steps: stepsData,
...stpperProps.props
}
};
7)Search Results:
Configuration:
export const searchResults = {
uiFramework: "custom-molecules",
// moduleName: "egov-tradelicence",
componentPath: "Table",
visible: false,
props: {
columns: [
getTextToLocalMapping("Application No"),
getTextToLocalMapping("License No"),
getTextToLocalMapping("Trade Name"),
getTextToLocalMapping("Owner Name"),
getTextToLocalMapping("Application Date"),
{
name: getTextToLocalMapping("Status"),
options: {
filter: false,
customBodyRender: value => (
<span
style={
value === "APPROVED" ? { color: "green" } : { color: "red" }
}
>
{getTextToLocalMapping(value)}
</span>
)
}
},
{
name: "tenantId",
options: {
display: false
}
}
],
title: getTextToLocalMapping(
"Search Results for Trade License Applications"
),
options: {
filter: false,
download: false,
responsive: "stacked",
selectableRows: false,
hover: true,
rowsPerPageOptions: [10, 15, 20],
onRowClick: (row, index) => {
onRowClick(row);
}
},
customSortColumn: {
column: "Application Date",
sortingFn: (data, i, sortDateOrder) => {
const epochDates = data.reduce((acc, curr) => {
acc.push([...curr, getEpochForDate(curr[4], "dayend")]);
return acc;
}, []);
const order = sortDateOrder === "asc" ? true : false;
const finalData = sortByEpoch(epochDates, !order).map(item => {
item.pop();
return item;
});
return { data: finalData, currentOrder: !order ? "asc" : "desc" };
}
}
}
};
Egov-Trade Licence Atoms:
1)ApplicationNo:
Configuration:
applicationNumber: {
uiFramework: "custom-atoms-local",
moduleName: "egov-tradelicence",
componentPath: "ApplicationNoContainer",
props: {
number: applicationNumber
}
}
2)MenuButton:
Configuration:
downloadMenu: {
uiFramework: "custom-atoms-local",
moduleName: "egov-tradelicence",
componentPath: "MenuButton",
props: {
data: {
label: "Download",
leftIcon: "cloud_download",
rightIcon: "arrow_drop_down",
props: { variant: "outlined", style: { marginLeft: 10 } },
menu: downloadMenu
}
}
}
3)Asteric:
getAsteric = () => {
return {
uiFramework: "custom-atoms-local",
moduleName: "egov-tradelicence",
componentPath: "Asteric"
};
};
Egov-trade licence Containers:
1)Auto Suggest Container:
tradeSubType: {
uiFramework: "custom-containers-local",
moduleName: "egov-tradelicence",
componentPath: "AutosuggestContainer",
jsonPath: "Licenses[0].tradeLicenseDetail.tradeUnits[0].tradeType",
required: true,
gridDefination: {
xs: 12,
sm: 4
},
props: {
style: {
width: "100%",
cursor: "pointer"
},
label: {
labelName: "Trade Sub-Type",
labelKey: "TL_NEW_TRADE_DETAILS_TRADE_SUBTYPE_LABEL"
},
placeholder: {
labelName: "Select Trade Sub-Type",
labelKey: "TL_NEW_TRADE_DETAILS_TRADE_SUBTYPE_PLACEHOLDER"
},
jsonPath:
"Licenses[0].tradeLicenseDetail.tradeUnits[0].tradeType",
sourceJsonPath:
"applyScreenMdmsData.TradeLicense.TradeSubCategoryTransformed",
setDataInField: true,
labelsFromLocalisation: true,
localePrefix: {
moduleName: "TRADELICENSE",
masterName: "TRADETYPE"
},
fullwidth: true,
required: true,
inputLabelProps: {
shrink: true
}
},
2)Dialog Container:
adhocDialog: {
uiFramework: "custom-containers-local",
moduleName: "egov-tradelicence",
componentPath: "DialogContainer",
props: {
open: false,
maxWidth: "sm",
screenKey: "pay"
},
children: {
popup: adhocPopup
}
}
3)DocumentListContainer
export const documentList = {
uiFramework: "custom-containers-local",
moduleName: "egov-tradelicence",
componentPath: "DocumentListContainer",
props: {
buttonLabel: {
labelName: "UPLOAD FILE",
labelKey: "TL_BUTTON_UPLOAD FILE"
},
description: {
labelName: "Only .jpg and .pdf files. 6MB max file size.",
labelKey: "TL_UPLOAD_RESTRICTIONS"
},
inputProps: {
accept: "image/*, .pdf, .png, .jpeg"
},
documentTypePrefix: "TL_",
maxFileSize: 6000
}
};
4)DownloadFileContainer:
Configuration:
documents: {
uiFramework: "custom-containers-local",
moduleName: "egov-tradelicence",
componentPath: "DownloadFileContainer",
props: {
sourceJsonPath: "LicensesTemp[0].reviewDocData",
className: "review-documents"
}
}
}
5)Payment Redirect Page:
Configuration:
div: {
uiFramework: "custom-containers-local",
moduleName: "egov-tradelicence",
componentPath: "PaymentRedirectPage",
props: {
className: "payment-redirect-page"
}
}
6)View Breakup Container:
Configuration:
breakUpDialog: {
uiFramework: "custom-containers-local",
moduleName: "egov-tradelicence",
componentPath: "ViewBreakupContainer",
props: {
open: false,
maxWidth: "md",
screenKey: "apply"
}
}
Common Pay Atoms:
1)ApplicationNoContainer:
Configuration:
consumerCode: {
uiFramework: "custom-atoms-local",
moduleName: "egov-common",
componentPath: "ApplicationNoContainer",
props: {
number: getQueryArg(window.location.href, "consumerCode"),
label: "Consumer Code.:"
}
}