integração com serviço on line

src/app/models/Generics.model.ts

@@ -1,4 +1,15 @@
 export interface ProdForm {
     isCreate: boolean;
     product_id: number;
+};
+export interface BreadcrumbItems {
+    icon?: string;
+    route?: string;
+    label?: string;
+};
+
+export interface MenuList {
+    label: string;
+    router: string;
+    icon: string;
 }

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

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { CategoryFormComponent } from '../category-form/category-form.component';
 
 import { CardModule } from 'primeng/card';
 import { ButtonModule } from 'primeng/button';
 import { InputTextModule } from 'primeng/inputtext';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-category-edit',
@@ -17,9 +18,15 @@ import { InputTextModule } from 'primeng/inputtext';
   templateUrl: './category-edit.component.html',
   styleUrl: './category-edit.component.scss'
 })
-export class CategoryEditComponent {
+export class CategoryEditComponent implements OnInit {
 
   errorFielfd: boolean = true;
   title_component: string = "Adicionar nova categoria";
 
+  constructor(
+  ) { }
+
+  ngOnInit(): void {
+  }
+
 }

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

@@ -1,15 +1,18 @@
 <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">
-            <label for="productName">Nome da categoria</label>
-            <input pInputText id="productName" aria-describedby="product-name" placeholder="Eletronicos" />
-        </div>
+        <form [formGroup]="categoryForm">
+            <div class="flex flex-column gap-2">
+                <label for="categoryName">Nome da categoria</label>
+                <input formControlName="name" pInputText id="categoryName" aria-describedby="category-name"
+                    placeholder="Eletronicos" />
+            </div>
+        </form>
     </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">
-                <label for="productName">Slug</label>
-                <input pInputText id="productName" aria-describedby="product-name" placeholder="eletronicos" />
+                <label for="categorySlug">Status</label>
+                <p-dropdown [style]="{'width':'100%'}" [options]="status" [(ngModel)]="selectedStatus" optionLabel="name" dataKey="name" placeholder="Status" />
             </div>
         </div>
     </div>
@@ -18,7 +21,7 @@
         <div class="d-flex justify-content-center w-full align-items-center">
             <div class="flex flex-column gap-2">
                 <div class="box-upload">
-                    Aqui ficará um editor de texto
+                    EDITOR DE TEXTO
                 </div>
             </div>
         </div>
@@ -27,13 +30,13 @@
     <div class="col-12">
         <div class="d-flex justify-content-center w-full align-items-center">
             <div class="box-upload">
-                upload
+                ÁREA DE UPLOAD
             </div>
         </div>
     </div>
 </div>
 
 <div class="flex justify-content-end gap-3 mt-1 px-3">
-    <p-button label="Cancelar" severity="secondary" />
+    <p-button label="Cancelar" severity="secondary" [routerLink]="['/dashboard/categories']" />
     <p-button icon="pi pi-save" label="Salvar" />
 </div>

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

@@ -5,4 +5,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
+}
+
+label {
+    color: var(--red-600);
 }

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

@@ -1,19 +1,98 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { InputTextModule } from 'primeng/inputtext';
 import { FileUploadModule } from 'primeng/fileupload';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CategoriesService } from '../../../../services/categories/categories.service';
+import { Category } from '../../../../models/Category.model';
+import { StatusService } from '../../../../services/status/status.service';
+import { Status } from '../../../../models/Status.model';
+import { DropdownModule } from 'primeng/dropdown';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
 
 @Component({
   selector: 'app-category-form',
   standalone: true,
   imports: [
     InputTextModule,
-    FileUploadModule
+    FileUploadModule,
+    ReactiveFormsModule,
+    DropdownModule,
+    FormsModule,
+    ProgressSpinnerModule,
+    RouterLink
   ],
   templateUrl: './category-form.component.html',
   styleUrl: './category-form.component.scss'
 })
