From 0e9642ea3e2cf763d4643483965275c4045aa558 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 8 May 2023 22:08:22 -0700
Subject: [PATCH] Add explanations to relative dates

---
 src-ui/messages.xlf                           | 21 ++++++++++++-------
 .../date-dropdown.component.html              | 17 +++++++++++----
 .../date-dropdown.component.scss              |  2 +-
 .../date-dropdown/date-dropdown.component.ts  | 12 +++++++----
 4 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf
index fae98b3c0..e3926c578 100644
--- a/src-ui/messages.xlf
+++ b/src-ui/messages.xlf
@@ -741,11 +741,11 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/date-dropdown/date-dropdown.component.html</context>
-          <context context-type="linenumber">24</context>
+          <context context-type="linenumber">33</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/date-dropdown/date-dropdown.component.html</context>
-          <context context-type="linenumber">47</context>
+          <context context-type="linenumber">56</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5000042972069710005" datatype="html">
@@ -789,18 +789,25 @@
           <context context-type="linenumber">440</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="6052766076365105714" datatype="html">
+        <source>now</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/common/date-dropdown/date-dropdown.component.html</context>
+          <context context-type="linenumber">20</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="6371576811194810854" datatype="html">
         <source>After</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/date-dropdown/date-dropdown.component.html</context>
-          <context context-type="linenumber">19</context>
+          <context context-type="linenumber">28</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1218334388194408974" datatype="html">
         <source>Before</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/date-dropdown/date-dropdown.component.html</context>
-          <context context-type="linenumber">42</context>
+          <context context-type="linenumber">51</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4873149362496451858" datatype="html">
@@ -814,21 +821,21 @@
         <source>Last month</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/date-dropdown/date-dropdown.component.ts</context>
-          <context context-type="linenumber">47</context>
+          <context context-type="linenumber">48</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8697368973702409683" datatype="html">
         <source>Last 3 months</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/date-dropdown/date-dropdown.component.ts</context>
-          <context context-type="linenumber">51</context>
+          <context context-type="linenumber">53</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3566342898065860218" datatype="html">
         <source>Last year</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/date-dropdown/date-dropdown.component.ts</context>
-          <context context-type="linenumber">55</context>
+          <context context-type="linenumber">58</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8953033926734869941" datatype="html">
diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
index 05547fed6..ad790821e 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
@@ -5,13 +5,22 @@
   </button>
   <div class="dropdown-menu date-dropdown shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="list-group list-group-flush">
-        <button *ngFor="let rd of relativeDates" class="list-group-item small list-goup list-group-item-action d-flex p-2" role="menuitem" (click)="setRelativeDate(rd.date)">
-          <div class="selected-icon me-1">
-            <svg *ngIf="relativeDate === rd.date" fill="currentColor" class="buttonicon-sm">
+        <button *ngFor="let rd of relativeDates" class="list-group-item small list-goup list-group-item-action d-flex p-2" role="menuitem" (click)="setRelativeDate(rd.id)">
+          <div class="selected-icon">
+            <svg *ngIf="relativeDate === rd.id" fill="currentColor" class="buttonicon-sm">
               <use xlink:href="assets/bootstrap-icons.svg#check"/>
           </svg>
           </div>
-          {{rd.name}}
+          <div class="d-flex justify-content-between w-100 align-items-center ps-2">
+            <div class="pe-2 pe-lg-4">
+              {{rd.name}}
+            </div>
+            <div class="text-muted small pe-2">
+              <span class="small">
+                {{ rd.date | customDate:'mediumDate' }} &ndash; <ng-container i18n>now</ng-container>
+              </span>
+            </div>
+          </div>
         </button>
         <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
 
diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.scss b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.scss
index 8573ab575..83ac93233 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.scss
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.scss
@@ -1,5 +1,5 @@
 .date-dropdown {
-  min-width: 250px;
+  white-space: nowrap;
 
   .btn-link {
     line-height: 1;
diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
index e901acfeb..423bf4a68 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
@@ -39,20 +39,24 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
 
   relativeDates = [
     {
-      date: RelativeDate.LAST_7_DAYS,
+      id: RelativeDate.LAST_7_DAYS,
       name: $localize`Last 7 days`,
+      date: new Date().setDate(new Date().getDate() - 7),
     },
     {
-      date: RelativeDate.LAST_MONTH,
+      id: RelativeDate.LAST_MONTH,
       name: $localize`Last month`,
+      date: new Date().setMonth(new Date().getMonth() - 1),
     },
     {
-      date: RelativeDate.LAST_3_MONTHS,
+      id: RelativeDate.LAST_3_MONTHS,
       name: $localize`Last 3 months`,
+      date: new Date().setMonth(new Date().getMonth() - 3),
     },
     {
-      date: RelativeDate.LAST_YEAR,
+      id: RelativeDate.LAST_YEAR,
       name: $localize`Last year`,
+      date: new Date().setFullYear(new Date().getFullYear() - 1),
     },
   ]