diff --git a/package-lock.json b/package-lock.json index 476b2b7..f02d078 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,11 +8,15 @@ "name": "dexarmarket", "version": "0.0.0", "dependencies": { + "@angular/animations": "^21.1.5", + "@angular/cdk": "^21.1.5", "@angular/common": "^21.0.6", "@angular/compiler": "^21.0.6", "@angular/core": "^21.0.6", "@angular/forms": "^21.0.6", + "@angular/material": "^21.1.5", "@angular/platform-browser": "^21.0.6", + "@angular/platform-browser-dynamic": "^21.1.5", "@angular/router": "^21.0.6", "@angular/service-worker": "^21.0.6", "primeicons": "^7.0.0", @@ -324,6 +328,21 @@ "yarn": ">= 1.13.0" } }, + "node_modules/@angular/animations": { + "version": "21.1.5", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-21.1.5.tgz", + "integrity": "sha512-gsqHX8lCYV8cgVtHs0iLwrX8SVlmcjUF44l/xCc/jBC/TeKWRl2e6Jqrn1Wcd0NDlGiNsm+mYNyqMyy5/I7kjw==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0" + }, + "peerDependencies": { + "@angular/core": "21.1.5" + } + }, "node_modules/@angular/build": { "version": "21.1.0", "resolved": "https://registry.npmjs.org/@angular/build/-/build-21.1.0.tgz", @@ -472,6 +491,22 @@ "dev": true, "license": "MIT" }, + "node_modules/@angular/cdk": { + "version": "21.1.5", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-21.1.5.tgz", + "integrity": "sha512-AlQPgqe3LLwXCyrDwYSX3m/WKnl2ppCMW7Gb+7bJpIcpMdWYEpSOSQF318jXGYIysKg43YbdJ1tWhJWY/cbn3w==", + "license": "MIT", + "dependencies": { + "parse5": "^8.0.0", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": "^21.0.0 || ^22.0.0", + "@angular/core": "^21.0.0 || ^22.0.0", + "@angular/platform-browser": "^21.0.0 || ^22.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/cli": { "version": "21.1.0", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-21.1.0.tgz", @@ -613,6 +648,23 @@ "rxjs": "^6.5.3 || ^7.4.0" } }, + "node_modules/@angular/material": { + "version": "21.1.5", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-21.1.5.tgz", + "integrity": "sha512-D6JvFulPvIKhPJ52prMV7DxwYMzcUpHar11ZcMb7r9WQzUfCS3FDPXfMAce5n3h+3kFccfmmGpnyBwqTlLPSig==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/cdk": "21.1.5", + "@angular/common": "^21.0.0 || ^22.0.0", + "@angular/core": "^21.0.0 || ^22.0.0", + "@angular/forms": "^21.0.0 || ^22.0.0", + "@angular/platform-browser": "^21.0.0 || ^22.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/platform-browser": { "version": "21.0.6", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.0.6.tgz", @@ -635,6 +687,24 @@ } } }, + "node_modules/@angular/platform-browser-dynamic": { + "version": "21.1.5", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-21.1.5.tgz", + "integrity": "sha512-Pd8nPbJSIONnze1WS9wLBAtaFw4TYIH+ZGjKHS9G1E9l09tDWtHWyB7dY82Sc//Nc8iR4V7dcsbUmFjOJHThww==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0" + }, + "peerDependencies": { + "@angular/common": "21.1.5", + "@angular/compiler": "21.1.5", + "@angular/core": "21.1.5", + "@angular/platform-browser": "21.1.5" + } + }, "node_modules/@angular/router": { "version": "21.0.6", "resolved": "https://registry.npmjs.org/@angular/router/-/router-21.0.6.tgz", @@ -7687,7 +7757,6 @@ "version": "8.0.0", "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz", "integrity": "sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==", - "dev": true, "license": "MIT", "dependencies": { "entities": "^6.0.0" @@ -7741,7 +7810,6 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz", "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==", - "dev": true, "license": "BSD-2-Clause", "engines": { "node": ">=0.12" diff --git a/package.json b/package.json index 13980de..fb051d4 100644 --- a/package.json +++ b/package.json @@ -16,11 +16,15 @@ }, "private": true, "dependencies": { + "@angular/animations": "^21.1.5", + "@angular/cdk": "^21.1.5", "@angular/common": "^21.0.6", "@angular/compiler": "^21.0.6", "@angular/core": "^21.0.6", "@angular/forms": "^21.0.6", + "@angular/material": "^21.1.5", "@angular/platform-browser": "^21.0.6", + "@angular/platform-browser-dynamic": "^21.1.5", "@angular/router": "^21.0.6", "@angular/service-worker": "^21.0.6", "primeicons": "^7.0.0", diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 35bef9f..21b372d 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -3,6 +3,7 @@ import { provideRouter, withInMemoryScrolling } from '@angular/router'; import { provideHttpClient, withInterceptors } from '@angular/common/http'; import { routes } from './app.routes'; +import { mockDataInterceptor } from './interceptors/mock-data.interceptor'; import { cacheInterceptor } from './interceptors/cache.interceptor'; import { provideServiceWorker } from '@angular/service-worker'; @@ -15,7 +16,7 @@ export const appConfig: ApplicationConfig = { withInMemoryScrolling({ scrollPositionRestoration: 'top' }) ), provideHttpClient( - withInterceptors([cacheInterceptor]) + withInterceptors([mockDataInterceptor, cacheInterceptor]) ), provideServiceWorker('ngsw-worker.js', { enabled: !isDevMode(), registrationStrategy: 'registerWhenStable:30000' diff --git a/src/app/components/items-carousel/items-carousel.component.html b/src/app/components/items-carousel/items-carousel.component.html index 834cebb..003bff8 100644 --- a/src/app/components/items-carousel/items-carousel.component.html +++ b/src/app/components/items-carousel/items-carousel.component.html @@ -22,6 +22,13 @@ @if (product.discount > 0) { -{{ product.discount }}% } + @if (product.badges && product.badges.length > 0) { +
+ @for (badge of product.badges; track badge) { + {{ badge }} + } +
+ }
diff --git a/src/app/components/items-carousel/items-carousel.component.ts b/src/app/components/items-carousel/items-carousel.component.ts index 6773297..d237bb8 100644 --- a/src/app/components/items-carousel/items-carousel.component.ts +++ b/src/app/components/items-carousel/items-carousel.component.ts @@ -7,7 +7,7 @@ import { TagModule } from 'primeng/tag'; import { ApiService, CartService } from '../../services'; import { Item } from '../../models'; import { environment } from '../../../environments/environment'; -import { getDiscountedPrice, getMainImage } from '../../utils/item.utils'; +import { getDiscountedPrice, getMainImage, getBadgeClass } from '../../utils/item.utils'; @Component({ selector: 'app-items-carousel', @@ -96,6 +96,7 @@ export class ItemsCarouselComponent implements OnInit { readonly getItemImage = getMainImage; readonly getDiscountedPrice = getDiscountedPrice; + readonly getBadgeClass = getBadgeClass; addToCart(event: Event, item: Item): void { event.preventDefault(); diff --git a/src/app/interceptors/mock-data.interceptor.ts b/src/app/interceptors/mock-data.interceptor.ts new file mode 100644 index 0000000..6bfd703 --- /dev/null +++ b/src/app/interceptors/mock-data.interceptor.ts @@ -0,0 +1,765 @@ +import { HttpInterceptorFn, HttpResponse } from '@angular/common/http'; +import { of, delay } from 'rxjs'; +import { environment } from '../../environments/environment'; + +// ─── Mock Categories (backOffice format: string IDs, img, subcategories, visible) ─── + +const MOCK_CATEGORIES = [ + { + id: 'electronics', + categoryID: 1, + name: 'Электроника', + parentID: 0, + visible: true, + priority: 1, + img: 'https://images.unsplash.com/photo-1498049794561-7780e7231661?w=400&h=300&fit=crop', + icon: 'https://images.unsplash.com/photo-1498049794561-7780e7231661?w=400&h=300&fit=crop', + projectId: 'dexar', + itemCount: 15, + subcategories: [ + { + id: 'smartphones', + name: 'Смартфоны', + visible: true, + priority: 1, + img: 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=400&h=300&fit=crop', + categoryId: 'electronics', + parentId: 'electronics', + itemCount: 8, + hasItems: true, + subcategories: [] + }, + { + id: 'laptops', + name: 'Ноутбуки', + visible: true, + priority: 2, + img: 'https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=400&h=300&fit=crop', + categoryId: 'electronics', + parentId: 'electronics', + itemCount: 6, + hasItems: true, + subcategories: [] + } + ] + }, + { + id: 'clothing', + categoryID: 2, + name: 'Одежда', + parentID: 0, + visible: true, + priority: 2, + img: 'https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=400&h=300&fit=crop', + icon: 'https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=400&h=300&fit=crop', + projectId: 'dexar', + itemCount: 25, + subcategories: [ + { + id: 'mens', + name: 'Мужская', + visible: true, + priority: 1, + img: 'https://images.unsplash.com/photo-1490578474895-699cd4e2cf59?w=400&h=300&fit=crop', + categoryId: 'clothing', + parentId: 'clothing', + itemCount: 12, + hasItems: true, + subcategories: [] + }, + { + id: 'womens', + name: 'Женская', + visible: true, + priority: 2, + img: 'https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?w=400&h=300&fit=crop', + categoryId: 'clothing', + parentId: 'clothing', + itemCount: 13, + hasItems: true, + subcategories: [] + } + ] + }, + { + id: 'home', + categoryID: 3, + name: 'Дом и сад', + parentID: 0, + visible: true, + priority: 3, + img: 'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=400&h=300&fit=crop', + icon: 'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=400&h=300&fit=crop', + projectId: 'dexar', + itemCount: 8, + subcategories: [] + }, + // Subcategories as flat entries (for the legacy flat category list) + { + id: 'smartphones', + categoryID: 11, + name: 'Смартфоны', + parentID: 1, + visible: true, + priority: 1, + img: 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=400&h=300&fit=crop', + icon: 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=400&h=300&fit=crop', + itemCount: 8 + }, + { + id: 'laptops', + categoryID: 12, + name: 'Ноутбуки', + parentID: 1, + visible: true, + priority: 2, + img: 'https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=400&h=300&fit=crop', + icon: 'https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=400&h=300&fit=crop', + itemCount: 6 + }, + { + id: 'mens', + categoryID: 21, + name: 'Мужская одежда', + parentID: 2, + visible: true, + priority: 1, + img: 'https://images.unsplash.com/photo-1490578474895-699cd4e2cf59?w=400&h=300&fit=crop', + icon: 'https://images.unsplash.com/photo-1490578474895-699cd4e2cf59?w=400&h=300&fit=crop', + itemCount: 12 + }, + { + id: 'womens', + categoryID: 22, + name: 'Женская одежда', + parentID: 2, + visible: true, + priority: 2, + img: 'https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?w=400&h=300&fit=crop', + icon: 'https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?w=400&h=300&fit=crop', + itemCount: 13 + } +]; + +// ─── Mock Items (backOffice format with ALL fields) ─── + +const MOCK_ITEMS: any[] = [ + { + id: 'iphone15', + itemID: 101, + name: 'iPhone 15 Pro Max', + visible: true, + priority: 1, + quantity: 50, + price: 149990, + discount: 0, + currency: 'RUB', + rating: 4.8, + remainings: 'high', + categoryID: 11, + imgs: [ + 'https://images.unsplash.com/photo-1695048133142-1a20484d2569?w=600&h=400&fit=crop', + 'https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=600&h=400&fit=crop' + ], + photos: [ + { url: 'https://images.unsplash.com/photo-1695048133142-1a20484d2569?w=600&h=400&fit=crop' }, + { url: 'https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=600&h=400&fit=crop' } + ], + tags: ['new', 'featured', 'apple'], + badges: ['new', 'bestseller'], + simpleDescription: 'Новейший iPhone с титановым корпусом и чипом A17 Pro', + description: [ + { key: 'Цвет', value: 'Натуральный титан' }, + { key: 'Память', value: '256 ГБ' }, + { key: 'Дисплей', value: '6.7" Super Retina XDR' }, + { key: 'Процессор', value: 'A17 Pro' }, + { key: 'Камера', value: '48 Мп основная' }, + { key: 'Аккумулятор', value: '4441 мАч' } + ], + descriptionFields: [ + { key: 'Цвет', value: 'Натуральный титан' }, + { key: 'Память', value: '256 ГБ' }, + { key: 'Дисплей', value: '6.7" Super Retina XDR' }, + { key: 'Процессор', value: 'A17 Pro' }, + { key: 'Камера', value: '48 Мп основная' }, + { key: 'Аккумулятор', value: '4441 мАч' } + ], + subcategoryId: 'smartphones', + translations: { + en: { + name: 'iPhone 15 Pro Max', + simpleDescription: 'Latest iPhone with titanium body and A17 Pro chip', + description: [ + { key: 'Color', value: 'Natural Titanium' }, + { key: 'Storage', value: '256GB' }, + { key: 'Display', value: '6.7" Super Retina XDR' }, + { key: 'Chip', value: 'A17 Pro' }, + { key: 'Camera', value: '48MP main' }, + { key: 'Battery', value: '4441 mAh' } + ] + } + }, + comments: [ + { id: 'c1', text: 'Отличный телефон! Камера просто огонь 🔥', author: 'Иван Петров', stars: 5, createdAt: '2025-12-15T10:30:00Z' }, + { id: 'c2', text: 'Батарея держит весь день, очень доволен.', author: 'Мария Козлова', stars: 4, createdAt: '2026-01-05T14:20:00Z' } + ], + callbacks: [ + { rating: 5, content: 'Отличный телефон! Камера просто огонь 🔥', userID: 'Иван Петров', timestamp: '2025-12-15T10:30:00Z' }, + { rating: 4, content: 'Батарея держит весь день, очень доволен.', userID: 'Мария Козлова', timestamp: '2026-01-05T14:20:00Z' } + ], + questions: [] + }, + { + id: 'samsung-s24', + itemID: 102, + name: 'Samsung Galaxy S24 Ultra', + visible: true, + priority: 2, + quantity: 35, + price: 129990, + discount: 10, + currency: 'RUB', + rating: 4.6, + remainings: 'high', + categoryID: 11, + imgs: [ + 'https://images.unsplash.com/photo-1610945415295-d9bbf067e59c?w=600&h=400&fit=crop' + ], + photos: [ + { url: 'https://images.unsplash.com/photo-1610945415295-d9bbf067e59c?w=600&h=400&fit=crop' } + ], + tags: ['new', 'android', 'samsung'], + badges: ['new', 'sale'], + simpleDescription: 'Премиальный флагман Samsung с S Pen', + description: [ + { key: 'Цвет', value: 'Титановый серый' }, + { key: 'Память', value: '512 ГБ' }, + { key: 'ОЗУ', value: '12 ГБ' }, + { key: 'Дисплей', value: '6.8" Dynamic AMOLED 2X' } + ], + descriptionFields: [ + { key: 'Цвет', value: 'Титановый серый' }, + { key: 'Память', value: '512 ГБ' }, + { key: 'ОЗУ', value: '12 ГБ' }, + { key: 'Дисплей', value: '6.8" Dynamic AMOLED 2X' } + ], + subcategoryId: 'smartphones', + translations: { + en: { + name: 'Samsung Galaxy S24 Ultra', + simpleDescription: 'Premium Samsung flagship with S Pen', + description: [ + { key: 'Color', value: 'Titanium Gray' }, + { key: 'Storage', value: '512GB' }, + { key: 'RAM', value: '12GB' }, + { key: 'Display', value: '6.8" Dynamic AMOLED 2X' } + ] + } + }, + comments: [ + { id: 'c3', text: 'S Pen — топ, использую каждый день.', author: 'Алексей', stars: 5, createdAt: '2026-01-20T08:10:00Z' } + ], + callbacks: [ + { rating: 5, content: 'S Pen — топ, использую каждый день.', userID: 'Алексей', timestamp: '2026-01-20T08:10:00Z' } + ], + questions: [] + }, + { + id: 'pixel-8', + itemID: 103, + name: 'Google Pixel 8 Pro', + visible: true, + priority: 3, + quantity: 20, + price: 89990, + discount: 15, + currency: 'RUB', + rating: 4.5, + remainings: 'medium', + categoryID: 11, + imgs: [ + 'https://images.unsplash.com/photo-1598327105666-5b89351aff97?w=600&h=400&fit=crop' + ], + photos: [ + { url: 'https://images.unsplash.com/photo-1598327105666-5b89351aff97?w=600&h=400&fit=crop' } + ], + tags: ['sale', 'android', 'ai', 'google'], + badges: ['sale', 'hot'], + simpleDescription: 'Лучший смартфон для ИИ-фотографии', + description: [ + { key: 'Цвет', value: 'Bay Blue' }, + { key: 'Память', value: '256 ГБ' }, + { key: 'Процессор', value: 'Tensor G3' } + ], + descriptionFields: [ + { key: 'Цвет', value: 'Bay Blue' }, + { key: 'Память', value: '256 ГБ' }, + { key: 'Процессор', value: 'Tensor G3' } + ], + subcategoryId: 'smartphones', + translations: {}, + comments: [], + callbacks: [], + questions: [ + { question: 'Поддерживает eSIM?', answer: 'Да, поддерживает dual eSIM.', upvotes: 12, downvotes: 0 } + ] + }, + { + id: 'macbook-pro', + itemID: 104, + name: 'MacBook Pro 16" M3 Max', + visible: true, + priority: 1, + quantity: 15, + price: 299990, + discount: 0, + currency: 'RUB', + rating: 4.9, + remainings: 'low', + categoryID: 12, + imgs: [ + 'https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=600&h=400&fit=crop', + 'https://images.unsplash.com/photo-1541807084-5c52b6b3adef?w=600&h=400&fit=crop' + ], + photos: [ + { url: 'https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=600&h=400&fit=crop' }, + { url: 'https://images.unsplash.com/photo-1541807084-5c52b6b3adef?w=600&h=400&fit=crop' } + ], + tags: ['featured', 'professional', 'apple'], + badges: ['exclusive', 'limited'], + simpleDescription: 'Мощный ноутбук для профессионалов', + description: [ + { key: 'Процессор', value: 'Apple M3 Max' }, + { key: 'ОЗУ', value: '36 ГБ' }, + { key: 'Память', value: '1 ТБ SSD' }, + { key: 'Дисплей', value: '16.2" Liquid Retina XDR' }, + { key: 'Батарея', value: 'До 22 ч' } + ], + descriptionFields: [ + { key: 'Процессор', value: 'Apple M3 Max' }, + { key: 'ОЗУ', value: '36 ГБ' }, + { key: 'Память', value: '1 ТБ SSD' }, + { key: 'Дисплей', value: '16.2" Liquid Retina XDR' }, + { key: 'Батарея', value: 'До 22 ч' } + ], + subcategoryId: 'laptops', + translations: { + en: { + name: 'MacBook Pro 16" M3 Max', + simpleDescription: 'Powerful laptop for professionals', + description: [ + { key: 'Chip', value: 'Apple M3 Max' }, + { key: 'RAM', value: '36GB' }, + { key: 'Storage', value: '1TB SSD' }, + { key: 'Display', value: '16.2" Liquid Retina XDR' }, + { key: 'Battery', value: 'Up to 22h' } + ] + } + }, + comments: [ + { id: 'c4', text: 'Невероятная производительность. Рендер в 3 раза быстрее.', author: 'Дизайнер Про', stars: 5, createdAt: '2025-11-15T12:00:00Z' }, + { id: 'c5', text: 'Стоит каждого рубля. Экран — сказка.', author: 'Видеоредактор', stars: 5, createdAt: '2026-02-01T09:00:00Z' } + ], + callbacks: [ + { rating: 5, content: 'Невероятная производительность. Рендер в 3 раза быстрее.', userID: 'Дизайнер Про', timestamp: '2025-11-15T12:00:00Z' }, + { rating: 5, content: 'Стоит каждого рубля. Экран — сказка.', userID: 'Видеоредактор', timestamp: '2026-02-01T09:00:00Z' } + ], + questions: [] + }, + { + id: 'dell-xps', + itemID: 105, + name: 'Dell XPS 15', + visible: true, + priority: 2, + quantity: 3, + price: 179990, + discount: 5, + currency: 'RUB', + rating: 4.3, + remainings: 'low', + categoryID: 12, + imgs: [ + 'https://images.unsplash.com/photo-1593642702749-b7d2a804c22e?w=600&h=400&fit=crop' + ], + photos: [ + { url: 'https://images.unsplash.com/photo-1593642702749-b7d2a804c22e?w=600&h=400&fit=crop' } + ], + tags: ['windows', 'professional'], + badges: ['limited'], + simpleDescription: 'Тонкий и мощный Windows ноутбук', + description: [ + { key: 'Процессор', value: 'Intel Core i9-13900H' }, + { key: 'ОЗУ', value: '32 ГБ' }, + { key: 'Дисплей', value: '15.6" OLED 3.5K' } + ], + descriptionFields: [ + { key: 'Процессор', value: 'Intel Core i9-13900H' }, + { key: 'ОЗУ', value: '32 ГБ' }, + { key: 'Дисплей', value: '15.6" OLED 3.5K' } + ], + subcategoryId: 'laptops', + translations: {}, + comments: [], + callbacks: [], + questions: [] + }, + { + id: 'jacket-leather', + itemID: 201, + name: 'Кожаная куртка Premium', + visible: true, + priority: 1, + quantity: 8, + price: 34990, + discount: 20, + currency: 'RUB', + rating: 4.7, + remainings: 'medium', + categoryID: 21, + imgs: [ + 'https://images.unsplash.com/photo-1551028719-00167b16eac5?w=600&h=400&fit=crop' + ], + photos: [ + { url: 'https://images.unsplash.com/photo-1551028719-00167b16eac5?w=600&h=400&fit=crop' } + ], + tags: ['leather', 'premium', 'winter'], + badges: ['sale', 'bestseller'], + simpleDescription: 'Стильная мужская кожаная куртка из натуральной кожи', + description: [ + { key: 'Материал', value: 'Натуральная кожа' }, + { key: 'Размеры', value: 'S, M, L, XL, XXL' }, + { key: 'Цвет', value: 'Чёрный' }, + { key: 'Подкладка', value: 'Полиэстер 100%' } + ], + descriptionFields: [ + { key: 'Материал', value: 'Натуральная кожа' }, + { key: 'Размеры', value: 'S, M, L, XL, XXL' }, + { key: 'Цвет', value: 'Чёрный' }, + { key: 'Подкладка', value: 'Полиэстер 100%' } + ], + subcategoryId: 'mens', + translations: { + en: { + name: 'Premium Leather Jacket', + simpleDescription: 'Stylish men\'s genuine leather jacket', + description: [ + { key: 'Material', value: 'Genuine Leather' }, + { key: 'Sizes', value: 'S, M, L, XL, XXL' }, + { key: 'Color', value: 'Black' }, + { key: 'Lining', value: '100% Polyester' } + ] + } + }, + comments: [ + { id: 'c6', text: 'Качество кожи отличное, сидит идеально.', author: 'Антон', stars: 5, createdAt: '2026-01-10T16:30:00Z' } + ], + callbacks: [ + { rating: 5, content: 'Качество кожи отличное, сидит идеально.', userID: 'Антон', timestamp: '2026-01-10T16:30:00Z' } + ], + questions: [] + }, + { + id: 'dress-silk', + itemID: 202, + name: 'Шёлковое платье Elegance', + visible: true, + priority: 1, + quantity: 12, + price: 18990, + discount: 0, + currency: 'RUB', + rating: 4.9, + remainings: 'high', + categoryID: 22, + imgs: [ + 'https://images.unsplash.com/photo-1595777457583-95e059d581b8?w=600&h=400&fit=crop' + ], + photos: [ + { url: 'https://images.unsplash.com/photo-1595777457583-95e059d581b8?w=600&h=400&fit=crop' } + ], + tags: ['silk', 'elegant', 'new'], + badges: ['new', 'featured'], + simpleDescription: 'Элегантное шёлковое платье для особых случаев', + description: [ + { key: 'Материал', value: '100% Шёлк' }, + { key: 'Размеры', value: 'XS, S, M, L' }, + { key: 'Цвет', value: 'Бордовый' }, + { key: 'Длина', value: 'Миди' } + ], + descriptionFields: [ + { key: 'Материал', value: '100% Шёлк' }, + { key: 'Размеры', value: 'XS, S, M, L' }, + { key: 'Цвет', value: 'Бордовый' }, + { key: 'Длина', value: 'Миди' } + ], + subcategoryId: 'womens', + translations: {}, + comments: [ + { id: 'c7', text: 'Восхитительное платье! Ткань потрясающая.', author: 'Елена', stars: 5, createdAt: '2026-02-14T20:00:00Z' }, + { id: 'c8', text: 'Идеально на вечер. Рекомендую!', author: 'Наталья', stars: 5, createdAt: '2026-02-10T11:00:00Z' } + ], + callbacks: [ + { rating: 5, content: 'Восхитительное платье! Ткань потрясающая.', userID: 'Елена', timestamp: '2026-02-14T20:00:00Z' }, + { rating: 5, content: 'Идеально на вечер. Рекомендую!', userID: 'Наталья', timestamp: '2026-02-10T11:00:00Z' } + ], + questions: [] + }, + { + id: 'hoodie-basic', + itemID: 203, + name: 'Худи Oversize Basic', + visible: true, + priority: 3, + quantity: 45, + price: 5990, + discount: 0, + currency: 'RUB', + rating: 4.2, + remainings: 'high', + categoryID: 21, + imgs: [ + 'https://images.unsplash.com/photo-1556821840-3a63f95609a7?w=600&h=400&fit=crop' + ], + photos: [ + { url: 'https://images.unsplash.com/photo-1556821840-3a63f95609a7?w=600&h=400&fit=crop' } + ], + tags: ['casual', 'basic'], + badges: [], + simpleDescription: 'Удобное худи свободного кроя на каждый день', + description: [ + { key: 'Материал', value: 'Хлопок 80%, Полиэстер 20%' }, + { key: 'Размеры', value: 'S, M, L, XL' }, + { key: 'Цвет', value: 'Серый меланж' } + ], + descriptionFields: [ + { key: 'Материал', value: 'Хлопок 80%, Полиэстер 20%' }, + { key: 'Размеры', value: 'S, M, L, XL' }, + { key: 'Цвет', value: 'Серый меланж' } + ], + subcategoryId: 'mens', + translations: {}, + comments: [], + callbacks: [], + questions: [] + }, + { + id: 'sneakers-run', + itemID: 204, + name: 'Кроссовки AirPulse Run', + visible: true, + priority: 2, + quantity: 0, + price: 12990, + discount: 30, + currency: 'RUB', + rating: 4.4, + remainings: 'out', + categoryID: 21, + imgs: [ + 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=600&h=400&fit=crop' + ], + photos: [ + { url: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=600&h=400&fit=crop' } + ], + tags: ['sport', 'running'], + badges: ['sale', 'hot'], + simpleDescription: 'Лёгкие беговые кроссовки с пенной амортизацией', + description: [ + { key: 'Верх', value: 'Текстильная сетка' }, + { key: 'Подошва', value: 'Пена EVA' }, + { key: 'Вес', value: '260 г' } + ], + descriptionFields: [ + { key: 'Верх', value: 'Текстильная сетка' }, + { key: 'Подошва', value: 'Пена EVA' }, + { key: 'Вес', value: '260 г' } + ], + subcategoryId: 'mens', + translations: {}, + comments: [ + { id: 'c9', text: 'Нет в наличии уже месяц... Верните!', author: 'Бегун42', stars: 3, createdAt: '2026-02-05T07:00:00Z' } + ], + callbacks: [ + { rating: 3, content: 'Нет в наличии уже месяц... Верните!', userID: 'Бегун42', timestamp: '2026-02-05T07:00:00Z' } + ], + questions: [] + }, + { + id: 'lamp-smart', + itemID: 301, + name: 'Умная лампа Homelight Pro', + visible: true, + priority: 1, + quantity: 100, + price: 3990, + discount: 0, + currency: 'RUB', + rating: 4.1, + remainings: 'high', + categoryID: 3, + imgs: [ + 'https://images.unsplash.com/photo-1507473885765-e6ed057ab6fe?w=600&h=400&fit=crop' + ], + photos: [ + { url: 'https://images.unsplash.com/photo-1507473885765-e6ed057ab6fe?w=600&h=400&fit=crop' } + ], + tags: ['smart-home', 'lighting'], + badges: ['featured'], + simpleDescription: 'Wi-Fi лампа с управлением через приложение и голосом', + description: [ + { key: 'Яркость', value: '1100 лм' }, + { key: 'Цветовая t°', value: '2700K–6500K' }, + { key: 'Совместимость', value: 'Алиса, Google Home, Alexa' } + ], + descriptionFields: [ + { key: 'Яркость', value: '1100 лм' }, + { key: 'Цветовая t°', value: '2700K–6500K' }, + { key: 'Совместимость', value: 'Алиса, Google Home, Alexa' } + ], + subcategoryId: 'home', + translations: {}, + comments: [], + callbacks: [], + questions: [] + } +]; + +// ─── Helper ─── + +function getAllVisibleItems(): any[] { + return MOCK_ITEMS.filter(i => i.visible !== false); +} + +function getItemsByCategoryId(categoryID: number): any[] { + return getAllVisibleItems().filter(i => i.categoryID === categoryID); +} + +function respond(body: T, delayMs = 150) { + return of(new HttpResponse({ status: 200, body })).pipe(delay(delayMs)); +} + +// ─── The Interceptor ─── + +export const mockDataInterceptor: HttpInterceptorFn = (req, next) => { + if (!(environment as any).useMockData) { + return next(req); + } + + const url = req.url; + + // ── GET /ping + if (url.endsWith('/ping') && req.method === 'GET') { + return respond({ message: 'pong (mock)' }); + } + + // ── GET /category (all categories flat list) + if (url.endsWith('/category') && req.method === 'GET') { + return respond(MOCK_CATEGORIES); + } + + // ── GET /category/:id (items for a category) + const catItemsMatch = url.match(/\/category\/(\d+)$/); + if (catItemsMatch && req.method === 'GET') { + const catId = parseInt(catItemsMatch[1], 10); + const items = getItemsByCategoryId(catId); + return respond(items); + } + + // ── GET /item/:id + const itemMatch = url.match(/\/item\/(\d+)$/); + if (itemMatch && req.method === 'GET') { + const itemId = parseInt(itemMatch[1], 10); + const item = MOCK_ITEMS.find(i => i.itemID === itemId); + if (item) { + return respond(item); + } + return of(new HttpResponse({ status: 404, body: { error: 'Item not found' } })).pipe(delay(100)); + } + + // ── GET /searchitems?search=... + if (url.includes('/searchitems') && req.method === 'GET') { + const search = req.params.get('search')?.toLowerCase() || ''; + const items = getAllVisibleItems().filter(i => + i.name.toLowerCase().includes(search) || + i.simpleDescription?.toLowerCase().includes(search) || + i.tags?.some((t: string) => t.toLowerCase().includes(search)) + ); + return respond({ + items, + total: items.length, + count: items.length, + skip: 0 + }); + } + + // ── GET /randomitems + if (url.includes('/randomitems') && req.method === 'GET') { + const count = parseInt(req.params.get('count') || '5', 10); + const shuffled = [...getAllVisibleItems()].sort(() => Math.random() - 0.5); + return respond(shuffled.slice(0, count)); + } + + // ── GET /cart (return empty) + if (url.endsWith('/cart') && req.method === 'GET') { + return respond([]); + } + + // ── POST /cart (add to cart / create payment) + if (url.endsWith('/cart') && req.method === 'POST') { + const body = req.body as any; + if (body?.amount) { + // Payment mock + return respond({ + qrId: 'mock-qr-' + Date.now(), + qrStatus: 'CREATED', + qrExpirationDate: new Date(Date.now() + 180000).toISOString(), + payload: 'https://example.com/pay/mock', + qrUrl: 'https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=mock-payment' + }, 300); + } + return respond({ message: 'Added (mock)' }); + } + + // ── PATCH /cart + if (url.endsWith('/cart') && req.method === 'PATCH') { + return respond({ message: 'Updated (mock)' }); + } + + // ── DELETE /cart + if (url.endsWith('/cart') && req.method === 'DELETE') { + return respond({ message: 'Removed (mock)' }); + } + + // ── POST /comment + if (url.endsWith('/comment') && req.method === 'POST') { + return respond({ message: 'Review submitted (mock)' }, 200); + } + + // ── POST /purchase-email + if (url.endsWith('/purchase-email') && req.method === 'POST') { + return respond({ message: 'Email sent (mock)' }, 200); + } + + // ── GET /qr/payment/:id (always return success for testing) + if (url.includes('/qr/payment/') && req.method === 'GET') { + return respond({ + paymentStatus: 'SUCCESS', + code: 'SUCCESS', + amount: 0, + currency: 'RUB', + qrId: 'mock', + transactionId: 999, + transactionDate: new Date().toISOString(), + additionalInfo: '', + paymentPurpose: '', + createDate: new Date().toISOString(), + order: 'mock-order', + qrExpirationDate: new Date().toISOString(), + phoneNumber: '' + }, 500); + } + + // Fallback — pass through + return next(req); +}; diff --git a/src/app/models/category.model.ts b/src/app/models/category.model.ts index 9b4501a..7575455 100644 --- a/src/app/models/category.model.ts +++ b/src/app/models/category.model.ts @@ -6,4 +6,28 @@ export interface Category { wideBanner?: string | boolean; itemCount?: number; priority?: number; + + // BackOffice API fields + id?: string; + visible?: boolean; + img?: string; + projectId?: string; + subcategories?: Subcategory[]; +} + +export interface Subcategory { + id: string; + name: string; + visible?: boolean; + priority?: number; + img?: string; + categoryId: string; + parentId: string; + itemCount?: number; + hasItems?: boolean; + subcategories?: Subcategory[]; +} + +export interface CategoryTranslation { + name?: string; } diff --git a/src/app/models/index.ts b/src/app/models/index.ts index 491f438..d034c53 100644 --- a/src/app/models/index.ts +++ b/src/app/models/index.ts @@ -1,2 +1,3 @@ export * from './category.model'; export * from './item.model'; + diff --git a/src/app/models/item.model.ts b/src/app/models/item.model.ts index 6320ed0..abdcf34 100644 --- a/src/app/models/item.model.ts +++ b/src/app/models/item.model.ts @@ -5,6 +5,25 @@ export interface Photo { type?: string; } +export interface DescriptionField { + key: string; + value: string; +} + +export interface Comment { + id?: string; + text: string; + author?: string; + stars?: number; + createdAt?: string; +} + +export interface ItemTranslation { + name?: string; + simpleDescription?: string; + description?: DescriptionField[]; +} + export interface Callback { rating?: number; content?: string; @@ -34,7 +53,20 @@ export interface Item { callbacks: Callback[] | null; questions: Question[] | null; partnerID?: string; - quantity?: number; // For cart items + quantity?: number; + + // BackOffice API fields + id?: string; + visible?: boolean; + priority?: number; + imgs?: string[]; + tags?: string[]; + badges?: string[]; + simpleDescription?: string; + descriptionFields?: DescriptionField[]; + subcategoryId?: string; + translations?: Record; + comments?: Comment[]; } export interface CartItem extends Item { diff --git a/src/app/pages/cart/cart.component.html b/src/app/pages/cart/cart.component.html index 445c122..945aa13 100644 --- a/src/app/pages/cart/cart.component.html +++ b/src/app/pages/cart/cart.component.html @@ -44,7 +44,15 @@
-

{{ item.description.substring(0, 100) }}...

+

{{ item.simpleDescription || item?.description?.substring?.(0, 100) || '' }}...

+ + @if (item.badges && item.badges.length > 0) { +
+ @for (badge of item.badges; track badge) { + {{ badge }} + } +
+ }
diff --git a/src/app/pages/cart/cart.component.ts b/src/app/pages/cart/cart.component.ts index 8cc3531..67906c4 100644 --- a/src/app/pages/cart/cart.component.ts +++ b/src/app/pages/cart/cart.component.ts @@ -8,7 +8,7 @@ import { interval, Subscription } from 'rxjs'; import { switchMap, take } from 'rxjs/operators'; import { EmptyCartIconComponent } from '../../components/empty-cart-icon/empty-cart-icon.component'; import { environment } from '../../../environments/environment'; -import { getDiscountedPrice, getMainImage, trackByItemId } from '../../utils/item.utils'; +import { getDiscountedPrice, getMainImage, trackByItemId, getBadgeClass } from '../../utils/item.utils'; @Component({ selector: 'app-cart', @@ -126,6 +126,7 @@ export class CartComponent implements OnInit, OnDestroy { readonly getMainImage = getMainImage; readonly trackByItemId = trackByItemId; readonly getDiscountedPrice = getDiscountedPrice; + readonly getBadgeClass = getBadgeClass; checkout(): void { if (!this.termsAccepted) { diff --git a/src/app/pages/category/category.component.html b/src/app/pages/category/category.component.html index 88ce8e4..8d137b3 100644 --- a/src/app/pages/category/category.component.html +++ b/src/app/pages/category/category.component.html @@ -16,6 +16,13 @@ @if (item.discount > 0) {
-{{ item.discount }}%
} + @if (item.badges && item.badges.length > 0) { +
+ @for (badge of item.badges; track badge) { + {{ badge }} + } +
+ }
diff --git a/src/app/pages/category/category.component.ts b/src/app/pages/category/category.component.ts index 0ff571c..dea52eb 100644 --- a/src/app/pages/category/category.component.ts +++ b/src/app/pages/category/category.component.ts @@ -4,7 +4,7 @@ import { ActivatedRoute, RouterLink } from '@angular/router'; import { ApiService, CartService } from '../../services'; import { Item } from '../../models'; import { Subscription } from 'rxjs'; -import { getDiscountedPrice, getMainImage, trackByItemId } from '../../utils/item.utils'; +import { getDiscountedPrice, getMainImage, trackByItemId, getBadgeClass } from '../../utils/item.utils'; @Component({ selector: 'app-category', @@ -105,4 +105,5 @@ export class CategoryComponent implements OnInit, OnDestroy { readonly getDiscountedPrice = getDiscountedPrice; readonly getMainImage = getMainImage; readonly trackByItemId = trackByItemId; + readonly getBadgeClass = getBadgeClass; } diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 071f4c8..df26bb4 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -72,78 +72,55 @@ }
} @else { - -
- -
-
-
-

Здесь ты найдёшь всё

-

Тысячи товаров в одном месте

-

просто и удобно

- -
- - Перейти в каталог - - -
-
-
-
+ +
+
+

{{ brandName }}

+

Ваш маркетплейс товаров и услуг

+
@if (loading()) { -
- +
+

Загрузка категорий...

} @if (error()) { -
+

{{ error() }}

- +
} @if (!loading() && !error()) { -
-

Каталог товаров

+
+

Категории

@if (topLevelCategories().length === 0) { -
-
📦
+
+
📦

Категории пока отсутствуют

Скоро здесь появятся категории товаров

} @else { -
+
@for (category of topLevelCategories(); track category.categoryID) { - -
- @if (isWideCategory(category.categoryID) && category.wideBanner && category.wideBanner !== true) { - - } @else if (category.icon) { - - } @else { -
{{ category.name.charAt(0) }}
- } +
+ +
+ @if (category.icon) { + + } @else { +
{{ category.name }}
+ } +
+

{{ category.name }}

+
-
-

{{ category.name }}

-

{{ getItemCount(category.categoryID) }} товаров

-
- - } + }
}
diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss index 30e555d..0a23c1b 100644 --- a/src/app/pages/home/home.component.scss +++ b/src/app/pages/home/home.component.scss @@ -1,25 +1,329 @@ -// ========== SHARED ANIMATIONS ========== +.home-container { + max-width: 1200px; + margin: 0 auto; + padding: 20px; + animation: fadeIn 0.5s ease-in; +} + @keyframes fadeIn { - from { opacity: 0; transform: translateY(10px); } - to { opacity: 1; transform: translateY(0); } + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } } -@keyframes fadeInUp { - from { opacity: 0; transform: translateY(30px); } - to { opacity: 1; transform: translateY(0); } +.hero { + text-align: center; + padding: 80px 20px; + background: var(--gradient-hero); + color: white; + border-radius: var(--radius-xl); + margin-bottom: 50px; + position: relative; + overflow: hidden; + box-shadow: var(--shadow-lg); + + &.hero-compact { + padding: 35px 20px; + margin-bottom: 25px; + + h1 { + font-size: 2.2rem; + margin-bottom: 8px; + } + + p { + font-size: 1.1rem; + } + } + + &::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); + animation: pulse 4s ease-in-out infinite; + } + + @keyframes pulse { + 0%, 100% { + transform: scale(1); + opacity: 0.5; + } + 50% { + transform: scale(1.1); + opacity: 0.8; + } + } + + h1 { + font-size: 3.5rem; + margin: 0 0 15px 0; + font-weight: 700; + position: relative; + z-index: 1; + text-shadow: 0 2px 10px rgba(0,0,0,0.2); + animation: slideDown 0.8s ease-out; + } + + @keyframes slideDown { + from { + opacity: 0; + transform: translateY(-30px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + + p { + font-size: 1.4rem; + margin: 0; + opacity: 0.95; + position: relative; + z-index: 1; + animation: slideUp 0.8s ease-out 0.2s both; + } + + @keyframes slideUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 0.95; + transform: translateY(0); + } + } } -@keyframes slideDown { - from { opacity: 0; transform: translateY(-30px); } - to { opacity: 1; transform: translateY(0); } +.loading, +.error { + text-align: center; + padding: 60px 20px; +} + +.spinner { + width: 50px; + height: 50px; + border: 4px solid #f3f3f3; + border-top: 4px solid var(--primary-color); + border-radius: 50%; + animation: spin 1s linear infinite; + margin: 0 auto 20px; } @keyframes spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } } -// ========== NOVO HOME PAGE STYLES ========== +.error { + button { + margin-top: 20px; + padding: 10px 24px; + background: var(--primary-color); + color: white; + border: none; + border-radius: 6px; + cursor: pointer; + font-size: 1rem; + + &:hover { + background: var(--primary-hover); + } + } +} + +.categories { + h2 { + font-size: 2rem; + margin-bottom: 30px; + color: #333; + } +} + +.empty-categories { + text-align: center; + padding: 60px 20px; + background: white; + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + + .empty-icon { + font-size: 4rem; + margin-bottom: 20px; + opacity: 0.5; + } + + h3 { + font-size: 1.5rem; + color: #333; + margin: 0 0 10px 0; + } + + p { + color: #666; + font-size: 1rem; + margin: 0; + } +} + +.categories-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 30px; + animation: fadeIn 0.6s ease-in 0.3s both; +} + +.category-card { + background: white; + border-radius: var(--radius-lg); + box-shadow: var(--shadow-md); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + height: 100%; + display: flex; + flex-direction: column; + overflow: hidden; + position: relative; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: var(--gradient-primary); + opacity: 0; + transition: opacity 0.3s ease; + z-index: 1; + } + + &:hover { + transform: translateY(-8px) scale(1.02); + box-shadow: var(--shadow-lg); + + &::before { + opacity: 0.1; + } + + .category-media img { + transform: scale(1.1); + } + + h3 { + color: var(--primary-color); + } + } +} + +.category-link { + display: flex; + flex-direction: column; + flex: 1; + text-decoration: none; + color: inherit; + position: relative; + min-height: 220px; + z-index: 2; + + .category-media { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + background: linear-gradient(135deg, #f6f7fb 0%, #e9ecf5 100%); + } + + .category-media img { + width: 100%; + height: 100%; + object-fit: contain; + background: white; + padding: 15px; + transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.5s ease; + filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08)); + border-radius: 8px; + } + + &:hover .category-media img { + transform: scale(1.05); + filter: drop-shadow(0 16px 32px rgba(0,0,0,0.18)) saturate(1.1); + } + + .category-fallback { + font-size: 1.5rem; + font-weight: 700; + color: var(--primary-color); + background: var(--gradient-primary); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-align: center; + padding: 20px; + } + + h3 { + position: absolute; + bottom: 0; + left: 0; + right: 0; + margin: 0; + padding: 20px; + font-size: 1.3rem; + font-weight: 600; + color: #333; + background: linear-gradient(to top, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.95) 70%, transparent 100%); + z-index: 3; + transition: color 0.3s ease; + } +} + +@media (max-width: 768px) { + .home-container { + padding: 15px; + } + + .hero { + padding: 50px 20px; + border-radius: 15px; + + h1 { + font-size: 2.5rem; + } + + p { + font-size: 1.1rem; + } + } + + .categories-grid { + grid-template-columns: 1fr; + gap: 20px; + } + + .category-card { + &:hover { + transform: translateY(-4px) scale(1); + } + } +} + +// ========== novo HOME PAGE STYLES ========== .novo-home { min-height: calc(100vh - 200px); animation: fadeIn 0.6s ease; @@ -315,6 +619,26 @@ } } +@keyframes slideDown { + from { + opacity: 0; + transform: translateY(-30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + @media (max-width: 968px) { .novo-hero { padding: 4rem 2rem; @@ -377,522 +701,3 @@ transform: translateY(-4px); } } - -// ========== DEXAR REDESIGN 2026 STYLES ========== -.dexar-home { - width: 100%; - overflow-x: hidden; -} - -// Hero Section -.dexar-hero { - position: relative; - width: 100%; - height: 600px; - background-image: url('/assets/images/hero_background_desktop.webp'); - background-size: cover; - background-position: center; - background-repeat: no-repeat; - overflow: hidden; - - // Mobile hero image - @media (max-width: 768px) { - background-image: url('/assets/images/hero_background_mobile.webp'); - } -} - -.dexar-hero-overlay { - position: relative; - width: 100%; - height: 100%; - background: linear-gradient( - to right, - rgba(255, 255, 255, 0.1) 10%, - rgba(255, 255, 255, 0.1) 10%, - rgba(255, 255, 255, 0.1) 15%); - display: flex; - align-items: center; - padding: 0 56px; -} - -.dexar-hero-content { - max-width: 600px; - display: flex; - flex-direction: column; - gap: 12px; - animation: fadeInUp 0.8s ease-out; -} - -.dexar-hero-title { - font-weight: 500; - font-size: 42px; - color: var(--text-primary); - line-height: 1.2; - margin: 0; - animation: fadeInUp 0.8s ease-out 0.1s both; -} - -.dexar-hero-subtitle { - font-weight: 500; - font-size: 24px; - color: var(--text-primary); - line-height: 1.3; - margin: 0; - animation: fadeInUp 0.8s ease-out 0.2s both; -} - -.dexar-hero-tagline { - font-weight: 500; - font-size: 24px; - color: var(--text-primary); - line-height: 1.3; - margin: 0; - animation: fadeInUp 0.8s ease-out 0.3s both; -} - -.dexar-hero-actions { - display: flex; - gap: 16px; - margin-top: 12px; - animation: fadeInUp 0.8s ease-out 0.4s both; -} - -.dexar-btn-primary { - display: flex; - align-items: center; - justify-content: center; - width: 280px; - height: 48px; - background: var(--gradient-primary); - border: 1px solid var(--border-color); - border-radius: var(--radius-lg); - font-weight: 500; - font-size: 20px; - color: #ffffff; - text-decoration: none; - letter-spacing: 1.08px; - cursor: pointer; - transition: all 0.3s ease; - box-shadow: 0 4px 12px rgba(73, 118, 113, 0.3); - - &:hover { - transform: translateY(-2px); - box-shadow: 0 6px 16px rgba(73, 118, 113, 0.4); - } - - &:active { - transform: translateY(0px); - box-shadow: 0 2px 8px rgba(73, 118, 113, 0.3); - } -} - -.dexar-btn-secondary { - display: flex; - align-items: center; - justify-content: center; - gap: 9px; - width: 220px; - height: 48px; - background: var(--bg-secondary); - border: 1px solid var(--border-color); - border-radius: var(--radius-lg); - font-weight: 500; - font-size: 20px; - color: var(--text-primary); - letter-spacing: 1.08px; - cursor: pointer; - transition: all 0.3s ease; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - - svg { - width: 11px; - height: 16px; - transition: transform 0.3s ease; - } - - &:hover { - background: #ffffff; - transform: translateY(-2px); - box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); - - svg { - transform: translateX(3px); - } - } - - &:active { - transform: translateY(0px); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - } -} - -// Loading & Error States -.dexar-loading, -.dexar-error { - text-align: center; - padding: 60px 20px; - max-width: 1200px; - margin: 0 auto; -} - -.dexar-spinner { - width: 50px; - height: 50px; - border: 4px solid #f3f3f3; - border-top: 4px solid var(--primary-color); - border-radius: 50%; - animation: spin 1s linear infinite; - margin: 0 auto 20px; -} - -.dexar-error { - button { - margin-top: 20px; - padding: 12px 28px; - background: var(--primary-color); - color: white; - border: none; - border-radius: var(--radius-lg); - cursor: pointer; - font-size: 1.1rem; - font-weight: 500; - transition: all 0.3s ease; - - &:hover { - background: var(--primary-hover); - transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(73, 118, 113, 0.3); - } - } -} - -// Categories Section -.dexar-categories { - max-width: 1440px; - margin: 50px auto; - padding: 0 56px; -} - -.dexar-categories-title { - font-size: 2.5rem; - font-weight: 600; - margin-bottom: 40px; - color: var(--text-primary); -} - -.dexar-empty-categories { - text-align: center; - padding: 80px 20px; - background: white; - border-radius: 16px; - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); - - .dexar-empty-icon { - font-size: 4rem; - margin-bottom: 20px; - opacity: 0.5; - } - - h3 { - font-size: 1.8rem; - color: var(--text-primary); - margin: 0 0 12px 0; - font-weight: 600; - } - - p { - color: var(--text-secondary); - font-size: 1.1rem; - margin: 0; - } -} - -.dexar-categories-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 30px; - animation: fadeIn 0.6s ease-in 0.3s both; - width: 100%; -} - -.dexar-category-card { - width: 100%; - display: flex; - flex-direction: column; - text-decoration: none; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - - &:hover { - transform: translateY(-4px); - - .dexar-category-image { - box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2); - } - - .dexar-category-info { - box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2); - } - } -} - -.dexar-category-image { - width: 100%; - aspect-ratio: 4 / 3; - border: 1px solid var(--border-color); - border-radius: var(--radius-lg) var(--radius-lg) 0 0; - box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - background: var(--bg-secondary); - position: relative; - - img { - width: 100%; - height: 100%; - object-fit: cover; - transition: transform 0.3s ease; - } - - &:hover img { - transform: scale(1.05); - } -} - -.dexar-category-fallback { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - font-size: 5rem; - font-weight: 700; - color: var(--primary-color); - background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); -} - -.dexar-category-info { - width: 100%; - border: 1px solid var(--border-color); - border-top: none; - border-radius: 0 0 var(--radius-lg) var(--radius-lg); - padding: 12px 16px; - box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); - background: #f5f3f9; - display: flex; - flex-direction: column; - justify-content: center; - gap: 2px; - transition: background 0.3s ease; -} - -.dexar-category-name { - font-weight: 600; - font-size: clamp(14px, 1.4vw, 18px); - color: var(--text-primary); - margin: 0; - line-height: 1.3; - display: -webkit-box; - line-clamp: 2; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; - min-height: calc(2 * 1.3em); -} - -.dexar-category-count { - font-weight: 600; - font-size: clamp(11px, 1vw, 13px); - color: var(--text-secondary); - margin: 0; - line-height: 1.2; -} - -// Wide category card (spans 2 columns) -.dexar-category-card--wide { - grid-column: span 2; - - .dexar-category-image { - aspect-ratio: 8 / 3; - - img { - object-fit: cover; - } - } -} - -// Responsive Design -@media (max-width: 1200px) { - .dexar-hero { - height: 380px; - } - - .dexar-hero-overlay { - padding: 0 40px; - } - - .dexar-hero-title { - font-size: 38px; - } - - .dexar-hero-subtitle, - .dexar-hero-tagline { - font-size: 22px; - } - - .dexar-categories { - padding: 0 40px; - } - - .dexar-categories-grid { - grid-template-columns: repeat(3, 1fr); - gap: 24px; - } -} - -@media (max-width: 992px) { - .dexar-hero { - height: 340px; - } - - .dexar-hero-overlay { - padding: 0 32px; - } - - .dexar-hero-title { - font-size: 34px; - } - - .dexar-hero-subtitle, - .dexar-hero-tagline { - font-size: 20px; - } - - .dexar-btn-primary, - .dexar-btn-secondary { - height: 44px; - font-size: 18px; - } - - .dexar-btn-primary { - width: 240px; - } - - .dexar-btn-secondary { - width: 200px; - } - - .dexar-categories { - padding: 0 32px; - } - - .dexar-categories-grid { - grid-template-columns: repeat(3, 1fr); - gap: 20px; - } -} - -@media (max-width: 768px) { - .dexar-hero { - height: 320px; - background-position: right center; - } - - .dexar-hero-overlay { - padding: 0 20px; - background: linear-gradient( - to bottom, - rgba(255, 255, 255, 0.45) 0%, - rgba(255, 255, 255, 0.15) 100% - ); - } - - .dexar-hero-title { - font-size: 28px; - } - - .dexar-hero-subtitle, - .dexar-hero-tagline { - font-size: 17px; - } - - .dexar-hero-actions { - flex-direction: row; - gap: 10px; - width: 100%; - } - - .dexar-btn-primary, - .dexar-btn-secondary { - flex: 1; - min-width: 0; - max-width: 180px; - height: 40px; - font-size: 14px; - letter-spacing: 0.5px; - } - - .dexar-categories { - margin: 40px auto; - padding: 0 20px; - } - - .dexar-categories-title { - font-size: 2rem; - margin-bottom: 30px; - } - - .dexar-categories-grid { - grid-template-columns: repeat(2, 1fr); - gap: 16px; - } - - .dexar-category-info { - padding: 10px 12px; - } -} - -@media (max-width: 480px) { - .dexar-hero { - height: 280px; - } - - .dexar-hero-title { - font-size: 24px; - } - - .dexar-hero-subtitle, - .dexar-hero-tagline { - font-size: 15px; - } - - .dexar-hero-actions { - gap: 10px; - } - - .dexar-btn-primary, - .dexar-btn-secondary { - height: 38px; - font-size: 13px; - max-width: 160px; - } - - .dexar-categories { - padding: 0 16px; - } - - .dexar-categories-grid { - grid-template-columns: repeat(2, 1fr); - gap: 12px; - } - - .dexar-category-info { - padding: 8px 10px; - } - - .dexar-category-card:hover { - transform: translateY(-2px); - } -} diff --git a/src/app/pages/item-detail/item-detail.component.html b/src/app/pages/item-detail/item-detail.component.html index b170079..4d271ec 100644 --- a/src/app/pages/item-detail/item-detail.component.html +++ b/src/app/pages/item-detail/item-detail.component.html @@ -55,7 +55,23 @@
-

{{ item()!.name }}

+

{{ getItemName() }}

+ + @if (item()!.badges && item()!.badges!.length > 0) { +
+ @for (badge of item()!.badges!; track badge) { + {{ badge }} + } +
+ } + + @if (item()!.tags && item()!.tags!.length > 0) { +
+ @for (tag of item()!.tags!; track tag) { + #{{ tag }} + } +
+ }
{{ getRatingStars(item()!.rating) }} @@ -77,10 +93,13 @@
Наличие: -
+
- {{ item()!.remainings === 'high' ? 'В наличии' : item()!.remainings === 'medium' ? 'Мало' : 'Осталось немного' }} + {{ getStockLabel() }}
+ @if (item()!.quantity != null) { + ({{ item()!.quantity }} шт.) + }
-

Описание

-
+ @if (getSimpleDescription()) { +

{{ getSimpleDescription() }}

+ } + + @if (hasDescriptionFields()) { +

Характеристики

+ + + @for (field of getTranslatedDescriptionFields(); track field.key) { + + + + + } + +
{{ field.key }}{{ field.value }}
+ } @else { +

Описание

+
+ }
@@ -249,7 +286,23 @@
-

{{ item()!.name }}

+

{{ getItemName() }}

+ + @if (item()!.badges && item()!.badges!.length > 0) { +
+ @for (badge of item()!.badges!; track badge) { + {{ badge }} + } +
+ } + + @if (item()!.tags && item()!.tags!.length > 0) { +
+ @for (tag of item()!.tags!; track tag) { + #{{ tag }} + } +
+ }
@@ -277,13 +330,13 @@
Наличие: - + - {{ item()!.remainings === 'high' ? 'В наличии' : item()!.remainings === 'medium' ? 'Заканчивается' : 'Последние штуки' }} + {{ getStockLabel() }} + @if (item()!.quantity != null) { + ({{ item()!.quantity }} шт.) + }
-

Описание

-
+ @if (getSimpleDescription()) { +

{{ getSimpleDescription() }}

+ } + + @if (hasDescriptionFields()) { +

Характеристики

+ + + @for (field of getTranslatedDescriptionFields(); track field.key) { + + + + + } + +
{{ field.key }}{{ field.value }}
+ } @else { +

Описание

+
+ }
diff --git a/src/app/pages/item-detail/item-detail.component.scss b/src/app/pages/item-detail/item-detail.component.scss index 60503fd..9621d4e 100644 --- a/src/app/pages/item-detail/item-detail.component.scss +++ b/src/app/pages/item-detail/item-detail.component.scss @@ -1327,3 +1327,95 @@ $dx-card-bg: #f5f3f9; } } } + +// ========== BADGES, TAGS & SPECS (shared) ========== + +// Badges +.novo-badges, .dx-badges { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin: 8px 0; +} + +.item-badge { + display: inline-block; + padding: 3px 10px; + border-radius: 4px; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + color: #fff; + + &.badge-new { background: #4caf50; } + &.badge-sale { background: #f44336; } + &.badge-exclusive { background: #9c27b0; } + &.badge-hot { background: #ff5722; } + &.badge-limited { background: #ff9800; } + &.badge-bestseller { background: #2196f3; } + &.badge-featured { background: #607d8b; } + &.badge-custom { background: #78909c; } +} + +// Tags +.novo-tags, .dx-tags { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin: 6px 0 12px; +} + +.item-tag { + display: inline-block; + padding: 2px 8px; + border-radius: 12px; + font-size: 0.75rem; + color: #497671; + background: rgba(73, 118, 113, 0.08); + border: 1px solid rgba(73, 118, 113, 0.15); +} + +// Specs table +.novo-specs-table, .dx-specs-table { + width: 100%; + border-collapse: collapse; + margin: 12px 0; + + tr { + border-bottom: 1px solid #e8ecec; + &:last-child { border-bottom: none; } + } + + td { + padding: 10px 12px; + font-size: 0.9rem; + vertical-align: top; + } + + .spec-key { + color: #697777; + font-weight: 500; + width: 40%; + white-space: nowrap; + } + + .spec-value { + color: #1e3c38; + } +} + +// Simple description +.novo-simple-desc, .dx-simple-desc { + font-size: 0.95rem; + color: #697777; + line-height: 1.6; + margin-bottom: 16px; +} + +// Stock quantity +.stock-qty, .dx-stock-qty { + font-size: 0.8rem; + color: #697777; + margin-left: 8px; +} diff --git a/src/app/pages/item-detail/item-detail.component.ts b/src/app/pages/item-detail/item-detail.component.ts index 3ed8b25..6b03106 100644 --- a/src/app/pages/item-detail/item-detail.component.ts +++ b/src/app/pages/item-detail/item-detail.component.ts @@ -2,11 +2,12 @@ import { Component, OnInit, OnDestroy, signal, ChangeDetectionStrategy } from '@ import { DecimalPipe } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { ActivatedRoute, RouterLink } from '@angular/router'; -import { ApiService, CartService, TelegramService } from '../../services'; -import { Item } from '../../models'; +import { ApiService, CartService, TelegramService, LanguageService } from '../../services'; +import { Item, DescriptionField } from '../../models'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { Subscription } from 'rxjs'; import { environment } from '../../../environments/environment'; +import { getAllImages, getStockStatus, getBadgeClass, getTranslatedField } from '../../utils/item.utils'; @Component({ selector: 'app-item-detail', @@ -37,7 +38,8 @@ export class ItemDetailComponent implements OnInit, OnDestroy { private apiService: ApiService, private cartService: CartService, private telegramService: TelegramService, - private sanitizer: DomSanitizer + private sanitizer: DomSanitizer, + private languageService: LanguageService ) {} ngOnInit(): void { @@ -81,9 +83,60 @@ export class ItemDetailComponent implements OnInit, OnDestroy { getDiscountedPrice(): number { const currentItem = this.item(); if (!currentItem) return 0; - return currentItem.price * (1 - currentItem.discount / 100); + return currentItem.price * (1 - (currentItem.discount || 0) / 100); } + // BackOffice integration helpers + + getItemName(): string { + const currentItem = this.item(); + if (!currentItem) return ''; + const lang = this.languageService.currentLanguage(); + return getTranslatedField(currentItem, 'name', lang); + } + + getSimpleDescription(): string { + const currentItem = this.item(); + if (!currentItem) return ''; + const lang = this.languageService.currentLanguage(); + return getTranslatedField(currentItem, 'simpleDescription', lang); + } + + hasDescriptionFields(): boolean { + const currentItem = this.item(); + return !!(currentItem?.descriptionFields && currentItem.descriptionFields.length > 0); + } + + getTranslatedDescriptionFields(): DescriptionField[] { + const currentItem = this.item(); + if (!currentItem) return []; + const lang = this.languageService.currentLanguage(); + const translation = currentItem.translations?.[lang]; + if (translation?.description && translation.description.length > 0) { + return translation.description; + } + return currentItem.descriptionFields || []; + } + + getStockClass(): string { + const currentItem = this.item(); + if (!currentItem) return 'high'; + return getStockStatus(currentItem); + } + + getStockLabel(): string { + const status = this.getStockClass(); + switch (status) { + case 'high': return 'В наличии'; + case 'medium': return 'Заканчивается'; + case 'low': return 'Последние штуки'; + case 'out': return 'Нет в наличии'; + default: return 'В наличии'; + } + } + + readonly getBadgeClass = getBadgeClass; + getSafeHtml(html: string): SafeHtml { return this.sanitizer.sanitize(1, html) || ''; } @@ -120,7 +173,7 @@ export class ItemDetailComponent implements OnInit, OnDestroy { getUserDisplayName(): string | null { if (!this.telegramService.isTelegramApp()) { - return '������������'; + return 'Пользователь'; } return this.telegramService.getDisplayName(); } diff --git a/src/app/pages/search/search.component.html b/src/app/pages/search/search.component.html index b620c29..6a0c0c3 100644 --- a/src/app/pages/search/search.component.html +++ b/src/app/pages/search/search.component.html @@ -63,11 +63,22 @@ @if (item.discount > 0) {
-{{ item.discount }}%
} + @if (item.badges && item.badges.length > 0) { +
+ @for (badge of item.badges; track badge) { + {{ badge }} + } +
+ }

{{ item.name }}

+ @if (item.simpleDescription) { +

{{ item.simpleDescription }}

+ } +
⭐ {{ item.rating }} ({{ item.callbacks?.length || 0 }}) diff --git a/src/app/pages/search/search.component.ts b/src/app/pages/search/search.component.ts index 570b61d..3e53bce 100644 --- a/src/app/pages/search/search.component.ts +++ b/src/app/pages/search/search.component.ts @@ -6,7 +6,7 @@ import { ApiService, CartService } from '../../services'; import { Item } from '../../models'; import { Subject, Subscription } from 'rxjs'; import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; -import { getDiscountedPrice, getMainImage, trackByItemId } from '../../utils/item.utils'; +import { getDiscountedPrice, getMainImage, trackByItemId, getBadgeClass } from '../../utils/item.utils'; @Component({ selector: 'app-search', @@ -131,4 +131,5 @@ export class SearchComponent implements OnDestroy { readonly getDiscountedPrice = getDiscountedPrice; readonly getMainImage = getMainImage; readonly trackByItemId = trackByItemId; + readonly getBadgeClass = getBadgeClass; } diff --git a/src/app/services/api.service.ts b/src/app/services/api.service.ts index 74a5d1a..a72c2a1 100644 --- a/src/app/services/api.service.ts +++ b/src/app/services/api.service.ts @@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'; import { HttpClient, HttpParams } from '@angular/common/http'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; -import { Category, Item } from '../models'; +import { Category, Item, Subcategory } from '../models'; import { environment } from '../../environments/environment'; @Injectable({ @@ -13,38 +13,139 @@ export class ApiService { constructor(private http: HttpClient) {} - private normalizeItem(item: Item): Item { - return { - ...item, - remainings: item.remainings || 'high' - }; + /** + * Normalize an item from the API response — supports both + * legacy marketplace format and the new backOffice API format. + */ + private normalizeItem(raw: any): Item { + const item: Item = { ...raw }; + + // Map backOffice string id → legacy numeric itemID + if (raw.id != null && raw.itemID == null) { + item.id = String(raw.id); + item.itemID = typeof raw.id === 'number' ? raw.id : 0; + } + + // Map backOffice imgs[] → legacy photos[] + if (raw.imgs && (!raw.photos || raw.photos.length === 0)) { + item.photos = raw.imgs.map((url: string) => ({ url })); + } + item.imgs = raw.imgs || raw.photos?.map((p: any) => p.url) || []; + + // Map backOffice description (key-value array) → legacy description string + if (Array.isArray(raw.description)) { + item.descriptionFields = raw.description; + item.description = raw.description.map((d: any) => `${d.key}: ${d.value}`).join('\n'); + } else { + item.description = raw.description || raw.simpleDescription || ''; + } + + // Map backOffice comments → legacy callbacks + if (raw.comments && (!raw.callbacks || raw.callbacks.length === 0)) { + item.callbacks = raw.comments.map((c: any) => ({ + rating: c.stars, + content: c.text, + userID: c.author, + timestamp: c.createdAt, + })); + } + item.comments = raw.comments || raw.callbacks?.map((c: any) => ({ + id: c.userID, + text: c.content, + author: c.userID, + stars: c.rating, + createdAt: c.timestamp, + })) || []; + + // Compute average rating from comments if not present + if (raw.rating == null && item.comments && item.comments.length > 0) { + const rated = item.comments.filter(c => c.stars != null); + item.rating = rated.length > 0 + ? rated.reduce((sum, c) => sum + (c.stars || 0), 0) / rated.length + : 0; + } + item.rating = item.rating || 0; + + // Defaults + item.discount = item.discount || 0; + item.remainings = item.remainings || (raw.quantity != null + ? (raw.quantity <= 0 ? 'out' : raw.quantity <= 5 ? 'low' : raw.quantity <= 20 ? 'medium' : 'high') + : 'high'); + item.currency = item.currency || 'RUB'; + + // Preserve new backOffice fields + item.badges = raw.badges || []; + item.tags = raw.tags || []; + item.simpleDescription = raw.simpleDescription || ''; + item.translations = raw.translations || {}; + item.visible = raw.visible ?? true; + item.priority = raw.priority ?? 0; + + return item; } - private normalizeItems(items: Item[] | null | undefined): Item[] { + private normalizeItems(items: any[] | null | undefined): Item[] { if (!items || !Array.isArray(items)) { return []; } return items.map(item => this.normalizeItem(item)); } + /** + * Normalize a category from the API response — supports both + * the flat legacy format and nested backOffice format. + */ + private normalizeCategory(raw: any): Category { + const cat: Category = { ...raw }; + + if (raw.id != null && raw.categoryID == null) { + cat.id = String(raw.id); + cat.categoryID = typeof raw.id === 'number' ? raw.id : 0; + } + + // Map backOffice img → legacy icon + if (raw.img && !raw.icon) { + cat.icon = raw.img; + } + cat.img = raw.img || raw.icon; + + cat.parentID = raw.parentID ?? 0; + cat.visible = raw.visible ?? true; + cat.priority = raw.priority ?? 0; + + if (raw.subcategories && Array.isArray(raw.subcategories)) { + cat.subcategories = raw.subcategories; + } + + return cat; + } + + private normalizeCategories(cats: any[] | null | undefined): Category[] { + if (!cats || !Array.isArray(cats)) return []; + return cats.map(c => this.normalizeCategory(c)); + } + + // ─── Core Marketplace Endpoints ─────────────────────────── + ping(): Observable<{ message: string }> { return this.http.get<{ message: string }>(`${this.baseUrl}/ping`); } getCategories(): Observable { - return this.http.get(`${this.baseUrl}/category`); + return this.http.get(`${this.baseUrl}/category`) + .pipe(map(cats => this.normalizeCategories(cats))); } getCategoryItems(categoryID: number, count: number = 50, skip: number = 0): Observable { const params = new HttpParams() .set('count', count.toString()) .set('skip', skip.toString()); - return this.http.get(`${this.baseUrl}/category/${categoryID}`, { params }) + return this.http.get(`${this.baseUrl}/category/${categoryID}`, { params }) .pipe(map(items => this.normalizeItems(items))); } getItem(itemID: number): Observable { - return this.http.get(`${this.baseUrl}/item/${itemID}`) + return this.http.get(`${this.baseUrl}/item/${itemID}`) .pipe(map(item => this.normalizeItem(item))); } @@ -53,7 +154,7 @@ export class ApiService { .set('search', search) .set('count', count.toString()) .set('skip', skip.toString()); - return this.http.get<{ items: Item[], total: number, count: number, skip: number }>(`${this.baseUrl}/searchitems`, { params }) + return this.http.get(`${this.baseUrl}/searchitems`, { params }) .pipe( map(response => ({ items: this.normalizeItems(response?.items || []), @@ -75,7 +176,7 @@ export class ApiService { } getCart(): Observable { - return this.http.get(`${this.baseUrl}/cart`) + return this.http.get(`${this.baseUrl}/cart`) .pipe(map(items => this.normalizeItems(items))); } @@ -161,7 +262,7 @@ export class ApiService { if (categoryID) { params = params.set('category', categoryID.toString()); } - return this.http.get(`${this.baseUrl}/randomitems`, { params }) + return this.http.get(`${this.baseUrl}/randomitems`, { params }) .pipe(map(items => this.normalizeItems(items))); } } diff --git a/src/app/services/cart.service.ts b/src/app/services/cart.service.ts index f430b64..65ea3ed 100644 --- a/src/app/services/cart.service.ts +++ b/src/app/services/cart.service.ts @@ -22,7 +22,7 @@ export class CartService { const items = this.cartItems(); if (!Array.isArray(items)) return 0; return items.reduce((total, item) => { - const price = item.price * (1 - item.discount / 100); + const price = item.price * (1 - (item.discount || 0) / 100); return total + (price * item.quantity); }, 0); }); diff --git a/src/app/utils/item.utils.ts b/src/app/utils/item.utils.ts index dcd7809..0b278d8 100644 --- a/src/app/utils/item.utils.ts +++ b/src/app/utils/item.utils.ts @@ -1,13 +1,78 @@ import { Item } from '../models'; export function getDiscountedPrice(item: Item): number { - return item.price * (1 - item.discount / 100); + return item.price * (1 - (item.discount || 0) / 100); } export function getMainImage(item: Item): string { + // Support both backOffice format (imgs: string[]) and legacy (photos: Photo[]) + if (item.imgs && item.imgs.length > 0) { + return item.imgs[0]; + } return item.photos?.[0]?.url || ''; } -export function trackByItemId(index: number, item: Item): number { - return item.itemID; +export function getAllImages(item: Item): string[] { + if (item.imgs && item.imgs.length > 0) { + return item.imgs; + } + return item.photos?.map(p => p.url) || []; +} + +export function trackByItemId(index: number, item: Item): number | string { + return item.id || item.itemID; +} + +/** + * Get the display description — supports both legacy HTML string + * and structured key-value pairs from backOffice API. + */ +export function hasStructuredDescription(item: Item): boolean { + return Array.isArray(item.descriptionFields) && item.descriptionFields.length > 0; +} + +/** + * Compute stock status from quantity if the legacy `remainings` field is absent. + */ +export function getStockStatus(item: Item): string { + if (item.remainings) return item.remainings; + if (item.quantity == null) return 'high'; + if (item.quantity <= 0) return 'out'; + if (item.quantity <= 5) return 'low'; + if (item.quantity <= 20) return 'medium'; + return 'high'; +} + +/** + * Map backOffice badge names to CSS color classes. + */ +export function getBadgeClass(badge: string): string { + const map: Record = { + 'new': 'badge-new', + 'sale': 'badge-sale', + 'exclusive': 'badge-exclusive', + 'hot': 'badge-hot', + 'limited': 'badge-limited', + 'bestseller': 'badge-bestseller', + 'featured': 'badge-featured', + }; + return map[badge.toLowerCase()] || 'badge-custom'; +} + +/** + * Get the translated name/description for the current language. + * Falls back to the default (base) field if no translation exists. + */ +export function getTranslatedField( + item: Item, + field: 'name' | 'simpleDescription', + lang: string +): string { + const translation = item.translations?.[lang]; + if (translation && translation[field]) { + return translation[field]!; + } + if (field === 'name') return item.name; + if (field === 'simpleDescription') return item.simpleDescription || item.description || ''; + return ''; } diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 0e44f22..6a6d9b0 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -1,6 +1,7 @@ // Dexar Market Configuration export const environment = { production: false, + useMockData: true, // Toggle to test with backOffice mock data brandName: 'Dexarmarket', brandFullName: 'Dexar Market', theme: 'dexar', diff --git a/src/styles.scss b/src/styles.scss index a678ff6..867d4c6 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -141,3 +141,58 @@ a, button, input, textarea, select { .p-3 { padding: 1.5rem; } .p-4 { padding: 2rem; } +// ─── Shared Badge & Tag Styles (from backOffice integration) ─── + +.item-badges-overlay { + position: absolute; + top: 8px; + left: 8px; + display: flex; + flex-wrap: wrap; + gap: 4px; + z-index: 2; +} + +.item-badge { + display: inline-block; + padding: 2px 8px; + border-radius: 4px; + font-size: 0.7rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.4px; + color: #fff; + line-height: 1.4; + + &.badge-new { background: #4caf50; } + &.badge-sale { background: #f44336; } + &.badge-exclusive { background: #9c27b0; } + &.badge-hot { background: #ff5722; } + &.badge-limited { background: #ff9800; } + &.badge-bestseller { background: #2196f3; } + &.badge-featured { background: #607d8b; } + &.badge-custom { background: #78909c; } +} + +.item-tag { + display: inline-block; + padding: 2px 8px; + border-radius: 12px; + font-size: 0.72rem; + color: var(--primary-color); + background: rgba(73, 118, 113, 0.08); + border: 1px solid rgba(73, 118, 113, 0.15); +} + +.item-simple-desc { + font-size: 0.8rem; + color: var(--text-secondary); + line-height: 1.4; + margin: 2px 0 4px; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} +