(
20 | inject(ActivatedRoute).snapshot.data['products']
21 | );
22 |
23 | productsService = inject(ProductsService);
24 | router = inject(Router);
25 | confirmationDialogService = inject(ConfirmationDialogService);
26 |
27 | onEdit(product: Product) {
28 | this.router.navigate(['/edit-product', product.id]);
29 | }
30 |
31 | onDelete(product: Product) {
32 | this.confirmationDialogService
33 | .openDialog()
34 | .pipe(filter((answer) => answer === true))
35 | .subscribe(() => {
36 | this.productsService.delete(product.id).subscribe(() => {
37 | this.productsService.getAll().subscribe((products) => {
38 | this.products.set(products);
39 | });
40 | });
41 | });
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/app/shared/components/back-to-list/back-to-list.component.html:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/app/shared/components/back-to-list/back-to-list.component.scss:
--------------------------------------------------------------------------------
1 | .link-container {
2 | margin: 8px 0;
3 | }
--------------------------------------------------------------------------------
/src/app/shared/components/back-to-list/back-to-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { MatButtonModule } from '@angular/material/button';
3 | import { RouterLink } from '@angular/router';
4 |
5 | @Component({
6 | selector: 'app-back-to-list',
7 | standalone: true,
8 | imports: [RouterLink, MatButtonModule],
9 | templateUrl: './back-to-list.component.html',
10 | styleUrl: './back-to-list.component.scss'
11 | })
12 | export class BackToListComponent {
13 |
14 | }
15 |
--------------------------------------------------------------------------------
/src/app/shared/components/form/form.component.html:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/src/app/shared/components/form/form.component.scss:
--------------------------------------------------------------------------------
1 | .form-container {
2 | display: flex;
3 | justify-content: center;
4 | }
5 |
6 | .form-content-container {
7 | width: 100%;
8 | display: flex;
9 | flex-direction: column;
10 | }
--------------------------------------------------------------------------------
/src/app/shared/components/form/form.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, EventEmitter, Output, input } from '@angular/core';
2 | import {
3 | FormGroup,
4 | FormControl,
5 | Validators,
6 | ReactiveFormsModule,
7 | } from '@angular/forms';
8 | import { Product } from '../../interfaces/product.interface';
9 | import { MatButtonModule } from '@angular/material/button';
10 | import { MatFormFieldModule } from '@angular/material/form-field';
11 | import { MatInputModule } from '@angular/material/input';
12 |
13 | @Component({
14 | selector: 'app-form',
15 | standalone: true,
16 | imports: [
17 | ReactiveFormsModule,
18 | MatFormFieldModule,
19 | MatInputModule,
20 | MatButtonModule,
21 | ],
22 | templateUrl: './form.component.html',
23 | styleUrl: './form.component.scss',
24 | })
25 | export class FormComponent {
26 | product = input(null);
27 |
28 | form!: FormGroup;
29 |
30 | @Output() done = new EventEmitter();
31 |
32 | ngOnInit(): void {
33 | this.form = new FormGroup({
34 | title: new FormControl(this.product()?.title ?? '', {
35 | nonNullable: true,
36 | validators: Validators.required,
37 | }),
38 | });
39 | }
40 |
41 | onSubmit() {
42 | const product = this.form.value as Product;
43 | this.done.emit(product);
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/app/shared/components/header/header.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Gerenciados de Produtos
5 |
6 |
Deletar produto
15 |
16 | Tem certeza que quer deletar esse produto?
17 |
18 |
19 |
20 |
28 |
29 | `,
30 | standalone: true,
31 | imports: [MatButtonModule, MatDialogModule],
32 | })
33 | export class ConfirmationDialogComponent {
34 | matDialogRef = inject(MatDialogRef);
35 |
36 | onNo() {
37 | this.matDialogRef.close(false);
38 | }
39 |
40 | onYes() {
41 | this.matDialogRef.close(true);
42 | }
43 | }
44 |
45 | @Injectable({
46 | providedIn: 'root',
47 | })
48 | export class ConfirmationDialogService {
49 | matDialog = inject(MatDialog);
50 |
51 | constructor() {}
52 |
53 | openDialog(): Observable {
54 | return this.matDialog.open(ConfirmationDialogComponent).afterClosed();
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/app/shared/services/products.service.ts:
--------------------------------------------------------------------------------
1 | import { HttpClient } from '@angular/common/http';
2 | import { Injectable, inject } from '@angular/core';
3 | import { Product } from '../interfaces/product.interface';
4 | import { ProductPayload } from '../interfaces/payload-product.interface';
5 |
6 | @Injectable({
7 | providedIn: 'root',
8 | })
9 | export class ProductsService {
10 | httpClient = inject(HttpClient);
11 |
12 | getAll() {
13 | return this.httpClient.get('/api/products');
14 | }
15 |
16 | get(id: string) {
17 | return this.httpClient.get(`/api/products/${id}`);
18 | }
19 |
20 | post(payload: ProductPayload) {
21 | return this.httpClient.post('/api/products', payload);
22 | }
23 |
24 | put(id: string, payload: ProductPayload) {
25 | return this.httpClient.put(`/api/products/${id}`, payload);
26 | }
27 |
28 | delete(id: string) {
29 | return this.httpClient.delete(`/api/products/${id}`);
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-dimension/mini-curso-angular-17/3508851d839db4267d2c98852193dbe95d089be8/src/assets/.gitkeep
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-dimension/mini-curso-angular-17/3508851d839db4267d2c98852193dbe95d089be8/src/favicon.ico
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | ProductStore
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { bootstrapApplication } from '@angular/platform-browser';
2 | import { appConfig } from './app/app.config';
3 | import { AppComponent } from './app/app.component';
4 |
5 | bootstrapApplication(AppComponent, appConfig)
6 | .catch((err) => console.error(err));
7 |
--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | html,
3 | body {
4 | height: 100%;
5 | }
6 | body {
7 | margin: 0;
8 | font-family: Roboto, "Helvetica Neue", sans-serif;
9 | }
10 |
11 | .container {
12 | display: flex;
13 | justify-content: center;
14 | width: 100%;
15 | }
16 |
17 | .content-container {
18 | max-width: 450px;
19 | width: 100%;
20 | }
21 |
--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/app",
6 | "types": []
7 | },
8 | "files": [
9 | "src/main.ts"
10 | ],
11 | "include": [
12 | "src/**/*.d.ts"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "outDir": "./dist/out-tsc",
6 | "forceConsistentCasingInFileNames": true,
7 | "strict": true,
8 | "noImplicitOverride": true,
9 | "noPropertyAccessFromIndexSignature": true,
10 | "noImplicitReturns": true,
11 | "noFallthroughCasesInSwitch": true,
12 | "skipLibCheck": true,
13 | "esModuleInterop": true,
14 | "sourceMap": true,
15 | "declaration": false,
16 | "experimentalDecorators": true,
17 | "moduleResolution": "node",
18 | "importHelpers": true,
19 | "target": "ES2022",
20 | "module": "ES2022",
21 | "useDefineForClassFields": false,
22 | "lib": [
23 | "ES2022",
24 | "dom"
25 | ]
26 | },
27 | "angularCompilerOptions": {
28 | "enableI18nLegacyMessageIdFormat": false,
29 | "strictInjectionParameters": true,
30 | "strictInputAccessModifiers": true,
31 | "strictTemplates": true
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/spec",
6 | "types": [
7 | "jasmine"
8 | ]
9 | },
10 | "include": [
11 | "src/**/*.spec.ts",
12 | "src/**/*.d.ts"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------