Skip to content

Commit 4e46f3d

Browse files
author
Danilo Otavio Lima Salve
committed
style: formatação automatica de codigo - preetier
1 parent 5bfcf71 commit 4e46f3d

7 files changed

Lines changed: 210 additions & 0 deletions

File tree

‎src/app/pages/resources-api/dragon-ball/dragon-ball-list/dragon-ball-cards/dragon-ball-card/dragon-ball-card.component.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@if (item()) {
2+
<po-widget class="po-xl-4 po-lg-6 po-md-12 po-sm-12 po-mb-2" [p-height]="height()" appZoomOnHover>
3+
<div class="po-row">
4+
<div class="po-md-5 po-lg-5">
5+
@let image = item().image || 'assets/img/not-found-image.jpg';
6+
<po-image [p-src]="image" p-loading="lazy" p-alt="Imagem do personagem do Dragon Ball" [p-height]="200" />
7+
</div>
8+
<div class="po-md-7 po-lg-7">
9+
<p class="po-font-subtitle po-xl-12 po-lg-12 po-md-12 po-sm-12">{{ item().name }}</p>
10+
<div>
11+
<p class="po-font-text-large po-xl-7 po-lg-7 po-md-7 po-sm-7">{{ item().race }} - {{ item().affiliation }}</p>
12+
<po-tag [p-color]="getGenderColor(item().gender)" [p-value]="getGenderValue(item().gender)" />
13+
</div>
14+
15+
<div class="po-xl-12 po-lg-12 po-md-12 po-sm-12">
16+
<p class="po-font-text-bold po-mt-2">KI:</p>
17+
<p class="po-font-text">{{ item().ki }}</p>
18+
</div>
19+
20+
<div class="po-xl-12 po-lg-12 po-md-12 po-sm-12">
21+
<p class="po-font-text-bold po-mt-2">Máximo KI:</p>
22+
<p class="po-font-text">{{ item().maxKi }}</p>
23+
</div>
24+
</div>
25+
</div>
26+
</po-widget>
27+
}

‎src/app/pages/resources-api/dragon-ball/dragon-ball-list/dragon-ball-cards/dragon-ball-card/dragon-ball-card.component.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { PoBadgeModule, PoImageModule, PoTagModule, PoWidgetModule } from '@po-ui/ng-components';
2+
import { Component, input, signal } from '@angular/core';
3+
import { CommonModule } from '@angular/common';
4+
5+
import { Character } from '../../../shared/interfaces/character';
6+
import { ZoomOnHoverDirective } from '../../../../../../shared/directives/zoom-on-hover.directive';
7+
8+
const GENDER_COLOR = {
9+
Female: 'color-06',
10+
Male: 'color-02',
11+
Genderless: 'color-08',
12+
unknown: 'color-07'
13+
};
14+
15+
const GENDER_VALUE = {
16+
Female: 'Feminino',
17+
Male: 'Masculino',
18+
Genderless: 'Sem gênero',
19+
unknown: 'Desconhecido'
20+
};
21+
22+
@Component({
23+
selector: 'app-dragon-ball-card',
24+
imports: [CommonModule, PoBadgeModule, PoImageModule, PoTagModule, PoWidgetModule, ZoomOnHoverDirective],
25+
templateUrl: './dragon-ball-card.component.html'
26+
})
27+
export class DragonBallCardComponent {
28+
readonly item = input.required<Character>();
29+
readonly height = signal<number>(250);
30+
31+
getGenderColor(gender: string): string {
32+
return GENDER_COLOR[gender as keyof typeof GENDER_COLOR];
33+
}
34+
35+
getGenderValue(gender: string): string {
36+
return GENDER_VALUE[gender as keyof typeof GENDER_VALUE];
37+
}
38+
}

‎src/app/pages/resources-api/dragon-ball/dragon-ball-list/dragon-ball-cards/dragon-ball-cards.component.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@if (items()) {
2+
@for (item of items(); track item.id) {
3+
<app-dragon-ball-card [item]="item" />
4+
} @empty {
5+
<p class="po-font-text-bold">Nenhum dado encontrado</p>
6+
}
7+
}

