From f26d72d21e91135a43f30c987201cdb03f30cd9d Mon Sep 17 00:00:00 2001
From: gcarron <gcarron@grandlyon.com>
Date: Thu, 18 Feb 2021 09:27:50 +0100
Subject: [PATCH] Add mui menu filter
---
src/components/Ecogesture/EcogestureList.tsx | 240 +++---------------
src/components/Ecogesture/ecogestureList.scss | 66 ++---
src/enum/ecogesture.enum.ts | 13 +-
src/locales/fr.json | 7 +
4 files changed, 91 insertions(+), 235 deletions(-)
diff --git a/src/components/Ecogesture/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList.tsx
index dffc99f19..afcc67af6 100644
--- a/src/components/Ecogesture/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList.tsx
@@ -5,14 +5,10 @@ import { useClient } from 'cozy-client'
import { Ecogesture } from 'models'
import { FluidType } from 'enum/fluid.enum'
import EcogestureService from 'services/ecogesture.service'
+import { Menu, MenuItem } from '@material-ui/core/'
-import GasIcon from 'assets/icons/ico/gas.svg'
-import ElecIcon from 'assets/icons/ico/elec.svg'
-import WaterIcon from 'assets/icons/ico/water.svg'
import SortIcon from 'assets/icons/ico/sort.svg'
import CheckIcon from 'assets/icons/ico/check.svg'
-import OrderIcon from 'assets/icons/ico/order.svg'
-
import StyledChallengeSpinner from 'components/CommonKit/Spinner/StyledEcogestureSpinner'
import EcogestureCard from 'components/Ecogesture/EcogestureCard'
import EcogestureModal from 'components/Ecogesture/EcogestureModal'
@@ -21,6 +17,7 @@ import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import MuiButton from '@material-ui/core/Button'
import './ecogestureList.scss'
import thunderFilled from 'assets/icons/visu/thunderFilled.svg'
+import { Usage } from 'enum/ecogesture.enum'
const EcogesturesList: React.FC = () => {
const { t } = useI18n()
@@ -32,8 +29,8 @@ const EcogesturesList: React.FC = () => {
const [ecogestures, setEcogestures] = useState<Ecogesture[] | null>(null)
const [isLoaded, setisLoaded] = useState(false)
const [openEcogestureModal, setOpenEcogestureModal] = useState(false)
+ const [activeFilter, setactiveFilter] = useState<string>(Usage[Usage.ALL])
const [filterbyFluid, setfilterbyFluid] = useState<FluidType | null>(null)
- const [ascendingSort, setascendingSort] = useState(false)
const [openDropDown, setopenDropDown] = useState(false)
const [openEfficientyModal, setopenEfficientyModal] = useState(false)
@@ -41,6 +38,7 @@ const EcogesturesList: React.FC = () => {
setSelectedEcogesture(ecogesture)
setOpenEcogestureModal(true)
}
+ const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
const handleCloseClick = useCallback(() => {
setOpenEcogestureModal(false)
@@ -52,43 +50,16 @@ const EcogesturesList: React.FC = () => {
const toggleDropDown = () => {
setopenDropDown(prev => !prev)
}
- const toggleFilter = (fluid: FluidType | null) => {
- if (fluid === null) {
- setfilterbyFluid(null)
- } else if (filterbyFluid === fluid) {
- setfilterbyFluid(null)
- } else {
- setfilterbyFluid(fluid)
- }
- toggleDropDown()
- }
- const toggleSort = () => {
- setisLoaded(false)
- setascendingSort(prev => !prev)
- if (openDropDown == true) {
- toggleDropDown()
- }
- setTimeout(() => setisLoaded(true), 100)
- }
- const handleKeypress = (
- e: React.KeyboardEvent<HTMLDivElement>,
- fluid: FluidType | null
- ) => {
- if (e.key === 'Enter') {
- toggleFilter(fluid)
- }
- }
- const keyDown = useCallback((evt: KeyboardEvent): void => {
- if (evt.key === 'Escape') toggleDropDown()
- }, [])
+ const toggleMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
+ setAnchorEl(event.currentTarget)
+ }
- useEffect(() => {
- document.addEventListener('keydown', keyDown)
- return () => {
- document.removeEventListener('keydown', keyDown)
- }
- }, [keyDown])
+ const closeMenu = (usage?: string) => {
+ console.log('usage', usage)
+ usage && setactiveFilter(usage)
+ setAnchorEl(null)
+ }
useEffect(() => {
let subscribed = true
@@ -127,6 +98,9 @@ const EcogesturesList: React.FC = () => {
root: 'btn-secondary-negative',
label: 'text-14-normal',
}}
+ aria-controls="simple-menu"
+ aria-haspopup="true"
+ onClick={toggleMenu}
>
<StyledIcon icon={SortIcon} size={24} />
<span
@@ -134,149 +108,30 @@ const EcogesturesList: React.FC = () => {
openDropDown ? 'ecogestures opened' : 'ecogestures'
}
>
- {filterbyFluid === null
- ? t('ECOGESTURE.FILTER_TITLE')
- : t('FLUID.' + FluidType[filterbyFluid] + '.LABEL')}
+ {t(`ECOGESTURE.${activeFilter}`)}
</span>
</MuiButton>
- </div>
- <div
- className={openDropDown ? 'dropdown opened' : 'dropdown'}
- tabIndex={0}
- >
- <div
- className={
- filterbyFluid === null ? 'filter filter-active' : 'filter'
- }
- onClick={() => {
- toggleFilter(null)
- }}
- tabIndex={0}
- onKeyPress={e => {
- handleKeypress(e, null)
- }}
- >
- {t('ECOGESTURE.FILTER_TITLE')}
- <StyledIcon
- className={
- filterbyFluid === null ? 'active checkicon' : 'checkicon'
- }
- icon={CheckIcon}
- size={18}
- />
- </div>
-
- <div
- onClick={() => {
- toggleFilter(FluidType.ELECTRICITY)
- }}
- className={
- filterbyFluid === FluidType.ELECTRICITY
- ? 'filter filter-active'
- : 'filter'
- }
- tabIndex={0}
- onKeyPress={e => {
- handleKeypress(e, FluidType.ELECTRICITY)
- }}
- >
- <StyledIcon
- className={
- filterbyFluid === FluidType.ELECTRICITY
- ? 'icon'
- : 'active icon'
- }
- icon={ElecIcon}
- size={30}
- />
- <span>{t(`FLUID.ELECTRICITY.LABEL`)}</span>
- <StyledIcon
- className={
- filterbyFluid === FluidType.ELECTRICITY
- ? 'active checkicon'
- : 'checkicon'
- }
- icon={CheckIcon}
- size={18}
- />
- </div>
- <div
- onClick={() => {
- toggleFilter(FluidType.WATER)
- }}
- className={
- filterbyFluid === FluidType.WATER
- ? 'filter filter-active'
- : 'filter'
- }
- tabIndex={0}
- onKeyPress={e => {
- handleKeypress(e, FluidType.WATER)
+ <Menu
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={() => closeMenu()}
+ PopoverClasses={{
+ paper: 'filter-menu',
}}
+ MenuListProps={{ className: 'filter-menu-list' }}
>
- <StyledIcon
- className={
- filterbyFluid === FluidType.WATER ? 'icon' : 'active icon'
- }
- icon={WaterIcon}
- size={30}
- />
- <span> {t(`FLUID.WATER.LABEL`)}</span>
- <StyledIcon
- className={
- filterbyFluid === FluidType.WATER
- ? 'active checkicon'
- : 'checkicon'
- }
- icon={CheckIcon}
- size={18}
- />
- </div>
- <div
- onClick={() => {
- toggleFilter(FluidType.GAS)
- }}
- className={
- filterbyFluid === FluidType.GAS
- ? 'filter filter-active'
- : 'filter'
- }
- tabIndex={0}
- onKeyPress={e => {
- handleKeypress(e, FluidType.GAS)
- }}
- >
- <StyledIcon
- className={
- filterbyFluid === FluidType.GAS ? 'icon' : 'active icon'
- }
- icon={GasIcon}
- size={30}
- />
- <span> {t(`FLUID.GAS.LABEL`)}</span>
- <StyledIcon
- className={
- filterbyFluid === FluidType.GAS
- ? 'active checkicon'
- : 'checkicon'
- }
- icon={CheckIcon}
- size={18}
- />
- </div>
+ {Object.values(Usage).map((usage, key) => {
+ return (
+ typeof usage !== 'number' && (
+ <MenuItem key={key} onClick={() => closeMenu(usage)}>
+ {t(`ECOGESTURE.${usage}`)}
+ </MenuItem>
+ )
+ )
+ })}
+ </Menu>
</div>
-
- <MuiButton
- onClick={() => {
- toggleSort()
- }}
- classes={{
- root: 'btn-secondary-negative btn-order',
- label: 'text-14-normal',
- }}
- >
- <StyledIcon icon={OrderIcon} size={28} />
- </MuiButton>
</div>
<MuiButton
onClick={() => {
@@ -300,11 +155,6 @@ const EcogesturesList: React.FC = () => {
.filter(ecogesture =>
ecogesture.fluidTypes.includes(filterbyFluid)
)
- // .sort(
- // ascendingSort
- // ? (a, b) => a.nwh - b.nwh
- // : (a, b) => b.nwh - a.nwh
- // )
.map((ecogesture, index) => (
<div key={index} className="ecogesture-list-item">
<EcogestureCard
@@ -315,20 +165,14 @@ const EcogesturesList: React.FC = () => {
))
) : (
ecogestures &&
- ecogestures
- // .sort(
- // ascendingSort
- // ? (a, b) => a.nwh - b.nwh
- // : (a, b) => b.nwh - a.nwh
- // )
- .map((ecogesture, index) => (
- <div key={index} className="ecogesture-list-item">
- <EcogestureCard
- ecogesture={ecogesture}
- handleClick={handleClick}
- />
- </div>
- ))
+ ecogestures.map((ecogesture, index) => (
+ <div key={index} className="ecogesture-list-item">
+ <EcogestureCard
+ ecogesture={ecogesture}
+ handleClick={handleClick}
+ />
+ </div>
+ ))
)}
</div>
</>
diff --git a/src/components/Ecogesture/ecogestureList.scss b/src/components/Ecogesture/ecogestureList.scss
index 49b100c5a..d06fe92d8 100644
--- a/src/components/Ecogesture/ecogestureList.scss
+++ b/src/components/Ecogesture/ecogestureList.scss
@@ -77,38 +77,8 @@
}
}
}
-
- .dropdown {
- position: absolute;
- top: 3.5rem;
- background: linear-gradient(
- 0deg,
- rgba(255, 255, 255, 0.09),
- rgba(255, 255, 255, 0.09)
- ),
- linear-gradient(180deg, #323339 0%, #25262b 100%);
- border: 1px solid $soft-grey;
- box-sizing: border-box;
- box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
- border-radius: 4px;
- display: none;
- z-index: 3;
- min-width: 230px;
- padding: 0.5rem 0rem;
- font-size: 0.875rem;
- left: 0;
- transition: all 300ms ease;
- &.opened {
- display: block;
- }
- .filter {
- padding: 0 1rem;
- &.filter-active {
- background: rgba(160, 160, 160, 0.2);
- }
- }
- }
}
+
button.btn-secondary-negative {
margin: 0;
padding: 0.3rem 0.5rem;
@@ -159,3 +129,37 @@
}
}
}
+div.filter-menu {
+ margin-top: 3.5rem;
+ margin-left: -0.5rem;
+ color: white;
+ background: linear-gradient(
+ 0deg,
+ rgba(255, 255, 255, 0.09),
+ rgba(255, 255, 255, 0.09)
+ ),
+ linear-gradient(180deg, #323339 0%, #25262b 100%);
+ border: 1px solid $soft-grey;
+ box-sizing: border-box;
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
+ border-radius: 4px;
+ z-index: 3;
+ width: 220px;
+ padding: 0.5rem 0rem;
+ font-size: 0.875rem;
+ left: 0;
+ transition: all 300ms ease;
+ &.opened {
+ display: block;
+ }
+ .filter {
+ padding: 0 1rem;
+ &.filter-active {
+ background: rgba(160, 160, 160, 0.2);
+ }
+ }
+}
+.filter-menu-list li {
+ color: white;
+ text-transform: initial;
+}
diff --git a/src/enum/ecogesture.enum.ts b/src/enum/ecogesture.enum.ts
index 3453b8b7e..20f16f738 100644
--- a/src/enum/ecogesture.enum.ts
+++ b/src/enum/ecogesture.enum.ts
@@ -1,10 +1,11 @@
export enum Usage {
- HEATING = 0,
- AIR_CONDITIONING = 1,
- ECS = 2,
- COLD_WATER = 3,
- ELECTRICITY_SPECIFIC = 4,
- COOKING = 5,
+ ALL = 0,
+ HEATING = 1,
+ AIR_CONDITIONING = 2,
+ ECS = 3,
+ COLD_WATER = 4,
+ ELECTRICITY_SPECIFIC = 5,
+ COOKING = 6,
}
export enum Room {
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 6843f9495..7797d7a52 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -199,6 +199,13 @@
"SECOND_TAB": "Ecogestes adaptés à votre profil",
"TITLE_ECOGESTURE": "Ecogeste",
"NO_ECOGESTURE": "Pas d'ecogeste",
+ "ALL": "Tous les usages",
+ "HEATING": "Chauffage",
+ "AIR_CONDITIONING": "Climatisation",
+ "ECS": "Eau chaude",
+ "COLD_WATER": "Eau froide",
+ "ELECTRICITY_SPECIFIC": "Electricité courante",
+ "COOKING": "Cuisson",
"QUESTION_NEGAWATT": "nWh ?",
"EFFICIENCY": "Efficacité",
"SHOW_LESS": "Je veux moins d’infos",
--
GitLab