From 5185c90ad6480010a5f3a8207ccae07036b49e5a Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Mon, 12 Jul 2021 14:31:24 +0200
Subject: [PATCH 1/2] improve positioning of buttons in the submission form

---
 .../submission-form-footer.component.html     | 71 +++++++++++--------
 src/assets/i18n/en.json5                      |  6 +-
 2 files changed, 45 insertions(+), 32 deletions(-)

diff --git a/src/app/submission/form/footer/submission-form-footer.component.html b/src/app/submission/form/footer/submission-form-footer.component.html
index 9771e34cec..4964eb56a2 100644
--- a/src/app/submission/form/footer/submission-form-footer.component.html
+++ b/src/app/submission/form/footer/submission-form-footer.component.html
@@ -1,43 +1,52 @@
 <div class="row" *ngIf="!!submissionId">
   <div class="col">
-    <!-- a class="btn btn-outline-primary" role="button" href="#"><i class="fas fa-times"></i> {{'submission.general.cancel' |translate}}</a -->
-  </div>
-  <div *ngIf="(processingSaveStatus | async) || (processingDepositStatus | async)" class="col d-flex justify-content-end align-items-center">
-    <div class="progress w-75">
-      <div *ngIf="(processingSaveStatus | async)" class="progress-bar progress-bar-striped progress-bar-animated bg-info" [style.width]="'100%'" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Saving...</div>
-      <div *ngIf="(processingDepositStatus | async)" class="progress-bar progress-bar-striped progress-bar-animated bg-info" [style.width]="'100%'" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Depositing...</div>
-    </div>
-  </div>
-  <div *ngIf="!(processingSaveStatus | async) && !(processingDepositStatus | async)" class="col text-right">
-    <button type="button"
-            class="btn btn-secondary"
-            id="save"
-            [disabled]="(processingSaveStatus | async) || !(hasUnsavedModification | async)"
-            (click)="save($event)">
-      <span><i class="fas fa-save"></i> {{'submission.general.save' | translate}}</span>
-    </button>
-    <button type="button"
-            [class.btn-primary]="!(showDepositAndDiscard | async)"
-            [class.btn-secondary]="(showDepositAndDiscard | async)"
-            class="btn"
-            id="saveForLater"
-            [disabled]="(processingSaveStatus | async)"
-            (click)="saveLater($event)">
-      <span><i class="fas fa-save"></i> {{'submission.general.save-later' | translate}}</span>
-    </button>
-    <button *ngIf="(showDepositAndDiscard | async)"
-            type="button"
-            class="btn btn-primary"
-            [disabled]="(submissionIsInvalid | async)" (click)="deposit($event)">
-      <span><i class="fas fa-plus"></i> {{'submission.general.deposit' | translate}}</span>
-    </button>
     <button *ngIf="(showDepositAndDiscard | async)"
             type="button"
             class="btn btn-danger"
