rendering with the template all fields requested!

Csaba79-coder · Csaba79-coder · commit 102137c56c28 · 2023-03-11T14:59:23.000+01:00
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
@@ -3,20 +3,20 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
 import {HttpClientModule} from "@angular/common/http";
-import {ApiModule} from "../../build/openapi/governemnt-service";
+import {ApiModule, GovernmentRepresentativeService, RepresentativeModel} from "../../build/openapi/governemnt-service";
 import { RepresentativeListComponent } from './government-service/components/representative-list/representative-list.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     RepresentativeListComponent
   ],
-  providers: [],
   imports: [
     BrowserModule,
     HttpClientModule,
-    ApiModule
+    ApiModule,
   ],
+  providers: [GovernmentRepresentativeService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/frontend/src/app/government-service/components/representative-list/representative-list.component.html b/frontend/src/app/government-service/components/representative-list/representative-list.component.html
@@ -1 +1,37 @@
-<p>representative-list works!</p>
+<div class="main-content">
+  <div class="section-content section-content-p30">
+    <div class="container-fluid">
+      <div class="row">
+        <!--loop over the collection of donees-->
+        <div *ngFor="let tempRepresentative of representatives" class="col-md-3">
+          <div class="representative-name-box">
+            <img [src]="tempRepresentative.image" alt="{{ tempRepresentative.name}}" class="img-responsive">
+            <h1>{{ tempRepresentative.name }}</h1>
+            <div class="description">
+              {{ tempRepresentative.jobTitle }}
+            </div>
+            <div class="description">
+              {{ tempRepresentative.government }}
+            </div>
+            <div class="description">
+              {{ tempRepresentative.email }}
+            </div>
+            <div class="description">
+              {{ tempRepresentative.phoneNumber }}
+            </div>
+            <div class="description">
+              {{ tempRepresentative.address }}
+            </div>
+            <div class="description">
+              {{ tempRepresentative.note }}
+            </div>
+            <div style="display: flex; gap: 10px;">
+              <a href="#" class="primary-btn">Módosít</a>
+              <a href="#" class="primary-btn">Töröl</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/frontend/src/app/government-service/components/representative-list/representative-list.component.ts b/frontend/src/app/government-service/components/representative-list/representative-list.component.ts
@@ -1,5 +1,9 @@
 import {Component, OnInit} from '@angular/core';
-import {GovernmentRepresentativeService} from "../../../../../build/openapi/governemnt-service";
+import {
+  Availability,
+  GovernmentRepresentativeService
+} from "../../../../../build/openapi/governemnt-service";
+import {DomSanitizer, SafeUrl} from "@angular/platform-browser";
 
 @Component({
   selector: 'app-representative-list',
@@ -8,9 +12,39 @@ import {GovernmentRepresentativeService} from "../../../../../build/openapi/gove
 })
 export class RepresentativeListComponent implements OnInit {
 
-  $representatives = this.representativeService.renderAllRepresentatives()
-  constructor(private readonly representativeService: GovernmentRepresentativeService) {}
+  representatives: SanitizedRepresentativeModel[] = [];
+
+  constructor(private readonly representativeService: GovernmentRepresentativeService, private sanitizer: DomSanitizer) {}
 
   ngOnInit(): void {
+    this.listRepresentatives();
+  }
+
+  private listRepresentatives() {
+    this.representativeService.renderAllRepresentatives().subscribe(
+      data => {
+        this.representatives = data.map(representative => ({
+          ...representative,
+          image: this.sanitizer.bypassSecurityTrustUrl(`data:image/png;base64,${representative.image}`)
+        }));
+      }
+    );
   }
 }
+
+interface SanitizedRepresentativeModel {
+  id?: string;
+  name?: string;
+  email?: string;
+  phoneNumber?: string;
+  address?: string;
+  image: SafeUrl;
+  jobTitle?: string;
+  note?: string;
+  availability?: Availability;
+  government?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  createdBy?: string;
+  updatedBy?: string;
+}
