Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add tooltips for filter check boxes #1130

Merged
merged 1 commit into from
Jun 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 88 additions & 76 deletions src/components/selectRangeUsePlanPage/index.js
Original file line number Diff line number Diff line change
@@ -1,36 +1,40 @@
import React, { useState, useEffect } from 'react';
import { Checkbox, FormControlLabel, Tooltip } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import React, { useEffect, useState } from 'react';
import useSWR from 'swr';
import {
BooleanParam,
StringParam,
decodeObject,
encodeObject,
useQueryParam,
} from 'use-query-params';
import * as API from '../../constants/api';
import {
SELECT_RUP_BANNER_CONTENT,
SELECT_RUP_BANNER_HEADER,
TOOLTIP_TEXT_ACTIVE_RUP,
TOOLTIP_TEXT_ARCHIVED_PLANS,
TOOLTIP_TEXT_RANGE_AGREEMENT,
TOOLTIP_TEXT_RUP_CREATED,
} from '../../constants/strings';
import { useReferences } from '../../providers/ReferencesProvider';
import { useToast } from '../../providers/ToastProvider';
import { useUser } from '../../providers/UserProvider';
import {
axios,
getAuthHeaderConfig,
isUserAgrologist,
isUserAdmin,
getDataFromLocalStorage,
isUserAdmin,
isUserAgrologist,
saveDataInLocalStorage,
} from '../../utils';
import useDebounce from '../../utils/hooks/useDebounce';
import { Banner } from '../common';
import Error from './Error';
import { makeStyles } from '@material-ui/core/styles';
import ZoneSelect, { ZoneSelectAll } from './ZoneSelect';
import { Banner } from '../common';
import {
SELECT_RUP_BANNER_HEADER,
SELECT_RUP_BANNER_CONTENT,
} from '../../constants/strings';
import { useToast } from '../../providers/ToastProvider';
import {
useQueryParam,
StringParam,
encodeObject,
decodeObject,
BooleanParam,
} from 'use-query-params';
import { useReferences } from '../../providers/ReferencesProvider';
import { useUser } from '../../providers/UserProvider';

import SortableAgreementTable from './SortableAgreementTable';
import { Checkbox, FormControlLabel } from '@material-ui/core';

const keyValueSeparator = '-'; // default is "-"
const entrySeparator = '~'; // default is "_"
Expand Down Expand Up @@ -204,62 +208,70 @@ const SelectRangeUsePlanPage = ({ match, history }) => {
/>
<div className={classes.searchFilterContainer}>
<div className={classes.checkboxBorder}>
<FormControlLabel
control={
<Checkbox
checked={planCheck}
onChange={() => {
setPlanCheck(!planCheck);
setSaveFilterInfo('planCheck', !planCheck);
}}
name="planCheck"
color="primary"
/>
}
label="RUP Created"
/>
<FormControlLabel
control={
<Checkbox
checked={agreementCheck}
onChange={() => {
setAgreementCheck(!agreementCheck);
setSaveFilterInfo('agreementCheck', !agreementCheck);
}}
name="agreementCheck"
color="primary"
/>
}
label="Range Agreement"
/>
<FormControlLabel
control={
<Checkbox
checked={activeCheck}
onChange={() => {
setActiveCheck(!activeCheck);
setSaveFilterInfo('activeCheck', !activeCheck);
}}
name="activeCheck"
color="primary"
/>
}
label="Active RUP"
/>
<FormControlLabel
control={
<Checkbox
checked={showReplacedPlans}
onChange={() => {
setShowReplacedPlans(!showReplacedPlans);
setSaveFilterInfo('showReplacedPlans', !showReplacedPlans);
}}
name="shwoReplacedPlans"
color="primary"
/>
}
label="Replaced Plans"
/>
<Tooltip title={TOOLTIP_TEXT_RUP_CREATED}>
<FormControlLabel
control={
<Checkbox
checked={planCheck}
onChange={() => {
setPlanCheck(!planCheck);
setSaveFilterInfo('planCheck', !planCheck);
}}
name="planCheck"
color="primary"
/>
}
label="RUP Created"
/>
</Tooltip>
<Tooltip title={TOOLTIP_TEXT_RANGE_AGREEMENT}>
<FormControlLabel
control={
<Checkbox
checked={agreementCheck}
onChange={() => {
setAgreementCheck(!agreementCheck);
setSaveFilterInfo('agreementCheck', !agreementCheck);
}}
name="agreementCheck"
color="primary"
/>
}
label="Range Agreement"
/>
</Tooltip>
<Tooltip title={TOOLTIP_TEXT_ACTIVE_RUP}>
<FormControlLabel
control={
<Checkbox
checked={activeCheck}
onChange={() => {
setActiveCheck(!activeCheck);
setSaveFilterInfo('activeCheck', !activeCheck);
}}
name="activeCheck"
color="primary"
/>
}
label="Active RUP"
/>
</Tooltip>
<Tooltip title={TOOLTIP_TEXT_ARCHIVED_PLANS}>
<FormControlLabel
control={
<Checkbox
checked={showReplacedPlans}
onChange={() => {
setShowReplacedPlans(!showReplacedPlans);
setSaveFilterInfo('showReplacedPlans', !showReplacedPlans);
}}
name="shwoReplacedPlans"
color="primary"
/>
}
label="Replaced Plans"
/>
</Tooltip>
</div>
{isUserAgrologist(user) && (
<ZoneSelect
Expand Down
14 changes: 12 additions & 2 deletions src/constants/strings.js
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,16 @@ export const DAYS = 'Days';
export const PLD = 'PLD';
export const CROWN_AUMS = 'Crown AUMs';

//TOOLTIPS
export const TOOLTIP_TEXT_RUP_CREATED =
'Check box to only view Range Agreements that have had a Range Use Plan started';
export const TOOLTIP_TEXT_RANGE_AGREEMENT =
'Check box to only view only ACTIVE Range Act Agreements';
export const TOOLTIP_TEXT_ACTIVE_RUP =
'Check box to view Range Use Plans that have been APPROVED, includes RUPs that are being amended. Does not include draft plans';
export const TOOLTIP_TEXT_ARCHIVED_PLANS =
'Check box to be able to see ARCHIVED plans that have been replaced with a new plan';

// RUP minister issues
export const CONTACT_NO_EXIST = "Contact doesn't exist";
export const ACTION_NOTE =
Expand Down Expand Up @@ -277,9 +287,9 @@ export const MERGE_ACCOUNT_BANNER_CONTENT_LINE1 =
'If an agreement holder has logged in to MyRange with multiple BCEIDS, it is advisable to merge these accounts into their most current BCEID user account. This will make sure they see all the correct agreements on sign in, and all signatures will be marked as their own.';
export const MERGE_ACCOUNT_BANNER_CONTENT_LINE2 =
'Note that you can filter using the table below by hitting the 3 dots in each column, you may also select multiple FROM accounts in step 1, and one TO account in step 2.';
export const ASSIGN_ROLES_AND_DISTRICTS_BANNER_HEADER =
export const ASSIGN_ROLES_AND_DISTRICTS_BANNER_HEADER =
'Assign Role and Districts';
export const ASSIGN_ROLES_AND_DISTRICTS_BANNER_CONTENT =
export const ASSIGN_ROLES_AND_DISTRICTS_BANNER_CONTENT =
'Assign role and districts to user account';
// tips
export const CONDITIONS_TIP =
Expand Down
Loading