make whole table row clickable

admin/src/components/DeletedUserFormular.vue

@@ -6,7 +6,7 @@
     <div v-else class="mt-5">
       <b-form-checkbox switch size="lg" v-model="checked">
         <div v-if="item.deletedAt === null">{{ $t('delete_user') }}</div>
-        <div>{{ item.deletedAt ? $t('undelete_user') :  $t('delete_user') }}</div>
+        <div>{{ item.deletedAt ? $t('undelete_user') : $t('delete_user') }}</div>
       </b-form-checkbox>
 
       <div class="mt-3 mb-5">

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,65 +47,50 @@
       </template>
 
       <template #row-details="row">
-        <row-details
-          :row="row"
-          type="singleCreation"
-          :slotName="slotName"
-          :index="slotIndex"
-          @row-toogle-details="rowToogleDetails"
-        >
-          <template #show-collapse>
-            <creation-formular
-              v-if="!row.item.deletedAt"
-              type="singleCreation"
-              pagetype="singleCreation"
-              :creation="row.item.creation"
-              :item="row.item"
-              :creationUserData="creationUserData"
-              @update-user-data="updateUserData"
-            />
-            <div v-else>{{ $t('userIsDeleted') }}</div>
-
-            <confirm-register-mail-formular
-              v-if="!row.item.deletedAt"
-              :checked="row.item.emailChecked"
-              :email="row.item.email"
-              :dateLastSend="
-                row.item.emailConfirmationSend
-                  ? $d(new Date(row.item.emailConfirmationSend), 'long')
-                  : ''
-              "
-            />
-            <creation-transaction-list-formular
-              v-if="!row.item.deletedAt"
-              :userId="row.item.userId"
-            />
-            <deleted-user-formular :item="row.item" @updateDeletedAt="updateDeletedAt" />
-          </template>
-        </row-details>
+        <b-card class="shadow-lg pl-3 pr-3 mb-5 bg-white rounded">
+          <creation-formular
+            v-if="!row.item.deletedAt"
+            type="singleCreation"
+            pagetype="singleCreation"
+            :creation="row.item.creation"
+            :item="row.item"
+            :creationUserData="creationUserData"
+            @update-user-data="updateUserData"
+          />
+          <div v-else>{{ $t('userIsDeleted') }}</div>
+          <confirm-register-mail-formular
+            v-if="!row.item.deletedAt"
+            :checked="row.item.emailChecked"
+            :email="row.item.email"
+            :dateLastSend="
+              row.item.emailConfirmationSend
+                ? $d(new Date(row.item.emailConfirmationSend), 'long')
+                : ''
+            "
+          />
+          <creation-transaction-list-formular
+            v-if="!row.item.deletedAt"
+            :userId="row.item.userId"
+          />
+          <deleted-user-formular :item="row.item" @updateDeletedAt="updateDeletedAt" />
+        </b-card>
       </template>
-    </b-table-lite>
+    </b-table>
   </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() {
-      return slotNames[this.slotIndex]
+    myItems() {
+      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,