Layout with subgrid

.gitignore

@@ -0,0 +1,3 @@
+.angular
+.vscode
+node_modules

src/app/app.routes.ts

@@ -1,8 +1,28 @@
 import { Routes } from '@angular/router';
 import { NotFoundComponent } from './not-found/not-found.component';
+import { AboutPageComponent } from './page/components/about-page/about-page.component';
+import { ProductsPageComponent } from './page/components/products-page/products-page.component';
+import { CreateUserComponent } from './page/components/users-page/components/create-user/create-user.component';
+import { UpdateUserComponent } from './page/components/users-page/components/update-user/update-user.component';
+import { UsersPageComponent } from './page/components/users-page/users-page.component';
+import { PageComponent } from './page/page.component';
 
 export const routes: Routes = [
-  { path: '', pathMatch: 'full', redirectTo: 'users' },
-  { path: 'users', loadChildren: () => import('./users-page/users-page.routes').then(m => m.routes) },
+  { path: '', pathMatch: 'full', redirectTo: 'page' },
+  {
+    path: 'page',
+    component: PageComponent,
+    children: [
+      { path: 'users', component: UsersPageComponent },
+      { path: 'create-user', component: CreateUserComponent, outlet: 'details' },
+      { path: 'user/:username/update', component: UpdateUserComponent, outlet: 'details' },
+      { path: 'user/not-found', component: NotFoundComponent, outlet: 'details' },
+
+      { path: 'products', component: ProductsPageComponent },
+      { path: 'about', component: AboutPageComponent },
+
+      { path: '**', component: NotFoundComponent, outlet: 'details' },
+    ],
+  },
   { path: '**', component: NotFoundComponent },
 ];

src/app/page/components/about-page/about-page.component.html

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

src/app/page/components/about-page/about-page.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'ul-about-page',
+  standalone: true,
+  imports: [],
+  templateUrl: './about-page.component.html',
+  styleUrl: './about-page.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AboutPageComponent {
+
+}

src/app/page/components/products-page/products-page.component.html

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

src/app/page/components/products-page/products-page.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'ul-products-page-page',
+  standalone: true,
+  imports: [],
+  templateUrl: './products-page.component.html',
+  styleUrl: './products-page.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ProductsPageComponent {
+}

