Beautiful Angular Apps with Bootstrap

find . -name "*.css" -not -path "./node_modules/*"

./src/app/home/home.component.css
./src/app/app.component.css
./src/styles.css

find . -name "*.css" -not -path "./node_modules/*" | rename -v "s/css/scss/g"

find ./src/app -type f -exec sed -i '' -e  's/.css/.scss/g' {} \;

"styles": [
  "src/styles.scss"
],

@import 'bootstrap/scss/bootstrap.scss';

$primary: orange;
$secondary: blue;
$light: lighten($primary, 20%);
$dark: darken($secondary, 10%);

@import 'variables', 'bootstrap/scss/bootstrap.scss';

<button (click)="isCollapsed = !isCollapsed" class="navbar-toggler" ...>
  ...
</button>

<div [ngbCollapse]="isCollapsed" class="collapse navbar-collapse" ...>
  ...
</div>

export class AppComponent {
  title = 'Notes';
  isCollapsed = true;

  ...

}

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

describe('AppComponent', () => {
  ...

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      imports: [
        ...
        NgbModule
      ],
      ...
    }).compileComponents();
  }));

  ...

  it(`should have as title 'notes'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('Notes');
  });

  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('nav')?.textContent).toContain('Notes');
  });
});

...
<h2>Notes List</h2>
<form #f="ngForm" class="row g-2">
  <div class="col-auto">
    <input [(ngModel)]="filter.title" type="search" name="query"
           placeholder="Title" class="form-control ml-2 mr-2">
  </div>
  <div class="col-auto">
    <button (click)="search($event)" [disabled]="!f?.valid"
            class="btn btn-primary">Search</button>
    <a [routerLink]="['../notes', 'new' ]"
            class="btn btn-default ml-2">New</a>
  </div>
</form>
...

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a routerLink="/">Home</a></li>
    <li class="breadcrumb-item active">Notes</li>
  </ol>
</nav>
<h2>Notes Detail</h2>
<div *ngIf="feedback.message"
     class="alert alert-{{feedback.type}}">{{ feedback.message }}</div>
<form *ngIf="note" #editForm="ngForm" (ngSubmit)="save()"
      class="form-floating">

  <div class="mb-3">
    <label>Id</label>
    {{note.id || 'n/a'}}
  </div>

  <div class="form-floating mb-3">
    <input [(ngModel)]="note.title" id="title" name="title"
           class="form-control" placeholder="title">
    <label for="title">Title</label>
  </div>

  <div class="form-floating mb-3">
    <input [(ngModel)]="note.text" id="text" name="text"
           class="form-control" placeholder="text">
    <label for="text">Text</label>
  </div>

  <div class="btn-group mt-3" role="group">
    <button type="submit" class="btn btn-primary"
            [disabled]="!editForm.form.valid">Save</button>
    <button type="button" class="btn btn-secondary ml-2"
            (click)="cancel()">Cancel</button>
  </div>
</form>

<div class="form-floating mb-3">
  <input [(ngModel)]="note.title" id="title" name="title" #name="ngModel"
         class="form-control" placeholder="title" required
         [ngClass]="{'is-invalid': name.touched && name.invalid,
                     'is-valid': name.touched && name.valid}">
  <div [hidden]="name.valid" style="display: block" class="invalid-feedback">
    Title is required
  </div>
  <label for="title">Title</label>
</div>

@GetMapping("/user/notes")
fun notes(principal: Principal, title: String?): List<Note> {
    println("Fetching notes for user: ${principal.name}")
    return if (title.isNullOrEmpty()) {
        repository.findAllByUsername(principal.name)
    } else {
        println("Searching for title: ${title}")
        repository.findAllByUsernameAndTitleContainingIgnoreCase(principal.name, title)
    }
}

@RepositoryRestResource
interface NotesRepository : JpaRepository<Note, Long> {
    fun findAllByUsername(name: String): List<Note>
    fun findAllByUsernameAndTitleContainingIgnoreCase(name: String, term: String): List<Note>
}

import { Directive, EventEmitter, Input, Output } from '@angular/core';

export type SortDirection = 'asc' | 'desc' | '';
const rotate: { [key: string]: SortDirection } = {asc: 'desc', desc: '', '': 'asc'};

export interface SortEvent {
  column: string;
  direction: SortDirection;
}

@Directive({
  selector: 'th[sortable]',
  host: {
    '[class.asc]': 'direction === "asc"',
    '[class.desc]': 'direction === "desc"',
    '(click)': 'rotate()'
  }
})
export class SortableHeaderDirective {

  @Input() sortable!: string;
  @Input() direction: SortDirection = '';
  @Output() sort = new EventEmitter<SortEvent>();

  rotate() {
    this.direction = rotate[this.direction];
    this.sort.emit({column: this.sortable, direction: this.direction});
  }
}

import { SortableHeaderDirective } from './note-list/sortable.directive';

@NgModule({
  ...
  declarations: [
    ...
    SortableHeaderDirective
  ],
  ...
}

import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
import { SortableHeaderDirective, SortEvent } from './sortable.directive';

export class NoteListComponent implements OnInit {
  @ViewChildren(SortableHeaderDirective) headers!: QueryList<SortableHeaderDirective>;

  ...

  onSort({column, direction}: SortEvent) {
    // reset other headers
    this.headers.forEach(header => {
      if (header.sortable !== column) {
        header.direction = '';
      }
    });

    this.filter.column = column;
    this.filter.direction = direction;
    this.search();
  }

  ...
}

export class NoteFilter {
  title = '';
  column!: string;
  direction!: string;
}

import { map } from 'rxjs/operators';

...

find(filter: NoteFilter): Observable<Note[]> {
  const params: any = {
    title: filter.title,
    sort: `${filter.column},${filter.direction}`,
  };
  if (!filter.direction) { delete params.sort; }

  const userNotes = 'http://localhost:8080/user/notes';
  return this.http.get(userNotes, {params, headers}).pipe(
    map((response: any) => {
      return response.content;
    })
  );
}

<thead>
  <tr>
    <th class="border-top-0" scope="col">#</th>
    <th class="border-top-0" scope="col" sortable="title"
        (sort)="onSort($event)">Title</th>
    <th class="border-top-0" scope="col" sortable="text"
        (sort)="onSort($event)">Text</th>
    <th class="border-top-0" scope="col" style="width:120px"></th>
  </tr>
</thead>

th[sortable] {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

th[sortable].desc:before, th[sortable].asc:before {
  content: '';
  display: block;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAmxJREFUeAHtmksrRVEUx72fH8CIGQNJkpGUUmakDEiZSJRIZsRQmCkTJRmZmJgQE0kpX0D5DJKJgff7v+ru2u3O3vvc67TOvsdatdrnnP1Y///v7HvvubdbUiIhBISAEBACQkAICAEhIAQ4CXSh2DnyDfmCPEG2Iv9F9MPlM/LHyAecdyMzHYNwR3fdNK/OH9HXl1UCozD24TCvILxizEDWIEzA0FcM8woCgRrJCoS5PIwrANQSMAJX1LEI9bqpQo4JYNFFKRSvIgsxHDVnqZgIkPnNBM0rIGtYk9YOOsqgbgepRCfdbmFtqhFkVEDVPjJp0+Z6e6hRHhqBKgg6ZDCvYBygVmUoEGoh5JTRvIJwhJo1aUOoh4CLPMyvxxi7EWOMgnCGsXXI1GIXlZUYX7ucU+kbR8NW8lh3O7cue0Pk32MKndfUxQFAwxdirk3fHappAnc0oqDPzDfGTBrCfHP04dM4oTV8cxr0SVzH9FF07xD3ib6xCDE+M+aUcVygtWzzbtGX2rPBrEUYfecfQkaFzYi6HjVnGBdtL7epqAlc1+jRdAap74RrnPc4BCijttY2tRcdN0g17w7HqZrXhdJTYAuS3hd8z+vKgK3V1zWPae0mZDMykadBn1hTQBLnZNwVrJpSe/NwEeDsEwCctEOsJTsgxLvCqUl2ACftEGvJDgjxrnBqkh3ASTvEWrIDQrwrnJpkB3DSDrGW7IAQ7wqnJtkBnLRztejXXVu4+mxz/nQ9jR1w5VB86ejLTFcnnDwhzV+F6T+CHZlx6THSjn76eyyBIOPHyDakhBAQAkJACAgBISAEhIAQYCLwC8JxpAmsEGt6AAAAAElFTkSuQmCC') no-repeat;
  background-size: 22px;
  width: 22px;
  height: 22px;
  float: left;
  margin-left: -22px;
}

th[sortable].desc:before {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
}

package com.okta.developer.notes

import org.springframework.data.domain.Page
import org.springframework.data.domain.Pageable
import org.springframework.security.core.annotation.AuthenticationPrincipal
import org.springframework.security.oauth2.core.oidc.user.OidcUser
import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.RestController
import java.security.Principal

@RestController
class UserController(val repository: NotesRepository) {

    @GetMapping("/user/notes")
    fun notes(principal: Principal, title: String?, pageable: Pageable): Page<Note> {
        println("Fetching notes for user: ${principal.name}")
        return if (title.isNullOrEmpty()) {
            repository.findAllByUsername(principal.name, pageable)
        } else {
            println("Searching for title: ${title}")
            repository.findAllByUsernameAndTitleContainingIgnoreCase(principal.name, title, pageable)
        }
    }

    @GetMapping("/user")
    fun user(@AuthenticationPrincipal user: OidcUser): OidcUser {
        return user
    }
}

import org.springframework.data.domain.Page
import org.springframework.data.domain.Pageable

...

@RepositoryRestResource
interface NotesRepository : JpaRepository<Note, Long> {
    fun findAllByUsername(name: String, pageable: Pageable): Page<Note>
    fun findAllByUsernameAndTitleContainingIgnoreCase(name: String, term: String, pageable: Pageable): Page<Note>
}

@Component
class DataInitializer(val repository: NotesRepository) : ApplicationRunner {

    @Throws(Exception::class)
    override fun run(args: ApplicationArguments) {
        for (x in 0..1000) {
            repository.save(Note(title = "Note ${x}", username = "<your email>"))
        }
        repository.findAll().forEach { println(it) }
    }
}

exports.onExecutePostLogin = async (event, api) => {
  const namespace = 'https://angular-book.org';
  if (event.authorization) {
    api.accessToken.setCustomClaim(`${namespace}/email`, event.user.email);
  }
};

@GetMapping("/user/notes")
fun notes(principal: Principal, title: String?, pageable: Pageable): Page<Note> {
    val jwt: JwtAuthenticationToken = principal as JwtAuthenticationToken
    val email = jwt.tokenAttributes
        .getOrDefault("https://angular-book.org/email", principal.name).toString()
    println("Fetching notes for user: ${email}")
    return if (title.isNullOrEmpty()) {
        repository.findAllByUsername(email, pageable)
    } else {
        println("Searching for title: ${title}")
        repository.findAllByUsernameAndTitleContainingIgnoreCase(email, title, pageable)
    }
}

class AddUserToNote {

    @HandleBeforeCreate
    fun handleCreate(note: Note) {
        val auth = SecurityContextHolder.getContext().authentication
        val email = (auth as JwtAuthenticationToken).tokenAttributes
            .getOrDefault("https://angular-book.org/email", auth.name).toString()
        note.username = email
        println("Creating note: $note")
    }
}

export class NoteFilter {
  title = '';
  column!: string;
  direction!: string;
  page = 0;
  size = 20;
}

<div class="d-flex justify-content-between p-2">
  <ngb-pagination [maxSize]="10" [collectionSize]="total$ | async"
                  [(page)]="filter.page" [pageSize]="filter.size"
                  (pageChange)="onPageChange(filter.page)">
  </ngb-pagination>

  <select class="custom-select" style="width: auto" name="pageSize"
          [(ngModel)]="filter.size" (ngModelChange)="onChange(filter.size)">
    <option [ngValue]="10">10 items per page</option>
    <option [ngValue]="20">20 items per page</option>
    <option [ngValue]="100">100 items per page</option>
  </select>
</div>

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [
    ...
    NgbModule
  ],
  ...
}

import { Observable } from 'rxjs';

export class NoteListComponent implements OnInit {
  total$!: Observable<any>;

  ...

  search(event?: Event): void {
    if (event) {
      this.filter.page = 0;
    }
    this.noteService.load(this.filter);
    this.total$ = this.noteService.size$;
  }

  onChange(pageSize: number) {
    this.filter.size = pageSize;
    this.filter.page = 0;
    this.search();
  }

  onPageChange(page: number) {
    this.filter.page = page - 1;
    this.search();
    this.filter.page = page;
  }

  onSort({column, direction}: SortEvent) {
    // reset other headers
    this.headers.forEach(header => {
      if (header.sortable !== column) {
        header.direction = '';
      }
    });

    this.filter.column = column;
    this.filter.direction = direction;
    this.filter.page = 0;
    this.search();
  }
}

import { BehaviorSubject } from 'rxjs';

...

export class NoteService {
  ...
  size$ = new BehaviorSubject<number>(0);

  ...

  find(filter: NoteFilter): Observable<Note[]> {
    const params: any = {
      title: filter.title,
      sort: `${filter.column},${filter.direction}`,
      size: filter.size,
      page: filter.page
    };
    if (!filter.direction) { delete params.sort; }

    const userNotes = 'http://localhost:8080/user/notes';
    return this.http.get(userNotes, {params, headers}).pipe(
      map((response: any) => {
        this.size$.next(response.totalElements);
        return response.content;
      })
    );
  }

  ...
}