fix: update frontend to display user friendly dates (#2662)

betagouv · Oct 17, 2024 · 83c9deb · 83c9deb
1 parent 66009a4
commit 83c9deb
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 23 deletions.
diff --git a/...modules/campaign-ui/components/campaign-main-metrics/campaign-main-metrics.component.html b/...modules/campaign-ui/components/campaign-main-metrics/campaign-main-metrics.component.html
@@ -2,8 +2,8 @@
   <div>
     <ngx-chartjs [data]="periodChartData" type="doughnut" [height]="60" [width]="60" [options]="options"></ngx-chartjs>
     <p>
-      du <b>{{ campaign.start_date | date: 'd MMMM yyyy' }}</b><br />
-      au <b>{{ campaign.end_date | date: 'd MMMM yyyy' }}</b>
+      du <b>{{ start_date_ui | date: 'd MMMM yyyy' }}</b><br />
+      au <b>{{ end_date_ui | date: 'd MMMM yyyy' }}</b>
     </p>
   </div>
   <div>

diff --git a/...n/modules/campaign-ui/components/campaign-main-metrics/campaign-main-metrics.component.ts b/...n/modules/campaign-ui/components/campaign-main-metrics/campaign-main-metrics.component.ts
@@ -1,23 +1,27 @@
-import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { ChartData, ChartOptions } from 'chart.js';
-import * as moment from 'moment';
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from "@angular/core";
+import { ChartData, ChartOptions } from "chart.js";
+import * as moment from "moment";
 
-import { PolicyInterface } from '~/shared/policy/common/interfaces/PolicyInterface';
+import { PolicyInterface } from "~/shared/policy/common/interfaces/PolicyInterface";
 
 @Component({
-  selector: 'app-campaign-main-metrics',
-  templateUrl: './campaign-main-metrics.component.html',
-  styleUrls: ['./campaign-main-metrics.component.scss'],
+  selector: "app-campaign-main-metrics",
+  templateUrl: "./campaign-main-metrics.component.html",
+  styleUrls: ["./campaign-main-metrics.component.scss"],
 })
 export class CampaignMainMetricsComponent implements OnInit, OnChanges {
-  @Input() campaign: PolicyInterface;
+  @Input()
+  campaign: PolicyInterface;
   daysRemaining = 0;
   daysPassed = 0;
 
   budgetSpent = 0;
   budgetTotal = 0;
   budgetRemaining = 0;
 
+  start_date_ui: Date;
+  end_date_ui: Date;
+
   options: ChartOptions = {
     legend: {
       display: false,
@@ -54,12 +58,15 @@ export class CampaignMainMetricsComponent implements OnInit, OnChanges {
     const today = moment();
     const start = moment(this.campaign.start_date);
 
+    this.start_date_ui = this.campaign.start_date;
+    this.end_date_ui = moment(this.campaign.end_date).subtract(1, "days").toDate();
+
     // configuration in the database is exclusive end_date
     // to avoid displaying the day after the end of the campaign
     // to the user, we display the day before.
-    const end = moment(this.campaign.end_date).subtract(1, 'second');
+    const end = moment(this.campaign.end_date).subtract(1, "second");
 
-    const period = end.diff(start, 'days');
+    const period = end.diff(start, "days");
 
     if (today.isBefore(start)) {
       // not started yet
@@ -70,7 +77,7 @@ export class CampaignMainMetricsComponent implements OnInit, OnChanges {
       this.daysPassed = period;
       this.daysRemaining = 0;
     } else {
-      this.daysPassed = today.diff(start, 'days');
+      this.daysPassed = today.diff(start, "days");
       this.daysRemaining = period - this.daysPassed;
     }
   }
@@ -87,14 +94,14 @@ export class CampaignMainMetricsComponent implements OnInit, OnChanges {
 
   get periodChartData(): ChartData {
     return {
-      labels: ['Jours passés', 'Jours restants'],
+      labels: ["Jours passés", "Jours restants"],
       datasets: [
         {
           data: [this.daysPassed, this.daysRemaining],
-          backgroundColor: ['#65c8cf', 'lightgrey'],
-          hoverBackgroundColor: ['#65c8cf', 'lightgrey'],
-          borderColor: ['#65c8cf', 'lightgrey'],
-          hoverBorderColor: ['#65c8cf', 'lightgrey'],
+          backgroundColor: ["#65c8cf", "lightgrey"],
+          hoverBackgroundColor: ["#65c8cf", "lightgrey"],
+          borderColor: ["#65c8cf", "lightgrey"],
+          hoverBorderColor: ["#65c8cf", "lightgrey"],
           // borderWidth: 3,
         },
       ],
@@ -103,14 +110,14 @@ export class CampaignMainMetricsComponent implements OnInit, OnChanges {
 
   get budgetChartData(): ChartData {
     return {
-      labels: ['Budget consommé', 'Budget restant'],
+      labels: ["Budget consommé", "Budget restant"],
       datasets: [
         {
           data: [this.budgetSpent, this.budgetRemaining],
-          backgroundColor: ['#65c8cf', 'lightgrey'],
-          hoverBackgroundColor: ['#65c8cf', 'lightgrey'],
-          borderColor: ['#65c8cf', 'lightgrey'],
-          hoverBorderColor: ['#65c8cf', 'lightgrey'],
+          backgroundColor: ["#65c8cf", "lightgrey"],
+          hoverBackgroundColor: ["#65c8cf", "lightgrey"],
+          borderColor: ["#65c8cf", "lightgrey"],
+          hoverBorderColor: ["#65c8cf", "lightgrey"],
           // borderWidth: 3,
         },
       ],