only allow editing on UI if status is inprogress or updates required, add banner informing submitter, change button to indicate read only, no extra pop ups, if status updatesrequired and edits made on UI make status inprogress

Author: samobermiller

nmdc_server/api.py

@@ -1242,8 +1242,15 @@ async def update_submission(
             crud.update_submission_contributor_roles(db, submission, new_permissions)
 
         if body_dict.get("status", None):
+            new_status = body_dict["status"]
+            allowed_transitions = {
+                SubmissionStatusEnum.UpdatesRequired.text: SubmissionStatusEnum.InProgress.text,
+                SubmissionStatusEnum.InProgress.text: SubmissionStatusEnum.SubmittedPendingReview.text
+            }
+            current_status = submission.status
             if (
-                body_dict.get("status", None) == SubmissionStatusEnum.SubmittedPendingReview.text
+                current_status in allowed_transitions
+                and new_status in allowed_transitions[current_status]
                 and submission.is_test_submission is False
             ):
                 submission.status = body_dict["status"]

web/src/views/SubmissionPortal/Components/MultiOmicsDataForm.vue

@@ -12,7 +12,7 @@ import Definitions from '@/definitions';
 import doiProviderValues from '@/schema';
 import {
   multiOmicsForm, multiOmicsFormValid, multiOmicsAssociations, checkJGITemplates, canEditSubmissionMetadata, addAwardDoi, removeAwardDoi,
-  templateHasData, checkDoiFormat,
+  templateHasData, checkDoiFormat, canEditSubmissionByStatus, submissionStatus, status,
 } from '../store';
 import { AwardTypes, HARMONIZER_TEMPLATES } from '@/views/SubmissionPortal/types';
 
@@ -160,6 +160,9 @@ export default defineComponent({
       canEditSubmissionMetadata,
       checkJGITemplates,
       templateHasData,
+      canEditSubmissionByStatus,
+      submissionStatus,
+      status,
     };
   },
 });
@@ -175,8 +178,15 @@ export default defineComponent({
       Information about the type of samples being submitted.
     </div>
     <submission-permission-banner
-      v-if="!canEditSubmissionMetadata()"
+      v-if="canEditSubmissionByStatus() && !canEditSubmissionMetadata()"
     />
+    <v-alert
+      v-if="!canEditSubmissionByStatus()"
+      type="info"
+      class="ma-2"
+    >
+      This submission has status "{{ submissionStatus[status] }}" and cannot be edited.
+    </v-alert>
     <v-form
       ref="formRef"
       v-model="multiOmicsFormValid"

web/src/views/SubmissionPortal/Components/StudyForm.vue

@@ -18,6 +18,9 @@ import {
   isOwner,
   canEditSubmissionMetadata,
   checkDoiFormat,
+  canEditSubmissionByStatus,
+  submissionStatus,
+  status,
 } from '../store';
 import { PermissionTitle } from '@/views/SubmissionPortal/types';
 import { stateRefs } from '@/store';
@@ -129,6 +132,9 @@ export default defineComponent({
       currentUserOrcid,
       permissionHelpText,
       checkDoiFormat,
+      canEditSubmissionByStatus,
+      submissionStatus,
+      status,
     };
   },
 });
@@ -144,8 +150,15 @@ export default defineComponent({
       {{ NmdcSchema.classes.Study.description }}
     </div>
     <submission-permission-banner
-      v-if="!canEditSubmissionMetadata()"
+      v-if="canEditSubmissionByStatus() && !canEditSubmissionMetadata()"
     />
+    <v-alert
+      v-if="!canEditSubmissionByStatus()"
+      type="info"
+      class="ma-2"
+    >
+      This submission has status "{{ submissionStatus[status] }}" and cannot be edited.
+    </v-alert>
     <v-form
       ref="formRef"
       v-model="studyFormValid"

web/src/views/SubmissionPortal/Components/SubmissionList.vue

@@ -89,6 +89,11 @@ export default defineComponent({
       };
     }
 
+    function editablebyStatus(item: MetadataSubmissionRecord) {
+      const editableStatuses = ['InProgress', 'UpdatesRequired'];
+      return editableStatuses.includes(item.status);
+    }
+
     async function resume(item: MetadataSubmissionRecord) {
       router?.push({ name: 'Study Form', params: { id: item.id } });
     }
@@ -145,6 +150,7 @@ export default defineComponent({
       options,
       submission,
       testFilterValues,
+      editablebyStatus,
     };
   },
 });
