Skip to content

integração com serviço on line #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aledguedes merged 1 commit into from
Jun 21, 2024
Merged

integração com serviço on line #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/app/pages/categories/components/category-edit/category-edit.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="w-9 m-auto">
<div class="w-full md:w-9 m-auto py-1 px-3">
<p-card>
<h5 class="text-center text-4xl text-color-secondary text-900 mt-2"> {{ title_component }} </h5>
<app-category-form />
Expand Down
6 changes: 5 additions & 1 deletion src/app/pages/categories/components/category-edit/category-edit.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
});
}

}
45 changes: 38 additions & 7 deletions src/app/pages/categories/components/category-form/category-form.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@if (loading) {
<div class="grid px-3">
<div class="col-12 lg:col-6 md:col-6 lg:w-6 md:w-full sm:w-full">
<form [formGroup]="categoryForm">
Expand All @@ -12,20 +13,21 @@
<div class="d-flex justify-content-center w-full align-items-center">
<div class="flex flex-column gap-2">
<label for="categorySlug">Status</label>
<p-dropdown [style]="{'width':'100%'}" [options]="status" [(ngModel)]="selectedStatus" optionLabel="name" dataKey="name" placeholder="Status" />
<p-dropdown [style]="{'width':'100%'}" [options]="status" [(ngModel)]="selectedStatus"
optionLabel="name" dataKey="name" placeholder="Status" />
</div>
</div>
</div>

<div class="col-12">
<!-- <div class="col-12">
<div class="d-flex justify-content-center w-full align-items-center">
<div class="flex flex-column gap-2">
<div class="box-upload">
EDITOR DE TEXTO
</div>
</div>
</div>
</div>
</div> -->

<div class="col-12">
<div class="d-flex justify-content-center w-full align-items-center">
Expand All @@ -36,7 +38,36 @@
</div>
</div>

<div class="flex justify-content-end gap-3 mt-1 px-3">
<p-button label="Cancelar" severity="secondary" [routerLink]="['/dashboard/categories']" />
<p-button icon="pi pi-save" label="Salvar" />
</div>
<div class="flex gap-3 mt-1 px-3">
<p-button label="Cancelar" severity="secondary" [routerLink]="['/dashboard/categories']" class="w-full" styleClass="w-full" />
<p-button icon="pi pi-save" label="Salvar" class="w-full" styleClass="w-full" />
</div>
} @else {
<div class="grid px-3">
<div class="col-12 lg:col-6 md:col-6 lg:w-6 md:w-full sm:w-full">
<div class="flex flex-column gap-2">
<p-skeleton width="10rem" styleClass="m-0" />
<p-skeleton height="2rem" styleClass="mb-2" />
</div>
</div>
<div class="col-12 lg:col-6 md:col-6 h-100 lg:w-6 md:w-full sm:w-full">
<div class="d-flex justify-content-center w-full align-items-center">
<div class="flex flex-column gap-2">
<p-skeleton width="10rem" styleClass="m-0" />
<p-skeleton height="2rem" styleClass="mb-2" />
</div>
</div>
</div>

<div class="col-12">
<div class="d-flex justify-content-center w-full align-items-center">
<p-skeleton width="100%" height="160px" />
</div>
</div>
</div>

<div class="flex gap-3 mt-1 px-3">
<p-skeleton height="2rem" styleClass="mb-2 w-full" />
<p-skeleton height="2rem" styleClass="mb-2 w-full" />
</div>
}
8 changes: 7 additions & 1 deletion src/app/pages/categories/components/category-form/category-form.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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'
Expand Down Expand Up @@ -49,6 +51,10 @@ export class CategoryFormComponent implements OnInit {
}
});

setTimeout(() => {
this.loading = true;
}, 3000);

this.initForm();
this.getAllStatus();
}
Expand Down
2 changes: 1 addition & 1 deletion src/app/pages/categories/components/category-list/category-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="grid nested-grid mt-2 mb-3">
<div class="grid nested-grid mt-2 mb-3 px-3">
<div class="col-12 lg:col-7 md:col-12 sm:col-12">
<app-breadcrumb [items]="breadcrumb" />
</div>
Expand Down
71 changes: 52 additions & 19 deletions src/app/pages/dashboard/dash-content/dash-content.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,56 @@
<div class="flex justify-content-center mt-3">
<div class="container w-11">
<div class="widgets p-3">
<div class="widget total-vendas shadow-3">
<div class="widget-content">
<i class="widget-icon ri-money-dollar-circle-line"></i>
<div class="widget-info" style="color: #f5b041;">
<h3 class="widget-title">Total de Vendas</h3>
<p class="widget-value text-right">250</p>
</div>
</div>
</div>
<div class="widget numero-pedidos shadow-3">
<div class="widget-content">
<i class="widget-icon ri-shopping-cart-line"></i>
<div class="widget-info" style="color: #5cb85c;">
<h3 class="widget-title">Número de Pedidos</h3>
<p class="widget-value text-right">150</p>
</div>
</div>
</div>
<div class="widget produtos-estoque shadow-3">
<div class="widget-content">
<i class="widget-icon ri-archive-line"></i>
<div class="widget-info" style="color: #06b0e4;">
<h3 class="widget-title">Produtos em Estoque</h3>
<p class="widget-value text-right">300</p>
</div>
</div>
</div>
<div class="widget clientes-registrados shadow-3">
<div class="widget-content">
<i class="widget-icon ri-user-line"></i>
<div class="widget-info" style="color: #f0ad4e;">
<h3 class="widget-title">Clientes Registrados</h3>
<p class="widget-value text-right">500</p>
</div>
</div>
</div>
</div>

