From d614d1b0200202c92e4fea03354ab2679f6ca1bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Danyi=20D=C3=A1vid?= <danyi.david@gmail.com>
Date: Sat, 12 May 2018 13:15:50 +0200
Subject: [PATCH] * deploy to staging * login feedback implementation * judge
 editor year sorting

---
 angular.json                                  | 19 +++-
 deploy.php                                    |  6 +-
 src/app/auth/auth.module.ts                   |  4 +-
 src/app/auth/auth.service.ts                  |  3 +-
 src/app/auth/auth/auth.component.css          | 16 +++-
 src/app/auth/auth/auth.component.html         | 26 +++---
 src/app/auth/auth/auth.component.ts           |  8 +-
 .../judge-editor/judge-editor.component.html  | 87 ++++++++++---------
 .../judge-editor/judge-editor.component.ts    |  5 ++
 src/environments/environment.stage.ts         |  4 +
 10 files changed, 110 insertions(+), 68 deletions(-)
 create mode 100644 src/environments/environment.stage.ts

diff --git a/angular.json b/angular.json
index 97f9b76..12b86b0 100644
--- a/angular.json
+++ b/angular.json
@@ -47,7 +47,24 @@
               "extractCss": true,
               "namedChunks": false,
               "aot": true,
-              "extractLicenses": true,
+              "extractLicenses": false,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            },
+            "staging": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.stage.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": false,
               "vendorChunk": false,
               "buildOptimizer": true
             }
diff --git a/deploy.php b/deploy.php
index 42f2409..24c5234 100644
--- a/deploy.php
+++ b/deploy.php
@@ -21,8 +21,6 @@ host('alfheim')
     ->user('yvan')
     ->forwardAgent()
     ->set('ng_basehref', '/admin/')
-    ->set('ng_target', 'production')
-    ->set('ng_environment', 'prod')
     ->set('env_vars', 'NODE_ENV=production')
     ->set('deploy_path', '/mnt/apps/granprize/admin');
 
@@ -31,15 +29,13 @@ host('granprize')
     ->user('edvidan')
     ->forwardAgent()
     ->set('ng_basehref', '/admin/')
-    ->set('ng_target', 'production')
-    ->set('ng_environment', 'prod')
     ->set('env_vars', 'NODE_ENV=production')
     ->set('deploy_path', '/var/www/granprize.swedishchamber.hu/admin');
 
 // Tasks
 desc('Prepare release');
 task('deploy:ng-prepare', function() {
-    runLocally("ng build --base-href={{ng_basehref}} --target={{ng_target}} --environment={{ng_environment}}");
+    runLocally("ng build --base-href={{ng_basehref}} --configuration={{stage}} --output-path dist");
     runLocally("tar -cJf dist.tar.xz dist");
 });
 
diff --git a/src/app/auth/auth.module.ts b/src/app/auth/auth.module.ts
index 5aba8fa..f2c1d7c 100644
--- a/src/app/auth/auth.module.ts
+++ b/src/app/auth/auth.module.ts
@@ -9,7 +9,8 @@ import {
     MatButtonModule,
     MatCardModule,
     MatFormFieldModule,
-    MatInputModule
+    MatInputModule,
+    MatProgressSpinnerModule,
 } from "@angular/material";
 
 export function tokenGetterFunctionWrapper() {
@@ -36,6 +37,7 @@ export function tokenGetterFunctionWrapper() {
         MatFormFieldModule,
         MatInputModule,
         MatButtonModule,
+        MatProgressSpinnerModule,
     ],
     declarations: [AuthComponent]
 })
diff --git a/src/app/auth/auth.service.ts b/src/app/auth/auth.service.ts
index 1d4c73e..cfb7ef0 100644
--- a/src/app/auth/auth.service.ts
+++ b/src/app/auth/auth.service.ts
@@ -55,9 +55,8 @@ export class AuthService {
                 this.router.navigate(['/']);
             },
             err => {
-                console.log(err);
                 this.hasError = true;
-                this.errorMessage = "Hiba történt bejelentkezés közben.";
+                this.errorMessage = "Access denied";
                 this.isLoading = false;
             }
         );
