WIP

admin/src/components/Tables/SearchUserTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="search-user-table">
-    <b-table
+    <BTable
       tbody-tr-class="pointer"
       :items="myItems"
       :fields="fields"
@@ -18,26 +18,26 @@
 
       <template #cell(status)="row">
         <div class="text-right">
-          <b-avatar v-if="row.item.deletedAt" class="mr-3 test-deleted-icon" variant="light">
+          <BAvatar v-if="row.item.deletedAt" class="mr-3 test-deleted-icon" variant="light">
             <b-iconstack font-scale="2">
               <b-icon stacked icon="person" variant="info" scale="0.75"></b-icon>
               <b-icon stacked icon="slash-circle" variant="danger"></b-icon>
             </b-iconstack>
-          </b-avatar>
+          </BAvatar>
           <span v-if="!row.item.deletedAt">
-            <b-avatar
+            <BAvatar
               v-if="!row.item.emailChecked"
               icon="envelope"
               class="align-center mr-3"
               variant="danger"
-            ></b-avatar>
+            ></BAvatar>
 
-            <b-avatar
+            <BAvatar
               v-if="!row.item.hasElopage"
               variant="danger"
               class="mr-3"
               src="img/elopage_favicon.png"
-            ></b-avatar>
+            ></BAvatar>
           </span>
           <b-icon
             variant="dark"
@@ -48,10 +48,10 @@
       </template>
 
       <template #row-details="row">
-        <b-card ref="rowDetails" class="shadow-lg pl-3 pr-3 mb-5 bg-white rounded">
-          <b-tabs content-class="mt-3">
-            <b-tab :title="$t('creation')" active :disabled="row.item.deletedAt !== null">
-              <creation-formular
+        <BCard ref="rowDetails" class="shadow-lg pl-3 pr-3 mb-5 bg-white rounded">
+          <BTabs content-class="mt-3">
+            <BTab :title="$t('creation')" active :disabled="row.item.deletedAt !== null">
+              <CreationFormular
                 v-if="!row.item.deletedAt"
                 pagetype="singleCreation"
                 :creation="row.item.creation"
@@ -59,9 +59,9 @@
                 :creationUserData="creationUserData"
                 @update-user-data="updateUserData"
               />
-            </b-tab>
-            <b-tab :title="$t('e_mail')" :disabled="row.item.deletedAt !== null">
-              <confirm-register-mail-formular
+            </BTab>
+            <BTab :title="$t('e_mail')" :disabled="row.item.deletedAt !== null">
+              <ConfirmRegisterMailFormular
                 v-if="!row.item.deletedAt"
                 :checked="row.item.emailChecked"
                 :email="row.item.email"
@@ -71,89 +71,74 @@
                     : ''
                 "
               />
-            </b-tab>
-            <b-tab :title="$t('creationList')" :disabled="row.item.deletedAt !== null">
-              <creation-transaction-list v-if="!row.item.deletedAt" :userId="row.item.userId" />
-            </b-tab>
-            <b-tab :title="$t('transactionlink.name')" :disabled="row.item.deletedAt !== null">
-              <transaction-link-list v-if="!row.item.deletedAt" :userId="row.item.userId" />
-            </b-tab>
-            <b-tab :title="$t('userRole.tabTitle')">
-              <change-user-role-formular :item="row.item" @updateRoles="updateRoles" />
-            </b-tab>
-            <b-tab v-if="$store.state.moderator.roles.includes('ADMIN')" :title="$t('delete_user')">
-              <deleted-user-formular :item="row.item" @updateDeletedAt="updateDeletedAt" />
-            </b-tab>
-          </b-tabs>
-        </b-card>
+            </BTab>
+            <BTab :title="$t('creationList')" :disabled="row.item.deletedAt !== null">
+              <CreationTransactionList 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" />
+            </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>
+          </BTabs>
+        </BCard>
       </template>
-    </b-table>
+    </BTable>
   </div>
 </template>
-<script>
-import CreationFormular from '../CreationFormular'
-import ConfirmRegisterMailFormular from '../ConfirmRegisterMailFormular'
-import CreationTransactionList from '../CreationTransactionList'
-import TransactionLinkList from '../TransactionLinkList'
-import ChangeUserRoleFormular from '../ChangeUserRoleFormular'
-import DeletedUserFormular from '../DeletedUserFormular'
+<script setup>
+import { ref, computed, nextTick } from 'vue'
+import { BTable, BAvatar, BTab, BTabs, BCard } from 'bootstrap-vue-next'
 
