Skip to content

Commit 2aa0f7c

Browse files
aledguedesaledguedes
committed
integração com serviço on line
1 parent 9398744 commit 2aa0f7c

9 files changed

Lines changed: 221 additions & 41 deletions

File tree

‎src/app/pages/categories/components/category-edit/category-edit.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="w-9 m-auto">
1+
<div class="w-full md:w-9 m-auto py-1 px-3">
22
<p-card>
33
<h5 class="text-center text-4xl text-color-secondary text-900 mt-2"> {{ title_component }} </h5>
44
<app-category-form />

‎src/app/pages/categories/components/category-edit/category-edit.component.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,16 @@ import { ActivatedRoute } from '@angular/router';
2121
export class CategoryEditComponent implements OnInit {
2222

2323
errorFielfd: boolean = true;
24-
title_component: string = "Adicionar nova categoria";
24+
title_component: string = "Adicionar categoria";
2525

2626
constructor(
27+
private actvRoute: ActivatedRoute,
2728
) { }
2829

2930
ngOnInit(): void {
31+
this.actvRoute.queryParams.subscribe((p: any) => {
32+
this.title_component = p['action'] == 'create' ? "Adicionar categoria" : "Editar categoria";
33+
});
3034
}
3135

3236
}

‎src/app/pages/categories/components/category-form/category-form.component.html‎

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@if (loading) {
12
<div class="grid px-3">
23
<div class="col-12 lg:col-6 md:col-6 lg:w-6 md:w-full sm:w-full">
34
<form [formGroup]="categoryForm">
@@ -12,20 +13,21 @@
1213
<div class="d-flex justify-content-center w-full align-items-center">
1314
<div class="flex flex-column gap-2">
1415
<label for="categorySlug">Status</label>
15-
<p-dropdown [style]="{'width':'100%'}" [options]="status" [(ngModel)]="selectedStatus" optionLabel="name" dataKey="name" placeholder="Status" />
16+
<p-dropdown [style]="{'width':'100%'}" [options]="status" [(ngModel)]="selectedStatus"
17+
optionLabel="name" dataKey="name" placeholder="Status" />
1618
</div>
1719
</div>
1820
</div>
1921

20-
<div class="col-12">
22+
<!-- <div class="col-12">
2123
<div class="d-flex justify-content-center w-full align-items-center">
2224
<div class="flex flex-column gap-2">
2325
<div class="box-upload">
2426
EDITOR DE TEXTO
2527
</div>
2628
</div>
2729
</div>
28-
</div>
30+
</div> -->
2931

3032
<div class="col-12">
3133
<div class="d-flex justify-content-center w-full align-items-center">
@@ -36,7 +38,36 @@
3638
</div>
3739
</div>
3840

39-
<div class="flex justify-content-end gap-3 mt-1 px-3">
40-
<p-button label="Cancelar" severity="secondary" [routerLink]="['/dashboard/categories']" />
41-
<p-button icon="pi pi-save" label="Salvar" />
42-
</div>
41+
<div class="flex gap-3 mt-1 px-3">
42+
<p-button label="Cancelar" severity="secondary" [routerLink]="['/dashboard/categories']" class="w-full" styleClass="w-full" />
43+
<p-button icon="pi pi-save" label="Salvar" class="w-full" styleClass="w-full" />
44+
</div>
45+
} @else {
46+
<div class="grid px-3">
47+
<div class="col-12 lg:col-6 md:col-6 lg:w-6 md:w-full sm:w-full">
48+
<div class="flex flex-column gap-2">
49+
<p-skeleton width="10rem" styleClass="m-0" />
50+
<p-skeleton height="2rem" styleClass="mb-2" />
51+
</div>
52+
</div>
53+
<div class="col-12 lg:col-6 md:col-6 h-100 lg:w-6 md:w-full sm:w-full">
54+
<div class="d-flex justify-content-center w-full align-items-center">
55+
<div class="flex flex-column gap-2">
56+
<p-skeleton width="10rem" styleClass="m-0" />
57+
<p-skeleton height="2rem" styleClass="mb-2" />
58+
</div>
59+
</div>
60+
</div>
61+
62+
<div class="col-12">
63+
<div class="d-flex justify-content-center w-full align-items-center">
64+
<p-skeleton width="100%" height="160px" />
65+
</div>
66+
</div>
67+
</div>
68+
69+
<div class="flex gap-3 mt-1 px-3">
70+
<p-skeleton height="2rem" styleClass="mb-2 w-full" />
71+
<p-skeleton height="2rem" styleClass="mb-2 w-full" />
72+
</div>
73+
}

