feat(front-end): sitemap

2026-03-11 15:07:12 +01:00
parent aeeed1c138
commit d1e7e7eaca
7 changed files with 190 additions and 29 deletions
--- a/frontend/src/app/features/admin/pages/admin-home-media.component.html
+++ b/frontend/src/app/features/admin/pages/admin-home-media.component.html
@@ -130,7 +130,7 @@
                    <button
                      *ngFor="let language of mediaLanguages"
                      type="button"
-                      class="language-toggle-btn ui-language-toolbar__button"
+                      class="ui-language-toolbar__button image-language-button"
                      [class.active]="
                        getFormState(section.usageKey).activeLanguage ===
                        language
@@ -139,11 +139,30 @@
                        isLanguageComplete(section.usageKey, language)
                      "
                      [class.incomplete]="
-                        !isLanguageComplete(section.usageKey, language)
+                        isLanguageIncomplete(section.usageKey, language)
+                      "
+                      [class.empty]="
+                        !isLanguageStarted(section.usageKey, language)
                      "
                      (click)="setActiveLanguage(section.usageKey, language)"
                    >
-                      {{ mediaLanguageLabels[language] }}
+                      <span class="image-language-button__label">
+                        {{ mediaLanguageLabels[language] }}
+                      </span>
+                      <span
+                        class="image-language-button__state"
+                        *ngIf="isLanguageComplete(section.usageKey, language)"
+                      >
+                        OK
+                      </span>
+                      <span
+                        class="image-language-button__state"
+                        *ngIf="
+                          isLanguageIncomplete(section.usageKey, language)
+                        "
+                      >
+                        ...
+                      </span>
                    </button>
                  </div>
                </div>
--- a/frontend/src/app/features/admin/pages/admin-home-media.component.scss
+++ b/frontend/src/app/features/admin/pages/admin-home-media.component.scss
@@ -27,6 +27,62 @@
  gap: var(--space-1);
 }

+.image-language-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-width: 3.15rem;
+  background: #ffffff;
+  color: var(--color-text-muted);
+}
+
+.image-language-button.empty {
+  opacity: 0.76;
+}
+
+.image-language-button.complete {
+  border-color: #b8ddc2;
+}
+
+.image-language-button.incomplete {
+  border-color: #e8c8c2;
+}
+
+.image-language-button.active {
+  background: #fff5b8;
+  border-color: var(--color-brand);
+  color: var(--color-text);
+  opacity: 1;
+}
+
+.image-language-button__label {
+  line-height: 1;
+}
+
+.image-language-button__state {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.2rem;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.08);
+  font-size: 0.62rem;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.image-language-button.complete .image-language-button__state {
+  background: #dcefdc;
+  color: #25603b;
+}
+
+.image-language-button.incomplete .image-language-button__state {
+  background: #f7ddd7;
+  color: #944329;
+}
+
 .form-field--wide {
  grid-column: 1 / -1;
 }
--- a/frontend/src/app/features/admin/pages/admin-home-media.component.ts
+++ b/frontend/src/app/features/admin/pages/admin-home-media.component.ts
@@ -17,12 +17,16 @@ type HomeSectionKey =
  | 'capability-prototyping'
  | 'capability-custom-parts'
  | 'capability-small-series'
-  | 'capability-cad';
+  | 'capability-cad'
+  | 'joe'
+  | 'matteo';
+
+type HomeMediaUsageType = 'HOME_SECTION' | 'ABOUT_MEMBER';

 interface HomeMediaSectionConfig {
-  usageType: 'HOME_SECTION';
+  usageType: HomeMediaUsageType;
  usageKey: HomeSectionKey;
-  groupId: 'galleries' | 'capabilities';
+  groupId: 'galleries' | 'capabilities' | 'about-members';
  title: string;
  preferredVariantName: 'card' | 'hero';
 }
@@ -94,6 +98,10 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
      id: 'capabilities',
      title: 'Cosa puoi ottenere',
    },
+    {
+      id: 'about-members',
+      title: 'Chi siamo',
+    },
  ];

  readonly sectionConfigs: readonly HomeMediaSectionConfig[] = [
@@ -139,6 +147,20 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
      title: 'Home: consulenza e CAD',
      preferredVariantName: 'card',
    },
