chore(front-end):map color

2026-03-12 16:43:00 +01:00
parent 5d17b23c3a
commit fcdede2dd6
16 changed files with 262 additions and 51 deletions
--- a/frontend/src/app/features/checkout/checkout.component.html
+++ b/frontend/src/app/features/checkout/checkout.component.html
@@ -265,14 +265,16 @@
                  </span>
                  <span *ngIf="itemVariantLabel(item) as variantLabel">
                    {{ "SHOP.VARIANT" | translate }}:
-                    {{ variantLabel }}
+                    {{ variantLabel | translate }}
                  </span>
                  <span class="item-color" *ngIf="itemColorLabel(item) !== '-'">
                    <span
                      class="color-dot"
                      [style.background-color]="itemColorSwatch(item)"
                    ></span>
-                    <span class="color-name">{{ itemColorLabel(item) }}</span>
+                    <span class="color-name">{{
+                      itemColorLabel(item) | translate
+                    }}</span>
                  </span>
                </div>
                <div class="item-specs-sub" *ngIf="showItemPrintMetrics(item)">
--- a/frontend/src/app/features/checkout/checkout.component.ts
+++ b/frontend/src/app/features/checkout/checkout.component.ts
@@ -22,7 +22,12 @@ import {
 } from '../../shared/components/price-breakdown/price-breakdown.component';
 import { LanguageService } from '../../core/services/language.service';
 import { StlViewerComponent } from '../../shared/components/stl-viewer/stl-viewer.component';
-import { getColorHex } from '../../core/constants/colors.const';
+import {
+  findColorHex,
+  getColorHex,
+  getColorLabelToken,
+  normalizeColorValue,
+} from '../../core/constants/colors.const';

@Component({
  selector: 'app-checkout',
@@ -252,8 +257,7 @@ export class CheckoutComponent implements OnInit {
    if (variantLabel) {
      return variantLabel;
    }
-    const colorName = String(item?.shopVariantColorName ?? '').trim();
-    return colorName || null;
+    return getColorLabelToken(item?.shopVariantColorName);
  }

  showItemMaterial(item: any): boolean {
@@ -284,10 +288,10 @@ export class CheckoutComponent implements OnInit {
  itemColorLabel(item: any): string {
    const shopColor = String(item?.shopVariantColorName ?? '').trim();
    if (shopColor) {
-      return shopColor;
+      return getColorLabelToken(shopColor) ?? '-';
    }
    const raw = String(item?.colorCode ?? '').trim();
-    return raw || '-';
+    return getColorLabelToken(raw) ?? '-';
  }

  itemColorSwatch(item: any): string {
@@ -310,12 +314,12 @@ export class CheckoutComponent implements OnInit {
      return raw;
    }

-    const byName = this.variantHexByColorName.get(raw.toLowerCase());
+    const byName = this.variantHexByColorName.get(normalizeColorValue(raw));
    if (byName) {
      return byName;
    }

-    const fallback = getColorHex(raw);
+    const fallback = findColorHex(raw) ?? getColorHex(raw);
    if (fallback && fallback !== '#facf0a') {
      return fallback;
    }
@@ -373,7 +377,10 @@ export class CheckoutComponent implements OnInit {
              this.variantHexById.set(variantId, colorHex);
            }
            if (colorName && colorHex) {
-              this.variantHexByColorName.set(colorName.toLowerCase(), colorHex);
+              this.variantHexByColorName.set(
+                normalizeColorValue(colorName),
+                colorHex,
+              );
            }
          }
        }
--- a/frontend/src/app/features/order/order.component.html
+++ b/frontend/src/app/features/order/order.component.html
@@ -248,7 +248,8 @@
                      }}
                    </span>
                    <span *ngIf="itemVariantLabel(item) as variantLabel">
-                      {{ "SHOP.VARIANT" | translate }}: {{ variantLabel }}
+                      {{ "SHOP.VARIANT" | translate }}:
+                      {{ variantLabel | translate }}
                    </span>
                    <span class="item-color-chip">
                      <span
@@ -256,7 +257,7 @@
                        *ngIf="itemColorHex(item) as colorHex"
                        [style.background-color]="colorHex"
                      ></span>
-                      <span>{{ itemColorLabel(item) }}</span>
+                      <span>{{ itemColorLabel(item) | translate }}</span>
                    </span>
                  </div>

--- a/frontend/src/app/features/order/order.component.ts
+++ b/frontend/src/app/features/order/order.component.ts
@@ -6,6 +6,10 @@ import { AppCardComponent } from '../../shared/components/app-card/app-card.comp
 import { QuoteEstimatorService } from '../calculator/services/quote-estimator.service';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { environment } from '../../../environments/environment';
+import {
+  findColorHex,
+  getColorLabelToken,
+} from '../../core/constants/colors.const';
 import {
  PriceBreakdownComponent,
  PriceBreakdownRow,
@@ -278,23 +282,28 @@ export class OrderComponent implements OnInit {
      return variantLabel;
    }

-    const colorName = String(item?.shopVariantColorName ?? '').trim();
-    return colorName || null;
+    return getColorLabelToken(item?.shopVariantColorName);
  }

  itemColorLabel(item: PublicOrderItem): string {
    const shopColor = String(item?.shopVariantColorName ?? '').trim();
    if (shopColor) {
-      return shopColor;
+      return getColorLabelToken(shopColor) ?? this.translate.instant('ORDER.NOT_AVAILABLE');
    }

    const filamentColor = String(item?.filamentColorName ?? '').trim();
    if (filamentColor) {
-      return filamentColor;
+      return (
+        getColorLabelToken(filamentColor) ??
+        this.translate.instant('ORDER.NOT_AVAILABLE')
+      );
    }

    const rawColor = String(item?.colorCode ?? '').trim();
-    return rawColor || this.translate.instant('ORDER.NOT_AVAILABLE');
+    return (
+      getColorLabelToken(rawColor) ??
+      this.translate.instant('ORDER.NOT_AVAILABLE')
+    );
  }

  itemColorHex(item: PublicOrderItem): string | null {
@@ -313,7 +322,7 @@ export class OrderComponent implements OnInit {
      return rawColor;
    }

-    return null;
+    return findColorHex(rawColor);
  }

  showItemMaterial(item: PublicOrderItem): boolean {
--- a/frontend/src/app/features/shop/product-detail.component.html
+++ b/frontend/src/app/features/shop/product-detail.component.html
@@ -152,7 +152,7 @@
                            @if (selectedMaterial()?.label) {
                              <span aria-hidden="true">·</span>
                            }
-                            <span>{{ colorLabel(activeVariant) }}</span>
+                            <span>{{ colorLabel(activeVariant) | translate }}</span>
                          }
                        </p>
                      }
