show an hide creation or confirm registermail formular

admin/src/components/ConfirmRegisterMailFormular.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="component-confirm-register-mail">
+    <div class="shadow p-3 mb-5 bg-white rounded">
+      admin/src/components/ConfirmRegisterMailFormular.vue
+    </div>
+  </div>
+</template>
+<script>
+// import { verifyLogin } from '../graphql/verifyLogin'
+// import { createPendingCreation } from '../graphql/createPendingCreation'
+export default {
+  name: 'ConfirmRegisterMail',
+  props: {},
+  data() {
+    return {}
+  },
+
+  methods: {},
+  created() {},
+}
+</script>

admin/src/components/UserTable.vue

@@ -49,15 +49,34 @@
       </template>
 
       <template #cell(show_details)="row">
-        <b-button variant="info" size="md" @click="row.toggleDetails" class="mr-2">
+        <b-button
+          variant="info"
+          size="md"
+          :ref="'showing_detals_' + row.detailsShowing"
+          @click="rowDetailsToogle(row, row.detailsShowing)"
+          class="mr-2"
+        >
           <b-icon v-if="row.detailsShowing" icon="eye-slash-fill" aria-label="Help"></b-icon>
           <b-icon v-else icon="eye-fill" aria-label="Help"></b-icon>
         </b-button>
       </template>
 
       <template #cell(confirm_mail)="row">
-        <b-button :variant="row.item.firstName === 'Peter' ? 'success' : 'danger' " size="md" @click="row.toggleDetails" class="mr-2">
-          <b-icon  :icon="row.item.firstName === 'Peter' ? 'envelope-open' : 'envelope' " aria-label="Help"></b-icon>
+        <b-button
+          :variant="row.item.firstName === 'Peter' ? 'success' : 'danger'"
+          size="md"
+          :ref="'showing_registermail_detals_' + row.detailsShowing"
+          @click="
+            row.item.firstName !== 'Peter'
+              ? rowDetailsToogleRegisterMail(row, row.detailsShowing)
+              : ''
+          "
+          class="mr-2"
+        >
+          <b-icon
+            :icon="row.item.firstName === 'Peter' ? 'envelope-open' : 'envelope'"
+            aria-label="Help"
+          ></b-icon>
         </b-button>
       </template>
 
@@ -67,27 +86,30 @@
             <b-col></b-col>
           </b-row>
           {{ type }}
-          <creation-formular
-            v-if="type === 'PageUserSearch'"
-            type="singleCreation"
-            :pagetype="type"
-            :creation="row.item.creation"
-            :item="row.item"
-            :creationUserData="creationUserData"
-            @update-creation-data="updateCreationData"
-            @update-user-data="updateUserData"
-          />
-          <edit-creation-formular
-            v-else
-            type="singleCreation"
-            :pagetype="type"
-            :creation="row.item.creation"
-            :item="row.item"
-            :row="row"
-            :creationUserData="creationUserData"
-            @update-creation-data="updateCreationData"
-            @update-user-data="updateUserData"
-          />
+          <div v-if="showCreationFormular">
+            <creation-formular
+              v-if="type === 'PageUserSearch'"
+              type="singleCreation"
+              :pagetype="type"
+              :creation="row.item.creation"
+              :item="row.item"
+              :creationUserData="creationUserData"
+              @update-creation-data="updateCreationData"
+              @update-user-data="updateUserData"
+            />
+            <edit-creation-formular
+              v-else
+              type="singleCreation"
+              :pagetype="type"
+              :creation="row.item.creation"
+              :item="row.item"
+              :row="row"
+              :creationUserData="creationUserData"
+              @update-creation-data="updateCreationData"
+              @update-user-data="updateUserData"
+            />
+          </div>
+          <confirm-register-mail-formular />
 
           <b-button size="sm" @click="row.toggleDetails">
             <b-icon
@@ -138,6 +160,7 @@
 <script>
 import CreationFormular from '../components/CreationFormular.vue'
 import EditCreationFormular from '../components/EditCreationFormular.vue'
+import ConfirmRegisterMailFormular from '../components/ConfirmRegisterMailFormular.vue'
 import { confirmPendingCreation } from '../graphql/confirmPendingCreation'
 
 export default {
@@ -168,9 +191,11 @@ export default {
   components: {
     CreationFormular,
     EditCreationFormular,
+    ConfirmRegisterMailFormular,
   },
   data() {
     return {
+      showCreationFormular: null,
       creationUserData: {},
       overlay: false,
       overlayBookmarkType: '',
@@ -187,6 +212,54 @@ export default {
     }
   },
   methods: {
+    rowDetailsToogle(row, details) {
+      console.log('rowDetailsToogle row', row)
+      console.log('rowDetailsToogle details', details)
+      console.log('this.showCreationFormular', this.showCreationFormular)
+      
+
+     //  if ( this.showCreationFormular === false) {
+     //    this.showCreationFormular = true
+     //    return
+     //  }else {
+
+      if (details) {
+        row.toggleDetails()
+        this.showCreationFormular = null
+        
+      }
+      if (!details) {
+        row.toggleDetails()
+        this.showCreationFormular = true
+        if (this.$refs.showing_detals_true !== undefined) {
+          this.$refs.showing_detals_true.click()
+         
+        }
+      }
+      // }
+    },
+
+    rowDetailsToogleRegisterMail(row, details) {
+      console.log('rowDetailsToogleRegisterMail row', row)
+      console.log('rowDetailsToogleRegisterMail details', details)
+      console.log('this.showCreationFormular', this.showCreationFormular)
+
+       if ( this.showCreationFormular === true) {
+         this.showCreationFormular = false
+         return
+       }
+      if (details) {
+        row.toggleDetails()
+        this.showCreationFormular === null
+      }
+      if (!details) {
+        row.toggleDetails()
+        this.showCreationFormular === false
+        if (this.$refs.showing_registermail_detals_true !== undefined) {
+          this.$refs.showing_registermail_detals_true.click()
+        }
+      }
+    },
     overlayShow(bookmarkType, item) {
       this.overlay = true
       this.overlayBookmarkType = bookmarkType