+    {
+      usageType: 'ABOUT_MEMBER',
+      usageKey: 'joe',
+      groupId: 'about-members',
+      title: 'Chi siamo: Joe',
+      preferredVariantName: 'card',
+    },
+    {
+      usageType: 'ABOUT_MEMBER',
+      usageKey: 'matteo',
+      groupId: 'about-members',
+      title: 'Chi siamo: Matteo',
+      preferredVariantName: 'card',
+    },
  ];

  sections: HomeMediaSectionView[] = [];
@@ -155,6 +177,8 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
      'capability-custom-parts': this.createEmptyFormState(),
      'capability-small-series': this.createEmptyFormState(),
      'capability-cad': this.createEmptyFormState(),
+      joe: this.createEmptyFormState(),
+      matteo: this.createEmptyFormState(),
    };

  get configuredSectionCount(): number {
@@ -432,6 +456,25 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
    );
  }

+  isLanguageStarted(
+    sectionKey: HomeSectionKey,
+    language: AdminMediaLanguage,
+  ): boolean {
+    return this.isTranslationStarted(
+      this.getFormState(sectionKey).translations[language],
+    );
+  }
+
+  isLanguageIncomplete(
+    sectionKey: HomeSectionKey,
+    language: AdminMediaLanguage,
+  ): boolean {
+    return (
+      this.isLanguageStarted(sectionKey, language) &&
+      !this.isLanguageComplete(sectionKey, language)
+    );
+  }
+
  getItemTranslation(
    item: HomeMediaItem,
    language: AdminMediaLanguage,
@@ -619,6 +662,10 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
    return !!translation.title.trim() && !!translation.altText.trim();
  }

+  private isTranslationStarted(translation: AdminMediaTranslation): boolean {
+    return !!translation.title.trim() || !!translation.altText.trim();
+  }
+
  private validateTranslations(
    translations: Record<AdminMediaLanguage, AdminMediaTranslation>,
  ): string | null {
--- a/frontend/src/app/features/admin/pages/admin-shop.component.html
+++ b/frontend/src/app/features/admin/pages/admin-shop.component.html
@@ -8,25 +8,29 @@
      </p>
    </div>

-    <div class="header-actions">
-      <article class="ui-stat-chip">
-        <strong>{{ products.length }}</strong>
-        <span>prodotti</span>
-      </article>
-      <article class="ui-stat-chip">
-        <strong>{{ categories.length }}</strong>
-        <span>categorie</span>
-      </article>
-      <button
-        type="button"
-        class="ui-button ui-button--ghost"
-        (click)="loadWorkspace()"
-      >
-        Aggiorna
-      </button>
-      <button type="button" class="ui-button" (click)="startCreateProduct()">
-        Nuovo prodotto
-      </button>
+    <div class="header-side ui-stack ui-stack--dense">
+      <div class="header-stats ui-inline-actions">
+        <article class="ui-stat-chip">
+          <strong>{{ products.length }}</strong>
+          <span>prodotti</span>
+        </article>
+        <article class="ui-stat-chip">
+          <strong>{{ categories.length }}</strong>
+          <span>categorie</span>
+        </article>
+      </div>
+      <div class="header-actions ui-inline-actions">
+        <button
+          type="button"
+          class="ui-button ui-button--ghost"
+          (click)="loadWorkspace()"
+        >
+          Aggiorna
+        </button>
+        <button type="button" class="ui-button" (click)="startCreateProduct()">
+          Nuovo prodotto
+        </button>
+      </div>
    </div>
  </header>

--- a/frontend/src/app/features/admin/pages/admin-shop.component.scss
+++ b/frontend/src/app/features/admin/pages/admin-shop.component.scss
@@ -80,6 +80,20 @@
  color: var(--color-text-muted);
 }

+.header-side {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  align-items: flex-end;
+}
+
+.header-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  justify-content: flex-end;
+}
+
 .header-actions {
  display: flex;
  flex-wrap: wrap;
@@ -537,6 +551,15 @@ tbody tr.selected {
    align-items: stretch;
  }

+  .header-side {
+    align-items: stretch;
+  }
+
+  .header-stats,
+  .header-actions {
+    justify-content: flex-start;
+  }
+
  .list-toolbar,
  .ui-form-grid--two {
    grid-template-columns: 1fr;