From 06a48f14636d0a834da6869de86bbc51be29bc87 Mon Sep 17 00:00:00 2001
From: Kamila <kamila.lach1@gmail.com>
Date: Tue, 23 Jul 2024 17:15:51 +0200
Subject: [PATCH] rework creation formular component

---
 admin/src/components/CreationFormular.vue | 300 +++++++++++-----------
 1 file changed, 152 insertions(+), 148 deletions(-)

diff --git a/admin/src/components/CreationFormular.vue b/admin/src/components/CreationFormular.vue
index df8611c3b..69930310b 100644
--- a/admin/src/components/CreationFormular.vue
+++ b/admin/src/components/CreationFormular.vue
@@ -2,178 +2,182 @@
   <div class="component-creation-formular">
     {{ $t('creation_form.form') }}
     <div class="shadow p-3 mb-5 bg-white rounded">
-      <b-form ref="creationForm">
-        <div class="ml-4">
+      <BForm ref="creationForm">
+        <div class="m-4 mt-0">
           <label>{{ $t('creation_form.select_month') }}</label>
-        </div>
-        <b-row class="ml-4">
-          <b-form-radio-group
+          <BFormRadioGroup
             v-model="selected"
-            :options="radioOptions"
+            :options="radioOptions()"
             value-field="item"
             text-field="name"
             name="month-selection"
-          ></b-form-radio-group>
-        </b-row>
-        <b-row class="m-4" v-show="selected !== ''">
+            id="radio-group-month-selection"
+          />
+        </div>
+        <div class="m-4" v-if="selected">
           <label>{{ $t('creation_form.select_value') }}</label>
           <div>
-            <b-input-group prepend="GDD" append=".00">
-              <b-form-input
-                type="number"
-                v-model="value"
-                :min="rangeMin"
-                :max="rangeMax"
-              ></b-form-input>
-            </b-input-group>
-            <b-input-group prepend="0" :append="String(rangeMax)" class="mt-3">
-              <b-form-input
-                type="range"
-                v-model="value"
-                :min="rangeMin"
-                :max="rangeMax"
-                step="10"
-              ></b-form-input>
-            </b-input-group>
+            <BInputGroup prepend="GDD" append=".00">
+              <BFormInput type="number" v-model="value" :min="rangeMin" :max="rangeMax" />
+            </BInputGroup>
+            <BInputGroup prepend="0" :append="String(rangeMax)" class="mt-3">
+              <BFormInput type="range" v-model="value" :min="rangeMin" :max="rangeMax" step="10" />
+            </BInputGroup>
           </div>
-        </b-row>
+        </div>
         <div class="m-4">
           <label>{{ $t('creation_form.enter_text') }}</label>
           <div>
-            <b-form-textarea
+            <BFormTextarea
               id="textarea-state"
               v-model="text"
               :state="text.length >= 10"
               :placeholder="$t('creation_form.min_characters')"
               rows="3"
-            ></b-form-textarea>
+            />
           </div>
         </div>
-        <b-row class="m-4">
-          <b-col class="text-left">
-            <b-button type="reset" variant="danger" @click="$refs.creationForm.reset()">
+        <div class="m-4 d-flex">
+          <BCol class="text-left">
+            <BButton type="reset" variant="danger" @click="onReset()">
               {{ $t('creation_form.reset') }}
-            </b-button>
-          </b-col>
-          <b-col class="text-center">
-            <div class="text-right">
-              <b-button
-                v-if="pagetype === 'PageCreationConfirm'"
-                type="button"
-                variant="success"
-                class="test-submit"
-                @click="submitCreation"
-                :disabled="selected === '' || value <= 0 || text.length < 10"
-              >
-                {{ $t('creation_form.update_creation') }}
-              </b-button>
-              <b-button
-                v-else
-                type="button"
-                variant="success"
-                class="test-submit"
-                @click="submitCreation"
-                :disabled="selected === '' || value <= 0 || text.length < 10"
-              >
-                {{ $t('creation_form.submit_creation') }}
-              </b-button>
-            </div>
-          </b-col>
-        </b-row>
-      </b-form>
+            </BButton>
+          </BCol>
+          <div class="text-right">
+            <BButton
+              v-if="pagetype === 'PageCreationConfirm'"
+              type="button"
+              variant="success"
+              class="test-submit"
+              @click="submitCreation"
+              :disabled="selected === '' || value <= 0 || text.length < 10"
+            >
+              {{ $t('creation_form.update_creation') }}
+            </BButton>
+            <BButton
+              v-else
+              type="button"
+              variant="success"
+              class="test-submit"
+              @click="submitCreation"
+              :disabled="selected === '' || value <= 0 || text.length < 10"
+            >
+              {{ $t('creation_form.submit_creation') }}
+            </BButton>
+          </div>
+        </div>
+      </BForm>
     </div>
   </div>
 </template>
