Merge remote-tracking branch 'origin/user-page-apollo-toast-packages' into user-page-apollo-toast-packages

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>

admin/src/components/Tables/SearchUserTable.vue

@@ -13,45 +13,50 @@
       @row-clicked="onRowClicked"
     >
       <template #cell(creation)="data">
-        <div v-html="data.value"></div>
+        <div v-html="data.value" />
       </template>
 
       <template #cell(status)="row">
         <div class="text-right">
           <BAvatar v-if="row.item.deletedAt" class="mr-3 test-deleted-icon" variant="light">
-            <b-iconstack font-scale="2">
-              <IBi0Circle />
-              <b-icon stacked icon="slash-circle" variant="danger"></b-icon>
-            </b-iconstack>
+            <!-- <b-iconstack font-scale="2"> -->
+            <div>
+              <IOcticonPerson24 />
+              <IOcticonCircleSlash24 style="color: #f5365c" />
+            </div>
+            <!-- </b-iconstack> -->
           </BAvatar>
           <span v-if="!row.item.deletedAt">
-            <BAvatar
+            <IPhEnvelope
               v-if="!row.item.emailChecked"
-              icon="envelope"
+              style="color: #f5365c"
               class="align-center mr-3"
-              variant="danger"
-            ></BAvatar>
-
-            <BAvatar
+            />
+            <!-- <b-icon
               v-if="!row.item.hasElopage"
               variant="danger"
               class="mr-3"
               src="img/elopage_favicon.png"
-            ></BAvatar>
+            /> -->
           </span>
-          <b-icon
-            variant="dark"
-            :icon="row.detailsShowing ? 'caret-up-fill' : 'caret-down'"
+          <IPhCaretUpFill
+            v-if="row.detailsShowing === 'caret-up-fill'"
+            style="color: #212529"
             :title="row.item.enabled ? $t('enabled') : $t('deleted')"
-          ></b-icon>
+          />
+          <IPhCaretDown
+            style="color: #212529"
+            v-else
+            :title="row.item.enabled ? $t('enabled') : $t('deleted')"
+          />
         </div>
       </template>
 
       <template #row-details="row">
         <BCard ref="rowDetails" class="shadow-lg pl-3 pr-3 mb-5 bg-white rounded">
-          <BTabs content-class="mt-3">
+          <BTabs contentClass="mt-3">
             <BTab :title="$t('creation')" active :disabled="row.item.deletedAt !== null">
-              <CreationFormular
+              <creation-formular
                 v-if="!row.item.deletedAt"
                 pagetype="singleCreation"
                 :creation="row.item.creation"
@@ -61,7 +66,7 @@
               />
             </BTab>
             <BTab :title="$t('e_mail')" :disabled="row.item.deletedAt !== null">
-              <ConfirmRegisterMailFormular
+              <confirm-register-mail-formular
                 v-if="!row.item.deletedAt"
                 :checked="row.item.emailChecked"
                 :email="row.item.email"
@@ -72,18 +77,18 @@
                 "
               />
             </BTab>
-            <BTab :title="$t('creationList')" :disabled="row.item.deletedAt !== null">
-              <CreationTransactionList v-if="!row.item.deletedAt" :userId="row.item.userId" />
+            <!-- <BTab :title="$t('creationList')" :disabled="row.item.deletedAt !== null">
+              <creation-transaction-list v-if="!row.item.deletedAt" :userId="row.item.userId" />
             </BTab>
             <BTab :title="$t('transactionlink.name')" :disabled="row.item.deletedAt !== null">
-              <TransactionLinkList v-if="!row.item.deletedAt" :userId="row.item.userId" />
+              <transaction-link-list v-if="!row.item.deletedAt" :userId="row.item.userId" />
             </BTab>
             <BTab :title="$t('userRole.tabTitle')">
-              <ChangeUserRoleFormular :item="row.item" @updateRoles="updateRoles" />
-            </BTab>
-            <BTab v-if="$store.state.moderator.roles.includes('ADMIN')" :title="$t('delete_user')">
-              <DeletedUserFormular :item="row.item" @updateDeletedAt="updateDeletedAt" />
-            </BTab>
+              <change-user-role-formular :item="row.item" @updateRoles="updateRoles" />
+            </BTab> -->
+            <!-- <BTab v-if="store.state.moderator.roles.includes('ADMIN')" :title="$t('delete_user')">
+              <deleted-user-formular :item="row.item" @updateDeletedAt="updateDeletedAt" />
+            </BTab> -->
           </BTabs>
         </BCard>
       </template>
@@ -91,8 +96,14 @@
   </div>
 </template>
 <script setup>
-import { ref, computed, nextTick } from 'vue'
+import { ref, nextTick, onMounted, watch } from 'vue'
 import { BTable, BAvatar, BTab, BTabs, BCard } from 'bootstrap-vue-next'
+import CreationFormular from '../CreationFormular.vue'
+import ConfirmRegisterMailFormular from '../ConfirmRegisterMailFormular.vue'
+import CreationTransactionList from '../CreationTransactionList.vue'
+import TransactionLinkList from '../TransactionLinkList.vue'
+import ChangeUserRoleFormular from '../ChangeUserRoleFormular.vue'
+import DeletedUserFormular from '../DeletedUserFormular.vue'
 
 const props = defineProps({
   items: {
@@ -106,8 +117,19 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['updateRoles', 'updateDeletedAt'])
-
+const myItems = ref()
 const creationUserData = ref({})
+const rowDetails = ref()
+
+onMounted(() => {
+  setTimeout(() => {
+    myItems.value = props.items.map((item) => {
+      return { ...item, _showDetails: false }
+    })
+
+    myItems.value
+  }, 500)
+})
 
 const updateUserData = (rowItem, newCreation) => {
   rowItem.creation = newCreation
@@ -122,7 +144,10 @@ const updateDeletedAt = ({ userId, deletedAt }) => {
 }
 
 const onRowClicked = async (item) => {
-  const status = myItems.value.find((obj) => obj === item)._showDetails
+  const status = myItems.value.find((obj) => {
+    return obj.userId === item.userId
+  })?._showDetails
+
   myItems.value.forEach((obj) => {
     if (obj === item) {
       obj._showDetails = !status
@@ -130,15 +155,19 @@ const onRowClicked = async (item) => {
       obj._showDetails = false
     }
   })
+
   await nextTick()
   if (!status && rowDetails.value) {
-    rowDetails.value.focus()
+    // rowDetails.value.focus()
   }
 }
 
-const myItems = computed(() => {
-  return props.items.map((item) => {
-    return { ...item, _showDetails: false }
-  })
-})
+watch(
+  () => props.items,
+  (items) => {
+    myItems.value = items.map((item) => {
+      return { ...item, _showDetails: false }
+    })
+  },
+)
 </script>