From 477fb495b408522defc19a3fb989f44406405330 Mon Sep 17 00:00:00 2001
From: HOANGLAOTA <hoangmt0502@gmail.com>
Date: Thu, 18 Jul 2024 14:51:30 +0700
Subject: [PATCH] fix bug 1807 v2

---
 src/_components/Auth/InputDate/index.js   |  2 +-
 src/_components/Auth/InputDate/index.scss |  8 +++++
 src/_containers/ListCustomer/index.js     | 19 +++++++++-
 src/_containers/ListGrantPage/index.js    | 43 ++++++++++++++++-------
 4 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/src/_components/Auth/InputDate/index.js b/src/_components/Auth/InputDate/index.js
index be5b7cb..d6c7b72 100644
--- a/src/_components/Auth/InputDate/index.js
+++ b/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`
                 )}
diff --git a/src/_components/Auth/InputDate/index.scss b/src/_components/Auth/InputDate/index.scss
index ff3b87a..f23a924 100644
--- a/src/_components/Auth/InputDate/index.scss
+++ b/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;
+    }
   }
 }
 
diff --git a/src/_containers/ListCustomer/index.js b/src/_containers/ListCustomer/index.js
index 1e73b6e..1cacd80 100644
--- a/src/_containers/ListCustomer/index.js
+++ b/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>
diff --git a/src/_containers/ListGrantPage/index.js b/src/_containers/ListGrantPage/index.js
index 6326195..b945d16 100644
--- a/src/_containers/ListGrantPage/index.js
+++ b/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}}>