Add reset button, reset and close on parent reset

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/DaterangeSelect.vue

@@ -21,8 +21,13 @@
                             <input ref="field" type="hidden">
                         </div>
                     </li>
-                    <li class="closebtn">
+                    <li class="daterange__buttons">
-                        <a class="btn btn-default btn-xs" href="#" @click.prevent="togglePanel">schließen</a>
+                        <button class="daterange__button" @click.prevent="togglePanel">
+                            <i class="fa fa-times"></i> schließen
+                        </button>
+                        <button class="daterange__button" @click.prevent="reset()">
+                            <i class="fa fa-trash-o"></i> zurücksetzen
+                        </button>
                     </li>
                 </ul>
             </li>
@@ -37,6 +42,7 @@
     import 'dayjs/locale/de'
     import flatpickr from 'flatpickr'
     import { German } from 'flatpickr/dist/l10n/de'
+    import EventBus from '../_bus'
 
     export default {
         data () {
@@ -95,19 +101,16 @@
                 if (this.from && this.to) {
                     this.picker.setDate([ new Date(this.from), new Date(this.to) ]);
                 }
-            })
+            });
+            EventBus.$on('filterSettingsReset', () => {
+                this.reset();
+            });
         },
         computed: {
             selectedRange () {
                 if (this.selectedFrom == null && this.selectedTo == null) {
                     return '';
                 }
-                if (this.selectedFrom !== null && this.selectedTo === null) {
-                    return 'ab ' + dayjs(this.selectedFrom).format('DD.MM.YYYY');
-                }
-                if (this.selectedFrom === null && this.selectedTo !== null) {
-                    return 'bis ' + dayjs(this.selectedTo).format('DD.MM.YYYY');
-                }
                 return dayjs(this.selectedFrom).format('DD.MM.YYYY')
                     + '-' + dayjs(this.selectedTo).format('DD.MM.YYYY');
             }
@@ -122,6 +125,14 @@
                 this.picker.setDate([ this.selectedFrom, this.selectedTo ]);
                 this.togglePanel();
                 this.$emit('selected', { from: this.selectedFrom, to: this.selectedTo });
+            },
+            reset () {
+                this.selectedFrom = null;
+                this.selectedTo = null;
+                this.picker.clear();
+                this.picker.jumpToDate();
+                this.togglePanel();
+                this.$emit('selected', { from: this.selectedFrom, to: this.selectedTo });
             }
         }
     }

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResult.vue

@@ -142,6 +142,7 @@
             },
             resetFilterSettings () {
                 this.filterSettings = this.defaultFilterSettings;
+                EventBus.$emit('filterSettingsReset');
                 this.loadResults();
             },
             updateDestination (destination) {

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_datepicker.scss

@@ -22,11 +22,17 @@
   color: $color-font-base;
 }
 
+.daterange__buttons {
+  display: flex;
+  justify-content: space-between;
+}
+
 .daterange__button {
   color: $color-font-base;
   border: none;
   background: none;
   outline: none;
+  width: percentage(1/2);
 }
 
 .flatpickr-input {