Add reset button, reset and close on parent reset

2018-09-13 21:01:23 +02:00
parent c68232de86
commit 4448aed1f5
3 changed files with 27 additions and 9 deletions
@@ -21,8 +21,13 @@
                            <input ref="field" type="hidden">
                        </div>
                    </li>
-                    <li class="closebtn">
-                        <a class="btn btn-default btn-xs" href="#" @click.prevent="togglePanel">schließen</a>
+                    <li class="daterange__buttons">
+                        <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 });
            }
        }
    }
@@ -142,6 +142,7 @@
            },
            resetFilterSettings () {
                this.filterSettings = this.defaultFilterSettings;
+                EventBus.$emit('filterSettingsReset');
                this.loadResults();
            },
            updateDestination (destination) {
@@ -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 {