bo integration
This commit is contained in:
sdarbinyan
72
package-lock.json
generated
72
package-lock.json
generated
@@ -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"
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -22,6 +22,13 @@
|
||||
@if (product.discount > 0) {
|
||||
<span class="discount-badge">-{{ product.discount }}%</span>
|
||||
}
|
||||
@if (product.badges && product.badges.length > 0) {
|
||||
<div class="item-badges-overlay">
|
||||
@for (badge of product.badges; track badge) {
|
||||
<span class="item-badge" [class]="getBadgeClass(badge)">{{ badge }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="item-details">
|
||||
|
||||
@@ -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();
|
||||
|
||||
765
src/app/interceptors/mock-data.interceptor.ts
Normal file
765
src/app/interceptors/mock-data.interceptor.ts
Normal file
@@ -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<T>(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);
|
||||
};
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -1,2 +1,3 @@
|
||||
export * from './category.model';
|
||||
export * from './item.model';
|
||||
|
||||
|
||||
@@ -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<string, ItemTranslation>;
|
||||
comments?: Comment[];
|
||||
}
|
||||
|
||||
export interface CartItem extends Item {
|
||||
|
||||
@@ -44,7 +44,15 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="item-description">{{ item.description.substring(0, 100) }}...</p>
|
||||
<p class="item-description">{{ item.simpleDescription || item?.description?.substring?.(0, 100) || '' }}...</p>
|
||||
|
||||
@if (item.badges && item.badges.length > 0) {
|
||||
<div class="cart-item-badges">
|
||||
@for (badge of item.badges; track badge) {
|
||||
<span class="item-badge" [class]="getBadgeClass(badge)">{{ badge }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="item-footer">
|
||||
<div class="item-pricing">
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -16,6 +16,13 @@
|
||||
@if (item.discount > 0) {
|
||||
<div class="discount-badge">-{{ item.discount }}%</div>
|
||||
}
|
||||
@if (item.badges && item.badges.length > 0) {
|
||||
<div class="item-badges-overlay">
|
||||
@for (badge of item.badges; track badge) {
|
||||
<span class="item-badge" [class]="getBadgeClass(badge)">{{ badge }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="item-details">
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -72,78 +72,55 @@
|
||||
}
|
||||
</div>
|
||||
} @else {
|
||||
<!-- DEXAR VERSION - Redesigned 2026 -->
|
||||
<div class="dexar-home">
|
||||
<!-- Hero Section with Full Width Image -->
|
||||
<section class="dexar-hero">
|
||||
<div class="dexar-hero-overlay">
|
||||
<div class="dexar-hero-content">
|
||||
<h1 class="dexar-hero-title">Здесь ты найдёшь всё</h1>
|
||||
<p class="dexar-hero-subtitle">Тысячи товаров в одном месте</p>
|
||||
<p class="dexar-hero-tagline">просто и удобно</p>
|
||||
|
||||
<div class="dexar-hero-actions">
|
||||
<a (click)="scrollToCatalog()" class="dexar-btn-primary">
|
||||
Перейти в каталог
|
||||
</a>
|
||||
<button (click)="navigateToSearch()" class="dexar-btn-secondary">
|
||||
Найти товар
|
||||
<svg width="11" height="16" viewBox="0 0 11 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 1L9 8L1 15" stroke="#1E3C38" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- DEXAR VERSION - Original -->
|
||||
<div class="home-container">
|
||||
<header class="hero hero-compact">
|
||||
<h1>{{ brandName }}</h1>
|
||||
<p>Ваш маркетплейс товаров и услуг</p>
|
||||
</header>
|
||||
|
||||
<!-- Items Carousel -->
|
||||
<app-items-carousel />
|
||||
|
||||
@if (loading()) {
|
||||
<div class="dexar-loading">
|
||||
<div class="dexar-spinner"></div>
|
||||
<div class="loading">
|
||||
<div class="spinner"></div>
|
||||
<p>Загрузка категорий...</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (error()) {
|
||||
<div class="dexar-error">
|
||||
<div class="error">
|
||||
<p>{{ error() }}</p>
|
||||
<button (click)="loadCategories()" class="dexar-retry-btn">Попробовать снова</button>
|
||||
<button (click)="loadCategories()">Попробовать снова</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (!loading() && !error()) {
|
||||
<section class="dexar-categories" id="catalog">
|
||||
<h2 class="dexar-categories-title">Каталог товаров</h2>
|
||||
<section class="categories">
|
||||
<h2>Категории</h2>
|
||||
@if (topLevelCategories().length === 0) {
|
||||
<div class="dexar-empty-categories">
|
||||
<div class="dexar-empty-icon">📦</div>
|
||||
<div class="empty-categories">
|
||||
<div class="empty-icon">📦</div>
|
||||
<h3>Категории пока отсутствуют</h3>
|
||||
<p>Скоро здесь появятся категории товаров</p>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="dexar-categories-grid">
|
||||
<div class="categories-grid">
|
||||
@for (category of topLevelCategories(); track category.categoryID) {
|
||||
<a [routerLink]="['/category', category.categoryID]"
|
||||
class="dexar-category-card"
|
||||
[class.dexar-category-card--wide]="isWideCategory(category.categoryID)">
|
||||
<div class="dexar-category-image">
|
||||
@if (isWideCategory(category.categoryID) && category.wideBanner && category.wideBanner !== true) {
|
||||
<img [src]="category.wideBanner" [alt]="category.name" loading="lazy" decoding="async" />
|
||||
} @else if (category.icon) {
|
||||
<img [src]="category.icon" [alt]="category.name" loading="lazy" decoding="async" />
|
||||
} @else {
|
||||
<div class="dexar-category-fallback">{{ category.name.charAt(0) }}</div>
|
||||
}
|
||||
<div class="category-card">
|
||||
<a [routerLink]="['/category', category.categoryID]" class="category-link">
|
||||
<div class="category-media">
|
||||
@if (category.icon) {
|
||||
<img [src]="category.icon" [alt]="category.name" loading="lazy" decoding="async" />
|
||||
} @else {
|
||||
<div class="category-fallback">{{ category.name }}</div>
|
||||
}
|
||||
</div>
|
||||
<h3>{{ category.name }}</h3>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dexar-category-info">
|
||||
<h3 class="dexar-category-name">{{ category.name }}</h3>
|
||||
<p class="dexar-category-count">{{ getItemCount(category.categoryID) }} товаров</p>
|
||||
</div>
|
||||
</a>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -55,7 +55,23 @@
|
||||
</div>
|
||||
|
||||
<div class="novo-info">
|
||||
<h1 class="novo-title">{{ item()!.name }}</h1>
|
||||
<h1 class="novo-title">{{ getItemName() }}</h1>
|
||||
|
||||
@if (item()!.badges && item()!.badges!.length > 0) {
|
||||
<div class="novo-badges">
|
||||
@for (badge of item()!.badges!; track badge) {
|
||||
<span class="item-badge" [class]="getBadgeClass(badge)">{{ badge }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (item()!.tags && item()!.tags!.length > 0) {
|
||||
<div class="novo-tags">
|
||||
@for (tag of item()!.tags!; track tag) {
|
||||
<span class="item-tag">#{{ tag }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="novo-rating">
|
||||
<span class="stars">{{ getRatingStars(item()!.rating) }}</span>
|
||||
@@ -77,10 +93,13 @@
|
||||
|
||||
<div class="novo-stock">
|
||||
<span class="stock-label">Наличие:</span>
|
||||
<div class="stock-indicator" [class.high]="item()!.remainings === 'high'" [class.medium]="item()!.remainings === 'medium'" [class.low]="item()!.remainings === 'low'">
|
||||
<div class="stock-indicator" [class]="getStockClass()">
|
||||
<span class="dot"></span>
|
||||
{{ item()!.remainings === 'high' ? 'В наличии' : item()!.remainings === 'medium' ? 'Мало' : 'Осталось немного' }}
|
||||
{{ getStockLabel() }}
|
||||
</div>
|
||||
@if (item()!.quantity != null) {
|
||||
<span class="stock-qty">({{ item()!.quantity }} шт.)</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<button class="novo-add-cart" (click)="addToCart()">
|
||||
@@ -93,8 +112,26 @@
|
||||
</button>
|
||||
|
||||
<div class="novo-description">
|
||||
<h3>Описание</h3>
|
||||
<div [innerHTML]="getSafeHtml(item()!.description)"></div>
|
||||
@if (getSimpleDescription()) {
|
||||
<p class="novo-simple-desc">{{ getSimpleDescription() }}</p>
|
||||
}
|
||||
|
||||
@if (hasDescriptionFields()) {
|
||||
<h3>Характеристики</h3>
|
||||
<table class="novo-specs-table">
|
||||
<tbody>
|
||||
@for (field of getTranslatedDescriptionFields(); track field.key) {
|
||||
<tr>
|
||||
<td class="spec-key">{{ field.key }}</td>
|
||||
<td class="spec-value">{{ field.value }}</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
} @else {
|
||||
<h3>Описание</h3>
|
||||
<div [innerHTML]="getSafeHtml(item()!.description)"></div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -249,7 +286,23 @@
|
||||
|
||||
<!-- Item Info -->
|
||||
<div class="dx-info">
|
||||
<h1 class="dx-title">{{ item()!.name }}</h1>
|
||||
<h1 class="dx-title">{{ getItemName() }}</h1>
|
||||
|
||||
@if (item()!.badges && item()!.badges!.length > 0) {
|
||||
<div class="dx-badges">
|
||||
@for (badge of item()!.badges!; track badge) {
|
||||
<span class="item-badge" [class]="getBadgeClass(badge)">{{ badge }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (item()!.tags && item()!.tags!.length > 0) {
|
||||
<div class="dx-tags">
|
||||
@for (tag of item()!.tags!; track tag) {
|
||||
<span class="item-tag">#{{ tag }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="dx-rating">
|
||||
<div class="dx-stars">
|
||||
@@ -277,13 +330,13 @@
|
||||
|
||||
<div class="dx-stock">
|
||||
<span class="dx-stock-label">Наличие:</span>
|
||||
<span class="dx-stock-status"
|
||||
[class.high]="item()!.remainings === 'high'"
|
||||
[class.medium]="item()!.remainings === 'medium'"
|
||||
[class.low]="item()!.remainings === 'low'">
|
||||
<span class="dx-stock-status" [class]="getStockClass()">
|
||||
<span class="dx-stock-dot"></span>
|
||||
{{ item()!.remainings === 'high' ? 'В наличии' : item()!.remainings === 'medium' ? 'Заканчивается' : 'Последние штуки' }}
|
||||
{{ getStockLabel() }}
|
||||
</span>
|
||||
@if (item()!.quantity != null) {
|
||||
<span class="dx-stock-qty">({{ item()!.quantity }} шт.)</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<button class="dx-add-cart" (click)="addToCart()">
|
||||
@@ -296,8 +349,26 @@
|
||||
</button>
|
||||
|
||||
<div class="dx-description">
|
||||
<h2>Описание</h2>
|
||||
<div class="dx-description-text" [innerHTML]="getSafeHtml(item()!.description)"></div>
|
||||
@if (getSimpleDescription()) {
|
||||
<p class="dx-simple-desc">{{ getSimpleDescription() }}</p>
|
||||
}
|
||||
|
||||
@if (hasDescriptionFields()) {
|
||||
<h2>Характеристики</h2>
|
||||
<table class="dx-specs-table">
|
||||
<tbody>
|
||||
@for (field of getTranslatedDescriptionFields(); track field.key) {
|
||||
<tr>
|
||||
<td class="spec-key">{{ field.key }}</td>
|
||||
<td class="spec-value">{{ field.value }}</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
} @else {
|
||||
<h2>Описание</h2>
|
||||
<div class="dx-description-text" [innerHTML]="getSafeHtml(item()!.description)"></div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 '<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>';
|
||||
return 'Пользователь';
|
||||
}
|
||||
return this.telegramService.getDisplayName();
|
||||
}
|
||||
|
||||
@@ -63,11 +63,22 @@
|
||||
@if (item.discount > 0) {
|
||||
<div class="discount-badge">-{{ item.discount }}%</div>
|
||||
}
|
||||
@if (item.badges && item.badges.length > 0) {
|
||||
<div class="item-badges-overlay">
|
||||
@for (badge of item.badges; track badge) {
|
||||
<span class="item-badge" [class]="getBadgeClass(badge)">{{ badge }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="item-details">
|
||||
<h3 class="item-name">{{ item.name }}</h3>
|
||||
|
||||
@if (item.simpleDescription) {
|
||||
<p class="item-simple-desc">{{ item.simpleDescription }}</p>
|
||||
}
|
||||
|
||||
<div class="item-rating">
|
||||
<span class="rating-stars">⭐ {{ item.rating }}</span>
|
||||
<span class="rating-count">({{ item.callbacks?.length || 0 }})</span>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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<Category[]> {
|
||||
return this.http.get<Category[]>(`${this.baseUrl}/category`);
|
||||
return this.http.get<any[]>(`${this.baseUrl}/category`)
|
||||
.pipe(map(cats => this.normalizeCategories(cats)));
|
||||
}
|
||||
|
||||
getCategoryItems(categoryID: number, count: number = 50, skip: number = 0): Observable<Item[]> {
|
||||
const params = new HttpParams()
|
||||
.set('count', count.toString())
|
||||
.set('skip', skip.toString());
|
||||
return this.http.get<Item[]>(`${this.baseUrl}/category/${categoryID}`, { params })
|
||||
return this.http.get<any[]>(`${this.baseUrl}/category/${categoryID}`, { params })
|
||||
.pipe(map(items => this.normalizeItems(items)));
|
||||
}
|
||||
|
||||
getItem(itemID: number): Observable<Item> {
|
||||
return this.http.get<Item>(`${this.baseUrl}/item/${itemID}`)
|
||||
return this.http.get<any>(`${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<any>(`${this.baseUrl}/searchitems`, { params })
|
||||
.pipe(
|
||||
map(response => ({
|
||||
items: this.normalizeItems(response?.items || []),
|
||||
@@ -75,7 +176,7 @@ export class ApiService {
|
||||
}
|
||||
|
||||
getCart(): Observable<Item[]> {
|
||||
return this.http.get<Item[]>(`${this.baseUrl}/cart`)
|
||||
return this.http.get<any[]>(`${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<Item[]>(`${this.baseUrl}/randomitems`, { params })
|
||||
return this.http.get<any[]>(`${this.baseUrl}/randomitems`, { params })
|
||||
.pipe(map(items => this.normalizeItems(items)));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
@@ -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<string, string> = {
|
||||
'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 '';
|
||||
}
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user