‎src/app/pages/resources-api/dragon-ball/dragon-ball-list/dragon-ball-cards/dragon-ball-cards.component.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Component, input } from '@angular/core';
2+
3+
import { Character } from '../../shared/interfaces/character';
4+
import { DragonBallCardComponent } from './dragon-ball-card/dragon-ball-card.component';
5+
6+
@Component({
7+
selector: 'app-dragon-ball-cards',
8+
imports: [DragonBallCardComponent],
9+
templateUrl: './dragon-ball-cards.component.html'
10+
})
11+
export class DragonBallCardsComponent {
12+
readonly items = input.required<Character[]>();
13+
readonly isLoading = input<boolean>(false);
14+
}

‎src/app/pages/resources-api/dragon-ball/dragon-ball-list/dragon-ball-table/dragon-ball-table.component.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@if (items()) {
2+
<po-table
3+
[p-items]="items()"
4+
[p-loading]="isLoading()"
5+
[p-height]="height"
6+
[p-columns]="columns"
7+
[p-draggable]="true"
8+
[p-sort]="true"
9+
p-container="shadow"
10+
[p-hide-columns-manager]="true"
11+
/>
12+
}

‎src/app/pages/resources-api/dragon-ball/dragon-ball-list/dragon-ball-table/dragon-ball-table.component.ts‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import { AfterViewInit, Component, input } from '@angular/core';
2+
import { Character } from '../../shared/interfaces/character';
3+
import { PoTableColumn, PoTableModule } from '@po-ui/ng-components';
4+
import { BaseTableComponent } from '../../../../../shared/components/base/base-table.component';
5+
6+
@Component({
7+
selector: 'app-dragon-ball-table',
8+
imports: [PoTableModule],
9+
templateUrl: './dragon-ball-table.component.html'
10+
})
11+
export class DragonBallTableComponent extends BaseTableComponent implements AfterViewInit {
12+
readonly items = input.required<Character[]>();
13+
readonly isLoading = input<boolean>(false);
14+
15+
protected readonly columns: PoTableColumn[] = this.getColumns();
16+
17+
constructor() {
18+
const elements = ['.po-page-header', '.po-table-actions', '.app-search', '.footer'];
19+
super(400, elements);
20+
}
21+
22+
ngAfterViewInit(): void {
23+
this.onResize();
24+
}
25+
26+
getColumns(): PoTableColumn[] {
27+
return [
28+
{
29+
property: 'id',
30+
label: 'Id',
31+
sortable: true,
32+
type: 'number'
33+
},
34+
{
35+
property: 'name',
36+
label: 'Nome',
37+
sortable: true,
38+
type: 'string'
39+
},
40+
{
41+
property: 'race',
42+
label: 'Raça',
43+
sortable: true,
44+
type: 'string',
45+
visible: this.IsColumnVisible()
46+
},
47+
{
48+
property: 'gender',
49+
label: 'Gênero',
50+
sortable: true,
51+
type: 'label',
52+
visible: this.IsColumnVisible(),
53+
labels: [
54+
{
55+
value: 'Female',
56+
color: 'color-06',
57+
label: 'Feminino'
58+
},
59+
{
60+
value: 'Male',
61+
color: 'color-02',
62+
label: 'Masculino'
63+
},
64+
{
65+
value: 'Genderless',
66+
color: 'color-08',
67+
label: 'Sem gênero'
68+
},
69+
{
70+
value: 'unknown',
71+
color: 'color-07',
72+
label: 'Desconhecido'
73+
}
74+
]
75+
},
76+
{
77+
property: 'ki',
78+
label: 'KI',
79+
sortable: true,
80+
type: 'string',
81+
visible: this.IsColumnVisible()
82+
},
83+
{
84+
property: 'maxKi',
85+
label: 'KI Máximo',
86+
sortable: true,
87+
type: 'string',
88+
visible: this.IsColumnVisible()
89+
},
90+
{
91+
property: 'affiliation',
92+
label: 'Afiliação',
93+
sortable: true,
94+
type: 'string',
95+
visible: this.IsColumnVisible()
96+
}
97+
];
98+
}
99+
100+
private IsColumnVisible(): boolean {
101+
return window.innerWidth > 480;
102+
}
103+
}

‎src/app/pages/resources-api/dragon-ball/dragon-ball.routes.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Routes } from '@angular/router';
2+
3+
export const DBZ_ROUTES: Routes = [
4+
{
5+
path: '',
6+
title: 'Dragon Ball | Lista de personagens',
7+
loadComponent: () => import('./dragon-ball-list/dragon-ball-list.component').then(c => c.DragonBallListComponent)
8+
}
9+
];

0 commit comments

Comments
 (0)