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

<template>
  <li>
    <!-- Last viewed separator -->
    <div
      class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm"
      v-if="record.jwtId == lastViewedClaimId"
    >
      <span class="block w-fit mx-auto -mb-2.5 bg-white px-2">
        You've already seen all the following
      </span>
    </div>

    <div class="bg-slate-100 rounded-t-md border border-slate-300 p-3 sm:p-4">
      <div class="relative flex justify-between gap-4 mb-3">
        <!-- Source -->
        <a href="" class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3">
          <div class="relative w-fit mx-auto">
            <fa
              v-if="!record.giver.profileImageUrl"
              icon="circle-question"
              class="text-slate-300 text-5xl sm:text-8xl"
            />
            <EntityIcon
              v-else
              :icon-size="record.giver.known ? 64 : 32"
              :profile-image-url="record.giver.profileImageUrl"
              :class="record.giver.known ? 'rounded-full' : 'rounded'"
            />
            <span class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base">
              <fa :icon="record.giver.known ? 'user' : 'hammer'" class="fa-fw text-white" />
            </span>
          </div>
          <div class="text-xs mt-2 line-clamp-2">{{ record.giver.displayName }}</div>
        </a>

        <!-- Arrow -->
        <div class="absolute inset-28 sm:inset-x-48 mx-4 sm:mx-8 top-1/2 flex items-center">
          <hr class="grow border-t-[25px] border-slate-300" />
          <div class="shrink-0 w-0 h-0 border border-slate-300 border-t-[30px] border-t-transparent border-b-[30px] border-b-transparent border-s-[40px] border-e-0"></div>
        </div>

        <!-- Destination -->
        <a href="" class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3">
          <div class="relative w-fit mx-auto">
            <EntityIcon
              :icon-size="record.receiver.known ? 64 : 32" 
              :profile-image-url="record.receiver.profileImageUrl"
              :class="record.receiver.known ? 'rounded-full' : 'rounded'"
            />
            <span class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base">
              <fa :icon="record.receiver.known ? 'user' : 'hammer'" class="fa-fw text-white" />
            </span>
          </div>
          <div class="text-xs mt-2 line-clamp-2">{{ record.receiver.displayName }}</div>
        </a>
      </div>

      <!-- Description -->
      <p class="font-medium">
        <a @click="$emit('loadClaim', record.jwtId)" class="cursor-pointer">
          {{ description }}
        </a>
      </p>
      <p class="text-sm">{{ record.subDescription }}</p>
    </div>

    <!-- Record Image -->
    <div v-if="record.image" class="bg-cover" :style="`background-image: url(${record.image});`">
      <a class="block bg-slate-100/50 backdrop-blur-md px-6 py-4 cursor-pointer" @click="$emit('viewImage', record.image)">
        <img
          class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
          :src="record.image"
          @load="$emit('cacheImage', $event, record.image)"
        />
      </a>
    </div>

    <div class="flex items-center gap-2 text-lg bg-slate-300 rounded-b-md px-3 sm:px-4 py-1 sm:py-2">
      <a @click="$emit('loadClaim', record.jwtId)" class="cursor-pointer">
        <fa icon="circle-info" class="fa-fw text-slate-500" />
      </a>
      <span class="ms-auto text-xs text-slate-500 italic" :title="record.timestamp">
        {{ formattedTimestamp }}
      </span>
    </div>
  </li>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-facing-decorator';
import { GiveRecordWithContactInfo } from '../types';
import EntityIcon from './EntityIcon.vue';

@Component({
  components: {
    EntityIcon
  }
})
export default class ActivityListItem extends Vue {
  @Prop() record!: GiveRecordWithContactInfo;
  @Prop() lastViewedClaimId?: string;

  private formatAmount(claim: any): string {
    const amount = claim.object?.amountOfThisGood 
      ? this.displayAmount(claim.object.unitCode, claim.object.amountOfThisGood)
      : "";
    
    if (!claim.description && !amount) {
      return "something not described";
    }

    if (!amount) return claim.description;
    if (!claim.description) return amount;
    
    return `${claim.description} (and ${amount})`;
  }

  private formatParticipantInfo(): string {
    const { giver, receiver } = this.record;
    
    // Both participants are known contacts
    if (giver.known && receiver.known) {
      return `${giver.displayName} gave to ${receiver.displayName}`;
    }

    // Only giver is known
    if (giver.known) {
      const recipient = this.record.recipientProjectName 
        ? `the project "${this.record.recipientProjectName}"` 
        : receiver.displayName;
      return `${giver.displayName} gave to ${recipient}`;
    }

    // Only receiver is known
    if (receiver.known) {
      const provider = this.record.providerPlanName
        ? `the project "${this.record.providerPlanName}"`
        : giver.displayName;
      return `${receiver.displayName} received from ${provider}`;
    }

    // Neither is known
    return this.formatUnknownParticipants();
  }

  private formatUnknownParticipants(): string {
    const { giver, receiver, providerPlanName, recipientProjectName } = this.record;

    if (providerPlanName || recipientProjectName) {
      const from = providerPlanName 
        ? `the project "${providerPlanName}"` 
        : giver.displayName;
      const to = recipientProjectName
        ? `the project "${recipientProjectName}"`
        : receiver.displayName;
      return `from ${from} to ${to}`;
    }

    return giver.displayName === receiver.displayName
      ? `between two who are ${giver.displayName}`
      : `from ${giver.displayName} to ${receiver.displayName}`;
  }

  get description(): string {
    const claim = (this.record.fullClaim as any).claim || this.record.fullClaim;
    const amount = this.formatAmount(claim);
    const participants = this.formatParticipantInfo();

    return `${participants}: ${amount}`;
  }

  private displayAmount(code: string, amt: number) {
    return `${amt} ${this.currencyShortWordForCode(code, amt === 1)}`;
  }

  private currencyShortWordForCode(unitCode: string, single: boolean) {
    return unitCode === "HUR" ? (single ? "hour" : "hours") : unitCode;
  }

  get formattedTimestamp() {
    // Add your timestamp formatting logic here
    return this.record.timestamp;
  }
}
</script>