src/app/users-page/components/create-user/create-user.component.ts → src/app/page/components/users-page/components/create-user/create-user.component.ts

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, inject, Signal, viewChild } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { catchError, EMPTY, tap } from 'rxjs';
-import { UserDto } from '../../../api';
-import { UserService } from '../../../services/user.service';
+import { UserDto } from '../../../../../api';
+import { UserService } from '../../../../../services/user.service';
 import { UserFormComponent } from '../user-form/user-form.component';
 
 @Component({

src/app/users-page/components/update-user/update-user.component.ts → src/app/page/components/users-page/components/update-user/update-user.component.ts

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { catchError, EMPTY, tap } from 'rxjs';
-import { UserDto } from '../../../api';
-import { UserService } from '../../../services/user.service';
+import { UserDto } from '../../../../../api';
+import { UserService } from '../../../../../services/user.service';
 import { UserFormComponent } from '../user-form/user-form.component';
 
 @Component({

src/app/users-page/components/user-form/user-form.component.ts → src/app/page/components/users-page/components/user-form/user-form.component.ts

@@ -3,7 +3,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output
 import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 import { ValidationError } from 'class-validator';
-import { UserDto, UserType } from '../../../api';
+import { UserDto, UserType } from '../../../../../api';
 import { passwordMatchValidator } from './password-match.validator';
 import { ValidationErrorsDirective } from './validation-errors.directive';
 

src/app/page/components/users-page/components/users-header/users-header.component.html

@@ -0,0 +1,6 @@
+<header class="header">
+    <a
+            [routerLink]="[{ outlets: { details: ['create-user'] } }]"
+            [relativeTo]="route.parent"
+            class="button create-user">Create user</a>
+</header>

src/app/page/components/users-page/components/users-header/users-header.component.scss

@@ -0,0 +1,7 @@
+.header {
+  display: flex;
+}
+
+.create-user {
+  margin-left: auto;
+}

src/app/page/components/users-page/components/users-header/users-header.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'ul-users-header',
+  standalone: true,
+  imports: [
+    RouterLink,
+  ],
+  templateUrl: './users-header.component.html',
+  styleUrl: './users-header.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class UsersHeaderComponent {
+  protected route: ActivatedRoute = inject(ActivatedRoute);
+}

src/app/users-page/components/users-table/users-table.component.html → src/app/page/components/users-page/components/users-table/users-table.component.html

@@ -13,7 +13,8 @@
             <tr
                     class="table__row"
                     routerLinkActive="table__row--selected"
-                    [routerLink]="[{ outlets: { details: ['user', user.username, 'update'] } }]">
+                    [routerLink]="[{ outlets: { details: ['user', user.username, 'update'] } }]"
+                    [relativeTo]="route.parent">
                 <td class="table__cell">{{ user.username }}</td>
                 <td class="table__cell">{{ user.first_name }}</td>
                 <td class="table__cell">{{ user.last_name }}</td>

src/app/users-page/components/users-table/users-table.component.ts → src/app/page/components/users-page/components/users-table/users-table.component.ts

@@ -1,7 +1,7 @@
 import { AsyncPipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, input, InputSignal } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-import { UserDto } from '../../../api';
+import { ChangeDetectionStrategy, Component, inject, input, InputSignal } from '@angular/core';
+import { ActivatedRoute, RouterLink, RouterLinkActive } from '@angular/router';
+import { UserDto } from '../../../../../api';
 
 @Component({
   selector: 'ul-users-table',
@@ -17,4 +17,6 @@ import { UserDto } from '../../../api';
 })
 export class UsersTableComponent {
   users: InputSignal<UserDto[]> = input.required<UserDto[]>();
+
+  protected route: ActivatedRoute = inject(ActivatedRoute);
 }

src/app/page/components/users-page/users-page.component.html

@@ -0,0 +1,10 @@
+<header class="header">
+    <a
+            [routerLink]="[{ outlets: { details: ['create-user'] } }]"
+            [relativeTo]="route.parent"
+            class="button create-user">Create user</a>
+</header>
+
+<main class="main">
+    <ul-users-table [users]="(users$ | async)!"/>
+</main>

src/app/page/components/users-page/users-page.component.scss

@@ -0,0 +1,26 @@
+:host {
+  grid-column: 1 / 2;
+  grid-row: 1 / 3;
+
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: subgrid;
+}
+
+.header {
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+
+  display: flex;
+  align-items: center;
+}
+
+.main {
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+.create-user {
+  margin-left: auto;
+}
+

src/app/users-page/users-page.component.ts → src/app/page/components/users-page/users-page.component.ts

@@ -1,9 +1,9 @@
 import { AsyncPipe, JsonPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
-import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { ActivatedRoute, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { Observable, startWith, switchMap } from 'rxjs';
-import { UserDto } from '../api';
-import { UserService } from '../services/user.service';
+import { UserDto } from '../../../api';
+import { UserService } from '../../../services/user.service';
 import { UsersTableComponent } from './components/users-table/users-table.component';
 
 @Component({
@@ -24,6 +24,7 @@ import { UsersTableComponent } from './components/users-table/users-table.compon
 export class UsersPageComponent implements OnInit {
   users$!: Observable<UserDto[]>;
 
+  protected route: ActivatedRoute = inject(ActivatedRoute);
   private userService: UserService = inject(UserService);
 
   ngOnInit(): void {

src/app/users-page/users-page.routes.ts → src/app/page/components/users-page/users-page.routes.ts

@@ -1,5 +1,5 @@
 import { Routes } from '@angular/router';
-import { NotFoundComponent } from '../not-found/not-found.component';
+import { NotFoundComponent } from '../../../not-found/not-found.component';
 import { CreateUserComponent } from './components/create-user/create-user.component';
 import { UpdateUserComponent } from './components/update-user/update-user.component';
 import { UsersPageComponent } from './users-page.component';

src/app/page/page.component.html

@@ -0,0 +1,14 @@
+<nav class="navigation">
+    <a [routerLink]="['users']">Users</a>
+    <a [routerLink]="['products']">Products</a>
+    <a [routerLink]="['about']">About</a>
+    <a [routerLink]="['..']" class="home">Home</a>
+</nav>
+
+<div class="main">
+    <router-outlet/>
+</div>
+
+<div class="details">
+    <router-outlet name="details"/>
+</div>

src/app/page/page.component.scss

@@ -0,0 +1,37 @@
+:host {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-template-rows: repeat(3, min-content);
+  grid-gap: 1.5rem;
+}
+
+.navigation {
+  grid-column: 1 / 13;
+  grid-row: 1 / 2;
+
+  display: flex;
+
+  a {
+    margin: 1rem;
+  }
+
+  .home {
+    margin-left: auto;
+  }
+}
+
+.main {
+  grid-column: 1 / 9;
+  grid-row: 2 / 4;
+
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: subgrid;
+}
+
+.details {
+  grid-column: 9 / 13;
+  grid-row: 3 / 4;
+}
+
+

src/app/page/page.component.ts

@@ -0,0 +1,20 @@
+import { AsyncPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
+import { UsersTableComponent } from './components/users-page/components/users-table/users-table.component';
+
+@Component({
+  selector: 'ul-page',
+  standalone: true,
+  imports: [
+    RouterOutlet,
+    RouterLink,
+    AsyncPipe,
+    UsersTableComponent,
+  ],
+  templateUrl: './page.component.html',
+  styleUrl: './page.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PageComponent {
+}