sea-dev 1.0.0

package/packages/widget-ng/src/lib/components/sea-deal-form-modal.component.ts

@@ -0,0 +1,702 @@
+import {
+  Component,
+  Output,
+  EventEmitter,
+  signal,
+  inject,
+  ChangeDetectionStrategy,
+  ViewChild,
+  ElementRef,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { SeaApiClientService } from "../services/api-client.service";
+import { SeaWidgetConfigService } from "../services/config.service";
+
+export interface Deal {
+  id: string;
+  name: string;
+  updatedAt: string;
+}
+
+export interface Form {
+  id: string;
+  name: string;
+  updatedAt: string;
+  workflow?: {
+    name: string;
+  };
+}
+
+/**
+ * Modal for selecting deal and form to create a new submission
+ */
+@Component({
+  selector: "sea-deal-form-modal",
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <dialog
+      #modal
+      class="sea-modal"
+      (click)="onBackdropClick($event)"
+      (close)="onClose()"
+    >
+      <div class="sea-modal__content" (click)="$event.stopPropagation()">
+        <div class="sea-modal__header">
+          <h2 class="sea-modal__title">New Submission</h2>
+          <p class="sea-modal__description">
+            Select a deal and form to create a new submission
+          </p>
+          <button
+            class="sea-modal__close"
+            type="button"
+            (click)="close()"
+            aria-label="Close"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M18 6 6 18" />
+              <path d="m6 6 12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <div class="sea-modal__body">
+          @if (loading()) {
+            <div class="sea-modal__loading">
+              <svg class="sea-spinner" viewBox="0 0 24 24">
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="3"
+                  opacity="0.25"
+                />
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="3"
+                  stroke-dasharray="63"
+                  stroke-dashoffset="50"
+                />
+              </svg>
+              <p>Loading...</p>
+            </div>
+          } @else if (error()) {
+            <div class="sea-modal__error">
+              <p>{{ error() }}</p>
+            </div>
+          } @else {
+            <!-- Deals Section -->
+            <div class="sea-modal__section">
+              <h3 class="sea-modal__section-title">Select Deal</h3>
+              @if (canSelectDeal && deals().length > 1) {
+                <input
+                  type="text"
+                  class="sea-modal__search"
+                  placeholder="Search deals..."
+                  [(ngModel)]="dealSearchQuery"
+                  (ngModelChange)="filterDeals()"
+                />
+              }
+              <div class="sea-modal__grid">
+                @for (deal of filteredDeals(); track deal.id) {
+                  <div
+                    class="sea-modal__card"
+                    [class.sea-modal__card--selected]="
+                      selectedDeal() === deal.id
+                    "
+                    (click)="selectDeal(deal.id)"
+                  >
+                    <span class="sea-modal__card-name">{{ deal.name }}</span>
+                    <span class="sea-modal__card-date">{{
+                      formatDate(deal.updatedAt)
+                    }}</span>
+                    @if (selectedDeal() === deal.id) {
+                      <svg
+                        class="sea-modal__card-check"
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+                        <path d="m9 11 3 3L22 4" />
+                      </svg>
+                    }
+                  </div>
+                }
+              </div>
+            </div>
+
+            <!-- Forms Section -->
+            <div class="sea-modal__section">
+              <h3 class="sea-modal__section-title">Select Form</h3>
+              @if (canSelectForm && forms().length > 1) {
+                <input
+                  type="text"
+                  class="sea-modal__search"
+                  placeholder="Search forms..."
+                  [(ngModel)]="formSearchQuery"
+                  (ngModelChange)="filterForms()"
+                />
+              }
+              <div class="sea-modal__grid">
+                @for (form of filteredForms(); track form.id) {
+                  <div
+                    class="sea-modal__card"
+                    [class.sea-modal__card--selected]="
+                      selectedForm() === form.id
+                    "
+                    (click)="selectForm(form.id)"
+                  >
+                    @if (form.workflow) {
+                      <span class="sea-modal__card-workflow">{{
+                        form.workflow.name
+                      }}</span>
+                    }
+                    <span class="sea-modal__card-name">{{ form.name }}</span>
+                    <span class="sea-modal__card-date">{{
+                      formatDate(form.updatedAt)
+                    }}</span>
+                    @if (selectedForm() === form.id) {
+                      <svg
+                        class="sea-modal__card-check"
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+                        <path d="m9 11 3 3L22 4" />
+                      </svg>
+                    }
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        </div>
+
+        <div class="sea-modal__footer">
+          @if (hasSubmissions) {
+            <button
+              class="sea-modal__button sea-modal__button--secondary"
+              type="button"
+              (click)="viewSubmissions()"
+              [disabled]="!selectedDeal() || !selectedForm()"
+            >
+              View Submissions
+            </button>
+          }
+          <button
+            class="sea-modal__button sea-modal__button--primary"
+            type="button"
+            (click)="createSubmission()"
+            [disabled]="submitting() || !selectedDeal() || !selectedForm()"
+          >
+            @if (submitting()) {
+              <svg class="sea-spinner sea-spinner--small" viewBox="0 0 24 24">
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="3"
+                  opacity="0.25"
+                />
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="3"
+                  stroke-dasharray="63"
+                  stroke-dashoffset="50"
+                />
+              </svg>
+              Creating...
+            } @else {
+              Create Submission
+            }
+          </button>
+        </div>
+      </div>
+    </dialog>
+  `,
+  styles: [
+    `
+      .sea-modal {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        max-width: none;
+        max-height: none;
+        padding: 0;
+        margin: 0;
+        border: none;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 1000;
+        display: none;
+      }
+
+      .sea-modal[open] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .sea-modal__content {
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+        max-width: 90vw;
+        max-height: 90vh;
+        width: 800px;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .sea-modal__header {
+        padding: 1.5rem;
+        border-bottom: 1px solid #e5e7eb;
+        position: relative;
+      }
+
+      .sea-modal__title {
+        margin: 0;
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: #111827;
+      }
+
+      .sea-modal__description {
+        margin: 0.5rem 0 0 0;
+        font-size: 0.875rem;
+        color: #6b7280;
+      }
+
+      .sea-modal__close {
+        position: absolute;
+        top: 1.5rem;
+        right: 1.5rem;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        color: #6b7280;
+        padding: 0.5rem;
+        border-radius: 6px;
+        transition: background 0.2s;
+      }
+
+      .sea-modal__close:hover {
+        background: #f3f4f6;
+      }
+
+      .sea-modal__body {
+        padding: 1.5rem;
+        overflow-y: auto;
+        flex: 1;
+      }
+
+      .sea-modal__loading,
+      .sea-modal__error {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 3rem;
+        gap: 1rem;
+      }
+
+      .sea-spinner {
+        width: 3rem;
+        height: 3rem;
+        animation: rotate 1.5s linear infinite;
+        color: #3b82f6;
+      }
+
+      .sea-spinner--small {
+        width: 1rem;
+        height: 1rem;
+      }
+
+      @keyframes rotate {
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+
+      .sea-modal__section {
+        margin-bottom: 2rem;
+      }
+
+      .sea-modal__section:last-child {
+        margin-bottom: 0;
+      }
+
+      .sea-modal__section-title {
+        margin: 0 0 1rem 0;
+        font-size: 1.125rem;
+        font-weight: 600;
+        color: #111827;
+      }
+
+      .sea-modal__search {
+        width: 100%;
+        padding: 0.625rem 1rem;
+        border: 1px solid #d1d5db;
+        border-radius: 6px;
+        font-size: 0.875rem;
+        margin-bottom: 1rem;
+      }
+
+      .sea-modal__search:focus {
+        outline: none;
+        border-color: #3b82f6;
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+      }
+
+      .sea-modal__grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.75rem;
+      }
+
+      .sea-modal__card {
+        position: relative;
+        padding: 1rem;
+        border: 1px solid #e5e7eb;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+      }
+
+      .sea-modal__card:hover {
+        border-color: #3b82f6;
+        background: #f9fafb;
+      }
+
+      .sea-modal__card--selected {
+        border-color: #3b82f6;
+        background: #eff6ff;
+      }
+
+      .sea-modal__card-workflow {
+        font-size: 0.75rem;
+        color: #6b7280;
+      }
+
+      .sea-modal__card-name {
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: #111827;
+      }
+
+      .sea-modal__card-date {
+        font-size: 0.75rem;
+        color: #9ca3af;
+      }
+
+      .sea-modal__card-check {
+        position: absolute;
+        top: 0.75rem;
+        right: 0.75rem;
+        color: #10b981;
+      }
+
+      .sea-modal__footer {
+        padding: 1.5rem;
+        border-top: 1px solid #e5e7eb;
+        display: flex;
+        gap: 0.75rem;
+        justify-content: flex-end;
+      }
+
+      .sea-modal__button {
+        padding: 0.625rem 1.25rem;
+        border-radius: 6px;
+        font-size: 0.875rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+        border: none;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .sea-modal__button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .sea-modal__button--primary {
+        background: #3b82f6;
+        color: white;
+      }
+
+      .sea-modal__button--primary:hover:not(:disabled) {
+        background: #2563eb;
+      }
+
+      .sea-modal__button--secondary {
+        background: white;
+        color: #374151;
+        border: 1px solid #d1d5db;
+      }
+
+      .sea-modal__button--secondary:hover:not(:disabled) {
+        background: #f9fafb;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SeaDealFormModalComponent {
+  @Output() submissionCreated = new EventEmitter<string>();
+  @Output() selectionConfirmed = new EventEmitter<{
+    dealId: string;
+    formId: string;
+  }>();
+
+  @ViewChild("modal") modalElement?: ElementRef<HTMLDialogElement>;
+
+  private readonly api = inject(SeaApiClientService);
+  private readonly config = inject(SeaWidgetConfigService);
+
+  protected readonly loading = signal(false);
+  protected readonly error = signal<string | null>(null);
+  protected readonly submitting = signal(false);
+  protected readonly deals = signal<Deal[]>([]);
+  protected readonly forms = signal<Form[]>([]);
+  protected readonly filteredDeals = signal<Deal[]>([]);
+  protected readonly filteredForms = signal<Form[]>([]);
+  protected readonly selectedDeal = signal<string | undefined>(undefined);
+  protected readonly selectedForm = signal<string | undefined>(undefined);
+
+  protected dealSearchQuery = "";
+  protected formSearchQuery = "";
+
+  // Config
+  canSelectDeal = true;
+  canSelectForm = true;
+  hasSubmissions = false;
+
+  /**
+   * Open the modal
+   */
+  open(options?: {
+    dealId?: string;
+    formId?: string;
+    canSelectDeal?: boolean;
+    canSelectForm?: boolean;
+    hasSubmissions?: boolean;
+  }): void {
+    if (options) {
+      this.selectedDeal.set(options.dealId);
+      this.selectedForm.set(options.formId);
+      this.canSelectDeal = options.canSelectDeal ?? true;
+      this.canSelectForm = options.canSelectForm ?? true;
+      this.hasSubmissions = options.hasSubmissions ?? false;
+    }
+
+    this.loadData();
+    this.modalElement?.nativeElement.showModal();
+  }
+
+  /**
+   * Close the modal
+   */
+  close(): void {
+    this.modalElement?.nativeElement.close();
+  }
+
+  /**
+   * Handle backdrop click
+   */
+  protected onBackdropClick(event: MouseEvent): void {
+    if (event.target === this.modalElement?.nativeElement) {
+      this.close();
+    }
+  }
+
+  /**
+   * Handle dialog close
+   */
+  protected onClose(): void {
+    this.dealSearchQuery = "";
+    this.formSearchQuery = "";
+  }
+
+  /**
+   * Load deals and forms
+   */
+  private loadData(): void {
+    this.loading.set(true);
+    this.error.set(null);
+
+    Promise.all([
+      this.api.getDeals().toPromise(),
+      this.api.getForms().toPromise(),
+    ])
+      .then(([deals, forms]) => {
+        this.deals.set(deals || []);
+        this.forms.set(forms || []);
+        this.filteredDeals.set(deals || []);
+        this.filteredForms.set(forms || []);
+
+        // Auto-select if only one option
+        if (deals && deals.length === 1) {
+          this.selectedDeal.set(deals[0].id);
+        }
+        if (forms && forms.length === 1) {
+          this.selectedForm.set(forms[0].id);
+        }
+
+        this.loading.set(false);
+      })
+      .catch((err) => {
+        console.error("Failed to load deals and forms:", err);
+        this.error.set("Failed to load deals and forms. Please try again.");
+        this.loading.set(false);
+      });
+  }
+
+  /**
+   * Filter deals based on search query
+   */
+  protected filterDeals(): void {
+    const query = this.dealSearchQuery.toLowerCase();
+    if (query.length >= 3) {
+      this.filteredDeals.set(
+        this.deals().filter((deal) => deal.name.toLowerCase().includes(query)),
+      );
+    } else {
+      this.filteredDeals.set(this.deals());
+    }
+  }
+
+  /**
+   * Filter forms based on search query
+   */
+  protected filterForms(): void {
+    const query = this.formSearchQuery.toLowerCase();
+    if (query.length >= 3) {
+      this.filteredForms.set(
+        this.forms().filter((form) => form.name.toLowerCase().includes(query)),
+      );
+    } else {
+      this.filteredForms.set(this.forms());
+    }
+  }
+
+  /**
+   * Select a deal
+   */
+  protected selectDeal(dealId: string): void {
+    if (this.canSelectDeal) {
+      this.selectedDeal.set(dealId);
+    }
+  }
+
+  /**
+   * Select a form
+   */
+  protected selectForm(formId: string): void {
+    if (this.canSelectForm) {
+      this.selectedForm.set(formId);
+    }
+  }
+
+  /**
+   * View existing submissions
+   */
+  protected viewSubmissions(): void {
+    const dealId = this.selectedDeal();
+    const formId = this.selectedForm();
+
+    if (dealId && formId) {
+      this.selectionConfirmed.emit({ dealId, formId });
+      this.close();
+    }
+  }
+
+  /**
+   * Create a new submission
+   */
+  protected createSubmission(): void {
+    const dealId = this.selectedDeal();
+    const formId = this.selectedForm();
+
+    if (!dealId || !formId) {
+      return;
+    }
+
+    this.submitting.set(true);
+
+    this.api.createSubmission({ dealId, formId }).subscribe({
+      next: (submission) => {
+        this.submitting.set(false);
+        this.submissionCreated.emit(submission.id);
+        this.close();
+      },
+      error: (err) => {
+        console.error("Failed to create submission:", err);
+        this.error.set("Failed to create submission. Please try again.");
+        this.submitting.set(false);
+      },
+    });
+  }
+
+  /**
+   * Format date for display
+   */
+  protected formatDate(dateString: string): string {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return "just now";
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays < 7) return `${diffDays}d ago`;
+
+    return date.toLocaleDateString();
+  }
+}