Integrate transport providers edit

src/app/configs/configs-routing.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
-import { AuthGuardService } from "../shared";
+import { AuthGuardService } from "../shared/services/auth-guard.service";
 import { ConfigsComponent } from "./configs.component";
 
 const routes: Routes = [

src/app/configs/transport-providers/tranport-providers-list/transport-provider-list.component.html

@@ -1,3 +1,5 @@
-<app-records-table [values]="transportProviders$ | async"
+<app-records-table
+  [values]="transportProviders$ | async"
   [excludeCols]="excludeCols"
-  (onRowSelect)="handleRowSelect($event)"></app-records-table>
+  (selectedRecord)="onRowSelect($event)"
+></app-records-table>

src/app/configs/transport-providers/tranport-providers-list/transport-provider-list.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
 import { Observable } from "rxjs";
-import { filter, first } from "rxjs/operators";
 import { TransportProvider } from "src/app/online-orders/shared";
 import { TransportProvidersService } from "src/app/online-orders/transport-providers.service";
 
@@ -13,17 +13,18 @@ export class TransportProviderListComponent implements OnInit {
   public transportProviders$: Observable<TransportProvider[]>;
   public excludeCols: string[] = ["availabilityRules"];
 
-  constructor(private service: TransportProvidersService) {}
+  constructor(
+    private service: TransportProvidersService,
+    private router: Router
+  ) {}
 
-  handleRowSelect(selectedRecord: TransportProvider): void {
-    // navigate to single record
-    console.log(selectedRecord);
+  async onRowSelect(selectedRecord: TransportProvider): Promise<void> {
+    await this.router.navigate([
+      `configuration/transport-providers/${selectedRecord.id}`,
+    ]);
   }
 
   ngOnInit(): void {
     this.transportProviders$ = this.service.getTransportProviders();
-
-    // filter((x) => x.length !== 0 || !x)
-    // first()
   }
 }

src/app/configs/transport-providers/transport-providers-container.component.ts

@@ -0,0 +1,25 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-transport-providers-container",
+  template: `
+    <p-toolbar styleClass="p-shadow-1 p-mb-4">
+      <div class="p-toolbar-group-left"></div>
+
+      <div class="p-toolbar-group-right">
+        <button
+          pButton
+          pRipple
+          class="p-button-raised p-mr-2"
+          icon="pi pi-plus"
+          label="New"
+          tooltipPosition="bottom"
+          routerLink="/configuration/transport-providers/new"
+        ></button>
+      </div>
+    </p-toolbar>
+    <router-outlet></router-outlet>
+  `,
+  styles: [],
+})
+export class TransportProvidersContainerComponent {}

src/app/configs/transport-providers/transport-providers-edit/transport-providers-edit.component.css

@@ -0,0 +1,4 @@
+:host ::ng-deep .p-chip.custom-chip {
+  background: var(--primary-color);
+  color: var(--primary-color-text);
+}

src/app/configs/transport-providers/transport-providers-edit/transport-providers-edit.component.html

