Skip to content

Commit 09b9524

Browse files
aledguedesaledguedes
authored
Merge pull request #2 from enterpriseShop/desenvolvimento
integração com serviço on line
2 parents e8ccb38 + 9398744 commit 09b9524

27 files changed

Lines changed: 479 additions & 522 deletions

‎src/app/models/Generics.model.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,15 @@
11
export interface ProdForm {
22
isCreate: boolean;
33
product_id: number;
4+
};
5+
export interface BreadcrumbItems {
6+
icon?: string;
7+
route?: string;
8+
label?: string;
9+
};
10+
11+
export interface MenuList {
12+
label: string;
13+
router: string;
14+
icon: string;
415
}

‎src/app/pages/categories/components/category-edit/category-edit.component.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { Component } from '@angular/core';
1+
import { Component, OnInit } from '@angular/core';
22
import { CategoryFormComponent } from '../category-form/category-form.component';
33

44
import { CardModule } from 'primeng/card';
55
import { ButtonModule } from 'primeng/button';
66
import { InputTextModule } from 'primeng/inputtext';
7+
import { ActivatedRoute } from '@angular/router';
78

89
@Component({
910
selector: 'app-category-edit',
@@ -17,9 +18,15 @@ import { InputTextModule } from 'primeng/inputtext';
1718
templateUrl: './category-edit.component.html',
1819
styleUrl: './category-edit.component.scss'
1920
})
20-
export class CategoryEditComponent {
21+
export class CategoryEditComponent implements OnInit {
2122

2223
errorFielfd: boolean = true;
2324
title_component: string = "Adicionar nova categoria";
2425

26+
constructor(
27+
) { }
28+
29+
ngOnInit(): void {
30+
}
31+
2532
}

‎src/app/pages/categories/components/category-form/category-form.component.html‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
<div class="grid px-3">
22
<div class="col-12 lg:col-6 md:col-6 lg:w-6 md:w-full sm:w-full">
3-
<div class="flex flex-column gap-2">
4-
<label for="productName">Nome da categoria</label>
5-
<input pInputText id="productName" aria-describedby="product-name" placeholder="Eletronicos" />
6-
</div>
3+
<form [formGroup]="categoryForm">
4+
<div class="flex flex-column gap-2">
5+
<label for="categoryName">Nome da categoria</label>
6+
<input formControlName="name" pInputText id="categoryName" aria-describedby="category-name"
7+
placeholder="Eletronicos" />
8+
</div>
9+
</form>
710
</div>
811
<div class="col-12 lg:col-6 md:col-6 h-100 lg:w-6 md:w-full sm:w-full">
912
<div class="d-flex justify-content-center w-full align-items-center">
1013
<div class="flex flex-column gap-2">
11-
<label for="productName">Slug</label>
12-
<input pInputText id="productName" aria-describedby="product-name" placeholder="eletronicos" />
14+
<label for="categorySlug">Status</label>
15+
<p-dropdown [style]="{'width':'100%'}" [options]="status" [(ngModel)]="selectedStatus" optionLabel="name" dataKey="name" placeholder="Status" />
1316
</div>
1417
</div>
1518
</div>
@@ -18,7 +21,7 @@
1821
<div class="d-flex justify-content-center w-full align-items-center">
1922
<div class="flex flex-column gap-2">
2023
<div class="box-upload">
21-
Aqui ficará um editor de texto
24+
EDITOR DE TEXTO
2225
</div>
2326
</div>
2427
</div>
@@ -27,13 +30,13 @@
2730
<div class="col-12">
2831
<div class="d-flex justify-content-center w-full align-items-center">
2932
<div class="box-upload">
30-
upload
33+
ÁREA DE UPLOAD
3134
</div>
3235
</div>
3336
</div>
3437
</div>
3538

3639
<div class="flex justify-content-end gap-3 mt-1 px-3">
37-
<p-button label="Cancelar" severity="secondary" />
40+
<p-button label="Cancelar" severity="secondary" [routerLink]="['/dashboard/categories']" />
3841
<p-button icon="pi pi-save" label="Salvar" />
3942
</div>

‎src/app/pages/categories/components/category-form/category-form.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,8 @@
55
display: flex;
66
align-items: center;
77
justify-content: center;
8+
}
9+
10+
label {
11+
color: var(--red-600);
812
}

‎src/app/pages/categories/components/category-form/category-form.component.ts‎

Lines changed: 83 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,98 @@
1-
import { Component } from '@angular/core';
1+
import { Component, OnInit } from '@angular/core';
22
import { InputTextModule } from 'primeng/inputtext';
33
import { FileUploadModule } from 'primeng/fileupload';
4+
import { ActivatedRoute, RouterLink } from '@angular/router';
5+
import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
6+
import { CategoriesService } from '../../../../services/categories/categories.service';
7+
import { Category } from '../../../../models/Category.model';
8+
import { StatusService } from '../../../../services/status/status.service';
9+
import { Status } from '../../../../models/Status.model';
10+
import { DropdownModule } from 'primeng/dropdown';
11+
import { ProgressSpinnerModule } from 'primeng/progressspinner';
412