@@ -300,10 +306,14 @@ export default defineComponent({
                 color="primary"
                 @click="() => resume(item)"
               >
-                Resume
-                <v-icon class="pl-1">
-                  mdi-arrow-right-circle
-                </v-icon>
+                <span v-if="editablebyStatus(item)">
+                  <v-icon class="pl-1">mdi-arrow-right-circle</v-icon>
+                  Resume
+                </span>
+                <span v-else>
+                  <v-icon class="pl-1">mdi-eye</v-icon>
+                  View
+                </span>
               </v-btn>
               <v-menu
                 offset-x

web/src/views/SubmissionPortal/Components/TemplateChooser.vue

@@ -5,6 +5,9 @@ import {
   packageName,
   canEditSubmissionMetadata,
   templateHasData,
+  canEditSubmissionByStatus,
+  submissionStatus,
+  status,
 } from '../store';
 import SubmissionDocsLink from './SubmissionDocsLink.vue';
 import SubmissionPermissionBanner from './SubmissionPermissionBanner.vue';
@@ -24,6 +27,9 @@ export default defineComponent({
       templateListDisplayNames,
       canEditSubmissionMetadata,
       templateHasData,
+      canEditSubmissionByStatus,
+      submissionStatus,
+      status,
     };
   },
 });
@@ -45,9 +51,15 @@ export default defineComponent({
       for your samples.
     </div>
     <submission-permission-banner
-      v-if="!canEditSubmissionMetadata()"
+      v-if="canEditSubmissionByStatus() && !canEditSubmissionMetadata()"
     />
-
+    <v-alert
+      v-if="!canEditSubmissionByStatus()"
+      type="info"
+      class="ma-2"
+    >
+      This submission has status "{{ submissionStatus[status] }}" and cannot be edited.
+    </v-alert>
     <v-checkbox
       v-for="option in templates.filter((v) => v[1].status === 'published')"
       :key="option[0]"
@@ -72,35 +84,47 @@ export default defineComponent({
       :label="HARMONIZER_TEMPLATES[option[0]].displayName"
       :value="option[0]"
     />
-    <v-alert
-      v-if="!templateHasData('all')"
-      color="grey lighten-2"
-      class="mt-3"
-    >
-      <p class="text-h5">
-        DataHarmonizer Template Choice
-      </p>
-      <template
-        v-if="packageName.length!=0"
+    <template v-if="canEditSubmissionByStatus()">
+      <v-alert
+        v-if="!templateHasData('all')"
+        color="grey lighten-2"
+        class="mt-3"
       >
-        Your DataHarmonizer template is "{{ templateListDisplayNames }}".
-      </template>
-      <template
+        <p class="text-h5">
+          DataHarmonizer Template Choice
+        </p>
+        <template
+          v-if="packageName.length!=0"
+        >
+          Your DataHarmonizer template is "{{ templateListDisplayNames }}".
+        </template>
+        <template
+          v-else
+        >
+          Please Select One or More Options for Your Template.
+        </template>
+      </v-alert>
+      <v-alert
         v-else
+        type="warning"
       >
-        Please Select One or More Options for Your Template.
-      </template>
-    </v-alert>
+        <p class="text-h5">
+          Template choice disabled
+        </p>
+        Your DataHarmonizer template is "{{ templateListDisplayNames }}".
+        Template choices cannot be disabled while the matching tab in step 5 has data present.
+        To disable the template, return to step 5 and remove all data from that tab. You may add new templates at any time.
+      </v-alert>
+    </template>
     <v-alert
-      v-else
-      type="warning"
+      v-if="!canEditSubmissionByStatus() && packageName.length > 0"
+      color="grey lighten-2"
+      class="mt-3"
     >
       <p class="text-h5">
-        Template choice disabled
+        DataHarmonizer Template
       </p>
-      Your DataHarmonizer template is "{{ templateListDisplayNames }}".
-      Template choices cannot be disabled while the matching tab in step 5 has data present.
-      To disable the template, return to step 5 and remove all data from that tab. You may add new templates at any time.
+      This submission uses the "{{ templateListDisplayNames }}" template.
     </v-alert>
     <div class="d-flex">
       <v-btn

web/src/views/SubmissionPortal/HarmonizerView.vue

@@ -455,6 +455,7 @@ export default defineComponent({
       const data = await harmonizerApi.exportJson();
       mergeSampleData(activeTemplate.value.sampleDataSlot, data);
       await submit(root.$route.params.id, 'SubmittedPendingReview');
+      status.value = 'SubmittedPendingReview';
       submitDialog.value = false;
     });
 
@@ -580,6 +581,14 @@ export default defineComponent({
       addHooks();
     }
 
+    watch(() => canEditSampleMetadata(), (canEdit) => {
+      if (harmonizerApi.ready.value) {
+        if (!canEdit) {
+          harmonizerApi.setTableReadOnly();
+        }
+      }
+    });
+
     onMounted(async () => {
       const [schema, goldEcosystemTree] = await schemaRequest(() => Promise.all([
         api.getSubmissionSchema(),
@@ -662,11 +671,12 @@ export default defineComponent({
   >
     <SubmissionStepper />
     <submission-permission-banner
-      v-if="!canEditSampleMetadata() && canEditSubmissionByStatus()"
+      v-if="canEditSubmissionByStatus() && !canEditSampleMetadata()"
     />
     <v-alert
       v-if="!canEditSubmissionByStatus()"
       type="info"
+      class="ma-2"
     >
       This submission has status "{{ submissionStatus[status] }}" and cannot be edited.
     </v-alert>
@@ -1017,7 +1027,9 @@ export default defineComponent({
         </v-chip>
       </div>
       <v-spacer />
-      <v-tooltip top>
+      <v-tooltip
+        top
+      >
         <template #activator="{ on, attrs }">
           <div
             v-bind="attrs"
@@ -1028,7 +1040,7 @@ export default defineComponent({
               depressed
               :disabled="!canSubmit || status !== 'InProgress' || submitCount > 0"
               :loading="submitLoading"
-              @click="submitDialog = true"
+              @click="canEditSubmissionByStatus() ? submitDialog = true: null"
             >
               <span v-if="status === 'SubmittedPendingReview' || submitCount">
                 <v-icon>mdi-check-circle</v-icon>
@@ -1082,10 +1094,10 @@ export default defineComponent({
             </v-btn>
           </div>
         </template>
-        <span v-if="!canSubmit">
+        <span v-if="!canSubmit && canEditSubmissionByStatus()">
           You must validate all tabs before submitting your study and metadata.
         </span>
-        <span v-else>
+        <span v-if="canSubmit && canEditSubmissionByStatus()">
           Submit for NMDC review.
         </span>
       </v-tooltip>

web/src/views/SubmissionPortal/store/index.ts

@@ -405,15 +405,13 @@ function reset() {
 }
 
 async function incrementalSaveRecord(id: string): Promise<number | void> {
-  if (!['InProgress', 'UpdatesRequired'].includes(status.value)) {
-    throw new Error(`Cannot edit while status is ${submissionStatus[status.value]}`);
-  }
   if (!canEditSampleMetadata()) {
     return Promise.resolve();
   }
   if (!canEditSubmissionByStatus()) {
     return Promise.resolve();
   }
+
   let payload: Partial<MetadataSubmission> = {};
   let permissions: Record<string, PermissionLevelValues> | undefined;
   if (isOwner()) {
@@ -428,8 +426,8 @@ async function incrementalSaveRecord(id: string): Promise<number | void> {
   }
 
   if (hasChanged.value) {
-    status.value = 'InProgress';
-    const response = await api.updateRecord(id, payload, status.value, permissions);
+    const updatedStatus = 'InProgress';
+    const response = await api.updateRecord(id, payload, updatedStatus, permissions);
     hasChanged.value = 0;
     return response.httpStatus;
   }