Added foundation of a simple mock-api

2021-03-24 15:25:38 +01:00
parent 81ac40ef31
commit e1b8979b99
28 changed files with 3807 additions and 33 deletions
@@ -0,0 +1,22 @@
+<digi-ng-table>
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Namn</th>
+        <th scope="col">Ärendenummer</th>
+        <th scope="col">Tjänst</th>
+        <th scope="col">Startdatum</th>
+        <th scope="col">Slutdatum</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let participant of participants">
+        <th scope="row">{{ participant.firstName }} {{ participant.lastName }}</th>
+        <td>{{ participant.errandNumber }}</td>
+        <td>{{ participant.service }}</td>
+        <td>{{ participant.startDate | date: 'yyyy-MM-dd' }}</td>
+        <td>{{ participant.endDate | date: 'yyyy-MM-dd' }}</td>
+      </tr>
+    </tbody>
+  </table>
+</digi-ng-table>
@@ -0,0 +1,26 @@
+import { DigiNgTableModule } from '@af/digi-ng/_table/table';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ParticipantsListComponent } from './participants-list.component';
+
+describe('ParticipantsListComponent', () => {
+  let component: ParticipantsListComponent;
+  let fixture: ComponentFixture<ParticipantsListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ParticipantsListComponent],
+      imports: [RouterTestingModule, DigiNgTableModule],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ParticipantsListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Participant } from '@dafa-models/participant.model';
+
+@Component({
+  selector: 'dafa-participants-list',
+  templateUrl: './participants-list.component.html',
+  styleUrls: ['./participants-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ParticipantsListComponent {
+  @Input() participants: Participant[];
+}
@@ -0,0 +1,11 @@
+import { DigiNgTableModule } from '@af/digi-ng/_table/table';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ParticipantsListComponent } from './participants-list.component';
+
+@NgModule({
+  declarations: [ParticipantsListComponent],
+  imports: [CommonModule, DigiNgTableModule],
+  exports: [ParticipantsListComponent],
+})
+export class ParticipantsListModule {}
@@ -1,18 +1,27 @@
-<digi-typography>
-  <section class="participants">
+<section class="participants">
+  <digi-typography>
    <h1>Mina deltagare</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam magna neque, interdum vel massa eget, condimentum
      rutrum velit. Sed vitae ullamcorper sem. Aliquam malesuada nunc sed purus mollis scelerisque. Curabitur bibendum
      leo quis ante porttitor tincidunt. Nam tincidunt imperdiet tortor eu suscipit. Maecenas ut dui est.
    </p>
+  </digi-typography>

-    <form class="participants__search-wrapper" (ngSubmit)="handleSearchSubmit()">
-      <digi-form-input-search
-        af-label="Sök kunder"
-        af-label-description="Sök på namn eller ärendenummer"
-        (afOnInput)="handleSearchInput($event)"
-      ></digi-form-input-search>
-    </form>
-  </section>
-</digi-typography>
+  <form class="participants__search-wrapper" (ngSubmit)="handleSearchSubmit()">
+    <digi-form-input-search
+      af-label="Sök kunder"
+      af-label-description="Sök på namn eller ärendenummer"
+      (afOnInput)="handleSearchInput($event)"
+    ></digi-form-input-search>
+  </form>
+
+  <dafa-participants-list
+    *ngIf="participants$ | async as participants; else loadingRef"
+    [participants]="participants"
+  ></dafa-participants-list>
+
+  <ng-template #loadingRef>
+    <digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagare"></digi-ng-skeleton-base>
+  </ng-template>
+</section>
@@ -1,5 +1,9 @@
+@import 'variables/gutters';
+
 .participants {
  &__search-wrapper {
    max-width: var(--digi--typography--text--max-width);
+    margin-top: $digi--layout--gutter--l;
+    margin-bottom: $digi--layout--gutter--xl;
  }
 }
@@ -1,5 +1,7 @@
+import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
+import { ParticipantsListModule } from './components/participants-list/participants-list.module';
 import { ParticipantsComponent } from './participants.component';

 describe('ParticipantsComponent', () => {
@@ -10,7 +12,7 @@ describe('ParticipantsComponent', () => {
    waitForAsync(() => {
      TestBed.configureTestingModule({
        declarations: [ParticipantsComponent],
-        imports: [RouterTestingModule],
+        imports: [RouterTestingModule, DigiNgSkeletonBaseModule, ParticipantsListModule],
      }).compileComponents();
    })
  );
@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
+import { Participant } from '@dafa-models/participant.model';
+import { ParticipantsService } from '@dafa-services/api/participants.service';
+import { BehaviorSubject, Observable } from 'rxjs';

@Component({
  selector: 'dafa-participants',
@@ -9,6 +11,9 @@ import { BehaviorSubject } from 'rxjs';
 })
 export class ParticipantsComponent {
  private _searchValue$ = new BehaviorSubject<string>('');
+  participants$: Observable<Participant[]> = this.participantsService.participants$;
+
+  constructor(private participantsService: ParticipantsService) {}

  get searchValue(): string {
    return this._searchValue$.getValue();
@@ -1,12 +1,20 @@
+import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
+import { ParticipantsListModule } from './components/participants-list/participants-list.module';
 import { ParticipantsComponent } from './participants.component';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  declarations: [ParticipantsComponent],
-  imports: [CommonModule, RouterModule.forChild([{ path: '', component: ParticipantsComponent }]), FormsModule],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([{ path: '', component: ParticipantsComponent }]),
+    FormsModule,
+    DigiNgSkeletonBaseModule,
+    ParticipantsListModule,
+  ],
 })
 export class ParticipantsModule {}