From a9c74418e89c35239859830c1cb09686ab82cb7c Mon Sep 17 00:00:00 2001
From: Kamila <kamila.lach1@gmail.com>
Date: Tue, 23 Jul 2024 17:15:36 +0200
Subject: [PATCH] wip on search user

---
 .../src/components/Tables/SearchUserTable.vue | 101 +++++++++++-------
 1 file changed, 65 insertions(+), 36 deletions(-)

diff --git a/admin/src/components/Tables/SearchUserTable.vue b/admin/src/components/Tables/SearchUserTable.vue
index 9cd2d5304..3ac7b1538 100644
--- a/admin/src/components/Tables/SearchUserTable.vue
+++ b/admin/src/components/Tables/SearchUserTable.vue
@@ -13,45 +13,50 @@
       @row-clicked="onRowClicked"
     >
       <template #cell(creation)="data">
-        <div v-html="data.value"></div>
+        <div v-html="data.value" />
       </template>
 
       <template #cell(status)="row">
         <div class="text-right">
           <BAvatar v-if="row.item.deletedAt" class="mr-3 test-deleted-icon" variant="light">
-            <b-iconstack font-scale="2">
-              <IBi0Circle />
-              <b-icon stacked icon="slash-circle" variant="danger"></b-icon>
-            </b-iconstack>
+            <!-- <b-iconstack font-scale="2"> -->
+            <div>
+              <IOcticonPerson24 />
+              <IOcticonCircleSlash24 style="color: #f5365c" />
+            </div>
+            <!-- </b-iconstack> -->
           </BAvatar>
           <span v-if="!row.item.deletedAt">
-            <BAvatar
+            <IPhEnvelope
               v-if="!row.item.emailChecked"
-              icon="envelope"
+              style="color: #f5365c"
               class="align-center mr-3"
-              variant="danger"
-            ></BAvatar>
-
-            <BAvatar
+            />
+            <!-- <b-icon
               v-if="!row.item.hasElopage"
               variant="danger"
               class="mr-3"
               src="img/elopage_favicon.png"
-            ></BAvatar>
+            /> -->
           </span>
-          <b-icon
-            variant="dark"
-            :icon="row.detailsShowing ? 'caret-up-fill' : 'caret-down'"
+          <IPhCaretUpFill
+            v-if="row.detailsShowing === 'caret-up-fill'"
+            style="color: #212529"
             :title="row.item.enabled ? $t('enabled') : $t('deleted')"
-          ></b-icon>
+          />
+          <IPhCaretDown
+            style="color: #212529"
+            v-else
+            :title="row.item.enabled ? $t('enabled') : $t('deleted')"
+          />
         </div>
       </template>
 
       <template #row-details="row">
         <BCard ref="rowDetails" class="shadow-lg pl-3 pr-3 mb-5 bg-white rounded">
-          <BTabs content-class="mt-3">
+          <BTabs contentClass="mt-3">
             <BTab :title="$t('creation')" active :disabled="row.item.deletedAt !== null">
-              <CreationFormular
+              <creation-formular
                 v-if="!row.item.deletedAt"
                 pagetype="singleCreation"
                 :creation="row.item.creation"
@@ -61,7 +66,7 @@
               />
             </BTab>
             <BTab :title="$t('e_mail')" :disabled="row.item.deletedAt !== null">
-              <ConfirmRegisterMailFormular
+              <confirm-register-mail-formular
                 v-if="!row.item.deletedAt"
                 :checked="row.item.emailChecked"
                 :email="row.item.email"
@@ -72,18 +77,18 @@
                 "
               />
             </BTab>
-            <BTab :title="$t('creationList')" :disabled="row.item.deletedAt !== null">
-              <CreationTransactionList v-if="!row.item.deletedAt" :userId="row.item.userId" />
+            <!-- <BTab :title="$t('creationList')" :disabled="row.item.deletedAt !== null">
+              <creation-transaction-list 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" />
+              <transaction-link-list 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>
+              <change-user-role-formular :item="row.item" @updateRoles="updateRoles" />
+            </BTab> -->
+            <!-- <BTab v-if="store.state.moderator.roles.includes('ADMIN')" :title="$t('delete_user')">
+              <deleted-user-formular :item="row.item" @updateDeletedAt="updateDeletedAt" />
+            </BTab> -->
           </BTabs>
         </BCard>
       </template>
@@ -91,8 +96,14 @@
   </div>
 </template>
 <script setup>
-import { ref, computed, nextTick } from 'vue'
+import { ref, nextTick, onMounted, watch } from 'vue'
 import { BTable, BAvatar, BTab, BTabs, BCard } from 'bootstrap-vue-next'
+import CreationFormular from '../CreationFormular.vue'
+import ConfirmRegisterMailFormular from '../ConfirmRegisterMailFormular.vue'
+import CreationTransactionList from '../CreationTransactionList.vue'
+import TransactionLinkList from '../TransactionLinkList.vue'
+import ChangeUserRoleFormular from '../ChangeUserRoleFormular.vue'
+import DeletedUserFormular from '../DeletedUserFormular.vue'
 
 const props = defineProps({
   items: {
@@ -106,8 +117,19 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['updateRoles', 'updateDeletedAt'])
-
+const myItems = ref()
 const creationUserData = ref({})
+const rowDetails = ref()
+
+onMounted(() => {
+  setTimeout(() => {
+    myItems.value = props.items.map((item) => {
+      return { ...item, _showDetails: false }
+    })
+
+    myItems.value
+  }, 500)
+})
 
 const updateUserData = (rowItem, newCreation) => {
   rowItem.creation = newCreation
@@ -122,7 +144,10 @@ const updateDeletedAt = ({ userId, deletedAt }) => {
 }
 
 const onRowClicked = async (item) => {
-  const status = myItems.value.find((obj) => obj === item)._showDetails
+  const status = myItems.value.find((obj) => {
+    return obj.userId === item.userId
+  })?._showDetails
+
   myItems.value.forEach((obj) => {
     if (obj === item) {
       obj._showDetails = !status
@@ -130,15 +155,19 @@ const onRowClicked = async (item) => {
       obj._showDetails = false
     }
   })
+
   await nextTick()
   if (!status && rowDetails.value) {
-    rowDetails.value.focus()
+    // rowDetails.value.focus()
   }
 }
 
-const myItems = computed(() => {
-  return props.items.map((item) => {
-    return { ...item, _showDetails: false }
-  })
-})
+watch(
+  () => props.items,
+  (items) => {
+    myItems.value = items.map((item) => {
+      return { ...item, _showDetails: false }
+    })
+  },
+)
 </script>