From 67d03c11b9a73d8ec80a031ce0d2e0740edf33b6 Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Tue, 15 Dec 2020 00:48:06 +0100
Subject: [PATCH] fixed the date selection dropdowns.

- They still contain that ugly hack.
---
 .../filter-dropdown-date.component.html       | 25 ++++-------------
 .../filter-dropdown-date.component.ts         | 27 ++++++++++---------
 .../filter-editor.component.html              |  4 +--
 .../filter-editor/filter-editor.component.ts  | 21 +++++----------
 4 files changed, 29 insertions(+), 48 deletions(-)

diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html
index ad292b182..6f6a42fe2 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html
+++ b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html
@@ -4,23 +4,16 @@
   </button>
   <div class="dropdown-menu date-filter shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="list-group list-group-flush">
+        <button class="list-group-item small list-goup list-group-item-action d-flex p-2 pl-3" (click)="clear()">Clear</button>
         <button *ngFor="let range of [7, 30, 'month', 'year']" class="list-group-item small list-goup list-group-item-action d-flex p-2 pl-3" role="menuitem" (click)="setDateQuickFilter(range)">
           <ng-container *ngIf="isStringRange(range)">This </ng-container>
           {{ range }}
           <ng-container *ngIf="!isStringRange(range)"> days</ng-container>
         </button>
         <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
-          <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
-            <div>Before</div>
-            <a *ngIf="dateBefore" class="btn btn-link p-0 m-0" (click)="clearBefore()">
-              <svg width="0.8em" height="0.8em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
-              </svg>
-              <small>Clear</small>
-            </a>
-          </div>
+          <div>Before</div>
           <div class="input-group input-group-sm">
-            <input class="form-control" type="text" placeholder="yyyy-mm-dd" name="before" [(ngModel)]="_dateBefore" [maxDate]="this._maxDate" ngbDatepicker (dateSelect)="onDateSelected($event)" #dpBefore="ngbDatepicker">
+            <input class="form-control" type="text" placeholder="yyyy-mm-dd" name="before" [(ngModel)]="_dateBefore" [maxDate]="this._maxDate" ngbDatepicker (dateSelect)="onBeforeSelected($event)" #dpBefore="ngbDatepicker">
             <div class="input-group-append">
               <button class="btn btn-outline-secondary btn-sm" (click)="dpBefore.toggle()" type="button">
                 <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar-date" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
@@ -32,17 +25,9 @@
           </div>
         </div>
         <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
-          <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
-            <div>After</div>
-            <a *ngIf="dateAfter" class="btn btn-link p-0 m-0" (click)="clearAfter()">
-              <svg width="0.8em" height="0.8em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
-              </svg>
-              <small>Clear</small>
-            </a>
-          </div>
+          <div>After</div>
           <div class="input-group input-group-sm">
-            <input class="form-control form-control-sm" type="text" placeholder="yyyy-mm-dd" name="after" [(ngModel)]="_dateAfter" [maxDate]="this._maxDate" ngbDatepicker (dateSelect)="onDateSelected($event)" #dpAfter="ngbDatepicker">
+            <input class="form-control form-control-sm" type="text" placeholder="yyyy-mm-dd" name="after" [(ngModel)]="_dateAfter" [maxDate]="this._maxDate" ngbDatepicker (dateSelect)="onAfterSelected($event)" #dpAfter="ngbDatepicker">
             <div class="input-group-append">
               <button class="btn btn-outline-secondary btn-sm" (click)="dpAfter.toggle()" type="button">
                 <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar-date" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts
index 55beeb7f4..806027f9c 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts
+++ b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts
@@ -1,6 +1,13 @@
 import { Component, EventEmitter, Input, Output, ElementRef, ViewChild, SimpleChange } from '@angular/core';
 import { NgbDate, NgbDateStruct, NgbDatepicker } from '@ng-bootstrap/ng-bootstrap';
 
