Skip to content

Commit

Permalink
Rset Filters
Browse files Browse the repository at this point in the history
  • Loading branch information
Brijesh committed Sep 4, 2024
1 parent 2408160 commit 93aac86
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 88 deletions.
24 changes: 10 additions & 14 deletions src/components/selectRangeUsePlanPage/ZoneSelect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,16 +171,12 @@ export function ZoneSelectAll({ zones, users, zoneInfo, setZoneInfo }) {
);
}

export function ZoneSelect({ zones, user, users, setZoneInfo, zoneInfo }) {
export function ZoneSelect({ zones, unassignedZones, userZones, users, setZoneInfo, zoneInfo }) {
const classes = useStyles();
const userZones = zones.filter((zone) => user.id === zone.userId);
const districtIds = userZones.map((userZone) => userZone.districtId);
const unassignedZones = zones.filter(
(zone) => user.id !== zone.userId && districtIds.indexOf(zone.districtId) !== -1,
);
useEffect(() => {
selectAllZones(zoneInfo.selectAllZones);
}, []);
}, [zoneInfo.selectAllZones]);

const handleChange = (event) => {
if (event.target.value) {
const selectedZones = event.target.value;
Expand All @@ -203,15 +199,15 @@ export function ZoneSelect({ zones, user, users, setZoneInfo, zoneInfo }) {
}
};

const selectAllZones = (flag) => {
if (flag)
const selectAllZones = (select) => {
if (select) {
setZoneInfo({
...zoneInfo,
selectedZones: userZones.concat(unassignedZones).map((zone) => zone.id),
selectAllZones: true,
deselectAllZones: false,
selectAllZones: select,
deselectAllZones: !select,
});
else setZoneInfo({ ...zoneInfo, selectAllZones: false });
} else setZoneInfo({ ...zoneInfo, selectAllZones: select });
};

const deselectAllZones = (flag = true) => {
Expand Down Expand Up @@ -274,7 +270,7 @@ export function ZoneSelect({ zones, user, users, setZoneInfo, zoneInfo }) {
key={zone.id}
value={zone.id}
>
<CustomCheckbox checked={zoneInfo.selectedZones.indexOf(zone.id) > -1} />
<CustomCheckbox checked={zoneInfo.selectedZones?.indexOf(zone.id) > -1} />
<ListItemText
classes={{
primary: classes.listItemTextPrimary,
Expand Down Expand Up @@ -302,7 +298,7 @@ export function ZoneSelect({ zones, user, users, setZoneInfo, zoneInfo }) {
value={zone.id}
style={{ backgroundColor: 'transparent' }}
>
<CustomCheckbox checked={zoneInfo.selectedZones.indexOf(zone.id) > -1} />
<CustomCheckbox checked={zoneInfo.selectedZones?.indexOf(zone.id) > -1} />
<ListItemText
classes={{
primary: classes.listItemTextPrimary,
Expand Down
166 changes: 92 additions & 74 deletions src/components/selectRangeUsePlanPage/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {
getDataFromLocalStorage,
saveDataInLocalStorage,
} from '../../utils';
import { Banner } from '../common';
import { Banner, PrimaryButton } from '../common';
import SortableAgreementTable from './SortableAgreementTable';
import { ZoneSelect, ZoneSelectAll } from './ZoneSelect';

Expand All @@ -36,7 +36,7 @@ const useStyles = makeStyles(() => ({
border: '1px solid black',
borderRadius: '3px',
padding: '4px',
margin: '0 1rem',
marginRight: '8px',
},
}));

Expand All @@ -45,9 +45,26 @@ const StyledTooltip = withStyles((theme) => ({
fontSize: theme.typography.pxToRem(14),
},
}))(Tooltip);

const SelectRangeUsePlanPage = () => {
const [filterSettings, setFilterSettings] = useState({
const user = useUser();
const [users, setUsers] = useState([]);
const classes = useStyles();
const [loading, setLoading] = useState(false);
const [data, setData] = useState(null);
const { agreements, totalPages, totalItems } = data || {};
const references = useReferences();
const zones = references.ZONES || [];
const userZones = zones?.filter((zone) => user.id === zone.userId);
const districtIds = userZones?.map((userZone) => userZone.districtId);
const unassignedZones = zones?.filter(
(zone) => user.id !== zone.userId && districtIds.indexOf(zone.districtId) !== -1,
);
const defaultSelectedZones = isUserAdmin(user)
? zones?.map((zone) => zone.id)
: isUserAgrologist(user)
? userZones?.concat(unassignedZones).map((zone) => zone.id)
: [];
const defaultFilterSettings = {
page: 1,
limit: 10,
orderBy: 'agreement.forest_file_id',
Expand All @@ -58,18 +75,13 @@ const SelectRangeUsePlanPage = () => {
activeCheck: false,
statusCodes: '',
zoneInfo: {
selectedZones: [],
selectedZones: defaultSelectedZones,
selectAllZones: true,
deselectAllZones: false,
},
columnFilters: {},
});

const [loading, setLoading] = useState(false);
const [data, setData] = useState(null);

const references = useReferences();
const user = useUser();
};
const [filterSettings, setFilterSettings] = useState(defaultFilterSettings);
const fetchAgreements = useCallback(
debounce(async (settings) => {
setLoading(true);
Expand Down Expand Up @@ -117,17 +129,12 @@ const SelectRangeUsePlanPage = () => {
fetchAgreements(filterSettings);
}, [filterSettings, fetchAgreements]);

const [users, setUsers] = useState([]);
const { agreements, totalPages, totalItems } = data || {};
const classes = useStyles();

const handleFilterChange = (field) => (event) => {
setFilterSettings((prevSettings) => ({
...prevSettings,
[field]: event.target.checked,
}));
};

const handlePageChange = (event, page) => {
setFilterSettings((prevSettings) => ({
...prevSettings,
Expand Down Expand Up @@ -166,71 +173,81 @@ const SelectRangeUsePlanPage = () => {
<section className="agreement">
<Banner header={SELECT_RUP_BANNER_HEADER} content={SELECT_RUP_BANNER_CONTENT} />
<div className={classes.searchFilterContainer}>
<div className={classes.checkboxBorder}>
<StyledTooltip title={TOOLTIP_TEXT_RUP_CREATED}>
<FormControlLabel
control={
<Checkbox
checked={filterSettings.planCheck}
onChange={handleFilterChange('planCheck')}
name="planCheck"
color="primary"
/>
}
label="RUP Created"
/>
</StyledTooltip>
<StyledTooltip title={TOOLTIP_TEXT_RANGE_AGREEMENT}>
<FormControlLabel
control={
<Checkbox
checked={filterSettings.agreementCheck}
onChange={handleFilterChange('agreementCheck')}
name="agreementCheck"
color="primary"
/>
}
label="Range Agreement"
/>
</StyledTooltip>
<StyledTooltip title={TOOLTIP_TEXT_ACTIVE_RUP}>
<FormControlLabel
control={
<Checkbox
checked={filterSettings.activeCheck}
onChange={handleFilterChange('activeCheck')}
name="activeCheck"
color="primary"
/>
}
label="Active RUP"
/>
</StyledTooltip>
<StyledTooltip title={TOOLTIP_TEXT_ARCHIVED_PLANS}>
<FormControlLabel
control={
<Checkbox
checked={filterSettings.showReplacedPlans}
onChange={handleFilterChange('showReplacedPlans')}
name="showReplacedPlans"
color="primary"
/>
}
label="Replaced Plans"
/>
</StyledTooltip>
<div style={{ margin: '0 2rem', display: 'flex' }}>
<div className={classes.checkboxBorder}>
<StyledTooltip title={TOOLTIP_TEXT_RUP_CREATED}>
<FormControlLabel
control={
<Checkbox
checked={filterSettings.planCheck}
onChange={handleFilterChange('planCheck')}
name="planCheck"
color="primary"
/>
}
label="RUP Created"
/>
</StyledTooltip>
<StyledTooltip title={TOOLTIP_TEXT_RANGE_AGREEMENT}>
<FormControlLabel
control={
<Checkbox
checked={filterSettings.agreementCheck}
onChange={handleFilterChange('agreementCheck')}
name="agreementCheck"
color="primary"
/>
}
label="Range Agreement"
/>
</StyledTooltip>
<StyledTooltip title={TOOLTIP_TEXT_ACTIVE_RUP}>
<FormControlLabel
control={
<Checkbox
checked={filterSettings.activeCheck}
onChange={handleFilterChange('activeCheck')}
name="activeCheck"
color="primary"
/>
}
label="Active RUP"
/>
</StyledTooltip>
<StyledTooltip title={TOOLTIP_TEXT_ARCHIVED_PLANS}>
<FormControlLabel
control={
<Checkbox
checked={filterSettings.showReplacedPlans}
onChange={handleFilterChange('showReplacedPlans')}
name="showReplacedPlans"
color="primary"
/>
}
label="Replaced Plans"
/>
</StyledTooltip>
</div>
<PrimaryButton
inverted
onClick={() => {
setFilterSettings(defaultFilterSettings);
}}
>
Reset Filters
</PrimaryButton>
</div>

{isUserAgrologist(user) && (
{references.ZONES?.length > 0 && isUserAgrologist(user) && (
<ZoneSelect
user={user}
unassignedZones={unassignedZones}
userZones={userZones}
users={users}
zones={references.ZONES || []}
setZoneInfo={setZoneInfo}
zoneInfo={filterSettings.zoneInfo}
/>
)}
{isUserAdmin(user) && (
{references.ZONES?.length > 0 && isUserAdmin(user) && (
<ZoneSelectAll
users={users}
zones={references.ZONES || []}
Expand All @@ -239,6 +256,7 @@ const SelectRangeUsePlanPage = () => {
/>
)}
</div>

<SortableAgreementTable
agreements={agreements}
currentPage={filterSettings.page - 1}
Expand Down

0 comments on commit 93aac86

Please sign in to comment.