fix routing for edit comp.

get data to the edit compoment from route ID

Add tp toolbar

remove list route

implement service layer

ui path to edit via select

remove list from paths

implement edit

addd the service spy parts

remove unnecessary imports

test it

new tps should be active

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(""));
+  });
 });