358 lines
12 KiB
Markdown
358 lines
12 KiB
Markdown
# 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 -> existing `GET /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.ts`
|
|
- `src/app/features/website/catalog/containers/catalog-container.component.html`
|
|
- `src/app/features/website/catalog/containers/catalog-container.component.scss`
|
|
|
|
Responsibilities implemented:
|
|
|
|
- Reads the route category id.
|
|
- Requests category data through `CategoryFacade` only.
|
|
- Requests product data through `ProductFacade` only.
|
|
- 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.ts`
|
|
- `src/app/features/website/catalog/components/category-grid/category-grid.component.html`
|
|
- `src/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.ts`
|
|
- `src/app/features/website/catalog/components/product-grid/product-grid.component.html`
|
|
- `src/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.ts`
|
|
- `src/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.ts`
|
|
- `src/app/i18n/ru.ts`
|
|
- `src/app/i18n/hy.ts`
|
|
- `src/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 `HttpClient` usage.
|
|
- 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:
|
|
|
|
```bash
|
|
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.
|
|
|
|
## Sprint 10.2 Catalog UX Polish
|
|
|
|
Sprint 10.2 improves catalog UX and responsiveness without changing facades, business logic, bootstrap flow, runtime architecture, routing, authentication, or payment.
|
|
|
|
### Empty State Behavior
|
|
|
|
Two separate states are now rendered in the catalog container:
|
|
|
|
- Empty category state (`rawProducts.length === 0`):
|
|
- hides filter/sort/layout/result controls
|
|
- shows dedicated empty category component with icon, category context, friendly message, and "Browse Categories" action
|
|
- Filtered empty state (`rawProducts.length > 0 && products.length === 0`):
|
|
- shows "no filter match" message
|
|
- provides "Clear Filters" action
|
|
- keeps filter access available (sidebar on desktop, drawer trigger on tablet/mobile)
|
|
|
|
### Mobile Filter Drawer
|
|
|
|
- Desktop keeps visible sticky sidebar filters.
|
|
- Tablet and mobile switch to a drawer-based filter UI.
|
|
- Drawer includes filter groups, Reset, and Apply actions.
|
|
- Apply closes the drawer.
|
|
- Accessibility:
|
|
- drawer uses dialog semantics (`role="dialog"`, `aria-modal="true"`)
|
|
- focus trap is enabled while drawer is open
|
|
- `Esc` closes the drawer
|
|
|
|
### Mobile Sort
|
|
|
|
- Desktop keeps dropdown sort control.
|
|
- Tablet keeps compact dropdown with drawer-based filters.
|
|
- Mobile opens a bottom-sheet sort modal.
|
|
- Supported mobile sort options:
|
|
- Recommended
|
|
- Newest
|
|
- Price Low -> High
|
|
- Price High -> Low
|
|
- Rating
|
|
- Popularity
|
|
|
|
### Responsive Grid Modes and Toolbar
|
|
|
|
- Grid selector uses icon buttons and keeps active-state highlighting.
|
|
- Mobile sticky toolbar added with quick actions:
|
|
- Filters
|
|
- Sort
|
|
- Grid cycle
|
|
- Grid cycle rotates through supported layouts while preserving existing layout architecture.
|
|
|
|
### Responsive Spacing and Overflow
|
|
|
|
Catalog spacing and controls were polished for desktop/tablet/mobile:
|
|
|
|
- filter/input/button spacing
|
|
- sort/reset row behavior (single row on desktop, stacked naturally on mobile)
|
|
- card and grid spacing
|
|
- search block spacing
|
|
- drawer/sheet interaction surfaces
|
|
- horizontal overflow prevention
|
|
|
|
## Sprint UI Polish (Visual Only)
|
|
|
|
This sprint applies visual and responsive UX polish only. No facade contracts, business logic, API contracts, runtime/bootstrap architecture, or widget contracts were changed.
|
|
|
|
### Desktop Layout
|
|
|
|
- Catalog products section uses a cleaner two-column structure with consistent spacing tokens (8/12/16/24/32).
|
|
- Filters panel remains sticky on desktop and uses collapsible sections with smooth expand/collapse animation.
|
|
- Product cards keep consistent image height/aspect ratio and improved vertical rhythm between image/title/rating/price/actions.
|
|
- Product action controls are vertical floating circles in the image top-right zone with fixed spacing and no overlap.
|
|
|
|
### Tablet Layout
|
|
|
|
- Sidebar filters transition into drawer interaction for better content width.
|
|
- Sort and layout controls retain consistent sizing and spacing.
|
|
- Grid/list results avoid horizontal overflow and preserve button/input containment.
|
|
|
|
### Mobile Layout
|
|
|
|
- Permanent sidebar is hidden.
|
|
- Sticky toolbar provides three entry points: Filters, Sort, Grid.
|
|
- Filters open in drawer form with scrollable content and fixed bottom actions.
|
|
- Sort and Grid open bottom-sheet style dialogs.
|
|
- Focus states and keyboard dismissal (`Esc`) are preserved for all overlays.
|
|
|
|
### Grid Types
|
|
|
|
- `grid`
|
|
- `large-grid`
|
|
- `compact-grid`
|
|
- `list`
|
|
|
|
All grid switch icons are normalized in size and selected state is visually highlighted.
|
|
|
|
### Filter Drawer and Sections
|
|
|
|
- Filter groups (Price, Availability, Rating, Brand, etc.) are collapsible.
|
|
- Range inputs are stacked vertically (`From`, `To`) with full-width controls and 12px+ spacing.
|
|
- Slider remains below price inputs for predictable scan order.
|
|
|
|
### Product Card Anatomy
|
|
|
|
- Image area: square ratio, `object-fit: contain`, padded image content.
|
|
- Status elements (discount/stock/badges) positioned to avoid action collisions.
|
|
- Actions: top-right vertical controls with equal circular dimensions.
|
|
- Content: title, optional description, rating, pricing, stock indicator, CTA.
|
|
|
|
### Animations
|
|
|
|
- Card hover: subtle elevation + `translateY(-2px)`.
|
|
- Button/selector transitions: ~180-200ms.
|
|
- Filter group expand/collapse: smooth height/opacity transition.
|
|
- Drawer and sheet overlays: subtle slide/fade entrance.
|
|
|
|
### Empty and Loading States
|
|
|
|
- Empty results state keeps friendly message and action while hiding non-essential catalog controls when no products are rendered.
|
|
- Skeletons for cards/results keep stable heights to reduce layout shift.
|
|
|
|
### Accessibility Notes
|
|
|
|
- Added/standardized visible `:focus-visible` outlines for interactive elements.
|
|
- Product quick action controls now expose aria labels.
|
|
- Modal/drawer interactions continue to use dialog semantics and focus trap.
|
|
|
|
### Localization and Accessibility
|
|
|
|
- New strings for empty states, drawer/sheet UI, and toolbar were added to all languages:
|
|
- `src/app/i18n/en.ts`
|
|
- `src/app/i18n/ru.ts`
|
|
- `src/app/i18n/hy.ts`
|
|
- `src/app/i18n/translations.ts`
|
|
- No hardcoded catalog UX strings were introduced for Sprint 10.2 additions.
|
|
|
|
## Sprint 11 Search & Discovery Engine
|
|
|
|
Sprint 11 introduces a reusable, backend-driven Search and Discovery architecture while preserving platform boundaries and existing domain models.
|
|
|
|
### Search Domain Models
|
|
|
|
Core search models were added under:
|
|
|
|
- `src/app/core/search/models/search.model.ts`
|
|
- `src/app/core/search/models/search-state.model.ts`
|
|
|
|
Model coverage includes:
|
|
|
|
- `SearchQuery`
|
|
- `SearchResult`
|
|
- `FilterGroup`
|
|
- `FilterOption`
|
|
- `SortOption`
|
|
- `SearchSuggestion`
|
|
- `SearchHistory`
|
|
- `SearchState`
|
|
|
|
### Search Entry Point
|
|
|
|
- `src/app/facades/platform/search.facade.ts`
|
|
|
|
`SearchFacade` is now the search orchestration entry point for the catalog UX and provides:
|
|
|
|
- backend catalog loading bridge for search query payloads
|
|
- metadata-driven sort option generation
|
|
- metadata-driven dynamic filter group generation
|
|
- live suggestions generation
|
|
- in-memory filter metadata memoization
|
|
- reusable filtering, sorting, and pagination helpers
|
|
- query param serialization/deserialization for URL synchronization
|
|
|
|
### History Service
|
|
|
|
- `src/app/core/search/services/search-history.service.ts`
|
|
|
|
Search history moved to a reusable core service with:
|
|
|
|
- recent search tracking
|
|
- popular search support
|
|
- clear/reset support
|
|
|
|
### Catalog UI Integration
|
|
|
|
Catalog UI now consumes Search domain metadata and state:
|
|
|
|
- `src/app/features/website/catalog/containers/catalog-container.component.ts`
|
|
- `src/app/features/website/catalog/components/search-box/search-box.component.ts`
|
|
- `src/app/features/website/catalog/components/filters-panel/filters-panel.component.ts`
|
|
- `src/app/features/website/catalog/components/sorting-control/sorting-control.component.ts`
|
|
|
|
Implemented behaviors:
|
|
|
|
- live suggestions
|
|
- recent + popular searches
|
|
- keyboard navigation in search box (up/down/enter/escape)
|
|
- clear search action
|
|
- dynamic filters for checkbox, radio, toggle, range, slider, color, size, rating, availability
|
|
- URL query synchronization with `SearchState`
|
|
- page reload restore from query params
|
|
|
|
### Validation
|
|
|
|
Completed validation for Sprint 11 integration:
|
|
|
|
- `npm run build` passes successfully
|
|
- facades remain the UI data boundary
|
|
- no authentication changes
|
|
- no payment changes
|
|
- no bootstrap/runtime contract changes
|