Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
Ecolyo
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Container registry
Model registry
Operate
Environments
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
web-et-numerique
Factory
LLLE_Project
Ecolyo
Commits
b2e058b6
Commit
b2e058b6
authored
4 years ago
by
Yoan VALLET
Browse files
Options
Downloads
Patches
Plain Diff
feat: create monthly report component
parent
abbf703e
Branches
Branches containing commit
Tags
Tags containing commit
1 merge request
!113
Features/us221 report view creation
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
src/components/Report/MonthlyReport.tsx
+94
-29
94 additions, 29 deletions
src/components/Report/MonthlyReport.tsx
src/components/Report/ReportView.tsx
+42
-1
42 additions, 1 deletion
src/components/Report/ReportView.tsx
with
136 additions
and
30 deletions
src/components/Report/MonthlyReport.tsx
+
94
−
29
View file @
b2e058b6
import
React
,
{
use
Callback
,
useEffect
}
from
'
react
'
import
React
,
{
use
Effect
,
useState
}
from
'
react
'
import
{
useI18n
}
from
'
cozy-ui/transpiled/react
'
import
{
useClient
}
from
'
cozy-client
'
import
{
useRecoilState
}
from
'
recoil
'
import
UserProfileService
from
'
services/userProfile.service
'
import
{
useRecoilValue
}
from
'
recoil
'
import
{
TimeStep
}
from
'
enum/timeStep.enum
'
import
{
fluidTypeState
}
from
'
atoms/fluidState.state
'
import
{
userProfileState
}
from
'
atoms/userProfile.state
'
import
{
ReportAttributes
,
UserProfile
}
from
'
models
'
import
{
TimePeriod
,
PerformanceIndicator
}
from
'
models
'
import
TimePeriodService
from
'
services/timePeriod.service
'
import
ConsumptionService
from
'
services/consumption.service
'
import
PerformanceIndicatorService
from
'
services/performanceIndicator.service
'
import
ConfigService
from
'
services/fluidConfig.service
'
import
{
convertDateByTimeStep
}
from
'
utils/date
'
import
PerformanceIndicatorContent
from
'
components/PerformanceIndicator/PerformanceIndicatorContent
'
import
FluidPerformanceIndicator
from
'
components/PerformanceIndicator/FluidPerformanceIndicator
'
const
MonthlyReport
=
()
=>
{
const
{
t
}
=
useI18n
()
const
client
=
useClient
()
const
[
userProfile
,
setUserProfile
]
=
useRecoilState
<
UserProfile
>
(
userProfileState
const
fluidTypes
=
useRecoilValue
(
fluidTypeState
)
const
userProfile
=
useRecoilValue
(
userProfileState
)
const
[
performanceIndicators
,
setPerformanceIndicators
]
=
useState
<
PerformanceIndicator
[]
>
([])
const
[
currentTimePeriod
,
setCurrentTimePeriod
]
=
useState
<
TimePeriod
|
null
>
(
null
)
const
[
isLoaded
,
setIsLoaded
]
=
useState
<
boolean
>
(
false
)
const
updateUserProfileReport
=
useCallback
(
async
(
reportAttributes
:
ReportAttributes
)
=>
{
const
userProfileService
=
new
UserProfileService
(
client
)
try
{
await
userProfileService
.
updateUserProfile
({
report
:
reportAttributes
})
.
then
(
updatedUserProfile
=>
{
updatedUserProfile
&&
setUserProfile
(
updatedUserProfile
)
})
}
catch
(
err
)
{
console
.
log
(
err
)
}
},
[
setUserProfile
]
)
const
performanceIndicatorService
=
new
PerformanceIndicatorService
()
const
configService
=
new
ConfigService
()
const
fluidConfig
=
configService
.
getFluidConfig
()
const
timeStep
=
TimeStep
.
MONTH
useEffect
(()
=>
{
if
(
!
userProfile
.
report
.
haveSeenLastReport
)
{
const
reportAttributes
=
{
sendReportNotification
:
userProfile
.
report
.
sendReportNotification
,
haveSeenLastReport
:
true
,
monthlyReportDate
:
userProfile
.
report
.
monthlyReportDate
,
let
subscribed
=
true
async
function
populatePerformanceIndicators
()
{
const
consumptionService
=
new
ConsumptionService
(
client
)
// const lastDate = await consumptionService.fetchLastDateData(fluidTypes)
if
(
subscribed
)
{
const
timePeriodService
=
new
TimePeriodService
()
const
periods
=
timePeriodService
.
getTimePeriods
(
userProfile
.
report
.
monthlyReportDate
,
fluidTypes
,
timeStep
)
console
.
log
(
periods
)
const
fetchedPerformanceIndicators
=
await
consumptionService
.
getPerformanceIndicators
(
periods
.
timePeriod
,
timeStep
,
fluidTypes
,
periods
.
comparisonTimePeriod
)
if
(
fetchedPerformanceIndicators
)
{
setPerformanceIndicators
(
fetchedPerformanceIndicators
)
setCurrentTimePeriod
(
periods
.
timePeriod
)
}
}
updateUserProfileReport
(
reportAttributes
)
setIsLoaded
(
true
)
}
},
[])
populatePerformanceIndicators
()
return
()
=>
{
subscribed
=
false
}
},
[
timeStep
,
fluidTypes
])
return
<
div
>
Votre bilan mensuel
</
div
>
return
(
<>
{
isLoaded
?
(
<
div
className
=
"fi-root"
>
<
div
className
=
"fi-content"
>
<
div
className
=
"fi-header text-14-normal-uppercase"
>
{
t
(
'
COMMON.CONSO_CARDS_LABEL
'
)
}{
'
'
}
{
convertDateByTimeStep
(
currentTimePeriod
,
timeStep
,
true
)
}
</
div
>
<
PerformanceIndicatorContent
performanceIndicator
=
{
performanceIndicatorService
.
aggregatePerformanceIndicators
(
performanceIndicators
)
}
timeStep
=
{
timeStep
}
/>
<
div
>
<
span
className
=
"text-16-normal-uppercase details-title"
>
{
t
(
'
INDICATOR.DETAIL
'
)
}
{
convertDateByTimeStep
(
currentTimePeriod
,
timeStep
,
true
)
}
</
span
>
{
fluidConfig
.
map
((
fluid
,
index
)
=>
{
return
fluidTypes
.
includes
(
fluid
.
fluidTypeId
)
?
(
<
FluidPerformanceIndicator
key
=
{
index
}
fluidType
=
{
fluid
.
fluidTypeId
}
performanceIndicator
=
{
performanceIndicators
[
fluid
.
fluidTypeId
]
}
/>
)
:
null
})
}
</
div
>
</
div
>
</
div
>
)
:
null
}
</>
)
}
export
default
MonthlyReport
This diff is collapsed.
Click to expand it.
src/components/Report/ReportView.tsx
+
42
−
1
View file @
b2e058b6
import
React
,
{
useState
}
from
'
react
'
import
React
,
{
useState
,
useEffect
}
from
'
react
'
import
{
useClient
}
from
'
cozy-client
'
import
{
useRecoilState
}
from
'
recoil
'
import
{
ReportAttributes
,
UserProfile
}
from
'
models
'
import
{
userProfileState
}
from
'
atoms/userProfile.state
'
import
UserProfileService
from
'
services/userProfile.service
'
import
CozyBar
from
'
components/Header/CozyBar
'
import
Header
from
'
components/Header/Header
'
import
Content
from
'
components/Content/Content
'
import
MonthlyReport
from
'
components/Report/MonthlyReport
'
const
ReportView
:
React
.
FC
=
()
=>
{
const
client
=
useClient
()
const
[
userProfile
,
setUserProfile
]
=
useRecoilState
<
UserProfile
>
(
userProfileState
)
const
[
headerHeight
,
setHeaderHeight
]
=
useState
<
number
>
(
0
)
const
defineHeaderHeight
=
(
height
:
number
)
=>
{
setHeaderHeight
(
height
)
}
useEffect
(()
=>
{
let
subscribed
=
true
const
updateUserProfileReport
=
async
()
=>
{
if
(
!
userProfile
.
report
.
haveSeenLastReport
)
{
const
reportAttributes
:
ReportAttributes
=
{
sendReportNotification
:
userProfile
.
report
.
sendReportNotification
,
haveSeenLastReport
:
true
,
monthlyReportDate
:
userProfile
.
report
.
monthlyReportDate
,
}
const
userProfileService
=
new
UserProfileService
(
client
)
try
{
await
userProfileService
.
updateUserProfile
({
report
:
reportAttributes
})
.
then
(
updatedUserProfile
=>
{
subscribed
&&
updatedUserProfile
&&
setUserProfile
(
updatedUserProfile
)
})
}
catch
(
err
)
{
console
.
log
(
err
)
}
}
}
updateUserProfileReport
()
return
()
=>
{
subscribed
=
false
}
},
[])
return
(
<>
<
CozyBar
titleKey
=
{
'
report.viewTitle
'
}
/>
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment