crowd-funder-for-time-pwa/src/components/PersonCard.vue

/** * PersonCard.vue - Individual person display component * * Extracted from
GiftedDialog.vue to handle person entity display * with selection states and
conflict detection. * * @author Matthew Raymer */
<template>
  <li :class="cardClasses" @click="handleClick">
    <div>
      <EntityIcon
        v-if="person.did"
        :contact="person"
        class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
      />
      <font-awesome
        v-else
        icon="circle-question"
        class="text-slate-400 text-5xl mb-1 shrink-0"
      />
    </div>

    <div class="overflow-hidden">
      <h3 :class="nameClasses">
        {{ displayName }}
      </h3>
      <p class="text-xs text-slate-500 truncate">{{ person.did }}</p>
    </div>
  </li>
</template>

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

/**
 * PersonCard - Individual person display with selection capability
 *
 * Features:
 * - Person avatar using EntityIcon
 * - Selection states (selectable, conflicted, disabled)
 * - Time icon overlay for contacts
 * - Click event handling
 * - Emits click events for parent handling
 * - Warning notifications for conflicted entities
 */
@Component({
  components: {
    EntityIcon,
  },
})
export default class PersonCard extends Vue {
  /** Contact data to display */
  @Prop({ required: true })
  person!: Contact;

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

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

  /** Whether to show time icon overlay */
  @Prop({ default: false })
  showTimeIcon!: boolean;

  /** 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
   */
  get cardClasses(): string {
    const baseCardClasses =
      "flex items-center gap-2 px-2 py-1.5 border-b border-slate-300";

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

    return `${baseCardClasses} cursor-pointer hover:bg-slate-50`;
  }

  /**
   * Computed CSS classes for the person name
   */
  get nameClasses(): string {
    const baseNameClasses = "text-sm font-semibold truncate";

    if (this.conflicted) {
      return `${baseNameClasses} text-slate-500`;
    }

    // Add italic styling for entities without set names
    if (!this.person.name) {
      return `${baseNameClasses} italic text-slate-500`;
    }

    return baseNameClasses;
  }

  /**
   * Computed display name for the person
   */
  get displayName(): string {
    // If the entity has a set name, use that name
    if (this.person.name) {
      return this.person.name;
    }

    // If the entity does not have a set name
    return this.person.did;
  }

  /**
   * Handle card click - emit if selectable and not conflicted, show warning if conflicted
   */
  handleClick(): void {
    if (this.selectable && !this.conflicted) {
      this.emitPersonSelected(this.person);
    } 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.displayName}" because they are already selected as the ${this.conflictContext}.`,
        },
        3000,
      );
    }
  }

  // Emit methods using @Emit decorator

  @Emit("person-selected")
  emitPersonSelected(person: Contact): Contact {
    return person;
  }
}
</script>

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