Design fixes

apps/vaccitron/src/app/app-header/app-header.component.html

@@ -4,7 +4,7 @@
     class="example-icon"
     aria-label="Example icon-button with menu icon"
   >
-    <mat-icon>menu</mat-icon>
+    <img height="40" src="../../assets/logo.jpeg">
   </button>
 
   <h1 i18n="site header|App Title">{{ title }}</h1>

apps/vaccitron/src/app/app.component.scss

@@ -1,7 +1,6 @@
-/*
- * Remove template code below
- */
 :host {
   display: block;
   min-width: 300px;
+  max-width: 800px;
+  margin: auto;
 }

apps/vaccitron/src/app/report-list-page/report-list-page.component.spec.ts

@@ -11,7 +11,48 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { of } from 'rxjs';
 import { environment } from '../../environments/environment';
 
-const MOCK_REPORTS = require('../../assets/demo-data.json');
+const MOCK_REPORTS = [
+  {
+    "city": "100",
+    "healthCareService": "1",
+    "address": "שרה אמנו 39",
+    "branchName": "wat",
+    "reporter": 'ww',
+    "updateTime": 5
+  },
+  {
+    "city": "1001",
+    "healthCareService": "2",
+    "address": "שרה אמנו 39",
+    "branchName": "wat",
+    "reporter": 'ww',
+    "updateTime": 5
+  },
+  {
+    "city": "530",
+    "healthCareService": "0",
+    "address": "שרה אמנו 39",
+    "branchName": "wat",
+    "reporter": 'ww',
+    "updateTime": 5
+  },
+  {
+    "city": "2379",
+    "healthCareService": "3",
+    "address": "שרה אמנו 39",
+    "branchName": "wat",
+    "reporter": 'ww',
+    "updateTime": 5
+  },
+  {
+    "city": "110",
+    "healthCareService": "1",
+    "address": "שרה אמנו 39",
+    "branchName": "wat",
+    "reporter": 'ww',
+    "updateTime": 5
+  }
+];
 
 @Component({
   selector: 'test-component',
@@ -93,12 +134,18 @@ describe('ReportListPageComponent', () => {
         {
           city: '100',
           healthCareService: '1',
-          address: 'שרה אמנו 39'
+          address: 'שרה אמנו 39',
+          "branchName": "wat",
+          "reporter": 'ww',
+          "updateTime": 5
         },
         {
           city: '110',
           healthCareService: '1',
-          address: 'שרה אמנו 39'
+          address: 'שרה אמנו 39',
+          "branchName": "wat",
+          "reporter": 'ww',
+          "updateTime": 5
         },
       ])
     });

apps/vaccitron/src/assets/demo-data.json

@@ -1,27 +1,28 @@
 [
   {
-    "city": "100",
+    "city": "7",
     "healthCareService": "1",
     "address": "שרה אמנו 39"
   },
   {
-    "city": "1001",
+    "city": "10",
     "healthCareService": "2",
     "address": "שרה אמנו 39"
   },
   {
-    "city": "530",
+    "city": "10",
     "healthCareService": "0",
     "address": "שרה אמנו 39"
   },
   {
-    "city": "2379",
+    "city": "9700",
     "healthCareService": "3",
     "address": "שרה אמנו 39"
   },
   {
-    "city": "110",
+    "city": "9700",
     "healthCareService": "1",
     "address": "שרה אמנו 39"
   }
 ]
+

apps/vaccitron/src/styles.scss

@@ -1,10 +1,14 @@
 /* You can add global styles to this file, and also import other style files */
-
 html,
 body {
   height: 100%;
 }
 body {
   margin: 0;
   font-family: Roboto, 'Helvetica Neue', sans-serif;
+  background: rgba(230, 232, 232);
+}
+
+.mat-form-field-appearance-fill .mat-form-field-flex {
+  background: rgba(15, 153, 162, .6);
 }

libs/filter-form/src/lib/filter-form/filter-form.component.html

