From 569ca948cc93cb346b0d134021d3580d450cf38c Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 14 Dec 2022 14:21:07 +0100
Subject: [PATCH] add new input component, time, hour in contributions

---
 .../Contributions/ContributionForm.vue        | 20 ++++-
 frontend/src/components/Inputs/InputTime.vue  | 73 +++++++++++++++++++
 frontend/src/locales/de.json                  |  1 +
 frontend/src/pages/Community.vue              |  1 +
 frontend/src/validation-rules.js              | 19 +++++
 5 files changed, 111 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/Inputs/InputTime.vue

diff --git a/frontend/src/components/Contributions/ContributionForm.vue b/frontend/src/components/Contributions/ContributionForm.vue
index c7c506a41..611e171ba 100644
--- a/frontend/src/components/Contributions/ContributionForm.vue
+++ b/frontend/src/components/Contributions/ContributionForm.vue
@@ -42,7 +42,13 @@
           :placeholder="$t('contribution.yourActivity')"
           :rules="{ required: true, min: 5, max: 255 }"
         />
-
+        <input-time
+          v-model="form.time"
+          :name="$t('form.time')"
+          :label="$t('form.time')"
+          placeholder="1"
+          :rules="{ required: true, gddCreationTime: [1, validMaxTime] }"
+        ></input-time>
         <!-- <validation-provider
         :rules="{
           min: minlength,
@@ -67,7 +73,7 @@
           v-model="form.amount"
           :name="$t('form.amount')"
           :label="$t('form.amount')"
-          :placeholder="'20'"
+          placeholder="20"
           :rules="{ required: true, gddSendAmount: [20, validMaxGDD] }"
           typ="ContributionForm"
         ></input-amount>
@@ -113,6 +119,7 @@
   </div>
 </template>
 <script>
+import InputTime from '@/components/Inputs/InputTime.vue'
 import InputAmount from '@/components/Inputs/InputAmount.vue'
 import InputTextarea from '@/components/Inputs/InputTextarea.vue'
 
@@ -121,6 +128,7 @@ const PATTERN_NON_DIGIT = /\D/g
 export default {
   name: 'ContributionForm',
   components: {
+    InputTime,
     InputAmount,
     InputTextarea,
   },
@@ -136,7 +144,7 @@ export default {
       minlength: 5,
       maxlength: 255,
       maximalDate: new Date(),
-      form: this.value, // includes 'id'
+      form: this.value, // includes 'id' and time
     }
   },
   methods: {
@@ -154,6 +162,7 @@ export default {
       this.form.id = null
       this.form.date = ''
       this.form.memo = ''
+      this.form.time = 0
       this.form.amount = ''
     },
     // textForMonth(date, availableAmount) {
@@ -180,6 +189,11 @@ export default {
     validMaxGDD() {
       return Number(this.isThisMonth ? this.maxGddThisMonth : this.maxGddLastMonth)
     },
+    validMaxTime() {
+      console.log(this.validMaxGDD)
+      console.log(this.validMaxGDD / 20)
+      return Number(this.validMaxGDD / 20)
+    },
   },
 }
 </script>
diff --git a/frontend/src/components/Inputs/InputTime.vue b/frontend/src/components/Inputs/InputTime.vue
new file mode 100644
index 000000000..073e98d06
--- /dev/null
+++ b/frontend/src/components/Inputs/InputTime.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="input-time">
+    <validation-provider
+      tag="div"
+      :rules="rules"
+      :name="name"
+      v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
+    >
+      <b-form-group :label="label" :label-for="labelFor">
+        <b-form-input
+          v-model="currentValue"
+          v-bind="ariaInput"
+          :id="labelFor"
+          :name="name"
+          :placeholder="placeholder"
+          type="number"
+          :state="validated ? valid : false"
+        ></b-form-input>
+        <b-form-invalid-feedback v-bind="ariaMsg">
+          {{ errors[0] }}
+        </b-form-invalid-feedback>
+      </b-form-group>
+    </validation-provider>
+  </div>
+</template>
+<script>
+export default {
+  name: 'InputTime',
+  props: {
+    rules: {
+      type: Object,
+      default: () => {},
+    },
+    name: { type: String, required: true, default: 'Time' },
+    label: { type: String, required: true, default: 'Time' },
+    placeholder: { type: String, required: true, default: 'Time' },
+    value: { type: Number, required: true, default: 0 },
+  },
+  data() {
+    return {
+      currentValue: 0,
+    }
+  },
+  computed: {
+    labelFor() {
+      return this.name + '-input-field'
+    },
+  },
+  watch: {
+    currentValue() {
+      this.$emit('input', this.currentValue)
+    },
+    value() {
+      console.log('value', this.value)
+      console.log('value !== currentValue', this.value !== this.currentValue)
+      // this.value = Number(this.value)
+      if (Number(this.value) !== this.currentValue) this.currentValue = this.value
+      this.currentValue = Number(this.currentValue)
+      // this.value = Number(this.value)
+      console.log('value', typeof(this.value))
+      console.log('currentValue', typeof(this.currentValue))
+    },
+  },
+  methods: {
+    // normalizeTime(isValid) {
+    //   this.timeFocused = false
+    //   if (!isValid) return
+    //   // this.timeValue = Number(this.currentValue.replace(',', '.'))
+    //   this.currentValue = this.timeValue
+    // },
+  },
+}
+</script>
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index c8d573615..66886ac90 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -151,6 +151,7 @@
     "to": "bis",
     "to1": "an",
     "validation": {
+      "gddCreationTime": "Das Feld {_field_} muss eine Zahl zwischen {min} und {max} mit höchstens zwei Nachkommastellen sein",
       "gddSendAmount": "Das Feld {_field_} muss eine Zahl zwischen {min} und {max} mit höchstens zwei Nachkommastellen sein",
       "is-not": "Du kannst dir selbst keine Gradidos überweisen",
       "usernmae-regex": "Der Username muss mit einem Buchstaben beginnen, auf den mindestens zwei alpha-numerische Zeichen folgen müssen.",
diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index fecc1c65f..44535aafa 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -81,6 +81,7 @@ export default {
         id: null,
         date: '',
         memo: '',
+        time: 0,
         amount: '',
       },
       updateAmount: '',
diff --git a/frontend/src/validation-rules.js b/frontend/src/validation-rules.js
index a06eab657..ef597ff3b 100644
--- a/frontend/src/validation-rules.js
+++ b/frontend/src/validation-rules.js
@@ -54,6 +54,25 @@ export const loadAllRules = (i18nCallback) => {
     },
   })
 
+  extend('gddCreationTime', {
+    validate(value, { min, max }) {
+      console.log(value)
+      console.log(min)
+      console.log(max)
+      console.log(typeof(value))
+      console.log(typeof(min))
+      console.log(typeof(max))
+      // value = value.replace(',', '.')
+      return Number(value) >= min && Number(value) <= max
+    },
+    params: ['min', 'max'],
+    message: (_, values) => {
+      // values.min = values.min
+      // values.max = values.max
+      return i18nCallback.t('form.validation.gddCreationTime', values)
+    },
+  })
+
   // eslint-disable-next-line camelcase
   extend('is_not', {
     // eslint-disable-next-line camelcase