feat(builder): add project editor

src/app/features/project-editor/sections/homepage-section.component.ts

@@ -0,0 +1,60 @@
+import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ProjectEditorFacade } from '../facade/project-editor.facade';
+import { TranslatePipe } from '../../../i18n/translate.pipe';
+
+@Component({
+  selector: 'app-project-editor-homepage-section',
+  standalone: true,
+  imports: [DragDropModule, FormsModule, TranslatePipe],
+  templateUrl: './homepage-section.component.html',
+  styleUrls: ['./section.shared.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ProjectEditorHomepageSectionComponent {
+  private readonly facade = inject(ProjectEditorFacade);
+  readonly homePage = this.facade.homepagePage;
+  readonly sections = computed(() => [...(this.homePage()?.sections ?? [])].sort((a, b) => a.order - b.order));
+
+  drop(event: CdkDragDrop<any[]>): void {
+    const sections = [...this.sections()];
+    moveItemInArray(sections, event.previousIndex, event.currentIndex);
+    this.facade.updateBootstrap(current => ({
+      ...current,
+      pages: current.pages.map(page => page.id !== this.homePage()?.id ? page : ({
+        ...page,
+        sections: sections.map((section, index) => ({ ...section, order: index + 1 }))
+      }))
+    }));
+  }
+
+  updateSection(sectionId: string, field: 'visible' | 'type', value: unknown): void {
+    this.facade.updateBootstrap(current => ({
+      ...current,
+      pages: current.pages.map(page => page.id !== this.homePage()?.id ? page : ({
+        ...page,
+        sections: page.sections.map(section => section.id !== sectionId ? section : ({
+          ...section,
+          ...(field === 'type' ? { type: String(value) } : { visible: Boolean(value) })
+        }))
+      }))
+    }));
+  }
+
+  updateLayout(sectionId: string, key: 'strategy' | 'columns', value: string): void {
+    this.facade.updateBootstrap(current => ({
+      ...current,
+      pages: current.pages.map(page => page.id !== this.homePage()?.id ? page : ({
+        ...page,
+        sections: page.sections.map(section => section.id !== sectionId ? section : ({
+          ...section,
+          layout: {
+            ...section.layout,
+            [key]: key === 'columns' ? Number(value) || 1 : value,
+          }
+        }))
+      }))
+    }));
+  }
+}