add drag and drop builder

2026-07-01 01:14:40 +05:45
parent 65f38d68c5
commit 77b32b4d32
31 changed files with 2187 additions and 1 deletions
--- a/frontend/src/app/builder/component-palette/component-palette.component.ts
+++ b/frontend/src/app/builder/component-palette/component-palette.component.ts
@@ -0,0 +1,81 @@
+import { Component } from '@angular/core';
+import { NgFor } from '@angular/common';
+import { CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { ComponentType, getComponentLabel, getComponentIcon } from '../../core/models/component';
+import { BuilderStateService } from '../services/builder-state.service';
+
+const CATEGORIES: { label: string; types: ComponentType[] }[] = [
+  {
+    label: 'Content',
+    types: ['HEADING', 'TEXT', 'DIVIDER'],
+  },
+  {
+    label: 'Media',
+    types: ['IMAGE', 'GALLERY', 'VIDEO'],
+  },
+  {
+    label: 'Interactive',
+    types: ['BUTTON', 'CONTACT_FORM', 'MAP'],
+  },
+  {
+    label: 'Advanced',
+    types: ['CUSTOM_HTML'],
+  },
+];
+
+@Component({
+  selector: 'app-component-palette',
+  standalone: true,
+  imports: [NgFor, CdkDropList, CdkDrag, MatIconModule, MatListModule],
+  template: `
+    <div class="p-3">
+      <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3 px-2">Components</h3>
+      <div cdkDropList [cdkDropListData]="allTypes" (cdkDropListDropped)="noop()" class="space-y-4">
+        <div *ngFor="let cat of categories" class="mb-4">
+          <p class="text-xs text-gray-400 uppercase px-2 mb-2">{{ cat.label }}</p>
+          <div class="space-y-1">
+            <div *ngFor="let type of cat.types"
+                 cdkDrag
+                 [cdkDragData]="type"
+                 class="flex items-center gap-2 px-3 py-2 rounded-md cursor-grab
+                        text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600
+                        transition-colors border border-transparent hover:border-blue-200"
+                 (click)="addComponent(type)">
+              <mat-icon class="text-lg" style="width: 20px; height: 20px; font-size: 18px;">{{ getIcon(type) }}</mat-icon>
+              <span>{{ getLabel(type) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    :host { display: block; }
+    .cdk-drag-preview {
+      @apply bg-white shadow-lg rounded-md border border-blue-200 px-3 py-2 text-sm;
+    }
+    .cdk-drag-placeholder { opacity: 0; }
+  `],
+})
+export class ComponentPalette {
+  categories = CATEGORIES;
+  allTypes: ComponentType[] = CATEGORIES.flatMap(c => c.types);
+
+  constructor(private state: BuilderStateService) {}
+
+  getLabel(type: ComponentType): string {
+    return getComponentLabel(type);
+  }
+
+  getIcon(type: ComponentType): string {
+    return getComponentIcon(type);
+  }
+
+  addComponent(type: ComponentType): void {
+    this.state.addComponent(type);
+  }
+
+  noop(): void {}
+}