fix bug 1807 v2

src/_components/Auth/InputDate/index.js

@@ -40,7 +40,7 @@ const InputDate = (props) => {
                 className={classNames(
                     {
                         focus: isFocus,
-                        warning: props.isWarning,
+                        warning:!!props?.errorText || props.isWarning,
                     },
                     `${props.className ? props.className : ""} input_date_base`
                 )}

src/_components/Auth/InputDate/index.scss

@@ -108,6 +108,14 @@ $border-color: #4a4848;
       font-family: "Myriadpro-Regular";
       color: #8e9298;
     }
+
+    &.warning {
+      border-color: $red !important;
+      border-width: 2px !important;
+      border-style: solid !important;
+      padding-left: 23px;
+      padding-right: 23px;
+    }
   }
 }
 

src/_containers/ListCustomer/index.js

@@ -25,7 +25,7 @@ export default function ListCustomer() {
   const getData = async (dataFilter) => {
     setIsLoading(true)
     const endPoint = '/agent/get_customer?' +
-      (!!dataFilter?.keyword ? `keyword=${dataFilter.keyword}&` : '') +
+      (!!dataFilter?.keyword ? `keyword=${encodeURIComponent(dataFilter.keyword)}&` : '') +
       (!!dataFilter?.start_date ? `start_date=${dayjs(dataFilter.start_date).format('YYYY-MM-DD')}&` : '') +
       (!!dataFilter?.end_date ? `end_date=${dayjs(dataFilter.end_date).format('YYYY-MM-DD')}` : '');
     try {
@@ -79,6 +79,20 @@ export default function ListCustomer() {
       }))
       isCanFilter = false;
     }
+    if(!!filter.start_date && !filter.end_date) {
+      setErrFilter(prev => ({
+        ...prev,
+        end_date: 'Ngày kết thúc không được để trống'
+      }))
+      isCanFilter = false;
+    }
+    if(!filter.start_date && !!filter.end_date) {
+      setErrFilter(prev => ({
+        ...prev,
+        start_date: 'Ngày bắt đầu không được để trống'
+      }))
+      isCanFilter = false;
+    }
     if(!!filter.start_date && !!filter.end_date && new Date(filter.start_date).getTime() > new Date(filter.end_date).getTime()) {
       setErrFilter(prev => ({
         ...prev,
@@ -144,6 +158,9 @@ export default function ListCustomer() {
                       renderLabelIcon={renderIconDate}
                       placeholder={"Từ ngày"}
                       maxDate={new Date()}
+                      errorText={errFilter.start_date}
+                      typeErrText='underAbsolute'
+                      errorAbsolute={true}
                     />
                   </div>
                    <div>

src/_containers/ListGrantPage/index.js

@@ -40,12 +40,12 @@ export default function ListGrantPage() {
   const getData = async (dataFilter) => {
     setIsLoading(true)
     const endPoint = '/agent/agent_of_general?' +
-      (!!dataFilter?.keyword ? `keyword=${dataFilter.keyword}&` : '') +
+      (!!dataFilter?.keyword ? `keyword=${encodeURIComponent(dataFilter.keyword)}&` : '') +
       (!!dataFilter?.start_date ? `start_date=${dayjs(dataFilter.start_date).format('YYYY-MM-DD')}&` : '') +
       (!!dataFilter?.end_date ? `end_date=${dayjs(dataFilter.end_date).format('YYYY-MM-DD')}&` : '') +
       (!!dataFilter?.grant ? `grant=${dataFilter.grant?.value}&` : '') +
-      (!!dataFilter?.up_grant ? `up_grant=${dataFilter.up_grant}` : '') +
-      (!!dataFilter?.agents_code ? `agents_code=${dataFilter.agents_code}` : '');
+      (!!dataFilter?.up_grant ? `up_grant=${encodeURIComponent(dataFilter.up_grant)}` : '') +
+      (!!dataFilter?.agents_code ? `agents_code=${encodeURIComponent(dataFilter.agents_code)}` : '');
 
     try {
       const res = await apiCaller(endPoint, 'GET', {}, null, false, configConstants.API_URL_SETEST, true, true)
@@ -115,6 +115,20 @@ export default function ListGrantPage() {
       }))
       isCanFilter = false
     }
+    if(!!filter.start_date && !filter.end_date) {
+      setErrFilter(prev => ({
+        ...prev,
+        end_date: 'Ngày kết thúc không được để trống'
+      }))
+      isCanFilter = false;
+    }
+    if(!filter.start_date && !!filter.end_date) {
+      setErrFilter(prev => ({
+        ...prev,
+        start_date: 'Ngày bắt đầu không được để trống'
+      }))
+      isCanFilter = false;
+    }
     if(!!filter.start_date && !!filter.end_date && new Date(filter.start_date).getTime() > new Date(filter.end_date).getTime()) {
       setErrFilter(prev => ({
         ...prev,
@@ -229,17 +243,17 @@ export default function ListGrantPage() {
                   </div>
                 </div>
                 <div className="filter-form-row-second">
+                  <InputRadio
+                    classNameContainer='input-container'
+                    className='input-base-filter'
+                    options={listLevel}
+                    value={filter.grant}
+                    setValue={(option) => changeFilter('grant', option)}
+                    name="grant"
+                    renderLabelIcon={renderIconLevel}
+                    placeholder={"Chọn cấp đại lý"}
+                  />
                   <div className="date-filter-form">
-                    <InputRadio
-                      classNameContainer='input-container'
-                      className='input-base-filter'
-                      options={listLevel}
-                      value={filter.grant}
-                      setValue={(option) => changeFilter('grant', option)}
-                      name="grant"
-                      renderLabelIcon={renderIconLevel}
-                      placeholder={"Chọn cấp đại lý"}
-                    />
                     <div style={{flex: 1}}>
                       <InputDate
                         classNameContainer='input-container'
@@ -250,6 +264,9 @@ export default function ListGrantPage() {
                         renderLabelIcon={renderIconDate}
                         placeholder={"Từ ngày"}
                         maxDate={new Date()}
+                        errorText={errFilter.start_date}
+                        typeErrText='underAbsolute'
+                        errorAbsolute={true}
                       />
                     </div>
                      <div style={{flex: 1}}>