@@ -1 +1,164 @@
-<p>transport-providers-edit works!</p>
+<p-tabView>
+  <p-tabPanel header="Transport Provider">
+    <ng-container *ngIf="record$ | async as r">
+      <p-card styleClass="p-mb-4">
+        <ng-template pTemplate="title">
+          <span>
+            {{ r.text }}
+          </span>
+        </ng-template>
+        <ng-template pTemplate="subtitle">
+          <span> {{ tpHelperText }} </span>
+        </ng-template>
+        <div class="content">
+          <form #editForm="ngForm" (ngSubmit)="save()">
+            <div class="p-fluid p-formgrid p-grid">
+              <div class="p-field p-col-12 p-input-filled">
+                <span class="p-float-label">
+                  <input
+                    pInputText
+                    [(ngModel)]="r.key"
+                    id="key"
+                    name="key"
+                    required
+                    autofocus
+                    ngModel
+                    pattern="^[a-z-0-9_.-]*$"
+                    #key="ngModel"
+                  />
+                  <label for="key">Key</label>
+                </span>
+                <small class="p-error" *ngIf="!r.key">Key is required</small>
+                <small class="p-error" *ngIf="key.errors?.pattern">No spaces or upper-case letters</small>
+              </div>
+
+              <div class="p-field p-col-12 p-input-filled">
+                <span class="p-float-label">
+                  <input
+                    pInputText
+                    [(ngModel)]="r.text"
+                    id="text"
+                    name="text"
+                    required
+                  />
+                  <label for="text">Text</label>
+                </span>
+                <small class="p-error" *ngIf="submitted && !r.key"
+                  >Text is required</small
+                >
+              </div>
+            </div>
+          </form>
+        </div>
+        <ng-template pTemplate="footer">
+          <p-toolbar>
+            <div class="p-toolbar-group-left">
+              <button
+                pButton
+                pRipple
+                class="p-button-raised p-mr-2"
+                icon="pi pi-save"
+                tooltipPosition="bottom"
+                label="Save"
+                [disabled]="key.errors?.pattern"
+                (click)="save(r)"
+              ></button>
+              <button
+                pButton
+                pRipple
+                class="p-button-warning p-button-raised"
+                icon="pi pi-ban"
+                tooltipPosition="bottom"
+                label="Cancel"
+                (click)="cancel()"
+              ></button>
+            </div>
+
+            <div class="p-toolbar-group-right">
+              <button
+                pButton
+                pRipple
+                class="p-button-danger p-button-raised"
+                icon="pi pi-times"
+                tooltipPosition="bottom"
+                label="Delete"
+                (click)="confirm($event, r)"
+              ></button>
+              <p-confirmPopup></p-confirmPopup>
+            </div>
+          </p-toolbar>
+        </ng-template>
+      </p-card>
+      <p-fieldset legend="System Fields" [toggleable]="true" [collapsed]="true">
+        <div class="p-d-flex">
+          <div class="p-mr-2 p-d-flex p-flex-column p-jc-start p-ai-center">
+            <div>
+              <p-chip>Record Id</p-chip>
+            </div>
+            <div>
+              <span>
+                {{ r.id }}
+              </span>
+            </div>
+          </div>
+
+          <p-divider layout="vertical"></p-divider>
+
+          <div class="p-mr-2 p-d-flex p-flex-column p-jc-start p-ai-center">
+            <div class="text-900 mb-3 font-medium">
+              <p-chip>Created By</p-chip>
+            </div>
+            <span class="text-700 text-sm line-height-3">{{
+              r.createdby
+            }}</span>
+          </div>
+
+          <p-divider layout="vertical"></p-divider>
+
+          <div class="p-mr-2 p-d-flex p-flex-column p-jc-start p-ai-center">
+            <div class="text-900 mb-3 font-medium">
+              <p-chip>Date Created</p-chip>
+            </div>
+            <span class="text-700 text-sm line-height-3">{{
+              r.datecreated | date: "short"
+            }}</span>
+          </div>
+
+          <p-divider layout="vertical"></p-divider>
+
+          <div class="p-mr-2 p-d-flex p-flex-column p-jc-start p-ai-center">
+            <div class="text-900 mb-3 font-medium">
+              <p-chip>Updated By</p-chip>
+            </div>
+            <span class="text-700 text-sm line-height-3">
+              {{ r.updatedby }}</span
+            >
+          </div>
+
+          <p-divider layout="vertical"></p-divider>
+
+          <div class="p-mr-2 p-d-flex p-flex-column p-jc-start p-ai-center">
+            <div class="text-900 mb-3 font-medium">
+              <p-chip>Date Updated</p-chip>
+            </div>
+            <span class="text-700 text-sm line-height-3">
+              {{ r.dateupdated | date: "short" }}
+            </span>
+          </div>
+        </div>
+      </p-fieldset>
+    </ng-container>
+  </p-tabPanel>
+
+  <p-tabPanel header="Availabilities">
+    <p>
+      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+      doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
+      inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+      Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
+      fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
+      sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius
+      modi.
+    </p>
+  </p-tabPanel>
+</p-tabView>

src/app/configs/transport-providers/transport-providers-edit/transport-providers-edit.component.spec.ts

@@ -1,14 +1,51 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import { HttpClientTestingModule } from "@angular/common/http/testing";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { FormsModule } from "@angular/forms";
+import { By } from "@angular/platform-browser";
+import { ActivatedRoute, Params } from "@angular/router";
+import { RouterTestingModule } from "@angular/router/testing";
+import { ConfirmationService } from "primeng/api";
+import { BehaviorSubject } from "rxjs";
+import { TransportProvidersService } from "src/app/online-orders/transport-providers.service";
+import { TransportProvidersServiceSpy } from "src/app/shared/testing";
 
 import { TransportProvidersEditComponent } from "./transport-providers-edit.component";
 
 describe("TransportProvidersEditComponent", () => {
   let component: TransportProvidersEditComponent;
   let fixture: ComponentFixture<TransportProvidersEditComponent>;
+  let confirmationSpy: jasmine.SpyObj<ConfirmationService>;
+  const routeChangeSource: BehaviorSubject<Params> =
+    new BehaviorSubject<Params>({});
 
   beforeEach(async () => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    confirmationSpy = jasmine.createSpyObj("ConfirmationService", ["confirm"]);
+
     await TestBed.configureTestingModule({
+      imports: [
+        HttpClientTestingModule,
+        RouterTestingModule.withRoutes([]),
+        FormsModule,
+      ],
       declarations: [TransportProvidersEditComponent],
+      providers: [
+        {
+          provide: TransportProvidersService,
+          useClass: TransportProvidersServiceSpy,
+        },
+        {
+          provide: ConfirmationService,
+          useValue: confirmationSpy,
+        },
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            params: routeChangeSource.asObservable(),
+          },
+        },
+      ],
     }).compileComponents();
   });
 
@@ -21,4 +58,29 @@ describe("TransportProvidersEditComponent", () => {
   it("should create", () => {
     expect(component).toBeTruthy();
   });
+
+  it("valid id route should load form with record", () => {
+    routeChangeSource.next({ id: "1" });
+    fixture.detectChanges();
+    fixture
+      .whenStable()
+      .then(() => {
+        const key = fixture.debugElement.query(By.css("#key"));
+        expect(key.nativeElement.value).toBe("one");
+        expect(key.nativeElement.value).not.toBe("");
+      })
+      .catch(() => console.log(""));
+  });
+
+  it("NEW route should load empty form", () => {
+    routeChangeSource.next({ id: "new" });
+    fixture.detectChanges();
+    fixture
+      .whenStable()
+      .then(() => {
+        const key = fixture.debugElement.query(By.css("#key"));
+        expect(key.nativeElement.value).toBe("");
+      })
+      .catch(() => console.log(""));
+  });
 });