Skip to content

Commit

Permalink
Additions/55 back button navigation (#1016)
Browse files Browse the repository at this point in the history
 feat: new angular back button navigation challenge
  • Loading branch information
tsironis13 authored Jul 1, 2024
1 parent d05c279 commit 7335c39
Show file tree
Hide file tree
Showing 35 changed files with 493 additions and 15 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ If you would like to propose a challenge, this project is open source, so feel f
## Challenges

Check [all 54 challenges](https://angular-challenges.vercel.app/)
Check [all 55 challenges](https://angular-challenges.vercel.app/)

## Contributors ✨

Expand Down
36 changes: 36 additions & 0 deletions apps/angular/55-back-button-navigation/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
{
"extends": ["../../../.eslintrc.json"],
"ignorePatterns": ["!**/*"],
"overrides": [
{
"files": ["*.ts"],
"extends": [
"plugin:@nx/angular",
"plugin:@angular-eslint/template/process-inline-templates"
],
"rules": {
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": "app",
"style": "camelCase"
}
],
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"prefix": "app",
"style": "kebab-case"
}
]
}
},
{
"files": ["*.html"],
"extends": ["plugin:@nx/angular-template"],
"rules": {}
}
]
}
13 changes: 13 additions & 0 deletions apps/angular/55-back-button-navigation/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Back-Button-Navigation

> author: ioannis-tsironis
### Run Application

```bash
npx nx serve angular-back-button-navigation
```

