feat: enhance EntityGrid with function props and improve code formatting
- Add configurable entity display logic via function props to EntityGrid - Implement comprehensive test suite for EntityGrid function props in TestView - Apply consistent code formatting across 15 components and views - Fix linting issues with trailing commas and line breaks - Add new EntityGridFunctionPropTest.vue for component testing - Update endorserServer with improved error handling and logging - Streamline PlatformServiceMixin with better cache management - Enhance component documentation and type safety Changes span 15 files with 159 additions and 69 deletions, focusing on component flexibility, code quality, and testing infrastructure.
This commit is contained in:
Matthew Raymer
224
src/test/EntityGridFunctionPropTest.vue
Normal file
224
src/test/EntityGridFunctionPropTest.vue
Normal file
@@ -0,0 +1,224 @@
|
||||
<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>
|
||||
@@ -8,10 +8,10 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Options, Vue } from "vue-facing-decorator";
|
||||
import { Component, Vue } from "vue-facing-decorator";
|
||||
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
|
||||
|
||||
@Options({
|
||||
@Component({
|
||||
mixins: [PlatformServiceMixin],
|
||||
})
|
||||
export default class PlatformServiceMixinTest extends Vue {
|
||||
|
||||
Reference in New Issue
Block a user