Skip to content

Commit 39bbde6

Browse files
aledguedesaledguedes
committed
dashboard tela inicial
1 parent 70b9ecc commit 39bbde6

7 files changed

Lines changed: 173 additions & 188 deletions

File tree

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

Lines changed: 13 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,19 @@ <h3 class="widget-title">Clientes Registrados</h3>
3737
</div>
3838
</div>
3939

40+
<div class="grid-graph p-2">
41+
<div class="graph p-3 shadow-3" style="background-color: #FFF;">
42+
graph
43+
</div>
44+
45+
<div class="orders p-3 shadow-3" style="background-color: #FFF;">
46+
<h2>Recent Orders</h2>
47+
<app-dash-orders />
48+
</div>
49+
</div>
50+
4051
<div class="grid-content p-2">
41-
<div class="item">
52+
<div class="item shadow-3">
4253
<div class="header pt-3 px-3">
4354
<h1>Melhores Produtos</h1>
4455
</div>
@@ -86,7 +97,7 @@ <h1>Melhores Produtos</h1>
8697
</table>
8798
</div>
8899
</div>
89-
<div class="item">
100+
<div class="item shadow-3">
90101
<div class="header pt-3 px-3">
91102
<h1>Mais vendidos</h1>
92103
</div>
@@ -134,125 +145,4 @@ <h1>Mais vendidos</h1>
134145
</table>
135146
</div>
136147
</div>
137-
</div>
138-
139-
<div class="grid-graph p-2">
140-
<div class="graph p-3" style="background-color: #FFF;">
141-
graph
142-
</div>
143-
144-
<div class="orders p-3" style="background-color: #FFF;">
145-
<h2>Recent Orders</h2>
146-
147-
<p-table [value]="orders">
148-
<ng-template pTemplate="header">
149-
<tr>
150-
<th pSortableColumn="id">
151-
Order ID <p-sortIcon field="id" />
152-
</th>
153-
<th pSortableColumn="customer.name">
154-
Cliente <p-sortIcon field="customer.name" />
155-
</th>
156-
<th pSortableColumn="product">
157-
Produto <p-sortIcon field="product" />
158-
</th>
159-
<th pSortableColumn="amount">
160-
Valor <p-sortIcon field="amount" />
161-
</th>
162-
<th pSortableColumn="vendor">
163-
Vendedor <p-sortIcon field="vendor" />
164-
</th>
165-
<th pSortableColumn="status">
166-
Status <p-sortIcon field="status" />
167-
</th>
168-
<th pSortableColumn="rating.score">
169-
Avaliações <p-sortIcon field="rating.score" />
170-
</th>
171-
</tr>
172-
</ng-template>
173-
<ng-template pTemplate="body" let-order>
174-
<tr>
175-
<td>{{ order.id }}</td>
176-
<td>
177-
<p-avatar [image]="order.customer.image" styleClass="mr-2" size="large" shape="circle" />
178-
<span>{{ order.customer.name }}</span>
179-
</td>
180-
<td>{{ order.product }}</td>
181-
<td>{{ order.amount }}</td>
182-
<td>{{ order.vendor }}</td>
183-
<td>{{ order.status }}</td>
184-
<td>
185-
<div>
186-
<span>{{ order.rating.score }}</span>
187-
<span>{{ order.rating.votes + ' (votos)' }}</span>
188-
</div>
189-
</td>
190-
191-
</tr>
192-
</ng-template>
193-
</p-table>
194-
<!-- <table class="table-graph">
195-
<thead>
196-
<tr>
197-
<th>Order ID</th>
198-
<th>Customer</th>
199-
<th>Product</th>
200-
<th>Amount</th>
201-
<th>Vendor</th>
202-
<th>Status</th>
203-
<th>Rating</th>
204-
</tr>
205-
</thead>
206-
<tbody>
207-
<tr>
208-
<td><a href="#">#VZ2112</a></td>
209-
<td>
210-
<img src="https://via.placeholder.com/40" alt="Alex Smith" class="customer-img">
211-
<span class="customer-name">Alex Smith</span>
212-
</td>
213-
<td>Clothes</td>
214-
<td>$109.00</td>
215-
<td>Zoetic Fashion</td>
216-
<td class="status-paid">Paid</td>
217-
<td class="rating">5.0 (61 votes)</td>
218-
</tr>
219-
<tr>
220-
<td><a href="#">#VZ2111</a></td>
221-
<td>
222-
<img src="https://via.placeholder.com/40" alt="Jansh Brown" class="customer-img">
223-
<span class="customer-name">Jansh Brown</span>
224-
</td>
225-
<td>Kitchen Storage</td>
226-
<td>$149.00</td>
227-
<td>Micro Design</td>
228-
<td class="status-pending">Pending</td>
229-
<td class="rating">4.5 (61 votes)</td>
230-
</tr>
231-
<tr>
232-
<td><a href="#">#VZ2109</a></td>
233-
<td>
234-
<img src="https://via.placeholder.com/40" alt="Ayaan Bowen" class="customer-img">
235-
<span class="customer-name">Ayaan Bowen</span>
236-
</td>
237-
<td>Bike Accessories</td>
238-
<td>$215.00</td>
239-
<td>Nesta Technologies</td>
240-
<td class="status-paid">Paid</td>
241-
<td class="rating">4.9 (89 votes)</td>
242-
</tr>
243-
<tr>
244-
<td><a href="#">#VZ2108</a></td>
245-
<td>
246-
<img src="https://via.placeholder.com/40" alt="Prezy Mark" class="customer-img">
247-
<span class="customer-name">Prezy Mark</span>
248-
</td>
249-
<td>Furniture</td>
250-
<td>$199.00</td>
251-
<td>Syntyce Solutions</td>
252-
<td class="status-unpaid">Unpaid</td>
253-
<td class="rating">4.3 (47 votes)</td>
254-
</tr>
255-
</tbody>
256-
</table> -->
257-
</div>
258148
</div>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -284,4 +284,17 @@ td small {
284284
.grid-content {
285285
grid-template-columns: 1fr;
286286
}
287+
}
288+
289+
.grid-graph {
290+
display: grid;
291+
grid-template-columns: 1fr 2fr;
292+
gap: 20px;
293+
}
294+
295+
@media (max-width: 576px) {
296+
297+
.grid-graph {
298+
grid-template-columns: 1fr;
299+
}
287300
}

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

