sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(project-editor): toggles + remove as-any casts in features section

Browse Source 
- checkboxes -> app-toggle, wrap in SectionCard
- toggleUserExperience/toggleProductFeature typed without 'as any' (optional
  chaining on the already-typed UserExperienceConfig/ProductPageConfig union)
- removed dead, broken toggleRecentViewed method (unused, not wired to the
  template; toggleUserExperience('recentlyViewed', ...) is the live path)

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
sdarbinyan
2026-07-16 02:12:25 +04:00
parent 0c9a855232
commit 058e2d571f
2 changed files with 16 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/app/features/project-editor/sections/features-section.component.html
View File

@@ -1,16 +1,15 @@
@if (bootstrap(); as bootstrap) { @if (bootstrap(); as bootstrap) {
<section class="editor-section-card"> <app-section-card [title]="'builder.marketplaceFeatures' | translate">
<h2>{{ 'builder.marketplaceFeatures' | translate }}</h2>
<div class="editor-grid three toggles"> <div class="editor-grid three toggles">
<label class="toggle-row"><input type="checkbox" [checked]="bootstrap.featureFlags.wishlist" (change)="toggleFeature('wishlist', $any($event.target).checked)" /><span>{{ 'builder.showWishlist' | translate }}</span><small class="field-desc">{{ 'builder.wishlistFeatureDesc' | translate }}</small></label> <label class="toggle-row"><app-toggle [ngModel]="bootstrap.featureFlags.wishlist" (ngModelChange)="toggleFeature('wishlist', $event)" [ariaLabel]="'builder.showWishlist' | translate" /><span>{{ 'builder.showWishlist' | translate }}</span><small class="field-desc">{{ 'builder.wishlistFeatureDesc' | translate }}</small></label>
<label class="toggle-row"><input type="checkbox" [checked]="bootstrap.featureFlags.compare" (change)="toggleFeature('compare', $any($event.target).checked)" /><span>{{ 'builder.showCompare' | translate }}</span><small class="field-desc">{{ 'builder.compareFeatureDesc' | translate }}</small></label> <label class="toggle-row"><app-toggle [ngModel]="bootstrap.featureFlags.compare" (ngModelChange)="toggleFeature('compare', $event)" [ariaLabel]="'builder.showCompare' | translate" /><span>{{ 'builder.showCompare' | translate }}</span><small class="field-desc">{{ 'builder.compareFeatureDesc' | translate }}</small></label>
<label class="toggle-row"><input type="checkbox" [checked]="bootstrap.featureFlags.reviews" (change)="toggleFeature('reviews', $any($event.target).checked)" /><span>{{ 'builder.reviews' | translate }}</span><small class="field-desc">{{ 'builder.reviewsFeatureDesc' | translate }}</small></label> <label class="toggle-row"><app-toggle [ngModel]="bootstrap.featureFlags.reviews" (ngModelChange)="toggleFeature('reviews', $event)" [ariaLabel]="'builder.reviews' | translate" /><span>{{ 'builder.reviews' | translate }}</span><small class="field-desc">{{ 'builder.reviewsFeatureDesc' | translate }}</small></label>
<label class="toggle-row"><input type="checkbox" [checked]="bootstrap.productPage?.questions?.enabled !== false" (change)="toggleProductFeature('questions', $any($event.target).checked)" /><span>{{ 'builder.questions' | translate }}</span><small class="field-desc">{{ 'builder.questionsFeatureDesc' | translate }}</small></label> <label class="toggle-row"><app-toggle [ngModel]="bootstrap.productPage?.questions?.enabled !== false" (ngModelChange)="toggleProductFeature('questions', $event)" [ariaLabel]="'builder.questions' | translate" /><span>{{ 'builder.questions' | translate }}</span><small class="field-desc">{{ 'builder.questionsFeatureDesc' | translate }}</small></label>
<label class="toggle-row"><input type="checkbox" [checked]="!!bootstrap.featureFlags.comments" (change)="toggleFeature('comments', $any($event.target).checked)" /><span>{{ 'builder.comments' | translate }}</span><small class="field-desc">{{ 'builder.commentsFeatureDesc' | translate }}</small></label> <label class="toggle-row"><app-toggle [ngModel]="!!bootstrap.featureFlags.comments" (ngModelChange)="toggleFeature('comments', $event)" [ariaLabel]="'builder.comments' | translate" /><span>{{ 'builder.comments' | translate }}</span><small class="field-desc">{{ 'builder.commentsFeatureDesc' | translate }}</small></label>
<label class="toggle-row"><input type="checkbox" [checked]="!!bootstrap.featureFlags.recommendations" (change)="toggleFeature('recommendations', $any($event.target).checked)" /><span>{{ 'builder.recommendations' | translate }}</span><small class="field-desc">{{ 'builder.recommendationsFeatureDesc' | translate }}</small></label> <label class="toggle-row"><app-toggle [ngModel]="!!bootstrap.featureFlags.recommendations" (ngModelChange)="toggleFeature('recommendations', $event)" [ariaLabel]="'builder.recommendations' | translate" /><span>{{ 'builder.recommendations' | translate }}</span><small class="field-desc">{{ 'builder.recommendationsFeatureDesc' | translate }}</small></label>
<label class="toggle-row"><input type="checkbox" [checked]="bootstrap.userExperience?.recentlyViewed?.enabled !== false" (change)="toggleUserExperience('recentlyViewed', $any($event.target).checked)" /><span>{{ 'builder.recentlyViewed' | translate }}</span><small class="field-desc">{{ 'builder.recentlyViewedFeatureDesc' | translate }}</small></label> <label class="toggle-row"><app-toggle [ngModel]="bootstrap.userExperience?.recentlyViewed?.enabled !== false" (ngModelChange)="toggleUserExperience('recentlyViewed', $event)" [ariaLabel]="'builder.recentlyViewed' | translate" /><span>{{ 'builder.recentlyViewed' | translate }}</span><small class="field-desc">{{ 'builder.recentlyViewedFeatureDesc' | translate }}</small></label>
<label class="toggle-row"><input type="checkbox" [checked]="bootstrap.catalog?.suggestionsEnabled !== false" (change)="toggleCatalog('suggestionsEnabled', $any($event.target).checked)" /><span>{{ 'builder.searchSuggestions' | translate }}</span><small class="field-desc">{{ 'builder.searchSuggestionsDesc' | translate }}</small></label> <label class="toggle-row"><app-toggle [ngModel]="bootstrap.catalog?.suggestionsEnabled !== false" (ngModelChange)="toggleCatalog('suggestionsEnabled', $event)" [ariaLabel]="'builder.searchSuggestions' | translate" /><span>{{ 'builder.searchSuggestions' | translate }}</span><small class="field-desc">{{ 'builder.searchSuggestionsDesc' | translate }}</small></label>
<label class="toggle-row"><input type="checkbox" [checked]="bootstrap.catalog?.searchHistoryEnabled !== false" (change)="toggleCatalog('searchHistoryEnabled', $any($event.target).checked)" /><span>{{ 'builder.searchHistory' | translate }}</span><small class="field-desc">{{ 'builder.searchHistoryDesc' | translate }}</small></label> <label class="toggle-row"><app-toggle [ngModel]="bootstrap.catalog?.searchHistoryEnabled !== false" (ngModelChange)="toggleCatalog('searchHistoryEnabled', $event)" [ariaLabel]="'builder.searchHistory' | translate" /><span>{{ 'builder.searchHistory' | translate }}</span><small class="field-desc">{{ 'builder.searchHistoryDesc' | translate }}</small></label>
</div> </div>
<div class="editor-grid two"> <div class="editor-grid two">
<label> <label>
@@ -24,5 +23,5 @@
<small class="field-desc">{{ catalogNavigationDescKey(bootstrap.catalog?.navigationMode || 'default') | translate }}</small> <small class="field-desc">{{ catalogNavigationDescKey(bootstrap.catalog?.navigationMode || 'default') | translate }}</small>
</label> </label>
</div> </div>
</section> </app-section-card>
} }

