update ui

src/pages/OrganizationDetailPage/OrganizationCard.js

@@ -26,16 +26,16 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
         initialValues: currentUserData,
         validationSchema: yup.object().shape({
             enCompanyName: yup.string().max(255).required('請輸入英文名稱'),
-            chCompanyName: yup.string().max(255).required('請輸入中文姓名'),
+            chCompanyName: yup.string().max(255,'請輸入中文名稱').nullable(),
             addressLine1: yup.string().max(255).required('請輸入第一行地址'),
             addressLine2: yup.string().max(255, "length must <= 255"),
             addressLine3: yup.string().max(255, "length must <= 255"),
-            fax_countryCode: yup.string().min(3).required('請輸入國際區號'),
-            tel_countryCode: yup.string().min(3).required('請輸入國際區號'),
+            fax_countryCode: yup.string().min(3, '請輸入國際區號').nullable(),
+            tel_countryCode: yup.string().min(3, '請輸入國際區號'),
             phoneNumber: yup.string().min(8).required('請輸入聯絡電話'),
-            faxNumber: yup.string().min(8).required('請輸入8位數字'),
+            faxNumber: yup.string().min(8,'請輸入8位數字').nullable(),
             brExpiryDate: yup.string().min(8).required('請輸入商業登記證有效日期'),
-            brNo: yup.string().min(8).required('請輸入商業登記證號碼'),
+            brNo: yup.string().min(8, '請輸入有效商業登記證號碼').max(8,'請輸入有效商業登記證號碼').required('請輸入商業登記證號碼'),
         }),
         onSubmit: vaule => {
             console.log(vaule)
@@ -175,7 +175,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                 <Grid container spacing={1}>
 
                     {FieldUtils.getTextField({
-                        label: "BR No.:",
+                        label: FieldUtils.notNullFieldLabel("BR No.:"),
                         valueName: "brNo",
                         disabled: (!editMode && !createMode),
                         form: formik
@@ -184,7 +184,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                     <Grid item lg={8} ></Grid>
 
                     {FieldUtils.getTextField({
-                        label: "Name (Eng):",
+                        label: FieldUtils.notNullFieldLabel("Name (Eng):"),
                         valueName: "enCompanyName",
                         disabled: (!editMode && !createMode),
                         form: formik
@@ -198,21 +198,21 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                     })}
 
                     {FieldUtils.getDateField({
-                        label: "Expiry Date:",
+                        label: FieldUtils.notNullFieldLabel("Expiry Date:"),
                         valueName: "brExpiryDate",
                         disabled: (!editMode && !createMode),
                         form: formik
                     })}
 
                     {FieldUtils.getTextField({
-                        label: "Contact Person:",
+                        label: FieldUtils.notNullFieldLabel("Contact Person:"),
                         valueName: "contactPerson",
                         disabled: (!editMode && !createMode),
                         form: formik
                     })}
 
                     {FieldUtils.getPhoneField({
-                        label: "Contact Tel:",
+                        label: FieldUtils.notNullFieldLabel("Contact Tel:"),
                         valueName: {
                             code: "tel_countryCode",
                             num: "phoneNumber"
@@ -232,7 +232,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                     })}
 
                     {FieldUtils.getComboField({
-                        label: "Country:",
+                        label: FieldUtils.notNullFieldLabel("Country:"),
                         valueName: "country",
                         disabled: (!editMode && !createMode),
                         dataList: ComboData.country,
@@ -240,7 +240,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                     })}
 
                     {FieldUtils.getComboField({
-                        label: "District:",
+                        label: FieldUtils.notNullFieldLabel("District:"),
                         valueName: "district",
                         disabled: (!editMode && !createMode),
                         dataList: ComboData.district,
@@ -249,7 +249,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
 
 
                     {FieldUtils.getAddressField({
-                        label: "Address:",
+                        label: FieldUtils.notNullFieldLabel("Address:"),
                         valueName: ["addressLine1", "addressLine2", "addressLine3"],
                         disabled: (!editMode && !createMode),
                         form: formik

src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js

@@ -26,17 +26,17 @@ const OrganizationCard_loadFromUser = ({userData,userId}) => {
         enableReinitialize:true,
         initialValues:currentUserData,
         validationSchema:yup.object().shape({
-            enCompanyName: yup.string().max(255,"請輸入英文名稱"),
-            chCompanyName: yup.string().max(255,'請輸入中文名稱'),
+            enCompanyName: yup.string().max(255,"請輸入英文名稱").required('請輸入英文名稱'),
+            chCompanyName: yup.string().max(255,'請輸入中文名稱').nullable(),
             addressLine1: yup.string().max(255).required('請輸入第一行地址'),
-            addressLine2: yup.string().max(255),
-            addressLine3: yup.string().max(255),
-            fax_countryCode: yup.string().min(3,"請輸入國際區號"),
+            addressLine2: yup.string().max(255).nullable(),
+            addressLine3: yup.string().max(255).nullable(),
+            fax_countryCode: yup.string().min(3,"請輸入國際區號").nullable(),
             tel_countryCode: yup.string().min(3,"請輸入國際區號"),
-            phoneNumber: yup.string().min(8).required('請輸入聯絡電話'),
-            faxNumber: yup.string().min(8),
+            phoneNumber: yup.string().min(8, '請輸入有效聯絡電話').required('請輸入聯絡電話'),
+            faxNumber: yup.string().min(8).nullable(),
             brExpiryDate: yup.string().min(8).required('請輸入商業登記證有效日期'),
-            brNo: yup.string().min(8).required('請輸入商業登記證號碼'),
+            brNo: yup.string().min(8, '請輸入有效商業登記證號碼').max(8,'請輸入有效商業登記證號碼').required('請輸入商業登記證號碼'),
         }),
         onSubmit: values =>{
             HttpUtils.post({
@@ -131,7 +131,7 @@ const OrganizationCard_loadFromUser = ({userData,userId}) => {
                     <Grid item lg={8}></Grid>
 
                     {FieldUtils.getTextField({
-                        label:"Name (Eng):",
+                        label:FieldUtils.notNullFieldLabel("Name (Eng):"),
                         valueName:"enCompanyName",
                         form: formik})}
 
@@ -141,17 +141,17 @@ const OrganizationCard_loadFromUser = ({userData,userId}) => {
                         form: formik})}
 
                     {FieldUtils.getDateField({
-                        label:"Expiry Date:",
+                        label:FieldUtils.notNullFieldLabel("Expiry Date:"),
                         valueName:"brExpiryDate",
                         form: formik})}
 
                     {FieldUtils.getTextField({
-                        label:"Contact Person:",
+                        label:FieldUtils.notNullFieldLabel("Contact Person:"),
                         valueName:"contactPerson",
                         form: formik})}
 
                     {FieldUtils.getPhoneField({
-                        label:"Contact Tel:",
+                        label:FieldUtils.notNullFieldLabel("Contact Tel:"),
                         valueName:{
                             code:"tel_countryCode",
                             num:"phoneNumber"
@@ -167,19 +167,19 @@ const OrganizationCard_loadFromUser = ({userData,userId}) => {
                         form: formik})}
 
                      {FieldUtils.getComboField({
-                        label:"Country:",
+                        label:FieldUtils.notNullFieldLabel("Country:"),
                         valueName:"country",
                         dataList: ComboData.country,
                         form: formik})}
 
                     {FieldUtils.getComboField({
-                        label:"District:",
+                        label:FieldUtils.notNullFieldLabel("District:"),
                         valueName:"district",
                         dataList: ComboData.district,
                         form: formik})}
 
                     {FieldUtils.getAddressField({
-                        label:"Address:",
+                        label:FieldUtils.notNullFieldLabel("Address:"),
                         valueName:["addressLine1","addressLine2","addressLine3"],
                         form: formik})}
                     </Grid>

src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js

@@ -32,18 +32,18 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
         initialValues: currentUserData,
         validationSchema: yup.object().shape({
             contactPerson: yup.string().max(255).required('請輸入姓名'),
-            enCompanyName: yup.string().max(255),
-            chCompanyName: yup.string().max(255),
+            enCompanyName: yup.string().max(255).required('請輸入英文名稱'),
+            chCompanyName: yup.string().max(255).nullable(),
             addressLine1: yup.string().max(255).required('請輸入第一行地址'),
-            addressLine2: yup.string().max(255),
-            addressLine3: yup.string().max(255),
+            addressLine2: yup.string().max(255).nullable(),
+            addressLine3: yup.string().max(255).nullable(),
             emailBus: yup.string().max(255).required('請輸入電郵'),
             tel_countryCode: yup.string().min(3, '請輸入3位數字').required('請輸入國際區號'),
-            fax_countryCode: yup.string().min(3, '請輸入3位數字'),
+            fax_countryCode: yup.string().min(3, '請輸入3位數字').nullable(),
             phoneNumber: yup.string().min(8, '請輸入8位數字').required('請輸入聯絡電話'),
-            faxNumber: yup.string().min(8, '請輸入8位數字'),
+            faxNumber: yup.string().min(8, '請輸入8位數字').nullable(),
             brExpiryDate: yup.string().min(8, '請輸入商業登記證有效日期'),
-            brNo: yup.string().min(8, '請輸入商業登記證號碼'),
+            brNo: yup.string().min(8, '請輸入有效商業登記證號碼').max(8,'請輸入有效商業登記證號碼').required('請輸入商業登記證號碼'),
         }),
         onSubmit: (values) => {
             HttpUtils.post({

src/utils/FieldUtils.js

@@ -5,6 +5,10 @@ import {
 
 import Combo from "./Combo";
 
+export const notNullFieldLabel=(label)=>{
+    return (<>{label}<span style={{"color": "red"}}>*</span></>)
+}
+
 export const getDateField = ({ label, valueName, form, disabled }) => {
     return <Grid item lg={4} >
         <Grid container alignItems={"center"}>