‎src/app/pages/categories/components/category-form/category-form.component.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { StatusService } from '../../../../services/status/status.service';
99
import { Status } from '../../../../models/Status.model';
1010
import { DropdownModule } from 'primeng/dropdown';
1111
import { ProgressSpinnerModule } from 'primeng/progressspinner';
12+
import { SkeletonModule } from 'primeng/skeleton';
1213

1314
@Component({
1415
selector: 'app-category-form',
@@ -20,7 +21,8 @@ import { ProgressSpinnerModule } from 'primeng/progressspinner';
2021
DropdownModule,
2122
FormsModule,
2223
ProgressSpinnerModule,
23-
RouterLink
24+
RouterLink,
25+
SkeletonModule
2426
],
2527
templateUrl: './category-form.component.html',
2628
styleUrl: './category-form.component.scss'
@@ -49,6 +51,10 @@ export class CategoryFormComponent implements OnInit {
4951
}
5052
});
5153

54+
setTimeout(() => {
55+
this.loading = true;
56+
}, 3000);
57+
5258
this.initForm();
5359
this.getAllStatus();
5460
}

‎src/app/pages/categories/components/category-list/category-list.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="grid nested-grid mt-2 mb-3">
1+
<div class="grid nested-grid mt-2 mb-3 px-3">
22
<div class="col-12 lg:col-7 md:col-12 sm:col-12">
33
<app-breadcrumb [items]="breadcrumb" />
44
</div>

‎src/app/pages/dashboard/dash-content/dash-content.component.html‎

Lines changed: 52 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,56 @@
1-
<div class="flex justify-content-center mt-3">
2-
<div class="container w-11">
1+
<div class="widgets p-3">
2+
<div class="widget total-vendas shadow-3">
3+
<div class="widget-content">
4+
<i class="widget-icon ri-money-dollar-circle-line"></i>
5+
<div class="widget-info" style="color: #f5b041;">
6+
<h3 class="widget-title">Total de Vendas</h3>
7+
<p class="widget-value text-right">250</p>
8+
</div>
9+
</div>
10+
</div>
11+
<div class="widget numero-pedidos shadow-3">
12+
<div class="widget-content">
13+
<i class="widget-icon ri-shopping-cart-line"></i>
14+
<div class="widget-info" style="color: #5cb85c;">
15+
<h3 class="widget-title">Número de Pedidos</h3>
16+
<p class="widget-value text-right">150</p>
17+
</div>
18+
</div>
19+
</div>
20+
<div class="widget produtos-estoque shadow-3">
21+
<div class="widget-content">
22+
<i class="widget-icon ri-archive-line"></i>
23+
<div class="widget-info" style="color: #06b0e4;">
24+
<h3 class="widget-title">Produtos em Estoque</h3>
25+
<p class="widget-value text-right">300</p>
26+
</div>
27+
</div>
28+
</div>
29+
<div class="widget clientes-registrados shadow-3">
30+
<div class="widget-content">
31+
<i class="widget-icon ri-user-line"></i>
32+
<div class="widget-info" style="color: #f0ad4e;">
33+
<h3 class="widget-title">Clientes Registrados</h3>
34+
<p class="widget-value text-right">500</p>
35+
</div>
36+
</div>
37+
</div>
38+
</div>
39+
40+
<div class="flex justify-content-center px-3">
41+
<div class="container w-full">
342
<div class="order">
4-
<p-card header="Simple Card" styleClass="h-auto lg:h-full md:h-full">
5-
<p>
6-
Lorem ipsum dolor sit amet...
7-
</p>
8-
<p-divider />
9-
<p>
10-
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
11-
</p>
12-
<p-divider />
13-
<p>
14-
At vero eos et accusamus et iusto odio dignissimos...
15-
</p>
16-
<p-divider />
17-
<p>
18-
Temporibus autem quibusdam et aut officiis...
19-
</p>
20-
<p-divider />
43+
<p-card header="Pedidos" styleClass="h-auto lg:h-full md:h-full px-3">
44+
@for (item of orders; track $index) {
45+
<div class="flex justify-content-between">
46+
<p>{{ '#' + item.order_id }}</p>
47+
<p>{{ item.user_id }}</p>
48+
<p>{{ item.items[0].product_id }}</p>
49+
<p>{{ item.items[0].quantity }}</p>
50+
<p>{{ item.status }}</p>
51+
</div>
52+
<p-divider />
53+
}
2154
</p-card>
2255
</div>
2356
<div class="mini-cards" styleClass="h-full">