@@ -2,7 +2,7 @@
   <div class="fields">
     <mat-form-field appearance="fill">
       <mat-label>יישוב</mat-label>
-      <mat-chip-list #citiesChipList aria-label="בחירת יישובים">
+      <mat-chip-list dense #citiesChipList aria-label="בחירת יישובים">
         <mat-chip
           *ngFor="let city of selectedCities"
           [selectable]="false"
@@ -13,6 +13,7 @@
           <mat-icon matChipRemove>cancel</mat-icon>
         </mat-chip>
         <input
+          dense
           type="text"
           [(ngModel)]="citiesFilterTerm"
           [ngModelOptions]="{ standalone: true }"
@@ -23,6 +24,7 @@
         />
       </mat-chip-list>
       <mat-autocomplete
+        dense
         (optionSelected)="addCity($event)"
         #citiesAutoComplete="matAutocomplete"
       >
@@ -37,7 +39,7 @@
 
     <mat-form-field appearance="fill">
       <mat-label>קופת חולים</mat-label>
-      <mat-select matInput formControlName="healthCareService">
+      <mat-select dense matInput formControlName="healthCareService">
         <mat-option
           *ngFor="let healthCareService of healthCareServices | keyvalue"
           value="{{healthCareService.key}}"

libs/filter-form/src/lib/filter-form/filter-form.component.scss

@@ -14,4 +14,5 @@
 
 mat-form-field {
   margin: 0 1em;
+  width: 90%;
 }

libs/interfaces/src/lib/vaccines-report.ts

@@ -1,10 +1,19 @@
 import { CITIES_TYPE, HEALTH_CARE_SERVICES_TYPE } from '@vacgaps/constants';
 
+interface Time {
+  hour: number;
+  minutes: number;
+}
 export interface VaccinesReport {
+  branchName: string;
   city: CITIES_TYPE[number];
   address: string;
   healthCareService: HEALTH_CARE_SERVICES_TYPE[number];
+  startTime?: Time;
+  endTime?: Time;
+  targetGroup?: number;
+  minimalAge?: number;
+  updateTime: number;
+  reporter: string;
   availableVaccines?: number;
-  dueTimeInMs?: number;
-  targetGroup?: string;
 }

libs/reports-list/src/lib/reports-list.module.ts

@@ -4,9 +4,10 @@ import { ReportsListComponent } from './reports-list/reports-list.component';
 import { MatListModule } from '@angular/material/list';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { ReportsListItemComponent } from './reports-list-item/reports-list-item.component';
+import { MatCardModule } from '@angular/material/card';
 
 @NgModule({
-  imports: [CommonModule, MatListModule, ScrollingModule],
+  imports: [CommonModule, MatListModule, ScrollingModule, MatCardModule],
   declarations: [ReportsListComponent, ReportsListItemComponent],
   exports: [ReportsListComponent],
 })

libs/reports-list/src/lib/reports-list/reports-list.component.html

@@ -1,4 +1,4 @@
-<mat-list dense role="list">
+<mat-list dense role="list" *ngIf="reportsList?.length">
   <cdk-virtual-scroll-viewport
     [itemSize]="50"
     minBufferPx="200"
@@ -12,3 +12,18 @@
     </mat-list-item>
   </cdk-virtual-scroll-viewport>
 </mat-list>
+<mat-card dir="rtl" *ngIf="!reportsList?.length">
+  <mat-card-header>
+    <div mat-card-avatar class="example-header-image"></div>
+    <mat-card-title>
+מצטערים
+    </mat-card-title>
+    <mat-card-subtitle>אין תוצאות מתאימות לחיפוש שלך</mat-card-subtitle>
+  </mat-card-header>
+  <img mat-card-image src="../../assets/looking.jpeg" alt="תמונה של תוצאה ריקה">
+  <mat-card-content>
+    <p>
+      תמיד ניתן לחפש בעיר אחרת - אולי יהיו שם תוצאות. התוצאות מתעדכנות אוטומטית כל 5 דקות - אז אפשר להשאיר את האפליקציה פתוחה ולהתעדכן בזמן אמת.
+    </p>
+  </mat-card-content>
+</mat-card>

