#357: Allow to edit participants alias, when study is active or in pr…

…eview status.
MORE-Platform · May 24, 2024 · b0db333 · b0db333
1 parent faf77b8
commit b0db333
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 46 deletions.
diff --git a/src/components/ParticipantList.vue b/src/components/ParticipantList.vue
@@ -93,7 +93,7 @@ Licensed under the Elastic License 2.0. */
       field: 'studyGroupId',
       header: t('study.props.studyGroup'),
       type: MoreTableFieldType.choice,
-      editable: { values: groupStatuses.value },
+      editable: { values: groupStatuses.value, editable: actionsVisible },
       sortable: true,
       filterable: { showFilterMatchModes: false },
       placeholder: t('global.placeholder.noGroup'),
@@ -394,7 +394,7 @@ Licensed under the Elastic License 2.0. */
       :row-actions="rowActions"
       :table-actions="tableActions"
       :loading="loader.isLoading.value"
-      :editable-access="actionsVisible"
+      :editable-access="props.statusStatus !== StudyStatus.Closed"
       :editable-user-roles="[StudyRole.Admin, StudyRole.Operator]"
       :empty-message="$t('participants.participantsList.emptyListMsg')"
       class="width-65"

diff --git a/src/components/shared/MoreTable.vue b/src/components/shared/MoreTable.vue
@@ -246,28 +246,28 @@ Licensed under the Elastic License 2.0. */
     cancel(row);
   }
   function isEditable(row: any) {
-    if (props.editableAccess) {
-      if (row.userRoles) {
-        return (
-          (row.userRoles.some((r: StudyRole) =>
-            props.editAccessRoles.includes(r),
-          ) &&
-            row.status === StudyStatus.Draft) ||
-          (row.userRoles.some((r: StudyRole) =>
-            props.editAccessRoles.includes(r),
-          ) &&
-            row.status === StudyStatus.Paused) ||
-          (row.userRoles.some((r: StudyRole) =>
-            props.editAccessRoles.includes(r),
-          ) &&
-            row.status === StudyStatus.PausedPreview)
-        );
-      } else {
-        return props.editable(row);
-      }
-    } else {
+    if (!props.editableAccess) {
       return false;
     }
+
+    if (row.userRoles) {
+      return (
+        (row.userRoles.some((r: StudyRole) =>
+          props.editAccessRoles.includes(r),
+        ) &&
+          row.status === StudyStatus.Draft) ||
+        (row.userRoles.some((r: StudyRole) =>
+          props.editAccessRoles.includes(r),
+        ) &&
+          row.status === StudyStatus.Paused) ||
+        (row.userRoles.some((r: StudyRole) =>
+          props.editAccessRoles.includes(r),
+        ) &&
+          row.status === StudyStatus.PausedPreview)
+      );
+    } else {
+      return props.editable(row);
+    }
   }
 
   function onRowClick($event: any) {
@@ -390,7 +390,7 @@ Licensed under the Elastic License 2.0. */
     }
   }
 
-  function isEditableWithValues(
+  function getEditableValues(
     editable:
       | boolean
       | MoreTableChoiceOptions
@@ -412,6 +412,27 @@ Licensed under the Elastic License 2.0. */
     return [] as MoreTableChoice[];
   }
 
+  function isEditableValuesEnabled(
+    editable:
+      | boolean
+      | MoreTableChoiceOptions
+      | MoreTableEditableChoiceProperties
+      | ((data?: any) => boolean)
+      | undefined,
+  ): boolean {
+    if (
+      typeof editable !== 'undefined' &&
+      typeof editable !== 'boolean' &&
+      typeof editable !== 'function'
+    ) {
+      if (Object.prototype.hasOwnProperty.call(editable, 'editable')) {
+        return (editable as MoreTableChoiceOptions).editable ?? false;
+      }
+    }
+
+    return true;
+  }
+
   function getNestedField(data: any, field: string) {
     const f = field.split('.')[0];
     const p = field.split('.')[1];
@@ -635,34 +656,42 @@ Licensed under the Elastic License 2.0. */
             autocomplete="off"
             date-format="dd/mm/yy"
           />
-          <Dropdown
-            v-if="column.type === MoreTableFieldType.choice"
-            v-model="data[field]"
-            class="w-full"
-            :options="isEditableWithValues(column.editable)"
-            option-label="label"
-            option-value="value"
-            :class="data[field] ? 'dropdown-has-value' : ''"
-            :placeholder="
-              data[field]
-                ? getLabelForChoiceValue(
-                    data[field],
-                    getMoreTableChoiceValues(
-                      column.editable as MoreTableChoiceOptions,
-                    ),
-                  )
-                : column.placeholder
-                  ? column.placeholder
-                  : $t('global.placeholder.chooseDropdownOptionDefault')
-            "
-          />
+          <div v-if="column.type === MoreTableFieldType.choice">
+            <Dropdown
+              v-if="isEditableValuesEnabled(column.editable)"
+              v-model="data[field]"
+              class="w-full"
+              :options="getEditableValues(column.editable)"
+              option-label="label"
+              option-value="value"
+              :class="data[field] ? 'dropdown-has-value' : ''"
+              :placeholder="
+                data[field]
+                  ? getLabelForChoiceValue(
+                      data[field],
+                      getMoreTableChoiceValues(
+                        column.editable as MoreTableChoiceOptions,
+                      ),
+                    )
+                  : column.placeholder
+                    ? column.placeholder
+                    : $t('global.placeholder.chooseDropdownOptionDefault')
+              "
+            />
+            <span v-else>{{
+              getLabelForChoiceValue(
+                data[field],
+                getEditableValues(column.editable),
+              )
+            }}</span>
+          </div>
           <MultiSelect
             v-if="
               column.type === MoreTableFieldType.multiselect ||
               column.type === MoreTableFieldType.singleselect
             "
             v-model="data[field]"
-            :options="isEditableWithValues(column.editable)"
+            :options="getEditableValues(column.editable)"
             option-label="label"
             :selection-limit="
               column.type === MoreTableFieldType.singleselect ? 1 : undefined
@@ -756,7 +785,7 @@ Licensed under the Elastic License 2.0. */
             <span v-if="column.type === MoreTableFieldType.choice">{{
               getLabelForChoiceValue(
                 data[field],
-                isEditableWithValues(column.editable),
+                getEditableValues(column.editable),
               )
             }}</span>
             <span v-if="column.type === MoreTableFieldType.calendar">

diff --git a/src/models/MoreTableModel.ts b/src/models/MoreTableModel.ts
@@ -39,6 +39,7 @@ export interface MoreTableFilterOption {
 export interface MoreTableChoiceOptions {
   values: MoreTableChoice[];
   placeholder?: string;
+  editable?: boolean;
 }
 export interface MoreTableChoice {
   label: string;