Lines changed: 3 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { TableModule } from 'primeng/table';
1111
import { Product } from '../../../models/Products.model';
1212
import { AvatarModule } from 'primeng/avatar';
1313
import { AvatarGroupModule } from 'primeng/avatargroup';
14+
import { DashOrdersComponent } from '../dash-orders/dash-orders.component';
1415

1516
@Component({
1617
selector: 'app-dash-content',
@@ -26,7 +27,8 @@ import { AvatarGroupModule } from 'primeng/avatargroup';
2627
TableModule,
2728
CurrencyPipe,
2829
AvatarModule,
29-
AvatarGroupModule
30+
AvatarGroupModule,
31+
DashOrdersComponent
3032
],
3133
templateUrl: './dash-content.component.html',
3234
styleUrl: './dash-content.component.scss'
@@ -35,70 +37,6 @@ export class DashContentComponent implements OnInit {
3537

3638
products: Product[] = [];
3739

38-
orders: any[] = [
39-
{
40-
"order_id": "#VZ2112",
41-
"customer": {
42-
"name": "Alex Smith",
43-
"image_url": "https://via.placeholder.com/40"
44-
},
45-
"product": "Clothes",
46-
"amount": "$109.00",
47-
"vendor": "Zoetic Fashion",
48-
"status": "Paid",
49-
"rating": {
50-
"score": 5.0,
51-
"votes": 61
52-
}
53-
},
54-
{
55-
"order_id": "#VZ2111",
56-
"customer": {
57-
"name": "Jansh Brown",
58-
"image_url": "https://via.placeholder.com/40"
59-
},
60-
"product": "Kitchen Storage",
61-
"amount": "$149.00",
62-
"vendor": "Micro Design",
63-
"status": "Pending",
64-
"rating": {
65-
"score": 4.5,
66-
"votes": 61
67-
}
68-
},
69-
{
70-
"order_id": "#VZ2109",
71-
"customer": {
72-
"name": "Ayaan Bowen",
73-
"image_url": "https://via.placeholder.com/40"
74-
},
75-
"product": "Bike Accessories",
76-
"amount": "$215.00",
77-
"vendor": "Nesta Technologies",
78-
"status": "Paid",
79-
"rating": {
80-
"score": 4.9,
81-
"votes": 89
82-
}
83-
},
84-
{
85-
"order_id": "#VZ2108",
86-
"customer": {
87-
"name": "Prezy Mark",
88-
"image_url": "https://via.placeholder.com/40"
89-
},
90-
"product": "Furniture",
91-
"amount": "$199.00",
92-
"vendor": "Syntyce Solutions",
93-
"status": "Unpaid",
94-
"rating": {
95-
"score": 4.3,
96-
"votes": 47
97-
}
98-
}
99-
];
100-
101-
10240
constructor(
10341
private prodService: ProductsService
10442
) { }

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<p-table [value]="orders">
2+
<ng-template pTemplate="header">
3+
<tr>
4+
<th pSortableColumn="id">
5+
Order ID
6+
</th>
7+
<th pSortableColumn="customer.name">
8+
Cliente
9+
</th>
10+
<th pSortableColumn="product">
11+
Produto
12+
</th>
13+
<th pSortableColumn="amount">
14+
Valor
15+
</th>
16+
<th pSortableColumn="product">
17+
Vendedor
18+
</th>
19+
<th pSortableColumn="status">
20+
Status
21+
</th>
22+
</tr>
23+
</ng-template>
24+
<ng-template pTemplate="body" let-order>
25+
<tr>
26+
<td>{{ order.order_id }}</td>
27+
<td class="flex align-items-center">
28+
<p-avatar [image]="order.customer.image" styleClass="mr-2" size="large" shape="circle" />
29+
<span>{{ order.customer.name }}</span>
30+
</td>
31+
<td>{{ order.product }}</td>
32+
<td>{{ order.amount }}</td>
33+
<td>{{ order.vendor }}</td>
34+
<td>{{ order.status }}</td>
35+
</tr>
36+
</ng-template>
37+
</p-table>

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

Whitespace-only changes.

‎src/app/pages/dashboard/dash-orders/dash-orders.component.spec.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { DashOrdersComponent } from './dash-orders.component';
4+
5+
describe('DashOrdersComponent', () => {
6+
let component: DashOrdersComponent;
7+
let fixture: ComponentFixture<DashOrdersComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
imports: [DashOrdersComponent]
12+
})
13+
.compileComponents();
14+
15+
fixture = TestBed.createComponent(DashOrdersComponent);
16+
component = fixture.componentInstance;
17+
fixture.detectChanges();
18+
});
19+
20+
it('should create', () => {
21+
expect(component).toBeTruthy();
22+
});
23+
});

0 commit comments

Comments
 (0)