Merge branch 'topic-card' into 'dev'

Topic card

See merge request web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client!3

.gitignore

@@ -44,3 +44,6 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+# apiMock
+api/db.json

angular.json

@@ -74,7 +74,8 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "pamn:build"
+            "browserTarget": "pamn:build",
+            "proxyConfig": "proxy.conf.json"
           },
           "configurations": {
             "production": {

api/routes.json

+{
+  "/api/*": "/$1"
+}

package.json

@@ -10,7 +10,8 @@
     "lint": "ng lint",
     "e2e": "ng e2e",
     "release": "standard-version",
-    "translate": "ng xi18n --output-path src/locale --out-file messages.en.xlf"
+    "translate": "ng xi18n --output-path src/locale --out-file messages.en.xlf",
+    "api": "json-server api/db.json --routes api/routes.json --no-cors=true"
   },
   "private": true,
   "dependencies": {
@@ -24,6 +25,8 @@
     "@angular/platform-browser": "~10.1.3",
     "@angular/platform-browser-dynamic": "~10.1.3",
     "@angular/router": "~10.1.3",
+    "json-server": "^0.16.2",
+    "luxon": "^1.25.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"

proxy.conf.json

+{
+  "/api": {
+    "target": "http://localhost:3000"
+  }
+}

src/app/app.component.spec.ts

@@ -5,12 +5,8 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
+      imports: [RouterTestingModule],
+      declarations: [AppComponent],
     }).compileComponents();
   });
 
@@ -26,10 +22,10 @@ describe('AppComponent', () => {
     expect(app.title).toEqual('pamn');
   });
 
-  it('should render title', () => {
+  /*it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement;
     expect(compiled.querySelector('.content span').textContent).toContain('pamn app is running!');
-  });
+  });*/
 });

src/app/app.module.ts

@@ -7,14 +7,14 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { AppComponent } from './app.component';
 import { HomeComponent } from './home/home.component';
 import { CustomBreakPointsProvider } from './config/custom-breakpoint';
-import { StructureListComponent } from './structure-list/structure-list.component';
 import { FooterComponent } from './footer/footer.component';
 import { HeaderComponent } from './header/header.component';
 import { SharedModule } from './shared/shared.module';
+import { StructureListModule } from './structure-list/structure-list.module';
 
 @NgModule({
-  declarations: [AppComponent, HeaderComponent, FooterComponent, HomeComponent, StructureListComponent],
-  imports: [BrowserModule, AppRoutingModule, FlexLayoutModule, SharedModule],
+  declarations: [AppComponent, HeaderComponent, FooterComponent, HomeComponent],
+  imports: [BrowserModule, AppRoutingModule, FlexLayoutModule, SharedModule, StructureListModule],
   providers: [{ provide: LOCALE_ID, useValue: 'fr' }, CustomBreakPointsProvider],
   bootstrap: [AppComponent],
 })

src/app/header/header.component.spec.ts

 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { HeaderComponent } from './header.component';
 
@@ -8,9 +9,9 @@ describe('HeaderComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ HeaderComponent ]
-    })
-    .compileComponents();
+      imports: [RouterTestingModule],
+      declarations: [HeaderComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {

src/app/home/home.component.html

 <div class="content-container">
   <div class="section-container">
-    <p>Home works!</p>
+    <app-structure-list></app-structure-list>
   </div>
 </div>

src/app/structure-list/components/card/card.component.html

+<span class="nbStructuresLabel">{{ structures.length }} structures</span>
+<div class="structure" fxLayout="column" *ngFor="let structure of structures">
+  <span class="nomStructure">{{ structure.nom }}</span>
+
+  <div class="headerStructure" fxLayout="row" fxLayoutAlign="space-between center">
+    <span class="typeStructure">{{ structure.typeDeStructure }}</span>
+    <span class="distanceStructure">├─┤ 63 m</span>
+  </div>
+  <br />
+  <div class="statusStructure" fxLayout="row" fxLayoutAlign="start center">
+    <div *ngIf="structure.isOpen; else closed">
+      <span class="ico-dot-available"></span>
+      <span>Ouvert actuellement</span>
+    </div>
+    <ng-template #closed>
+      <span class="ico-dot-unavailable"></span>
+      <span *ngIf="structure.openedOn.day; else noTime">
+        Fermé - Ouvre {{ structure.openedOn.day }} à {{ structure.openedOn.schedule }}</span
+      >
+    </ng-template>
+    <ng-template #noTime>
+      <span> Fermé - Aucun horaire disponible</span>
+    </ng-template>
+  </div>
+</div>

src/app/structure-list/components/card/card.component.scss

+@import '../../../../assets/scss/icons';
+@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/typography';
+
+.nbStructuresLabel {
+  color: $grey;
+  @include cn-regular-16;
+  display: flex;
+  align-items: center;
+}
+.structure {
+  padding: 12px 0 12px 0;
+  border-bottom: 1px dashed $grey;
+  .typeStructure {
+    color: $grey;
+    @include cn-regular-16;
+  }
+  .nomStructure {
+    padding-top: 13px;
+    color: $purple;
+    @include cn-bold-20;
+    padding-bottom: 5px;
+  }
+  .distanceStructure {
+    @include cn-regular-16;
+    color: $purple;
+  }
+  &:last-child {
+    border-bottom: none;
+  }
+}
+.statusStructure {
+  span {
+    @include cn-regular-14;
+    margin-right: 8px;
+  }
+}

src/app/structure-list/components/card/card.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardComponent } from './card.component';
+import { HttpClientModule } from '@angular/common/http';
+describe('CardComponent', () => {
+  let component: CardComponent;
+  let fixture: ComponentFixture<CardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HttpClientModule],
+      declarations: [CardComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/structure-list/components/card/card.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Structure } from '../../models/structure.model';
+import { StructureService } from '../../services/structure-list.service';
+const { DateTime } = require('luxon');
+
+@Component({
+  selector: 'app-card',
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.scss'],
+})
+export class CardComponent implements OnInit {
+  structures: Structure[] = [];
+  constructor(private structureService: StructureService) {}
+
+  ngOnInit(): void {
+    this.structureService.getStructures().subscribe((structures) => {
+      structures.forEach((s: Structure) => {
+        this.structures.push(this.structureService.updateOpeningStructure(s, DateTime.local()));
+      });
+    });
+  }
+}

src/app/structure-list/components/recherche/recherche.component.html

+<p>recherche works!</p>

src/app/structure-list/components/recherche/recherche.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RechercheComponent } from './recherche.component';
+
+describe('RechercheComponent', () => {
+  let component: RechercheComponent;
+  let fixture: ComponentFixture<RechercheComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RechercheComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RechercheComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/structure-list/components/recherche/recherche.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-recherche',
+  templateUrl: './recherche.component.html',
+  styleUrls: ['./recherche.component.scss'],
+})
+export class RechercheComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

src/app/structure-list/enum/weekday.enum.ts

+export enum Weekday {
+  monday = 1,
+  tuesday,
+  wednesday,
+  thursday,
+  friday,
+  saturday,
+  sunday,
+}

src/app/structure-list/models/day.model.ts

+import { Time } from './time.model';
+
+export class Day {
+  open: boolean;
+  time: Time[];
+
+  constructor(obj?: any) {
+    Object.assign(this, obj, {
+      time: obj && obj.time ? obj.time.map((time) => new Time(time)) : null,
+    });
+  }
+}