crowd-funder-from-jason/src/components/SpecialEntityCard.vue

/** * SpecialEntityCard.vue - Special entity display component * * Extracted
from GiftedDialog.vue to handle special entities like "You" * and "Unnamed" with
conflict detection and selection capability. * * @author Matthew Raymer */
<template>
  <li :class="cardClasses" @click="handleClick">
    <font-awesome :icon="icon" :class="iconClasses" />
    <h3 :class="nameClasses">
      {{ label }}
    </h3>
  </li>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-facing-decorator";
import { Emit } from "vue-facing-decorator";
import { NotificationIface } from "../constants/app";

/**
 * SpecialEntityCard - Displays special entities with selection capability
 *
 * Features:
 * - Displays special entities like "You" and "Unnamed"
 * - Shows appropriate FontAwesome icons
 * - Handles conflict states and selection
 * - Emits selection events with entity data
 * - Configurable styling based on entity type
 * - Warning notifications for conflicted entities
 */
@Component({
  emits: ["entity-selected"],
})
export default class SpecialEntityCard extends Vue {
  /** Type of special entity */
  @Prop({ required: true })
  entityType!: "you" | "unnamed";

  /** Display label for the entity */
  @Prop({ required: true })
  label!: string;

  /** FontAwesome icon name */
  @Prop({ required: true })
  icon!: string;

  /** Whether this entity can be selected */
  @Prop({ default: true })
  selectable!: boolean;

  /** Whether selecting this entity would create a conflict */
  @Prop({ default: false })
  conflicted!: boolean;

  /** Entity data to emit when selected */
  @Prop({ required: true })
  entityData!: { did?: string; name: string };

  /** Notification function from parent component */
  @Prop()
  notify?: (notification: NotificationIface, timeout?: number) => void;

  /** Context for conflict messages (e.g., "giver", "recipient") */
  @Prop({ default: "other party" })
  conflictContext!: string;

  /**
   * Computed CSS classes for the card container
   */
  get cardClasses(): string {
    const baseClasses = "block";

    if (!this.selectable || this.conflicted) {
      return `${baseClasses} cursor-not-allowed opacity-50`;
    }

    return `${baseClasses} cursor-pointer`;
  }

  /**
   * Computed CSS classes for the icon
   */
  get iconClasses(): string {
    const baseClasses = "text-5xl mb-1";

    if (this.conflicted) {
      return `${baseClasses} text-slate-400`;
    }

    // Different colors for different entity types
    switch (this.entityType) {
      case "you":
        return `${baseClasses} text-blue-500`;
      case "unnamed":
        return `${baseClasses} text-slate-400`;
      default:
        return `${baseClasses} text-slate-400`;
    }
  }

  /**
   * Computed CSS classes for the entity name/label
   */
  get nameClasses(): string {
    const baseClasses =
      "text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden";

    if (this.conflicted) {
      return `${baseClasses} text-slate-400`;
    }

    // Different colors for different entity types
    switch (this.entityType) {
      case "you":
        return `${baseClasses} text-blue-500`;
      case "unnamed":
        return `${baseClasses} text-slate-500 italic`;
      default:
        return `${baseClasses} text-slate-500`;
    }
  }

  /**
   * Handle card click - emit if selectable and not conflicted, show warning if conflicted
   */
  handleClick(): void {
    if (this.selectable && !this.conflicted) {
      this.emitEntitySelected({
        data: this.entityData,
      });
    } else if (this.conflicted && this.notify) {
      // Show warning notification for conflicted entity
      this.notify(
        {
          group: "alert",
          type: "warning",
          title: "Cannot Select",
          text: `You cannot select "${this.label}" because you are already selected as the ${this.conflictContext}.`,
        },
        3000,
      );
    }
  }

  // Emit methods using @Emit decorator

  @Emit("entity-selected")
  emitEntitySelected(data: { data: { did?: string; name: string } }): {
    data: { did?: string; name: string };
  } {
    return data;
  }
}
</script>

<style scoped>
/* Component-specific styles if needed */
</style>