feat: add establishment settings

src/app/pages/settings/establishments/establishment-add-page/establishment-add-page.html

@@ -0,0 +1,3 @@
+<app-establishment-add #e>
+  <app-establishment-form [form]="e.form"></app-establishment-form>
+</app-establishment-add>

src/app/pages/settings/establishments/establishment-add-page/establishment-add-page.scss

@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}

src/app/pages/settings/establishments/establishment-add-page/establishment-add-page.spec.ts

@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EstablishmentAddPage } from './establishment-add-page';
+import { EstablishmentSettings } from '../../../../services/establishment-settings';
+import { provideTranslateService } from '@ngx-translate/core';
+import { ChainDAO } from '../../../../dao/ChainDAO';
+
+describe('EstablishmentAddPage', () => {
+  let component: EstablishmentAddPage;
+  let fixture: ComponentFixture<EstablishmentAddPage>;
+
+  let chainDAO: Partial<ChainDAO>;
+
+  beforeEach(async () => {
+    chainDAO = {
+      findAll: vi.fn(),
+    };
+    await TestBed.configureTestingModule({
+      imports: [EstablishmentAddPage],
+      providers: [
+        { provide: ChainDAO, useValue: chainDAO },
+        { provide: EstablishmentSettings, useValue: {} },
+        provideTranslateService(),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EstablishmentAddPage);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/settings/establishments/establishment-add-page/establishment-add-page.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { EstablishmentAdd } from "../../../../components/establishment-add/establishment-add";
+import { EstablishmentForm } from "../establishment-form/establishment-form";
+
+@Component({
+  selector: 'app-establishment-add-page',
+  imports: [EstablishmentAdd, EstablishmentForm],
+  templateUrl: './establishment-add-page.html',
+  styleUrl: './establishment-add-page.scss',
+})
+export class EstablishmentAddPage {
+
+}

src/app/pages/settings/establishments/establishment-edit-page/establishment-edit-page.html

@@ -0,0 +1,3 @@
+<app-establishment-edit #e>
+  <app-establishment-form [form]="e.form"></app-establishment-form>
+</app-establishment-edit>

src/app/pages/settings/establishments/establishment-edit-page/establishment-edit-page.scss

@@ -0,0 +1,9 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+h3 {
+  margin-top: 0;
+}

src/app/pages/settings/establishments/establishment-edit-page/establishment-edit-page.spec.ts

@@ -0,0 +1,45 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EstablishmentEditPage } from './establishment-edit-page';
+import { ActivatedRoute } from '@angular/router';
+import { of } from 'rxjs';
+import { Establishment } from '../../../../models/Establishment';
+import { Chain } from '../../../../models/Chain';
+import { EstablishmentSettings } from '../../../../services/establishment-settings';
+import { provideTranslateService } from '@ngx-translate/core';
+import { ChainDAO } from '../../../../dao/ChainDAO';
+
+describe('EstablishmentEditPage', () => {
+  let component: EstablishmentEditPage;
+  let fixture: ComponentFixture<EstablishmentEditPage>;
+
+  let activatedRoute: Partial<ActivatedRoute>;
+  let chainDAO: Partial<ChainDAO>;
+
+  beforeEach(async () => {
+    activatedRoute = {
+      data: of({establishment: new Establishment(new Chain('mock', 'logo_mock.jpg', 1), 'mock street', 1)}),
+    };
+    chainDAO = {
+      findAll: vi.fn().mockResolvedValue([]),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [EstablishmentEditPage],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: ChainDAO, useValue: chainDAO },
+        { provide: EstablishmentSettings, useValue: {} },
+        provideTranslateService(),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EstablishmentEditPage);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/settings/establishments/establishment-edit-page/establishment-edit-page.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { EstablishmentEdit } from "../../../../components/establishment-edit/establishment-edit";
+import { EstablishmentForm } from "../establishment-form/establishment-form";
+
+@Component({
+  selector: 'app-establishment-edit-page',
+  imports: [EstablishmentEdit, EstablishmentForm],
+  templateUrl: './establishment-edit-page.html',
+  styleUrl: './establishment-edit-page.scss',
+})
+export class EstablishmentEditPage {
+
+}

src/app/pages/settings/establishments/establishment-form/establishment-form.html

@@ -0,0 +1,7 @@
+<form [formGroup]="form()">
+  <app-chain-select formControlName="chain"></app-chain-select>
+  <mat-form-field appearance="outline" class="full-width">
+    <mat-label>{{'common.address'|translate|upperfirst}}</mat-label>
+    <input matInput formControlName="address"/>
+  </mat-form-field>
+</form>

src/app/pages/settings/establishments/establishment-form/establishment-form.spec.ts

@@ -0,0 +1,31 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EstablishmentForm } from './establishment-form';
+import { ChainDAO } from '../../../../dao/ChainDAO';
+import { provideTranslateService } from '@ngx-translate/core';
+
+describe('EstablishmentForm', () => {
+  let component: EstablishmentForm;
+  let fixture: ComponentFixture<EstablishmentForm>;
+
+  let chainDAO: Partial<ChainDAO>;
+
+  beforeEach(async () => {
+    chainDAO = {
+      findAll: vi.fn().mockResolvedValue([]),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [EstablishmentForm],
+      providers: [{ provide: ChainDAO, useValue: chainDAO }, provideTranslateService()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EstablishmentForm);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/settings/establishments/establishment-form/establishment-form.ts

@@ -0,0 +1,18 @@
+import { Component, input } from '@angular/core';
+import { EstablishmentFormGroup } from '../establishment-formgroup';
+import { ChainSelect } from '../../../../components/chain-select/chain-select';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { TranslatePipe } from '@ngx-translate/core';
+import { UpperfirstPipe } from "../../../../pipes/upperfirst-pipe";
+
+@Component({
+  selector: 'app-establishment-form',
+  imports: [ChainSelect, ReactiveFormsModule, MatFormField, MatInput, MatLabel, TranslatePipe, UpperfirstPipe],
+  templateUrl: './establishment-form.html',
+  styles: '',
+})
+export class EstablishmentForm {
+  form = input(new EstablishmentFormGroup());
+}

src/app/pages/settings/establishments/establishment-formgroup.ts

@@ -0,0 +1,16 @@
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { Chain } from '../../../models/Chain';
+
+export class EstablishmentFormGroup extends FormGroup<{
+  chain: FormControl<Chain | null>;
+  address: FormControl<string>;
+}> {
+  constructor(
+    form = {
+      chain: new FormControl<Chain | null>(null, [Validators.required]),
+      address: new FormControl('', { nonNullable: true }),
+    },
+  ) {
+    super(form);
+  }
+}

src/app/pages/settings/establishments/establishment-list/establishment-list.spec.ts

@@ -0,0 +1,49 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EstablishmentList } from './establishment-list';
+import { ActivatedRoute, Router } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+import { Establishment } from '../../../../models/Establishment';
+import { Chain } from '../../../../models/Chain';
+import { By } from '@angular/platform-browser';
+
+const ADD_PATH = ['settings', 'establishments', 'add'];
+describe('EstablishmentList', () => {
+  let component: EstablishmentList;
+  let fixture: ComponentFixture<EstablishmentList>;
+
+  let activatedRoute: Partial<ActivatedRoute>;
+  let router: Partial<Router>;
+
+  const activatedRouteData = new BehaviorSubject({
+    establishments: [new Establishment(new Chain('Mock', 'logo_mock.png', 1), 'Mock street', 1)],
+  });
+
+  beforeEach(async () => {
+    activatedRoute = { data: activatedRouteData.asObservable() };
+    router = {
+      navigate: vi.fn(),
+    };
+    await TestBed.configureTestingModule({
+      imports: [EstablishmentList],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: Router, useValue: router },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EstablishmentList);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should navigate to add on add btn click', () => {
+    const addBtn = fixture.debugElement.query(By.css('app-floating-big-btn'));
+    addBtn.triggerEventHandler('bigClick');
+    expect(router.navigate).toHaveBeenCalledExactlyOnceWith(ADD_PATH);
+  });
+});

src/app/pages/settings/establishments/establishment-list/establishment-list.ts

@@ -0,0 +1,40 @@
+import { Component, inject } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { SimpleListWActions } from '../../../../components/simple-list-w-actions/simple-list-w-actions';
+import { FloatingBigBtn } from '../../../../components/floating-big-btn/floating-big-btn';
+import { AsyncPipe } from '@angular/common';
+import { map } from 'rxjs';
+import { SimpleListItem } from '../../../../components/simple-list-w-actions/SimpleListItem';
+import { SimpleListItemAction } from '../../../../components/simple-list-w-actions/SimpleListItemAction';
+import { Establishment } from '../../../../models/Establishment';
+import { SettingsBaseList } from '../../../../components/settings-base-list/settings-base-list';
+
+@Component({
+  selector: 'app-establishment-list',
+  imports: [SimpleListWActions, FloatingBigBtn, AsyncPipe],
+  templateUrl: './../../../../components/settings-base-list/settings-base-list.html',
+  styleUrl: './../../../../components/settings-base-list/settings-base-list.scss'
+})
+export class EstablishmentList extends SettingsBaseList{
+  activatedRoute = inject(ActivatedRoute);
+  router = inject(Router);
+
+  data$ = this.activatedRoute.data.pipe(
+    map((data) =>
+      (<Establishment[]>data['establishments']).map((e) => {
+        const itemName = e.chain.name + (e.address ? ` - ${e.address}` : '');
+        return new SimpleListItem(String(e.id), itemName ?? '', [
+          new SimpleListItemAction('edit', 'edit'),
+        ]);
+      }),
+    ),
+  );
+
+  edit(action: { action: string; subject: string }) {
+    this.router.navigate(['settings', 'establishments', 'edit', action.subject]);
+  }
+
+  add() {
+    this.router.navigate(['settings', 'establishments', 'add']);
+  }
+}

src/app/pages/settings/establishments/establishments.html

@@ -0,0 +1,3 @@
+<app-simple-layout title="settings.establishment.establishments" [withBackBtn]="true" >
+  <router-outlet></router-outlet>
+</app-simple-layout>

src/app/pages/settings/establishments/establishments.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Establishments } from './establishments';
+import { provideTranslateService } from '@ngx-translate/core';
+
+describe('Establishments', () => {
+  let component: Establishments;
+  let fixture: ComponentFixture<Establishments>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Establishments],
+      providers: [provideTranslateService()]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Establishments);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/settings/establishments/establishments.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { SimpleLayout } from "../../../components/simple-layout/simple-layout";
+import { RouterOutlet } from "@angular/router";
+
+@Component({
+  selector: 'app-establishments',
+  imports: [SimpleLayout, RouterOutlet],
+  templateUrl: './establishments.html',
+  styles: '',
+})
+export class Establishments {
+
+}