[feature] added new date picker component to contribution form

webapp/components/ContributionForm/ContributionForm.vue

@@ -60,50 +60,24 @@
             <ds-space margin-top="x-small" />
             <ds-grid>
               <ds-grid-item class="event-grid-item">
-                <!-- <label>Beginn</label> -->
-                <div class="event-grid-item-z-helper">
-                  <date-picker
-                    name="eventStart"
-                    v-model="formData.eventStart"
-                    type="datetime"
-                    value-type="format"
-                    :minute-step="15"
-                    Xformat="DD-MM-YYYY HH:mm"
-                    class="event-grid-item-z-helper"
-                    :placeholder="$t('post.viewEvent.eventStart')"
-                    :disabled-date="notBeforeToday"
-                    :disabled-time="notBeforeNow"
-                    :show-second="false"
-                    @change="changeEventStart($event)"
-                  ></date-picker>
-                </div>
-                <div
-                  v-if="errors && errors.eventStart"
-                  class="chipbox event-grid-item-margin-helper"
-                >
-                  <ds-chip size="base" :color="errors && errors.eventStart && 'danger'">
-                    <base-icon name="warning" />
-                  </ds-chip>
-                </div>
+                <date-time-picker
+                  :form-date="formData.eventStart"
+                  :errors="errors"
+                  :placeholder-date="$t('post.viewEvent.eventStart')"
+                  :placeholder-time="$t('post.viewEvent.eventStartTime')"
+                  @change-date="changeEventStart"
+                ></date-time-picker>
               </ds-grid-item>
               <ds-grid-item class="event-grid-item">
-                <!-- <label>Ende (optional)</label> -->
-
-                <date-picker
-                  v-model="formData.eventEnd"
-                  name="eventEnd"
-                  type="datetime"
-                  value-type="format"
-                  :minute-step="15"
-                  :seconds-step="0"
-                  Xformat="DD-MM-YYYY HH:mm"
-                  :placeholder="$t('post.viewEvent.eventEnd')"
-                  class="event-grid-item-font-helper"
-                  :disabled-date="notBeforeEventDay"
-                  :disabled-time="notBeforeEvent"
-                  :show-second="false"
-                  @change="changeEventEnd($event)"
-                ></date-picker>
+                <date-time-picker
+                  v-if="formData.eventStart"
+                  :form-date="formData.eventEnd"
+                  :compare-date="formData.eventStart"
+                  :errors="errors"
+                  :placeholder-date="$t('post.viewEvent.eventEnd')"
+                  :placeholder-time="$t('post.viewEvent.eventEndTime')"
+                  @change-date="changeEventEnd"
+                ></date-time-picker>
               </ds-grid-item>
             </ds-grid>
             <ds-grid class="event-location-grid">
@@ -195,8 +169,7 @@ import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
 import ImageUploader from '~/components/Uploader/ImageUploader'
 import links from '~/constants/links.js'
 import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
