crowd-funder-for-time-pwa/src/test/EntityGridFunctionPropTest.vue

<template>
  <div>
    <h2>EntityGrid Function Prop Test</h2>

    <div class="mb-4">
      <button @click="toggleCustomFunction">
        {{ useCustomFunction ? "Use Default" : "Use Custom Function" }}
      </button>
      <span class="ml-2"
        >Current: {{ useCustomFunction ? "Custom" : "Default" }}</span
      >
    </div>

    <div class="mb-4">
      <h3>
        People Grid ({{ people.length }} total,
        {{ displayedPeopleCount }} shown)
      </h3>
      <EntityGrid
        entity-type="people"
        :entities="people"
        :max-items="5"
        :active-did="activeDid"
        :all-my-dids="allMyDids"
        :all-contacts="people"
        :conflict-checker="conflictChecker"
        :display-entities-function="
          useCustomFunction ? customPeopleFunction : undefined
        "
        @entity-selected="handleEntitySelected"
      />
    </div>

    <div class="mb-4">
      <h3>
        Projects Grid ({{ projects.length }} total,
        {{ displayedProjectsCount }} shown)
      </h3>
      <EntityGrid
        entity-type="projects"
        :entities="projects"
        :max-items="3"
        :active-did="activeDid"
        :all-my-dids="allMyDids"
        :all-contacts="people"
        :conflict-checker="conflictChecker"
        :display-entities-function="
          useCustomFunction ? customProjectsFunction : undefined
        "
        @entity-selected="handleEntitySelected"
      />
    </div>

    <div class="mt-4">
      <h3>Selected Entity:</h3>
      <pre>{{ selectedEntity }}</pre>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import EntityGrid from "../components/EntityGrid.vue";
import { Contact } from "../db/tables/contacts";
import { PlanData } from "../interfaces/records";

/**
 * Test component to demonstrate EntityGrid's new displayEntitiesFunction prop
 *
 * Shows how parent components can control which entities are displayed
 * through function props instead of relying on computed properties.
 */
@Component({
  components: {
    EntityGrid,
  },
})
export default class EntityGridFunctionPropTest extends Vue {
  useCustomFunction = false;
  selectedEntity: {
    type: "person" | "project" | "special";
    entityType?: string;
    data: Contact | PlanData | { did?: string; name: string };
  } | null = null;

  // Test data
  activeDid = "did:example:123";
  allMyDids = ["did:example:123"];

  people: Contact[] = [
    {
      did: "did:example:1",
      name: "Alice",
      profileImageUrl: "https://example.com/alice.jpg",
    },
    { did: "did:example:2", name: "Bob", profileImageUrl: "" },
    {
      did: "did:example:3",
      name: "Charlie",
      profileImageUrl: "https://example.com/charlie.jpg",
    },
    { did: "did:example:4", name: "Diana", profileImageUrl: "" },
    {
      did: "did:example:5",
      name: "Eve",
      profileImageUrl: "https://example.com/eve.jpg",
    },
    {
      did: "did:example:6",
      name: "Frank",
      profileImageUrl: "https://example.com/frank.jpg",
    },
    { did: "did:example:7", name: "Grace", profileImageUrl: "" },
  ];

  projects: PlanData[] = [
    {
      handleId: "proj1",
      name: "Zebra Project",
      description: "A project about zebras",
      issuerDid: "did:example:1",
    },
    {
      handleId: "proj2",
      name: "Alpha Project",
      description: "The first project",
      issuerDid: "did:example:2",
    },
    {
      handleId: "proj3",
      name: "Beta Project",
      description: "The second project",
      issuerDid: "did:example:3",
    },
    {
      handleId: "proj4",
      name: "Gamma Project",
      description: "The third project",
      issuerDid: "did:example:4",
    },
    {
      handleId: "proj5",
      name: "Delta Project",
      description: "The fourth project",
      issuerDid: "did:example:5",
    },
  ];

  /**
   * Custom function for people: only show those with profile images
   */
  customPeopleFunction = (
    entities: Contact[],
    _entityType: string,
    maxItems: number,
  ): Contact[] => {
    return entities
      .filter((person) => person.profileImageUrl)
      .slice(0, maxItems);
  };

  /**
   * Custom function for projects: sort by name and limit to 3
   */
  customProjectsFunction = (
    entities: PlanData[],
    _entityType: string,
    _maxItems: number,
  ): PlanData[] => {
    return entities.sort((a, b) => a.name.localeCompare(b.name)).slice(0, 3);
  };

  /**
   * Simple conflict checker for testing
   */
  conflictChecker = (did: string): boolean => {
    return did === this.activeDid;
  };

  /**
   * Toggle between custom and default display functions
   */
  toggleCustomFunction(): void {
    this.useCustomFunction = !this.useCustomFunction;
  }

  /**
   * Handle entity selection
   */
  handleEntitySelected(event: {
    type: "person" | "project" | "special";
    entityType?: string;
    data: Contact | PlanData | { did?: string; name: string };
  }): void {
    this.selectedEntity = event;
  }

  /**
   * Computed properties to show display counts
   */
  get displayedPeopleCount(): number {
    if (this.useCustomFunction) {
      return this.customPeopleFunction(this.people, "people", 5).length;
    }
    return Math.min(5, this.people.length);
  }

  get displayedProjectsCount(): number {
    if (this.useCustomFunction) {
      return this.customProjectsFunction(this.projects, "projects", 3).length;
    }
    return Math.min(7, this.projects.length);
  }
}
</script>

<style scoped>
pre {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  font-size: 12px;
}
</style>