‎src/app/pages/dashboard/dash-content/dash-content.component.scss‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,96 @@
2020
justify-content: space-between;
2121
}
2222

23+
24+
.widgets {
25+
display: grid;
26+
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
27+
gap: 20px;
28+
}
29+
30+
.widget {
31+
padding: 15px;
32+
border-radius: 8px;
33+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
34+
transition: transform 0.3s ease;
35+
display: flex;
36+
flex-direction: column;
37+
justify-content: center;
38+
align-items: center;
39+
text-align: center;
40+
color: #333;
41+
}
42+
43+
.widget-content {
44+
display: flex;
45+
align-items: center;
46+
justify-content: space-between;
47+
text-align: center;
48+
}
49+
50+
.widget-icon {
51+
font-size: 3.5rem;
52+
margin-right: 10px;
53+
vertical-align: middle;
54+
}
55+
56+
.widget-info {
57+
text-align: left;
58+
padding: 16px;
59+
}
60+
61+
.widget-title {
62+
font-size: 1rem;
63+
margin: 0;
64+
}
65+
66+
.widget-value {
67+
font-size: 1.5rem;
68+
font-weight: bold;
69+
margin-top: 5px;
70+
margin-bottom: 5px;
71+
}
72+
73+
.chart-container {
74+
padding: 20px;
75+
background-color: #f0f0f0;
76+
border-radius: 10px;
77+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
78+
}
79+
80+
/* Estilos específicos para cada widget */
81+
.widget.total-vendas {
82+
background-color: #fdebd0;
83+
}
84+
85+
.widget.total-vendas .widget-icon {
86+
color: #f5b041;
87+
}
88+
89+
.widget.numero-pedidos {
90+
background-color: #dff0d8;
91+
}
92+
93+
.widget.numero-pedidos .widget-icon {
94+
color: #5cb85c;
95+
}
96+
97+
.widget.produtos-estoque {
98+
background-color: #d9edf7;
99+
}
100+
101+
.widget.produtos-estoque .widget-icon {
102+
color: #06b0e4;
103+
}
104+
105+
.widget.clientes-registrados {
106+
background-color: #fcf8e3;
107+
}
108+
109+
.widget.clientes-registrados .widget-icon {
110+
color: #f0ad4e;
111+
}
112+
23113
.container {
24114
grid-template-areas:
25115
'order mini-cards';

‎src/app/pages/dashboard/dash-content/dash-content.component.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,12 @@ export class DashContentComponent {
2727
title: "Simple Card 3",
2828
info: "Lorem ipsum dolor sit amet 3333..."
2929
}
30+
];
31+
32+
orders = [
33+
{ "order_id": 1, "user_id": "Emily", "items": [{ "product_id": "Produto 01", "quantity": 2 }, { "product_id": 3, "quantity": 1 }], "total_price": 849.97, "status": "Shipped" },
34+
{ "order_id": 2, "user_id": "João", "items": [{ "product_id": "Produto 02", "quantity": 1 }, { "product_id": 7, "quantity": 1 }], "total_price": 1149.98, "status": "Delivered" },
35+
{ "order_id": 3, "user_id": "Djoor", "items": [{ "product_id": "Produto 04", "quantity": 1 }, { "product_id": 8, "quantity": 1 }], "total_price": 599.98, "status": "Processing" }
3036
]
3137

3238
}

