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

src/pages/CscPageCallRecording.vue

@@ -278,21 +278,23 @@ export default {
     },
     watch: {
         recordings () {
-            this.data = this.recordings
+            this.data = this.recordings.map((recording) => {
-            this.data.forEach((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) {
+                if (recordingCopy.caller && recordingCopy.caller === userCli) {
-                        recording.callerName = this.$t('Me')
+                    recordingCopy.callerName = this.$t('Me')
-                    }
                 }
-                if (recording.callee) {
+
-                    if (recording.callee === userCli) {
+                if (recordingCopy.callee && recordingCopy.callee === userCli) {
-                        recording.calleeName = this.$t('Me')
+                    recordingCopy.calleeName = this.$t('Me')
-                    }
                 }
+
+                return recordingCopy
             })
+
             this.rowStatus = this.recordings.map((rec) => {
                 return {
                     id: rec.id,
@@ -373,13 +375,20 @@ export default {
             return rowStatus && rowStatus.expanded
         },
         async updateCollapseArray (id) {
-            const recording = this.recordings.filter((rec) => rec.id === id)[0]
+            // Find the recording in our local data copy, not the store
+            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)
+                    // After fetching streams, we need to update our local copy
+                    // since the store has been updated
+                    const updatedRecording = this.recordings.find((rec) => rec.id === id)
+                    if (updatedRecording) {
+                        recording.files = [...updatedRecording.files]
+                    }
                 } finally {
                     this.$wait.end(`loading-stream-${id}`)
                 }