bo integration

2026-02-20 10:44:03 +04:00
parent 2baa72a022
commit 369af40f20
25 changed files with 1777 additions and 625 deletions
--- a/src/app/pages/item-detail/item-detail.component.html
+++ b/src/app/pages/item-detail/item-detail.component.html
@@ -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>
--- 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;
+}
--- 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 '<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>';
+      return 'Пользователь';
    }
    return this.telegramService.getDisplayName();
  }