sea-dev 1.0.0

package/packages/widget-ng/src/lib/components/sea-submission-card.component.ts

@@ -0,0 +1,251 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ChangeDetectionStrategy,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import type { Submission } from "../models/submission.model";
+
+/**
+ * Submission card component for displaying submission in a grid
+ */
+@Component({
+  selector: "sea-submission-card",
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="sea-submission-card" (click)="cardClicked.emit(submission.id)">
+      <div class="sea-submission-card__header">
+        <div class="sea-submission-card__meta">
+          @if (submission.form?.workflow) {
+            <span class="sea-submission-card__workflow">
+              {{ submission.form.workflow.name }}
+            </span>
+            <svg
+              class="sea-submission-card__arrow"
+              xmlns="http://www.w3.org/2000/svg"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="m9 18 6-6-6-6" />
+            </svg>
+          }
+          <span class="sea-submission-card__form">
+            {{ submission.form?.name || "Unknown Form" }}
+          </span>
+        </div>
+        <span
+          class="sea-submission-card__status"
+          [class]="'sea-submission-card__status--' + submission.status"
+        >
+          {{ submission.status }}
+        </span>
+      </div>
+
+      <div class="sea-submission-card__body">
+        <h3 class="sea-submission-card__name">
+          {{ submission.name || "Submission " + submission.id }}
+        </h3>
+        <p class="sea-submission-card__date">
+          Updated {{ formatDate(submission.updatedAt) }}
+        </p>
+      </div>
+
+      <div class="sea-submission-card__footer">
+        <button
+          class="sea-submission-card__button"
+          type="button"
+          (click)="$event.stopPropagation(); cardClicked.emit(submission.id)"
+        >
+          Continue
+          <svg
+            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="m9 18 6-6-6-6" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      .sea-submission-card {
+        background: white;
+        border: 1px solid #e5e7eb;
+        border-radius: 12px;
+        padding: 1.25rem;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      .sea-submission-card:hover {
+        border-color: #3b82f6;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        transform: translateY(-2px);
+      }
+
+      .sea-submission-card__header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 0.75rem;
+      }
+
+      .sea-submission-card__meta {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+        flex: 1;
+        min-width: 0;
+      }
+
+      .sea-submission-card__workflow,
+      .sea-submission-card__form {
+        font-size: 0.75rem;
+        color: #6b7280;
+        font-weight: 400;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .sea-submission-card__arrow {
+        flex-shrink: 0;
+        color: #9ca3af;
+      }
+
+      .sea-submission-card__status {
+        padding: 0.25rem 0.75rem;
+        border-radius: 9999px;
+        font-size: 0.75rem;
+        font-weight: 500;
+        text-transform: capitalize;
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
+
+      .sea-submission-card__status--draft {
+        background: #f3f4f6;
+        color: #374151;
+      }
+
+      .sea-submission-card__status--final {
+        background: #dcfce7;
+        color: #065f46;
+      }
+
+      .sea-submission-card__status--pending {
+        background: #fef3c7;
+        color: #92400e;
+      }
+
+      .sea-submission-card__status--processing {
+        background: #dbeafe;
+        color: #1e40af;
+      }
+
+      .sea-submission-card__status--completed {
+        background: #d1fae5;
+        color: #065f46;
+      }
+
+      .sea-submission-card__status--failed {
+        background: #fee2e2;
+        color: #991b1b;
+      }
+
+      .sea-submission-card__body {
+        flex: 1;
+      }
+
+      .sea-submission-card__name {
+        margin: 0 0 0.5rem 0;
+        font-size: 1.125rem;
+        font-weight: 600;
+        color: #111827;
+        line-height: 1.4;
+      }
+
+      .sea-submission-card__date {
+        margin: 0;
+        font-size: 0.75rem;
+        color: #9ca3af;
+      }
+
+      .sea-submission-card__footer {
+        padding-top: 0.75rem;
+        border-top: 1px solid #f3f4f6;
+      }
+
+      .sea-submission-card__button {
+        width: 100%;
+        padding: 0.625rem 1rem;
+        background: white;
+        border: 1px solid #d1d5db;
+        border-radius: 6px;
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: #374151;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+      }
+
+      .sea-submission-card__button:hover {
+        background: #f9fafb;
+        border-color: #9ca3af;
+      }
+
+      .sea-submission-card__button svg {
+        flex-shrink: 0;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SeaSubmissionCardComponent {
+  @Input({ required: true }) submission!: Submission;
+  @Output() cardClicked = new EventEmitter<string>();
+
+  /**
+   * 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();
+  }
+}