-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[src/app/app.component.ts] Simplify component ; add global
ESC
hand…
…ler to close sidebar ; [src/app/footer] Add footer ; [*.html] Use new `@if` and `@for` from Angular 17
- Loading branch information
1 parent
f929807
commit dafff14
Showing
19 changed files
with
242 additions
and
129 deletions.
There are no files selected for viewing
72 changes: 42 additions & 30 deletions
72
src/app/admin/user-crud-dialog/user-crud.dialog.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<ng-content></ng-content> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
Oops, something went wrong.