apply style guide line

ExLibrisGroup · Nov 23, 2020 · c1d9d1e · c1d9d1e
1 parent 991e661
commit c1d9d1e
Show file tree

Hide file tree

Showing 20 changed files with 902 additions and 716 deletions.
diff --git a/cloudapp/src/app/app.component.ts b/cloudapp/src/app/app.component.ts
@@ -3,8 +3,9 @@ import { AppService } from './app.service';
 
 @Component({
   selector: 'app-root',
-  template: '<div><router-outlet></router-outlet><app-footer></app-footer></div>'
+  template: '<div><cloudapp-alert></cloudapp-alert><router-outlet></router-outlet><app-footer></app-footer></div>'
 })
+
 export class AppComponent {
 
   constructor(private appService: AppService) { }

diff --git a/cloudapp/src/app/app.module.ts b/cloudapp/src/app/app.module.ts
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MaterialModule, getTranslateModule } from '@exlibris/exl-cloudapp-angular-lib';
+import { MaterialModule, getTranslateModule, AlertModule } from '@exlibris/exl-cloudapp-angular-lib';
 import { ToastrModule } from 'ngx-toastr';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
@@ -22,7 +22,6 @@ import {ConfirmationDialog} from './dialog/confirmation-dialog.component';
 import {ErrorMessageComponent} from './error-message/error-message.component';
 import { HelpComponent } from './help/help.component';
 