<div class="flex justify-content-center px-3">
<div class="container w-full">
<div class="order">
<p-card header="Simple Card" styleClass="h-auto lg:h-full md:h-full">
<p>
Lorem ipsum dolor sit amet...
</p>
<p-divider />
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
</p>
<p-divider />
<p>
At vero eos et accusamus et iusto odio dignissimos...
</p>
<p-divider />
<p>
Temporibus autem quibusdam et aut officiis...
</p>
<p-divider />
<p-card header="Pedidos" styleClass="h-auto lg:h-full md:h-full px-3">
@for (item of orders; track $index) {
<div class="flex justify-content-between">
<p>{{ '#' + item.order_id }}</p>
<p>{{ item.user_id }}</p>
<p>{{ item.items[0].product_id }}</p>
<p>{{ item.items[0].quantity }}</p>
<p>{{ item.status }}</p>
</div>
<p-divider />
}
</p-card>
</div>
<div class="mini-cards" styleClass="h-full">
Expand Down
90 changes: 90 additions & 0 deletions src/app/pages/dashboard/dash-content/dash-content.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
6 changes: 6 additions & 0 deletions src/app/pages/dashboard/dash-content/dash-content.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" }
]

}
32 changes: 21 additions & 11 deletions src/app/pages/products/components/product-list/product-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,36 @@ <h2 class="m-0 text-bold-700 my-3">Products</h2>
<div class="col-12 lg:col-9 md:col-8 sm:col-12">
<app-breadcrumb [items]="breadcrumb" />
</div>
<div class="col-12 lg:col-3 md:col-4 sm:col-12 md:text-right sm:text-center px-3">
<div class="col-12 lg:col-3 md:col-4 sm:col-12 md:text-right sm:text-center">
<p-button label="Adicionar produto" severity="secondary" styleClass="w-full" [routerLink]="['edit']"
[queryParams]="{ action: 'create' }" />
</div>
</div>
<div class="flex align-items-center justify-content-end shadow-3" [style]="{'background': '#FFF', 'font-size': '13px'}">
<span class="mx-1 text-color">Itens por página: </span>
<p-dropdown [options]="options" optionLabel="label" optionValue="value" (onChange)="dropChange($event)" [(ngModel)]="rows" (ngModelChange)="first = 0" />
<p-paginator [first]="first" [rows]="rows" [totalRecords]="totalRecords" (onPageChange)="onPageChange($event)" [showCurrentPageReport]="true"
currentPageReportTemplate="{first} - {last} de {totalRecords}" [showPageLinks]="false" [showFirstLastIcon]="false" ></p-paginator>
<div class="flex align-items-center sm:justify-content-end justify-content-between shadow-3 py-3 px-1"
[style]="{'background': '#FFF', 'font-size': '13px'}">
<div class="flex lg:flex-row md:flex-row sm:flex-row flex-column align-items-center">
<span class="mx-1 text-color mb-2">Itens por página: </span>
<p-dropdown [options]="options" optionLabel="label" optionValue="value" (onChange)="dropChange($event)"
[(ngModel)]="rows" (ngModelChange)="first = 0" />
</div>
<p-paginator [first]="first" [rows]="rows" [totalRecords]="totalRecords" (onPageChange)="onPageChange($event)"
[showCurrentPageReport]="true" currentPageReportTemplate="{first} - {last} de {totalRecords}"
[showPageLinks]="false" [showFirstLastIcon]="false"></p-paginator>
</div>
<div class="grid-products mt-3">
@for (product of products; track product.id) {
<app-thumbnail-products [products]="product" />
}
</div>
<div class="flex align-items-center justify-content-end shadow-3 my-3" [style]="{'background': '#FFF', 'font-size': '13px'}">
<span class="mx-1 text-color">Itens por página: </span>
<p-dropdown [options]="options" optionLabel="label" optionValue="value" (onChange)="dropChange($event)" [(ngModel)]="rows" (ngModelChange)="first = 0" />
<p-paginator [first]="first" [rows]="rows" [totalRecords]="totalRecords" (onPageChange)="onPageChange($event)" [showCurrentPageReport]="true"
currentPageReportTemplate="{first} - {last} de {totalRecords}" [showPageLinks]="false" [showFirstLastIcon]="false" ></p-paginator>
<div class="flex align-items-center justify-content-end shadow-3 py-3 px-1"
[style]="{'background': '#FFF', 'font-size': '13px'}">
<div class="flex flex-column align-items-center">
<span class="mx-1 text-color mb-2">Itens por página: </span>
<p-dropdown [options]="options" optionLabel="label" optionValue="value" (onChange)="dropChange($event)"
[(ngModel)]="rows" (ngModelChange)="first = 0" />
</div>
<p-paginator [first]="first" [rows]="rows" [totalRecords]="totalRecords" (onPageChange)="onPageChange($event)"
[showCurrentPageReport]="true" currentPageReportTemplate="{first} - {last} de {totalRecords}"
[showPageLinks]="false" [showFirstLastIcon]="false"></p-paginator>
</div>
</div>