diff --git a/src/components/EntityGrid.vue b/src/components/EntityGrid.vue index 6c84eb7b47..311aac6ac2 100644 --- a/src/components/EntityGrid.vue +++ b/src/components/EntityGrid.vue @@ -208,7 +208,18 @@ export default class EntityGrid extends Vue { infiniteScrollReset?: () => void; scrollContainer?: HTMLElement; - /** Array of entities to display */ + /** + * Array of entities to display + * + * IMPORTANT: When passing Contact[] arrays, they must be sorted by date added + * (newest first) for the "Recently Added" section to display correctly. + * Use $contactsByDateAdded() instead of $getAllContacts() or $contacts(). + * + * The recentContacts computed property assumes contacts are already sorted + * by date added and simply takes the first 3. If contacts are sorted + * alphabetically or in another order, the wrong contacts will appear in + * "Recently Added". + */ @Prop({ required: true }) entities!: Contact[] | PlanData[]; @@ -308,6 +319,9 @@ export default class EntityGrid extends Vue { /** * Get the 3 most recently added contacts (when showing contacts and not searching) + * + * NOTE: This assumes entities are already sorted by date added (newest first). + * See the entities prop documentation for details on using $contactsByDateAdded(). */ get recentContacts(): Contact[] { if (this.entityType !== "people" || this.searchTerm.trim()) { diff --git a/src/views/NewEditProjectView.vue b/src/views/NewEditProjectView.vue index 1d006d4894..5343aff435 100644 --- a/src/views/NewEditProjectView.vue +++ b/src/views/NewEditProjectView.vue @@ -461,9 +461,9 @@ export default class NewEditProjectView extends Vue { // eslint-disable-next-line @typescript-eslint/no-explicit-any this.allMyDids = await (this as any).$getAllAccountDids(); - // Load contacts + // Load contacts sorted by date added (newest first) for consistent "Recently Added" display // eslint-disable-next-line @typescript-eslint/no-explicit-any - this.allContacts = await (this as any).$getAllContacts(); + this.allContacts = await (this as any).$contactsByDateAdded(); this.apiServer = settings.apiServer || ""; this.showGeneralAdvanced = !!settings.showGeneralAdvanced;