From bc43a7f33e4da6a96d76b2fcaf536fc59d9e23e9 Mon Sep 17 00:00:00 2001
From: SebinSong <songxevin@gmail.com>
Date: Wed, 13 Nov 2024 12:01:37 +1300
Subject: [PATCH 1/4] logic to check if a proposal archived or active

---
 .../containers/chatroom/MessageInteractive.vue  | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/views/containers/chatroom/MessageInteractive.vue b/frontend/views/containers/chatroom/MessageInteractive.vue
index 0d5933f3b7..91aae62e7c 100644
--- a/frontend/views/containers/chatroom/MessageInteractive.vue
+++ b/frontend/views/containers/chatroom/MessageInteractive.vue
@@ -11,7 +11,7 @@ message-base(v-bind='$props' @wrapperAction='action')
   template(#body='')
     .c-text
       render-message-text(:text='interactiveMessage.text')
-      i18n.c-link(@click='$router.push({ path: "/dashboard#proposals" })') See proposal
+      i18n.c-link(@click='onSeeProposalClick') See proposal
 </template>
 
 <script>
@@ -31,6 +31,7 @@ import {
   STATUS_EXPIRED,
   STATUS_CANCELLED
 } from '@model/contracts/shared/constants.js'
+import { OPEN_MODAL } from '@utils/events.js'
 import { getProposalDetails } from '@model/contracts/shared/functions.js'
 import MessageBase from './MessageBase.vue'
 import RenderMessageText from './chat-mentions/RenderMessageText.vue'
@@ -143,10 +144,22 @@ export default ({
     humanDate,
     action () {
       console.log('TODO')
+    },
+    onSeeProposalClick () {
+      const openProposalIds = Object.keys(this.currentGroupState.proposals)
+
+      if (openProposalIds.includes(this.proposal.proposalId)) { // the proposal is currently active
+        this.$router.push({ path: "/dashboard#proposals" })
+      } else { // the proposal has been archived
+        sbp('okTurtles.events/emit', OPEN_MODAL, 'PropositionsAllModal')
+      }
     }
   },
   computed: {
-    ...mapGetters(['userDisplayNameFromID']),
+    ...mapGetters([
+      'currentGroupState',
+      'userDisplayNameFromID'
+    ]),
     interactiveMessage () {
       const { status, creatorID } = this.proposal
       const baseOptions = { from: `${CHATROOM_MEMBER_MENTION_SPECIAL_CHAR}${creatorID}` }

From 912de2e288fd0d7ef4025c2e24f2f378721acd6b Mon Sep 17 00:00:00 2001
From: SebinSong <songxevin@gmail.com>
Date: Wed, 13 Nov 2024 12:22:03 +1300
Subject: [PATCH 2/4] implement scroll-to-target in PropositionsAllModal.vue

---
 .../containers/chatroom/MessageInteractive.vue    |  5 +++--
 .../views/containers/proposals/ProposalItem.vue   |  2 +-
 .../containers/proposals/PropositionsAllModal.vue | 15 ++++++++++++++-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/frontend/views/containers/chatroom/MessageInteractive.vue b/frontend/views/containers/chatroom/MessageInteractive.vue
index 91aae62e7c..3d3b9cb871 100644
--- a/frontend/views/containers/chatroom/MessageInteractive.vue
+++ b/frontend/views/containers/chatroom/MessageInteractive.vue
@@ -15,6 +15,7 @@ message-base(v-bind='$props' @wrapperAction='action')
 </template>
 
 <script>
+import sbp from '@sbp/sbp'
 import { mapGetters } from 'vuex'
 import { L } from '@common/common.js'
 import {
@@ -149,9 +150,9 @@ export default ({
       const openProposalIds = Object.keys(this.currentGroupState.proposals)
 
       if (openProposalIds.includes(this.proposal.proposalId)) { // the proposal is currently active
-        this.$router.push({ path: "/dashboard#proposals" })
+        this.$router.push({ path: '/dashboard#proposals' })
       } else { // the proposal has been archived
-        sbp('okTurtles.events/emit', OPEN_MODAL, 'PropositionsAllModal')
+        sbp('okTurtles.events/emit', OPEN_MODAL, 'PropositionsAllModal', { targetProposal: this.proposal.proposalId })
       }
     }
   },
diff --git a/frontend/views/containers/proposals/ProposalItem.vue b/frontend/views/containers/proposals/ProposalItem.vue
index 85aad6a347..f794176886 100644
--- a/frontend/views/containers/proposals/ProposalItem.vue
+++ b/frontend/views/containers/proposals/ProposalItem.vue
@@ -1,5 +1,5 @@
 <template lang='pug'>
-li.c-item-wrapper(data-test='proposalItem')
+li.c-item-wrapper(data-test='proposalItem' :data-proposal-hash='proposalHash')
   .c-item
     .c-main
       .c-icons
diff --git a/frontend/views/containers/proposals/PropositionsAllModal.vue b/frontend/views/containers/proposals/PropositionsAllModal.vue
index 8f2d2d1db5..a277ac3986 100644
--- a/frontend/views/containers/proposals/PropositionsAllModal.vue
+++ b/frontend/views/containers/proposals/PropositionsAllModal.vue
@@ -22,7 +22,7 @@ modal-base-template.has-background(ref='modal' :fullscreen='true' :a11yTitle='L(
           option(value='Oldest') {{ L('Oldest first') }}
 
     .card.c-card
-      ul(data-test='proposalsWidget')
+      ul(data-test='proposalsWidget' ref='pList')
         proposal-item(
           v-for='[hash, obj] of proposals'
           :key='hash'
@@ -55,10 +55,23 @@ export default ({
   async mounted () {
     const key = `proposals/${this.ourIdentityContractId}/${this.currentGroupId}`
     this.ephemeral.proposals = await sbp('gi.db/archive/load', key) || []
+
+    this.checkTargetAndScroll()
   },
   methods: {
     unfocusSelect () {
       this.$refs.select.blur()
+    },
+    checkTargetAndScroll () {
+      const targetId = this.$route.query?.targetProposal || ''
+
+      if (targetId && this.ephemeral.proposals.some(entry => entry[0] === targetId)) {
+        setTimeout(() => {
+          const targetEl = this.$refs.pList.querySelector(`[data-proposal-hash="${targetId}"]`)
+
+          targetEl && targetEl.scrollIntoView({ block: 'center' })
+        }, 150)
+      }
     }
   },
   computed: {

From 27baace8118a423710978865f11ce01c9fadd700 Mon Sep 17 00:00:00 2001
From: SebinSong <songxevin@gmail.com>
Date: Wed, 13 Nov 2024 15:21:55 +1300
Subject: [PATCH 3/4] fix the bug in in-app notification list

---
 frontend/controller/actions/group.js          | 10 ++++++++
 frontend/model/contracts/group.js             |  7 +++---
 .../contracts/shared/voting/proposals.js      |  2 +-
 frontend/model/notifications/templates.js     | 25 +++++++++++++------
 4 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/frontend/controller/actions/group.js b/frontend/controller/actions/group.js
index 3f40c8f72b..2937da3c3c 100644
--- a/frontend/controller/actions/group.js
+++ b/frontend/controller/actions/group.js
@@ -32,6 +32,7 @@ import {
   JOINED_CHATROOM,
   LEFT_GROUP,
   LOGOUT,
+  OPEN_MODAL,
   REPLACE_MODAL
 } from '@utils/events.js'
 import { imageUpload } from '@utils/image.js'
@@ -920,6 +921,15 @@ export default (sbp('sbp/selectors/register', {
       sbp('okTurtles.events/emit', REPLACE_MODAL, 'IncomeDetails')
     }
   },
+  'gi.actions/group/checkAndSeeProposal': function ({ data }: GIActionParams) {
+    const openProposalIds = Object.keys(sbp('state/vuex/getters').currentGroupState.proposals || {})
+
+    if (openProposalIds.includes(data.proposalHash)) {
+      sbp('controller/router').push({ path: '/dashboard#proposals' })
+    } else {
+      sbp('okTurtles.events/emit', OPEN_MODAL, 'PropositionsAllModal', { targetProposal: data.proposalHash })
+    }
+  },
   'gi.actions/group/fixAnyoneCanJoinLink': function ({ contractID }) {
     // Queue ensures that the update happens as atomically as possible
     return sbp('chelonia/queueInvocation', `${contractID}-FIX-ANYONE-CAN-JOIN`, async () => {
diff --git a/frontend/model/contracts/group.js b/frontend/model/contracts/group.js
index 8c6d7a21f3..dd9b525078 100644
--- a/frontend/model/contracts/group.js
+++ b/frontend/model/contracts/group.js
@@ -682,7 +682,7 @@ sbp('chelonia/defineContract', {
         // TODO: create a global timer to auto-pass/archive expired votes
         //       make sure to set that proposal's status as STATUS_EXPIRED if it's expired
       },
-      sideEffect ({ contractID, meta, data, height, innerSigningContractID }, { getters }) {
+      sideEffect ({ contractID, meta, hash, data, height, innerSigningContractID }, { getters }) {
         const { loggedIn } = sbp('state/vuex/state')
         const typeToSubTypeMap = {
           [PROPOSAL_INVITE_MEMBER]: 'ADD_MEMBER',
@@ -702,6 +702,7 @@ sbp('chelonia/defineContract', {
             createdDate: meta.createdDate,
             groupID: contractID,
             creatorID: innerSigningContractID,
+            proposalHash: hash,
             subtype: typeToSubTypeMap[data.proposalType]
           })
         }
@@ -1545,10 +1546,10 @@ sbp('chelonia/defineContract', {
       await sbp('gi.db/archive/delete', archPaymentsByPeriodKey)
       await sbp('gi.db/archive/delete', archSentOrReceivedPaymentsKey)
     },
-    'gi.contracts/group/makeNotificationWhenProposalClosed': function (state, contractID, meta, height, proposal) {
+    'gi.contracts/group/makeNotificationWhenProposalClosed': function (state, contractID, meta, height, proposalHash, proposal) {
       const { loggedIn } = sbp('state/vuex/state')
       if (isActionNewerThanUserJoinedDate(height, state.profiles[loggedIn.identityContractID])) {
-        sbp('gi.notifications/emit', 'PROPOSAL_CLOSED', { createdDate: meta.createdDate, groupID: contractID, proposal })
+        sbp('gi.notifications/emit', 'PROPOSAL_CLOSED', { createdDate: meta.createdDate, groupID: contractID, proposalHash, proposal })
       }
     },
     'gi.contracts/group/sendMincomeChangedNotification': async function (contractID, meta, data, height, innerSigningContractID) {
diff --git a/frontend/model/contracts/shared/voting/proposals.js b/frontend/model/contracts/shared/voting/proposals.js
index 5d8333ceec..693fa38cd6 100644
--- a/frontend/model/contracts/shared/voting/proposals.js
+++ b/frontend/model/contracts/shared/voting/proposals.js
@@ -33,7 +33,7 @@ export function notifyAndArchiveProposal ({ state, proposalHash, proposal, contr
   //       because we remove the state.proposals[proposalHash] in the process function
   //       and can not access the proposal data in the sideEffect
   sbp('gi.contracts/group/pushSideEffect', contractID,
-    ['gi.contracts/group/makeNotificationWhenProposalClosed', state, contractID, meta, height, proposal]
+    ['gi.contracts/group/makeNotificationWhenProposalClosed', state, contractID, meta, height, proposalHash, proposal]
   )
   sbp('gi.contracts/group/pushSideEffect', contractID,
     ['gi.contracts/group/archiveProposal', contractID, proposalHash, proposal]
diff --git a/frontend/model/notifications/templates.js b/frontend/model/notifications/templates.js
index e878f21b6b..1174048e13 100644
--- a/frontend/model/notifications/templates.js
+++ b/frontend/model/notifications/templates.js
@@ -144,7 +144,7 @@ export default ({
       scope: 'group'
     }
   },
-  NEW_PROPOSAL (data: { groupID: string, creatorID: string, subtype: NewProposalType }) {
+  NEW_PROPOSAL (data: { groupID: string, creatorID: string, proposalHash: string, subtype: NewProposalType }) {
     const args = {
       name: `${CHATROOM_MEMBER_MENTION_SPECIAL_CHAR}${data.creatorID}`,
       ...LTags('strong')
@@ -173,9 +173,12 @@ export default ({
       creatorID: data.creatorID,
       icon: iconMap[data.subtype],
       level: 'info',
-      linkTo: '/dashboard#proposals',
       subtype: data.subtype,
-      scope: 'group'
+      scope: 'group',
+      sbpInvocation: ['gi.actions/group/checkAndSeeProposal', {
+        contractID: sbp('state/vuex/state').currentGroupId,
+        data: { proposalHash: data.proposalHash }
+      }]
     }
   },
   PROPOSAL_EXPIRING (data: { proposalId: string, proposal: Object }) {
@@ -200,11 +203,14 @@ export default ({
       level: 'info',
       icon: 'exclamation-triangle',
       scope: 'group',
-      linkTo: '/dashboard#proposals',
-      data: { proposalId: data.proposalId }
+      data: { proposalId: data.proposalId },
+      sbpInvocation: ['gi.actions/group/checkAndSeeProposal', {
+        contractID: sbp('state/vuex/state').currentGroupId,
+        data: { proposalHash: data.proposalId }
+      }]
     }
   },
-  PROPOSAL_CLOSED (data: { proposal: Object }) {
+  PROPOSAL_CLOSED (data: { proposal: Object, proposalHash: string }) {
     const { creatorID, status, type, options } = getProposalDetails(data.proposal)
 
     const statusMap = {
@@ -244,8 +250,11 @@ export default ({
       body: bodyTemplateMap[type],
       icon: statusMap[status].icon,
       level: statusMap[status].level,
-      linkTo: '/dashboard#proposals',
-      scope: 'group'
+      scope: 'group',
+      sbpInvocation: ['gi.actions/group/checkAndSeeProposal', {
+        contractID: sbp('state/vuex/state').currentGroupId,
+        data: { proposalHash: data.proposalHash }
+      }]
     }
   },
   PAYMENT_RECEIVED (data: { creatorID: string, amount: string, paymentHash: string }) {

From 3f978a022faf888b59ce4cf08382fa59eae586a5 Mon Sep 17 00:00:00 2001
From: SebinSong <songxevin@gmail.com>
Date: Fri, 15 Nov 2024 10:00:18 +1300
Subject: [PATCH 4/4] setTimeout to nextTick callback

---
 frontend/views/containers/proposals/PropositionsAllModal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/views/containers/proposals/PropositionsAllModal.vue b/frontend/views/containers/proposals/PropositionsAllModal.vue
index a277ac3986..9c52e66f11 100644
--- a/frontend/views/containers/proposals/PropositionsAllModal.vue
+++ b/frontend/views/containers/proposals/PropositionsAllModal.vue
@@ -66,11 +66,11 @@ export default ({
       const targetId = this.$route.query?.targetProposal || ''
 
       if (targetId && this.ephemeral.proposals.some(entry => entry[0] === targetId)) {
-        setTimeout(() => {
+        this.$nextTick(() => {
           const targetEl = this.$refs.pList.querySelector(`[data-proposal-hash="${targetId}"]`)
 
           targetEl && targetEl.scrollIntoView({ block: 'center' })
-        }, 150)
+        })
       }
     }
   },