mirror of
https://github.com/Raghu-Ch/angular-challenges.git
synced 2026-02-10 21:03:03 -05:00
refactor: review fix 2
This commit is contained in:
Timothy Alcaide
@@ -1,36 +0,0 @@
|
||||
{
|
||||
"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": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
# Save your form's bacon: with the navigation alert
|
||||
|
||||
> author: [Timothy Alcaide](https://github.com/alcaidio)
|
||||
|
||||
### Run Application
|
||||
|
||||
```bash
|
||||
npx nx serve angular-dialog-alert-form
|
||||
```
|
||||
|
||||
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/48-dialog-alert-form/).
|
||||
@@ -1,72 +0,0 @@
|
||||
{
|
||||
"name": "angular-dialog-alert-form",
|
||||
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
|
||||
"projectType": "application",
|
||||
"prefix": "app",
|
||||
"sourceRoot": "apps/angular/dialog-alert-form/src",
|
||||
"tags": [],
|
||||
"targets": {
|
||||
"build": {
|
||||
"executor": "@angular-devkit/build-angular:application",
|
||||
"outputs": ["{options.outputPath}"],
|
||||
"options": {
|
||||
"outputPath": "dist/apps/angular/dialog-alert-form",
|
||||
"index": "apps/angular/dialog-alert-form/src/index.html",
|
||||
"browser": "apps/angular/dialog-alert-form/src/main.ts",
|
||||
"polyfills": ["zone.js"],
|
||||
"tsConfig": "apps/angular/dialog-alert-form/tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"apps/angular/dialog-alert-form/src/favicon.ico",
|
||||
"apps/angular/dialog-alert-form/src/assets"
|
||||
],
|
||||
"styles": ["apps/angular/dialog-alert-form/src/styles.scss"],
|
||||
"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-dialog-alert-form:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "angular-dialog-alert-form:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"executor": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"buildTarget": "angular-dialog-alert-form:build"
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"executor": "@nx/eslint:lint"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
import { NavComponent } from './ui/nav.component';
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
imports: [RouterOutlet, NavComponent],
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<div class="h-screen bg-gray-50">
|
||||
<app-nav
|
||||
class="mx-auto flex w-full items-center justify-center pb-2 pt-8" />
|
||||
|
||||
<main class="px-4 py-16 sm:px-6 lg:px-8">
|
||||
<router-outlet></router-outlet>
|
||||
</main>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class AppComponent {}
|
||||
@@ -1,7 +0,0 @@
|
||||
import { ApplicationConfig } from '@angular/core';
|
||||
import { provideRouter, withComponentInputBinding } from '@angular/router';
|
||||
import { appRoutes } from './app.routes';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [provideRouter(appRoutes, withComponentInputBinding())],
|
||||
};
|
||||
@@ -1,29 +0,0 @@
|
||||
import { Route } from '@angular/router';
|
||||
import { JoinComponent } from './pages/join.component';
|
||||
import { PageComponent } from './pages/page.component';
|
||||
|
||||
export const appRoutes: Route[] = [
|
||||
{
|
||||
path: '',
|
||||
pathMatch: 'full',
|
||||
redirectTo: 'form',
|
||||
},
|
||||
{
|
||||
path: 'form',
|
||||
loadComponent: () => JoinComponent,
|
||||
},
|
||||
{
|
||||
path: 'page-1',
|
||||
data: {
|
||||
title: 'Page 1',
|
||||
},
|
||||
loadComponent: () => PageComponent,
|
||||
},
|
||||
{
|
||||
path: 'page-2',
|
||||
data: {
|
||||
title: 'Page 2',
|
||||
},
|
||||
loadComponent: () => PageComponent,
|
||||
},
|
||||
];
|
||||
@@ -1,16 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||||
import { FormComponent } from '../ui/form.component';
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
imports: [FormComponent],
|
||||
template: `
|
||||
<section class="mx-auto max-w-screen-sm">
|
||||
<div class="rounded-lg bg-white p-8 shadow-lg lg:p-12">
|
||||
<app-form />
|
||||
</div>
|
||||
</section>
|
||||
`,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class JoinComponent {}
|
||||
@@ -1,14 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
template: `
|
||||
<section>
|
||||
<h1>{{ title() }}</h1>
|
||||
</section>
|
||||
`,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class PageComponent {
|
||||
title = input.required<string>();
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||||
|
||||
// NOTE : this is just the dialog content, you need to implement dialog logic
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
template: `
|
||||
<div role="alert" class="rounded-xl border border-gray-100 bg-white p-5">
|
||||
<h3 class="block text-xl font-medium text-red-600">
|
||||
You have unsaved information!
|
||||
</h3>
|
||||
|
||||
<p class="mt-1 text-gray-700">Do you want to continue and lose them?</p>
|
||||
|
||||
<div class="mt-4 flex gap-2">
|
||||
<button
|
||||
class="inline-flex items-center gap-2 rounded-lg bg-red-600 px-4 py-2 text-white hover:bg-red-700">
|
||||
Yes continue
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="block rounded-lg px-4 py-2 text-gray-700 transition hover:bg-gray-50">
|
||||
Stay on page
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class AlertDialogComponent {}
|
||||
@@ -1,78 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
|
||||
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-form',
|
||||
standalone: true,
|
||||
imports: [ReactiveFormsModule],
|
||||
template: `
|
||||
<form [formGroup]="form" (ngSubmit)="onSubmit()" class="space-y-4">
|
||||
<div>
|
||||
<label class="sr-only" for="name">Name</label>
|
||||
<input
|
||||
class="w-full rounded-lg border-gray-200 p-3 text-sm"
|
||||
placeholder="Name"
|
||||
type="text"
|
||||
formControlName="name"
|
||||
id="name" />
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<label class="sr-only" for="email">Email</label>
|
||||
<input
|
||||
class="w-full rounded-lg border-gray-200 p-3 text-sm"
|
||||
placeholder="Email address"
|
||||
type="email"
|
||||
formControlName="email"
|
||||
id="email" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="sr-only" for="phone">Phone</label>
|
||||
<input
|
||||
class="w-full rounded-lg border-gray-200 p-3 text-sm"
|
||||
placeholder="Phone Number"
|
||||
type="tel"
|
||||
formControlName="phone"
|
||||
id="phone" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="sr-only" for="message">Message</label>
|
||||
|
||||
<textarea
|
||||
class="w-full rounded-lg border-gray-200 p-3 text-sm"
|
||||
placeholder="Message"
|
||||
rows="8"
|
||||
formControlName="message"
|
||||
id="message"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button
|
||||
[disabled]="form.invalid"
|
||||
type="submit"
|
||||
class="inline-block w-full rounded-lg border bg-gray-50 px-5 py-3 font-medium text-gray-900 disabled:cursor-not-allowed disabled:bg-gray-300 sm:w-auto">
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
`,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class FormComponent {
|
||||
private fb = inject(FormBuilder);
|
||||
|
||||
form = this.fb.nonNullable.group({
|
||||
name: ['', { validators: [Validators.required] }],
|
||||
email: ['', [Validators.required, Validators.email]], // other syntax
|
||||
phone: '',
|
||||
message: '',
|
||||
});
|
||||
|
||||
onSubmit() {
|
||||
if (this.form.valid) this.form.reset();
|
||||
}
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||||
import { RouterLink, RouterLinkActive } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-nav',
|
||||
standalone: true,
|
||||
imports: [RouterLink, RouterLinkActive],
|
||||
template: `
|
||||
<nav
|
||||
class="inline-flex overflow-hidden rounded-md border bg-white shadow-sm">
|
||||
<a
|
||||
routerLink="/form"
|
||||
routerLinkActive="bg-gray-300 hover:bg-gray-300"
|
||||
class="inline-block px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:relative">
|
||||
Form
|
||||
</a>
|
||||
<a
|
||||
routerLink="/page-1"
|
||||
routerLinkActive="bg-gray-300 hover:bg-gray-300"
|
||||
class="inline-block px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:relative">
|
||||
Page 1
|
||||
</a>
|
||||
<a
|
||||
routerLink="/page-2"
|
||||
routerLinkActive="bg-gray-300 hover:bg-gray-300"
|
||||
class="inline-block px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:relative">
|
||||
Page 2
|
||||
</a>
|
||||
</nav>
|
||||
`,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class NavComponent {}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
@@ -1,13 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>angular-dialog-alert-form</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>
|
||||
@@ -1,7 +0,0 @@
|
||||
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),
|
||||
);
|
||||
@@ -1,5 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
@@ -1,16 +0,0 @@
|
||||
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: [
|
||||
require('@tailwindcss/forms'),
|
||||
],
|
||||
};
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"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"]
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"include": ["src/**/*.ts"],
|
||||
"compilerOptions": {},
|
||||
"exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2022",
|
||||
"useDefineForClassFields": false,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"files": [],
|
||||
"include": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.editor.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
}
|
||||
],
|
||||
"extends": "../../../tsconfig.base.json",
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"strictTemplates": true
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user