,
23 | @Inject(MAT_DIALOG_DATA) public data: Alerta) { }
24 |
25 | ngOnInit() {
26 | if (this.data) {
27 | this.alerta.titulo = this.data.titulo || this.alerta.titulo;
28 | this.alerta.descricao = this.data.descricao || this.alerta.descricao;
29 | this.alerta.btnSucesso = this.data.btnSucesso || this.alerta.btnSucesso;
30 | this.alerta.btnCancelar = this.data.btnCancelar || this.alerta.btnCancelar;
31 | this.alerta.corBtnSucesso = this.data.corBtnSucesso || this.alerta.corBtnSucesso;
32 | this.alerta.corBtnCancelar = this.data.corBtnCancelar || this.alerta.corBtnCancelar;
33 | this.alerta.possuirBtnFechar = this.data.possuirBtnFechar || this.alerta.possuirBtnFechar;
34 | }
35 | }
36 |
37 | }
38 |
--------------------------------------------------------------------------------
/src/app/shared/components/campos/campos.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { InputTextComponent } from './input-text/input-text.component';
4 | import { InputNumberComponent } from './input-number/input-number.component';
5 | import { InputDateComponent } from './input-date/input-date.component';
6 | import { InputTextareaComponent } from './input-textarea/input-textarea.component';
7 | import { InputSelectComponent } from './input-select/input-select.component';
8 | import { MaterialModule } from '../../material/material.module';
9 | import { ReactiveFormsModule, FormsModule } from '@angular/forms';
10 |
11 | @NgModule({
12 | declarations: [
13 | InputTextComponent,
14 | InputNumberComponent,
15 | InputDateComponent,
16 | InputTextareaComponent,
17 | InputSelectComponent
18 | ],
19 | imports: [
20 | CommonModule,
21 | MaterialModule,
22 | ReactiveFormsModule,
23 | FormsModule
24 | ],
25 | exports: [
26 | InputTextComponent,
27 | InputNumberComponent,
28 | InputDateComponent,
29 | InputTextareaComponent,
30 | InputSelectComponent
31 | ]
32 | })
33 | export class CamposModule { }
34 |
--------------------------------------------------------------------------------
/src/app/shared/components/campos/input-date/input-date.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RenanRB/curso-angular/b4379b667acf18f2137ee6b28bb56ba5ff58735d/src/app/shared/components/campos/input-date/input-date.component.css
--------------------------------------------------------------------------------
/src/app/shared/components/campos/input-date/input-date.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Campo obrigatório
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/app/shared/components/campos/input-date/input-date.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { FormGroup, AbstractControl } from '@angular/forms';
3 | import { ValidarCamposService } from '../validar-campos.service';
4 |
5 | @Component({
6 | selector: 'dio-input-date',
7 | templateUrl: './input-date.component.html',
8 | styleUrls: ['./input-date.component.css']
9 | })
10 | export class InputDateComponent {
11 |
12 | @Input() titulo: string;
13 | @Input() formGroup: FormGroup;
14 | @Input() controlName: string;
15 |
16 | constructor(public validacao: ValidarCamposService) { }
17 |
18 | get formControl(): AbstractControl {
19 | return this.formGroup.controls[this.controlName];
20 | }
21 |
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/shared/components/campos/input-number/input-number.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RenanRB/curso-angular/b4379b667acf18f2137ee6b28bb56ba5ff58735d/src/app/shared/components/campos/input-number/input-number.component.css
--------------------------------------------------------------------------------
/src/app/shared/components/campos/input-number/input-number.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Campo obrigatório
12 |
13 | Campo precisa ter no mínimo o valor {{validacao.lengthValidar(formControl, 'min')}}
14 |
15 |
16 | Campo pode ter no máximo o valor {{validacao.lengthValidar(formControl, 'max')}}
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/src/app/shared/components/campos/input-number/input-number.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { FormGroup, AbstractControl } from '@angular/forms';
3 | import { ValidarCamposService } from '../validar-campos.service';
4 |
5 | @Component({
6 | selector: 'dio-input-number',
7 | templateUrl: './input-number.component.html',
8 | styleUrls: ['./input-number.component.css']
9 | })
10 | export class InputNumberComponent {
11 |
12 | @Input() titulo: string;
13 | @Input() formGroup: FormGroup;
14 | @Input() controlName: string;
15 | @Input() minimo = 0;
16 | @Input() maximo = 10;
17 | @Input() step = 1;
18 |
19 | constructor(public validacao: ValidarCamposService) { }
20 |
21 | get formControl(): AbstractControl {
22 | return this.formGroup.controls[this.controlName];
23 | }
24 |
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/shared/components/campos/input-select/input-select.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RenanRB/curso-angular/b4379b667acf18f2137ee6b28bb56ba5ff58735d/src/app/shared/components/campos/input-select/input-select.component.css
--------------------------------------------------------------------------------
/src/app/shared/components/campos/input-select/input-select.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {{opcao}}
5 |
6 | Campo obrigatório
7 |
8 |
9 |
--------------------------------------------------------------------------------
/src/app/shared/components/campos/input-select/input-select.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { FormGroup, AbstractControl } from '@angular/forms';
3 | import { ValidarCamposService } from '../validar-campos.service';
4 |
5 | @Component({
6 | selector: 'dio-input-select',
7 | templateUrl: './input-select.component.html',
8 | styleUrls: ['./input-select.component.css']
9 | })
10 | export class InputSelectComponent {
11 |
12 | @Input() titulo: string;
13 | @Input() formGroup: FormGroup;
14 | @Input() controlName: string;
15 | @Input() opcoes: Array;
16 |
17 | constructor(public validacao: ValidarCamposService) { }
18 |
19 | get formControl(): AbstractControl {
20 | return this.formGroup.controls[this.controlName];
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/shared/components/campos/input-text/input-text.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RenanRB/curso-angular/b4379b667acf18f2137ee6b28bb56ba5ff58735d/src/app/shared/components/campos/input-text/input-text.component.css
--------------------------------------------------------------------------------
/src/app/shared/components/campos/input-text/input-text.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Campo obrigatório
8 |
9 | Campo precisa ter no mínimo {{validacao.lengthValidar(formControl, 'minlength')}} caracteres
10 |
11 |
12 | Campo pode ter no máximo {{validacao.lengthValidar(formControl, 'maxlength')}} caracteres
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/app/shared/components/campos/input-text/input-text.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { FormGroup, AbstractControl } from '@angular/forms';
3 | import { ValidarCamposService } from '../validar-campos.service';
4 |
5 | @Component({
6 | selector: 'dio-input-text',
7 | templateUrl: './input-text.component.html',
8 | styleUrls: ['./input-text.component.css']
9 | })
10 | export class InputTextComponent {
11 |
12 | @Input() titulo: string;
13 | @Input() formGroup: FormGroup;
14 | @Input() controlName: string;
15 |
16 | constructor(public validacao: ValidarCamposService) { }
17 |
18 | get formControl(): AbstractControl {
19 | return this.formGroup.controls[this.controlName];
20 | }
21 |
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/shared/components/campos/input-textarea/input-textarea.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RenanRB/curso-angular/b4379b667acf18f2137ee6b28bb56ba5ff58735d/src/app/shared/components/campos/input-textarea/input-textarea.component.css
--------------------------------------------------------------------------------
/src/app/shared/components/campos/input-textarea/input-textarea.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 | Campo obrigatório
9 |
10 | Campo precisa ter no mínimo {{validacao.lengthValidar(formControl, 'minlength')}} caracteres
11 |
12 |
13 | Campo pode ter no máximo {{validacao.lengthValidar(formControl, 'maxlength')}} caracteres
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/src/app/shared/components/campos/input-textarea/input-textarea.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { FormGroup, AbstractControl } from '@angular/forms';
3 | import { ValidarCamposService } from '../validar-campos.service';
4 |
5 | @Component({
6 | selector: 'dio-input-textarea',
7 | templateUrl: './input-textarea.component.html',
8 | styleUrls: ['./input-textarea.component.css']
9 | })
10 | export class InputTextareaComponent {
11 |
12 | @Input() titulo: string;
13 | @Input() formGroup: FormGroup;
14 | @Input() controlName: string;
15 |
16 | constructor(public validacao: ValidarCamposService) { }
17 |
18 | get formControl(): AbstractControl {
19 | return this.formGroup.controls[this.controlName];
20 | }
21 |
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/shared/components/campos/validar-campos.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { AbstractControl } from '@angular/forms';
3 |
4 | @Injectable({
5 | providedIn: 'root'
6 | })
7 | export class ValidarCamposService {
8 |
9 | constructor() { }
10 |
11 | hasErrorValidar(control: AbstractControl, errorName: string): boolean {
12 | if ((control.dirty || control.touched) && this.hasError(control, errorName)) {
13 | return true;
14 | }
15 | return false;
16 | }
17 |
18 | hasError(control: AbstractControl, errorName: string): boolean {
19 | return control.hasError(errorName);
20 | }
21 |
22 | lengthValidar(control: AbstractControl, errorName: string): number {
23 | const error = control.errors[errorName];
24 | return error.requiredLength || error.min || error.max || 0;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/app/shared/components/rodape/rodape.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Rodapé do site
4 |
5 |
--------------------------------------------------------------------------------
/src/app/shared/components/rodape/rodape.component.scss:
--------------------------------------------------------------------------------
1 | .primary {
2 | color: white;
3 | height: 46px;
4 | display: flex;
5 | align-items: center;
6 | justify-content: space-around;
7 | }
--------------------------------------------------------------------------------
/src/app/shared/components/rodape/rodape.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'dio-rodape',
5 | templateUrl: './rodape.component.html',
6 | styleUrls: ['./rodape.component.scss']
7 | })
8 | export class RodapeComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/shared/components/topo/topo.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Menu
4 |
5 | Inicial
6 | Cadastrar novo Filme
8 |
10 |
11 |
12 |
21 |
22 |
23 |
25 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | account_circle
35 | Conta
36 |
37 |
38 | settings
39 | Configurações
40 |
41 |
42 |
--------------------------------------------------------------------------------
/src/app/shared/components/topo/topo.component.scss:
--------------------------------------------------------------------------------
1 | .sidenav-container {
2 | height: 100%;
3 | }
4 |
5 | .sidenav {
6 | width: 200px;
7 | box-shadow: 3px 0 6px rgba(0,0,0,.24);
8 | }
9 |
10 | .app-content {
11 | min-height: calc(100vh - 110px);
12 | }
13 |
14 | .app-title {
15 | text-transform: uppercase;
16 | padding-left: 26px;
17 | }
18 |
19 | .header-toolbar {
20 | justify-content: space-between;
21 | }
--------------------------------------------------------------------------------
/src/app/shared/components/topo/topo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ViewChild } from '@angular/core';
2 | import { MatSidenav } from '@angular/material/sidenav';
3 |
4 | @Component({
5 | selector: 'dio-topo',
6 | templateUrl: './topo.component.html',
7 | styleUrls: ['./topo.component.scss']
8 | })
9 | export class TopoComponent implements OnInit {
10 | @ViewChild('sidenav', {static: false}) sidenav: MatSidenav;
11 |
12 |
13 | constructor() { }
14 |
15 | ngOnInit() {
16 | }
17 |
18 |
19 | openSideNav() {
20 | this.sidenav.open();
21 | }
22 |
23 | closeSideNav() {
24 | this.sidenav.close();
25 | }
26 |
27 |
28 | }
29 |
--------------------------------------------------------------------------------
/src/app/shared/material/material.module.spec.ts:
--------------------------------------------------------------------------------
1 | import { MaterialModule } from './material.module';
2 |
3 | describe('MaterialModule', () => {
4 | let materialModule: MaterialModule;
5 |
6 | beforeEach(() => {
7 | materialModule = new MaterialModule();
8 | });
9 |
10 | it('should create an instance', () => {
11 | expect(materialModule).toBeTruthy();
12 | });
13 | });
14 |
--------------------------------------------------------------------------------
/src/app/shared/material/material.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { MatButtonModule } from '@angular/material/button';
3 | import { MatSidenavModule } from '@angular/material/sidenav';
4 | import { MatCheckboxModule } from '@angular/material/checkbox';
5 | import { MatIconModule } from '@angular/material/icon';
6 | import { MatListModule } from '@angular/material/list';
7 | import { MatCardModule } from '@angular/material/card';
8 | import { MatExpansionModule } from '@angular/material/expansion';
9 | import { MatRadioModule } from '@angular/material/radio';
10 | import { MatInputModule } from '@angular/material/input';
11 | import { MatTabsModule } from '@angular/material/tabs';
12 | import { MatSnackBarModule } from '@angular/material/snack-bar';
13 | import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
14 | import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
15 | import { MatBadgeModule } from '@angular/material/badge';
16 | import { MatGridListModule } from '@angular/material/grid-list';
17 | import { MatDialogModule } from '@angular/material/dialog';
18 | import { MatSelectModule } from '@angular/material/select';
19 | import { MatChipsModule } from '@angular/material/chips';
20 | import { MatFormFieldModule } from '@angular/material/form-field';
21 | import { MatPaginatorModule } from '@angular/material/paginator';
22 | import { MatSlideToggleModule } from '@angular/material/slide-toggle';
23 | import { MatSortModule } from '@angular/material/sort';
24 | import { MatMenuModule } from '@angular/material/menu';
25 | import { MatTooltipModule } from '@angular/material/tooltip';
26 | import { MatToolbarModule } from '@angular/material/toolbar';
27 | import { MatTableModule } from '@angular/material/table';
28 | import { MatDatepickerModule } from '@angular/material/datepicker';
29 | import { MatNativeDateModule } from '@angular/material/core';
30 |
31 |
32 | @NgModule({
33 | imports: [
34 | MatIconModule,
35 | MatButtonModule,
36 | MatCheckboxModule,
37 | MatSidenavModule,
38 | MatListModule,
39 | MatTabsModule,
40 | MatCardModule,
41 | MatListModule,
42 | MatCardModule,
43 | MatExpansionModule,
44 | MatRadioModule,
45 | MatInputModule,
46 | MatSnackBarModule,
47 | MatProgressSpinnerModule,
48 | MatBottomSheetModule,
49 | MatBadgeModule,
50 | MatGridListModule,
51 | MatDialogModule,
52 | MatSelectModule,
53 | MatChipsModule,
54 | MatSlideToggleModule,
55 | MatMenuModule,
56 | MatTooltipModule,
57 | MatToolbarModule,
58 | MatTableModule,
59 | MatPaginatorModule,
60 | MatSortModule,
61 | MatFormFieldModule,
62 | MatDatepickerModule,
63 | MatNativeDateModule
64 | ],
65 | exports: [
66 | MatIconModule,
67 | MatButtonModule,
68 | MatCheckboxModule,
69 | MatSidenavModule,
70 | MatListModule,
71 | MatTabsModule,
72 | MatCardModule,
73 | MatListModule,
74 | MatCardModule,
75 | MatExpansionModule,
76 | MatRadioModule,
77 | MatInputModule,
78 | MatSnackBarModule,
79 | MatProgressSpinnerModule,
80 | MatBottomSheetModule,
81 | MatBadgeModule,
82 | MatGridListModule,
83 | MatDialogModule,
84 | MatSelectModule,
85 | MatChipsModule,
86 | MatSlideToggleModule,
87 | MatMenuModule,
88 | MatTooltipModule,
89 | MatToolbarModule,
90 | MatTableModule,
91 | MatPaginatorModule,
92 | MatSortModule,
93 | MatFormFieldModule,
94 | MatDatepickerModule,
95 | MatNativeDateModule
96 | ]
97 | })
98 | export class MaterialModule {
99 | }
100 |
--------------------------------------------------------------------------------
/src/app/shared/models/alerta.ts:
--------------------------------------------------------------------------------
1 | export interface Alerta {
2 | titulo?: string;
3 | descricao?: string;
4 | btnSucesso?: string;
5 | btnCancelar?: string;
6 | corBtnSucesso?: string;
7 | corBtnCancelar?: string;
8 | possuirBtnFechar?: boolean;
9 | }
10 |
--------------------------------------------------------------------------------
/src/app/shared/models/campo-generico.ts:
--------------------------------------------------------------------------------
1 | export interface CampoGenerico {
2 | tipo: string;
3 | valor: any;
4 | }
5 |
--------------------------------------------------------------------------------
/src/app/shared/models/config-prams.ts:
--------------------------------------------------------------------------------
1 | import { CampoGenerico } from './campo-generico';
2 |
3 | export interface ConfigPrams {
4 | pagina?: number;
5 | limite?: number;
6 | pesquisa?: string;
7 | campo?: CampoGenerico;
8 | }
9 |
--------------------------------------------------------------------------------
/src/app/shared/models/filme.ts:
--------------------------------------------------------------------------------
1 | export interface Filme {
2 | id?: number;
3 | titulo: string;
4 | urlFoto?: string;
5 | dtLancamento: Date;
6 | descricao?: string;
7 | nota: number;
8 | urlIMDb?: string;
9 | genero: string;
10 | }
11 |
--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RenanRB/curso-angular/b4379b667acf18f2137ee6b28bb56ba5ff58735d/src/assets/.gitkeep
--------------------------------------------------------------------------------
/src/assets/images/angular-material-post.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RenanRB/curso-angular/b4379b667acf18f2137ee6b28bb56ba5ff58735d/src/assets/images/angular-material-post.png
--------------------------------------------------------------------------------
/src/assets/styles/reset.scss:
--------------------------------------------------------------------------------
1 | body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
2 | form, fieldset, input, p, blockquote, table, th, td, embed, object {
3 | padding: 0;
4 | margin: 0;
5 | }
6 | table {
7 | border-collapse: collapse;
8 | border-spacing: 0;
9 | }
10 | fieldset, img, abbr {
11 | border: 0;
12 | }
13 | address, caption, cite, code, dfn, em,
14 | h1, h2, h3, h4, h5, h6, strong, th, var {
15 | font-weight: normal;
16 | font-style: normal;
17 | }
18 | ul {
19 | list-style: none;
20 | }
21 | caption, th {
22 | text-align: left;
23 | }
24 | h1, h2, h3, h4, h5, h6 {
25 | font-size: 1.0em;
26 | }
27 | q:before, q:after {
28 | content: '';
29 | }
30 | a, ins {
31 | text-decoration: none;
32 | }
--------------------------------------------------------------------------------
/src/assets/styles/styles.scss:
--------------------------------------------------------------------------------
1 | @import 'reset';
2 | @import 'themes';
3 |
4 | body {
5 | margin: 0;
6 | }
7 |
8 | .center {
9 | margin: 10px auto;
10 | }
11 |
12 | .width50 {
13 | width: 50%;
14 | }
15 |
16 | .width75 {
17 | width: 75%;
18 | }
19 |
20 | .main-div {
21 | display: flex;
22 | justify-content: center;
23 | align-items: center;
24 | }
25 |
26 | .full-width {
27 | width: 100%;
28 | }
29 |
30 | .float-left {
31 | float: left;
32 | }
33 |
34 | .margin10 {
35 | margin: 10px;
36 | }
37 |
38 | .padding10 {
39 | padding: 10px;
40 | }
41 |
42 | .quebrar-linha {
43 | white-space: pre-line;
44 | }
45 |
--------------------------------------------------------------------------------
/src/assets/styles/themes.scss:
--------------------------------------------------------------------------------
1 | // define 3 theme color
2 | // mat-palette accepts $palette-name, main, lighter and darker variants
3 |
4 | @import '~@angular/material/theming';
5 |
6 | $default-theme-primary: mat-palette($mat-cyan, 500, 100, 900);
7 | $default-theme-accent: mat-palette($mat-orange, 800, 300, 200);
8 | $default-theme-warn: mat-palette($mat-red, A700);
9 |
10 | // create theme (use mat-dark-theme for themes with dark backgrounds)
11 | $default-theme: mat-dark-theme(
12 | $default-theme-primary,
13 | $default-theme-accent,
14 | $default-theme-warn
15 | );
16 |
17 | @include angular-material-theme($default-theme);
18 |
19 |
20 | footer {
21 | background-color: mat-color($default-theme-primary);
22 | }
--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * In development mode, to ignore zone related error stack frames such as
11 | * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
12 | * import the following file, but please comment it out in production mode
13 | * because it will have performance impact when throw error
14 | */
15 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
16 |
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RenanRB/curso-angular/b4379b667acf18f2137ee6b28bb56ba5ff58735d/src/favicon.ico
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Meus Filmes
9 |