+            [disabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
             (click)="$event.preventDefault();confirmDiscard(content)">
       <i class="fas fa-trash"></i> {{'submission.general.discard.submit' | translate}}
     </button>
   </div>
+  <div class="col text-right d-flex justify-content-end align-items-center">
+    <span *ngIf="!(hasUnsavedModification | async) && !(processingSaveStatus | async) && !(processingDepositStatus | async)">
+      <i class="fas fa-check-circle"></i> {{'submission.general.info.saved' | translate}}
+    </span>
+    <span *ngIf="(hasUnsavedModification | async) && !(processingSaveStatus | async) && !(processingDepositStatus | async)">
+      <i class="fas fa-exclamation-circle"></i> {{'submission.general.info.pending-changes' | translate}}
+    </span>
+    <div *ngIf="(processingSaveStatus | async) || (processingDepositStatus | async)" class="col d-flex justify-content-end align-items-center">
+      <div class="progress w-75">
+        <div *ngIf="(processingSaveStatus | async)" class="progress-bar progress-bar-striped progress-bar-animated bg-info" [style.width]="'100%'" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Saving...</div>
+        <div *ngIf="(processingDepositStatus | async)" class="progress-bar progress-bar-striped progress-bar-animated bg-info" [style.width]="'100%'" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Depositing...</div>
+      </div>
+    </div>
+    <div class="ml-2">
+      <button type="button"
+              class="btn btn-secondary"
+              id="save"
+              [disabled]="(processingSaveStatus | async) || !(hasUnsavedModification | async)"
+              (click)="save($event)">
+        <span><i class="fas fa-save"></i> {{'submission.general.save' | translate}}</span>
+      </button>
+      <button type="button"
+              [class.btn-primary]="!(showDepositAndDiscard | async)"
+              [class.btn-secondary]="(showDepositAndDiscard | async)"
+              class="btn"
+              id="saveForLater"
+              [disabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
+              (click)="saveLater($event)">
+        <span><i class="fas fa-save"></i> {{'submission.general.save-later' | translate}}</span>
+      </button>
+      <button *ngIf="(showDepositAndDiscard | async)"
+              type="button"
+              class="btn btn-success"
+              [disabled]="(submissionIsInvalid | async) || (processingSaveStatus | async) || (processingDepositStatus | async)"
+              (click)="deposit($event)">
+        <span><i class="fas fa-plus"></i> {{'submission.general.deposit' | translate}}</span>
+      </button>
+    </div>
+  </div>
 </div>
 
 <ng-template #content let-c="close" let-d="dismiss">
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 117a3d4778..a489a34015 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -3172,6 +3172,10 @@
 
   "submission.general.discard.submit": "Discard",
 
+  "submission.general.info.saved": "Saved",
+
+  "submission.general.info.pending-changes": "Unsaved changes",
+
   "submission.general.save": "Save",
 
   "submission.general.save-later": "Save for later",
@@ -3198,7 +3202,7 @@
   "submission.import-external.source.loading": "Loading ...",
 
   "submission.import-external.source.sherpaJournal": "SHERPA Journals",
-  
+
   "submission.import-external.source.sherpaJournalIssn": "SHERPA Journals by ISSN",
 
   "submission.import-external.source.sherpaPublisher": "SHERPA Publishers",

From aac9f024476e6d7d14197ae7400271e2487144b1 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Mon, 12 Jul 2021 15:04:06 +0200
Subject: [PATCH 2/2] fix test

---
 .../form/footer/submission-form-footer.component.spec.ts      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/submission/form/footer/submission-form-footer.component.spec.ts b/src/app/submission/form/footer/submission-form-footer.component.spec.ts
index 57a193ad7d..dd47dad444 100644
--- a/src/app/submission/form/footer/submission-form-footer.component.spec.ts
+++ b/src/app/submission/form/footer/submission-form-footer.component.spec.ts
@@ -205,7 +205,7 @@ describe('SubmissionFormFooterComponent Component', () => {
       comp.showDepositAndDiscard = observableOf(true);
       compAsAny.submissionIsInvalid = observableOf(true);
       fixture.detectChanges();
-      const depositBtn: any = fixture.debugElement.query(By.css('.btn-primary'));
+      const depositBtn: any = fixture.debugElement.query(By.css('.btn-success'));
 
       expect(depositBtn.nativeElement.disabled).toBeTruthy();
     });
@@ -214,7 +214,7 @@ describe('SubmissionFormFooterComponent Component', () => {
       comp.showDepositAndDiscard = observableOf(true);
       compAsAny.submissionIsInvalid = observableOf(false);
       fixture.detectChanges();
-      const depositBtn: any = fixture.debugElement.query(By.css('.btn-primary'));
+      const depositBtn: any = fixture.debugElement.query(By.css('.btn-success'));
 
       expect(depositBtn.nativeElement.disabled).toBeFalsy();
     });