-import DatePicker from 'vue2-datepicker'
-import 'vue2-datepicker/scss/index.scss'
+import DateTimePicker from '~/components/_new/features/DateTimePicker/DateTimePicker.vue'
 
 export default {
   components: {
@@ -204,7 +177,7 @@ export default {
     ImageUploader,
     PageParamsLink,
     CategoriesSelect,
-    DatePicker,
+    DateTimePicker,
   },
   props: {
     contribution: {
@@ -363,18 +336,6 @@ export default {
     },
   },
   methods: {
-    notBeforeToday(date) {
-      return date < new Date().setHours(0, 0, 0, 0)
-    },
-    notBeforeNow(date) {
-      return date < new Date()
-    },
-    notBeforeEventDay(date) {
-      return date < new Date(this.formData.eventStart).setHours(0, 0, 0, 0)
-    },
-    notBeforeEvent(date) {
-      return date <= new Date(this.formData.eventStart)
-    },
     submit() {
       let image = null
 

webapp/components/_new/features/DateTimePicker/DateTimePicker.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <!-- <label>Beginn</label> -->
+    <label v-if="inputLabel">{{ inputLabel }}</label>
     <div class="date-input-container">
       <div class="event-grid-item-z-helper">
         <date-picker
@@ -9,24 +9,22 @@
           type="date"
           value-type="format"
           class="event-grid-item-z-helper"
-          :placeholder="$t('post.viewEvent.eventStart')"
-          :disabled-date="notBeforeToday"
-          :disabled-time="notBeforeNow"
-          @change="changeEventStart($event)"
-          :time-picker-options="{ start: '00:00', step: '00:30', end: '23:30', format: 'HH:mm' }"
+          :placeholder="placeholderDate"
+          :disabled-date="notBeforeDate"
+          :disabled-time="notBeforeDay"
+          @change="changeDate($event)"
         ></date-picker>
       </div>
-      <div class="event-grid-item-z-helper">
+      <div class="event-grid-item-z-helper time-picker">
         <date-picker
+          v-if="inputDate"
           name="inputTime"
           v-model="inputTime"
           type="datetime"
           :minute-step="15"
           format="HH:mm"
           class="event-grid-item-z-helper"
-          :placeholder="$t('post.viewEvent.eventStartTime')"
-          :disabled-date="notBeforeToday"
-          :disabled-time="notBeforeNow"
+          :placeholder="placeholderTime"
           :show-second="false"
           :show-time-panel="false"
           :confirm="true"
@@ -48,6 +46,7 @@
         </date-picker>
       </div>
     </div>
+    <!-- TODO decouple from eventstart? -->
     <div v-if="errors && errors.eventStart" class="chipbox event-grid-item-margin-helper">
       <ds-chip size="base" :color="errors && errors.eventStart && 'danger'">
         <base-icon name="warning" />
@@ -68,10 +67,14 @@ export default {
     DatePicker,
     TimePanel,
   },
-  emits: ['toggle-password'],
+  emits: ['change-event-start', 'change-event-end'],
   props: {
     errors: { type: Object, default: () => null },
     formDate: { type: String, default: () => null },
+    inputLabel: { type: String, default: '' },
+    compareDate: { type: String, default: () => null },
+    placeholderDate: { type: String },
+    placeholderTime: { type: String, default: '' },
     // formTime: { type: String, default: () => null },
   },
   data() {
@@ -82,17 +85,19 @@ export default {
     }
   },
   methods: {
-    notBeforeToday(date) {
-      return date < new Date().setHours(0, 0, 0, 0)
+    notBeforeDay(date) {
+      if (this.compareDate === null) {
+        return date < new Date().setHours(0, 0, 0, 0)
+      } else {
+        return date < new Date(this.compareDate).setHours(0, 0, 0, 0)
+      }
     },
-    notBeforeNow(date) {
-      return date < new Date()
-    },
-    notBeforeEventDay(date) {
-      return date < new Date(this.date).setHours(0, 0, 0, 0)
-    },
-    notBeforeEvent(date) {
-      return date <= new Date(this.date)
+    notBeforeDate(date) {
+      if (this.compareDate === null) {
+        return date < new Date()
+      } else {
+        return date <= new Date(this.compareDate)
+      }
     },
     getTimeFromDate(event) {
       if (this.inputTime) {
@@ -106,6 +111,9 @@ export default {
         // this.formDate = date_object.toUTCString()
       }
     },
+    changeDate(event) {
+      this.$emit('change-date', event)
+    },
     changeEventEnd(event) {
       this.$emit('change-event-end', event)
     },
@@ -117,6 +125,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.time-picker {
+  margin-left: $space-small;
+}
 .eventDatas {
   .chipbox {
     display: flex;

webapp/locales/de.json

@@ -786,9 +786,11 @@
     },
     "viewEvent": {
       "eventEnd": "Ende",
+      "eventEndTime": "Ende - Zeit",
       "eventIsOnline": "Online",
       "eventLocationName": "Stadt — z.B. Musterstraße 1, 12345 Musterstadt",
       "eventStart": "Beginn",
+      "eventStartTime": "Beginn - Zeit",
       "eventVenue": "Veranstaltungsort — z.B. Hinterhof, 1. OG, …",
       "title": "Veranstaltung"
     },

webapp/locales/en.json

@@ -786,9 +786,11 @@
     },
     "viewEvent": {
       "eventEnd": "End",
+      "eventEndTime": "End - Time",
       "eventIsOnline": "Online",
       "eventLocationName": "City — e.g. Example Street 1, 12345 City",
       "eventStart": "Start",
+      "eventStartTime": "Start - Time",
       "eventVenue": "Venue — e.g. Backyard, 1st Floor, …",
       "title": "Event"
     },