feat: many

- basic user & role management
- book management and page improvements
- styling fixes
- toasts

src/Client/angular.json

@@ -16,9 +16,14 @@
             "outputPath": "dist/cbc",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": ["zone.js"],
+            "polyfills": [
+              "zone.js"
+            ],
             "tsConfig": "tsconfig.app.json",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
+              "src/favicon.png",
+              "src/assets"
+            ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.css"
@@ -100,24 +105,37 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "polyfills": ["zone.js", "zone.js/testing"],
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
             "tsConfig": "tsconfig.spec.json",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.css"],
+            "assets": [
+              "src/favicon.png",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
             "scripts": []
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
           }
         }
       }
     }
   },
   "cli": {
-    "schematicCollections": ["@angular-eslint/schematics"],
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ],
     "analytics": false
   }
 }

src/Client/package.json

@@ -28,6 +28,8 @@
     "@ng-bootstrap/ng-bootstrap": "^16.0.0",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.2",
+    "bootstrap-icons": "^1.11.2",
+    "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
@@ -44,6 +46,7 @@
     "@angular/compiler-cli": "^17.0.7",
     "@angular/localize": "^17.0.7",
     "@types/jasmine": "~5.1.0",
+    "@types/lodash": "^4.14.202",
     "@typescript-eslint/eslint-plugin": "6.13.1",
     "@typescript-eslint/parser": "6.13.1",
     "eslint": "^8.54.0",

src/Client/src/app/api/fn/books/get-users-books-plain.ts

@@ -0,0 +1,29 @@
+/* tslint:disable */
+/* eslint-disable */
+import { HttpClient, HttpContext, HttpResponse } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
+import { StrictHttpResponse } from '../../strict-http-response';
+import { RequestBuilder } from '../../request-builder';
+
+import { BookDto } from '../../models/book-dto';
+
+export interface GetUsersBooks$Plain$Params {
+}
+
+export function getUsersBooks$Plain(http: HttpClient, rootUrl: string, params?: GetUsersBooks$Plain$Params, context?: HttpContext): Observable<StrictHttpResponse<Array<BookDto>>> {
+  const rb = new RequestBuilder(rootUrl, getUsersBooks$Plain.PATH, 'get');
+  if (params) {
+  }
+
+  return http.request(
+    rb.build({ responseType: 'text', accept: 'text/plain', context })
+  ).pipe(
+    filter((r: any): r is HttpResponse<any> => r instanceof HttpResponse),
+    map((r: HttpResponse<any>) => {
+      return r as StrictHttpResponse<Array<BookDto>>;
+    })
+  );
+}
+
+getUsersBooks$Plain.PATH = '/api/Books/mine';

src/Client/src/app/api/fn/books/get-users-books.ts

@@ -0,0 +1,29 @@
+/* tslint:disable */
+/* eslint-disable */
+import { HttpClient, HttpContext, HttpResponse } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
+import { StrictHttpResponse } from '../../strict-http-response';
+import { RequestBuilder } from '../../request-builder';
+
+import { BookDto } from '../../models/book-dto';
+
+export interface GetUsersBooks$Params {
+}
+
+export function getUsersBooks(http: HttpClient, rootUrl: string, params?: GetUsersBooks$Params, context?: HttpContext): Observable<StrictHttpResponse<Array<BookDto>>> {
+  const rb = new RequestBuilder(rootUrl, getUsersBooks.PATH, 'get');
+  if (params) {
+  }
+
+  return http.request(
+    rb.build({ responseType: 'json', accept: 'text/json', context })
+  ).pipe(
+    filter((r: any): r is HttpResponse<any> => r instanceof HttpResponse),
+    map((r: HttpResponse<any>) => {
+      return r as StrictHttpResponse<Array<BookDto>>;
+    })
+  );
+}
+
+getUsersBooks.PATH = '/api/Books/mine';

src/Client/src/app/api/services/books.service.ts

@@ -22,6 +22,10 @@ import { getBooks } from '../fn/books/get-books';
 import { GetBooks$Params } from '../fn/books/get-books';
 import { getBooks$Plain } from '../fn/books/get-books-plain';
 import { GetBooks$Plain$Params } from '../fn/books/get-books-plain';
+import { getUsersBooks } from '../fn/books/get-users-books';
+import { GetUsersBooks$Params } from '../fn/books/get-users-books';
+import { getUsersBooks$Plain } from '../fn/books/get-users-books-plain';
+import { GetUsersBooks$Plain$Params } from '../fn/books/get-users-books-plain';
 
 @Injectable({ providedIn: 'root' })
 export class BooksService extends BaseService {
@@ -123,6 +127,53 @@ export class BooksService extends BaseService {
     );
   }
 
