GMS-181 All HTML templates replaced with the reusable component

peter-szrnka · Dec 13, 2024 · e6e84c8 · e6e84c8
1 parent 188ccb4
commit e6e84c8
Show file tree

Hide file tree

Showing 27 changed files with 63 additions and 74 deletions.
diff --git a/code/gms-frontend/src/app/components/announcement/announcement-detail.component.html b/code/gms-frontend/src/app/components/announcement/announcement-detail.component.html
@@ -3,7 +3,7 @@
   <nav-back [buttonConfig]="[{url:'/announcement/list', label:'navback.back2List', primary : true}]"></nav-back>
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <form #form="ngForm">

diff --git a/code/gms-frontend/src/app/components/announcement/announcement-list.component.html b/code/gms-frontend/src/app/components/announcement/announcement-list.component.html
@@ -4,7 +4,7 @@ <h2>{{ 'announcements.title' | translate }}</h2>
   <nav-back [buttonConfig]="[{url:'/announcement/new', label:'navback.create', primary : true}]"></nav-back>
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <mat-card class="margin-top">

diff --git a/code/gms-frontend/src/app/components/announcement/announcement-module.ts b/code/gms-frontend/src/app/components/announcement/announcement-module.ts
@@ -13,6 +13,7 @@ import { AnnouncementDetailResolver } from "./resolver/announcement-detail.resol
 import { AnnouncementListResolver } from "./resolver/announcement-list.resolver";
 import { AnnouncementService } from "./service/announcement-service";
 import { TranslatorModule } from "../../common/components/pipes/translator/translator.module";
