make whole table row clickable

admin/src/components/RowDetails.vue

@@ -4,7 +4,7 @@
       <b-col></b-col>
     </b-row>
     <slot :name="slotName" />
-    <b-button size="sm" @click="$emit('row-toogle-details', row, index)">
+    <b-button size="sm" @click="$emit('row-toggle-details', row, index)">
       <b-icon
         :icon="type === 'PageCreationConfirm' ? 'x' : 'eye-slash-fill'"
         aria-label="Help"

admin/src/components/Tables/OpenCreationsTable.vue

@@ -12,7 +12,7 @@
         </b-button>
       </template>
       <template #cell(edit_creation)="row">
-        <b-button variant="info" size="md" @click="rowToogleDetails(row, 0)" class="mr-2">
+        <b-button variant="info" size="md" @click="rowToggleDetails(row, 0)" class="mr-2">
           <b-icon :icon="row.detailsShowing ? 'x' : 'pencil-square'" aria-label="Help"></b-icon>
         </b-button>
       </template>
@@ -27,7 +27,7 @@
           type="show-creation"
           slotName="show-creation"
           :index="0"
-          @row-toogle-details="rowToogleDetails"
+          @row-toggle-details="rowToggleDetails"
         >
           <template #show-creation>
             <div>

admin/src/components/Tables/SearchUserTable.vue

@@ -1,12 +1,22 @@
 <template>
   <div class="search-user-table">
-    <b-table-lite :items="items" :fields="fields" caption-top striped hover stacked="md">
+    <b-table
+      :items="myItems"
+      :fields="fields"
+      caption-top
+      striped
+      hover
+      stacked="md"
+      select-mode="single"
+      selectableonRowSelected
+      @row-clicked="onRowClicked"
+    >
       <template #cell(creation)="data">
-        <div v-html="data.value" @click="rowToogleDetails(row, 0)"></div>
+        <div v-html="data.value"></div>
       </template>
 
       <template #cell(status)="row">
-        <div @click="rowToogleDetails(row, 0)" class="text-right">
+        <div class="text-right">
           <b-avatar v-if="row.item.deletedAt" class="mr-3" variant="light">
             <b-iconstack font-scale="2">
               <b-icon stacked icon="person" variant="info" scale="0.75"></b-icon>
@@ -16,7 +26,6 @@
           <span v-if="!row.item.deletedAt">
             <b-avatar
               v-if="!row.item.emailChecked"
-              href="#baz"
               icon="envelope"
               class="align-center mr-3"
               variant="danger"
@@ -38,14 +47,7 @@
       </template>
 
       <template #row-details="row">
-        <row-details
+        <b-card class="shadow-lg pl-3 pr-3 mb-5 bg-white rounded">
-          :row="row"
-          type="singleCreation"
-          :slotName="slotName"
-          :index="slotIndex"
-          @row-toogle-details="rowToogleDetails"
-        >
-          <template #show-collapse>
           <creation-formular
             v-if="!row.item.deletedAt"
             type="singleCreation"
@@ -56,7 +58,6 @@
             @update-user-data="updateUserData"
           />
           <div v-else>{{ $t('userIsDeleted') }}</div>
-
           <confirm-register-mail-formular
             v-if="!row.item.deletedAt"
             :checked="row.item.emailChecked"
@@ -72,31 +73,24 @@
             :userId="row.item.userId"
           />
           <deleted-user-formular :item="row.item" @updateDeletedAt="updateDeletedAt" />
+        </b-card>
       </template>
-        </row-details>
+    </b-table>
-      </template>
-    </b-table-lite>
   </div>
 </template>
 <script>
 import CreationFormular from '../CreationFormular.vue'
 import ConfirmRegisterMailFormular from '../ConfirmRegisterMailFormular.vue'
-import RowDetails from '../RowDetails.vue'
 import CreationTransactionListFormular from '../CreationTransactionListFormular.vue'
 import DeletedUserFormular from '../DeletedUserFormular.vue'
-import { toggleRowDetails } from '../../mixins/toggleRowDetails'
-
-const slotNames = ['show-collapse']
 
 export default {
   name: 'SearchUserTable',
-  mixins: [toggleRowDetails],
   components: {
     CreationFormular,
     ConfirmRegisterMailFormular,
     CreationTransactionListFormular,
     DeletedUserFormular,
-    RowDetails,
   },
   props: {
     items: {
@@ -120,10 +114,22 @@ export default {
     updateDeletedAt({ userId, deletedAt }) {
       this.$emit('updateDeletedAt', userId, deletedAt)
     },
+    onRowClicked(item) {
+      const status = this.myItems.find((obj) => obj === item)._showDetails
+      this.myItems.forEach((obj) => {
+        if (obj === item) {
+          obj._showDetails = !status
+        } else {
+          obj._showDetails = false
+        }
+      })
+    },
   },
   computed: {
-    slotName() {
+    myItems() {
-      return slotNames[this.slotIndex]
+      return this.items.map((item) => {
+        return { ...item, _showDetails: false }
+      })
     },
   },
 }

admin/src/mixins/toggleRowDetails.js

@@ -7,7 +7,7 @@ export const toggleRowDetails = {
     }
   },
   methods: {
-    rowToogleDetails(row, index) {
+    rowToggleDetails(row, index) {
       if (this.openRow) {
         if (this.openRow.index === row.index) {
           if (index === this.slotIndex) {

admin/src/mixins/toggleRowDetails.test.js

@@ -35,7 +35,7 @@ describe('toggleRowDetails', () => {
 
   describe('no open row', () => {
     beforeEach(() => {
-      wrapper.vm.rowToogleDetails(row, 2)
+      wrapper.vm.rowToggleDetails(row, 2)
     })
 
     it('calls toggleDetails', () => {
@@ -70,7 +70,7 @@ describe('toggleRowDetails', () => {
     describe('row index is open row index', () => {
       describe('index is slot index', () => {
         beforeEach(() => {
-          wrapper.vm.rowToogleDetails(row, 0)
+          wrapper.vm.rowToggleDetails(row, 0)
         })
 
         it('calls toggleDetails', () => {
@@ -84,7 +84,7 @@ describe('toggleRowDetails', () => {
 
       describe('index is not slot index', () => {
         beforeEach(() => {
-          wrapper.vm.rowToogleDetails(row, 2)
+          wrapper.vm.rowToggleDetails(row, 2)
         })
 
         it('does not call toggleDetails', () => {
@@ -99,7 +99,7 @@ describe('toggleRowDetails', () => {
 
     describe('row index is not open row index', () => {
       beforeEach(() => {
-        wrapper.vm.rowToogleDetails(
+        wrapper.vm.rowToggleDetails(
           {
             toggleDetails: secondToggleDetailsMock,
             index: 2,