From c5de2e595c21e71087dc8e382cf595b0de2ca5a4 Mon Sep 17 00:00:00 2001 From: aledguedes Date: Mon, 31 Aug 2026 12:08:04 -0300 Subject: [PATCH] Refactor pagination; add categories & manufacturers Introduce PaginationMeta-driven pagination (component + initial values) and update templates to consume pagination objects. Expand category typings (responses, create/update payloads, default query) and update CategoryService to use typed payloads and query params. Make DataTable action handler optional and add category table utils. Add full manufacturers feature (page, form, styles) and wire UI changes across products and placeholder pages to use the new pagination/model shapes. Also update route for catalog categories. --- src/app/app.routes.ts | 5 +- .../catetories/categories-default-query.ts | 7 + .../models/catetories/categories.model.ts | 47 ++- .../catetories/category-options.model.ts | 1 + .../design-system/auto-complete.model.ts | 1 + .../generals/general-delete-response.ts | 0 .../models/list-table/list-table.model.ts | 2 +- src/app/core/services/category-service.ts | 24 +- .../manufacturer-store/manufacturer-store.ts | 1 + .../design-system/data-table/data-table.ts | 2 +- .../design-system/pagination/pagination.html | 26 +- .../design-system/pagination/pagination.ts | 67 +++- .../pagination/utils/initial-values.ts | 10 + .../catalog/categories/categories.html | 13 +- .../features/catalog/categories/categories.ts | 158 +++------ .../category-form/category-form.html | 328 +++++++++-------- .../categories/category-form/category-form.ts | 100 +++--- .../manufacturer-form/manufacturer-form.css | 1 + .../manufacturer-form/manufacturer-form.html | 335 ++++++++++++++++++ .../manufacturer-form/manufacturer-form.ts | 306 ++++++++++++++++ .../catalog/manufacturer/manufacturers.css | 1 + .../catalog/manufacturer/manufacturers.html | 123 +++++++ .../catalog/manufacturer/manufacturers.ts | 257 ++++++++++++++ .../products/product-create/product-create.ts | 3 + .../administration-tab.html | 2 - .../compatibility-tab/compatibility-tab.html | 8 +- .../features/catalog/products/products.html | 9 +- src/app/features/catalog/products/products.ts | 4 + src/app/features/placeholder.html | 6 +- src/app/features/placeholder.ts | 2 - src/app/utils/category-table-collums.ts | 59 +++ 31 files changed, 1555 insertions(+), 353 deletions(-) create mode 100644 src/app/core/models/catetories/categories-default-query.ts create mode 100644 src/app/core/models/generals/general-delete-response.ts create mode 100644 src/app/design-system/pagination/utils/initial-values.ts create mode 100644 src/app/features/catalog/manufacturer/manufacturer-form/manufacturer-form.css create mode 100644 src/app/features/catalog/manufacturer/manufacturer-form/manufacturer-form.html create mode 100644 src/app/features/catalog/manufacturer/manufacturer-form/manufacturer-form.ts create mode 100644 src/app/features/catalog/manufacturer/manufacturers.css create mode 100644 src/app/features/catalog/manufacturer/manufacturers.html create mode 100644 src/app/features/catalog/manufacturer/manufacturers.ts create mode 100644 src/app/utils/category-table-collums.ts diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index a1c65a1..a905d84 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -45,8 +45,9 @@ export const routes: Routes = [ ), }, { - path: 'catalog/:sub', - loadComponent: () => import('./features/placeholder').then((m) => m.PlaceholderPageComponent), + path: 'catalog/categories', + loadComponent: () => + import('./features/catalog/categories/categories').then((m) => m.CategoriesPageComponent), }, { path: 'compatibility/:sub', diff --git a/src/app/core/models/catetories/categories-default-query.ts b/src/app/core/models/catetories/categories-default-query.ts new file mode 100644 index 0000000..5c421cf --- /dev/null +++ b/src/app/core/models/catetories/categories-default-query.ts @@ -0,0 +1,7 @@ +export interface CategoryDefaultQuery { + page: number | null; + name: string | null; + active: boolean | null; + per_page: number | null; + parent_id: string | null; +} diff --git a/src/app/core/models/catetories/categories.model.ts b/src/app/core/models/catetories/categories.model.ts index d37f33c..8258248 100644 --- a/src/app/core/models/catetories/categories.model.ts +++ b/src/app/core/models/catetories/categories.model.ts @@ -1,13 +1,50 @@ -export interface CategoryResponse { +// export interface CategoryResponse { +// id: string; +// parent_id: null; +// name: string; +// slug: string; +// description: string; +// display_order: number; +// icon: string; +// image: string; +// active: boolean; +// created_at: string; +// updated_at: string; +// } + +export interface CategoryResponse extends Record { id: string; - parent_id: null; + parent_id: string | null; name: string; slug: string; - description: string; + description: string | null; display_order: number; - icon: string; - image: string; + icon: string | null; + image: string | null; active: boolean; created_at: string; updated_at: string; + parent_name?: string; +} + +export interface CreateCategoryPayload { + parent_id?: string | null; + name: string; + slug: string; + description?: string | null; + display_order?: number; + icon?: string | null; + image?: string | null; + active?: boolean; +} + +export interface UpdateCategoryPayload { + parent_id?: string | null; + name?: string; + slug?: string; + description?: string | null; + display_order?: number; + icon?: string | null; + image?: string | null; + active?: boolean; } diff --git a/src/app/core/models/catetories/category-options.model.ts b/src/app/core/models/catetories/category-options.model.ts index daf447c..24b8ded 100644 --- a/src/app/core/models/catetories/category-options.model.ts +++ b/src/app/core/models/catetories/category-options.model.ts @@ -2,5 +2,6 @@ import { GeneralOption } from '../generals/general-options-response.model'; export interface CategoryOption extends GeneralOption { icon: string; + is_parent: boolean; description: string; } diff --git a/src/app/core/models/design-system/auto-complete.model.ts b/src/app/core/models/design-system/auto-complete.model.ts index eca1f62..c3e90e1 100644 --- a/src/app/core/models/design-system/auto-complete.model.ts +++ b/src/app/core/models/design-system/auto-complete.model.ts @@ -3,5 +3,6 @@ import { GeneralOption } from '../generals/general-options-response.model'; export interface AutocompleteOption extends GeneralOption { icon: string; disabled: boolean; + is_parent: boolean; description: string; } diff --git a/src/app/core/models/generals/general-delete-response.ts b/src/app/core/models/generals/general-delete-response.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/app/core/models/list-table/list-table.model.ts b/src/app/core/models/list-table/list-table.model.ts index c77884f..2ea95f8 100644 --- a/src/app/core/models/list-table/list-table.model.ts +++ b/src/app/core/models/list-table/list-table.model.ts @@ -28,7 +28,7 @@ export interface TableAction> { colorClass?: string; title?: string; visible?: (row: T) => boolean; - handler: (row: T) => void; + handler?: (row: T) => void; } export interface TablePaginationConfig { diff --git a/src/app/core/services/category-service.ts b/src/app/core/services/category-service.ts index e92dac4..f83db67 100644 --- a/src/app/core/services/category-service.ts +++ b/src/app/core/services/category-service.ts @@ -2,11 +2,16 @@ import { HttpClient } from '@angular/common/http'; import { inject, Injectable } from '@angular/core'; import { PaginatedResponse } from '../models/pagination/pagination.model'; import { environment } from '../../../environments/environment'; -import { CategoryResponse } from '../models/catetories/categories.model'; +import { + CategoryResponse, + CreateCategoryPayload, + UpdateCategoryPayload, +} from '../models/catetories/categories.model'; import { buildHttpParams } from './build-http-params'; import { CategoryOption } from '../models/catetories/category-options.model'; import { GeneralOptionQuery } from '../models/generals/general-option-query.model'; import { getAllResponse } from '../models/generals/general-responses-list.model'; +import { CategoryDefaultQuery } from '../models/catetories/categories-default-query'; @Injectable({ providedIn: 'root', @@ -16,8 +21,11 @@ export class CategoryService { private api = environment.apiUrl; private flag = 'category'; - getAll() { - return this.http.get>(`${this.api}/${this.flag}`); + getAll(filters: CategoryDefaultQuery) { + const params = buildHttpParams(filters); + return this.http.get>(`${this.api}/${this.flag}`, { + params, + }); } getOptions(filters: GeneralOptionQuery) { @@ -31,15 +39,15 @@ export class CategoryService { return this.http.get(`${this.api}/${this.flag}/${id}`); } - create(data: FormData) { - return this.http.post(`${this.api}/${this.flag}`, data); + create(data: CreateCategoryPayload) { + return this.http.post>(`${this.api}/${this.flag}`, data); } - update(id: string, data: FormData) { - return this.http.post(`${this.api}/${this.flag}/${id}`, data); + update(id: string, data: UpdateCategoryPayload) { + return this.http.put>(`${this.api}/${this.flag}/${id}`, data); } delete(id: string) { - return this.http.delete(`${this.api}/${this.flag}/${id}`); + return this.http.delete>(`${this.api}/${this.flag}/${id}`); } } diff --git a/src/app/core/store/manufacturer-store/manufacturer-store.ts b/src/app/core/store/manufacturer-store/manufacturer-store.ts index 5811883..af6d7c7 100644 --- a/src/app/core/store/manufacturer-store/manufacturer-store.ts +++ b/src/app/core/store/manufacturer-store/manufacturer-store.ts @@ -31,6 +31,7 @@ export class ManufacturerStore extends OptionCacheStore< icon: 'chevrons-right', hasSubOptions: true, description: option.sublabel, + is_parent: false, })), })), ); diff --git a/src/app/design-system/data-table/data-table.ts b/src/app/design-system/data-table/data-table.ts index 2607101..d9e0ee2 100644 --- a/src/app/design-system/data-table/data-table.ts +++ b/src/app/design-system/data-table/data-table.ts @@ -166,7 +166,7 @@ export class DataTableComponent> { onActionClick(action: TableAction, row: T, event: MouseEvent): void { event.stopPropagation(); - if (action.id) { + if (action.handler) { action.handler(row); } console.log('[ON ACTION CLICK]', action, action.id); diff --git a/src/app/design-system/pagination/pagination.html b/src/app/design-system/pagination/pagination.html index 2b8850a..3ae817b 100644 --- a/src/app/design-system/pagination/pagination.html +++ b/src/app/design-system/pagination/pagination.html @@ -27,7 +27,7 @@ class="appearance-none pl-2.5 pr-7 py-1 bg-gray-50 dark:bg-slate-700/80 border border-gray-200 dark:border-slate-600 rounded-lg text-xs font-semibold text-gray-800 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-[#4F8A6B]/30 hover:border-gray-300 dark:hover:border-slate-500 transition-all cursor-pointer" title="Itens por página" > - @for (opt of pageSizeOptions(); track opt) { + @for (opt of optionsSizes(); track opt) { } @@ -46,7 +46,7 @@ - @if (totalPages() > 5) { + @if (pagination().last_page > 5) {