more routing

matsen-tool/src/app/app-routing.module.ts

@@ -6,6 +6,8 @@ import {AuthGuard} from './_helpers';
 import {PartnersComponent} from "@app/partners/partners.component";
 import {TwoColumnComponent} from "@app/layout/two-column/two-column.component";
 import {PartnersDetailComponent} from "@app/partners/partners-detail/partners-detail.component";
+import {ProductsComponent} from "@app/products/products.component";
+import {ProductsDetailComponent} from "@app/products/products-detail/products-detail.component";
 
 const accountModule = () => import('./account/account.module').then(x => x.AccountModule);
 const usersModule = () => import('./users/users.module').then(x => x.UsersModule);
@@ -29,6 +31,7 @@ const routes: Routes = [
         canActivate: [AuthGuard],
         children: [
             {path: '', component: PartnersComponent, data: {dataType: 'supplier'}},
+            {path: 'detail', component: PartnersDetailComponent, data: {dataType: 'supplier-detail'}},
         ]
     },
     {
@@ -37,12 +40,18 @@ const routes: Routes = [
         canActivate: [AuthGuard],
         children: [
             {path: '', component: PartnersComponent, data: {dataType: 'service'}},
+            {path: 'detail', component: PartnersDetailComponent, data: {dataType: 'service-detail'}},
+        ]
+    },
+    {
+        path: 'products',
+        component: TwoColumnComponent,
+        canActivate: [AuthGuard],
+        children: [
+            {path: '', component: ProductsComponent, data: {dataType: 'product'}},
+            {path: 'detail', component: ProductsDetailComponent, data: {dataType: 'product-detail'}},
         ]
     },
-
-    // { path: 'customers', component: PartnersComponent, data: { dataType: 'customer' } },
-    // { path: 'suppliers', component: PartnersComponent, data: { dataType: 'supplier' } },
-    // { path: 'service', component: PartnersComponent, data: { dataType: 'service' } },
 
     // otherwise redirect to home
     {path: '**', redirectTo: ''}

matsen-tool/src/app/app.module.ts

@@ -22,6 +22,8 @@ import {PartnersComponent} from './partners/partners.component';
 import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 import {TwoColumnComponent} from './layout/two-column/two-column.component';
 import {PartnersDetailComponent} from './partners/partners-detail/partners-detail.component';
+import { ProductsComponent } from './products/products.component';
+import { ProductsDetailComponent } from './products/products-detail/products-detail.component';
 
 export function apiConfigFactory(): Configuration {
     const params: ConfigurationParameters = {
@@ -62,7 +64,9 @@ export function HttpLoaderFactory(http: HttpClient) {
         AlertComponent,
         HomeComponent,
         TwoColumnComponent,
-        PartnersDetailComponent
+        PartnersDetailComponent,
+        ProductsComponent,
+        ProductsDetailComponent
     ],
     providers: [
         {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true},

matsen-tool/src/app/home/home.component.html

@@ -35,21 +35,21 @@
     <div class="container">
         <div class="row pt-4 pb-4 d-flex">
             <div class="col d-flex">
-                <a class="card" routerLink="/users" routerLinkActive="active">
+                <a class="card" routerLink="/products" routerLinkActive="active">
                     <div class="card-body position-relative bi bi-droplet-fill">
                         <h3 class="position-absolute m-0">Produkte</h3>
                     </div>
                 </a>
             </div>
             <div class="col d-flex">
-                <a class="card" routerLink="/users" routerLinkActive="active">
+                <a class="card" routerLink="/tasks" routerLinkActive="active">
                     <div class="card-body position-relative bi bi-list-check">
                         <h3 class="position-absolute m-0">Aufgaben</h3>
                     </div>
                 </a>
             </div>
             <div class="col d-flex">
-                <a class="card" routerLink="/users" routerLinkActive="active">
+                <a class="card" routerLink="/documents" routerLinkActive="active">
                     <div class="card-body position-relative bi bi-journals">
                         <h3 class="position-absolute m-0">Dokumente</h3>
                     </div>

matsen-tool/src/app/layout/two-column/two-column.component.html

@@ -23,21 +23,21 @@
                 </a>
             </li>
             <li class="nav-item mb-3">
-                <a class="card" routerLink="/users" routerLinkActive="active">
+                <a class="card" routerLink="/products" routerLinkActive="active">
                     <div class="card-body position-relative bi bi-droplet-fill">
                         <h3 class="position-absolute m-0">Produkte</h3>
                     </div>
                 </a>
             </li>
             <li class="nav-item mb-3">
-                <a class="card" routerLink="/users" routerLinkActive="active">
+                <a class="card" routerLink="/tasks" routerLinkActive="active">
                     <div class="card-body position-relative bi bi-list-check">
                         <h3 class="position-absolute m-0">Aufgaben</h3>
                     </div>
                 </a>
             </li>
             <li class="nav-item mb-3">
-                <a class="card" routerLink="/users" routerLinkActive="active">
+                <a class="card" routerLink="/documents" routerLinkActive="active">
                     <div class="card-body position-relative bi bi-journals">
                         <h3 class="position-absolute m-0">Dokumente</h3>
                     </div>

matsen-tool/src/app/partners/partners.component.html

@@ -7,28 +7,30 @@
         <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Nummer sortieren">
             Nr.
         </th>
-        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+        <td mat-cell *matCellDef="let element">{{ element.position }}</td>
     </ng-container>
 
     <ng-container matColumnDef="partner">
         <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Partner sortieren">
             Partner
         </th>
-        <td mat-cell *matCellDef="let element"> {{element.partner}} </td>
+        <td mat-cell *matCellDef="let element"><a routerLink="detail">{{ element.partner }}</a></td>
     </ng-container>
 
     <ng-container matColumnDef="address">
         <th mat-header-cell *matHeaderCellDef mat-sort-header="street" sortActionDescription="Nach Adresse sortieren">
             Adresse
         </th>
-        <td mat-cell *matCellDef="let element"> {{element.street}} {{element.street_no}}<br />{{element.zip}} {{element.city}} </td>
+        <td mat-cell *matCellDef="let element">{{ element.street }} {{ element.street_no }}
+            <br/>{{ element.zip }} {{ element.city }}
+        </td>
     </ng-container>
 
     <ng-container matColumnDef="website">
         <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Website sortieren">
             Website
         </th>
-        <td mat-cell *matCellDef="let element"> {{element.website}} </td>
+        <td mat-cell *matCellDef="let element">{{ element.website }}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

matsen-tool/src/app/partners/partners.component.ts

@@ -3,7 +3,7 @@ import {MatSort, Sort, MatSortModule} from "@angular/material/sort";
 import {LiveAnnouncer} from "@angular/cdk/a11y";
 import {MatTableDataSource, MatTableModule} from "@angular/material/table";
 import {Location} from "@angular/common";
-import {ActivatedRoute} from "@angular/router";
+import {ActivatedRoute, RouterLink, RouterLinkActive} from "@angular/router";
 
 export interface PeriodicElement {
   position: number;
@@ -26,7 +26,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
   templateUrl: './partners.component.html',
   styleUrl: './partners.component.scss',
   standalone: true,
-  imports: [MatTableModule, MatSortModule],
+  imports: [MatTableModule, MatSortModule, RouterLink, RouterLinkActive],
 })
 export class PartnersComponent implements OnInit, AfterViewInit {
   @ViewChild(MatSort) sort;

matsen-tool/src/app/products/products-detail/products-detail.component.html

@@ -0,0 +1 @@
+<p>products-detail works!</p>

matsen-tool/src/app/products/products-detail/products-detail.component.spec.ts

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

matsen-tool/src/app/products/products-detail/products-detail.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-products-detail',
+  templateUrl: './products-detail.component.html',
+  styleUrl: './products-detail.component.scss'
+})
+export class ProductsDetailComponent {
+
+}

matsen-tool/src/app/products/products.component.html

@@ -0,0 +1 @@
+<p>products works!</p>

matsen-tool/src/app/products/products.component.spec.ts

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

matsen-tool/src/app/products/products.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-products',
+  templateUrl: './products.component.html',
+  styleUrl: './products.component.scss'
+})
+export class ProductsComponent {
+
+}