Enhancement/financial request menu UI#19
Conversation
- edit search bar and SortBy filter - add trigger for a modal popup in the search bar - add SortBy button in table header - add clear filter button
fanesz
left a comment
fanesz
left a comment
There was a problem hiding this comment.
komponen searchbar jangan di otak atik, itu sudah bener, delay 0.5s bakal auto apply, itulah fitur debouncer. kalo mau ditambahin fitur skip debounce on enter baru boleh.
header yg punya fitur sort blm dibikin pointer cursornya
fitur clear filter masih banyak bug
fitur sortby berdasarkan ascending/descending hilang...
| useEffect(() => { | ||
| setTempValue(value); | ||
| }, [value]); | ||
|
|
There was a problem hiding this comment.
kan value sudah di passing lewat onChange(), ini untuk??
| height: "1.2rem" | ||
| height: "0.9rem" |
| const filterSortBy = filters.find((filter) => filter.key === "sort"); | ||
| const { handleClearSortBy } = useFinancialFilters(); | ||
| const [searchValue, setSearchValue] = useState<string>(""); | ||
| const handleChangeSearchBar = useCallback((value: string) => { | ||
| setSearchValue(value); | ||
| handleChangeSearch(value); | ||
| }, []); | ||
| const handleClear = useCallback(() => { | ||
| setSearchValue(""); | ||
| handleClearSortBy(); | ||
| }, [handleClearSortBy]); |
There was a problem hiding this comment.
searchValue kan sudah di handling di component searchbar, disitu pake debouncer, jadi pas input, 0.5 detik, auto enter.
jangan pake usestate/usecallback, tapi seluruh ini di bikin function, trus pindahin ke custom hooks useFinancialFilters.
yang diclear itu state dari context, jadi useState itu unnecessary di design pattern ini.
untuk clear jg masih ngebug, misal filter by status, kadang statusnya tetep approved.
| export function StatusIcon(status: string): JSX.Element { | ||
| let icon; | ||
| const commonIconStyle = { | ||
| fontSize: "medium", | ||
| opacity: 0.5 | ||
| }; | ||
| if (status === "Rejected") { | ||
| icon = <ErrorOutlineIcon color="error" sx={commonIconStyle} />; | ||
| } else if (status === "Pending") { | ||
| icon = <WarningAmberIcon color="warning" sx={commonIconStyle} />; | ||
| } else { | ||
| icon = <CheckCircleOutlineIcon color="success" sx={commonIconStyle} />; | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| {icon} {status} | ||
| </> | ||
| ); | ||
| } |
There was a problem hiding this comment.
???????????????????????????????????????
kalo emang butuh komponen terpisah, bikin lah di folder partials, context itu cuma untuk simpen STATE / DATA
| { label: "id", width: "w-20", sortBy: "" }, | ||
| { label: "username", width: "w-44", sortBy: "" }, | ||
| { label: "amount", width: "w-32", sortBy: "" }, | ||
| { label: "status", width: "w-28", sortBy: sortBy(2) }, | ||
| { label: "note", width: "w-52", sortBy: "" }, | ||
| { label: "date", width: "w-24", sortBy: sortBy(1) } |
There was a problem hiding this comment.
sort ttp harus di context, maenin function untuk set yang di sort, bukan disimpen jadi variable object
| // TableFilter, | ||
| // TableFilterItem, |
| <div className="-mt-1"> | ||
| <Tooltip title={currentFinreq.created_at} arrow> | ||
| <Tooltip | ||
| title={moment(currentFinreq.created_at).format("dddd, hh:mm A")} |
| key: string; | ||
| label: string; | ||
| options: CommonOptions[]; | ||
| value: Array<string>; |
There was a problem hiding this comment.
| value: Array<string>; |
di context, sudah ada variable filters, value ditampung disitu, bukan useState ini
| const handleClearSortBy = () => { | ||
| handleChangeSortBy("order_by", ["asc"]); | ||
| handleChangeSortBy("status", []); | ||
| }; |
There was a problem hiding this comment.
setState
...prevState
filters: {
... copas filters default yg skrg di context
}
| return ( | ||
| <> | ||
| <SwapVertIcon | ||
| sx={{ | ||
| fontSize: "medium" | ||
| }} | ||
| onClick={handleSortItem} | ||
| /> | ||
| </> | ||
| ); | ||
| } |
There was a problem hiding this comment.
| return ( | |
| <> | |
| <SwapVertIcon | |
| sx={{ | |
| fontSize: "medium" | |
| }} | |
| onClick={handleSortItem} | |
| /> | |
| </> | |
| ); | |
| } | |
| return ( | |
| <SwapVertIcon | |
| sx={{ | |
| fontSize: "medium" | |
| }} | |
| onClick={handleSortItem} | |
| /> | |
| ); | |
| } |
uneccessary
- add StatusIcon function in partials - remove useless type declaration - edit icon in financial request status - add seconds to datetime format in Created At tooltip - edit handleChangeSortBy and handleClearSortBy functions in useFinancialRequest
2 participants
No description provided.