From dafff1450357c6889a995e7b38efd677b7161749 Mon Sep 17 00:00:00 2001
From: Samuel Marks <807580+SamuelMarks@users.noreply.github.com>
Date: Wed, 17 Apr 2024 16:29:14 -0400
Subject: [PATCH] [src/app/app.component.ts] Simplify component ; add global
`ESC` handler to close sidebar ; [src/app/footer] Add footer ; [*.html] Use
new `@if` and `@for` from Angular 17
---
.../user-crud.dialog.component.html | 72 +++++++++++--------
.../users-admin/users-admin.component.html | 42 +++++------
src/app/app.component.html | 12 ++--
src/app/app.component.scss | 17 +++++
src/app/app.component.ts | 7 +-
src/app/app.module.ts | 11 ++-
src/app/auth/login/login.component.html | 30 ++++----
src/app/auth/signinup/signinup.component.html | 30 ++++----
src/app/auth/signup/signup.component.html | 32 +++++----
src/app/dashboard/dashboard.component.html | 40 ++++++-----
src/app/footer/footer.component.html | 1 +
src/app/footer/footer.component.scss | 9 +++
src/app/footer/footer.component.spec.ts | 23 ++++++
src/app/footer/footer.component.ts | 8 +++
src/app/footer/footer.module.ts | 12 ++++
.../server-status.component.html | 8 ++-
src/app/sidenav/sidenav.component.html | 11 +--
src/app/sidenav/sidenav.component.ts | 5 ++
src/styles.scss | 1 +
19 files changed, 242 insertions(+), 129 deletions(-)
create mode 100644 src/app/footer/footer.component.html
create mode 100644 src/app/footer/footer.component.scss
create mode 100644 src/app/footer/footer.component.spec.ts
create mode 100644 src/app/footer/footer.component.ts
create mode 100644 src/app/footer/footer.module.ts
diff --git a/src/app/admin/user-crud-dialog/user-crud.dialog.component.html b/src/app/admin/user-crud-dialog/user-crud.dialog.component.html
index 387ef0f..59cead6 100644
--- a/src/app/admin/user-crud-dialog/user-crud.dialog.component.html
+++ b/src/app/admin/user-crud-dialog/user-crud.dialog.component.html
@@ -1,33 +1,45 @@
-
+ @if (!data) {
+
+ }
+ @if (data) {
+
+
+ }
+
+}
diff --git a/src/app/admin/users-admin/users-admin.component.html b/src/app/admin/users-admin/users-admin.component.html
index b2608c9..4fea106 100644
--- a/src/app/admin/users-admin/users-admin.component.html
+++ b/src/app/admin/users-admin/users-admin.component.html
@@ -1,4 +1,4 @@
-
+
Users
@@ -12,25 +12,27 @@ Users
-
-
- Email
-
- border_color
- {{element.email}}
-
-
+@if (usersDataSource != null) {
+
+
+ Email
+
+ border_color
+ {{element.email}}
+
+
-
- Roles
- {{element.roles}}
-
+
+ Roles
+ {{element.roles}}
+
-
- createdAt
- {{element.createdAt}}
-
+
+ createdAt
+ {{element.createdAt}}
+
-
-
-
+
+
+
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 8f648ac..39413a1 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,5 +1,9 @@
-
+
-
-
-
+
+
+
+
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e69de29..ca24e0e 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1,17 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
+
+.footer {
+ max-height: 200px;
+ flex: 1;
+ background: #3f51b5 !important;
+ color: white;
+}
+
+.app-body {
+ margin: 0;
+ padding: 0;
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 6f1a902..517aa86 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { Component, HostListener } from '@angular/core';
+
import { Subject } from "rxjs";
@Component({
@@ -11,7 +11,8 @@ export class AppComponent {
title = "ng-material-scaffold";
openedSubject = new Subject();
- dismissSidebar() {
+ // Close the sidebar when ESC is pressed
+ @HostListener('document:keydown.escape', ['$event']) onKeydownHandler(_: KeyboardEvent) {
this.openedSubject.next(false);
}
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3ff232c..98553ce 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -20,6 +20,8 @@ import { AlertsModule } from './alerts/alerts.module';
import { AuthGuard } from './auth/auth.guard';
import { AuthInterceptor } from './auth/auth.interceptors';
import { AppRoutingModule } from './app.routes.module';
+import { FooterModule } from "./footer/footer.module";
+import { ServerStatusModule } from "./server-status/server-status.module";
import { AppComponent } from './app.component';
@NgModule({
@@ -28,11 +30,10 @@ import { AppComponent } from './app.component';
],
imports: [
BrowserModule,
- AppRoutingModule,
BrowserAnimationsModule,
HttpClientModule,
LayoutModule,
- BrowserAnimationsModule,
+
MatToolbarModule,
MatButtonModule,
MatSidenavModule,
@@ -41,8 +42,12 @@ import { AppComponent } from './app.component';
MatGridListModule,
MatCardModule,
MatMenuModule,
+
+ AppRoutingModule,
AlertsModule.forRoot(),
- SidenavModule
+ SidenavModule,
+ FooterModule,
+ ServerStatusModule
],
providers: [
AuthGuard,
diff --git a/src/app/auth/login/login.component.html b/src/app/auth/login/login.component.html
index 227f166..3587b1f 100644
--- a/src/app/auth/login/login.component.html
+++ b/src/app/auth/login/login.component.html
@@ -1,21 +1,23 @@
Login
-
-
- You are logged in.
+
+
+ }
diff --git a/src/app/auth/signinup/signinup.component.html b/src/app/auth/signinup/signinup.component.html
index 133fbc3..d48cbb9 100644
--- a/src/app/auth/signinup/signinup.component.html
+++ b/src/app/auth/signinup/signinup.component.html
@@ -1,21 +1,23 @@
Sign in/up
-
-
- You are logged in.
+
+
+ }
diff --git a/src/app/auth/signup/signup.component.html b/src/app/auth/signup/signup.component.html
index 439dcb7..f189547 100644
--- a/src/app/auth/signup/signup.component.html
+++ b/src/app/auth/signup/signup.component.html
@@ -1,22 +1,24 @@
Signup
-
-
- You are logged in.
+
+
+ }
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 75b1898..72b6914 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1,24 +1,26 @@
Dashboard
-
-
-
-
- {{card.title}}
-
-
-
-
-
-
-
-
- Card Content Here
-
-
-
+ @for (card of cards | async; track card) {
+
+
+
+
+ {{ card.title }}
+
+
+
+
+
+
+
+
+ Card Content Here
+
+
+
+ }
diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
new file mode 100644
index 0000000..6dbc743
--- /dev/null
+++ b/src/app/footer/footer.component.html
@@ -0,0 +1 @@
+
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
new file mode 100644
index 0000000..1ecb04c
--- /dev/null
+++ b/src/app/footer/footer.component.scss
@@ -0,0 +1,9 @@
+:host {
+ flex: 1;
+ bottom: 0;
+ width: 100%;
+ height: 100px;
+ background: #3F51B5 !important;
+ color: white;
+ text-align: center;
+}
diff --git a/src/app/footer/footer.component.spec.ts b/src/app/footer/footer.component.spec.ts
new file mode 100644
index 0000000..4647de8
--- /dev/null
+++ b/src/app/footer/footer.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+ let component: FooterComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [FooterComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(FooterComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/footer/footer.component.ts b/src/app/footer/footer.component.ts
new file mode 100644
index 0000000..0f072d9
--- /dev/null
+++ b/src/app/footer/footer.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-footer',
+ templateUrl: './footer.component.html',
+ styleUrl: './footer.component.scss'
+})
+export class FooterComponent {}
diff --git a/src/app/footer/footer.module.ts b/src/app/footer/footer.module.ts
new file mode 100644
index 0000000..030f831
--- /dev/null
+++ b/src/app/footer/footer.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { FooterComponent } from "./footer.component";
+
+
+@NgModule({
+ declarations: [FooterComponent],
+ imports: [CommonModule],
+ exports: [FooterComponent]
+})
+export class FooterModule { }
diff --git a/src/app/server-status/server-status.component.html b/src/app/server-status/server-status.component.html
index 0b708f1..edd67ea 100644
--- a/src/app/server-status/server-status.component.html
+++ b/src/app/server-status/server-status.component.html
@@ -1,3 +1,5 @@
-
- {{serverStatus.version}}
-
+@if (serverStatus.version) {
+
+ {{ serverStatus.version }}
+
+}
diff --git a/src/app/sidenav/sidenav.component.html b/src/app/sidenav/sidenav.component.html
index 37e3464..dc6a9aa 100644
--- a/src/app/sidenav/sidenav.component.html
+++ b/src/app/sidenav/sidenav.component.html
@@ -10,12 +10,15 @@
- Auth
- Admin
-
+ @if (loggedIn()) {
+ @if (hasRole('admin')) {
+ Admin
+ }
Secret dashboard
Logout
-
+ } @else {
+ Auth
+ }
diff --git a/src/app/sidenav/sidenav.component.ts b/src/app/sidenav/sidenav.component.ts
index 1e3791a..1ee285e 100644
--- a/src/app/sidenav/sidenav.component.ts
+++ b/src/app/sidenav/sidenav.component.ts
@@ -43,4 +43,9 @@ export class SidenavComponent implements AfterContentInit {
if (this.openedSubject != null && this.sidenav != null)
this.openedSubject.next(!this.sidenav.opened);
}
+
+ close() {
+ if (this.openedSubject != null && this.sidenav != null && this.sidenav.opened)
+ this.openedSubject.next(false);
+ }
}
diff --git a/src/styles.scss b/src/styles.scss
index 71087ed..3401bdb 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -44,4 +44,5 @@ body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
background: #fafafa;
+ height: 100vh;
}