+import { GmsComponentsModule } from "../../common/components/gms-components-module";
 
 /**
  * @author Peter Szrnka
@@ -21,15 +22,16 @@ import { TranslatorModule } from "../../common/components/pipes/translator/trans
         AnnouncementListComponent, AnnouncementDetailComponent
     ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [
-        AngularMaterialModule,
-        FormsModule,
-        BrowserModule,
-        AppRoutingModule,
-        MomentPipe,
-        NavBackComponent,
-        NavButtonVisibilityPipe,
-        TranslatorModule
-    ], providers: [
+    AngularMaterialModule,
+    FormsModule,
+    BrowserModule,
+    AppRoutingModule,
+    MomentPipe,
+    NavBackComponent,
+    NavButtonVisibilityPipe,
+    TranslatorModule,
+    GmsComponentsModule
+], providers: [
         AnnouncementService, AnnouncementListResolver, AnnouncementDetailResolver,
         provideHttpClient(withInterceptorsFromDi())
     ] })

diff --git a/code/gms-frontend/src/app/components/api_testing/api-testing.component.html b/code/gms-frontend/src/app/components/api_testing/api-testing.component.html
@@ -6,7 +6,7 @@ <h2>{{ 'apitesting.title' | translate }}</h2>
   <form #form="ngForm" novalidate class="form-control">
     <mat-card class="margin-top">
       <mat-card-content>
-        <div class="information">{{ 'apitesting.description' | translate }}</div>
+        <information-message severity="information">{{ 'apitesting.description' | translate }}</information-message>
 
         <p>
           <mat-form-field appearance="fill" class="full-width">

diff --git a/code/gms-frontend/src/app/components/apikey/apikey-detail.component.html b/code/gms-frontend/src/app/components/apikey/apikey-detail.component.html
@@ -2,7 +2,7 @@
   <nav-back [buttonConfig]="buttonConfig"></nav-back>
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <form #form="ngForm" class="form-control">

diff --git a/code/gms-frontend/src/app/components/apikey/apikey-list.component.html b/code/gms-frontend/src/app/components/apikey/apikey-list.component.html
@@ -4,7 +4,7 @@ <h2>{{ 'sidemenu.apiKeys' | translate }}</h2>
   <nav-back [buttonConfig]="[{url:'/apikey/new', label:'navback.create', primary : true}]"></nav-back>
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <mat-card class="margin-top">

diff --git a/code/gms-frontend/src/app/components/event/event-list.component.html b/code/gms-frontend/src/app/components/event/event-list.component.html
@@ -4,7 +4,7 @@ <h2>{{ 'event.title' | translate }}</h2>
   <nav-back></nav-back>
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <mat-card class="margin-top">

diff --git a/code/gms-frontend/src/app/components/help/help.component.html b/code/gms-frontend/src/app/components/help/help.component.html
@@ -1,7 +1,7 @@
 <mat-card class="help-card">
     <mat-card-title>{{ 'help.errorCodes.title' | translate }}</mat-card-title>
     <mat-card-content>
-        <div class="information">{{ 'help.errorCodes' | translate }}</div>
+        <information-message severity="information">{{ 'help.errorCodes' | translate }}</information-message>
 
         <table mat-table [dataSource]="datasource" (load)="true">
             <tr mat-header-row *matHeaderRowDef="columns"></tr>

diff --git a/code/gms-frontend/src/app/components/help/help.compontent.ts b/code/gms-frontend/src/app/components/help/help.compontent.ts
@@ -4,13 +4,14 @@ import { ActivatedRoute } from "@angular/router";
 import { AngularMaterialModule } from "../../angular-material-module";
 import { ErrorCode } from "./model/error-code.model";
 import { TranslatorModule } from "../../common/components/pipes/translator/translator.module";
+import { GmsComponentsModule } from "../../common/components/gms-components-module";
 
 /**
  * @author Peter Szrnka
  */
 @Component({
     standalone: true,
-    imports: [ AngularMaterialModule, TranslatorModule ],
+    imports: [ AngularMaterialModule, TranslatorModule, GmsComponentsModule ],
     selector: 'help',
     templateUrl: './help.component.html',
     styleUrls: ['./help.component.scss']

diff --git a/code/gms-frontend/src/app/components/home/home-module.ts b/code/gms-frontend/src/app/components/home/home-module.ts
@@ -8,6 +8,7 @@ import { MomentPipe } from "../../common/components/pipes/date-formatter.pipe";
 import { HomeComponent } from "./home.component";
 import { HomeService } from "./service/home.service";
 import { TranslatorModule } from "../../common/components/pipes/translator/translator.module";
+import { GmsComponentsModule } from "../../common/components/gms-components-module";
 
 /**
  * @author Peter Szrnka
@@ -20,6 +21,7 @@ import { TranslatorModule } from "../../common/components/pipes/translator/trans
         BrowserAnimationsModule,
         AppRoutingModule,
         MomentPipe,
+        GmsComponentsModule,
         TranslatorModule
     ], providers: [HomeService, provideHttpClient(withInterceptorsFromDi())] })
   export class HomeModule { }
diff --git a/code/gms-frontend/src/app/components/home/home.component.html b/code/gms-frontend/src/app/components/home/home.component.html
@@ -1,5 +1,5 @@
 @if (pageStatus === 2) {
-  <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+  <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
 }
 
 @if (pageStatus === 0) {
@@ -38,7 +38,7 @@
             @if (data.announcements.resultList.length === 0) {
               <mat-card class="gms-card-right">
                 <mat-card-content>
-                  <div class="information">{{ 'home.noAnnouncements' | translate }}</div>
+                  <information-message severity="information">{{ 'home.noAnnouncements' | translate }}</information-message>
                 </mat-card-content>
               </mat-card>
             }
@@ -70,9 +70,7 @@
               <mat-card-title>{{ 'home.users' | translate }}</mat-card-title>
               <mat-card-subtitle>{{ 'home.users.subtitle' | translate }}</mat-card-subtitle>
               @if (data.userCount === 0) {
-                <div class="warning">
-                  <b>{{ 'label.warning' | translate }}:</b> {{ 'home.noUsersRegistered' | translate }}
-                </div>
+                <information-message severity="warning"><b>{{ 'label.warning' | translate }}:</b> {{ 'home.noUsersRegistered' | translate }}</information-message>
               }
               @if (data.userCount > 0) {
                 <p>

diff --git a/code/gms-frontend/src/app/components/ip_restriction/ip-restriction-detail.component.html b/code/gms-frontend/src/app/components/ip_restriction/ip-restriction-detail.component.html
@@ -2,7 +2,7 @@
   <nav-back [buttonConfig]="buttonConfig"></nav-back>
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <form #form="ngForm" class="form-control">

diff --git a/code/gms-frontend/src/app/components/ip_restriction/ip-restriction-list.component.html b/code/gms-frontend/src/app/components/ip_restriction/ip-restriction-list.component.html
@@ -4,7 +4,7 @@ <h2>{{ 'sidemenu.ipRestrictions' | translate }}</h2>
   <nav-back [buttonConfig]="[{url:'/ip_restriction/new', label:'navback.create', primary : true}]"></nav-back>
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <mat-card class="margin-top">

diff --git a/code/gms-frontend/src/app/components/job/job-detail-list.component.html b/code/gms-frontend/src/app/components/job/job-detail-list.component.html
@@ -5,7 +5,7 @@ <h2>{{ 'job.title' | translate }}</h2>
 
   <mat-card class="margin-top">
     <mat-card-content>
-      <div class="information">{{ 'job.execution.info' | translate }}</div>
+      <information-message severity="information">{{ 'job.execution.info' | translate }}</information-message>
       @for (item of job_execution_config; track $index) {
       <button mat-button mat-raised-button color="primary" (click)="executeJob(item.url)" class="margin-r10">{{item.label | translate}}</button>
       }
@@ -17,7 +17,7 @@ <h2>{{ 'job.title' | translate }}</h2>
   </mat-card>
 
   @if (error) {
-  <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+  <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
   <mat-card class="margin-top">

diff --git a/code/gms-frontend/src/app/components/job/job-detail-list.component.ts b/code/gms-frontend/src/app/components/job/job-detail-list.component.ts
@@ -12,6 +12,7 @@ import { SharedDataService } from "../../common/service/shared-data-service";
 import { TranslatorService } from "../../common/service/translator-service";
 import { JobDetail } from "./model/job-detail.model";
 import { JobDetailService } from "./service/job-detail.service";
+import { GmsComponentsModule } from "../../common/components/gms-components-module";
 
 const MANUAL_JOB_EXECUTION_CONFIG = [
     { label: 'job.button.event.maintenance', url : 'event_maintenance' },
@@ -28,7 +29,7 @@ const MANUAL_JOB_EXECUTION_CONFIG = [
  */
 @Component({
     standalone: true,
-    imports: [AngularMaterialModule, CommonModule, NavBackComponent, MomentPipe, TranslatorModule],
+    imports: [AngularMaterialModule, CommonModule, NavBackComponent, MomentPipe, TranslatorModule, GmsComponentsModule],
     selector: 'job-detail-list',
     templateUrl: './job-detail-list.component.html'
 })

diff --git a/code/gms-frontend/src/app/components/keystore/keystore-detail.component.html b/code/gms-frontend/src/app/components/keystore/keystore-detail.component.html
@@ -2,7 +2,7 @@
   <nav-back [buttonConfig]="[{ primary: true, label : 'navback.back2List', url : '/keystore/list' }]"></nav-back>
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <form #form="ngForm" novalidate class="example-form" autocomplete="off">
@@ -29,9 +29,7 @@
                 }
               }
               @if (data.generated === true) {
-                <div class="information">
-                  {{ 'keystores.newInfo' | translate }}
-                </div>
+                <information-message severity="information">{{ 'keystores.newInfo' | translate }}</information-message>
               }
             </mat-card-content>
           </mat-card>
