Skip to content

Commit

Permalink
[src/app/app.component.ts] Simplify component ; add global ESC hand…
Browse files Browse the repository at this point in the history 
…ler to close sidebar ; [src/app/footer] Add footer ; [*.html] Use new `@if` and `@for` from Angular 17
  • Loading branch information
@SamuelMarks
SamuelMarks committed Apr 17, 2024
1 parent f929807 commit dafff14
Show file tree
Hide file tree
Showing 19 changed files with 242 additions and 129 deletions.
72 changes: 42 additions & 30 deletions src/app/admin/user-crud-dialog/user-crud.dialog.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,45 @@
<form (ngSubmit)="closeDialog()" [formGroup]="form" *ngIf="form != null">
<mat-form-field *ngIf="!data || !data.email">
<input formControlName="email" matInput placeholder="Email" required type="email">
</mat-form-field>
<h3 *ngIf="data && data.email" class="mat-h3">{{data.email}}</h3>
@if (form != null) {
<form (ngSubmit)="closeDialog()" [formGroup]="form">
@if (!data || !data.email) {
<mat-form-field>
<input formControlName="email" matInput placeholder="Email" required type="email">
</mat-form-field>
}
@if (data && data.email) {
<h3 class="mat-h3">{{ data.email }}</h3>
}

<mat-form-field *ngIf="form.controls['password'].enabled">
<input formControlName="password" matInput placeholder="Password" required type="password">
</mat-form-field>
@if (form.controls['password'].enabled) {
<mat-form-field>
<input formControlName="password" matInput placeholder="Password" required type="password">
</mat-form-field>
}

<mat-form-field>
<mat-select formControlName="roles" matInput multiple placeholder="Role">
<mat-option *ngFor="let role of roles" [value]="role">
{{ role }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="roles" matInput multiple placeholder="Role">
@for (role of roles; track role) {
<mat-option [value]="role">
{{ role }}
</mat-option>
}
</mat-select>
</mat-form-field>

<button *ngIf="!data" [disabled]="form.invalid" class="btn" mat-raised-button type="submit">
<mat-icon>add_to_queue</mat-icon>
Create
</button>
<ng-container *ngIf="data">
<button [disabled]="form.invalid" class="btn" mat-raised-button type="submit">
<mat-icon>update</mat-icon>
Update
</button>
<button (click)="destroy = true" class="btn" mat-raised-button type="submit">
<mat-icon>delete</mat-icon>
Delete
</button>
</ng-container>
</form>
@if (!data) {
<button [disabled]="form.invalid" class="btn" mat-raised-button type="submit">
<mat-icon>add_to_queue</mat-icon>
Create
</button>
}
@if (data) {
<button [disabled]="form.invalid" class="btn" mat-raised-button type="submit">
<mat-icon>update</mat-icon>
Update
</button>
<button (click)="destroy = true" class="btn" mat-raised-button type="submit">
<mat-icon>delete</mat-icon>
Delete
</button>
}
</form>
}
42 changes: 22 additions & 20 deletions src/app/admin/users-admin/users-admin.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<mat-toolbar color="secondary">
<mat-toolbar color="secondary" style="background: #F5F5F5 !important;">
<h1 class="mat-h1">Users</h1>

<span class="example-fill-remaining-space"></span>
Expand All @@ -12,25 +12,27 @@ <h1 class="mat-h1">Users</h1>
</mat-form-field>
</mat-toolbar>

<mat-table #table [dataSource]="usersDataSource" *ngIf="usersDataSource != null">
<ng-container matColumnDef="email">
<mat-header-cell *cdkHeaderCellDef> Email</mat-header-cell>
<mat-cell *cdkCellDef="let element">
<mat-icon>border_color</mat-icon>
{{element.email}}
</mat-cell>
</ng-container>
@if (usersDataSource != null) {
<mat-table #table [dataSource]="usersDataSource">
<ng-container matColumnDef="email">
<mat-header-cell *cdkHeaderCellDef> Email</mat-header-cell>
<mat-cell *cdkCellDef="let element">
<mat-icon>border_color</mat-icon>
{{element.email}}
</mat-cell>
</ng-container>

<ng-container matColumnDef="roles">
<mat-header-cell *cdkHeaderCellDef> Roles</mat-header-cell>
<mat-cell *cdkCellDef="let element"> {{element.roles}}</mat-cell>
</ng-container>
<ng-container matColumnDef="roles">
<mat-header-cell *cdkHeaderCellDef> Roles</mat-header-cell>
<mat-cell *cdkCellDef="let element"> {{element.roles}}</mat-cell>
</ng-container>

<ng-container matColumnDef="createdAt">
<mat-header-cell *cdkHeaderCellDef> createdAt</mat-header-cell>
<mat-cell *cdkCellDef="let element"> {{element.createdAt}}</mat-cell>
</ng-container>
<ng-container matColumnDef="createdAt">
<mat-header-cell *cdkHeaderCellDef> createdAt</mat-header-cell>
<mat-cell *cdkCellDef="let element"> {{element.createdAt}}</mat-cell>
</ng-container>

<mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row (click)="selected(row)" *cdkRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row (click)="selected(row)" *cdkRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
}
12 changes: 8 additions & 4 deletions src/app/app.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<app-sidenav [openedSubject]="openedSubject"></app-sidenav>
<app-sidenav #sidenav [openedSubject]="openedSubject"></app-sidenav>

<div (click)="dismissSidebar()">
<router-outlet></router-outlet>
</div>
<span (click)="sidenav.close()">
<router-outlet class="app-body"></router-outlet>
</span>

<app-footer class="footer" (click)="sidenav.close()">
<app-server-status></app-server-status>
</app-footer>
17 changes: 17 additions & 0 deletions src/app/app.component.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
7 changes: 4 additions & 3 deletions src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -11,7 +11,8 @@ export class AppComponent {
title = "ng-material-scaffold";
openedSubject = new Subject<boolean>();

dismissSidebar() {
// Close the sidebar when ESC is pressed
@HostListener('document:keydown.escape', ['$event']) onKeydownHandler(_: KeyboardEvent) {
this.openedSubject.next(false);
}
}
11 changes: 8 additions & 3 deletions src/app/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -28,11 +30,10 @@ import { AppComponent } from './app.component';
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
HttpClientModule,
LayoutModule,
BrowserAnimationsModule,

MatToolbarModule,
MatButtonModule,
MatSidenavModule,
Expand All @@ -41,8 +42,12 @@ import { AppComponent } from './app.component';
MatGridListModule,
MatCardModule,
MatMenuModule,

AppRoutingModule,
AlertsModule.forRoot(),
SidenavModule
SidenavModule,
FooterModule,
ServerStatusModule
],
providers: [
AuthGuard,
Expand Down
30 changes: 16 additions & 14 deletions src/app/auth/login/login.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
<mat-card>
<mat-card-header><h1 class="mat-h1">Login</h1></mat-card-header>
<mat-card-content>
<form (ngSubmit)="login()" *ngIf="!authService.loggedIn() && form != null" [formGroup]="form" novalidate>
<mat-form-field class="example-full-width form-group">
<input formControlName="email" id="email" matInput name="email" placeholder="Email" type="email">
</mat-form-field>
@if (authService.loggedIn()) {
<p>You are logged in.</p>
} @else if (form != null) {
<form (ngSubmit)="login()" [formGroup]="form" novalidate>
<mat-form-field class="example-full-width form-group">
<input formControlName="email" id="email" matInput name="email" placeholder="Email" type="email">
</mat-form-field>

<mat-form-field class="example-full-width form-group">
<input formControlName="password" id="password" matInput name="password" placeholder="Password"
type="password">
</mat-form-field>
<mat-form-field class="example-full-width form-group">
<input formControlName="password" id="password" matInput name="password" placeholder="Password"
type="password">
</mat-form-field>

<button color="accent" mat-raised-button
type="submit">Sign in
</button>
</form>

<p *ngIf="authService.loggedIn()">You are logged in.</p>
<button color="accent" mat-raised-button
type="submit">Sign in
</button>
</form>
}
</mat-card-content>
</mat-card>
30 changes: 16 additions & 14 deletions src/app/auth/signinup/signinup.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
<mat-card>
<mat-card-header><h1 class="mat-h1">Sign in/up</h1></mat-card-header>
<mat-card-content>
<form (ngSubmit)="signInUp()" *ngIf="!authService.loggedIn() && form != null" [formGroup]="form" novalidate class="authForm">
<mat-form-field class="example-full-width form-group">
<input formControlName="email" id="email" matInput name="email" placeholder="Email" type="email">
</mat-form-field>
@if (authService.loggedIn()) {
<p>You are logged in.</p>
} @else if (form != null) {
<form (ngSubmit)="signInUp()" [formGroup]="form" novalidate class="authForm">
<mat-form-field class="example-full-width form-group">
<input formControlName="email" id="email" matInput name="email" placeholder="Email" type="email">
</mat-form-field>

<mat-form-field class="example-full-width form-group" style="flex: auto;">
<input formControlName="password" id="password" matInput name="password" placeholder="Password"
type="password">
</mat-form-field>
<mat-form-field class="example-full-width form-group" style="flex: auto;">
<input formControlName="password" id="password" matInput name="password" placeholder="Password"
type="password">
</mat-form-field>

<button color="accent" mat-raised-button
type="submit" class="authButton">Auth
</button>
</form>

<p *ngIf="authService.loggedIn()">You are logged in.</p>
<button color="accent" mat-raised-button
type="submit" class="authButton">Auth
</button>
</form>
}
</mat-card-content>
</mat-card>
32 changes: 17 additions & 15 deletions src/app/auth/signup/signup.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
<mat-card>
<mat-card-header><h1 class="mat-h1">Signup</h1></mat-card-header>
<mat-card-content>
<form (ngSubmit)="signup()" *ngIf="!authService.loggedIn() && form != null" [formGroup]="form"
style="display: flex; flex-direction: column" novalidate>
<mat-form-field class="example-full-width form-group">
<input formControlName="email" id="email" matInput name="email" placeholder="Email" type="email">
</mat-form-field>
@if (authService.loggedIn()) {
<p>You are logged in.</p>
} @else if (form != null) {
<form (ngSubmit)="signup()" [formGroup]="form"
style="display: flex; flex-direction: column" novalidate>
<mat-form-field class="example-full-width form-group">
<input formControlName="email" id="email" matInput name="email" placeholder="Email" type="email">
</mat-form-field>

<mat-form-field class="example-full-width form-group">
<input formControlName="password" id="password" matInput name="password" placeholder="Password"
type="password">
</mat-form-field>
<mat-form-field class="example-full-width form-group">
<input formControlName="password" id="password" matInput name="password" placeholder="Password"
type="password">
</mat-form-field>

<button color="accent" mat-raised-button
type="submit">Register
</button>
</form>

<p *ngIf="authService.loggedIn()">You are logged in.</p>
<button color="accent" mat-raised-button
type="submit">Register
</button>
</form>
}
</mat-card-content>
</mat-card>
40 changes: 21 additions & 19 deletions src/app/dashboard/dashboard.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,26 @@
<div class="grid-container">
<h1 class="mat-h1">Dashboard</h1>
<mat-grid-list cols="2" rowHeight="350px">
<mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows">
<mat-card class="dashboard-card">
<mat-card-header>
<mat-card-title>
{{card.title}}
<button [matMenuTriggerFor]="menu" aria-label="Toggle menu" class="more-button" mat-icon-button>
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu" xPosition="before">
<button mat-menu-item>Expand</button>
<button mat-menu-item>Remove</button>
</mat-menu>
</mat-card-title>
</mat-card-header>
<mat-card-content class="dashboard-card-content">
<div>Card Content Here</div>
</mat-card-content>
</mat-card>
</mat-grid-tile>
@for (card of cards | async; track card) {
<mat-grid-tile [colspan]="card.cols" [rowspan]="card.rows">
<mat-card class="dashboard-card">
<mat-card-header>
<mat-card-title>
{{ card.title }}
<button [matMenuTriggerFor]="menu" aria-label="Toggle menu" class="more-button" mat-icon-button>
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu" xPosition="before">
<button mat-menu-item>Expand</button>
<button mat-menu-item>Remove</button>
</mat-menu>
</mat-card-title>
</mat-card-header>
<mat-card-content class="dashboard-card-content">
<div>Card Content Here</div>
</mat-card-content>
</mat-card>
</mat-grid-tile>
}
</mat-grid-list>
</div>
1 change: 1 addition & 0 deletions src/app/footer/footer.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<ng-content></ng-content>
9 changes: 9 additions & 0 deletions src/app/footer/footer.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
:host {
flex: 1;
bottom: 0;
width: 100%;
height: 100px;
background: #3F51B5 !important;
color: white;
text-align: center;
}

0 comments on commit dafff14

Please sign in to comment.