4.7 KiB
Catalog Module Report
Scope
Sprint 5 added a Catalog Module on the frozen platform architecture. No backend APIs, authentication, payment, or bootstrap contracts were changed.
The catalog uses existing domain boundaries:
- Category data:
CategoryFacade->CategoryService-> Category Repository -> existingGET /category - Product data:
ProductFacade->ProductDataService-> Product Provider -> existing product/category item endpoints
Implemented Module
Catalog Container
src/app/features/website/catalog/containers/catalog-container.component.tssrc/app/features/website/catalog/containers/catalog-container.component.htmlsrc/app/features/website/catalog/containers/catalog-container.component.scss
Responsibilities implemented:
- Reads the route category id.
- Requests category data through
CategoryFacadeonly. - Requests product data through
ProductFacadeonly. - Determines whether the current category has child categories.
- Renders category grid when child categories exist.
- Renders product grid when no child categories exist.
- Supports root catalog entry with root categories.
- Handles loading, empty, and error states.
- Cancels prior category/product data subscriptions when the route changes.
No HttpClient, backend DTO, auth, payment, bootstrap, or tenant-specific logic is used in the container.
Category Grid
src/app/features/website/catalog/components/category-grid/category-grid.component.tssrc/app/features/website/catalog/components/category-grid/category-grid.component.htmlsrc/app/features/website/catalog/components/category-grid/category-grid.component.scss
Reusable category grid implemented with:
- Input:
Category[] - Output: selected
Category - Responsive grid layout
- Domain model only
- No data fetching
- No backend DTOs
Product Grid
src/app/features/website/catalog/components/product-grid/product-grid.component.tssrc/app/features/website/catalog/components/product-grid/product-grid.component.htmlsrc/app/features/website/catalog/components/product-grid/product-grid.component.scss
Reusable product grid implemented with:
- Input:
Product[] - Output: selected
Product - Output: add-to-cart payload
- Output: product preview id
- Responsive grid layout
- Uses existing reusable product card
- No
HttpClient - No backend DTOs
Product Card Compatibility
src/app/components/product-card/product-card.component.tssrc/app/components/product-card/product-card.component.html
Updated the reusable product card to depend on the Product Domain type and added an explicit selected output.
The product card remains input/output-only and does not use services, storage, HttpClient, or environment configuration. It displays image, title, price, discount, badges, and stock.
Catalog State
src/app/features/website/catalog/models/catalog-state.model.ts
Prepared future state architecture for:
- Category
- Search
- Sort
- Price range
- Attributes
- Pagination
- Filters
Backend filtering was intentionally not implemented in this sprint.
Navigation
Updated routes in src/app/app.routes.ts:
/catalog/catalog/:id
Both routes load the same catalog container. Legacy category URLs redirect to the catalog route:
/category/:id->/catalog/:id/category/:id/items->/catalog/:id
Home category links now point to /catalog/:id.
Unlimited Category Depth
Unlimited nesting is supported by the Category Domain tree utilities from Sprint 4. The catalog container does not assume a fixed depth. For any category id, it asks CategoryFacade.getChildren(categoryId):
- if children exist, it renders the category grid
- if no children exist, it loads the product grid
This same decision repeats for every category route depth.
Localization
Added catalog translations in:
src/app/i18n/en.tssrc/app/i18n/ru.tssrc/app/i18n/hy.tssrc/app/i18n/translations.ts
Validation
Completed checks:
- Unlimited category depth is supported through facade child lookup and recursive category domain tree utilities.
- Product grid is reusable and consumes
Product[]. - Category grid is reusable and consumes
Category[]. - Catalog components use domain models only.
- Catalog data requests go through facades only.
- DTOs remain isolated outside the catalog module.
- Catalog module has no
HttpClientusage. - Product card has no services, storage,
HttpClient, or environment usage. - Authentication was not modified.
- Payment was not modified.
- Bootstrap contracts were not modified.
- Backend APIs were not modified.
Build validation passed:
npm run build
Stop Point
Catalog Module implementation is complete for Sprint 5. Stop here for approval before starting the next module or any Builder/Backoffice work.