-export default {
-  name: 'SearchUserTable',
-  components: {
-    CreationFormular,
-    ConfirmRegisterMailFormular,
-    CreationTransactionList,
-    TransactionLinkList,
-    ChangeUserRoleFormular,
-    DeletedUserFormular,
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true,
   },
-  props: {
-    items: {
-      type: Array,
-      required: true,
-    },
-    fields: {
-      type: Array,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      creationUserData: {},
-    }
-  },
-  methods: {
-    updateUserData(rowItem, newCreation) {
-      rowItem.creation = newCreation
-    },
-    updateRoles({ userId, roles }) {
-      this.$emit('updateRoles', userId, roles)
-    },
-    updateDeletedAt({ userId, deletedAt }) {
-      this.$emit('updateDeletedAt', userId, deletedAt)
-    },
-    async 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
-        }
-      })
-      await this.$nextTick()
-      if (!status && this.$refs.rowDetails) {
-        this.$refs.rowDetails.focus()
-      }
-    },
-  },
-  computed: {
-    myItems() {
-      return this.items.map((item) => {
-        return { ...item, _showDetails: false }
-      })
-    },
+  fields: {
+    type: Array,
+    required: true,
   },
+})
+
+const emit = defineEmits(['updateRoles', 'updateDeletedAt'])
+
+const creationUserData = ref({})
+
+const updateUserData = (rowItem, newCreation) => {
+  rowItem.creation = newCreation
 }
+
+const updateRoles = ({ userId, roles }) => {
+  emit('updateRoles', userId, roles)
+}
+
+const updateDeletedAt = ({ userId, deletedAt }) => {
+  emit('updateDeletedAt', userId, deletedAt)
+}
+
+const onRowClicked = async (item) => {
+  const status = myItems.value.find((obj) => obj === item)._showDetails
+  myItems.value.forEach((obj) => {
+    if (obj === item) {
+      obj._showDetails = !status
+    } else {
+      obj._showDetails = false
+    }
+  })
+  await nextTick()
+  if (!status && rowDetails.value) {
+    rowDetails.value.focus()
+  }
+}
+
+const myItems = computed(() => {
+  return props.items.map((item) => {
+    return { ...item, _showDetails: false }
+  })
+})
 </script>

admin/src/pages/UserSearch.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="user-search">
     <div class="user-search-first-div">
-      <b-button class="unconfirmedRegisterMails" variant="light" @click="unconfirmedRegisterMails">
+      <BButton class="unconfirmedRegisterMails" variant="light" @click="unconfirmedRegisterMails">
         <b-icon icon="envelope" variant="danger"></b-icon>
         {{
           filters.byActivated === null
@@ -10,8 +10,8 @@
             ? $t('unregistered_emails')
             : ''
         }}
-      </b-button>
-      <b-button class="deletedUserSearch" variant="light" @click="deletedUserSearch">
+      </BButton>
+      <BButton class="deletedUserSearch" variant="light" @click="deletedUserSearch">
         <b-icon icon="x-circle" variant="danger"></b-icon>
         {{
           filters.byDeleted === null
@@ -20,18 +20,18 @@
             ? $t('deleted_user')
             : ''
         }}
-      </b-button>
+      </BButton>
     </div>
     <label>{{ $t('user_search') }}</label>
-    <user-query class="mb-4 mt-2" v-model="criteria" />
-    <search-user-table
+    <UserQuery class="mb-4 mt-2" v-model="criteria" />
+    <SearchUserTable
       type="PageUserSearch"
       :items="searchResult"
       :fields="fields"
       @updateRoles="updateRoles"
       @updateDeletedAt="updateDeletedAt"
     />
-    <b-pagination
+    <BPagination
       pills
       size="lg"
       v-model="currentPage"
@@ -39,111 +39,86 @@
       :total-rows="rows"
       align="center"
       :hide-ellipsis="true"
-    ></b-pagination>
-    <div></div>
+    ></BPagination>
   </div>
 </template>
-<script>
-import SearchUserTable from '../components/Tables/SearchUserTable'
+<script setup>
+import { ref, reactive, computed, onMounted, watch } from 'vue'
 import { searchUsers } from '../graphql/searchUsers'
-import { creationMonths } from '../mixins/creationMonths'
+import useCreationMonths from '../composables/useCreationMonths'
+import { useApolloClient } from '@vue/apollo-composable'
+import SearchUserTable from '../components/Tables/SearchUserTable'
 import UserQuery from '../components/UserQuery'
+import { BPagination, BButton } from 'bootstrap-vue-next'
 
