Merge pull request #4 from apanashchenko/patrons-list-view

Add Patrons list view

Author: SergeyPirogov

.gitignore

@@ -37,3 +37,4 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+*.iml

src/app/app.module.ts

@@ -22,6 +22,7 @@ import { LinkifyPipe } from './pipes/linkify.pipe';
 import { JwtInterceptor } from './jwt.interceptor';
 import { UserManagementComponent } from './user-management/user-management.component';
 import { AddUserComponent } from './add-user/add-user.component';
+import { PatronsListComponent } from './patrons-list/patrons-list.component';
 
 
 @NgModule({
@@ -36,7 +37,8 @@ import { AddUserComponent } from './add-user/add-user.component';
     LoginComponent,
     LinkThemesComponent,
     UserManagementComponent,
-    AddUserComponent
+    AddUserComponent,
+    PatronsListComponent
   ],
   imports: [
     BrowserModule,

src/app/app.routing.ts

@@ -10,6 +10,7 @@ import { LoginComponent } from './login/login.component';
 import { LinkThemesComponent } from './link-themes/link-themes.component';
 import { UserManagementComponent } from './user-management/user-management.component';
 import { AddUserComponent } from './add-user/add-user.component';
+import {PatronsListComponent} from "./patrons-list/patrons-list.component";
 
 const routes: Routes = [
   { path: "add-user", component: AddUserComponent, canActivate: [AuthGuard] },
@@ -19,6 +20,7 @@ const routes: Routes = [
   { path: 'list', component: EpisodeListComponent, canActivate: [AuthGuard] },
   { path: 'link-themes/:id', component: LinkThemesComponent, canActivate: [AuthGuard] },
   { path: 'episode-details/:id', component: EpisodeDetailsComponent, canActivate: [AuthGuard] },
+  { path: 'patrons-list', component: PatronsListComponent, canActivate: [AuthGuard] },
   { path: '**', component: LoginComponent }
 ]
 

src/app/model/patron.list.ts

@@ -0,0 +1,7 @@
+import {Patron} from "./patron";
+
+export class PatronList {
+  totalAmount: Number
+  patrons: Patron[]
+}
+

src/app/model/patron.ts

@@ -0,0 +1,7 @@
+export class Patron {
+  id: Number
+  fullName: string
+  amount: Number
+  email: boolean
+  active: boolean
+}

src/app/patrons-list/patrons-list.component.css

@@ -0,0 +1,5 @@
+.not-read {
+  background-color: #e9ecef;
+  border-color: #dee2e6;
+}
+

src/app/patrons-list/patrons-list.component.html

@@ -0,0 +1,34 @@
+<div class="row pb-3 pr-3">
+  <div class="col">
+    <h4><strong>Total: </strong>{{patronList?.totalAmount}}</h4>
+  </div>
+   <button type="button" class="btn btn-warning pull-right" (click)="clearPatronsCaches()">Reset Patron cache</button>
+</div>
+
+
+<div class="row">
+  <div class="col">
+    <div class="table-responsive">
+      <table class="table table-hover">
+        <thead class="thead-light">
+        <tr>
+          <th class="hidden">№</th>
+          <th class="hidden">Full Name</th>
+          <th class="hidden">Amount</th>
+          <th class="hidden">Email</th>
+        </tr>
+        </thead>
+        <tbody>
+        <ng-container *ngFor="let patron of patronList?.patrons; index as i">
+          <tr [ngClass]="{'not-read' : !isShow(patron.amount)}">
+            <td>{{i + 1}}</td>
+            <td>{{ patron.fullName }}</td>
+            <td>{{ transformPrice(patron.amount) | currency:' ':false:'1.1'}} $</td>
+            <td>{{ patron.email }}</td>
+          </tr>
+        </ng-container>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

src/app/patrons-list/patrons-list.component.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import {PatronList} from "../model/patron.list";
+import {PatronService} from "../service/patron.service";
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'app-patrons-list',
+  templateUrl: './patrons-list.component.html',
+  styleUrls: ['./patrons-list.component.css']
+})
+export class PatronsListComponent implements OnInit {
+
+  patronList: PatronList;
+
+  constructor(private patronService: PatronService, private router: Router) { }
+
+  ngOnInit() {
+    this.patronService.getPatronList().subscribe(data => {
+      this.patronList = data;
+    });
+  }
+
+  transformPrice(val: number): number {
+    return val/100;
+  }
+
+  isShow(val: number): boolean {
+    return val >= 500
+  }
+
+  clearPatronsCaches() {
+    this.patronService.clearPatronsCaches()
+    window.location.reload();
+  }
+
+}

src/app/service/patron.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../environments/environment';
+import { Observable } from 'rxjs';
+import {PatronList} from "../model/patron.list";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PatronService {
+  constructor(private http: HttpClient) { }
+  baseUrl: string = `${environment.apiUrl}`
+
+  getPatronList(): Observable<PatronList> {
+    return this.http.get<PatronList>(`${this.baseUrl}/patrons`)
+  }
+
+  clearPatronsCaches() {
+    this.http.get<PatronList>(`${this.baseUrl}/clearPatronsCaches`)
+  }
+}

src/app/ui/footer/footer.component.html

@@ -1,5 +1,5 @@
 <nav class="navbar navbar-dark bg-dark mt-5 fixed-bottom">
-    <div class="navbar-expand m-auto navbar-text">
-      Made with <i class="fa fa-heart"></i> by <a href="https://github.com/SergeyPirogov">Sergey Pirogov</a>
-    </div>
-  </nav>
+    <!--<div class="navbar-expand m-auto navbar-text">-->
+      <!--Made with <i class="fa fa-heart"></i> by <a href="https://github.com/SergeyPirogov">Sergey Pirogov</a>-->
+    <!--</div>-->
+  </nav>