libs/reports-list/src/lib/reports-list/reports-list.component.scss

@@ -4,9 +4,9 @@
 }
 
 .mat-list-item:nth-child(odd) {
-  background: burlywood;
+  background: rgba(255, 255, 255, .5);
 }
 
 .mat-list-item:nth-child(even) {
-  background: antiquewhite;
+  background: rgba(255, 255, 255, .5);
 }

libs/reports-list/src/lib/reports-list/reports-list.component.spec.ts

@@ -3,7 +3,6 @@ import {
   fakeAsync,
   flush,
   TestBed,
-  tick,
 } from '@angular/core/testing';
 
 import { ReportsListComponent } from './reports-list.component';
@@ -36,17 +35,24 @@ const REPORTS_LIST_MOCK: VaccinesReport[] = [
     city: '100',
     healthCareService: '1',
     address: 'Marom 12, Modiin',
+    "branchName": "wat",
+    "reporter": 'ww',
+    "updateTime": 5
   },
 ];
 
 export class VaccineReportItem implements VaccinesReport {
   constructor(
     public address: string = 'some default address',
     public city: CITIES_TYPE[number] = '100',
-    public healthCareService: HEALTH_CARE_SERVICES_TYPE[number] = '2'
+    public healthCareService: HEALTH_CARE_SERVICES_TYPE[number] = '2',
+    public branchName = "wat",
+    public reporter = "ww",
+    public updateTime = 5
   ) {}
 }
 
+
 @Component({
   selector: 'test-component',
   template: ` <vacgaps-reports-list
@@ -97,13 +103,13 @@ describe('ReportsListComponent', () => {
 
   describe(`list view`, function () {
     it(`should show listItems according to list size`, fakeAsync(() => {
-      finishInit(fixture);
       component.reportsList = [
         new VaccineReportItem(),
         new VaccineReportItem(),
         new VaccineReportItem(),
         new VaccineReportItem(),
       ];
+      finishInit(fixture);
       fixture.detectChanges();
       expect(
         fixture.debugElement.queryAll(By.css('vacgaps-reports-list-item'))

libs/vaccines-reporter/src/lib/vaccines-reports.service.spec.ts

@@ -1,7 +1,7 @@
 import { TestBed } from '@angular/core/testing';
 
 import { VaccinesReportsService } from './vaccines-reports.service';
-import { HttpClientTestingModule, HttpTestingController, TestRequest } from '@angular/common/http/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { HttpClient } from '@angular/common/http';
 
 describe('VaccinesReportsService', () => {
@@ -53,9 +53,9 @@ describe('VaccinesReportsService', () => {
   });
 
   it(`should return different observables for different urls`, function() {
-    const observable1 = service.getVaccinesReports('url1', 500);
-    const observable2 = service.getVaccinesReports('url2', 500);
-    const observable3 = service.getVaccinesReports('url1', 500);
+    const observable1 = service.getVaccinesReports('url1');
+    const observable2 = service.getVaccinesReports('url2');
+    const observable3 = service.getVaccinesReports('url1');
     expect(observable1 !== observable2).toEqual(true);
     expect(observable1).toEqual(observable3);
   });

package.json

@@ -25,7 +25,7 @@
     "dep-graph": "nx dep-graph",
     "help": "nx help",
     "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
-    "mytest": "nx test vaccitron --watch"
+    "test:all": "nx run-many --target=test --all --parallel"
   },
   "private": true,
   "dependencies": {

workspace.json

@@ -19,7 +19,12 @@
             "assets": [
               "apps/vaccitron/src/favicon.ico",
               "apps/vaccitron/src/assets",
-              "apps/vaccitron/src/manifest.webmanifest"
+              "apps/vaccitron/src/manifest.webmanifest",
+              {
+                "glob": "**/*",
+                "input": "libs/reports-list/src/assets/",
+                "output": "./assets/"
+              }
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",