513
@Component({
614
selector: 'app-category-form',
715
standalone: true,
816
imports: [
917
InputTextModule,
10-
FileUploadModule
18+
FileUploadModule,
19+
ReactiveFormsModule,
20+
DropdownModule,
21+
FormsModule,
22+
ProgressSpinnerModule,
23+
RouterLink
1124
],
1225
templateUrl: './category-form.component.html',
1326
styleUrl: './category-form.component.scss'
1427
})
15-
export class CategoryFormComponent {
28+
export class CategoryFormComponent implements OnInit {
1629

30+
status: Status[] = [];
31+
loading: boolean = false;
32+
categoryForm!: FormGroup;
33+
selectedStatus: Status | undefined;
1734

18-
onUpload(evt: any) { }
35+
constructor(
36+
private fb: FormBuilder,
37+
private statusService: StatusService,
38+
private actvRoute: ActivatedRoute,
39+
private catService: CategoriesService,
40+
) { }
41+
42+
ngOnInit(): void {
43+
this.actvRoute.queryParams.subscribe((p: any) => {
44+
console.log('PARAMS CATEGORY', p);
45+
if (p['action'] === 'update') {
46+
setTimeout(() => {
47+
this.categoryById(+p['category']);
48+
}, 1500);
49+
}
50+
});
51+
52+
this.initForm();
53+
this.getAllStatus();
54+
}
55+
56+
initForm() {
57+
this.categoryForm = this.fb.group({
58+
name: ['']
59+
});
60+
}
61+
62+
getAllStatus() {
63+
this.statusService.getAllStatus().subscribe({
64+
next: (data) => {
65+
let statusFiltered: Status[] = [];
66+
data.forEach((item: Status) => {
67+
if (item.enabled.includes("categories")) {
68+
statusFiltered.push(item);
69+
}
70+
});
71+
this.status = statusFiltered;
72+
console.log('GET ALL STATUS DATA:', data, this.status);
73+
},
74+
error: (err) => {
75+
console.log('GET ALL STATUS ERR:', err);
76+
}
77+
});
78+
}
79+
80+
categoryById(catgory_id: number) {
81+
this.catService.getCategoriesById(catgory_id).subscribe({
82+
next: (data) => {
83+
console.log('PRODUCT BY ID DATA:', data);
84+
this.updateFormCategory(data);
85+
},
86+
error: (err) => {
87+
console.log('PRODUCT BY ID ERR:', err);
88+
}
89+
});
90+
}
91+
92+
updateFormCategory(category: Category) {
93+
this.categoryForm.patchValue({
94+
name: category.name
95+
});
96+
this.selectedStatus = category.status
97+
}
1998
}

‎src/app/pages/categories/components/category-list/category-list.component.html‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
<div class="grid nested-grid mt-2 mb-3">
2-
<div class="col-7">
3-
<app-breadcrumb />
2+
<div class="col-12 lg:col-7 md:col-12 sm:col-12">
3+
<app-breadcrumb [items]="breadcrumb" />
44
</div>
5-
<div class="col-2">
5+
<div class="col-12 lg:col-2 md:col-7 sm:col-12">
66
<p-dropdown [style]="{'width':'100%'}" [options]="status" [(ngModel)]="selectedStatus" optionLabel="name"
77
placeholder="Status" />
88
</div>
9-
<div class="col-3 text-center">
10-
<p-button [style]="{'width':'auto'}" label="Adicionar categoria" severity="secondary" class="w-full"
11-
[routerLink]="['edit']" />
9+
<div class="col-12 lg:col-3 md:col-5 sm:col-12 text-center sm:px-3">
10+
<p-button label="Adicionar categoria" severity="secondary" class="w-full" styleClass="w-full" [routerLink]="['edit']" [queryParams]="{ action: 'create' }" />
1211
</div>
1312
</div>
1413
<div class="px-3">
@@ -39,15 +38,14 @@
3938
<tr>
4039
<td>{{ category.id }}</td>
4140
<td>
42-
<p-avatar [image]="category.image"
43-
styleClass="mr-2" size="large" shape="circle" />
41+
<p-avatar [image]="category.image" styleClass="mr-2" size="large" shape="circle" />
4442
</td>
4543
<td>{{ category.name }}</td>
4644
<td>{{ category.qt_products }}</td>
4745
<td> <span [ngClass]="['status-' + category.status.slug]">{{ category.status.name }}</span> </td>
4846
<td class="flex justify-content-center">
4947
<p-button icon="pi pi-trash" label="Excluir" class="mr-1" severity="secondary" />
50-
<p-button icon="pi pi-pencil" label="Editar" />
48+
<p-button icon="pi pi-pencil" label="Editar" [routerLink]="['edit']" [queryParams]="{ category: category.id, action: 'update' }" />
5149
</td>
5250
</tr>
5351
</ng-template>

‎src/app/pages/categories/components/category-list/category-list.component.ts‎

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { Component, OnInit } from '@angular/core';
22
import { NgClass } from '@angular/common';
33
import { FormsModule } from '@angular/forms';
4-
import { RouterLink } from '@angular/router';
5-
import { BreadcrumbComponent } from '../../../components/breadcrumb/breadcrumb.component';
4+
import { Router, RouterLink } from '@angular/router';
65

76
import { ButtonModule } from 'primeng/button';
87
import { Table, TableModule } from 'primeng/table';
@@ -13,12 +12,10 @@ import { Category } from '../../../../models/Category.model';
1312
import { HttpClient } from '@angular/common/http';
1413
import { AvatarModule } from 'primeng/avatar';
1514
import { AvatarGroupModule } from 'primeng/avatargroup';
16-
17-
interface Status {
18-
id: number;
19-
name: string;
20-
slug: string;
21-
}
15+
import { BreadcrumbItems } from '../../../../models/Generics.model';
16+
import { BreadcrumbComponent } from '../../../components/breadcrumb/breadcrumb.component';
17+
import { StatusService } from '../../../../services/status/status.service';
18+
import { Status } from '../../../../models/Status.model';
2219

2320
@Component({
2421
selector: 'app-category-list',
@@ -33,22 +30,51 @@ export class CategoryListComponent implements OnInit {
3330
searchValue: string | undefined;
3431
selectedStatus: Status | undefined;
3532

36-
category: Category[] = [];
37-
3833
status: Status[] = [];
34+
category: Category[] = [];
35+
breadcrumb: BreadcrumbItems[] = [];
3936

4037
constructor(
38+
private router: Router,
4139
private http: HttpClient,
40+
private statusService: StatusService,
4241
private catService: CategoriesService
4342
) { }
4443

4544
ngOnInit(): void {
46-
this.http.get<Status[]>('http://localhost:3000/status').subscribe({
45+
this.allCategories();
46+
this.getAllStatus();
47+
this.checkUrl();
48+
}
49+
50+
getAllStatus() {
51+
this.statusService.getAllStatus().subscribe({
4752
next: (data) => {
48-
this.status = data;
53+
let statusFiltered: Status[] = [];
54+
data.forEach((item: Status) => {
55+
if (item.enabled.includes("categories")) {
56+
statusFiltered.push(item);
57+
}
58+
});
59+
this.status = statusFiltered;
60+
console.log('GET ALL STATUS DATA:', data, this.status);
61+
},
62+
error: (err) => {
63+
console.log('GET ALL STATUS ERR:', err);
4964
}
5065
});
51-
this.allCategories();
66+
}
67+
68+
checkUrl() {
69+
const route_url = this.router.url;
70+
const urlParts = route_url.split('/');
71+
let parts: any[] = [];
72+
urlParts.shift();
73+
74+
urlParts.forEach((item: string) => {
75+
parts.push({ label: item });
76+
});
77+
this.breadcrumb = parts;
5278
}
5379

5480
allCategories() {

‎src/app/pages/components/breadcrumb/breadcrumb.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<p-breadcrumb class="max-w-full" [model]="items" [home]="home" />
1+
<p-breadcrumb class="max-w-full capitalize" [model]="items" [home]="home" />

‎src/app/pages/components/breadcrumb/breadcrumb.component.ts‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
1-
import { Component } from '@angular/core';
1+
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
2+
import { log } from 'console';
3+
import { MenuItem } from 'primeng/api';
24
import { BreadcrumbModule } from 'primeng/breadcrumb';
3-
4-
interface MenuItem {
5-
icon?: string;
6-
route?: string;
7-
label?: string;
8-
};
5+
import { BreadcrumbItems } from '../../../models/Generics.model';
96

107
interface Home {
118
icon: string;
@@ -19,15 +16,17 @@ interface Home {
1916
templateUrl: './breadcrumb.component.html',
2017
styleUrl: './breadcrumb.component.scss'
2118
})
22-
export class BreadcrumbComponent {
19+
export class BreadcrumbComponent implements OnChanges {
20+
21+
@Input() items: BreadcrumbItems[] = [];
22+
23+
home: Home = { icon: 'pi pi-home', routerLink: '/dashboard' };
24+
// items: BreadcrumbItems[] = [];
2325

24-
home: Home = { icon: 'pi pi-home', routerLink: '/' };
25-
items: MenuItem[] = [
26-
{ label: 'Electronics' },
27-
{ label: 'Computer' },
28-
{ label: 'Accessories' },
29-
{ label: 'Keyboard' },
30-
{ label: 'Wireless' }
31-
];
26+
ngOnChanges(changes: SimpleChanges): void {
27+
if (changes['breadcrumb']) {
28+
this.items = changes['breadcrumb'].currentValue;
29+
}
30+
}
3231

3332
}

‎src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</p> -->
88
<ng-template pTemplate="footer">
99
<div class="flex gap-3 mt-1">
10-
<p-button label="Remover" severity="secondary" class="w-full" styleClass="w-full" />
10+
<p-button label="Remover" severity="secondary" class="w-full" styleClass="w-full" [routerLink]="['/dashboard/products']" />
1111
<p-button label="Editar" [routerLink]="['edit']" [queryParams]="{ product: products.id, action: 'update' }" class="w-full" styleClass="w-full" />
1212
</div>
1313
</ng-template>

0 commit comments

Comments
 (0)