-
-
-
-
Total de Vendas
- +
+
-
-
-
-
-
-
-
-
-
-
-
-
-
- graph
-
-
-
-Recent Orders
+
+
-
+
Pedidos recentes
+
-
-
-
+ Melhores Produtos
-
+
-
-
-
- Order ID
-
-
- Cliente
-
-
- Produto
-
-
- Valor
-
-
- Vendedor
-
-
- Status
-
-
-
-
-
- {{ order.order_id }}
-
-
- {{ order.product }}
- {{ order.amount }}
- {{ order.vendor }}
- {{ order.status }}
-
-
-
\ No newline at end of file
+;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [OrderListComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(OrderListComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/pages/order/components/order-list/order-list.component.ts b/src/app/pages/order/components/order-list/order-list.component.ts
new file mode 100644
index 0000000..58fc4ea
--- /dev/null
+++ b/src/app/pages/order/components/order-list/order-list.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-order-list',
+ standalone: true,
+ imports: [],
+ templateUrl: './order-list.component.html',
+ styleUrl: './order-list.component.scss'
+})
+export class OrderListComponent {
+
+}
diff --git a/src/app/pages/order/order-default/order-default.component.html b/src/app/pages/order/order-default/order-default.component.html
new file mode 100644
index 0000000..3e79dbc
--- /dev/null
+++ b/src/app/pages/order/order-default/order-default.component.html
@@ -0,0 +1,74 @@
+;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [OrderDefaultComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(OrderDefaultComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/pages/order/order-default/order-default.component.ts b/src/app/pages/order/order-default/order-default.component.ts
new file mode 100644
index 0000000..c28b688
--- /dev/null
+++ b/src/app/pages/order/order-default/order-default.component.ts
@@ -0,0 +1,100 @@
+import { CommonModule, NgClass } from '@angular/common';
+import { Component, inject, OnInit } from '@angular/core';
+
+import { ButtonModule } from 'primeng/button';
+import { Table, TableModule } from 'primeng/table';
+import { InputTextModule } from 'primeng/inputtext';
+import { DropdownModule } from 'primeng/dropdown';
+import { AvatarModule } from 'primeng/avatar';
+import { AvatarGroupModule } from 'primeng/avatargroup';
+import { BreadcrumbComponent } from '../../components/breadcrumb/breadcrumb.component';
+import { FormsModule, NgModel } from '@angular/forms';
+import { BreadcrumbItems } from '../../../models/Generics.model';
+import { Status } from '../../../models/Status.model';
+import { RouterLink } from '@angular/router';
+import { Order } from '../../../models/Orders.model';
+import { OrdersService } from '../../../services/orders/orders.service';
+
+interface Menu {
+ value: number;
+ title: string;
+ icon: string;
+}
+
+@Component({
+ selector: 'app-order-default',
+ standalone: true,
+ imports: [
+ CommonModule,
+ NgClass,
+ FormsModule,
+ RouterLink,
+ ButtonModule,
+ TableModule,
+ InputTextModule,
+ DropdownModule,
+ AvatarModule,
+ AvatarGroupModule,
+ BreadcrumbComponent,
+ ],
+ templateUrl: './order-default.component.html',
+ styleUrl: './order-default.component.scss',
+})
+export class OrderDefaultComponent implements OnInit {
+ private orderService = inject(OrdersService);
+
+ selectedStatus: Status | undefined;
+
+ status: Status[] = [];
+ orders: Order[] = [];
+ breadcrumb: BreadcrumbItems[] = [];
+ order_menu: Menu[] = [
+ {
+ value: 56,
+ title: 'Pagamentos pendentes',
+ icon: 'ri-calendar-2-line ri-2x',
+ },
+ {
+ value: 12.689,
+ title: 'Pedidos completos',
+ icon: 'ri-check-double-line ri-2x',
+ },
+ {
+ value: 124,
+ title: 'Reembolsos',
+ icon: 'ri-refund-2-line ri-2x',
+ },
+ {
+ value: 6,
+ title: 'Cancelados',
+ icon: 'ri-error-warning-line ri-2x',
+ },
+ ];
+ ngOnInit(): void {
+ this.getAllOrders();
+ }
+
+ // checkUrl() {
+ // const route_url = this.router.url;
+ // const urlParts = route_url.split('/');
+ // let parts: any[] = [];
+ // urlParts.shift();
+
+ // urlParts.forEach((item: string) => {
+ // parts.push({ label: item });
+ // });
+ // this.breadcrumb = parts;
+ // }
+
+ getAllOrders() {
+ this.orderService.getAllOrders().subscribe({
+ next: (data) => {
+ this.orders = data;
+ console.log('GET ALL ORDERS DATA:', data);
+ },
+ error: (err) => {
+ console.log('GET ALL ORDERS ERR:', err);
+ },
+ });
+ }
+}
diff --git a/src/app/services/orders/orders.service.spec.ts b/src/app/services/orders/orders.service.spec.ts
new file mode 100644
index 0000000..1a037db
--- /dev/null
+++ b/src/app/services/orders/orders.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { OrdersService } from './orders.service';
+
+describe('OrdersService', () => {
+ let service: OrdersService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(OrdersService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/services/orders/orders.service.ts b/src/app/services/orders/orders.service.ts
new file mode 100644
index 0000000..fd4c616
--- /dev/null
+++ b/src/app/services/orders/orders.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { Order } from '../../models/Orders.model';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../../environments/environment.development';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class OrdersService {
+ private url: string = environment.BASE_URL;
+ private uri: string = 'api/v1';
+ private flag: string = 'order';
+
+ constructor(private http: HttpClient) {}
+
+ getAllOrders() {
+ return this.http.get(`${this.url}/${this.flag}`);
+ }
+
+ getOrdersById(order_id: number) {
+ return this.http.get(`${this.url}/${this.flag}/${order_id}`);
+ }
+}
diff --git a/src/environments/environment.development.ts b/src/environments/environment.development.ts
index c7b3f1e..6e4b805 100644
--- a/src/environments/environment.development.ts
+++ b/src/environments/environment.development.ts
@@ -1,5 +1,5 @@
export const environment = {
- // BASE_URL: 'https://api.escuelajs.co',
- // BASE_URL: 'http://localhost:3000',
- BASE_URL: 'https://imports-kappa.vercel.app'
+ // BASE_URL: 'https://api.escuelajs.co',
+ // BASE_URL: 'http://localhost:3000',
+ BASE_URL: 'https://imports-kappa.vercel.app',
};
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index c7b3f1e..d220f45 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -1,5 +1,5 @@
export const environment = {
- // BASE_URL: 'https://api.escuelajs.co',
- // BASE_URL: 'http://localhost:3000',
- BASE_URL: 'https://imports-kappa.vercel.app'
+ // BASE_URL: 'https://api.escuelajs.co',
+ // BASE_URL: 'http://localhost:3000',
+ BASE_URL: 'https://imports-kappa.vercel.app',
};
+
-
+
- Melhores Produtos
+
-
-
-
-
- | Product | -Price | -Orders | -Stock | -Amount | -
|---|---|---|---|---|
|
-
- Branded T-Shirts
- 24 Apr 2021
-
- |
- - {{ item.price | currency }} - Price - | -- {{ item.status.name }} - Status - | -- {{ item.stock }} - Stock - | -- {{ item.amount | currency }} - Amount - | -
-
\ No newline at end of file
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 56c7bfc..83c98f8 100644
--- a/src/app/pages/dashboard/dash-content/dash-content.component.scss
+++ b/src/app/pages/dashboard/dash-content/dash-content.component.scss
@@ -115,41 +115,6 @@
'order mini-cards';
}
-@media (max-width: 992px) {
-
- .container {
- grid-template-columns: 1fr;
- grid-template-areas:
- 'mini-cards'
- 'order';
- }
-
- .mini-cards {
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- }
-
- .mini-card {
- flex: 0 0 auto;
- max-width: none;
- }
-}
-
-@media (max-width: 767px) {
-
- .mini-cards {
- flex: 0 0 auto;
- flex-direction: column;
- width: 100%;
- }
-
- .mini-card {
- flex: 0 0 auto;
- max-width: none;
- }
-}
-
// BOX Best Selling Products
.header {
@@ -271,7 +236,7 @@ td small {
.grid-content {
display: grid;
- grid-template-columns: 1fr 1fr;
+ grid-template-columns: 2fr 1fr;
gap: 20px;
}
@@ -279,21 +244,64 @@ td small {
background-color: #FFF;
}
-@media (max-width: 576px) {
+.grid-graph {
+ display: grid;
+ grid-template-columns: 1fr 2fr;
+ gap: 20px;
+}
- .grid-content {
+@media (max-width: 992px) {
+
+ .container {
grid-template-columns: 1fr;
+ grid-template-areas:
+ 'mini-cards'
+ 'order';
+ }
+
+ .widgets {
+ grid-template-columns: 1fr 1fr;
+ }
+
+ .mini-cards {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ }
+
+ .mini-card {
+ flex: 0 0 auto;
+ max-width: none;
}
}
-.grid-graph {
- display: grid;
- grid-template-columns: 1fr 2fr;
- gap: 20px;
+@media (max-width: 767px) {
+
+ .widgets {
+ width: 100%;
+ justify-content: center;
+ }
+
+ .grid-graph {
+ grid-template-columns: 1fr;
+ }
+
+ .mini-cards {
+ flex: 0 0 auto;
+ flex-direction: column;
+ width: 100%;
+ }
+
+ .mini-card {
+ flex: 0 0 auto;
+ max-width: none;
+ }
}
@media (max-width: 576px) {
+ .grid-content,
+ .widgets,
.grid-graph {
grid-template-columns: 1fr;
}
diff --git a/src/app/pages/dashboard/dash-default/dash-default.component.ts b/src/app/pages/dashboard/dash-default/dash-default.component.ts
index 0691483..2c32777 100644
--- a/src/app/pages/dashboard/dash-default/dash-default.component.ts
+++ b/src/app/pages/dashboard/dash-default/dash-default.component.ts
@@ -11,7 +11,6 @@ import { HeaderComponent } from '../../components/header/header.component';
import { RouterLink, RouterOutlet } from '@angular/router';
import { MenuList } from '../../../models/Generics.model';
-
@Component({
selector: 'app-dash-default',
standalone: true,
@@ -25,37 +24,40 @@ import { MenuList } from '../../../models/Generics.model';
RippleModule,
StyleClassModule,
NgClass,
- ToolbarModule
+ ToolbarModule,
],
templateUrl: './dash-default.component.html',
- styleUrl: './dash-default.component.scss'
+ styleUrl: './dash-default.component.scss',
})
export class DashDefaultComponent {
-
isSidebarOpen: boolean = false;
sidebarVisible: boolean = false;
menu: MenuList[] = [
{
- label: "Dashboard",
- router: "/dashboard",
- icon: "ri-dashboard-line mr-2"
+ label: 'Dashboard',
+ router: '/dashboard',
+ icon: 'ri-dashboard-line mr-2',
+ },
+ {
+ label: 'Produtos',
+ router: 'products',
+ icon: 'ri-box-3-line mr-2',
},
{
- label: "Produtos",
- router: "products",
- icon: "ri-box-3-line mr-2"
+ label: 'Categorias',
+ router: 'categories',
+ icon: 'ri-list-unordered mr-2',
},
{
- label: "Categorias",
- router: "categories",
- icon: "ri-list-unordered mr-2"
- }
+ label: 'Pedidos',
+ router: 'orders',
+ icon: 'ri-file-list-line mr-2',
+ },
];
crtlMenu(evt: any) {
// this.toggleSidebar();
this.sidebarVisible = evt;
}
-
}
diff --git a/src/app/pages/dashboard/dash-orders/dash-orders.component.html b/src/app/pages/dashboard/dash-orders/dash-orders.component.html
index 69250f6..4d7b97f 100644
--- a/src/app/pages/dashboard/dash-orders/dash-orders.component.html
+++ b/src/app/pages/dashboard/dash-orders/dash-orders.component.html
@@ -1,37 +1,27 @@
-
-
+ Mais vendidos
+
+
+
+
+
| Product | +Price | +Orders | +Stock | +Amount | +
|---|---|---|---|---|
|
+
+ Branded T-Shirts
+ 24 Apr 2021
+
+ |
+ + {{ item.price | currency }} + Price + | ++ {{ item.status.name }} + Status + | ++ {{ item.stock }} + Stock + | ++ {{ item.amount | currency }} + Amount + | +
+
+
- Mais vendidos
+
-
-
-
+
| Product | -Price | -Orders | -Stock | -Amount | -
|---|---|---|---|---|
|
-
- Branded T-Shirts
- 24 Apr 2021
-
- |
- - {{ item.price | currency }} - Price - | -- {{ item.status.name }} - Status - | -- {{ item.stock }} - Stock - | -- {{ item.amount | currency }} - Amount - | -
+
+
+
+
| Product | +Price | +Orders | +Stock | +Amount | +
|---|---|---|---|---|
|
+
+ Branded T-Shirts
+ 24 Apr 2021
+
+ |
+ + {{ item.price | currency }} + Price + | ++ {{ item.status.name }} + Status + | ++ {{ item.stock }} + Stock + | ++ {{ item.amount | currency }} + Amount + | +
+
+
+
+
\ No newline at end of file
diff --git a/src/app/pages/dashboard/dash-orders/dash-orders.component.scss b/src/app/pages/dashboard/dash-orders/dash-orders.component.scss
index e69de29..9740868 100644
--- a/src/app/pages/dashboard/dash-orders/dash-orders.component.scss
+++ b/src/app/pages/dashboard/dash-orders/dash-orders.component.scss
@@ -0,0 +1,71 @@
+.responsive-table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+.responsive-table thead {
+ background-color: #9a9898;
+}
+
+.responsive-table thead tr th {
+ font-size: 14px;
+ font-weight: 600;
+ letter-spacing: 0.35px;
+ color: #FFFFFF;
+ opacity: 1;
+ padding: 12px;
+ vertical-align: top;
+}
+
+.responsive-table tbody tr td {
+ font-size: 14px;
+ letter-spacing: 0.35px;
+ font-weight: normal;
+ padding: 7px;
+ border-bottom: 1px solid #dee2e585;
+}
+
+@media screen and (max-width: 768px) {
+
+ tr:nth-of-type(2n) {
+ background: hsl(0 0% 0% / 0.1);
+ }
+
+ .responsive-table thead {
+ display: none;
+ }
+
+ .responsive-table,
+ .responsive-table tbody,
+ .responsive-table tr,
+ .responsive-table td {
+ display: block;
+ width: 100%;
+ }
+
+ .responsive-table tr {
+ margin-bottom: 15px;
+ }
+
+ .responsive-table tbody tr td {
+ text-align: right;
+ padding: 16px;
+ position: relative;
+ }
+
+ .responsive-table td::before {
+ content: attr(data-label);
+ position: absolute;
+ left: 0;
+ width: 50%;
+ padding-left: 16px;
+ font-weight: 600;
+ font-size: 14px;
+ text-align: left;
+ color: #673AB7;
+ }
+
+ .img-customer {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/src/app/pages/dashboard/dash-orders/dash-orders.component.ts b/src/app/pages/dashboard/dash-orders/dash-orders.component.ts
index 2af3631..7874ca4 100644
--- a/src/app/pages/dashboard/dash-orders/dash-orders.component.ts
+++ b/src/app/pages/dashboard/dash-orders/dash-orders.component.ts
@@ -2,6 +2,12 @@ import { Component } from '@angular/core';
import { TableModule } from 'primeng/table';
import { AvatarModule } from 'primeng/avatar';
import { AvatarGroupModule } from 'primeng/avatargroup';
+import { NgSwitch, NgSwitchCase } from '@angular/common';
+
+interface Column {
+ field: string;
+ header: string;
+}
@Component({
selector: 'app-dash-orders',
@@ -9,14 +15,23 @@ import { AvatarGroupModule } from 'primeng/avatargroup';
imports: [
TableModule,
AvatarModule,
- AvatarGroupModule
+ AvatarGroupModule,
+ NgSwitch,
+ NgSwitchCase
],
templateUrl: './dash-orders.component.html',
styleUrl: './dash-orders.component.scss'
})
export class DashOrdersComponent {
-
+ columns: Column[] = [
+ { field: 'order_id', header: 'ID Pedido' },
+ { field: 'customer.name', header: 'Cliente' },
+ { field: 'product', header: 'Produto' },
+ { field: 'amount', header: 'Valor' },
+ { field: 'vendor', header: 'Vendedor' },
+ { field: 'status', header: 'Status' }
+ ];
orders: any[] = [
{
diff --git a/src/app/pages/order/components/order-list/order-list.component.html b/src/app/pages/order/components/order-list/order-list.component.html
new file mode 100644
index 0000000..6e7c0cc
--- /dev/null
+++ b/src/app/pages/order/components/order-list/order-list.component.html
@@ -0,0 +1 @@
+| {{ col.header }} | + } +|||||
|---|---|---|---|---|---|
| {{ order.order_id }} | +
+ |
+ {{ order.product }} | +{{ order.amount }} | +{{ order.vendor }} | +{{ order.status }} | +
order-list works!
diff --git a/src/app/pages/order/components/order-list/order-list.component.scss b/src/app/pages/order/components/order-list/order-list.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/order/components/order-list/order-list.component.spec.ts b/src/app/pages/order/components/order-list/order-list.component.spec.ts new file mode 100644 index 0000000..2dfb1d1 --- /dev/null +++ b/src/app/pages/order/components/order-list/order-list.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OrderListComponent } from './order-list.component'; + +describe('OrderListComponent', () => { + let component: OrderListComponent; + let fixture: ComponentFixture
+
diff --git a/src/app/pages/order/order-default/order-default.component.scss b/src/app/pages/order/order-default/order-default.component.scss
new file mode 100644
index 0000000..5c220be
--- /dev/null
+++ b/src/app/pages/order/order-default/order-default.component.scss
@@ -0,0 +1,55 @@
+.dashboard {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ max-width: 100%;
+ background: #fff;
+ border: 1px solid #ddd;
+ border-radius: 10px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ padding: 20px;
+}
+
+.status-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 23%;
+ padding: 10px;
+ border-right: 1px solid #ddd;
+}
+
+.status-item:last-child {
+ border-right: none;
+}
+
+.status-icon {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 50px;
+ height: 50px;
+ background-color: #f0f0f0;
+ border-radius: 5px;
+ margin-right: 10px;
+ color: var(--surface-700);
+}
+
+.status-icon img {
+ width: 24px;
+ height: 24px;
+}
+
+.status-info {
+ text-align: left;
+}
+
+.status-number {
+ font-size: 1.5em;
+ font-weight: bold;
+ color: var(--surface-500);
+}
+
+.status-label {
+ color: var(--surface-700);
+}
diff --git a/src/app/pages/order/order-default/order-default.component.spec.ts b/src/app/pages/order/order-default/order-default.component.spec.ts
new file mode 100644
index 0000000..6efc3b5
--- /dev/null
+++ b/src/app/pages/order/order-default/order-default.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrderDefaultComponent } from './order-default.component';
+
+describe('OrderDefaultComponent', () => {
+ let component: OrderDefaultComponent;
+ let fixture: ComponentFixture
+ @for (item of order_menu; track $index){
+
+
+
+
+ }
+
+
+
+ {{ item.value }}
+ {{ item.title }}
+
+
+
+
+
+ Pedido
+ Data
+
+ Cliente
+
+ Valor
+
+ Status
+ Ações
+
+
+
+
+ {{ orders.receiptNumber }}
+ {{ orders.date_order | date : "dd/MM/yyyy" }}
+
+
+ {{ orders.customer.first_name + " " + orders.customer.last_name }}
+
+ {{ orders.value_total }}
+
+
+ {{ orders.status }}
+
+
+
+
+
+
+
+