+  /** Path part for operation `getUsersBooks()` */
+  static readonly GetUsersBooksPath = '/api/Books/mine';
+
+  /**
+   * This method provides access to the full `HttpResponse`, allowing access to response headers.
+   * To access only the response body, use `getUsersBooks$Plain()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  getUsersBooks$Plain$Response(params?: GetUsersBooks$Plain$Params, context?: HttpContext): Observable<StrictHttpResponse<Array<BookDto>>> {
+    return getUsersBooks$Plain(this.http, this.rootUrl, params, context);
+  }
+
+  /**
+   * This method provides access only to the response body.
+   * To access the full response (for headers, for example), `getUsersBooks$Plain$Response()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  getUsersBooks$Plain(params?: GetUsersBooks$Plain$Params, context?: HttpContext): Observable<Array<BookDto>> {
+    return this.getUsersBooks$Plain$Response(params, context).pipe(
+      map((r: StrictHttpResponse<Array<BookDto>>): Array<BookDto> => r.body)
+    );
+  }
+
+  /**
+   * This method provides access to the full `HttpResponse`, allowing access to response headers.
+   * To access only the response body, use `getUsersBooks()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  getUsersBooks$Response(params?: GetUsersBooks$Params, context?: HttpContext): Observable<StrictHttpResponse<Array<BookDto>>> {
+    return getUsersBooks(this.http, this.rootUrl, params, context);
+  }
+
+  /**
+   * This method provides access only to the response body.
+   * To access the full response (for headers, for example), `getUsersBooks$Response()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  getUsersBooks(params?: GetUsersBooks$Params, context?: HttpContext): Observable<Array<BookDto>> {
+    return this.getUsersBooks$Response(params, context).pipe(
+      map((r: StrictHttpResponse<Array<BookDto>>): Array<BookDto> => r.body)
+    );
+  }
+
   /** Path part for operation `getBook()` */
   static readonly GetBookPath = '/api/Books/{id}';
 

src/Client/src/app/app.component.css

@@ -1,4 +1,16 @@
 footer {
+  position: relative;
   background-color: #89aed1;
   width: 100%;
+  z-index: 1000;
+}
+
+footer a {
+  color: yellow;
+}
+
+.content {
+  position: relative;
+  top: var(--navbar-height);
+  margin-bottom: var(--navbar-height);
 }

src/Client/src/app/app.component.html

@@ -1,5 +1,6 @@
-<app-navbar></app-navbar>
-<div class="p-4" [@routeAnimations]="getRouteAnimationData()">
+<app-navbar #navbar (heightChange)="onNavbarHeightChange($event)"></app-navbar>
+<app-toasts-container></app-toasts-container>
+<div class="p-4 content" [@routeAnimations]="getRouteAnimationData()">
   <router-outlet></router-outlet>
 </div>
 <footer class="mt-auto">
@@ -23,7 +24,9 @@
       <small>Hosted with ❤️ from Lancaster, Pennsylvania, USA</small>
       <small
         >Copyright &copy; Luke Westfall {{ year }} -
-        <a href="mailto: [email protected]">cbc&#64;ljdub.com</a></small
+        <a href="mailto:[email protected]?subject=Citrus Book Club" target="_blank"
+          >cbc&#64;ljdub.com</a
+        ></small
       >
     </div>
   </div>

src/Client/src/app/app.component.ts

@@ -1,29 +1,36 @@
 import { AsyncPipe } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, ElementRef } from '@angular/core';
 import { ChildrenOutletContexts, RouterOutlet } from '@angular/router';
 import { slideInAnimation } from './animations';
 import { UserDto } from './api/models';
 import { MeetingsModule } from './meetings/meetings.module';
 import { NavbarComponent } from './navbar/navbar.component';
 import { AuthService } from './services/auth.service';
+import { ToastsContainerComponent } from './toasts-container/toasts-container.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, NavbarComponent, MeetingsModule, AsyncPipe],
+  imports: [
+    RouterOutlet,
+    NavbarComponent,
+    MeetingsModule,
+    AsyncPipe,
+    ToastsContainerComponent,
+  ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
   animations: [slideInAnimation],
 })
 export class AppComponent {
-  // title = 'cbc';
   year = new Date().getFullYear();
   user?: UserDto;
   verified = false;
 
   constructor(
     authService: AuthService,
-    private contexts: ChildrenOutletContexts
+    private contexts: ChildrenOutletContexts,
+    private elementRef: ElementRef
   ) {
     authService.apiUser$.subscribe(user => {
       this.user = user;
@@ -36,4 +43,11 @@ export class AppComponent {
       'animation'
     ];
   }
+
+  onNavbarHeightChange(height: number) {
+    this.elementRef.nativeElement.style.setProperty(
+      '--navbar-height',
+      `${height}px`
+    );
+  }
 }