-
 export function getToastrModule() {
   return ToastrModule.forRoot({
     positionClass: 'toast-top-right',
@@ -54,7 +53,8 @@ export function getToastrModule() {
       ReactiveFormsModule,
       getTranslateModule(),
       getToastrModule(),
-      FlexLayoutModule
+      FlexLayoutModule,
+      AlertModule,
    ],
    providers: [],
    bootstrap: [

diff --git a/cloudapp/src/app/configuration/configuration.component.ts b/cloudapp/src/app/configuration/configuration.component.ts
@@ -1,9 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { CloudAppConfigService } from '@exlibris/exl-cloudapp-angular-lib';
-import { ToastrService } from 'ngx-toastr';
+//import { ToastrService } from 'ngx-toastr';
 import { TranslateService } from '@ngx-translate/core';
 import { NacsisService } from '../nacsis.service';
+import { AlertService } from '@exlibris/exl-cloudapp-angular-lib';
+
 
 @Component({
   selector: 'app-configuration',
@@ -17,9 +19,11 @@ export class ConfigurationComponent implements OnInit {
   constructor(
     private fb: FormBuilder,
     private configService: CloudAppConfigService,
-    private toastr: ToastrService,
+    //private toastr: ToastrService,
     private translate: TranslateService,
-    private nacsis: NacsisService
+    private nacsis: NacsisService,
+    private alert: AlertService
+
   ) { }
 
   ngOnInit() {
@@ -41,10 +45,11 @@ export class ConfigurationComponent implements OnInit {
     this.nacsis.config = this.form.value;
     this.configService.set(this.form.value).subscribe(
       () => {
-        this.toastr.success(this.translate.instant('Config.Success'));
+        this.alert.success(this.translate.instant('Config.Success'), {keepAfterRouteChange:true});  
+
         this.form.markAsPristine();
       },
-      err => this.toastr.error(err.message),
+      err => this.alert.error(err.message, {keepAfterRouteChange:true}),
       ()  => this.saving = false
     );
   }  

diff --git a/cloudapp/src/app/dialog/confirmation-dialog.component.html b/cloudapp/src/app/dialog/confirmation-dialog.component.html
@@ -1,9 +1,8 @@
+<h2 mat-dialog-title>{{title}}</h2>
 <mat-dialog-content>
-	<!-- <mat-icon>warning</mat-icon> -->
-	<img class="img-center" src="./assets/icon_alert_big.png">
-	<h2>{{message}}</h2>
+  <p>{{message}}</p>
 </mat-dialog-content>
-<mat-dialog-actions align="center">
-	<button mat-flat-button color="primary" (click)="onConfirmClick()" tabindex="1">{{confirmButtonText}}</button>
-	<button mat-flat-button color="secondary" mat-dialog-close tabindex="-1">{{cancelButtonText}}</button>
+<mat-dialog-actions align="end">
+	<button mat-flat-button color="secondary" mat-dialog-close>{{cancelButtonText}}</button>
+  	<button mat-flat-button color="secondary" (click)="onConfirmClick()">{{confirmButtonText}}</button>
 </mat-dialog-actions>
diff --git a/cloudapp/src/app/dialog/confirmation-dialog.component.ts b/cloudapp/src/app/dialog/confirmation-dialog.component.ts
@@ -7,19 +7,22 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
   styleUrls: ['confirmation-dialog.component.scss']
 })
 export class ConfirmationDialog {
+  title: string = "Confirm action"
   message: string = "Are you sure?"
   confirmButtonText = "Yes"
   cancelButtonText = "Cancel"
   constructor(
     @Inject(MAT_DIALOG_DATA) private data: any,
     private dialogRef: MatDialogRef<ConfirmationDialog>) {
-      if(data){
-    this.message = data.message || this.message;
-    if (data.buttonText) {
-      this.confirmButtonText = data.buttonText.ok || this.confirmButtonText;
-      this.cancelButtonText = data.buttonText.cancel || this.cancelButtonText;
-    }
+
+    if (data) {
+      this.message = data.message || this.message;
+      this.title = data.title || this.title;
+      if (data.buttonText) {
+        this.confirmButtonText = data.buttonText.ok || this.confirmButtonText;
+        this.cancelButtonText = data.buttonText.cancel || this.cancelButtonText;
       }
+    }
   }
 
   onConfirmClick(): void {

diff --git a/cloudapp/src/app/footer/footer.component.html b/cloudapp/src/app/footer/footer.component.html
@@ -1,4 +1,6 @@
-<hr/>
+<!-- <hr /> -->
 <div class="langs">
-  <a (click)="setLang('en')">English</a> | <a (click)="setLang('jp')">日本語</a>
-</div>
+  <footer id="footer">
+    <a (click)="setLang('en')">English</a> | <a (click)="setLang('jp')">日本語</a>
+  </footer>
+</div>
diff --git a/cloudapp/src/app/form/form.component.html b/cloudapp/src/app/form/form.component.html
@@ -4,19 +4,17 @@
     <button class="form-commands" mat-flat-button type="button" color="primary" (click)="cancel()">
       {{'Cancel' | translate}}
     </button>
-      <button class="form-commands" *ngIf="!isReadOnly" [disabled]="!isAddEnabled()" mat-flat-button type="button" color="primary"
-        (click)="add()">
-        <mat-icon>add</mat-icon>
-      </button>
-      <button *ngIf="!isReadOnly" type="submit" mat-flat-button type="button" color="primary" (click)="save()">
-        {{ 'Save' | translate }}
-      </button>
+    <button class="form-commands" *ngIf="!isReadOnly" [disabled]="!isAddEnabled()" mat-flat-button type="button"
+      color="primary" (click)="add()">
+      <mat-icon>add</mat-icon>
+    </button>
+    <button *ngIf="!isReadOnly" type="submit" mat-flat-button type="button" color="primary" (click)="save()">
+      {{ 'Save' | translate }}
+    </button>
   </div>
-
-  <!--  -->
-  <error-message-inpu-output *ngIf="isErrorMessageVisible" [title]="title" [message]="message"
-   (onCloseEvent)="onCloseClick()"></error-message-inpu-output>
-  <!--  -->
+
+  <!-- <error-message-inpu-output *ngIf="isErrorMessageVisible" [title]="title" [message]="message"
+    (onCloseEvent)="onCloseClick()"></error-message-inpu-output> -->
 
   <div class="title">
     <h2>{{ (isReadOnly ? 'Form.ViewTitle' : holdingId ? 'Form.EditTitle' : 'Form.AddTitle') | translate}}</h2>
@@ -43,7 +41,7 @@ <h2>{{ (isReadOnly ? 'Form.ViewTitle' : holdingId ? 'Form.EditTitle' : 'Form.Add
     <mat-card *ngFor="let form of forms; index as i">
       <form *ngIf="form" [formGroup]="form">
         <div fxLayout="column">
-          <div *ngIf="isBook()" class="form-card-inputs">
+          <div *ngIf="isBook() else serial" class="form-card-inputs">
             <mat-form-field>
               <mat-label translate>Form.Fields.VOL</mat-label>
               <input [readonly]="isReadOnly" matInput formControlName="VOL">
@@ -68,8 +66,13 @@ <h2>{{ (isReadOnly ? 'Form.ViewTitle' : holdingId ? 'Form.EditTitle' : 'Form.Add
               <mat-label translate>Form.Fields.LDF</mat-label>
               <input [readonly]="isReadOnly" matInput formControlName="LDF">
             </mat-form-field>
+            <div class="delete-command">
+              <button *ngIf="!isReadOnly" mat-button mat-stroked-button aria-label="Delete" (click)="delete(i)">
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
           </div>
-          <div *ngIf="!isBook()" class="form-card-inputs">
+          <ng-template #serial class="form-card-inputs">
             <mat-form-field>
               <mat-label translate>Form.Fields.HLYR</mat-label>
               <input [readonly]="isReadOnly" matInput formControlName="HLYR" required>
@@ -96,13 +99,18 @@ <h2>{{ (isReadOnly ? 'Form.ViewTitle' : holdingId ? 'Form.EditTitle' : 'Form.Add
               <mat-label translate>Form.Fields.CPYNT</mat-label>
               <input [readonly]="isReadOnly" matInput formControlName="CPYNT">
             </mat-form-field>
-          </div>
+            <div class="delete-command">
+              <button *ngIf="!isReadOnly" mat-button mat-stroked-button aria-label="Delete" (click)="delete(i)">
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+          </ng-template>
         </div>
-        <div class="commands-container">
+        <!-- <div class="commands-container">
           <button *ngIf="!isReadOnly" mat-button mat-stroked-button aria-label="Delete" (click)="delete(i)">
             <mat-icon>delete</mat-icon>
           </button>
-        </div>
+        </div> -->
       </form>
     </mat-card>
   </div>

diff --git a/cloudapp/src/app/form/form.component.scss b/cloudapp/src/app/form/form.component.scss
@@ -1,6 +1,6 @@
 mat-form-field {
-  margin-top: 10px;
-  margin-bottom: 10px;
+  margin-top: 0px;
+  margin-bottom: 0px;
   margin-right: 20px;
   margin-left: 20px;
 }
@@ -11,10 +11,11 @@ mat-checkbox {
 }
 
 mat-card {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  margin-right: 20px;
+  margin-top: 0px;
+  margin-bottom: 10px;
+  margin-right: 10px;
   margin-left: 0;
+  padding: 0px;
   background: whitesmoke !important;
 }
 
@@ -27,13 +28,15 @@ mat-card {
     overflow: auto;
     //border-bottom: 1px solid grey;
     //border-top: 1px solid grey;
-    padding: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
     padding-left: 0px;
-    padding-right: 15px;
+    padding-right: 0px;
 
     .form-card-inputs {
       display: flex;
       flex-wrap: wrap;
+      justify-content: space-between;
     }
   }
 
@@ -45,7 +48,7 @@ mat-card {
     margin-right: 0px;
     margin-left: 0px;
     margin-bottom: 0px;
-    width: 20%;
+    width: 15%;
     min-width: 250px;
   }
 
@@ -58,4 +61,13 @@ mat-card {
     justify-content: flex-end;
     margin-bottom: 20px;
   }
+
+  .delete-command {
+    // height:fit-content;
+    display: flex;
+    align-items: center;
+    vertical-align: middle;
+    margin-right: 15px;
+
+  }
 }
diff --git a/cloudapp/src/app/form/form.component.ts b/cloudapp/src/app/form/form.component.ts
@@ -1,10 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormGroup } from '@angular/forms';
-import { ToastrService } from 'ngx-toastr';
+//import { ToastrService } from 'ngx-toastr';
 import { TranslateService } from '@ngx-translate/core';
 import { NacsisService, Holding, HoldingsBook, HoldingsSerial, Header } from '../nacsis.service';
 import { holdingFormGroup } from './form-utils';
+import { AlertService } from '@exlibris/exl-cloudapp-angular-lib';
+
 
 @Component({
   selector: 'app-form',
@@ -33,9 +35,10 @@ export class FormComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private toastr: ToastrService,
+    //private toastr: ToastrService,
     private translate: TranslateService,
-    private nacsis: NacsisService
+    private nacsis: NacsisService,
+    private alert: AlertService
   ) { }
 
   ngOnInit() {
@@ -61,11 +64,17 @@ export class FormComponent implements OnInit {
           next: holding => {
             this.originLOC = holding.LOC;
             this.holding = holding;
-            this.forms = new Array(this.holding.nacsisHoldingsList.length);
-
-            this.holding.nacsisHoldingsList.forEach((holdingVolume, index) => {
-              this.forms[index] = holdingFormGroup(holdingVolume, this.isBook());
-            });
+            let formsLength = this.nacsis.isEmpty(this.holding.nacsisHoldingsList) ? 0 : this.holding.nacsisHoldingsList.length;
+            //this.forms = new Array(this.holding.nacsisHoldingsList.length);
+            this.forms = new Array(formsLength);
+
+            if(formsLength > 0) {
+              this.holding.nacsisHoldingsList.forEach((holdingVolume, index) => {
+                this.forms[index] = holdingFormGroup(holdingVolume, this.isBook());
+              })
+            } else {
+              this.forms[0] = holdingFormGroup(null, this.isBook());
+            };
           },
           complete: () => this.loading = false
         });
@@ -148,20 +157,18 @@ export class FormComponent implements OnInit {
     try {
       var header: Header = await this.nacsis.saveHoldingToNacsis(this.mmsId, this.holding)
 
-      if (header.status != this.nacsis.OkStatus) {
-        this.showErrorMessage(this.translate.instant('Form.Errors.SaveFailed'), header.errorMessage);
-      } else {
-        this.toastr.success(this.translate.instant('Form.Success'));
-
+      if (header.status === this.nacsis.OkStatus) {
+        this.alert.success(this.translate.instant('Form.Success'), {keepAfterRouteChange:true});  
         this.holdingId = header.holdingId;
         this.holding.ID = header.holdingId;
         this.nacsis.saveHolding(this.holding);
-
         this.router.navigate(['/holdings', this.mmsId, this.mmsTitle]);
+      } else {
+        this.alert.error(header.errorMessage, {keepAfterRouteChange:true});  
       }
     } catch (e) {
       console.log(e);
-      this.showErrorMessage(this.translate.instant('Form.Errors.SaveFailed'), this.translate.instant('Errors.generalError'));
+      this.alert.error(this.translate.instant('Errors.generalError'), {keepAfterRouteChange:true});  
     } finally {
       this.loading = false;
     }
@@ -177,9 +184,4 @@ export class FormComponent implements OnInit {
     return this.type === this.book;
   }
 
-  showErrorMessage(title: string, message: string) {
-      this.title = title;
-      this.message = message;
-      this.isErrorMessageVisible = true;
-  }
 }