-export default {
-  name: 'UserSearch',
-  mixins: [creationMonths],
-  components: {
-    SearchUserTable,
-    UserQuery,
-  },
-  data() {
-    return {
-      showArrays: false,
-      searchResult: [],
-      criteria: '',
-      filters: {
-        byActivated: null,
-        byDeleted: null,
+const searchResult = ref([])
+const criteria = ref('')
+const filters = reactive({
+  byActivated: null,
+  byDeleted: null,
+})
+const rows = ref(0)
+const currentPage = ref(1)
+const perPage = ref(25)
+
+const { creationLabel } = useCreationMonths()
+
+const apollo = useApolloClient()
+
+const getUsers = async () => {
+  try {
+    const result = await apollo.query({
+      query: searchUsers,
+      variables: {
+        query: this.criteria,
+        filters: this.filters,
+        currentPage: this.currentPage,
+        pageSize: this.perPage,
+        order: 'DESC',
       },
-      rows: 0,
-      currentPage: 1,
-      perPage: 25,
-      now: Date.now(),
-    }
-  },
-  methods: {
-    unconfirmedRegisterMails() {
-      this.filters.byActivated = this.filters.byActivated === null ? false : null
-      this.getUsers()
-    },
-    deletedUserSearch() {
-      this.filters.byDeleted = this.filters.byDeleted === null ? true : null
-      this.getUsers()
-    },
-    getUsers() {
-      this.$apollo
-        .query({
-          query: searchUsers,
-          variables: {
-            query: this.criteria,
-            filters: this.filters,
-            currentPage: this.currentPage,
-            pageSize: this.perPage,
-            order: 'DESC',
-          },
-          fetchPolicy: 'no-cache',
-        })
-        .then((result) => {
-          this.rows = result.data.searchUsers.userCount
-          this.searchResult = result.data.searchUsers.userList
-        })
-        .catch((error) => {
-          this.toastError(error.message)
-        })
-    },
-    updateRoles(userId, roles) {
-      this.searchResult.find((obj) => obj.userId === userId).roles = roles
-    },
-    updateDeletedAt(userId, deletedAt) {
-      this.searchResult.find((obj) => obj.userId === userId).deletedAt = deletedAt
-      this.toastSuccess(deletedAt ? this.$t('user_deleted') : this.$t('user_recovered'))
-    },
-  },
-  watch: {
-    currentPage() {
-      this.getUsers()
-    },
-    criteria() {
-      this.getUsers()
-    },
-  },
-  computed: {
-    fields() {
-      return [
-        { key: 'email', label: this.$t('e_mail') },
-        { key: 'firstName', label: this.$t('firstname') },
-        { key: 'lastName', label: this.$t('lastname') },
-        {
-          key: 'creation',
-          label: this.creationLabel,
-          formatter: (value, key, item) => {
-            return value.join(' | ')
-          },
-        },
-        // { key: 'show_details', label: this.$t('details') },
-        // { key: 'confirm_mail', label: this.$t('confirmed') },
-        // { key: 'has_elopage', label: 'elopage' },
-        // { key: 'transactions_list', label: this.$t('transaction') },
-        { key: 'status', label: this.$t('status') },
-      ]
-    },
-  },
-  created() {
-    this.getUsers()
-  },
+      fetchPolicy: 'no-cache',
+    })
+    rows.value = result.data.searchUsers.userCount
+    searchResult.value = result.data.searchUsers.userList
+  } catch (error) {
+    toastError(error.message)
+  }
 }
+
+const unconfirmedRegisterMails = () => {
+  filters.byActivated = filters.byActivated === null ? false : null
+  getUsers()
+}
+
+const deletedUserSearch = () => {
+  filters.byDeleted = filters.byDeleted === null ? true : null
+  getUsers()
+}
+
+const fields = computed(() => [
+  // { key: 'email', label: $t('e_mail') },
+  // { key: 'firstName', label: $t('firstname') },
+  // { key: 'lastName', label: $t('lastname') },
+  {
+    key: 'creation',
+    label: creationLabel,
+    formatter: (value, key, item) => {
+      return value.join(' | ')
+    },
+  },
+  // { key: 'show_details', label: $t('details') },
+  // { key: 'confirm_mail', label: $t('confirmed') },
+  // { key: 'has_elopage', label: 'elopage' },
+  // { key: 'transactions_list', label: $t('transaction') },
+  // { key: 'status', label: this.$t('status') },
+])
+
+watch(currentPage, getUsers)
+watch(criteria, getUsers)
+
+onMounted(getUsers)
 </script>
-<style>
+<style scoped>
 .user-search-first-div {
   text-align: right;
 }