@@ -267,7 +267,9 @@
                          </span>

                          <span class="color-trigger__copy">
-                            <strong>{{ colorLabel(activeVariant) }}</strong>
+                            <strong>{{
+                              colorLabel(activeVariant) | translate
+                            }}</strong>
                            <small>{{ selectedMaterial()?.label }}</small>
                          </span>
                        </button>
@@ -304,7 +306,7 @@
                                </span>

                                <span class="color-popup__name">{{
-                                  colorLabel(variant)
+                                  colorLabel(variant) | translate
                                }}</span>
                              </button>
                            }
--- a/frontend/src/app/features/shop/product-detail.component.ts
+++ b/frontend/src/app/features/shop/product-detail.component.ts
@@ -15,7 +15,11 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { catchError, combineLatest, finalize, of, switchMap, tap } from 'rxjs';
 import { SeoService } from '../../core/services/seo.service';
 import { LanguageService } from '../../core/services/language.service';
-import { getColorHex } from '../../core/constants/colors.const';
+import {
+  findColorHex,
+  getColorHex,
+  getColorLabelToken,
+} from '../../core/constants/colors.const';
 import { AppButtonComponent } from '../../shared/components/app-button/app-button.component';
 import { AppCardComponent } from '../../shared/components/app-card/app-card.component';
 import { StlViewerComponent } from '../../shared/components/stl-viewer/stl-viewer.component';
@@ -403,7 +407,9 @@ export class ProductDetailComponent {
  }

  colorLabel(variant: ShopProductVariantOption): string {
-    return variant.colorName || variant.variantLabel || '-';
+    return (
+      getColorLabelToken(variant.colorName || variant.variantLabel) ?? '-'
+    );
  }

  colorHex(variant: ShopProductVariantOption | null | undefined): string {
@@ -524,17 +530,7 @@ export class ProductDetailComponent {
  }

  private colorHexFromName(value: string | null | undefined): string | null {
-    const colorName = String(value ?? '').trim();
-    if (!colorName) {
-      return null;
-    }
-
-    const fallback = getColorHex(colorName);
-    if (!fallback || fallback === '#facf0a') {
-      return null;
-    }
-
-    return fallback;
+    return findColorHex(value);
  }

  private applySeo(product: ShopProductDetail): void {
--- a/frontend/src/app/features/shop/shop-page.component.html
+++ b/frontend/src/app/features/shop/shop-page.component.html
@@ -84,7 +84,7 @@
                <div class="cart-line-copy">
                  <strong>{{ cartItemName(item) }}</strong>
                  @if (cartItemVariant(item); as variant) {
-                    <span class="cart-line-meta">{{ variant }}</span>
+                    <span class="cart-line-meta">{{ variant | translate }}</span>
                  }
                  @if (cartItemColor(item); as color) {
                    <span class="cart-line-color">
@@ -92,7 +92,7 @@
                        class="color-dot"
                        [style.background-color]="cartItemColorHex(item)"
                      ></span>
-                      <span>{{ color }}</span>
+                      <span>{{ color | translate }}</span>
                    </span>
                  }
                </div>
--- a/frontend/src/app/features/shop/shop-page.component.ts
+++ b/frontend/src/app/features/shop/shop-page.component.ts
@@ -22,6 +22,10 @@ import {
 } from 'rxjs';
 import { SeoService } from '../../core/services/seo.service';
 import { LanguageService } from '../../core/services/language.service';
+import {
+  findColorHex,
+  getColorLabelToken,
+} from '../../core/constants/colors.const';
 import { AppButtonComponent } from '../../shared/components/app-button/app-button.component';
 import { AppCardComponent } from '../../shared/components/app-card/app-card.component';
 import { ProductCardComponent } from './components/product-card/product-card.component';
@@ -157,15 +161,25 @@ export class ShopPageComponent {
  }

  cartItemVariant(item: ShopCartItem): string | null {
-    return item.shopVariantLabel || item.shopVariantColorName || null;
+    return (
+      item.shopVariantLabel || getColorLabelToken(item.shopVariantColorName)
+    );
  }

  cartItemColor(item: ShopCartItem): string | null {
-    return item.shopVariantColorName || item.colorCode || null;
+    return (
+      getColorLabelToken(item.shopVariantColorName) ??
+      getColorLabelToken(item.colorCode)
+    );
  }

  cartItemColorHex(item: ShopCartItem): string {
-    return item.shopVariantColorHex || '#c9ced6';
+    return (
+      item.shopVariantColorHex ||
+      findColorHex(item.shopVariantColorName) ||
+      findColorHex(item.colorCode) ||
+      '#c9ced6'
+    );
  }

  navigateToCategory(slug?: string | null): void {