diff --git a/src/app/pages/categories/components/category-edit/category-edit.component.html b/src/app/pages/categories/components/category-edit/category-edit.component.html index fe9fd0b..65d1873 100644 --- a/src/app/pages/categories/components/category-edit/category-edit.component.html +++ b/src/app/pages/categories/components/category-edit/category-edit.component.html @@ -1,4 +1,4 @@ -
+
{{ title_component }}
diff --git a/src/app/pages/categories/components/category-edit/category-edit.component.ts b/src/app/pages/categories/components/category-edit/category-edit.component.ts index ef9848a..e11fbc6 100644 --- a/src/app/pages/categories/components/category-edit/category-edit.component.ts +++ b/src/app/pages/categories/components/category-edit/category-edit.component.ts @@ -21,12 +21,16 @@ import { ActivatedRoute } from '@angular/router'; export class CategoryEditComponent implements OnInit { errorFielfd: boolean = true; - title_component: string = "Adicionar nova categoria"; + title_component: string = "Adicionar categoria"; constructor( + private actvRoute: ActivatedRoute, ) { } ngOnInit(): void { + this.actvRoute.queryParams.subscribe((p: any) => { + this.title_component = p['action'] == 'create' ? "Adicionar categoria" : "Editar categoria"; + }); } } diff --git a/src/app/pages/categories/components/category-form/category-form.component.html b/src/app/pages/categories/components/category-form/category-form.component.html index 3244b8c..f487d34 100644 --- a/src/app/pages/categories/components/category-form/category-form.component.html +++ b/src/app/pages/categories/components/category-form/category-form.component.html @@ -1,3 +1,4 @@ +@if (loading) {
@@ -12,12 +13,13 @@
- +
-
+
@@ -36,7 +38,36 @@
-
- - -
\ No newline at end of file +
+ + +
+} @else { +
+
+
+ + +
+
+
+
+
+ + +
+
+
+ +
+
+ +
+
+
+ +
+ + +
+} \ No newline at end of file diff --git a/src/app/pages/categories/components/category-form/category-form.component.ts b/src/app/pages/categories/components/category-form/category-form.component.ts index a7a9c38..48c8d96 100644 --- a/src/app/pages/categories/components/category-form/category-form.component.ts +++ b/src/app/pages/categories/components/category-form/category-form.component.ts @@ -9,6 +9,7 @@ import { StatusService } from '../../../../services/status/status.service'; import { Status } from '../../../../models/Status.model'; import { DropdownModule } from 'primeng/dropdown'; import { ProgressSpinnerModule } from 'primeng/progressspinner'; +import { SkeletonModule } from 'primeng/skeleton'; @Component({ selector: 'app-category-form', @@ -20,7 +21,8 @@ import { ProgressSpinnerModule } from 'primeng/progressspinner'; DropdownModule, FormsModule, ProgressSpinnerModule, - RouterLink + RouterLink, + SkeletonModule ], templateUrl: './category-form.component.html', styleUrl: './category-form.component.scss' @@ -49,6 +51,10 @@ export class CategoryFormComponent implements OnInit { } }); + setTimeout(() => { + this.loading = true; + }, 3000); + this.initForm(); this.getAllStatus(); } diff --git a/src/app/pages/categories/components/category-list/category-list.component.html b/src/app/pages/categories/components/category-list/category-list.component.html index 51f761f..8749b55 100644 --- a/src/app/pages/categories/components/category-list/category-list.component.html +++ b/src/app/pages/categories/components/category-list/category-list.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/pages/dashboard/dash-content/dash-content.component.html b/src/app/pages/dashboard/dash-content/dash-content.component.html index 9ec67b7..c5fa5e0 100644 --- a/src/app/pages/dashboard/dash-content/dash-content.component.html +++ b/src/app/pages/dashboard/dash-content/dash-content.component.html @@ -1,23 +1,56 @@ -
-
+
+
+
+ +
+

Total de Vendas

+

250

+
+
+
+
+
+ +
+

Número de Pedidos

+

150