@@ -68,9 +66,7 @@
                   <button mat-button mat-raised-button color="primary" (click)="addNewAlias()">{{ 'keystores.addNewAlias' | translate }}</button>
                 }
                 @if (allAliasesAreValid === false) {
-                  <div class="warning">
-                    {{ 'keystores.aliasWarning' | translate }}
-                  </div>
+                  <information-message severity="warning">{{ 'keystores.aliasWarning' | translate }}</information-message>
                 }
                 <table mat-table [dataSource]="datasource" class="mat-elevation-z1 full-width">
                   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

diff --git a/code/gms-frontend/src/app/components/keystore/keystore-list.component.html b/code/gms-frontend/src/app/components/keystore/keystore-list.component.html
@@ -4,7 +4,7 @@ <h2>{{ 'sidemenu.keystores' | translate }}</h2>
   <nav-back [buttonConfig]="[{url:'/keystore/new', label:'navback.create', primary : true}]"></nav-back>
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <mat-card class="margin-top">

diff --git a/code/gms-frontend/src/app/components/messages/message-list.component.html b/code/gms-frontend/src/app/components/messages/message-list.component.html
@@ -4,7 +4,7 @@ <h2>{{ 'messages.title' | translate }}</h2>
   <nav-back></nav-back>
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <mat-card class="margin-top">