diff --git a/src/app/auth/auth/auth.component.css b/src/app/auth/auth/auth.component.css
index daf438c..d084ede 100644
--- a/src/app/auth/auth/auth.component.css
+++ b/src/app/auth/auth/auth.component.css
@@ -1,9 +1,21 @@
-.mat-card {
+.mat-card.login-panel {
     min-width: 250px;
     width: 25%;
     margin: 150px auto auto;
 }
 
+.mat-card.error {
+    margin-bottom: 20px;
+    color: #ffffff;
+    /*background-color: #f44336;*/
+    background-color: #ff4081;
+    font-weight: 500;
+}
+
 .mat-form-field {
     width: 100%;
-}
\ No newline at end of file
+}
+
+.mat-progress-spinner {
+    margin: auto;
+}
diff --git a/src/app/auth/auth/auth.component.html b/src/app/auth/auth/auth.component.html
index 126e9e3..5842f7c 100644
--- a/src/app/auth/auth/auth.component.html
+++ b/src/app/auth/auth/auth.component.html
@@ -1,12 +1,16 @@
-<mat-card>
-  <h2 mat-card-title="">GranPrize login</h2>
-  <form name="login-form" class="login-form" (ngSubmit)="doSubmit()">
-  <mat-form-field class="full-width">
-    <input name="username" type="text" matInput placeholder="Username" [(ngModel)]="userName">
-  </mat-form-field>
-  <mat-form-field class="full-width">
-    <input name="password" type="password" matInput placeholder="Password" [(ngModel)]="password">
-  </mat-form-field>
-  <button mat-raised-button color="primary" [disabled]="!canLogin">Login</button>
-  </form>
+<mat-card class="login-panel">
+    <h2 mat-card-title>GranPrize login</h2>
+    <form name="login-form" class="login-form" (ngSubmit)="doSubmit()" *ngIf="!isLoading">
+        <mat-form-field class="full-width">
+            <input name="username" type="text" matInput placeholder="Username" [(ngModel)]="userName">
+        </mat-form-field>
+        <mat-form-field class="full-width">
+            <input name="password" type="password" matInput placeholder="Password" [(ngModel)]="password">
+        </mat-form-field>
+        <mat-card class="error mat-primary" *ngIf="hasError">{{errorMessage}}</mat-card>
+        <button mat-raised-button color="primary" [disabled]="!canLogin">Login</button>
+    </form>
+    <mat-card-content *ngIf="isLoading">
+        <mat-spinner color="warn"></mat-spinner>
+    </mat-card-content>
 </mat-card>
