diff --git a/src/components/ActivityListItem.vue b/src/components/ActivityListItem.vue index 33fea460..82212576 100644 --- a/src/components/ActivityListItem.vue +++ b/src/components/ActivityListItem.vue @@ -63,7 +63,7 @@
Activity image @@ -253,8 +253,7 @@ import { GiveRecordWithContactInfo } from "@/interfaces/give"; import EntityIcon from "./EntityIcon.vue"; import { isGiveClaimType, - notifyWhyCannotConfirm, - transformImageUrlForCors, + notifyWhyCannotConfirm } from "../libs/util"; import { containsHiddenDid, isHiddenDid } from "../libs/endorserServer"; import ProjectIcon from "./ProjectIcon.vue"; @@ -357,9 +356,5 @@ export default class ActivityListItem extends Vue { day: "numeric", }); } - - transformImageUrlForCors(imageUrl: string): string { - return transformImageUrlForCors(imageUrl); - } } diff --git a/src/components/EntityGrid.vue b/src/components/EntityGrid.vue index 54c971f3..ff995652 100644 --- a/src/components/EntityGrid.vue +++ b/src/components/EntityGrid.vue @@ -96,6 +96,7 @@ import { NotificationIface } from "../constants/app"; * - Event delegation for entity selection * - Warning notifications for conflicted entities * - Template streamlined with computed CSS properties + * - Configurable entity display logic via function props */ @Component({ components: { @@ -158,6 +159,40 @@ export default class EntityGrid extends Vue { @Prop({ default: "other party" }) conflictContext!: string; + /** + * Function to determine which entities to display (allows parent control) + * + * This function prop allows parent components to customize which entities + * are displayed in the grid, enabling advanced filtering, sorting, and + * display logic beyond the default simple slice behavior. + * + * @param entities - The full array of entities (Contact[] or PlanData[]) + * @param entityType - The type of entities being displayed ("people" or "projects") + * @param maxItems - The maximum number of items to display (from maxItems prop) + * @returns Filtered/sorted array of entities to display + * + * @example + * // Custom filtering: only show contacts with profile images + * :display-entities-function="(entities, type, max) => + * entities.filter(e => e.profileImageUrl).slice(0, max)" + * + * @example + * // Custom sorting: sort projects by name + * :display-entities-function="(entities, type, max) => + * entities.sort((a, b) => a.name.localeCompare(b.name)).slice(0, max)" + * + * @example + * // Advanced logic: different limits for different entity types + * :display-entities-function="(entities, type, max) => + * type === 'projects' ? entities.slice(0, 5) : entities.slice(0, max)" + */ + @Prop({ default: null }) + displayEntitiesFunction?: ( + entities: Contact[] | PlanData[], + entityType: "people" | "projects", + maxItems: number, + ) => Contact[] | PlanData[]; + /** * CSS classes for the empty state message */ @@ -179,9 +214,18 @@ export default class EntityGrid extends Vue { } /** - * Computed entities to display (limited by maxItems) + * Computed entities to display - uses function prop if provided, otherwise defaults */ get displayedEntities(): Contact[] | PlanData[] { + if (this.displayEntitiesFunction) { + return this.displayEntitiesFunction( + this.entities, + this.entityType, + this.maxItems, + ); + } + + // Default implementation for backward compatibility const maxDisplay = this.entityType === "projects" ? 7 : this.maxItems; return this.entities.slice(0, maxDisplay); } diff --git a/src/components/EntityIcon.vue b/src/components/EntityIcon.vue index 6d78c6b0..5f21b73a 100644 --- a/src/components/EntityIcon.vue +++ b/src/components/EntityIcon.vue @@ -15,7 +15,6 @@ import { createAvatar, StyleOptions } from "@dicebear/core"; import { avataaars } from "@dicebear/collection"; import { Vue, Component, Prop } from "vue-facing-decorator"; import { Contact } from "../db/tables/contacts"; -import { transformImageUrlForCors } from "../libs/util"; import blankSquareSvg from "../assets/blank-square.svg"; /** @@ -57,7 +56,7 @@ export default class EntityIcon extends Vue { // Check for profile image URL (highest priority) const imageUrl = this.contact?.profileImageUrl || this.profileImageUrl; if (imageUrl) { - return ``; + return ``; } // Check for identifier for avatar generation diff --git a/src/components/ImageViewer.vue b/src/components/ImageViewer.vue index ae1c624f..cf4fd047 100644 --- a/src/components/ImageViewer.vue +++ b/src/components/ImageViewer.vue @@ -41,7 +41,6 @@ import { Component, Vue, Prop } from "vue-facing-decorator"; import { UAParser } from "ua-parser-js"; import { logger } from "../utils/logger"; -import { transformImageUrlForCors } from "../libs/util"; @Component({ emits: ["update:isOpen"] }) export default class ImageViewer extends Vue { @@ -80,10 +79,6 @@ export default class ImageViewer extends Vue { window.open(this.imageUrl, "_blank"); } } - - get transformedImageUrl() { - return transformImageUrlForCors(this.imageUrl); - } } diff --git a/src/components/ProjectIcon.vue b/src/components/ProjectIcon.vue index 9be0c0ba..6aea3f07 100644 --- a/src/components/ProjectIcon.vue +++ b/src/components/ProjectIcon.vue @@ -13,7 +13,6 @@ + + diff --git a/src/test/PlatformServiceMixinTest.vue b/src/test/PlatformServiceMixinTest.vue index 72c28d7e..057dc3b5 100644 --- a/src/test/PlatformServiceMixinTest.vue +++ b/src/test/PlatformServiceMixinTest.vue @@ -8,10 +8,10 @@ diff --git a/src/views/TestView.vue b/src/views/TestView.vue index 6c6ac1ba..a7592afa 100644 --- a/src/views/TestView.vue +++ b/src/views/TestView.vue @@ -157,6 +157,52 @@ {{ simpleEncryptionTestResultDisplay }}
+ +
+

Component Tests

+ Interactive tests for Vue components and their functionality. + +
+

EntityGrid Function Props

+

+ Test the new function prop functionality in EntityGrid component. +

+ + +
+ +
+
+ +
+

Platform Service Mixin

+

+ Test database operations through PlatformServiceMixin. +

+ + +
+ +
+
+
@@ -192,6 +238,8 @@ import { import { logger } from "../utils/logger"; import { Account } from "../db/tables/accounts"; import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin"; +import EntityGridFunctionPropTest from "../test/EntityGridFunctionPropTest.vue"; +import PlatformServiceMixinTest from "../test/PlatformServiceMixinTest.vue"; const inputFileNameRef = ref(); @@ -231,7 +279,11 @@ const TEST_PAYLOAD = { * @author Matthew Raymer */ @Component({ - components: { QuickNav }, + components: { + QuickNav, + EntityGridFunctionPropTest, + PlatformServiceMixinTest, + }, mixins: [PlatformServiceMixin], }) export default class Help extends Vue { @@ -258,6 +310,10 @@ export default class Help extends Vue { cryptoLib = cryptoLib; + // for component tests + showEntityGridTest = false; + showPlatformServiceTest = false; + /** * Computed properties for template streamlining * Eliminates repeated classes and logic in template @@ -469,7 +525,10 @@ export default class Help extends Vue { * Method to trigger notification test * Centralizes notification testing logic */ - triggerTestNotification(config: any) { + triggerTestNotification(config: { + notification: NotificationIface; + timeout?: number; + }) { this.$notify(config.notification, config.timeout); }