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 abc25dc49c)
(cherry picked from commit 8782f9219d)

src/pages/CscPageCallRecording.vue

@@ -278,18 +278,24 @@ 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) 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 recording = this.data.filter((rec) => rec.id === id)[0]
-            const rowStatus = this.rowStatus.filter(row => row.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)
                 }