From e6d6cc8901cefa83d7b44d946e3b42e63a2f7988 Mon Sep 17 00:00:00 2001
From: Debora Crescenzo <dcrescenzo@sipwise.com>
Date: Wed, 3 Sep 2025 12:08:48 +0100
Subject: [PATCH] MT#63508 Avoid direct Vuex state mutation in
 CscPageCallRecording

In CscPageCallRecording a watch function was directly
modifying the Vuex state, which is not allowed in
strict mode. This change ensures that each recording
object is cloned before modification, preventing
unintended mutations of store data.

Change-Id: Ie564da2ce31bd61772a05450be21a9a0717632ef
(cherry picked from commit abc25dc49c0e34b7c2dd09c66afe1cb69f5cc810)
(cherry picked from commit 8782f9219d8489ac0a39b799c490ad73822a7fc2)
---
 src/pages/CscPageCallRecording.vue | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/pages/CscPageCallRecording.vue b/src/pages/CscPageCallRecording.vue
index a9f24e67..e64485bb 100644
--- a/src/pages/CscPageCallRecording.vue
+++ b/src/pages/CscPageCallRecording.vue
@@ -278,18 +278,24 @@ export default {
     },
     watch: {
         recordings () {
-            this.data = this.recordings
-            this.data.forEach((recording) => {
+            this.data = this.recordings.map((recording) => {
+                const recordingCopy = { ...recording }
+
                 const user = this.getSubscriber()
                 const userCli = user.primary_number.cc + user.primary_number.ac + user.primary_number.sn
-                if (recording.caller) {
-                    if (recording.caller === userCli) recording.callerName = this.$t('Me')
+
+                if (recordingCopy.caller && recordingCopy.caller === userCli) {
+                    recordingCopy.callerName = this.$t('Me')
                 }
-                if (recording.callee) {
-                    if (recording.callee === userCli) recording.calleeName = this.$t('Me')
+
+                if (recordingCopy.callee && recordingCopy.callee === userCli) {
+                    recordingCopy.calleeName = this.$t('Me')
                 }
+
+                return recordingCopy
             })
-            this.rowStatus = this.recordings.map(rec => {
+
+            this.rowStatus = this.recordings.map((rec) => {
                 return {
                     id: rec.id,
                     expanded: false
@@ -369,13 +375,17 @@ export default {
             return rowStatus && rowStatus.expanded
         },
         async updateCollapseArray (id) {
-            const recording = this.recordings.filter(rec => rec.id === id)[0]
-            const rowStatus = this.rowStatus.filter(row => row.id === id)[0]
+            const recording = this.data.filter((rec) => rec.id === id)[0]
+            const rowStatus = this.rowStatus.filter((row) => row.id === id)[0]
             rowStatus.expanded = !rowStatus.expanded
             if (rowStatus.expanded && recording.files.length === 0) {
                 this.$wait.start('loading-stream-' + id)
                 try {
                     await this.fetchStreams(id)
+                    const updatedRecording = this.recordings.find((rec) => rec.id === id)
+                    if (updatedRecording) {
+                        recording.files = [...updatedRecording.files]
+                    }
                 } finally {
                     this.$wait.end('loading-stream-' + id)
                 }