From a994b4b75fe686ecb6c0b3541e01990c3084177f Mon Sep 17 00:00:00 2001
From: MateuszMichalowski
 <79852198+MateuszMichalowski@users.noreply.github.com>
Date: Mon, 26 Aug 2024 17:41:35 +0200
Subject: [PATCH] fix(frontend): gdt test (#3361)

* fix(frontend): fixes after feedback

* fix(frontend): fixes after feedback

* fix(frontend): fixes after feedback

* fix(frontend): fixes after feedback and iternal tests

* fix(frontend): User bigger icon in Transaction component

* fix(frontend): Test gdt transaction open.

* fix(frontend): Fix sidebar navigation info

* fix(frontend): lint fix
---
 frontend/src/components/Menu/Sidebar.vue | 57 +++++++++++++++---------
 frontend/src/components/Transaction.vue  | 24 +++++-----
 2 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index 1128a2632..9fe387e1c 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -26,7 +26,7 @@
               <span class="ms-2">{{ $t('navigation.transactions') }}</span>
             </div>
           </BNavItem>
-          <BNavItem to="/community" class="mb-3" active-class="active-route">
+          <BNavItem ref="communityLink" to="/community" class="mb-3" active-class="active-route">
             <div class="sidebar-menu-item-wrapper">
               <BImg src="/img/svg/community.svg" height="20" class="svg-icon" />
               <span class="ms-2">{{ $t('creation') }}</span>
@@ -98,29 +98,44 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
 import CONFIG from '../../config'
+import { useRoute } from 'vue-router'
+import { ref, watch, computed } from 'vue'
 
-export default {
-  name: 'Sidebar',
-  props: {
-    shadow: { type: Boolean, required: false, default: true },
+const props = defineProps({
+  shadow: { type: Boolean, default: true },
+})
+
+const route = useRoute()
+const communityLink = ref(null)
+
+const transactionClass = computed(() => {
+  if (route.path === '/gdt') {
+    return 'mb-3 active-route'
+  }
+  return 'mb-3'
+})
+const isHumhub = computed(() => {
+  return CONFIG.HUMHUB_ACTIVE === 'true'
+})
+const isGMS = computed(() => {
+  return CONFIG.GMS_ACTIVE === 'true'
+})
+
+watch(
+  () => route.path,
+  () => {
+    const link = [...communityLink.value.$el.children][0]
+    if (route.path.includes('community')) {
+      link.classList.add('active-route')
+      link.classList.add('router-link-exact-active')
+    } else {
+      link.classList.remove('active-route')
+      link.classList.remove('router-link-exact-active')
+    }
   },
-  computed: {
-    transactionClass() {
-      if (this.$route.path === '/gdt') {
-        return 'mb-3 active-route'
-      }
-      return 'mb-3'
-    },
-    isHumhub() {
-      return CONFIG.HUMHUB_ACTIVE === 'true'
-    },
-    isGMS() {
-      return CONFIG.GMS_ACTIVE === 'true'
-    },
-  },
-}
+)
 </script>
 <style scoped>
 :deep(.nav-item > a) {
diff --git a/frontend/src/components/Transaction.vue b/frontend/src/components/Transaction.vue
index e30ed63b4..eb005da8d 100644
--- a/frontend/src/components/Transaction.vue
+++ b/frontend/src/components/Transaction.vue
@@ -36,7 +36,7 @@
         </BCol>
       </BRow>
 
-      <BCollapse :id="collapseId" v-model="visible" class="mt-2">
+      <BCollapse :id="collapseId" :model-value="visible" class="mt-2">
         <transaction-collapse
           :amount="amount"
           :gdt-entry-type="gdtEntryType"
@@ -116,17 +116,17 @@ const getLinesByType = computed(() => {
   }
 })
 
-onMounted(() => {
-  // Note: This event listener setup might need to be adjusted for Vue 3
-  const root = getCurrentInstance().appContext.config.globalProperties
-  root.$on('bv::collapse::state', (collapseId, isJustShown) => {
-    if (isJustShown) {
-      collapseStatus.value.push(collapseId)
-    } else {
-      collapseStatus.value = collapseStatus.value.filter((id) => id !== collapseId)
-    }
-  })
-})
+// onMounted(() => {
+//   // Note: This event listener setup might need to be adjusted for Vue 3
+//   const root = getCurrentInstance().appContext.config.globalProperties
+//   root.$on('bv::collapse::state', (collapseId, isJustShown) => {
+//     if (isJustShown) {
+//       collapseStatus.value.push(collapseId)
+//     } else {
+//       collapseStatus.value = collapseStatus.value.filter((id) => id !== collapseId)
+//     }
+//   })
+// })
 </script>
 
 <style lang="scss" scoped>