Merge pull request #1027 from nsemets/fix/ENG-11519

[ENG-11519]  400 Error Editing CEDAR Metadata After Initial Save in Collection Submission

Author: adlius

src/app/features/collections/components/add-to-collection/collection-metadata-step/collection-metadata-step.component.html

@@ -9,15 +9,16 @@
       <div class="flex flex-column gap-4 w-full">
         <h3>{{ 'collections.addToCollection.collectionMetadata' | translate }}</h3>
 
-        @if (!isDisabled() && stepperActiveValue() !== targetStepValue()) {
+        @if (!isDisabled() && !isStepActive()) {
           @if (collectionMetadataSaved()) {
             @if (isCedarMode()) {
-              @if (cedarTemplate()) {
+              @let cedarTpl = cedarTemplate();
+
+              @if (cedarTpl) {
                 <cedar-artifact-viewer
                   #cedarViewer
                   [config]="cedarViewerConfig"
-                  [templateObject]="cedarTemplate()!.attributes.template"
-                  [instanceObject]="cedarFormData()"
+                  [templateObject]="cedarTpl.attributes.template"
                 ></cedar-artifact-viewer>
               }
             } @else {
@@ -45,19 +46,23 @@ <h3>{{ 'collections.addToCollection.collectionMetadata' | translate }}</h3>
   </p-step>
 
   <p-step-panel [value]="targetStepValue()" class="p-0">
-    <ng-template class="m-0" #content let-activateCallback="activateCallback">
+    <ng-template #content>
       @if (isCedarMode()) {
-        @if (cedarTemplate()) {
-          <div class="cedar-editor-container mt-3">
-            <cedar-embeddable-editor
-              #cedarEditor
-              [config]="cedarConfig"
-              [templateObject]="cedarTemplate()!.attributes.template"
-              [metadata]="cedarFormData()"
-              (change)="onCedarChange($event)"
-              (keyup)="onCedarChange($event)"
-            ></cedar-embeddable-editor>
-          </div>
+        @let cedarTpl = cedarTemplate();
+
+        @if (cedarTpl) {
+          @if (isStepActive()) {
+            <div class="cedar-editor-container mt-3">
+              <cedar-embeddable-editor
+                #cedarEditor
+                [config]="cedarConfig"
+                [templateObject]="cedarTpl.attributes.template"
+                [metadata]="cedarFormData()"
+                (change)="onCedarChange($event)"
+                (keyup)="onCedarChange($event)"
+              ></cedar-embeddable-editor>
+            </div>
+          }
 
           <div class="flex justify-content-end gap-3 mt-4">
             <p-button