From 46c1224bd3ead59b455a2880d1b65f7713075d99 Mon Sep 17 00:00:00 2001 From: aledguedes Date: Thu, 25 Jul 2024 13:56:28 -0300 Subject: [PATCH] orders list --- db.json | 151 ++++++++++- src/app/app.routes.ts | 87 ++++-- src/app/models/Customer.model.ts | 13 + src/app/models/Orders.model.ts | 10 + .../category-list/category-list.component.ts | 28 +- .../thumbnail-products.component.html | 31 ++- .../thumbnail-products.component.ts | 6 +- .../dash-content/dash-content.component.html | 256 +++++++++--------- .../dash-content/dash-content.component.scss | 92 ++++--- .../dash-default/dash-default.component.ts | 32 ++- .../dash-orders/dash-orders.component.html | 64 ++--- .../dash-orders/dash-orders.component.scss | 71 +++++ .../dash-orders/dash-orders.component.ts | 19 +- .../order-list/order-list.component.html | 1 + .../order-list/order-list.component.scss | 0 .../order-list/order-list.component.spec.ts | 23 ++ .../order-list/order-list.component.ts | 12 + .../order-default.component.html | 74 +++++ .../order-default.component.scss | 55 ++++ .../order-default.component.spec.ts | 23 ++ .../order-default/order-default.component.ts | 100 +++++++ .../services/orders/orders.service.spec.ts | 16 ++ src/app/services/orders/orders.service.ts | 23 ++ src/environments/environment.development.ts | 6 +- src/environments/environment.ts | 6 +- 25 files changed, 932 insertions(+), 267 deletions(-) create mode 100644 src/app/models/Customer.model.ts create mode 100644 src/app/models/Orders.model.ts create mode 100644 src/app/pages/order/components/order-list/order-list.component.html create mode 100644 src/app/pages/order/components/order-list/order-list.component.scss create mode 100644 src/app/pages/order/components/order-list/order-list.component.spec.ts create mode 100644 src/app/pages/order/components/order-list/order-list.component.ts create mode 100644 src/app/pages/order/order-default/order-default.component.html create mode 100644 src/app/pages/order/order-default/order-default.component.scss create mode 100644 src/app/pages/order/order-default/order-default.component.spec.ts create mode 100644 src/app/pages/order/order-default/order-default.component.ts create mode 100644 src/app/services/orders/orders.service.spec.ts create mode 100644 src/app/services/orders/orders.service.ts diff --git a/db.json b/db.json index 27f6b3d..cc257f4 100644 --- a/db.json +++ b/db.json @@ -1297,7 +1297,156 @@ "id": "4a17" } ], - "order": [], + "order": [ + { + "id": 1, + "date_order": "2024-06-11T12:23:59.000Z", + "value_total": "469,98", + "status": "Em preparação", + "receiptNumber": "2024ADG0001", + "customer": { + "first_name": "Emily", + "last_name": "Jones", + "address": { + "street": "123 Main St", + "city": "Springfield", + "state": "IL", + "zip": "62701" + }, + "id": "636a" + }, + "items": [ + { + "id": "52", + "title": "Nike Air Jordan", + "description": "O Nike Air Jordan é uma linha de tênis de basquete lendária que foi lançada pela primeira vez em 1985. Criada em colaboração com o jogador de basquete Michael Jordan.", + "images": [ + "https://cdnimg.etiquetaunica.com.br/products/3a5604376ac9c36674c1dcbe163c104c35980d9a8e0954ca-f23d-4181-8973-f8e445321e89-clipped-rev-1.jpeg" + ], + "price": "199.99", + "stock": "20", + "category": { + "id": "4", + "name": "Shoes", + "image": "https://i.imgur.com/qNOjJje.jpeg", + "creationAt": "2024-06-11T12:23:59.000Z", + "updatedAt": "2024-06-11T12:23:59.000Z", + "qt_products": 10 + } + }, + { + "id": "11", + "title": "Classic Red Baseball Cap", + "price": 35, + "description": "Elevate your casual wardrobe with this timeless red baseball cap. Crafted from durable fabric, it features a comfortable fit with an adjustable strap at the back, ensuring one size fits all. Perfect for sunny days or adding a sporty touch to your outfit.", + "images": [ + "https://i.imgur.com/cBuLvBi.jpeg", + "https://i.imgur.com/N1GkCIR.jpeg", + "https://i.imgur.com/kKc9A5p.jpeg" + ], + "creationAt": "2024-06-11T12:23:59.000Z", + "updatedAt": "2024-06-11T12:23:59.000Z", + "category": { + "id": 1, + "name": "Clothes", + "image": "https://i.imgur.com/QkIa5tT.jpeg", + "creationAt": "2024-06-11T12:23:59.000Z", + "updatedAt": "2024-06-11T12:23:59.000Z" + }, + "stock": 17, + "status": { + "id": 6, + "name": "Quase esgotado", + "slug": "quase_esgotado" + } + } + ] + }, + { + "id": 2, + "date_order": "2024-06-11T12:23:59.000Z", + "value_total": "199.99", + "status": "Finalizado", + "receiptNumber": "2024ADG0001", + "customer": { + "first_name": "Sophia", + "last_name": "Johnson", + "address": { + "street": "789 Oak St", + "city": "Maplewood", + "state": "MN", + "zip": "55109" + }, + "id": "1119" + }, + "items": [ + { + "id": "52", + "title": "Nike Air Jordan", + "description": "O Nike Air Jordan é uma linha de tênis de basquete lendária que foi lançada pela primeira vez em 1985. Criada em colaboração com o jogador de basquete Michael Jordan.", + "images": [ + "https://cdnimg.etiquetaunica.com.br/products/3a5604376ac9c36674c1dcbe163c104c35980d9a8e0954ca-f23d-4181-8973-f8e445321e89-clipped-rev-1.jpeg" + ], + "price": "199.99", + "stock": "20", + "category": { + "id": "4", + "name": "Shoes", + "image": "https://i.imgur.com/qNOjJje.jpeg", + "creationAt": "2024-06-11T12:23:59.000Z", + "updatedAt": "2024-06-11T12:23:59.000Z", + "qt_products": 10 + } + } + ] + }, + { + "id": 3, + "date_order": "2024-06-11T12:23:59.000Z", + "value_total": "105.00", + "status": "Em preparação", + "receiptNumber": "2024ADG0001", + "customer": { + "first_name": "Liam", + "last_name": "Miller", + "address": { + "street": "2222 Walnut St", + "city": "Asheville", + "state": "NC", + "zip": "28801" + }, + "id": "7b87" + }, + "items": [ + { + "id": "11", + "title": "Classic Red Baseball Cap", + "price": 35, + "description": "Elevate your casual wardrobe with this timeless red baseball cap. Crafted from durable fabric, it features a comfortable fit with an adjustable strap at the back, ensuring one size fits all. Perfect for sunny days or adding a sporty touch to your outfit.", + "images": [ + "https://i.imgur.com/cBuLvBi.jpeg", + "https://i.imgur.com/N1GkCIR.jpeg", + "https://i.imgur.com/kKc9A5p.jpeg" + ], + "creationAt": "2024-06-11T12:23:59.000Z", + "updatedAt": "2024-06-11T12:23:59.000Z", + "category": { + "id": 1, + "name": "Clothes", + "image": "https://i.imgur.com/QkIa5tT.jpeg", + "creationAt": "2024-06-11T12:23:59.000Z", + "updatedAt": "2024-06-11T12:23:59.000Z" + }, + "stock": 17, + "status": { + "id": 6, + "name": "Quase esgotado", + "slug": "quase_esgotado" + } + } + ] + } + ], "cart": [], "status": [ { diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 676d592..516d9d5 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -4,58 +4,107 @@ export const routes: Routes = [ { path: '', redirectTo: '/login', - pathMatch: 'full' + pathMatch: 'full', }, { path: 'login', - loadComponent: () => import('./pages/login/login-default/login-default.component').then(c => c.LoginDefaultComponent), + loadComponent: () => + import('./pages/login/login-default/login-default.component').then( + (c) => c.LoginDefaultComponent + ), children: [ { path: '', - loadComponent: () => import('./pages/login/login-user/login-user.component').then(c => c.LoginUserComponent), + loadComponent: () => + import('./pages/login/login-user/login-user.component').then( + (c) => c.LoginUserComponent + ), }, { path: 'forgot-password', - loadComponent: () => import('./pages/login/login-forgot/login-forgot.component').then(c => c.LoginForgotComponent), - } - ] + loadComponent: () => + import('./pages/login/login-forgot/login-forgot.component').then( + (c) => c.LoginForgotComponent + ), + }, + ], }, { path: 'dashboard', - loadComponent: () => import('./pages/dashboard/dash-default/dash-default.component').then(c => c.DashDefaultComponent), + loadComponent: () => + import('./pages/dashboard/dash-default/dash-default.component').then( + (c) => c.DashDefaultComponent + ), children: [ { path: '', - loadComponent: () => import('./pages/dashboard/dash-content/dash-content.component').then(c => c.DashContentComponent), + loadComponent: () => + import('./pages/dashboard/dash-content/dash-content.component').then( + (c) => c.DashContentComponent + ), }, { path: 'products', - loadComponent: () => import('./pages/products/product-default/product-default.component').then(c => c.ProductDefaultComponent), + loadComponent: () => + import( + './pages/products/product-default/product-default.component' + ).then((c) => c.ProductDefaultComponent), children: [ { path: '', - loadComponent: () => import('./pages/products/components/product-list/product-list.component').then(c => c.ProductListComponent), + loadComponent: () => + import( + './pages/products/components/product-list/product-list.component' + ).then((c) => c.ProductListComponent), }, { path: 'edit', - loadComponent: () => import('./pages/products/components/product-edit/product-edit.component').then(c => c.ProductEditComponent), - } - ] + loadComponent: () => + import( + './pages/products/components/product-edit/product-edit.component' + ).then((c) => c.ProductEditComponent), + }, + ], }, { path: 'categories', - loadComponent: () => import('./pages/categories/category-default/category-default.component').then(c => c.CategoryDefaultComponent), + loadComponent: () => + import( + './pages/categories/category-default/category-default.component' + ).then((c) => c.CategoryDefaultComponent), children: [ { path: '', - loadComponent: () => import('./pages/categories/components/category-list/category-list.component').then(c => c.CategoryListComponent), + loadComponent: () => + import( + './pages/categories/components/category-list/category-list.component' + ).then((c) => c.CategoryListComponent), }, { path: 'edit', - loadComponent: () => import('./pages/categories/components/category-edit/category-edit.component').then(c => c.CategoryEditComponent), - } - ] + loadComponent: () => + import( + './pages/categories/components/category-edit/category-edit.component' + ).then((c) => c.CategoryEditComponent), + }, + ], + }, + { + path: 'orders', + loadComponent: () => + import('./pages/order/order-default/order-default.component').then( + (c) => c.OrderDefaultComponent + ), + children: [ + { + path: '', + loadComponent: () => + import( + './pages/order/components/order-list/order-list.component' + ).then((c) => c.OrderListComponent), + }, + ], }, - ] + ], }, ]; diff --git a/src/app/models/Customer.model.ts b/src/app/models/Customer.model.ts new file mode 100644 index 0000000..5faebf9 --- /dev/null +++ b/src/app/models/Customer.model.ts @@ -0,0 +1,13 @@ +export interface Customer { + first_name: string; + last_name: string; + address: Address; + id: string; +} + +export interface Address { + street: string; + city: string; + state: string; + zip: string; +} diff --git a/src/app/models/Orders.model.ts b/src/app/models/Orders.model.ts new file mode 100644 index 0000000..c638dc7 --- /dev/null +++ b/src/app/models/Orders.model.ts @@ -0,0 +1,10 @@ +import { Customer } from './Customer.model'; + +export interface Order { + id: number; + date_order: string; + value_total: string; + status: string; + receiptNumber: string; + customer: Customer; +} diff --git a/src/app/pages/categories/components/category-list/category-list.component.ts b/src/app/pages/categories/components/category-list/category-list.component.ts index b8f0275..a72e083 100644 --- a/src/app/pages/categories/components/category-list/category-list.component.ts +++ b/src/app/pages/categories/components/category-list/category-list.component.ts @@ -20,12 +20,22 @@ import { Status } from '../../../../models/Status.model'; @Component({ selector: 'app-category-list', standalone: true, - imports: [AvatarModule, AvatarGroupModule, FormsModule, TableModule, ButtonModule, RouterLink, BreadcrumbComponent, InputTextModule, NgClass, DropdownModule], + imports: [ + AvatarModule, + AvatarGroupModule, + FormsModule, + TableModule, + ButtonModule, + RouterLink, + BreadcrumbComponent, + InputTextModule, + NgClass, + DropdownModule, + ], templateUrl: './category-list.component.html', - styleUrl: './category-list.component.scss' + styleUrl: './category-list.component.scss', }) export class CategoryListComponent implements OnInit { - loading: boolean = false; searchValue: string | undefined; selectedStatus: Status | undefined; @@ -36,10 +46,9 @@ export class CategoryListComponent implements OnInit { constructor( private router: Router, - private http: HttpClient, private statusService: StatusService, private catService: CategoriesService - ) { } + ) {} ngOnInit(): void { this.allCategories(); @@ -52,7 +61,7 @@ export class CategoryListComponent implements OnInit { next: (data) => { let statusFiltered: Status[] = []; data.forEach((item: Status) => { - if (item.enabled.includes("categories")) { + if (item.enabled.includes('categories')) { statusFiltered.push(item); } }); @@ -61,7 +70,7 @@ export class CategoryListComponent implements OnInit { }, error: (err) => { console.log('GET ALL STATUS ERR:', err); - } + }, }); } @@ -85,13 +94,12 @@ export class CategoryListComponent implements OnInit { }, error: (err) => { console.log('GET ALL CATEGORY ERR:', err); - } + }, }); } clear(table: Table) { table.clear(); - this.searchValue = '' + this.searchValue = ''; } - } diff --git a/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.html b/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.html index 696e86f..0aedc89 100644 --- a/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.html +++ b/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.html @@ -1,14 +1,35 @@ - +
+ +
+
+ + + +
+
+ + +
+
+ +
+
+ +
+
+
+ +
- \ No newline at end of file + --> \ No newline at end of file diff --git a/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.ts b/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.ts index f420238..82c1e12 100644 --- a/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.ts +++ b/src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.ts @@ -1,9 +1,10 @@ import { Component, Input } from '@angular/core'; import { Product } from '../../../../models/Products.model'; +import { RouterLink } from '@angular/router'; import { CardModule } from 'primeng/card'; import { ButtonModule } from 'primeng/button'; -import { RouterLink } from '@angular/router'; +import { SkeletonModule } from 'primeng/skeleton'; @Component({ selector: 'app-thumbnail-products', @@ -12,12 +13,15 @@ import { RouterLink } from '@angular/router'; CardModule, ButtonModule, RouterLink, + SkeletonModule ], templateUrl: './thumbnail-products.component.html', styleUrl: './thumbnail-products.component.scss' }) export class ThumbnailProductsComponent { + sizeSkeleton: string = '4rem'; + @Input() products: Product = { title: '', price: 0, 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 614db02..7bf9a1a 100644 --- a/src/app/pages/dashboard/dash-content/dash-content.component.html +++ b/src/app/pages/dashboard/dash-content/dash-content.component.html @@ -1,148 +1,146 @@ -
-
-
- -
-

Total de Vendas

-

250

+
+
+
+
+ +
+

Total de Vendas

+

250

+
-
-
-
- -
-

Número de Pedidos

-

150

+
+
+ +
+

Número de Pedidos

+

150

+
-
-
-
- -
-

Produtos em Estoque

-

300

+
+
+ +
+

Produtos em Estoque

+

300

+
-
-
-
- -
-

Clientes Registrados

-

500

+
+
+ +
+

Clientes Registrados

+

500

+
-
- -
-
- graph -
-
-

Recent Orders

+
+
+

Pedidos recentes

+
-
-
-
-
-

Melhores Produtos

-
+
+
+
+

Melhores Produtos

+
-
- - - - - - - - - - - - @for (item of products; track $index) { - - - - - - - - } - -
ProductPriceOrdersStockAmount
- Shirt -
- Branded T-Shirts - 24 Apr 2021 -
- 		- {{ item.price | currency }} - Price - - {{ item.status.name }} - Status - - {{ item.stock }} - Stock - - {{ item.amount | currency }} - Amount -
-
-
-
-
-

Mais vendidos

+
+ + + + + + + + + + + + @for (item of products; track $index) { + + + + + + + + } + +
ProductPriceOrdersStockAmount
+ Shirt +
+ Branded T-Shirts + 24 Apr 2021 +
+ 		+ {{ item.price | currency }} + Price + + {{ item.status.name }} + Status + + {{ item.stock }} + Stock + + {{ item.amount | currency }} + Amount +
+
+
+
+

Mais vendidos

+
-
- - - - - - - - - - - - @for (item of products; track $index) { - - - - - - - - } - -
ProductPriceOrdersStockAmount
- Shirt -
- Branded T-Shirts - 24 Apr 2021 -
- 		- {{ item.price | currency }} - Price - - {{ item.status.name }} - Status - - {{ item.stock }} - Stock - - {{ item.amount | currency }} - Amount -
+
+ + + + + + + + + + + + @for (item of products; track $index) { + + + + + + + + } + +
ProductPriceOrdersStockAmount
+ Shirt +
+ 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 @@ - - - - - Order ID - - - Cliente - - - Produto - - - Valor - - - Vendedor - - - Status - - - - - - {{ order.order_id }} - - - {{ order.customer.name }} - - {{ order.product }} - {{ order.amount }} - {{ order.vendor }} - {{ order.status }} - - - \ No newline at end of file +
+ + + + @for (col of columns; track $index) { + + } + + + + @for (order of orders; track $index) { + + + + + + + + + } + +
{{ col.header }}
{{ order.order_id }} + + {{ order.customer.name }} + {{ order.product }}{{ order.amount }}{{ order.vendor }}{{ order.status }}
+
\ 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 @@ +

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; + + 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 @@ +
+
+ @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 }} + + + + + + + + +
+
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; + + 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', };