diff --git a/src/app/auth/auth/auth.component.ts b/src/app/auth/auth/auth.component.ts
index 419475d..495e71d 100644
--- a/src/app/auth/auth/auth.component.ts
+++ b/src/app/auth/auth/auth.component.ts
@@ -39,10 +39,10 @@ export class AuthComponent implements OnInit {
 
     public doSubmit() {
         if (this.canLogin) {
-        this.authService.login(
-            this.userName.trim(),
-            this.password.trim()
-        );
+            this.authService.login(
+                this.userName.trim(),
+                this.password.trim()
+            );
         }
     }
 
diff --git a/src/app/judge-editor/judge-editor.component.html b/src/app/judge-editor/judge-editor.component.html
index 0a70c91..83fbf0c 100644
--- a/src/app/judge-editor/judge-editor.component.html
+++ b/src/app/judge-editor/judge-editor.component.html
@@ -1,4 +1,4 @@
-<form class="judge-form" name="judge-form" (ngSubmit)="saveJudge()" >
+<form class="judge-form" name="judge-form" (ngSubmit)="saveJudge()">
     <mat-form-field class="full-width">
         <input name="name" type="text" matInput placeholder="Display name" [(ngModel)]="judge.name">
     </mat-form-field>
@@ -14,52 +14,55 @@
         Upload profile image
     </button>
     <mat-divider></mat-divider>
-    <mat-expansion-panel>
-        <mat-expansion-panel-header>
-            <mat-panel-title>Assign judege to year</mat-panel-title>
-            <mat-panel-description>Type the year and the title of the judge</mat-panel-description>
-        </mat-expansion-panel-header>
+    <div class="mat-elevation-z8">
+        <mat-expansion-panel class="mat-elevation-z0">
+            <mat-expansion-panel-header>
+                <mat-panel-title>Assign judege to year</mat-panel-title>
+                <mat-panel-description>Type the year and the title of the judge</mat-panel-description>
+            </mat-expansion-panel-header>
 
-        <mat-form-field class="full-width">
-            <input name="title" type="text" matInput placeholder="Title" [(ngModel)]="judgedYearInput.title">
-        </mat-form-field>
-        <mat-form-field class="year-select">
-            <input name="year" type="number" matInput placeholder="Year" [(ngModel)]="judgedYearInput.year"
-                   min="2013" max="2100">
-        </mat-form-field>
-        <button name="add_to_year" type="button" mat-raised-button color="primary" [disabled]="!canAdd"
-                (click)="addToYear()">
-            <i class="fas fa-plus"></i> Add
-        </button>
-    </mat-expansion-panel>
+            <mat-form-field class="full-width">
+                <input name="title" type="text" matInput placeholder="Title" [(ngModel)]="judgedYearInput.title">
+            </mat-form-field>
+            <mat-form-field class="year-select">
+                <input name="year" type="number" matInput placeholder="Year" [(ngModel)]="judgedYearInput.year"
+                       min="2013" max="2100">
+            </mat-form-field>
+            <button name="add_to_year" type="button" mat-raised-button color="primary" [disabled]="!canAdd"
+                    (click)="addToYear()">
+                <i class="fas fa-plus"></i> Add
+            </button>
+        </mat-expansion-panel>
 
-    <mat-card *ngIf="!judge.titles?.length">
-        <i>No records</i>
-    </mat-card>
-    <mat-table [dataSource]="judge.titles" class="title-table" *ngIf="judge.titles?.length">
-        <ng-container matColumnDef="buttons">
-            <mat-header-cell *matHeaderCellDef class="controls"></mat-header-cell>
-            <mat-cell *matCellDef="let row" class="controls">
-                <button type="button" mat-icon-button (click)="removeFromYear(row.year)">
-                    <mat-icon fontSet="fas" fontIcon="fa-trash"></mat-icon>
-                </button>
-            </mat-cell>
-        </ng-container>
 
-        <ng-container matColumnDef="year">
-            <mat-header-cell *matHeaderCellDef>Year</mat-header-cell>
-            <mat-cell *matCellDef="let row">{{row.year}}</mat-cell>
-        </ng-container>
+        <mat-card *ngIf="!judge.titles?.length">
+            <i>No records</i>
+        </mat-card>
+        <mat-table [dataSource]="judge.titles" class="title-table" *ngIf="judge.titles?.length">
+            <ng-container matColumnDef="buttons">
+                <mat-header-cell *matHeaderCellDef class="controls"></mat-header-cell>
+                <mat-cell *matCellDef="let row" class="controls">
+                    <button type="button" mat-icon-button (click)="removeFromYear(row.year)" matTooltip="Delete this entry">
+                        <mat-icon fontSet="fas" fontIcon="fa-trash"></mat-icon>
+                    </button>
+                </mat-cell>
+            </ng-container>
 
-        <!-- Name Column -->
-        <ng-container matColumnDef="title">
-            <mat-header-cell *matHeaderCellDef>Title</mat-header-cell>
-            <mat-cell *matCellDef="let row">{{row.title}}</mat-cell>
-        </ng-container>
+            <ng-container matColumnDef="year">
+                <mat-header-cell *matHeaderCellDef>Year</mat-header-cell>
+                <mat-cell *matCellDef="let row">{{row.year}}</mat-cell>
+            </ng-container>
 
-        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
-    </mat-table>
+            <!-- Name Column -->
+            <ng-container matColumnDef="title">
+                <mat-header-cell *matHeaderCellDef>Title</mat-header-cell>
+                <mat-cell *matCellDef="let row">{{row.title}}</mat-cell>
+            </ng-container>
+
+            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+        </mat-table>
+    </div>
 
     <button type="submit" mat-raised-button color="accent" class="save-button" [disabled]="!canSave">
         <i class="fas fa-save"></i> Save
diff --git a/src/app/judge-editor/judge-editor.component.ts b/src/app/judge-editor/judge-editor.component.ts
index 9405e99..5f52ed7 100644
--- a/src/app/judge-editor/judge-editor.component.ts
+++ b/src/app/judge-editor/judge-editor.component.ts
@@ -32,6 +32,7 @@ export class JudgeEditorComponent implements OnInit {
       judge: Judge,
     }) => {
       this.judge = data.judge ? data.judge : new Judge();
+      this.sortByYear();
     });
   }
 
@@ -62,4 +63,8 @@ export class JudgeEditorComponent implements OnInit {
       this.judgeService.persist(this.judge).subscribe(() => this.router.navigate(['/judges']));
     }
   }
+
+  private sortByYear() {
+      this.judge.titles.sort((a,b) => a.year < b.year ? 1 : -1);
+  }
 }
diff --git a/src/environments/environment.stage.ts b/src/environments/environment.stage.ts
new file mode 100644
index 0000000..12e44d1
--- /dev/null
+++ b/src/environments/environment.stage.ts
@@ -0,0 +1,4 @@
+export const environment = {
+  production: true,
+  apiUrl: 'http://granprize.dev.yvan.hu/api',
+};