From c8846de6791d40cedea009d7b064df0db9570601 Mon Sep 17 00:00:00 2001
From: gcarron <gcarron@grandlyon.com>
Date: Wed, 23 Feb 2022 17:01:09 +0100
Subject: [PATCH] fix display
---
src/components/Prices/PriceSection.tsx | 67 ++++++++++++++++++--------
src/components/Prices/prices.scss | 19 ++++++++
src/styles/config/_typography.scss | 4 ++
3 files changed, 70 insertions(+), 20 deletions(-)
diff --git a/src/components/Prices/PriceSection.tsx b/src/components/Prices/PriceSection.tsx
index 73257a06..a0f8b8d4 100644
--- a/src/components/Prices/PriceSection.tsx
+++ b/src/components/Prices/PriceSection.tsx
@@ -1,10 +1,4 @@
-import React, {
- useCallback,
- useContext,
- useEffect,
- useMemo,
- useState,
-} from 'react'
+import React, { useCallback, useContext, useEffect, useState } from 'react'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import { FluidType } from '../../enum/fluidTypes'
import { FrequencyInMonth } from '../../enum/frequency.enum'
@@ -30,6 +24,7 @@ const PriceSection: React.FC<PriceSectionProps> = ({
const [isLoading, setIsLoading] = useState<boolean>(false)
const [refreshData, setRefreshData] = useState(false)
const [showHistory, setshowHistory] = useState<boolean>(false)
+ const [showFullList, setshowFullList] = useState<boolean>(false)
const [priceToSave, setpriceToSave] = useState<IPrice>({
fluidType: fluid,
price: '',
@@ -37,7 +32,8 @@ const PriceSection: React.FC<PriceSectionProps> = ({
endDate: null,
})
const { user }: Partial<UserContextProps> = useContext(UserContext)
- const editableLimit = 3
+ const editableLimit: number = 3
+ const maxPerList: number = 8
const handlePriceSelection = (val: string) => {
if (val === '') val = '0'
val = val.replace(/,/g, '.')
@@ -46,7 +42,12 @@ const PriceSection: React.FC<PriceSectionProps> = ({
}
const savePrice = async () => {
- if (priceToSave && user) {
+ if (
+ priceToSave &&
+ user &&
+ priceToSave.price !== '0' &&
+ priceToSave.price !== ''
+ ) {
const priceService = new PricesService()
const formattedPrice = {
...priceToSave,
@@ -67,6 +68,10 @@ const PriceSection: React.FC<PriceSectionProps> = ({
const year = date.toLocaleString('fr', { year: 'numeric' })
return `${month} ${year}`
}
+ const toggleFullList = useCallback(() => {
+ setshowFullList((prev) => !prev)
+ }, [])
+
useEffect(() => {
let subscribed = true
setIsLoading(true)
@@ -98,8 +103,9 @@ const PriceSection: React.FC<PriceSectionProps> = ({
return () => {
subscribed = false
+ setIsLoading(false)
}
- }, [refreshData])
+ }, [refreshData, frequency, fluid])
if (isLoading) return <Loader></Loader>
return (
@@ -115,14 +121,16 @@ const PriceSection: React.FC<PriceSectionProps> = ({
<div className="flex-bloc">
<p>Nouveau prix : </p>
<input
- className="input-dark"
+ className="input-dark price-select"
type="text"
value={priceToSave.price.toString()}
onChange={(e) => handlePriceSelection(e.target.value)}
placeholder={
priceToSave.price === '' ? 'Saisir le nouveau prix' : ''
}
- ></input>
+ />
+ <span className="euro">€</span>
+
<div className="flex-bloc startDate">
<p>A partir de : </p>
<p className="date">
@@ -132,7 +140,13 @@ const PriceSection: React.FC<PriceSectionProps> = ({
</p>
</div>
</div>
-
+ <button
+ className="btnValid"
+ onClick={savePrice}
+ disabled={priceToSave.price === '0' || priceToSave.price === ''}
+ >
+ Sauvegarder
+ </button>
<div className="history">
<button
onClick={toggleHistory}
@@ -142,6 +156,7 @@ const PriceSection: React.FC<PriceSectionProps> = ({
<img
src={arrowDown}
className={showHistory ? 'icon-active' : ''}
+ alt="arrow-icon"
/>
</button>
{showHistory && (
@@ -167,6 +182,7 @@ const PriceSection: React.FC<PriceSectionProps> = ({
<img
src={editing}
onClick={() => setpriceToSave(nextPrice)}
+ alt="edit-icon"
/>
</li>
<hr></hr>
@@ -174,7 +190,12 @@ const PriceSection: React.FC<PriceSectionProps> = ({
)}
{prices.map((price, i) => {
return (
- <div key={i}>
+ <div
+ key={i}
+ className={
+ i > maxPerList && !showFullList ? 'price-hidden' : ''
+ }
+ >
<li
className={
priceToSave.startDate === price.startDate
@@ -184,30 +205,36 @@ const PriceSection: React.FC<PriceSectionProps> = ({
>
<div className="prix">{price.price} €</div>
<p>
- {' '}
à partir de :{' '}
<span className="capital">
{getDate(price.startDate)}
</span>
</p>
- {i < editableLimit && (
+ {i < editableLimit - 1 && (
<img
src={editing}
onClick={() => setpriceToSave(prices[i])}
+ alt="edit-icon"
/>
)}
</li>
<hr></hr>
+ {i === maxPerList && !showFullList && (
+ <button onClick={toggleFullList} className="showButton">
+ En voir plus
+ </button>
+ )}
</div>
)
})}
+ {showFullList && (
+ <button onClick={toggleFullList} className="showButton">
+ En voir moins
+ </button>
+ )}
</ul>
)}
</div>
-
- <button className="btnValid" onClick={savePrice}>
- Sauvegarder
- </button>
</>
) : (
'Aucun prix trouvé'
diff --git a/src/components/Prices/prices.scss b/src/components/Prices/prices.scss
index 75eb9cbb..0f0d367b 100644
--- a/src/components/Prices/prices.scss
+++ b/src/components/Prices/prices.scss
@@ -23,6 +23,14 @@
.flex-bloc {
display: flex;
align-items: center;
+ .price-select {
+ position: relative;
+ }
+ .euro {
+ display: block;
+ margin-left: 0.5rem;
+ font-weight: bold;
+ }
.startDate {
margin-left: 1rem;
.date {
@@ -42,6 +50,10 @@
border: solid 1px $gold;
display: flex;
align-items: center;
+ &:hover {
+ background: $dark-background;
+ opacity: 0.8;
+ }
&.active {
border-radius: 5px 5px 0 0;
}
@@ -58,6 +70,9 @@
background: $grey-dark;
border: solid 1px $gold;
padding: 1rem;
+ .price-hidden {
+ display: none;
+ }
li {
transition: all 300ms ease;
margin: 0.5rem 0;
@@ -91,6 +106,10 @@
margin: 0;
background: white;
}
+ .showButton {
+ text-align: center;
+ color: $gold;
+ }
}
.icon-active {
transform: rotate(180deg);
diff --git a/src/styles/config/_typography.scss b/src/styles/config/_typography.scss
index 380fea21..55178241 100644
--- a/src/styles/config/_typography.scss
+++ b/src/styles/config/_typography.scss
@@ -46,6 +46,10 @@ $main-spacing: 4px;
&:hover {
background-color: #b89318;
}
+ &:disabled {
+ opacity: 0.8;
+ cursor: not-allowed;
+ }
}
.btnValid {
@include baseButton();
--
GitLab