+
+export interface DateSelection {
+  before?: NgbDateStruct
+  after?: NgbDateStruct
+}
+
+
 @Component({
   selector: 'app-filter-dropdown-date',
   templateUrl: './filter-dropdown-date.component.html',
@@ -18,10 +25,7 @@ export class FilterDropdownDateComponent {
   title: string
 
   @Output()
-  dateBeforeSet = new EventEmitter()
-
-  @Output()
-  dateAfterSet = new EventEmitter()
+  datesSet = new EventEmitter<DateSelection>()
 
   @ViewChild('dpAfter') dpAfter: NgbDatepicker
   @ViewChild('dpBefore') dpBefore: NgbDatepicker
@@ -88,19 +92,18 @@ export class FilterDropdownDateComponent {
         break
     }
     this._dateAfter = newDate
-    this.onDateSelected(this._dateAfter)
+    this.datesSet.emit({after: newDate, before: null})
   }
 
-  onDateSelected(date:NgbDateStruct) {
-    let emitter = this._dateAfter && NgbDate.from(this._dateAfter).equals(date) ? this.dateAfterSet : this.dateBeforeSet
-    emitter.emit(date)
+  onBeforeSelected(date: NgbDateStruct) {
+    this.datesSet.emit({after: this._dateAfter, before: date})
   }
 
-  clearAfter() {
-    this.dateAfterSet.next()
+  onAfterSelected(date: NgbDateStruct) {
+    this.datesSet.emit({after: date, before: this._dateBefore})
   }
 
-  clearBefore() {
-    this.dateBeforeSet.next()
+  clear() {
+    this.datesSet.emit({after: null, before: null})
   }
 }
diff --git a/src-ui/src/app/components/filter-editor/filter-editor.component.html b/src-ui/src/app/components/filter-editor/filter-editor.component.html
index 6e64264db..80f10407c 100644
--- a/src-ui/src/app/components/filter-editor/filter-editor.component.html
+++ b/src-ui/src/app/components/filter-editor/filter-editor.component.html
@@ -10,8 +10,8 @@
   <app-filter-dropdown class="col-auto" [items]="correspondents" [itemsSelected]="selectedCorrespondents" title="Correspondents" (toggle)="toggleCorrespondent($event.id)"></app-filter-dropdown>
   <app-filter-dropdown class="col-auto" [items]="documentTypes" [itemsSelected]="selectedDocumentTypes" title="Document types" (toggle)="toggleDocumentType($event.id)"></app-filter-dropdown>
 
-  <app-filter-dropdown-date class="col-auto" [dateBefore]="dateCreatedBefore" [dateAfter]="dateCreatedAfter" title="Created" (dateBeforeSet)="onDateCreatedBeforeSet($event)" (dateAfterSet)="onDateCreatedAfterSet($event)"></app-filter-dropdown-date>
-  <app-filter-dropdown-date class="col-auto" [dateBefore]="dateAddedBefore" [dateAfter]="dateAddedAfter" title="Added"  (dateBeforeSet)="onDateAddedBeforeSet($event)" (dateAfterSet)="onDateAddedAfterSet($event)"></app-filter-dropdown-date>
+  <app-filter-dropdown-date class="col-auto" [dateBefore]="dateCreatedBefore" [dateAfter]="dateCreatedAfter" title="Created" (datesSet)="onDatesCreatedSet($event)"></app-filter-dropdown-date>
+  <app-filter-dropdown-date class="col-auto" [dateBefore]="dateAddedBefore" [dateAfter]="dateAddedAfter" title="Added"  (datesSet)="onDatesAddedSet($event)"></app-filter-dropdown-date>
 
   <button class="btn btn-link btn-sm" [disabled]="!hasFilters()" (click)="clearSelected()">
     <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
diff --git a/src-ui/src/app/components/filter-editor/filter-editor.component.ts b/src-ui/src/app/components/filter-editor/filter-editor.component.ts
index 9822c7db3..f98b9517f 100644
--- a/src-ui/src/app/components/filter-editor/filter-editor.component.ts
+++ b/src-ui/src/app/components/filter-editor/filter-editor.component.ts
@@ -10,6 +10,7 @@ import { TagService } from 'src/app/services/rest/tag.service';
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
 import { FilterRule } from 'src/app/data/filter-rule';
 import { FILTER_ADDED_AFTER, FILTER_ADDED_BEFORE, FILTER_CORRESPONDENT, FILTER_CREATED_AFTER, FILTER_CREATED_BEFORE, FILTER_DOCUMENT_TYPE, FILTER_HAS_TAG, FILTER_RULE_TYPES, FILTER_TITLE } from 'src/app/data/filter-rule-type';
+import { DateSelection } from './filter-dropdown-date/filter-dropdown-date.component';
 
 @Component({
   selector: 'app-filter-editor',
@@ -146,23 +147,15 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
   // Date handling
 
 
-  onDateCreatedBeforeSet(date: NgbDateStruct) {
-    this.setDateCreatedBefore(date)
+  onDatesCreatedSet(dates: DateSelection) {
+    this.setDateCreatedBefore(dates.before)
+    this.setDateCreatedAfter(dates.after)
     this.applyFilters()
   }
 
-  onDateCreatedAfterSet(date: NgbDateStruct) {
-    this.setDateCreatedAfter(date)
-    this.applyFilters()
-  }
-
-  onDateAddedBeforeSet(date: NgbDateStruct) {
-    this.setDateAddedBefore(date)
-    this.applyFilters()
-  }
-
-  onDateAddedAfterSet(date: NgbDateStruct) {
-    this.setDateAddedAfter(date)
+  onDatesAddedSet(dates: DateSelection) {
+    this.setDateAddedBefore(dates.before)
+    this.setDateAddedAfter(dates.after)
     this.applyFilters()
   }