12
src/app/features/project-editor/sections/features-section.component.ts
View File

@@ -2,6 +2,8 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { ProjectEditorFacade } from '../facade/project-editor.facade'; import { ProjectEditorFacade } from '../facade/project-editor.facade';
import { TranslatePipe } from '../../../i18n/translate.pipe'; import { TranslatePipe } from '../../../i18n/translate.pipe';
import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
import { ToggleComponent } from '../../../shared/ui/toggle/toggle.component';
export interface CatalogNavigationOption { export interface CatalogNavigationOption {
value: 'default' | 'left-category-navigation' | 'mega-category-layout' | 'top-category-carousel'; value: 'default' | 'left-category-navigation' | 'mega-category-layout' | 'top-category-carousel';
@@ -12,7 +14,7 @@ export interface CatalogNavigationOption {
@Component({ @Component({
selector: 'app-project-editor-features-section', selector: 'app-project-editor-features-section',
standalone: true, standalone: true,
imports: [FormsModule, TranslatePipe], imports: [FormsModule, TranslatePipe, SectionCardComponent, ToggleComponent],
templateUrl: './features-section.component.html', templateUrl: './features-section.component.html',
styleUrls: ['./section.shared.scss'], styleUrls: ['./section.shared.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
@@ -43,17 +45,13 @@ export class ProjectEditorFeaturesSectionComponent {
this.facade.updateBootstrap(current => ({ ...current, featureFlags: { ...current.featureFlags, [key]: checked } })); this.facade.updateBootstrap(current => ({ ...current, featureFlags: { ...current.featureFlags, [key]: checked } }));
} }
toggleRecentViewed(checked: boolean): void {
this.facade.updateBootstrap(current => ({ ...current, userExperience: { ...current.userExperience, recentlyViewed: { ...current.userExperience!, recentlyViewed: undefined } as any } }));
}
toggleUserExperience(path: 'recentlyViewed' | 'wishlist' | 'compare', checked: boolean): void { toggleUserExperience(path: 'recentlyViewed' | 'wishlist' | 'compare', checked: boolean): void {
this.facade.updateBootstrap(current => ({ this.facade.updateBootstrap(current => ({
...current, ...current,
userExperience: { userExperience: {
...current.userExperience, ...current.userExperience,
[path]: { [path]: {
...(current.userExperience as any)?.[path], ...current.userExperience?.[path],
enabled: checked enabled: checked
} }
} }
@@ -70,7 +68,7 @@ export class ProjectEditorFeaturesSectionComponent {
productPage: { productPage: {
...current.productPage, ...current.productPage,
[section]: { [section]: {
...(current.productPage as any)?.[section], ...current.productPage?.[section],
enabled: checked enabled: checked
} }
} }