Refactor_Expenses #321
@ -2,10 +2,7 @@
|
|||||||
import React, { useEffect } from "react";
|
import React, { useEffect } from "react";
|
||||||
import { FormProvider, useForm, Controller } from "react-hook-form";
|
import { FormProvider, useForm, Controller } from "react-hook-form";
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
import {
|
import { defaultFilter, SearchSchema } from "./ExpenseSchema";
|
||||||
defaultFilter,
|
|
||||||
SearchSchema,
|
|
||||||
} from "./ExpenseSchema";
|
|
||||||
|
|
||||||
import DateRangePicker from "../common/DateRangePicker";
|
import DateRangePicker from "../common/DateRangePicker";
|
||||||
import SelectMultiple from "../common/SelectMultiple";
|
import SelectMultiple from "../common/SelectMultiple";
|
||||||
@ -16,7 +13,9 @@ import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
|
|||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
|
|
||||||
const ExpenseFilterPanel = ({ onApply }) => {
|
const ExpenseFilterPanel = ({ onApply }) => {
|
||||||
const selectedProjectId = useSelector((store) => store.localVariables.projectId);
|
const selectedProjectId = useSelector(
|
||||||
|
(store) => store.localVariables.projectId
|
||||||
|
);
|
||||||
|
|
||||||
const { projectNames, loading: projectLoading } = useProjectName();
|
const { projectNames, loading: projectLoading } = useProjectName();
|
||||||
const { ExpenseStatus = [] } = useExpenseStatus();
|
const { ExpenseStatus = [] } = useExpenseStatus();
|
||||||
@ -65,8 +64,8 @@ const ExpenseFilterPanel = ({ onApply }) => {
|
|||||||
return (
|
return (
|
||||||
<FormProvider {...methods}>
|
<FormProvider {...methods}>
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
|
<form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
|
||||||
|
|
||||||
<div className="mb-3 w-100">
|
<div className="mb-3 w-100">
|
||||||
|
<label className="form-label">Created Date</label>
|
||||||
<DateRangePicker
|
<DateRangePicker
|
||||||
onRangeChange={setDateRange}
|
onRangeChange={setDateRange}
|
||||||
endDateMode="today"
|
endDateMode="today"
|
||||||
@ -75,12 +74,10 @@ const ExpenseFilterPanel = ({ onApply }) => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="row g-2">
|
<div className="row g-2">
|
||||||
<SelectMultiple
|
<SelectMultiple
|
||||||
name="projectIds"
|
name="projectIds"
|
||||||
label="Select Projects"
|
label="Projects : "
|
||||||
options={projectNames}
|
options={projectNames}
|
||||||
labelKey="name"
|
labelKey="name"
|
||||||
valueKey="id"
|
valueKey="id"
|
||||||
@ -88,7 +85,7 @@ const ExpenseFilterPanel = ({ onApply }) => {
|
|||||||
/>
|
/>
|
||||||
<SelectMultiple
|
<SelectMultiple
|
||||||
name="createdByIds"
|
name="createdByIds"
|
||||||
label="Select Creator"
|
label="Submitted By : "
|
||||||
options={employees}
|
options={employees}
|
||||||
labelKey={(item) => `${item.firstName} ${item.lastName}`}
|
labelKey={(item) => `${item.firstName} ${item.lastName}`}
|
||||||
valueKey="id"
|
valueKey="id"
|
||||||
@ -96,48 +93,52 @@ const ExpenseFilterPanel = ({ onApply }) => {
|
|||||||
/>
|
/>
|
||||||
<SelectMultiple
|
<SelectMultiple
|
||||||
name="paidById"
|
name="paidById"
|
||||||
label="Select Paid By"
|
label="Paid By : "
|
||||||
options={employees}
|
options={employees}
|
||||||
labelKey={(item) => `${item.firstName} ${item.lastName}`}
|
labelKey={(item) => `${item.firstName} ${item.lastName}`}
|
||||||
valueKey="id"
|
valueKey="id"
|
||||||
IsLoading={empLoading}
|
IsLoading={empLoading}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<label className="form-label ">Select Status</label>
|
<label className="form-label ">Status : </label>
|
||||||
<div className="d-flex flex-wrap">
|
<div className="d-flex flex-wrap">
|
||||||
{ExpenseStatus.map((status) => (
|
{ExpenseStatus.map((status) => (
|
||||||
<Controller
|
<Controller
|
||||||
key={status.id}
|
key={status.id}
|
||||||
control={control}
|
control={control}
|
||||||
name="statusIds"
|
name="statusIds"
|
||||||
render={({ field: { value = [], onChange } }) => (
|
render={({ field: { value = [], onChange } }) => (
|
||||||
<div className="d-flex align-items-center me-3 mb-2">
|
<div className="d-flex align-items-center me-3 mb-2">
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
className="form-check-input"
|
className="form-check-input"
|
||||||
value={status.id}
|
value={status.id}
|
||||||
checked={value.includes(status.id)}
|
checked={value.includes(status.id)}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
const checked = e.target.checked;
|
const checked = e.target.checked;
|
||||||
onChange(
|
onChange(
|
||||||
checked
|
checked
|
||||||
? [...value, status.id]
|
? [...value, status.id]
|
||||||
: value.filter((v) => v !== status.id)
|
: value.filter((v) => v !== status.id)
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<label className="ms-2 mb-0">{status.displayName}</label>
|
<label className="ms-2 mb-0">{status.displayName}</label>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="d-flex justify-content-end py-3 gap-2">
|
<div className="d-flex justify-content-end py-3 gap-2">
|
||||||
<button type="button" className="btn btn-secondary btn-xs" onClick={onClear}>
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-secondary btn-xs"
|
||||||
|
onClick={onClear}
|
||||||
|
>
|
||||||
Clear
|
Clear
|
||||||
</button>
|
</button>
|
||||||
<button type="submit" className="btn btn-primary btn-xs">
|
<button type="submit" className="btn btn-primary btn-xs">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user