Merge b4cebb6 into db78871

src/EngagementOrganizer.App/package.json

@@ -1,6 +1,6 @@
 {
   "name": "engagement-organizer-app",
-  "version": "1.6.2",
+  "version": "1.7.2",
   "main": "main.js",
   "scripts": {
     "start": "electron .",

src/EngagementOrganizer.SPA/src/app/app.component.scss

@@ -14,4 +14,9 @@
 
 *{
     font-family: "Segoe UI";
+}
+
+.theme-wrapper{
+    height: 100%;
+    margin: 0 1% 0 1%;
 }

src/EngagementOrganizer.SPA/src/app/app.module.ts

@@ -25,7 +25,8 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatSelectModule } from '@angular/material/select';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule, MAT_DATE_FORMATS, DateAdapter } from '@angular/material/core';
-import {StyleManager} from './themes/style-manager'
+import {StyleManager} from './themes/style-manager';
+import { WarningResumeComponent } from './warning-resume/warning-resume.component'
 
 //create our cost var with the information about the format that we want
 export const MY_FORMATS = {
@@ -63,7 +64,8 @@ export function createApiConfigFactory() {
     CustomerComponent,
     EventViewerComponent,
     AppointmentEditorComponent,
-    CustomerViewComponent
+    CustomerViewComponent,
+    WarningResumeComponent
   ],
   imports: [
     BrowserModule,

src/EngagementOrganizer.SPA/src/app/calendar/calendar.component.html

@@ -1,4 +1,4 @@
-<div class="calendar-container">
+<div class="calendar-box">
   <div class="header">
     <div class="year-header">
       {{currentYear}}

src/EngagementOrganizer.SPA/src/app/calendar/calendar.component.scss

@@ -4,8 +4,10 @@
     height: $row-header-height;
 }
 
-.calendar-container{
+.calendar-box{
     display: inline-block;
+    height: 100% !important;
+    width: 100%;
 }
 
 .year-header{
@@ -63,7 +65,7 @@
     padding: 0vw 0vw 0vw 0vw;
     vertical-align: top;
     width:$day-width;
-    height: $row-height;
+    height: 100%;
     display: inline-block;
     text-align: center;
     border: $cell-border-size solid var(--calendarCellBorderColor);
@@ -83,19 +85,19 @@
 .month-header{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 0.95vw;
-   line-height: $row-height;
    border: $cell-border-size solid var(--calendarCellBorderColor);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    font-weight: bold;
    width:$year-month-col-width;
-   height: $row-height;
+   height: 100%;
    background-color: var(--calendarMonthHeaderColor);
    color:var(--calendarMonthHeaderTextColor);
-   display: inline-block;
-   text-align: center;
+   display: inline-flex;
+   align-items: center;
+   justify-content: center;
 }
 
 .day-label{
@@ -128,15 +130,16 @@
     vertical-align: top;
     padding: 0;
     width:$util-width;
-    height: $row-height;
+    height: 100%;
     font-size: $util-font-size;
     display: inline-block;
     border: $cell-border-size solid var(--calendarCellBorderColor);
     box-sizing: border-box;
     text-align: center;
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-    overflow: hidden;
     background-color: var(--calendarUtilsColor);
     color: var(--calendarUtilsTextColor);
-    line-height: $row-height;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 }

src/EngagementOrganizer.SPA/src/app/customer-view/customer-view.component.html

@@ -1,8 +1,10 @@
-<div *ngFor="let cus of customers" [ngStyle]="getCustomerStyle(cus)" class="customer-tile">
+<div *ngFor="let cus of getCustomersWithAppointmentInYear()" [ngStyle]="getCustomerStyle(cus)" class="customer-tile">
     <div>
         <b>({{cus.shortDescription}}) - {{cus.name}}</b>
-        <div class="action-customer"><button (click)="customerSelectedForEdit.emit(cus)" mat-raised-button color="basic">EDIT</button>
+        <div class="action-customer"><button (click)="customerSelectedForEdit.emit(cus)" mat-raised-button
+                color="basic">EDIT</button>
         </div>
     </div>
     <span [innerHTML]="getCustomerSummary(cus)"></span>
-</div>
+</div>
+<div *ngIf="getCustomersWithAppointmentInYear()?.length==0">No customer's appointments for the selcted year</div>

src/EngagementOrganizer.SPA/src/app/customer-view/customer-view.component.ts

@@ -31,6 +31,11 @@ export class CustomerViewComponent implements OnInit {
   ngOnInit() {
   }
 
+  getCustomersWithAppointmentInYear() {
+    if (this.customers) {
+      return this.customers.filter(x => this.getCountEventsBySelectedYearAndCustomer(x.id) > 0);
+    }
+  }
 
   getCustomerStyle(cus: Customer) {
     let style = {
@@ -67,6 +72,10 @@ export class CustomerViewComponent implements OnInit {
     return ris;
   }
 
+  getCountEventsBySelectedYearAndCustomer(customerId: number) {
+    return this.appointments.filter(x => x.customerID == customerId && new Date(x.startDate.toString()).getFullYear() == this.selectedYear).length;
+  }
+
   getEventsByDateAndCustomer(date: Date, customerId: number): Array<Appointment> {
     var ris: Array<Appointment> = [];
     if (date != null) {

src/EngagementOrganizer.SPA/src/app/customer/customer.component.html

@@ -26,12 +26,14 @@
           placeholder="Color"></mat-form-field>&nbsp;
       <mat-form-field class="color"><input type="text" [(ngModel)]="currentCustomer.textColor" maxlength="7" matInput
           placeholder="Text"></mat-form-field>&nbsp;
-      <mat-form-field class="project-color"><input type="text" [(ngModel)]="currentCustomer.projectColors" maxlength="50" matInput
-          placeholder="Project color"></mat-form-field>&nbsp;
+      <mat-form-field class="project-color"><input type="text" [(ngModel)]="currentCustomer.projectColors"
+          maxlength="50" matInput placeholder="Project color"></mat-form-field>&nbsp;
       <button (click)="saveCustomer()" mat-raised-button color="primary">SAVE</button>&nbsp;
       <button (click)="cancelEditCustomer()" mat-raised-button color="primary">CANCEL</button>
     </div>
   </div>
 </div>
-<app-customer-view [customers]="customers" [appointments]="appointments" [selectedYear]="selectedYear"
-  [filterProject]="filterProject" (customerSelectedForEdit)="editCustomer($event)"></app-customer-view>
+<div class="customer-list">
+  <app-customer-view [customers]="customers" [appointments]="appointments" [selectedYear]="selectedYear"
+    [filterProject]="filterProject" (customerSelectedForEdit)="editCustomer($event)"></app-customer-view>
+</div>

src/EngagementOrganizer.SPA/src/app/customer/customer.component.scss

@@ -19,6 +19,12 @@
 }
 
 .header{
-    height: 65px;
-    padding: 0px 10px 0px 10px;
+    height: 7%;
+    padding: 0px 0px;
+    overflow: hidden;
+}
+
+.customer-list{
+    height: 90%;
+    overflow-y: auto;
 }

src/EngagementOrganizer.SPA/src/app/event-viewer/event-viewer.component.scss

@@ -5,10 +5,11 @@
     width: 100%;
     font-size: $event-font-size;
     height: $event-height;
-    line-height: $event-height;
-    display:inline-block;
     float: left;
     font-family: 'Segoe UI';
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .event:hover{

src/EngagementOrganizer.SPA/src/app/home/home.component.html

@@ -7,24 +7,21 @@
     </mat-form-field>
     &nbsp;&nbsp;
     <button mat-mini-fab color="primary" (click)="changeYear(selectedYear+1)">+</button>
-   <mat-form-field class="filter-projext-box">
+    <mat-form-field class="filter-projext-box">
         <mat-label>Project</mat-label>
         <input matInput placeholder="Project" maxlength="10" [ngModel]="filterProject"
             (keyup.enter)="changeFilterProject($event.target.value)">
     </mat-form-field>
     <div class="calendar-option">
+        <button (click)="showDialogWarning()" mat-mini-fab color="warn" *ngIf="this.getWarnings().length>0">
+            W
+        </button>&nbsp;
         <button (click)="availability()" mat-raised-button color="primary">
             AVAILABILITY
         </button>
     </div>
 </div>
 <div class="calendar-container">
-    <app-calendar [currentYear]="selectedYear" [filterProject]="filterProject" [appointments]="appointments" (daySelected)="calendarDaySelected($event)"
-        (eventSelected)="calendarEventSelcted($event)"></app-calendar>
+    <app-calendar  class="calendar-app" [currentYear]="selectedYear" [filterProject]="filterProject" [appointments]="appointments"
+        (daySelected)="calendarDaySelected($event)" (eventSelected)="calendarEventSelcted($event)"></app-calendar>
 </div>
-<span class="warning-view" *ngIf="getWarnings().length>0">
-    <b>WARNINGS:</b>
-    <div *ngFor="let warn of getWarnings()">
-        {{warn.startDate | date: 'dd/MM/yyyy'}} - {{warn.type.description}} - {{warn.warningDescription}}
-    </div>
-</span>

src/EngagementOrganizer.SPA/src/app/home/home.component.scss

@@ -1,19 +1,18 @@
-.warning-view{
-    display: inline-block;
-    color:red;
-    font-size: 13px;
-    margin-left: 10px;
-}
-
 .calendar-container{
     text-align: center;
+    height: 91%;
 }
 
 .header{
-    height: 65px;
-    padding: 0px 10px 0px 10px;
+    height: 6%;
+    padding: 0px 0px;
+    overflow: hidden;
 }
 
 .calendar-option{
     float:right;
+}
+
+.calendar-app{
+    height: 45%;
 }

src/EngagementOrganizer.SPA/src/app/home/home.component.ts

@@ -10,6 +10,7 @@ import { CustomDialogService } from '../custom-dialog/custom-dialog.service';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { AppointmentEditorComponent } from '../appointment-editor/appointment-editor.component';
+import { WarningResumeComponent } from '../warning-resume/warning-resume.component';
 
 @Component({
   selector: 'app-home',
@@ -84,6 +85,20 @@ export class HomeComponent implements OnInit {
     });
   }
 
+  showDialogWarning(){
+    const dialogRef = this.dialog.open(WarningResumeComponent, {
+      width: '700px',
+      height: '400px',
+      data: {
+        warnings: this.getWarnings()
+      }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('The dialog was closed');
+    });
+  }
+
   calendarEventSelcted(app: AppointmentExtraInfo) {
     this.currentAppointment = {
       isEditing: true,

src/EngagementOrganizer.SPA/src/app/variable.scss

@@ -1,14 +1,13 @@
 $event-font-size:1.4vh;
-$event-height:2.0vh;
+$event-height:37.6%;
 $header-font-size:1.0vw;
 $month-font-size:1.05vw;
 $day-label-font-size:1.6vh;
 $day-label-height:1.7vh;
 $row-header-height:4vh;
-$row-height:5.8vh;
-$util-width: 2.6vw;
+$row-height:7.6%;
+$util-width: 3%;
 $util-font-size:1.1vw;
 $cell-border-size:0.5px;
-$year-month-col-width:2.7vw;
-$calendar-margin-width:0.5vw;
-$day-width:((100vw - $year-month-col-width - $util-width - ($calendar-margin-width * 2))/37);
+$year-month-col-width:3%;
+$day-width:((100% - $year-month-col-width - $util-width)/37);

src/EngagementOrganizer.SPA/src/app/warning-resume/warning-resume.component.html

@@ -0,0 +1,6 @@
+<span class="warning-view">
+    <b>WARNINGS:</b>
+    <div *ngFor="let warn of warnings">
+        {{warn.startDate | date: 'dd/MM/yyyy'}} - {{warn.type.description}} - {{warn.warningDescription}} - {{warn.customer.name}}
+    </div>
+</span>

src/EngagementOrganizer.SPA/src/app/warning-resume/warning-resume.component.scss

@@ -0,0 +1,7 @@
+.warning-view{
+    display: inline-block;
+    color:red;
+    font-size: 17px;
+    margin-left: 10px;
+    font-weight: bold;
+}

src/EngagementOrganizer.SPA/src/app/warning-resume/warning-resume.component.ts

@@ -0,0 +1,23 @@
+import { Inject } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { AppointmentExtraInfo } from '../api/EngagementOrganizerApiClient/model/models';
+
+@Component({
+  selector: 'app-warning-resume',
+  templateUrl: './warning-resume.component.html',
+  styleUrls: ['./warning-resume.component.scss']
+})
+export class WarningResumeComponent implements OnInit {
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: {  warnings: Array<AppointmentExtraInfo> }) { 
+    this.warnings = this.data.warnings;
+  }
+
+  ngOnInit(): void {
+
+  }
+
+  warnings: Array<AppointmentExtraInfo>;
+
+}

src/EngagementOrganizer.SPA/src/styles.scss

@@ -1,8 +1,10 @@
 
-body
+body,html
 {
     margin: 0;
     font-family: 'Segoe UI';
+    height: 100%;
+    overflow: hidden;
 }
 
 .year-box{