From da3f176bb2c956907c4ddbe6a5f600dbdf9cd400 Mon Sep 17 00:00:00 2001
From: "Blazej M. Baczkowski" <contact.blazej@proton.me>
Date: Sun, 26 Apr 2026 20:26:10 +0200
Subject: [PATCH] feat: allow to edit / clear data shared across study,
 session, participant

- add JSON editor dialog component
- integrate editor in study info, study participants, and participants
- allow editing, clearing, saving only valid JSON input
- adds migration schema for sessions
- modifies session controller for error handling and validation

Relates to #219
---
 app/Controllers/Http/SessionController.js     |  24 +-
 ...426202700_make_session_columns_nullable.js |  23 ++
 resources/assets/js/endpoints.js              |   1 +
 .../ParticipantViewData.vue                   |   6 +
 .../ParticipantsList/ParticipantsList.vue     |   1 +
 .../ParticipantsPanel/ParticipantsPanel.vue   |   1 +
 .../StudyParticipantsList.vue                 |  18 ++
 .../Studies/page/StudyInfo/StudyInfo.vue      |   6 +
 .../JsonEditorDialog/JsonEditorDialog.vue     | 271 ++++++++++++++++++
 resources/pages/dashboard/participants.vue    |  27 +-
 .../pages/dashboard/studies/_id/index.vue     |  31 +-
 11 files changed, 400 insertions(+), 9 deletions(-)
 create mode 100644 database/migrations/20260426202700_make_session_columns_nullable.js
 create mode 100644 resources/components/common/JsonEditorDialog/JsonEditorDialog.vue

diff --git a/app/Controllers/Http/SessionController.js b/app/Controllers/Http/SessionController.js
index 25c35b78..ee4d3c5e 100644
--- a/app/Controllers/Http/SessionController.js
+++ b/app/Controllers/Http/SessionController.js
@@ -57,7 +57,10 @@ class SessionController {
     const result = await Session.query()
       .where('study_id', studyID)
       .where('participant_id', participantID)
-      .firstOrFail()
+      .first()
+    if (!result) {
+      return response.status(404).json({ message: 'Cannot find database row for Session model' })
+    }
     return response.json({ data: result })
   }
 