-<script>
+
+<script setup>
+import { ref, watch, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useMutation, useQuery } from '@vue/apollo-composable'
+import { useStore } from 'vuex'
 import { adminCreateContribution } from '../graphql/adminCreateContribution'
-import { creationMonths } from '../mixins/creationMonths'
-export default {
-  name: 'CreationFormular',
-  mixins: [creationMonths],
-  props: {
-    pagetype: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    item: {
-      type: Object,
-      required: false,
-      default() {
-        return {}
-      },
-    },
-    items: {
-      type: Array,
-      required: false,
-      default() {
-        return []
-      },
-    },
-    creationUserData: {
-      type: Object,
-      required: false,
-      default() {
-        return {}
-      },
-    },
+import useCreationMonths from '../composables/useCreationMonths'
+import {
+  BFormInput,
+  BFormRadioGroup,
+  BForm,
+  BInputGroup,
+  BButton,
+  BCol,
+  BFormTextarea,
+} from 'bootstrap-vue-next'
+
+const { radioOptions } = useCreationMonths()
+
+const props = defineProps({
+  pagetype: {
+    type: String,
+    required: false,
+    default: '',
   },
-  data() {
-    return {
-      text: !this.creationUserData.memo ? '' : this.creationUserData.memo,
-      value: !this.creationUserData.amount ? 0 : this.creationUserData.amount,
-      rangeMin: 0,
-      rangeMax: 1000,
-      selected: '',
-      userId: this.item.userId,
+  item: {
+    type: Object,
+    required: false,
+    default: () => ({}),
+  },
+  items: {
+    type: Array,
+    required: false,
+    default: () => [],
+  },
+  creationUserData: {
+    type: Object,
+    required: false,
+    default: () => ({}),
+  },
+})
+
+const { t } = useI18n()
+const store = useStore()
+
+const text = ref(props.creationUserData.memo || '')
+const value = ref(props.creationUserData.amount || 0)
+const rangeMin = ref(0)
+const rangeMax = ref(1000)
+const selected = ref()
+const creationForm = ref(null)
+
+const openCreations = computed(() => store.state.openCreations)
+
+const updateRadioSelected = (name) => {
+  text.value = `${t('creation_form.creation_for')} ${name?.short} ${name?.year}`
+  rangeMin.value = 0
+  rangeMax.value = Number(name?.creation)
+}
+
+const onReset = () => {
+  text.value = ''
+  value.value = 0
+  selected.value = null
+}
+
+const { mutate: createContribution } = useMutation(adminCreateContribution)
+
+const { refetch } = useQuery(openCreations)
+
+const submitCreation = async () => {
+  try {
+    const result = await createContribution({
+      email: props.item.email,
+      creationDate: selected.value.date,
+      amount: Number(value.value),
+      memo: text.value,
+    })
+
+    emit('update-user-data', props.item, result.data.adminCreateContribution)
+
+    store.commit('openCreationsPlus', 1)
+
+    // toast.success(
+    //   t('creation_form.toasted', {
+    //     value: value.value,
+    //     email: props.item.email,
+    //   }),
+    // )
+
+    onReset()
+  } catch (error) {
+    // toast.error(error.message)
+    onReset()
+  } finally {
+    refetch()
+    selected.value = ''
+  }
+}
+
+watch(
+  () => selected.value,
+  async (newValue, oldValue) => {
+    console.log(selected.value)
+    if (newValue !== oldValue && selected.value != '') {
+      updateRadioSelected(newValue)
     }
   },
-  methods: {
-    updateRadioSelected(name) {
-      // do we want to reset the memo everytime the month changes?
-      this.text = this.$t('creation_form.creation_for') + ' ' + name.short + ' ' + name.year
-      this.rangeMin = 0
-      this.rangeMax = Number(name.creation)
-    },
-    submitCreation() {
-      this.$apollo
-        .mutate({
-          mutation: adminCreateContribution,
-          variables: {
-            email: this.item.email,
-            creationDate: this.selected.date,
-            amount: Number(this.value),
-            memo: this.text,
-          },
-        })
-        .then((result) => {
-          this.$emit('update-user-data', this.item, result.data.adminCreateContribution)
-          this.$store.commit('openCreationsPlus', 1)
-          this.toastSuccess(
-            this.$t('creation_form.toasted', {
-              value: this.value,
-              email: this.item.email,
-            }),
-          )
-          // what is this? Tests says that this.text is not reseted
-          this.$refs.creationForm.reset()
-          this.value = 0
-        })
-        .catch((error) => {
-          this.toastError(error.message)
-          this.$refs.creationForm.reset()
-          this.value = 0
-        })
-        .finally(() => {
-          this.$apollo.queries.OpenCreations.refetch()
-          this.selected = ''
-        })
-    },
-  },
-  watch: {
-    selected() {
-      this.updateRadioSelected(this.selected)
-    },
-  },
-}
+)
 </script>