User Search Table

admin/src/components/Tables/SearchUserTable.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="search-user-table">
+    <b-table-lite :items="items" :fields="fields" caption-top striped hover stacked="md">
+      <template #cell(creation)="data">
+        <div v-html="data.value"></div>
+      </template>
+      <template #cell(show_details)="row">
+        <b-button
+          variant="info"
+          size="md"
+          v-if="row.item.emailChecked"
+          @click="rowToogleDetails(row, 0)"
+          class="mr-2"
+        >
+          <b-icon :icon="row.detailsShowing ? 'eye-slash-fill' : 'eye-fill'"></b-icon>
+        </b-button>
+      </template>
+      <template #cell(confirm_mail)="row">
+        <b-button
+          :variant="row.item.emailChecked ? 'success' : 'danger'"
+          size="md"
+          @click="rowToogleDetails(row, 1)"
+          class="mr-2"
+        >
+          <b-icon
+            :icon="row.item.emailChecked ? 'envelope-open' : 'envelope'"
+            aria-label="Help"
+          ></b-icon>
+        </b-button>
+      </template>
+      <template #cell(has_elopage)="row">
+        <b-icon
+          :variant="row.item.hasElopage ? 'success' : 'danger'"
+          :icon="row.item.hasElopage ? 'check-circle' : 'x-circle'"
+        ></b-icon>
+      </template>
+      <template #cell(transactions_list)="row">
+        <b-button variant="warning" size="md" @click="rowToogleDetails(row, 2)" class="mr-2">
+          <b-icon icon="list"></b-icon>
+        </b-button>
+      </template>
+      <template #row-details="row">
+        <row-details
+          :row="row"
+          type="singleCreation"
+          :slotName="slotName"
+          :index="slotIndex"
+          @row-toogle-details="rowToogleDetails"
+        >
+          <template #show-creation>
+            <div>
+              <creation-formular
+                type="singleCreation"
+                pagetype="singleCreation"
+                :creation="row.item.creation"
+                :item="row.item"
+                :creationUserData="creationUserData"
+                @update-user-data="updateUserData"
+              />
+            </div>
+          </template>
+          <template #show-register-mail>
+            <confirm-register-mail-formular
+              :checked="row.item.emailChecked"
+              :email="row.item.email"
+              :dateLastSend="$d(new Date(), 'long')"
+            />
+          </template>
+          <template #show-transaction-list>
+            <creation-transaction-list-formular :userId="row.item.userId" />
+          </template>
+        </row-details>
+      </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'
+
+const slotNames = ['show-creation', 'show-register-mail', 'show-transaction-list']
+
+export default {
+  name: 'SearchUserTable',
+  components: {
+    CreationFormular,
+    ConfirmRegisterMailFormular,
+    CreationTransactionListFormular,
+    RowDetails,
+  },
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    fields: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      slotIndex: 0,
+      openRow: null,
+      creationUserData: {},
+    }
+  },
+  methods: {
+    rowToogleDetails(row, index) {
+      if (this.openRow) {
+        if (this.openRow.index === row.index) {
+          if (index === this.slotIndex) {
+            row.toggleDetails()
+            this.openRow = null
+          } else {
+            this.slotIndex = index
+          }
+        } else {
+          this.openRow.toggleDetails()
+          row.toggleDetails()
+          this.slotIndex = index
+          this.openRow = row
+        }
+      } else {
+        row.toggleDetails()
+        this.slotIndex = index
+        this.openRow = row
+      }
+    },
+    updateUserData(rowItem, newCreation) {
+      rowItem.creation = newCreation
+    },
+  },
+  computed: {
+    slotName() {
+      return slotNames[this.slotIndex]
+    },
+  },
+}
+</script>

admin/src/pages/UserSearch.vue

@@ -22,7 +22,7 @@
         </b-input-group-append>
       </b-input-group>
     </div>
-    <user-table type="PageUserSearch" :itemsUser="searchResult" :fieldsTable="fields" />
+    <search-user-table type="PageUserSearch" :items="searchResult" :fields="fields" />
     <b-pagination
       pills
       size="lg"
@@ -35,7 +35,7 @@
   </div>
 </template>
 <script>
-import UserTable from '../components/UserTable.vue'
+import SearchUserTable from '../components/Tables/SearchUserTable.vue'
 import { searchUsers } from '../graphql/searchUsers'
 import { creationMonths } from '../mixins/creationMonths'
 
@@ -43,7 +43,7 @@ export default {
   name: 'UserSearch',
   mixins: [creationMonths],
   components: {
-    UserTable,
+    SearchUserTable,
   },
   data() {
     return {