diff --git a/code/gms-frontend/src/app/components/secret/secret-list.component.html b/code/gms-frontend/src/app/components/secret/secret-list.component.html
@@ -5,7 +5,7 @@ <h2>{{ 'sidemenu.secrets' | translate }}</h2>
     <nav-back [buttonConfig]="[{url:'/secret/new', label:'navback.create', primary : true}]"></nav-back>
 
     @if (error) {
-      <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+      <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
     }
     @if (!error) {
       <mat-card class="margin-top">

diff --git a/code/gms-frontend/src/app/components/settings/settings-module.ts b/code/gms-frontend/src/app/components/settings/settings-module.ts
@@ -6,6 +6,7 @@ import { AngularMaterialModule } from "../../angular-material-module";
 import { AppRoutingModule } from "../../app-routing.module";
 import { SettingsSummaryComponent } from "./settings-summary.component";
 import { TranslatorModule } from "../../common/components/pipes/translator/translator.module";
+import { GmsComponentsModule } from "../../common/components/gms-components-module";
 
 /**
  * @author Peter Szrnka
@@ -14,11 +15,10 @@ import { TranslatorModule } from "../../common/components/pipes/translator/trans
         SettingsSummaryComponent
     ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [AngularMaterialModule,
-        FormsModule,
-        BrowserModule,
-        AppRoutingModule,
-        TranslatorModule
-    ], providers: [
+    FormsModule,
+    BrowserModule,
+    AppRoutingModule,
+    TranslatorModule, GmsComponentsModule], providers: [
         provideHttpClient(withInterceptorsFromDi())
     ] })
 export class SettingsModule {}
diff --git a/code/gms-frontend/src/app/components/settings/settings-summary.component.html b/code/gms-frontend/src/app/components/settings/settings-summary.component.html
@@ -4,14 +4,10 @@ <h2>{{ 'settings.title' | translate }}</h2>
   <form #form="ngForm">
     <mat-accordion>
       @if (authMode === 'ldap') {
-      <div class="information">
-        {{ 'settings.info.ldap' | translate }}
-      </div>
+      <information-message severity="information">{{ 'settings.info.ldap' | translate }}</information-message>
       }
       @if (authMode === 'sso') {
-      <div class="information">
-        {{ 'settings.info.sso' | translate }}
-      </div>
+      <information-message severity="information">{{ 'settings.info.sso' | translate }}</information-message>
       }
       <mat-expansion-panel hideToggle [disabled]="authMode !== 'db'">
         <mat-expansion-panel-header>

diff --git a/code/gms-frontend/src/app/components/setup/setup.component.html b/code/gms-frontend/src/app/components/setup/setup.component.html
@@ -15,10 +15,7 @@
           <div [class]="'step' + (currentStep === 4 ? ' step-active': (currentStep < 4) ? ' step-upcoming':  ' step-passed')">{{ 'setup.step5' | translate }}</div>
         </div>
         @if(systemStatus === 'NEED_SETUP') {
-        <div class="information">
-          {{ 'setup.intro' | translate }}
-        </div>
-
+        <information-message severity="information">{{ 'setup.intro' | translate }}</information-message>
         <mat-accordion>
           @for (vmOption of vmOptions; track $index) {
           <mat-expansion-panel [hideToggle]="vmOption.value.length <= 100">
@@ -42,16 +39,12 @@
         }
         @else if(systemStatus === 'NEED_ADMIN_USER') {
         @if (errorMessage) {
-        <div class="warning">
-          {{ 'setup.failed' | translate: errorMessage }}
-        </div>
+        <information-message severity="warning">{{ 'setup.failed' | translate: errorMessage }}</information-message>
         }
 
         @if (errorMessage === undefined) {
         <div>
-          <p class="information">
-            {{ 'setup.description' | translate }}
-          </p>
+          <information-message severity="information">{{ 'setup.description' | translate }}</information-message>
           <mat-form-field appearance="fill" class="full-width">
             <mat-label>{{ 'setup.fullName' | translate }}</mat-label>
             <input matInput name="name" [(ngModel)]="userData.name" required>
@@ -109,9 +102,7 @@
           </mat-form-field>
         </div>
         } @else if(systemStatus === 'COMPLETE') {
-          <div class="information">
-            {{ 'setup.succeeded' | translate }}
-          </div>
+          <information-message severity="information">{{ 'setup.succeeded' | translate }}</information-message>
         }
       }
     </mat-card-content>

diff --git a/code/gms-frontend/src/app/components/user/user-detail.component.html b/code/gms-frontend/src/app/components/user/user-detail.component.html
@@ -3,7 +3,7 @@
   <nav-back [buttonConfig]="[{url:'/user/list', label:'navback.back2List', primary : true}]"></nav-back>
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start">

diff --git a/code/gms-frontend/src/app/components/user/user-list.component.html b/code/gms-frontend/src/app/components/user/user-list.component.html
@@ -7,11 +7,11 @@ <h2>{{ 'sidemenu.users' | translate }}</h2>
   }
 
   @if (authMode === 'ldap') {
-    <div class="information">{{ 'users.managedByLdap' | translate }}</div>
+    <information-message severity="information">{{ 'users.managedByLdap' | translate }}</information-message>
   }
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <mat-card class="margin-top">