-export class CategoryFormComponent {
+export class CategoryFormComponent implements OnInit {
 
+  status: Status[] = [];
+  loading: boolean = false;
+  categoryForm!: FormGroup;
+  selectedStatus: Status | undefined;
 
-  onUpload(evt: any) { }
+  constructor(
+    private fb: FormBuilder,
+    private statusService: StatusService,
+    private actvRoute: ActivatedRoute,
+    private catService: CategoriesService,
+  ) { }
+
+  ngOnInit(): void {
+    this.actvRoute.queryParams.subscribe((p: any) => {
+      console.log('PARAMS CATEGORY', p);
+      if (p['action'] === 'update') {
+        setTimeout(() => {
+          this.categoryById(+p['category']);
+        }, 1500);
+      }
+    });
+
+    this.initForm();
+    this.getAllStatus();
+  }
+
+  initForm() {
+    this.categoryForm = this.fb.group({
+      name: ['']
+    });
+  }
+
+  getAllStatus() {
+    this.statusService.getAllStatus().subscribe({
+      next: (data) => {
+        let statusFiltered: Status[] = [];
+        data.forEach((item: Status) => {
+          if (item.enabled.includes("categories")) {
+            statusFiltered.push(item);
+          }
+        });
+        this.status = statusFiltered;
+        console.log('GET ALL STATUS DATA:', data, this.status);
+      },
+      error: (err) => {
+        console.log('GET ALL STATUS ERR:', err);
+      }
+    });
+  }
+
+  categoryById(catgory_id: number) {
+    this.catService.getCategoriesById(catgory_id).subscribe({
+      next: (data) => {
+        console.log('PRODUCT BY ID DATA:', data);
+        this.updateFormCategory(data);
+      },
+      error: (err) => {
+        console.log('PRODUCT BY ID ERR:', err);
+      }
+    });
+  }
+
+  updateFormCategory(category: Category) {
+    this.categoryForm.patchValue({
+      name: category.name
+    });
+    this.selectedStatus = category.status
+  }
 }

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

@@ -1,14 +1,13 @@
 <div class="grid nested-grid mt-2 mb-3">
-    <div class="col-7">
-        <app-breadcrumb />
+    <div class="col-12 lg:col-7 md:col-12 sm:col-12">
+        <app-breadcrumb [items]="breadcrumb" />
     </div>
-    <div class="col-2">
+    <div class="col-12 lg:col-2 md:col-7 sm:col-12">
         <p-dropdown [style]="{'width':'100%'}" [options]="status" [(ngModel)]="selectedStatus" optionLabel="name"
             placeholder="Status" />
     </div>
-    <div class="col-3 text-center">
-        <p-button [style]="{'width':'auto'}" label="Adicionar categoria" severity="secondary" class="w-full"
-            [routerLink]="['edit']" />
+    <div class="col-12 lg:col-3 md:col-5 sm:col-12 text-center sm:px-3">
+        <p-button label="Adicionar categoria" severity="secondary" class="w-full" styleClass="w-full" [routerLink]="['edit']" [queryParams]="{ action: 'create' }" />
     </div>
 </div>
 <div class="px-3">
@@ -39,15 +38,14 @@
             <tr>
                 <td>{{ category.id }}</td>
                 <td>
-                    <p-avatar [image]="category.image"
-                        styleClass="mr-2" size="large" shape="circle" />
+                    <p-avatar [image]="category.image" styleClass="mr-2" size="large" shape="circle" />
                 </td>
                 <td>{{ category.name }}</td>
                 <td>{{ category.qt_products }}</td>
                 <td> <span [ngClass]="['status-' + category.status.slug]">{{ category.status.name }}</span> </td>
                 <td class="flex justify-content-center">
                     <p-button icon="pi pi-trash" label="Excluir" class="mr-1" severity="secondary" />
-                    <p-button icon="pi pi-pencil" label="Editar" />
+                    <p-button icon="pi pi-pencil" label="Editar"  [routerLink]="['edit']" [queryParams]="{ category: category.id, action: 'update' }" />
                 </td>
             </tr>
         </ng-template>

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

@@ -1,8 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { NgClass } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { RouterLink } from '@angular/router';
-import { BreadcrumbComponent } from '../../../components/breadcrumb/breadcrumb.component';
+import { Router, RouterLink } from '@angular/router';
 
 import { ButtonModule } from 'primeng/button';
 import { Table, TableModule } from 'primeng/table';
@@ -13,12 +12,10 @@ import { Category } from '../../../../models/Category.model';
 import { HttpClient } from '@angular/common/http';
 import { AvatarModule } from 'primeng/avatar';
 import { AvatarGroupModule } from 'primeng/avatargroup';
-
-interface Status {
-  id: number;
-  name: string;
-  slug: string;
-}
+import { BreadcrumbItems } from '../../../../models/Generics.model';
+import { BreadcrumbComponent } from '../../../components/breadcrumb/breadcrumb.component';
+import { StatusService } from '../../../../services/status/status.service';
+import { Status } from '../../../../models/Status.model';
 
 @Component({
   selector: 'app-category-list',
@@ -33,22 +30,51 @@ export class CategoryListComponent implements OnInit {
   searchValue: string | undefined;
   selectedStatus: Status | undefined;
 
-  category: Category[] = [];
-
   status: Status[] = [];
+  category: Category[] = [];
+  breadcrumb: BreadcrumbItems[] = [];
 
   constructor(
+    private router: Router,
     private http: HttpClient,
+    private statusService: StatusService,
     private catService: CategoriesService
   ) { }
 
   ngOnInit(): void {
-    this.http.get<Status[]>('http://localhost:3000/status').subscribe({
+    this.allCategories();
+    this.getAllStatus();
+    this.checkUrl();
+  }
+
+  getAllStatus() {
+    this.statusService.getAllStatus().subscribe({
       next: (data) => {
-        this.status = data;
+        let statusFiltered: Status[] = [];
+        data.forEach((item: Status) => {
+          if (item.enabled.includes("categories")) {
+            statusFiltered.push(item);
+          }
+        });
+        this.status = statusFiltered;
+        console.log('GET ALL STATUS DATA:', data, this.status);
+      },
+      error: (err) => {
+        console.log('GET ALL STATUS ERR:', err);
       }
     });
-    this.allCategories();
+  }
+
+  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;
   }
 
   allCategories() {

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

@@ -1 +1 @@
-<p-breadcrumb class="max-w-full" [model]="items" [home]="home" />
+<p-breadcrumb class="max-w-full capitalize" [model]="items" [home]="home" />

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

@@ -1,11 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { log } from 'console';
+import { MenuItem } from 'primeng/api';
 import { BreadcrumbModule } from 'primeng/breadcrumb';
-
-interface MenuItem {
-  icon?: string;
-  route?: string;
-  label?: string;
-};
+import { BreadcrumbItems } from '../../../models/Generics.model';
 
 interface Home {
   icon: string;
@@ -19,15 +16,17 @@ interface Home {
   templateUrl: './breadcrumb.component.html',
   styleUrl: './breadcrumb.component.scss'
 })
-export class BreadcrumbComponent {
+export class BreadcrumbComponent implements OnChanges {
+
+  @Input() items: BreadcrumbItems[] = [];
+
+  home: Home = { icon: 'pi pi-home', routerLink: '/dashboard' };
+  // items: BreadcrumbItems[] = [];
 
-  home: Home = { icon: 'pi pi-home', routerLink: '/' };
-  items: MenuItem[] = [
-    { label: 'Electronics' },
-    { label: 'Computer' },
-    { label: 'Accessories' },
-    { label: 'Keyboard' },
-    { label: 'Wireless' }
-  ];
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['breadcrumb']) {
+      this.items = changes['breadcrumb'].currentValue;
+    }
+  }
 
 }

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

@@ -7,7 +7,7 @@
     </p> -->
     <ng-template pTemplate="footer">
         <div class="flex gap-3 mt-1">
-            <p-button label="Remover" severity="secondary" class="w-full" styleClass="w-full" />
+            <p-button label="Remover" severity="secondary" class="w-full" styleClass="w-full" [routerLink]="['/dashboard/products']" />
             <p-button label="Editar" [routerLink]="['edit']" [queryParams]="{ product: products.id, action: 'update' }" class="w-full" styleClass="w-full" />
         </div>
     </ng-template>

src/app/pages/components/thumbnail/thumbnail-products/thumbnail-products.component.scss

@@ -14,5 +14,7 @@
 }
 
 ::ng-deep .p-card .p-card-title {
-    height: 95px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }