alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

update address UI

master
Anna Ho 1 year ago
parent
30bdf28ede
commit
790911a76d
7 changed files with 68 additions and 69 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +12
    -12
      src/pages/Organization/DetailPage/OrganizationCard.js
  2. +12
    -12
      src/pages/Organization/DetailPage/OrganizationPubCard.js
  3. +11
    -11
      src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js
  4. +9
    -9
      src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js
  5. +13
    -15
      src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js
  6. +9
    -9
      src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js
  7. +2
    -1
      src/utils/FieldUtils.js

+ 12
- 12
src/pages/Organization/DetailPage/OrganizationCard.js View File

@@ -289,7 +289,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
</Typography> </Typography>
</FormHelperText> </FormHelperText>
</Grid> </Grid>
<Grid item lg={4} >
<Grid item xs={12} lg={4} >
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: FieldUtils.notNullFieldLabel("BR No.:"), label: FieldUtils.notNullFieldLabel("BR No.:"),
valueName: "brNo", valueName: "brNo",
@@ -298,7 +298,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4} >
<Grid item xs={12} lg={4} >
<FormControlLabel <FormControlLabel
control={<Checkbox checked={formik.values.creditor} />} control={<Checkbox checked={formik.values.creditor} />}
label="is Credit Client" label="is Credit Client"
@@ -311,9 +311,9 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
/> />
</Grid> </Grid>


<Grid item lg={4} ></Grid>
<Grid item xs={12} lg={4} ></Grid>


<Grid item lg={4} >
<Grid item xs={12} lg={4} >
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: FieldUtils.notNullFieldLabel("Name (Eng):"), label: FieldUtils.notNullFieldLabel("Name (Eng):"),
valueName: "enCompanyName", valueName: "enCompanyName",
@@ -322,7 +322,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4} >
<Grid item xs={12} lg={4} >
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: "Name (Ch):", label: "Name (Ch):",
valueName: "chCompanyName", valueName: "chCompanyName",
@@ -331,7 +331,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4} >
<Grid item xs={12} lg={4} >
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}> <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="pnspsFormParagraphBold">{FieldUtils.notNullFieldLabel("Expiry Date:")}</Typography> <Typography variant="pnspsFormParagraphBold">{FieldUtils.notNullFieldLabel("Expiry Date:")}</Typography>
@@ -357,7 +357,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
</Grid> </Grid>


<Grid item lg={4} >
<Grid item xs={12} lg={4} >
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: FieldUtils.notNullFieldLabel("Contact Person:"), label: FieldUtils.notNullFieldLabel("Contact Person:"),
valueName: "contactPerson", valueName: "contactPerson",
@@ -366,7 +366,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4} >
<Grid item xs={12} lg={4} >
{FieldUtils.getPhoneField({ {FieldUtils.getPhoneField({
label: FieldUtils.notNullFieldLabel("Contact Tel:"), label: FieldUtils.notNullFieldLabel("Contact Tel:"),
valueName: { valueName: {
@@ -378,7 +378,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4} >
<Grid item xs={12} lg={4} >
{FieldUtils.getPhoneField({ {FieldUtils.getPhoneField({
label: "Fax No:", label: "Fax No:",
valueName: { valueName: {
@@ -390,7 +390,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4} >
<Grid item xs={12} lg={4} >
{FieldUtils.getComboField({ {FieldUtils.getComboField({
label: FieldUtils.notNullFieldLabel("Country:"), label: FieldUtils.notNullFieldLabel("Country:"),
valueName: "country", valueName: "country",
@@ -401,7 +401,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4} >
<Grid item xs={12} lg={4} >
{FieldUtils.getComboField({ {FieldUtils.getComboField({
label: FieldUtils.notNullFieldLabel("District:"), label: FieldUtils.notNullFieldLabel("District:"),
valueName: "district", valueName: "district",
@@ -413,7 +413,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
</Grid> </Grid>




<Grid item lg={4} >
<Grid item xs={12} lg={12} >
{FieldUtils.getAddressField({ {FieldUtils.getAddressField({
label: FieldUtils.notNullFieldLabel("Address:"), label: FieldUtils.notNullFieldLabel("Address:"),
valueName: ["addressLine1", "addressLine2", "addressLine3"], valueName: ["addressLine1", "addressLine2", "addressLine3"],


+ 12
- 12
src/pages/Organization/DetailPage/OrganizationPubCard.js View File

@@ -214,7 +214,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
</Typography> </Typography>
</FormHelperText> </FormHelperText>
</Grid> </Grid>
<Grid item lg={4} >
<Grid item xs={12} lg={4} >
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: intl.formatMessage({id: 'brNo'}) + ":", label: intl.formatMessage({id: 'brNo'}) + ":",
valueName: "brNo", valueName: "brNo",
@@ -222,7 +222,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
form: formik form: formik
})} })}
</Grid> </Grid>
<Grid item lg={4} >
<Grid item xs={12} lg={4} >
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: intl.formatMessage({id: 'creditorAccount'}) + ":", label: intl.formatMessage({id: 'creditorAccount'}) + ":",
valueName: "creditor", valueName: "creditor",
@@ -232,9 +232,9 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
</Grid> </Grid>


<Grid item lg={4} ></Grid>
<Grid item xs={12} lg={4} ></Grid>


<Grid item lg={4} >
<Grid item xs={12} lg={4} >
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'nameEng'}) + ":"), label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'nameEng'}) + ":"),
valueName: "enCompanyName", valueName: "enCompanyName",
@@ -243,7 +243,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4} >
<Grid item xs={12} lg={4} >
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: intl.formatMessage({id: 'nameChi'}) + ":", label: intl.formatMessage({id: 'nameChi'}) + ":",
valueName: "chCompanyName", valueName: "chCompanyName",
@@ -252,7 +252,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4} >
<Grid item xs={12} lg={4} >
{FieldUtils.getDateField({ {FieldUtils.getDateField({
label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'expiryDate'}) + ":"), label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'expiryDate'}) + ":"),
valueName: "brExpiryDate", valueName: "brExpiryDate",
@@ -261,7 +261,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4} >
<Grid item xs={12} lg={4} >
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'contactPerson'}) + ":"), label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'contactPerson'}) + ":"),
valueName: "contactPerson", valueName: "contactPerson",
@@ -270,7 +270,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4} >
<Grid item xs={12} lg={4} >
{FieldUtils.getPhoneField({ {FieldUtils.getPhoneField({
label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'userContactNumber'}) + ":"), label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'userContactNumber'}) + ":"),
valueName: { valueName: {
@@ -282,7 +282,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4} >
<Grid item xs={12} lg={4} >
{FieldUtils.getPhoneField({ {FieldUtils.getPhoneField({
label: intl.formatMessage({id: 'contactFaxNumber'}) + ":", label: intl.formatMessage({id: 'contactFaxNumber'}) + ":",
valueName: { valueName: {
@@ -294,7 +294,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4} >
<Grid item xs={12} lg={4} >
{FieldUtils.getComboField({ {FieldUtils.getComboField({
label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'country'}) + ":"), label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'country'}) + ":"),
valueName: "country", valueName: "country",
@@ -305,7 +305,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4} >
<Grid item xs={12} lg={4} >
{FieldUtils.getComboField({ {FieldUtils.getComboField({
label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'district'}) + ":"), label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'district'}) + ":"),
valueName: "district", valueName: "district",
@@ -317,7 +317,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
</Grid> </Grid>




<Grid item lg={4} >
<Grid item xs={12} lg={12} >
{FieldUtils.getAddressField({ {FieldUtils.getAddressField({
label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'formAddress'}) + ":"), label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'formAddress'}) + ":"),
valueName: ["addressLine1", "addressLine2", "addressLine3"], valueName: ["addressLine1", "addressLine2", "addressLine3"],


+ 11
- 11
src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js View File

@@ -175,7 +175,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
</FormHelperText> </FormHelperText>
</Grid> </Grid>


<Grid item lg={4}>
<Grid item xs={12} lg={4}>
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: "BR No.:", label: "BR No.:",
valueName: "brNo", valueName: "brNo",
@@ -183,9 +183,9 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
})} })}
</Grid> </Grid>


<Grid item lg={8}></Grid>
<Grid item xs={12} lg={8}></Grid>


<Grid item lg={4}>
<Grid item xs={12} lg={4}>
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: FieldUtils.notNullFieldLabel("Name (Eng):"), label: FieldUtils.notNullFieldLabel("Name (Eng):"),
valueName: "enCompanyName", valueName: "enCompanyName",
@@ -193,7 +193,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4}>
<Grid item xs={12} lg={4}>
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: "Name (Ch):", label: "Name (Ch):",
valueName: "chCompanyName", valueName: "chCompanyName",
@@ -201,7 +201,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4} >
<Grid item xs={12} lg={4} >
<Grid container alignItems={"center"}> <Grid container alignItems={"center"}>
<Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}> <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="pnspsFormParagraphBold">{FieldUtils.notNullFieldLabel("Expiry Date:")}</Typography> <Typography variant="pnspsFormParagraphBold">{FieldUtils.notNullFieldLabel("Expiry Date:")}</Typography>
@@ -226,7 +226,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {


</Grid> </Grid>


<Grid item lg={4}>
<Grid item xs={12} lg={4}>
{FieldUtils.getTextField({ {FieldUtils.getTextField({
label: FieldUtils.notNullFieldLabel("Contact Person:"), label: FieldUtils.notNullFieldLabel("Contact Person:"),
valueName: "contactPerson", valueName: "contactPerson",
@@ -234,7 +234,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4}>
<Grid item xs={12} lg={4}>
{FieldUtils.getPhoneField({ {FieldUtils.getPhoneField({
label: FieldUtils.notNullFieldLabel("Contact Tel:"), label: FieldUtils.notNullFieldLabel("Contact Tel:"),
valueName: { valueName: {
@@ -245,7 +245,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4}>
<Grid item xs={12} lg={4}>
{FieldUtils.getPhoneField({ {FieldUtils.getPhoneField({
label: "Fax No:", label: "Fax No:",
valueName: { valueName: {
@@ -256,7 +256,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4}>
<Grid item xs={12} lg={4}>
{FieldUtils.getComboField({ {FieldUtils.getComboField({
label: FieldUtils.notNullFieldLabel("Country:"), label: FieldUtils.notNullFieldLabel("Country:"),
valueName: "country", valueName: "country",
@@ -266,7 +266,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4}>
<Grid item xs={12} lg={4}>
{FieldUtils.getComboField({ {FieldUtils.getComboField({
label: FieldUtils.notNullFieldLabel("District:"), label: FieldUtils.notNullFieldLabel("District:"),
valueName: "district", valueName: "district",
@@ -276,7 +276,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
})} })}
</Grid> </Grid>


<Grid item lg={4}>
<Grid item xs={12}>
{FieldUtils.getAddressField({ {FieldUtils.getAddressField({
label: FieldUtils.notNullFieldLabel("Address:"), label: FieldUtils.notNullFieldLabel("Address:"),
valueName: ["addressLine1", "addressLine2", "addressLine3"], valueName: ["addressLine1", "addressLine2", "addressLine3"],


+ 9
- 9
src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js View File

@@ -494,15 +494,6 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
</Grid> </Grid>
</Grid> </Grid>


<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getAddressField({
label: "Address:",
valueName: ["addressLine1", "addressLine2", "addressLine3"],
disabled: (!editMode),
form: formik
})}
</Grid>

<Grid item xs={12} sm={12} md={12} lg={4}> <Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getComboField({ {FieldUtils.getComboField({
label: "District:", label: "District:",
@@ -524,6 +515,15 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
form: formik form: formik
})} })}
</Grid> </Grid>

<Grid item xs={12} sm={12} md={12} lg={12}>
{FieldUtils.getAddressField({
label: "Address:",
valueName: ["addressLine1", "addressLine2", "addressLine3"],
disabled: (!editMode),
form: formik
})}
</Grid>
</Grid> </Grid>
</Grid> </Grid>
</form> </form>


+ 13
- 15
src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js View File

@@ -216,7 +216,7 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
</Grid> </Grid>


<Grid xs={12} sm={12} md={12} lg={4}> <Grid xs={12} sm={12} md={12} lg={4}>
<Grid container alignItems={"center"} sx={{mb:2}}>
<Grid container alignItems={"center"} sx={{mb:2}} >
<Grid item xs={12} sm={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}> <Grid item xs={12} sm={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant="pnspsFormParagraphBold"> <Typography variant="pnspsFormParagraphBold">
<FormattedMessage id="idNo" />: <FormattedMessage id="idNo" />:
@@ -244,11 +244,11 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
})} })}


</Grid> </Grid>
<Grid item xs={2} sm={2} md={2} lg={2}>
<Grid item xs={2} sm={2} md={2} lg={2} style={{minWidth:50}}>
{FieldUtils.initField({ {FieldUtils.initField({
valueName: "checkDigit", valueName: "checkDigit",
disabled: true, disabled: true,
form: formik
form: formik,
})} })}
</Grid> </Grid>
</> : </> :
@@ -308,18 +308,6 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
form: formik form: formik
})} })}
</Grid> </Grid>



<Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getAddressField({
label: intl.formatMessage({id: 'userAddress'}) + ":",
valueName: ["addressLine1", "addressLine2", "addressLine3"],
disabled: (!editMode),
form: formik
})}
</Grid>

<Grid item xs={12} sm={12} md={12} lg={4}> <Grid item xs={12} sm={12} md={12} lg={4}>
{FieldUtils.getComboField({ {FieldUtils.getComboField({
label: intl.formatMessage({id: 'district'}) + ":", label: intl.formatMessage({id: 'district'}) + ":",
@@ -341,6 +329,16 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
form: formik form: formik
})} })}
</Grid> </Grid>

<Grid item xs={12} sm={12} md={12} lg={12}>
{FieldUtils.getAddressField({
label: intl.formatMessage({id: 'userAddress'}) + ":",
valueName: ["addressLine1", "addressLine2", "addressLine3"],
disabled: (!editMode),
form: formik
})}
</Grid>

</Grid> </Grid>
</Grid> </Grid>
</form> </form>


+ 9
- 9
src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js View File

@@ -553,15 +553,6 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
})} })}
</Grid> </Grid>


<Grid item lg={4}>
{FieldUtils.getAddressField({
label: "Address:",
valueName: ["addressLine1", "addressLine2", "addressLine3"],
disabled: true,
form: formik
})}
</Grid>

<Grid item lg={4}> <Grid item lg={4}>
{FieldUtils.getComboField({ {FieldUtils.getComboField({
label: "District:", label: "District:",
@@ -572,6 +563,15 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
form: formik form: formik
})} })}
</Grid> </Grid>
<Grid item lg={12}>
{FieldUtils.getAddressField({
label: "Address:",
valueName: ["addressLine1", "addressLine2", "addressLine3"],
disabled: true,
form: formik
})}
</Grid>

</Grid> </Grid>
</div> </div>
<br /> <br />


+ 2
- 1
src/utils/FieldUtils.js View File

@@ -89,6 +89,7 @@ export const getPhoneField = ({ label, valueName, form, disabled }) => {
form: form, form: form,
disabled: disabled, disabled: disabled,
width: '35%', width: '35%',
style:{minWidth: 80,},
handleChange: (event) => { handleChange: (event) => {
const value = event.target.value; const value = event.target.value;
const name = event.target.name; const name = event.target.name;
@@ -122,7 +123,7 @@ export const getPhoneField = ({ label, valueName, form, disabled }) => {


export const getAddressField = ({ label, valueName, form, disabled }) => { export const getAddressField = ({ label, valueName, form, disabled }) => {
return <Grid container alignItems={"top"}> return <Grid container alignItems={"top"}>
<Grid item xs={12} md={3} lg={3} mt={1} sx={{ display: 'flex', alignItems: 'top' }}>
<Grid item xs={12} md={3} lg={1} mt={1} sx={{ display: 'flex', alignItems: 'top' }}>
<Grid item lg={12} sx={{ alignItems: 'center' }}> <Grid item lg={12} sx={{ alignItems: 'center' }}>
<Typography variant="pnspsFormParagraphBold">{label}</Typography> <Typography variant="pnspsFormParagraphBold">{label}</Typography>
</Grid> </Grid>


Write Preview
Loading…
Cancel
Save