+
+
+
+
+
+ +
+

Produtos em Estoque

+

300

+
+
+
+
+
+ +
+

Clientes Registrados

+

500

+
+
+
+
+ +
+
- -

- Lorem ipsum dolor sit amet... -

- -

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium... -

- -

- At vero eos et accusamus et iusto odio dignissimos... -

- -

- Temporibus autem quibusdam et aut officiis... -

- + + @for (item of orders; track $index) { +
+

{{ '#' + item.order_id }}

+

{{ item.user_id }}

+

{{ item.items[0].product_id }}

+

{{ item.items[0].quantity }}

+

{{ item.status }}

+
+ + }
diff --git a/src/app/pages/dashboard/dash-content/dash-content.component.scss b/src/app/pages/dashboard/dash-content/dash-content.component.scss index 681e9fa..a675190 100644 --- a/src/app/pages/dashboard/dash-content/dash-content.component.scss +++ b/src/app/pages/dashboard/dash-content/dash-content.component.scss @@ -20,6 +20,96 @@ justify-content: space-between; } + +.widgets { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); + gap: 20px; +} + +.widget { + padding: 15px; + border-radius: 8px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + color: #333; +} + +.widget-content { + display: flex; + align-items: center; + justify-content: space-between; + text-align: center; +} + +.widget-icon { + font-size: 3.5rem; + margin-right: 10px; + vertical-align: middle; +} + +.widget-info { + text-align: left; + padding: 16px; +} + +.widget-title { + font-size: 1rem; + margin: 0; +} + +.widget-value { + font-size: 1.5rem; + font-weight: bold; + margin-top: 5px; + margin-bottom: 5px; +} + +.chart-container { + padding: 20px; + background-color: #f0f0f0; + border-radius: 10px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); +} + +/* Estilos específicos para cada widget */ +.widget.total-vendas { + background-color: #fdebd0; +} + +.widget.total-vendas .widget-icon { + color: #f5b041; +} + +.widget.numero-pedidos { + background-color: #dff0d8; +} + +.widget.numero-pedidos .widget-icon { + color: #5cb85c; +} + +.widget.produtos-estoque { + background-color: #d9edf7; +} + +.widget.produtos-estoque .widget-icon { + color: #06b0e4; +} + +.widget.clientes-registrados { + background-color: #fcf8e3; +} + +.widget.clientes-registrados .widget-icon { + color: #f0ad4e; +} + .container { grid-template-areas: 'order mini-cards'; diff --git a/src/app/pages/dashboard/dash-content/dash-content.component.ts b/src/app/pages/dashboard/dash-content/dash-content.component.ts index 706b2d1..f15150c 100644 --- a/src/app/pages/dashboard/dash-content/dash-content.component.ts +++ b/src/app/pages/dashboard/dash-content/dash-content.component.ts @@ -27,6 +27,12 @@ export class DashContentComponent { title: "Simple Card 3", info: "Lorem ipsum dolor sit amet 3333..." } + ]; + + orders = [ + { "order_id": 1, "user_id": "Emily", "items": [{ "product_id": "Produto 01", "quantity": 2 }, { "product_id": 3, "quantity": 1 }], "total_price": 849.97, "status": "Shipped" }, + { "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" }, + { "order_id": 3, "user_id": "Djoor", "items": [{ "product_id": "Produto 04", "quantity": 1 }, { "product_id": 8, "quantity": 1 }], "total_price": 599.98, "status": "Processing" } ] } diff --git a/src/app/pages/products/components/product-list/product-list.component.html b/src/app/pages/products/components/product-list/product-list.component.html index 96180e8..33357b9 100644 --- a/src/app/pages/products/components/product-list/product-list.component.html +++ b/src/app/pages/products/components/product-list/product-list.component.html @@ -4,26 +4,36 @@

Products

-
+
-
- Itens por página: - - +
+
+ Itens por página: + +
+
@for (product of products; track product.id) { }
-
- Itens por página: - - +
+
+ Itens por página: + +
+
\ No newline at end of file