@@ -110,16 +113,23 @@ class SessionController {
    * @param {Response} ctx.response
    */
   async update ({ request, response }) {
-    const validation = await validate(request.all(), {
-      study_id: 'integer',
-      participant_id: 'string',
+    const rules = {
       data: 'required|json'
-    })
-    if (validation.fails()) {
-      return response.status(422).json(validation.messages())
     }
     const studyID = request.input('study_id', null)
     const participantID = request.input('participant_id', null)
+
+    if (studyID !== null) {
+      rules.study_id = 'integer'
+    }
+    if (participantID !== null) {
+      rules.participant_id = 'string'
+    }
+
+    const validation = await validate(request.all(), rules)
+    if (validation.fails()) {
+      return response.status(422).json(validation.messages())
+    }
     const data = request.input('data', {})
     const record = await Session.query()
       .where('study_id', studyID)
diff --git a/database/migrations/20260426202700_make_session_columns_nullable.js b/database/migrations/20260426202700_make_session_columns_nullable.js
new file mode 100644
index 00000000..76b3b218
--- /dev/null
+++ b/database/migrations/20260426202700_make_session_columns_nullable.js
@@ -0,0 +1,23 @@
+'use strict'
+
+/** @type {import('@adonisjs/lucid/src/Schema')} */
+const Schema = use('Schema')
+
+class MakeSessionColumnsNullable extends Schema {
+  up () {
+    this.alter('sessions', (table) => {
+      table.integer('study_id').unsigned().nullable().alter()
+      table.string('participant_id').nullable().alter()
+    })
+  }
+
+  down () {
+    // Keep nullable since the application requires it
+    this.alter('sessions', (table) => {
+      table.integer('study_id').unsigned().nullable().alter()
+      table.string('participant_id').nullable().alter()
+    })
+  }
+}
+
+module.exports = MakeSessionColumnsNullable
\ No newline at end of file
diff --git a/resources/assets/js/endpoints.js b/resources/assets/js/endpoints.js
index 65168650..b1080bb1 100644
--- a/resources/assets/js/endpoints.js
+++ b/resources/assets/js/endpoints.js
@@ -7,6 +7,7 @@ export const STUDIES = `${API_PREFIX}/studies`
 export const PARTICIPANTS = `${API_PREFIX}/participants`
 export const PARTICIPATIONS = `${API_PREFIX}/participations`
 export const JOBS = `${API_PREFIX}/jobs`
+export const SESSIONS = `${API_PREFIX}/sessions`
 
 // Misc routes
 export const RECOVER_PASSWORD = `${AUTH_PREFIX}/password/recover`
diff --git a/resources/components/Participants/ParticipantViewData/ParticipantViewData.vue b/resources/components/Participants/ParticipantViewData/ParticipantViewData.vue
index ac7d2536..c97b7761 100644
--- a/resources/components/Participants/ParticipantViewData/ParticipantViewData.vue
+++ b/resources/components/Participants/ParticipantViewData/ParticipantViewData.vue
@@ -33,6 +33,12 @@
       </template>
     </v-card-text>
     <v-card-actions v-if="$auth.user.user_type_id === 1">
+      <v-btn @click="$emit('edit-participant-data')">
+        <v-icon left>
+          mdi-database
+        </v-icon>
+        Edit Participant Data
+      </v-btn>
       <v-spacer />
       <v-tooltip v-if="participant.studies_count > 0" bottom>
         <template #activator="{ on, attrs }">
diff --git a/resources/components/Participants/ParticipantsList/ParticipantsList.vue b/resources/components/Participants/ParticipantsList/ParticipantsList.vue
index 7c4fbbb2..e7d54c78 100644
--- a/resources/components/Participants/ParticipantsList/ParticipantsList.vue
+++ b/resources/components/Participants/ParticipantsList/ParticipantsList.vue
@@ -97,6 +97,7 @@
                   style="width: 100%"
                   @clicked-edit="(id) => editing = id"
                   @clicked-delete="$emit('delete-participant', $event)"
+                  @edit-participant-data="$emit('edit-participant-data', ptcp.identifier)"
                 />
               </v-fade-transition>
             </v-card>
diff --git a/resources/components/Participants/ParticipantsPanel/ParticipantsPanel.vue b/resources/components/Participants/ParticipantsPanel/ParticipantsPanel.vue
index 6628dcdf..16eb1388 100644
--- a/resources/components/Participants/ParticipantsPanel/ParticipantsPanel.vue
+++ b/resources/components/Participants/ParticipantsPanel/ParticipantsPanel.vue
@@ -54,6 +54,7 @@
             @changed-priority="fetchQueue"
             @scroll-end="loadMore"
             @reset-jobs="openResetJobsDialog"
+            @edit-session-data="$emit('edit-session-data', $event)"
           />
         </v-card-text>
       </v-card>
diff --git a/resources/components/Participants/ParticipantsPanel/StudyParticipantsList/StudyParticipantsList.vue b/resources/components/Participants/ParticipantsPanel/StudyParticipantsList/StudyParticipantsList.vue
index dec0cc0a..fc72ca2f 100644
--- a/resources/components/Participants/ParticipantsPanel/StudyParticipantsList/StudyParticipantsList.vue
+++ b/resources/components/Participants/ParticipantsPanel/StudyParticipantsList/StudyParticipantsList.vue
@@ -27,6 +27,24 @@
               :position="queue[item.id]"
             />
           </v-list-item-content>
+          <v-list-item-action v-if="editable" style="max-width: 40px">
+            <v-tooltip left>
+              <template #activator="{ on, attrs }">
+                <v-btn
+                  icon
+                  small
+                  v-bind="attrs"
+                  v-on="on"
+                  @click.stop="$emit('edit-session-data', item.identifier)"
+                >
+                  <v-icon small>
+                    mdi-database
+                  </v-icon>
+                </v-btn>
+              </template>
+              Edit session data
+            </v-tooltip>
+          </v-list-item-action>
           <v-list-item-action v-if="editable" style="max-width: 40px">
             <v-tooltip left>
               <template #activator="{ on, attrs }">
diff --git a/resources/components/Studies/page/StudyInfo/StudyInfo.vue b/resources/components/Studies/page/StudyInfo/StudyInfo.vue
index 83162cf9..e320330a 100644
--- a/resources/components/Studies/page/StudyInfo/StudyInfo.vue
+++ b/resources/components/Studies/page/StudyInfo/StudyInfo.vue
@@ -26,6 +26,12 @@
         </div>
         <div v-else key="view">
           <div class="d-flex justify-end">
+            <v-btn v-if="userCanEdit" @click="$emit('edit-study-data')">
+              <v-icon left>
+                mdi-database
+              </v-icon>
+              Edit Study Data
+            </v-btn>
             <v-btn v-if="userCanEdit" color="primary" @click="editMode=true">
               <v-icon left>
                 mdi-pencil
diff --git a/resources/components/common/JsonEditorDialog/JsonEditorDialog.vue b/resources/components/common/JsonEditorDialog/JsonEditorDialog.vue
new file mode 100644
index 00000000..e23fc84e
--- /dev/null
+++ b/resources/components/common/JsonEditorDialog/JsonEditorDialog.vue
@@ -0,0 +1,271 @@
+<template>
+  <v-dialog v-model="dialog" max-width="800" persistent>
+    <v-card>
+      <v-card-title>
+        Edit {{ type }} data
+      </v-card-title>
+      <v-card-text>
+        <v-textarea
+          v-model="jsonText"
+          :placeholder="placeholderText"
+          :error-messages="error ? [error] : []"
+          :loading="loading"
+          rows="20"
+          outlined
+          auto-grow
+          @input="validateJson"
+          @keydown.tab="handleTab"
+        />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn :disabled="loading" @click="cancel">
+          Cancel
+        </v-btn>
+        <confirmation-dialog
+          v-model="clearDialog"
+          @clicked-no="clearDialog = false"
+          @clicked-yes="confirmClear"
+        >
+          <template #activator="{ on, attrs }">
+            <v-btn
+              color="error"
+              :disabled="loading || !hasData"
+              v-bind="attrs"
+              v-on="on"
+            >
+              Clear
+            </v-btn>
+          </template>
+          <template #title>
+            Clear {{ type }} data
+          </template>
+          <div>
+            Are you sure you want to clear all {{ type }} data? This action cannot be undone.
+          </div>
+        </confirmation-dialog>
+        <v-btn
+          color="primary"
+          :disabled="Boolean(error) || loading || jsonText.trim() === ''"
+          @click="handleSave"
+        >
+          Save
+        </v-btn>
+
+        <confirmation-dialog
+          v-model="saveDialog"
+          @clicked-no="saveDialog = false"
+          @clicked-yes="confirmSave"
+        >
+          <template #title>
+            Save Changes
+          </template>
+          <div>
+            You are about to overwrite the existing data. This action cannot be undone.
+          </div>
+        </confirmation-dialog>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  components: {
+    ConfirmationDialog: () => import('@/components/common/ConfirmationDialog/ConfirmationDialog.vue')
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      required: true,
+      validator: val =>
+        ['study', 'session', 'participant'].includes(val)
+    },
+    studyId: {
+      type: Number,
+      default: null
+    },
+    participantId: {
+      type: String,
+      default: null
+    }
+  },
+  data () {
+    return {
+      jsonText: '',
+      originalJsonText: '',
+      originalData: {},
+      error: null,
+      loading: false,
+      clearDialog: false,
+      saveDialog: false,
+      recordExists: false
+    }
+  },
+  computed: {
+    dialog: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    },
+    placeholderText () {
+      return JSON.stringify({ key: 123 }, null, 2)
+    },
+    hasData () {
+      return this.recordExists
+    },
+    isModified () {
+      return this.recordExists && Object.keys(this.originalData).length > 0
+    },
+    showSaveConfirmation () {
+      return this.recordExists
+    }
+  },
+  watch: {
+    async dialog (newVal) {
+      if (newVal) {
+        this.reset()
+        await this.fetchData()
+      } else {
+        this.reset()
+      }
+    }
+  },
+  methods: {
+    async fetchData () {
+      this.loading = true
+      this.error = null
+      try {
+        const params = {}
+        if (this.studyId != null) {
+          params.study_id = this.studyId
+        }
+        if (this.participantId != null) {
+          params.participant_id = this.participantId
+        }
+        const response = await this.$axios.get('/sessions', { params })
+        const session = response.data.data || {}
+        this.originalData = session.data || {}
+        this.recordExists = true
+        this.jsonText = JSON.stringify(this.originalData, null, 2)
+        this.originalJsonText = this.jsonText
+      } catch (e) {
+        if (e.response && e.response.status === 404) {
+          this.originalData = {}
+          this.recordExists = false
+          this.jsonText = ''
+          this.originalJsonText = ''
+        } else {
+          this.error = 'Failed to load data'
+        }
+      } finally {
+        this.loading = false
+      }
+    },
+    validateJson () {
+      if (this.jsonText.trim() === '') {
+        this.error = null
+        return
+      }
+      try {
+        JSON.parse(this.jsonText)
+        this.error = null
+      } catch (e) {
+        this.error = 'Invalid JSON'
+      }
+    },
+    handleSave () {
+      if (this.showSaveConfirmation) {
+        this.saveDialog = true
+      } else {
+        this.confirmSave()
+      }
+    },
+    async confirmSave () {
+      this.saveDialog = false
+      if (this.error) {
+        return
+      }
+      this.loading = true
+      try {
+        const parsedData = this.jsonText.trim() === '' ? {} : JSON.parse(this.jsonText)
+        const payload = { data: JSON.stringify(parsedData) }
+        if (this.studyId != null) {
+          payload.study_id = this.studyId
+        }
+        if (this.participantId != null) {
+          payload.participant_id = this.participantId
+        }
+        await this.$axios.put('/sessions', payload)
+        this.$emit('saved', { type: this.type, data: parsedData })
+        this.dialog = false
+      } catch (e) {
+        this.error = 'Failed to save data'
+      } finally {
+        this.loading = false
+      }
+    },
+    clearData () {
+      this.clearDialog = true
+    },
+    async confirmClear () {
+      this.clearDialog = false
+      this.loading = true
+      try {
+        const params = {}
+        if (this.studyId != null) {
+          params.study_id = this.studyId
+        }
+        if (this.participantId != null) {
+          params.participant_id = this.participantId
+        }
+        await this.$axios.delete('/sessions', { params })
+        this.$emit('cleared', { type: this.type })
+        this.dialog = false
+      } catch (e) {
+        this.error = 'Failed to clear data'
+      } finally {
+        this.loading = false
+      }
+    },
+    cancel () {
+      this.dialog = false
+    },
+    reset () {
+      this.jsonText = ''
+      this.originalJsonText = ''
+      this.originalData = {}
+      this.error = null
+      this.loading = false
+      this.clearDialog = false
+      this.saveDialog = false
+      this.recordExists = false
+    },
+    handleTab (event) {
+      event.preventDefault()
+      const textarea = event.target
+      const start = textarea.selectionStart
+      const end = textarea.selectionEnd
+      this.jsonText = this.jsonText.substring(0, start) + '  ' + this.jsonText.substring(end)
+      this.$nextTick(() => {
+        textarea.selectionStart = textarea.selectionEnd = start + 2
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+:deep(.v-text-field__slot textarea::placeholder) {
+  color: #9e9e9e !important;
+  font-family: monospace;
+  opacity: 1;
+}
+</style>
diff --git a/resources/pages/dashboard/participants.vue b/resources/pages/dashboard/participants.vue
index 3fa61aba..373cb53d 100644
--- a/resources/pages/dashboard/participants.vue
+++ b/resources/pages/dashboard/participants.vue
@@ -45,6 +45,7 @@
                 @update-participant="saveParticipant"
                 @delete-participant="deleteParticipant"
                 @load-participant="loadParticipant"
+                @edit-participant-data="openJsonEditor('participant', $event)"
               />
             </v-skeleton-loader>
           </v-col>
@@ -77,6 +78,13 @@
         <v-icon>mdi-plus</v-icon>
       </v-btn>
     </v-fab-transition>
+    <json-editor-dialog
+      v-model="jsonEditor.dialog"
+      :type="jsonEditor.type"
+      :participant-id="jsonEditor.participantId"
+      @saved="onJsonSaved"
+      @cleared="onJsonCleared"
+    />
   </v-container>
 </template>
 
@@ -89,7 +97,8 @@ export default {
   // inject: ['theme'],
   components: {
     ParticipantsList: () => import('@/components/Participants/ParticipantsList'),
-    newParticipantDialog: () => import('@/components/Participants/dialogs/NewParticipantDialog')
+    newParticipantDialog: () => import('@/components/Participants/dialogs/NewParticipantDialog'),
+    JsonEditorDialog: () => import('@/components/common/JsonEditorDialog/JsonEditorDialog.vue')
   },
   data () {
     return {
@@ -106,6 +115,11 @@ export default {
         ids: [],
         page: 1,
         perPage: 12
+      },
+      jsonEditor: {
+        dialog: false,
+        type: null,
+        participantId: null
       }
     }
   },
@@ -226,6 +240,17 @@ export default {
         this.pagination.page = page
         this.fetchParticipants()
       }
+    },
+    openJsonEditor (type, participantId) {
+      this.jsonEditor.type = type
+      this.jsonEditor.participantId = participantId
+      this.jsonEditor.dialog = true
+    },
+    onJsonSaved () {
+      this.notify({ message: 'Data saved successfully', color: 'success' })
+    },
+    onJsonCleared () {
+      this.notify({ message: 'Data cleared successfully', color: 'success' })
     }
   }
 }
diff --git a/resources/pages/dashboard/studies/_id/index.vue b/resources/pages/dashboard/studies/_id/index.vue
index 3a78f71c..ece97134 100644
--- a/resources/pages/dashboard/studies/_id/index.vue
+++ b/resources/pages/dashboard/studies/_id/index.vue
@@ -29,6 +29,14 @@
       @remove-user="removeCollaborator"
       @set-access-level="setAccessLevel"
     />
+    <json-editor-dialog
+      v-model="jsonEditor.dialog"
+      :type="jsonEditor.type"
+      :study-id="jsonEditor.studyId"
+      :participant-id="jsonEditor.participantId"
+      @saved="onJsonSaved"
+      @cleared="onJsonCleared"
+    />
     <v-row class="fill-height" no-gutters>
       <v-col cols="12" class="d-flex flex-column py-0">
         <v-row dense>
@@ -84,6 +92,7 @@
                             :user-can-edit="userCanEdit"
                             :study="study"
                             @editted="saveStudyInfo"
+                            @edit-study-data="openJsonEditor('study')"
                           />
                         </v-card-text>
                       </v-card>
@@ -110,6 +119,7 @@
                     ref="ptcpPanel"
                     :visible="ptcpPanelVisible"
                     :study="study"
+                    @edit-session-data="openJsonEditor('session', $event)"
                   />
                 </v-tab-item>
                 <v-tab-item>
@@ -156,7 +166,8 @@ export default {
     CollaboratorsDialog: () => import('@/components/Studies/dialogs/CollaboratorsDialog'),
     ParticipantsPanel: () => import('@/components/Participants/ParticipantsPanel'),
     ParticipationStats: () => import('@/components/Participants/ParticipationStats'),
-    StudyInfo
+    StudyInfo,
+    JsonEditorDialog: () => import('@/components/common/JsonEditorDialog/JsonEditorDialog.vue')
   },
   beforeRouteUpdate (to, from, next) {
     // The component is reused if the id simply changed, so mounted is not called in this case.
@@ -211,6 +222,12 @@ export default {
           cancel: null,
           file: null
         }
+      },
+      jsonEditor: {
+        dialog: false,
+        type: null,
+        studyId: null,
+        participantId: null
       }
     }
   },
@@ -478,6 +495,18 @@ export default {
       const url = this.dataFiles['data-csv'].path
       window.location.assign(url)
       this.status.downloadingResultData = false
+    },
+    openJsonEditor (type, participantId = null) {
+      this.jsonEditor.type = type
+      this.jsonEditor.studyId = this.study.id
+      this.jsonEditor.participantId = participantId
+      this.jsonEditor.dialog = true
+    },
+    onJsonSaved () {
+      this.notify({ message: 'Data saved successfully', color: 'success' })
+    },
+    onJsonCleared () {
+      this.notify({ message: 'Data cleared successfully', color: 'success' })
     }
   }
 }