### Documentation and Instruction

Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/55-back-button-navigation/).
22 changes: 22 additions & 0 deletions apps/angular/55-back-button-navigation/jest.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/* eslint-disable */
export default {
displayName: 'angular-back-button-navigation',
preset: '../../../jest.preset.js',
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
coverageDirectory: '../../../coverage/apps/angular/55-back-button-navigation',
transform: {
'^.+\\.(ts|mjs|js|html)$': [
'jest-preset-angular',
{
tsconfig: '<rootDir>/tsconfig.spec.json',
stringifyContentPathRegex: '\\.(html|svg)$',
},
],
},
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
snapshotSerializers: [
'jest-preset-angular/build/serializers/no-ng-attributes',
'jest-preset-angular/build/serializers/ng-snapshot',
'jest-preset-angular/build/serializers/html-comment',
],
};
84 changes: 84 additions & 0 deletions apps/angular/55-back-button-navigation/project.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
{
"name": "angular-back-button-navigation",
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
"projectType": "application",
"prefix": "app",
"sourceRoot": "apps/angular/55-back-button-navigation/src",
"tags": [],
"targets": {
"build": {
"executor": "@angular-devkit/build-angular:application",
"outputs": ["{options.outputPath}"],
"options": {
"outputPath": "dist/apps/angular/55-back-button-navigation",
"index": "apps/angular/55-back-button-navigation/src/index.html",
"browser": "apps/angular/55-back-button-navigation/src/main.ts",
"polyfills": ["zone.js"],
"tsConfig": "apps/angular/55-back-button-navigation/tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
{
"glob": "**/*",
"input": "apps/angular/55-back-button-navigation/public"
}
],
"styles": [
"apps/angular/55-back-button-navigation/src/styles.scss",
"node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"executor": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "angular-back-button-navigation:build:production"
},
"development": {
"buildTarget": "angular-back-button-navigation:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"executor": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "angular-back-button-navigation:build"
}
},
"lint": {
"executor": "@nx/eslint:lint"
},
"test": {
"executor": "@nx/jest:jest",
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
"options": {
"jestConfig": "apps/angular/55-back-button-navigation/jest.config.ts"
}
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<router-outlet></router-outlet>
10 changes: 10 additions & 0 deletions apps/angular/55-back-button-navigation/src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';

@Component({
standalone: true,
imports: [RouterOutlet, RouterLink],
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {}
10 changes: 10 additions & 0 deletions apps/angular/55-back-button-navigation/src/app/app.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { APP_ROUTES } from './app.routes';

export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(APP_ROUTES),
],
};
24 changes: 24 additions & 0 deletions apps/angular/55-back-button-navigation/src/app/app.routes.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { SensitiveActionComponent } from './sensitive-action/sensitive-action.component';
import { SimpleActionComponent } from './simple-action/simple-action.component';

export const APP_ROUTES: Routes = [
{
path: '',
pathMatch: 'full',
redirectTo: 'home',
},
{
path: 'home',
component: HomeComponent,
},
{
path: 'simple-action',
component: SimpleActionComponent,
},
{
path: 'sensitive-action',
component: SensitiveActionComponent,
},
];
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<h2 mat-dialog-title>Delete file</h2>
<mat-dialog-content>Would you like to delete cat.jpeg?</mat-dialog-content>
<mat-dialog-actions>
<button mat-button mat-dialog-close>No</button>
<button mat-button mat-dialog-close cdkFocusInitial>Ok</button>
</mat-dialog-actions>
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import {
MatDialogActions,
MatDialogClose,
MatDialogContent,
MatDialogRef,
MatDialogTitle,
} from '@angular/material/dialog';

@Component({
selector: 'app-dialog-dialog',
templateUrl: './dialog.component.html',
standalone: true,
imports: [
MatButtonModule,
MatDialogActions,
MatDialogClose,
MatDialogTitle,
MatDialogContent,
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DialogComponent {
readonly dialogRef = inject(MatDialogRef<DialogComponent>);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<a mat-raised-button routerLink="/simple-action" routerLinkActive="active">
Go to simple dialog action page
</a>

<a mat-raised-button routerLink="/sensitive-action" routerLinkActive="active">
Go to sensitive dialog action page
</a>
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { RouterLink } from '@angular/router';

@Component({
standalone: true,
imports: [MatButtonModule, RouterLink],
selector: 'app-home',
templateUrl: './home.component.html',
})
export class HomeComponent {}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<button mat-raised-button (click)="openDialog()">
Open dialog with confirmation dialog on browser back button click
</button>
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Component, inject } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from '../dialog/dialog.component';

@Component({
standalone: true,
imports: [MatButtonModule],
selector: 'app-sensitive-action',
templateUrl: './sensitive-action.component.html',
})
export class SensitiveActionComponent {
readonly #dialog = inject(MatDialog);

openDialog(): void {
this.#dialog.open(DialogComponent, {
width: '250px',
});
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<button mat-raised-button (click)="openDialog()">Open simple dialog</button>
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Component, inject } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from '../dialog/dialog.component';

@Component({
standalone: true,
imports: [MatButtonModule],
selector: 'app-simple-action',
templateUrl: './simple-action.component.html',
})
export class SimpleActionComponent {
readonly #dialog = inject(MatDialog);

openDialog(): void {
this.#dialog.open(DialogComponent, {
width: '250px',
});
}
}
13 changes: 13 additions & 0 deletions apps/angular/55-back-button-navigation/src/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>angular-back-button-navigation</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<app-root></app-root>
</body>
</html>
7 changes: 7 additions & 0 deletions apps/angular/55-back-button-navigation/src/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err),
);
28 changes: 28 additions & 0 deletions apps/angular/55-back-button-navigation/src/styles.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
@use '@angular/material' as mat;

/* You can add global styles to this file, and also import other style files */

@tailwind base;
@tailwind components;
@tailwind utilities;

@include mat.core();

$theme-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
$theme-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);

$theme-warn: mat.m2-define-palette(mat.$m2-red-palette);

$theme: mat.m2-define-light-theme(
(
color: (
primary: $theme-primary,
accent: $theme-accent,
warn: $theme-warn,
),
typography: mat.m2-define-typography-config(),
)
);

@include mat.dialog-theme($theme);
@include mat.button-theme($theme);
2 changes: 2 additions & 0 deletions apps/angular/55-back-button-navigation/src/test-setup.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import '@testing-library/jest-dom';
import 'jest-preset-angular/setup-jest';
14 changes: 14 additions & 0 deletions apps/angular/55-back-button-navigation/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
const { join } = require('path');

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
...createGlobPatternsForDependencies(__dirname),
],
theme: {
extend: {},
},
plugins: [],
};
10 changes: 10 additions & 0 deletions apps/angular/55-back-button-navigation/tsconfig.app.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../../dist/out-tsc",
"types": []
},
"files": ["src/main.ts"],
"include": ["src/**/*.d.ts"],
"exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
}
Loading

0 comments on commit 7335c39

Please sign in to comment.