diff --git a/src/_components/Auth/InputDate/index.js b/src/_components/Auth/InputDate/index.js index af4f344..be5b7cb 100644 --- a/src/_components/Auth/InputDate/index.js +++ b/src/_components/Auth/InputDate/index.js @@ -24,9 +24,15 @@ const InputDate = (props) => { return (
- {props.errorText ? ( -
- {props.errorText} + {props.errorText && props?.typeErrText != "underAbsolute" ? ( +
+ {props.errorText}
) : null}
{ }, }, ]} + disabledKeyboardNavigation onKeyDown={(e) => { e.preventDefault(); }} + onBeforeInput={(e) => { + e.preventDefault(); + }} + onFocus={e => e.target.blur()} />
+ {/* Err Text Under */} + {props.errorText && props?.typeErrText == "underAbsolute" ? ( +
+ {props.errorText} +
+ ) : null}
); }; diff --git a/src/_components/Auth/InputDate/index.scss b/src/_components/Auth/InputDate/index.scss index 1a786d8..ff3b87a 100644 --- a/src/_components/Auth/InputDate/index.scss +++ b/src/_components/Auth/InputDate/index.scss @@ -9,7 +9,11 @@ $border-color: #4a4848; .error_input { span { color: $red; - font-size: 18px; + font-size: 16px; + + @include screen_mobile { + font-size: 12px + } } } @@ -22,6 +26,11 @@ $border-color: #4a4848; bottom: calc(100% + 2px); } + .error_text_absolute_new { + position: absolute; + top: calc(100% + 2px); + } + .input_date_base { display: flex; align-items: center; @@ -100,4 +109,8 @@ $border-color: #4a4848; color: #8e9298; } } +} + +.input_date_base_container:has(.error_text_absolute_new) .input_date_base { + margin-bottom: 38px; } \ No newline at end of file diff --git a/src/_components/Auth/InputText/index.scss b/src/_components/Auth/InputText/index.scss index 281c161..822da30 100644 --- a/src/_components/Auth/InputText/index.scss +++ b/src/_components/Auth/InputText/index.scss @@ -10,6 +10,10 @@ $border-color: #4a4848; span { color: $red; font-size: 16px; + + @include screen_mobile { + font-size: 12px + } } } diff --git a/src/_components/Header/HeaderMain/HeaderMain.style.scss b/src/_components/Header/HeaderMain/HeaderMain.style.scss index d01a9d6..45498f4 100644 --- a/src/_components/Header/HeaderMain/HeaderMain.style.scss +++ b/src/_components/Header/HeaderMain/HeaderMain.style.scss @@ -37,7 +37,7 @@ .header-item { font-size: 18px; text-transform: uppercase; - text-wrap: nowrap; + white-space: nowrap; } .header-item.header-item-selected { diff --git a/src/_containers/HomePage/HomePage.style.scss b/src/_containers/HomePage/HomePage.style.scss index 841ddce..682ff5a 100644 --- a/src/_containers/HomePage/HomePage.style.scss +++ b/src/_containers/HomePage/HomePage.style.scss @@ -63,6 +63,10 @@ .info-agency-item { display: flex; gap: 8px; + + span { + // text-decoration: underline; + } } } diff --git a/src/_containers/ListCustomer/ListCustomer.style.scss b/src/_containers/ListCustomer/ListCustomer.style.scss index 91747e3..1fb10f3 100644 --- a/src/_containers/ListCustomer/ListCustomer.style.scss +++ b/src/_containers/ListCustomer/ListCustomer.style.scss @@ -154,9 +154,15 @@ span { flex: 1; text-align: justify; + white-space: pre-line; + word-break: break-word; } } } } } +} + +.input_date_base_container:has(.error_text_absolute_new) .input_date_base { + margin-bottom: 56px; } \ No newline at end of file diff --git a/src/_containers/ListCustomer/index.js b/src/_containers/ListCustomer/index.js index 0a3e4c2..1e73b6e 100644 --- a/src/_containers/ListCustomer/index.js +++ b/src/_containers/ListCustomer/index.js @@ -51,7 +51,7 @@ export default function ListCustomer() { } const validateFilter = () => { - return !!filter.keyword || !!filter.start_date || !!filter.end_date + return !!filter.keyword.trim() || !!filter.start_date || !!filter.end_date } const handleCancelFilter = () => { @@ -68,15 +68,25 @@ export default function ListCustomer() { setIsFilter(false) getData(iniFilter) } - + const handleFilter = () => { - if(!!filter.keyword && filter.keyword.length < 3) { + if(!validateFilter()) return; + let isCanFilter = true + if(!!filter.keyword.trim() && filter.keyword.trim().length < 3) { setErrFilter(prev => ({ ...prev, keyword: 'Nhập tối thiểu 3 kí tự' })) - return; + isCanFilter = false; + } + if(!!filter.start_date && !!filter.end_date && new Date(filter.start_date).getTime() > new Date(filter.end_date).getTime()) { + setErrFilter(prev => ({ + ...prev, + end_date: 'Ngày kết thúc không được nhỏ hơn ngày bắt đầu' + })) + isCanFilter = false; } + if(!isCanFilter) return; setIsFilter(true) getData(filter) } @@ -114,34 +124,43 @@ export default function ListCustomer() { type="text" name="keyword" placeholder="Nhập tên / số điện thoại / email" - autoFocus={true} renderLabelIcon={renderIconKeyWord} errorText={errFilter.keyword} typeErrText='underAbsolute' errorAbsolute={true} + onKeyDown={(e) => { + if(e?.which === 13) handleFilter() + }} />
- changeFilter('start_date', date)} - name="start_date" - renderLabelIcon={renderIconDate} - placeholder={"Từ ngày"} - maxDate={new Date()} - /> - changeFilter('end_date', date)} - name="end_date" - renderLabelIcon={renderIconDate} - placeholder={"Đến ngày"} - maxDate={new Date()} - /> +
+ changeFilter('start_date', date)} + name="start_date" + renderLabelIcon={renderIconDate} + placeholder={"Từ ngày"} + maxDate={new Date()} + /> +
+
+ changeFilter('end_date', date)} + name="end_date" + renderLabelIcon={renderIconDate} + placeholder={"Đến ngày"} + maxDate={new Date()} + errorText={errFilter.end_date} + typeErrText='underAbsolute' + errorAbsolute={true} + /> +
@@ -157,7 +176,7 @@ export default function ListCustomer() {
- {!!listCustomer.length &&

{`Tổng số khách hàng: ${listCustomer.length}`}

} + {!!listCustomer.length &&

{`Danh sách khách hàng: ${listCustomer.length}`}

}
{listCustomer?.map(item => (
@@ -167,10 +186,10 @@ export default function ListCustomer() { {item?.phone}
-
+ {!!item?.email &&
{item?.email} -
+
}
@@ -182,7 +201,7 @@ export default function ListCustomer() { {`Lớp ${item?.grade}`}
}
- {item?.message &&
+ {!!item?.message &&
{item?.message} diff --git a/src/_containers/ListGrantPage/ListGrantPage.style.scss b/src/_containers/ListGrantPage/ListGrantPage.style.scss index 2fe70ac..33fe2f9 100644 --- a/src/_containers/ListGrantPage/ListGrantPage.style.scss +++ b/src/_containers/ListGrantPage/ListGrantPage.style.scss @@ -55,10 +55,6 @@ @include screen_mobile { gap: 16px; } - - .input_date_base { - margin-bottom: 0; - } } .input-container { @@ -72,7 +68,6 @@ .filter-action { display: flex; - align-items: center; justify-content: flex-end; gap: 24px; @@ -109,10 +104,10 @@ .filter-form-row-second { display: flex; gap: 24px; - align-items: center; @include screen_mobile { flex-direction: column; + gap: 0; } } } @@ -184,11 +179,17 @@ } span { - flex: 1; + // flex: 1; text-align: justify; + white-space: pre-line; + word-break: break-word; } } } } } +} + +.input_date_base_container:has(.error_text_absolute_new) .input_date_base { + margin-bottom: 56px; } \ No newline at end of file diff --git a/src/_containers/ListGrantPage/index.js b/src/_containers/ListGrantPage/index.js index 48838a2..6326195 100644 --- a/src/_containers/ListGrantPage/index.js +++ b/src/_containers/ListGrantPage/index.js @@ -13,7 +13,9 @@ export default function ListGrantPage() { const authentication = useSelector((state) => state.authentication); const [listLevel] = useState(Array(authentication?.role === 'agents' ? 2 : 9).fill(0).map((_, i) => ({ title: `Cấp ${i + 1}`, - value: (i + 1).toString(), + value: authentication?.role === 'agents' && Number(authentication?.grant) >= 0 + ? (Number(authentication?.grant) + (i + 1)).toString() + : (i + 1).toString(), }))) const [filter, setFilter] = useState({ keyword: '', @@ -21,6 +23,7 @@ export default function ListGrantPage() { grant: null, start_date: '', end_date: '', + agents_code: '' }) const [errFilter, setErrFilter] = useState({ keyword: '', @@ -28,6 +31,7 @@ export default function ListGrantPage() { grant: null, start_date: '', end_date: '', + agents_code: '' }) const [listGrant, setListGrant] = useState([]) const [isLoading, setIsLoading] = useState(false) @@ -40,7 +44,8 @@ export default function ListGrantPage() { (!!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?.up_grant ? `up_grant=${dataFilter.up_grant}` : '') + + (!!dataFilter?.agents_code ? `agents_code=${dataFilter.agents_code}` : ''); try { const res = await apiCaller(endPoint, 'GET', {}, null, false, configConstants.API_URL_SETEST, true, true) @@ -65,7 +70,7 @@ export default function ListGrantPage() { } const validateFilter = () => { - return Object.values(filter).some(item => !!item) + return Object.values(filter).some(item => typeof item === 'object' ? !!item : !!item?.trim()) } const handleCancelFilter = () => { @@ -75,6 +80,7 @@ export default function ListGrantPage() { grant: null, start_date: '', end_date: '', + agents_code: '' } setErrFilter(iniFilter) setFilter(iniFilter) @@ -86,20 +92,38 @@ export default function ListGrantPage() { } const handleFilter = () => { - if(!!filter.keyword && filter.keyword.length < 3) { + if(!validateFilter()) return; + let isCanFilter = true; + if(!!filter.keyword.trim() && filter.keyword.trim().length < 3) { setErrFilter(prev => ({ ...prev, keyword: 'Nhập tối thiểu 3 kí tự' })) - return; + isCanFilter = false } - if(!!filter.up_grant && filter.up_grant.length < 3) { + if(!!filter.up_grant.trim() && filter.up_grant.trim().length < 3) { setErrFilter(prev => ({ ...prev, up_grant: 'Nhập tối thiểu 3 kí tự' })) - return; + isCanFilter = false + } + if(!!filter.agents_code.trim() && filter.agents_code.trim().length < 3) { + setErrFilter(prev => ({ + ...prev, + agents_code: 'Nhập tối thiểu 3 kí tự' + })) + isCanFilter = false + } + if(!!filter.start_date && !!filter.end_date && new Date(filter.start_date).getTime() > new Date(filter.end_date).getTime()) { + setErrFilter(prev => ({ + ...prev, + end_date: 'Ngày kết thúc không được nhỏ hơn ngày bắt đầu' + })) + isCanFilter = false; } + if(!isCanFilter) return; + setIsFilter(true) getData(filter) } @@ -132,6 +156,12 @@ export default function ListGrantPage() { ) } + const renderIconAgency = () => { + return ( + + ) + } + return (
@@ -143,18 +173,20 @@ export default function ListGrantPage() {
changeFilter('keyword', text)} - type="text" - name="keyword" - placeholder="Nhập tên / số điện thoại / email / mã đại lý" - autoFocus={true} - renderLabelIcon={renderIconKeyWord} - errorText={errFilter.keyword} - typeErrText='underAbsolute' - errorAbsolute={true} + classNameContainer='input-container' + className='input-base-filter' + value={filter.keyword} + setValue={(text) => changeFilter('keyword', text)} + type="text" + name="keyword" + placeholder="Nhập tên / số điện thoại / email" + renderLabelIcon={renderIconKeyWord} + errorText={errFilter.keyword} + typeErrText='underAbsolute' + errorAbsolute={true} + onKeyDown={(e) => { + if(e?.which === 13) handleFilter() + }} />
@@ -171,9 +203,34 @@ export default function ListGrantPage() { errorText={errFilter.up_grant} typeErrText='underAbsolute' errorAbsolute={true} + onKeyDown={(e) => { + if(e?.which === 13) handleFilter() + }} + /> +
+
+ changeFilter('agents_code', text)} + type="text" + name="agents_code" + placeholder="Nhập mã đại lý" + renderLabelIcon={renderIconAgency} + errorText={errFilter.agents_code} + typeErrText='underAbsolute' + errorAbsolute={true} + onKeyDown={(e) => { + if(e?.which === 13) handleFilter() + }} />
- +
+
+
+ -
-
-
-
- changeFilter('start_date', date)} - name="start_date" - renderLabelIcon={renderIconDate} - placeholder={"Từ ngày"} - maxDate={new Date()} - /> - changeFilter('end_date', date)} - name="end_date" - renderLabelIcon={renderIconDate} - placeholder={"Đến ngày"} - maxDate={new Date()} - /> +
+ changeFilter('start_date', date)} + name="start_date" + renderLabelIcon={renderIconDate} + placeholder={"Từ ngày"} + maxDate={new Date()} + /> +
+
+ changeFilter('end_date', date)} + name="end_date" + renderLabelIcon={renderIconDate} + placeholder={"Đến ngày"} + maxDate={new Date()} + errorText={errFilter.end_date} + typeErrText='underAbsolute' + errorAbsolute={true} + /> +
- {!!listGrant.length &&

{`Tổng số tuyến dưới: ${listGrant.length}`}

} + {!!listGrant.length &&

{`Danh sách tuyến dưới: ${listGrant.length}`}

}
{listGrant?.map(item => (
-

{item?.name}

+

{item?.name + ` (${item?.agents_code})`}

- - {item?.agents_code} + + {dayjs(item?.created_date).format('DD/MM/YYYY')}
- - {item?.grant} + Cấp đại lý: + {item?.grant}
-
-
- - {item?.up_grant} -
{item?.phone}
+
+ {/* */} + Mã tuyến trên: + {item?.up_grant} +
-
{item?.email}
-
- - {dayjs(item?.created_date).format('DD/MM/YYYY')} -
))}