‎src/app/pages/products/components/product-list/product-list.component.html‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,36 @@ <h2 class="m-0 text-bold-700 my-3">Products</h2>
44
<div class="col-12 lg:col-9 md:col-8 sm:col-12">
55
<app-breadcrumb [items]="breadcrumb" />
66
</div>
7-
<div class="col-12 lg:col-3 md:col-4 sm:col-12 md:text-right sm:text-center px-3">
7+
<div class="col-12 lg:col-3 md:col-4 sm:col-12 md:text-right sm:text-center">
88
<p-button label="Adicionar produto" severity="secondary" styleClass="w-full" [routerLink]="['edit']"
99
[queryParams]="{ action: 'create' }" />
1010
</div>
1111
</div>
12-
<div class="flex align-items-center justify-content-end shadow-3" [style]="{'background': '#FFF', 'font-size': '13px'}">
13-
<span class="mx-1 text-color">Itens por página: </span>
14-
<p-dropdown [options]="options" optionLabel="label" optionValue="value" (onChange)="dropChange($event)" [(ngModel)]="rows" (ngModelChange)="first = 0" />
15-
<p-paginator [first]="first" [rows]="rows" [totalRecords]="totalRecords" (onPageChange)="onPageChange($event)" [showCurrentPageReport]="true"
16-
currentPageReportTemplate="{first} - {last} de {totalRecords}" [showPageLinks]="false" [showFirstLastIcon]="false" ></p-paginator>
12+
<div class="flex align-items-center sm:justify-content-end justify-content-between shadow-3 py-3 px-1"
13+
[style]="{'background': '#FFF', 'font-size': '13px'}">
14+
<div class="flex lg:flex-row md:flex-row sm:flex-row flex-column align-items-center">
15+
<span class="mx-1 text-color mb-2">Itens por página: </span>
16+
<p-dropdown [options]="options" optionLabel="label" optionValue="value" (onChange)="dropChange($event)"
17+
[(ngModel)]="rows" (ngModelChange)="first = 0" />
18+
</div>
19+
<p-paginator [first]="first" [rows]="rows" [totalRecords]="totalRecords" (onPageChange)="onPageChange($event)"
20+
[showCurrentPageReport]="true" currentPageReportTemplate="{first} - {last} de {totalRecords}"
21+
[showPageLinks]="false" [showFirstLastIcon]="false"></p-paginator>
1722
</div>
1823
<div class="grid-products mt-3">
1924
@for (product of products; track product.id) {
2025
<app-thumbnail-products [products]="product" />
2126
}
2227
</div>
23-
<div class="flex align-items-center justify-content-end shadow-3 my-3" [style]="{'background': '#FFF', 'font-size': '13px'}">
24-
<span class="mx-1 text-color">Itens por página: </span>
25-
<p-dropdown [options]="options" optionLabel="label" optionValue="value" (onChange)="dropChange($event)" [(ngModel)]="rows" (ngModelChange)="first = 0" />
26-
<p-paginator [first]="first" [rows]="rows" [totalRecords]="totalRecords" (onPageChange)="onPageChange($event)" [showCurrentPageReport]="true"
27-
currentPageReportTemplate="{first} - {last} de {totalRecords}" [showPageLinks]="false" [showFirstLastIcon]="false" ></p-paginator>
28+
<div class="flex align-items-center justify-content-end shadow-3 py-3 px-1"
29+
[style]="{'background': '#FFF', 'font-size': '13px'}">
30+
<div class="flex flex-column align-items-center">
31+
<span class="mx-1 text-color mb-2">Itens por página: </span>
32+
<p-dropdown [options]="options" optionLabel="label" optionValue="value" (onChange)="dropChange($event)"
33+
[(ngModel)]="rows" (ngModelChange)="first = 0" />
34+
</div>
35+
<p-paginator [first]="first" [rows]="rows" [totalRecords]="totalRecords" (onPageChange)="onPageChange($event)"
36+
[showCurrentPageReport]="true" currentPageReportTemplate="{first} - {last} de {totalRecords}"
37+
[showPageLinks]="false" [showFirstLastIcon]="false"></p-paginator>
2838
</div>
2939
</div>

0 commit comments

Comments
 (0)