@ -2,12 +2,55 @@
GiftedDialog . vue to provide a reusable grid layout * for displaying people , GiftedDialog . vue to provide a reusable grid layout * for displaying people ,
projects , and special entities with selection . * * @ author Matthew Raymer * / projects , and special entities with selection . * * @ author Matthew Raymer * /
< template > < template >
< ul :class ="gridClasses" > <!-- Quick Search -- >
< div id = "QuickSearch" class = "mb-4 flex items-center text-sm" >
< input
v - model = "searchTerm"
type = "text"
placeholder = "Search…"
class = "block w-full rounded-l border border-r-0 border-slate-400 px-3 py-1.5 placeholder:italic placeholder:text-slate-400 focus:outline-none"
@ input = "handleSearchInput"
@ keydown . enter = "performSearch"
/ >
< div
v - show = "isSearching && searchTerm"
class = "border-y border-slate-400 ps-2 py-1.5 text-center text-slate-400"
>
< font -awesome
icon = "spinner"
class = "fa-spin-pulse leading-[1.1]"
> < / f o n t - a w e s o m e >
< / div >
< button
: disabled = "!searchTerm"
class = "px-2 py-1.5 rounded-r bg-white border border-l-0 border-slate-400 text-slate-400 disabled:cursor-not-allowed"
@ click = "clearSearch"
>
< font -awesome
: icon = "searchTerm ? 'times' : 'magnifying-glass'"
class = "fa-fw"
> < / f o n t - a w e s o m e >
< / button >
< / div >
< div
v - if = "searchTerm && !isSearching && filteredEntities.length === 0"
class = "mb-4 text-sm italic text-slate-500 text-center"
>
“ { { searchTerm } } ” doesn ' t match any
{ { entityType === "people" ? "people" : "projects" } } . Try a different
search .
< / div >
< ul
ref = "scrollContainer"
class = "border-t border-slate-300 mb-4 max-h-[60vh] overflow-y-auto"
>
<!-- Special entities ( You , Unnamed ) for people grids -- > <!-- Special entities ( You , Unnamed ) for people grids -- >
< template v-if ="entityType === 'people'" > < template v-if ="entityType === 'people'" >
<!-- "You" entity -- > <!-- "You" entity -- >
< SpecialEntityCard < SpecialEntityCard
v - if = "showYouEntity" v - if = "showYouEntity && !searchTerm.trim() "
entity - type = "you" entity - type = "you"
label = "You" label = "You"
icon = "hand" icon = "hand"
@ -21,6 +64,7 @@ projects, and special entities with selection. * * @author Matthew Raymer */
<!-- "Unnamed" entity -- > <!-- "Unnamed" entity -- >
< SpecialEntityCard < SpecialEntityCard
v - if = "showUnnamedEntity && !searchTerm.trim()"
entity - type = "unnamed" entity - type = "unnamed"
: label = "unnamedEntityName" : label = "unnamedEntityName"
icon = "circle-question" icon = "circle-question"
@ -38,6 +82,49 @@ projects, and special entities with selection. * * @author Matthew Raymer */
<!-- Entity cards ( people or projects ) -- > <!-- Entity cards ( people or projects ) -- >
< template v-if ="entityType === 'people'" > < template v-if ="entityType === 'people'" >
<!-- When showing contacts without search : split into recent and alphabetical -- >
< template v-if ="!searchTerm.trim()" >
<!-- Recently Added Section -- >
< template v-if ="recentContacts.length > 0" >
< li
class = "text-xs font-semibold text-slate-500 uppercase pt-5 pb-1.5 px-2 border-b border-slate-300"
>
Recently Added
< / li >
< PersonCard
v - for = "person in recentContacts"
: key = "person.did"
: person = "person"
: conflicted = "isPersonConflicted(person.did)"
: show - time - icon = "true"
: notify = "notify"
: conflict - context = "conflictContext"
@ person - selected = "handlePersonSelected"
/ >
< / template >
<!-- Alphabetical Section -- >
< template v-if ="alphabeticalContacts.length > 0" >
< li
class = "text-xs font-semibold text-slate-500 uppercase pt-5 pb-1.5 px-2 border-b border-slate-300"
>
Everyone Else
< / li >
< PersonCard
v - for = "person in alphabeticalContacts"
: key = "person.did"
: person = "person"
: conflicted = "isPersonConflicted(person.did)"
: show - time - icon = "true"
: notify = "notify"
: conflict - context = "conflictContext"
@ person - selected = "handlePersonSelected"
/ >
< / template >
< / template >
<!-- When searching : show filtered results normally -- >
< template v-else >
< PersonCard < PersonCard
v - for = "person in displayedEntities as Contact[]" v - for = "person in displayedEntities as Contact[]"
: key = "person.did" : key = "person.did"
@ -49,6 +136,7 @@ projects, and special entities with selection. * * @author Matthew Raymer */
@ person - selected = "handlePersonSelected" @ person - selected = "handlePersonSelected"
/ > / >
< / template > < / template >
< / template >
< template v -else -if = " entityType = = = ' projects ' " > < template v -else -if = " entityType = = = ' projects ' " >
< ProjectCard < ProjectCard
@ -63,28 +151,27 @@ projects, and special entities with selection. * * @author Matthew Raymer */
@ project - selected = "handleProjectSelected" @ project - selected = "handleProjectSelected"
/ > / >
< / template > < / template >
<!-- Show All navigation -- >
< ShowAllCard
v - if = "shouldShowAll"
: entity - type = "entityType"
: route - name = "showAllRoute"
: query - params = "showAllQueryParams"
/ >
< / ul > < / ul >
< / template > < / template >
< script lang = "ts" > < script lang = "ts" >
import { Component , Prop , Vue , Emit } from "vue-facing-decorator" ; import { Component , Prop , Vue , Emit , Watch } from "vue-facing-decorator" ;
import { useInfiniteScroll } from "@vueuse/core" ;
import PersonCard from "./PersonCard.vue" ; import PersonCard from "./PersonCard.vue" ;
import ProjectCard from "./ProjectCard.vue" ; import ProjectCard from "./ProjectCard.vue" ;
import SpecialEntityCard from "./SpecialEntityCard.vue" ; import SpecialEntityCard from "./SpecialEntityCard.vue" ;
import ShowAllCard from "./ShowAllCard.vue" ;
import { Contact } from "../db/tables/contacts" ; import { Contact } from "../db/tables/contacts" ;
import { PlanData } from "../interfaces/records" ; import { PlanData } from "../interfaces/records" ;
import { NotificationIface } from "../constants/app" ; import { NotificationIface } from "../constants/app" ;
import { UNNAMED_ENTITY_NAME } from "@/constants/entities" ; import { UNNAMED_ENTITY_NAME } from "@/constants/entities" ;
/ * *
* Constants for infinite scroll configuration
* /
const INITIAL_BATCH_SIZE = 20 ;
const INCREMENT_SIZE = 20 ;
const RECENT_CONTACTS_COUNT = 3 ;
/ * * / * *
* EntityGrid - Unified grid layout for displaying people or projects * EntityGrid - Unified grid layout for displaying people or projects
* *
@ -93,7 +180,6 @@ import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
* - Special entity integration ( You , Unnamed ) * - Special entity integration ( You , Unnamed )
* - Conflict detection integration * - Conflict detection integration
* - Empty state messaging * - Empty state messaging
* - Show All navigation
* - Event delegation for entity selection * - Event delegation for entity selection
* - Warning notifications for conflicted entities * - Warning notifications for conflicted entities
* - Template streamlined with computed CSS properties * - Template streamlined with computed CSS properties
@ -104,7 +190,6 @@ import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
PersonCard , PersonCard ,
ProjectCard , ProjectCard ,
SpecialEntityCard , SpecialEntityCard ,
ShowAllCard ,
} , } ,
} ) } )
export default class EntityGrid extends Vue { export default class EntityGrid extends Vue {
@ -112,14 +197,21 @@ export default class EntityGrid extends Vue {
@ Prop ( { required : true } ) @ Prop ( { required : true } )
entityType ! : "people" | "projects" ; entityType ! : "people" | "projects" ;
/ / S e a r c h s t a t e
searchTerm = "" ;
isSearching = false ;
searchTimeout : NodeJS . Timeout | null = null ;
filteredEntities : Contact [ ] | PlanData [ ] = [ ] ;
/ / I n f i n i t e s c r o l l s t a t e
displayedCount = INITIAL_BATCH_SIZE ;
infiniteScrollReset ? : ( ) => void ;
scrollContainer ? : HTMLElement ;
/** Array of entities to display */ /** Array of entities to display */
@ Prop ( { required : true } ) @ Prop ( { required : true } )
entities ! : Contact [ ] | PlanData [ ] ; entities ! : Contact [ ] | PlanData [ ] ;
/** Maximum number of entities to display */
@ Prop ( { default : 10 } )
maxItems ! : number ;
/** Active user's DID */ /** Active user's DID */
@ Prop ( { required : true } ) @ Prop ( { required : true } )
activeDid ! : string ; activeDid ! : string ;
@ -140,18 +232,14 @@ export default class EntityGrid extends Vue {
@ Prop ( { default : true } ) @ Prop ( { default : true } )
showYouEntity ! : boolean ; showYouEntity ! : boolean ;
/** Whether to show the "Unnamed" entity for people grids */
@ Prop ( { default : true } )
showUnnamedEntity ! : boolean ;
/** Whether the "You" entity is selectable */ /** Whether the "You" entity is selectable */
@ Prop ( { default : true } ) @ Prop ( { default : true } )
youSelectable ! : boolean ; youSelectable ! : boolean ;
/** Route name for "Show All" navigation */
@ Prop ( { default : "" } )
showAllRoute ! : string ;
/** Query parameters for "Show All" navigation */
@ Prop ( { default : ( ) => ( { } ) } )
showAllQueryParams ! : Record < string , string > ;
/** Notification function from parent component */ /** Notification function from parent component */
@ Prop ( ) @ Prop ( )
notify ? : ( notification : NotificationIface , timeout ? : number ) => void ; notify ? : ( notification : NotificationIface , timeout ? : number ) => void ;
@ -160,42 +248,31 @@ export default class EntityGrid extends Vue {
@ Prop ( { default : "other party" } ) @ Prop ( { default : "other party" } )
conflictContext ! : string ; conflictContext ! : string ;
/** Whether to hide the "Show All" navigation */
@ Prop ( { default : false } )
hideShowAll ! : boolean ;
/ * * / * *
* Function to determine which entities to display ( allows parent control ) * Function to determine which entities to display ( allows parent control )
* *
* This function prop allows parent components to customize which entities * This function prop allows parent components to customize which entities
* are displayed in the grid , enabling advanced filtering , sorting , and * are displayed in the grid , enabling advanced filtering and sorting .
* display logic beyond the default simple slice behavior . * Note : Infinite scroll is disabled when this prop is provided .
* *
* @ param entities - The full array of entities ( Contact [ ] or PlanData [ ] ) * @ param entities - The full array of entities ( Contact [ ] or PlanData [ ] )
* @ param entityType - The type of entities being displayed ( "people" or "projects" ) * @ 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 * @ returns Filtered / sorted array of entities to display
* *
* @ example * @ example
* / / C u s t o m f i l t e r i n g : o n l y s h o w c o n t a c t s w i t h p r o f i l e i m a g e s * / / C u s t o m f i l t e r i n g : o n l y s h o w c o n t a c t s w i t h p r o f i l e i m a g e s
* : display - entities - function = " ( entities , type , max ) => * : display - entities - function = " ( entities , type ) =>
* entities . filter ( e => e . profileImageUrl ) . slice ( 0 , max ) " * entities . filter ( e => e . profileImageUrl ) "
* *
* @ example * @ example
* / / C u s t o m s o r t i n g : s o r t p r o j e c t s b y n a m e * / / C u s t o m s o r t i n g : s o r t p r o j e c t s b y n a m e
* : display - entities - function = " ( entities , type , max ) => * : display - entities - function = " ( entities , type ) =>
* entities . sort ( ( a , b ) => a . name . localeCompare ( b . name ) ) . slice ( 0 , max ) " * entities . sort ( ( a , b ) => a . name . localeCompare ( b . name ) ) "
*
* @ example
* / / A d v a n c e d l o g i c : d i f f e r e n t l i m i t s f o r d i f f e r e n t e n t i t y t y p e s
* : display - entities - function = " ( entities , type , max ) =>
* type === 'projects' ? entities . slice ( 0 , 5 ) : entities . slice ( 0 , max ) "
* / * /
@ Prop ( { default : null } ) @ Prop ( { default : null } )
displayEntitiesFunction ? : ( displayEntitiesFunction ? : (
entities : Contact [ ] | PlanData [ ] , entities : Contact [ ] | PlanData [ ] ,
entityType : "people" | "projects" , entityType : "people" | "projects" ,
maxItems : number ,
) => Contact [ ] | PlanData [ ] ; ) => Contact [ ] | PlanData [ ] ;
/ * * / * *
@ -206,33 +283,60 @@ export default class EntityGrid extends Vue {
} }
/ * * / * *
* Computed CSS classes for the grid layout * Computed entities to display - uses function prop if provided , otherwise uses infinite scroll
* When searching , returns filtered results with infinite scroll applied
* / * /
get gridClasses ( ) : string { get displayedEntities ( ) : Contact [ ] | PlanData [ ] {
const baseClasses = "grid gap-x-2 gap-y-4 text-center mb-4" ; / / I f s e a r c h i n g , r e t u r n f i l t e r e d r e s u l t s w i t h i n f i n i t e s c r o l l
if ( this . searchTerm . trim ( ) ) {
return this . filteredEntities . slice ( 0 , this . displayedCount ) ;
}
/ / I f c u s t o m f u n c t i o n p r o v i d e d , u s e i t ( d i s a b l e s i n f i n i t e s c r o l l )
if ( this . displayEntitiesFunction ) {
return this . displayEntitiesFunction ( this . entities , this . entityType ) ;
}
/ / D e f a u l t : p r o j e c t s u s e i n f i n i t e s c r o l l
if ( this . entityType === "projects" ) { if ( this . entityType === "projects" ) {
return ` ${ baseClasses } grid-cols-3 md:grid-cols-4 ` ; return ( this . entities as PlanData [ ] ) . slice ( 0 , this . displayedCount ) ;
} else {
return ` ${ baseClasses } grid-cols-4 sm:grid-cols-5 md:grid-cols-6 ` ;
} }
/ / P e o p l e : h a n d l e d b y r e c e n t C o n t a c t s + a l p h a b e t i c a l C o n t a c t s ( b o t h u s e d i s p l a y e d C o u n t )
return [ ] ;
} }
/ * * / * *
* Computed entities to display - uses function prop if provided , otherwise defaults * Get the 3 most recently added contacts ( when showing contacts and not searching )
* / * /
get displayedEntities ( ) : Contact [ ] | PlanData [ ] { get recentContacts ( ) : Contact [ ] {
if ( this . displayEntitiesFunction ) { if ( this . entityType !== "people" || this . searchTerm . trim ( ) ) {
return this . displayEntitiesFunction ( return [ ] ;
this . entities , }
this . entityType , / / E n t i t i e s a r e a l r e a d y s o r t e d b y d a t e a d d e d ( n e w e s t f i r s t )
this . maxItems , return ( this . entities as Contact [ ] ) . slice ( 0 , 3 ) ;
) ;
} }
/ / D e f a u l t i m p l e m e n t a t i o n f o r b a c k w a r d c o m p a t i b i l i t y / * *
const maxDisplay = this . entityType === "projects" ? 7 : this . maxItems ; * Get the remaining contacts sorted alphabetically ( when showing contacts and not searching )
return this . entities . slice ( 0 , maxDisplay ) ; * Uses infinite scroll to control how many are displayed
* /
get alphabeticalContacts ( ) : Contact [ ] {
if ( this . entityType !== "people" || this . searchTerm . trim ( ) ) {
return [ ] ;
}
/ / S k i p t h e f i r s t 3 ( r e c e n t c o n t a c t s ) a n d s o r t t h e r e s t a l p h a b e t i c a l l y
/ / C r e a t e a c o p y t o a v o i d m u t a t i n g t h e o r i g i n a l a r r a y
const remaining = ( this . entities as Contact [ ] ) . slice ( RECENT_CONTACTS_COUNT ) ;
const sorted = [ ... remaining ] . sort ( ( a : Contact , b : Contact ) => {
/ / S o r t a l p h a b e t i c a l l y b y n a m e , f a l l i n g b a c k t o D I D i f n a m e i s m i s s i n g
const nameA = ( a . name || a . did ) . toLowerCase ( ) ;
const nameB = ( b . name || b . did ) . toLowerCase ( ) ;
return nameA . localeCompare ( nameB ) ;
} ) ;
/ / A p p l y i n f i n i t e s c r o l l : s h o w b a s e d o n d i s p l a y e d C o u n t ( m i n u s t h e 3 r e c e n t )
const toShow = Math . max ( 0 , this . displayedCount - RECENT_CONTACTS_COUNT ) ;
return sorted . slice ( 0 , toShow ) ;
} }
/ * * / * *
@ -246,15 +350,6 @@ export default class EntityGrid extends Vue {
} }
} }
/ * *
* Whether to show the "Show All" navigation
* /
get shouldShowAll ( ) : boolean {
return (
! this . hideShowAll && this . entities . length > 0 && this . showAllRoute !== ""
) ;
}
/ * * / * *
* Whether the "You" entity is conflicted * Whether the "You" entity is conflicted
* / * /
@ -328,6 +423,144 @@ export default class EntityGrid extends Vue {
} ) ; } ) ;
} }
/ * *
* Handle search input with debouncing
* /
handleSearchInput ( ) : void {
/ / S h o w s p i n n e r i m m e d i a t e l y w h e n u s e r t y p e s
this . isSearching = true ;
/ / C l e a r e x i s t i n g t i m e o u t
if ( this . searchTimeout ) {
clearTimeout ( this . searchTimeout ) ;
}
/ / S e t n e w t i m e o u t f o r 5 0 0 m s d e l a y
this . searchTimeout = setTimeout ( ( ) => {
this . performSearch ( ) ;
} , 500 ) ;
}
/ * *
* Perform the actual search
* /
async performSearch ( ) : Promise < void > {
if ( ! this . searchTerm . trim ( ) ) {
this . filteredEntities = [ ] ;
this . displayedCount = INITIAL_BATCH_SIZE ;
this . infiniteScrollReset ? . ( ) ;
return ;
}
this . isSearching = true ;
try {
/ / S i m u l a t e a s y n c s e a r c h ( i n c a s e w e n e e d t o a d d A P I c a l l s l a t e r )
await new Promise ( ( resolve ) => setTimeout ( resolve , 100 ) ) ;
const searchLower = this . searchTerm . toLowerCase ( ) . trim ( ) ;
if ( this . entityType === "people" ) {
this . filteredEntities = ( this . entities as Contact [ ] )
. filter ( ( contact : Contact ) => {
const name = contact . name ? . toLowerCase ( ) || "" ;
const did = contact . did . toLowerCase ( ) ;
return name . includes ( searchLower ) || did . includes ( searchLower ) ;
} )
. sort ( ( a : Contact , b : Contact ) => {
/ / S o r t a l p h a b e t i c a l l y b y n a m e , f a l l i n g b a c k t o D I D i f n a m e i s m i s s i n g
const nameA = ( a . name || a . did ) . toLowerCase ( ) ;
const nameB = ( b . name || b . did ) . toLowerCase ( ) ;
return nameA . localeCompare ( nameB ) ;
} ) ;
} else {
this . filteredEntities = ( this . entities as PlanData [ ] )
. filter ( ( project : PlanData ) => {
const name = project . name ? . toLowerCase ( ) || "" ;
const handleId = project . handleId . toLowerCase ( ) ;
return name . includes ( searchLower ) || handleId . includes ( searchLower ) ;
} )
. sort ( ( a : PlanData , b : PlanData ) => {
/ / S o r t a l p h a b e t i c a l l y b y n a m e
return a . name . toLowerCase ( ) . localeCompare ( b . name . toLowerCase ( ) ) ;
} ) ;
}
/ / R e s e t d i s p l a y e d c o u n t w h e n s e a r c h c o m p l e t e s
this . displayedCount = INITIAL_BATCH_SIZE ;
this . infiniteScrollReset ? . ( ) ;
} finally {
this . isSearching = false ;
}
}
/ * *
* Clear the search
* /
clearSearch ( ) : void {
this . searchTerm = "" ;
this . filteredEntities = [ ] ;
this . isSearching = false ;
this . displayedCount = INITIAL_BATCH_SIZE ;
this . infiniteScrollReset ? . ( ) ;
/ / C l e a r a n y p e n d i n g t i m e o u t
if ( this . searchTimeout ) {
clearTimeout ( this . searchTimeout ) ;
this . searchTimeout = null ;
}
}
/ * *
* Determine if more entities can be loaded
* /
canLoadMore ( ) : boolean {
if ( this . displayEntitiesFunction ) {
/ / C u s t o m f u n c t i o n d i s a b l e s i n f i n i t e s c r o l l
return false ;
}
if ( this . searchTerm . trim ( ) ) {
/ / S e a r c h m o d e : c h e c k f i l t e r e d e n t i t i e s
return this . displayedCount < this . filteredEntities . length ;
}
if ( this . entityType === "projects" ) {
/ / P r o j e c t s : c h e c k i f m o r e a v a i l a b l e
return this . displayedCount < this . entities . length ;
}
/ / P e o p l e : c h e c k i f m o r e a l p h a b e t i c a l c o n t a c t s a v a i l a b l e
/ / T o t a l a v a i l a b l e = 3 r e c e n t + a l l a l p h a b e t i c a l
const remaining = ( this . entities as Contact [ ] ) . slice ( RECENT_CONTACTS_COUNT ) ;
const totalAvailable = RECENT_CONTACTS_COUNT + remaining . length ;
return this . displayedCount < totalAvailable ;
}
/ * *
* Initialize infinite scroll on mount
* /
mounted ( ) : void {
this . $nextTick ( ( ) => {
const container = this . $refs . scrollContainer as HTMLElement ;
if ( container ) {
const { reset } = useInfiniteScroll (
container ,
( ) => {
/ / L o a d m o r e : i n c r e m e n t d i s p l a y e d C o u n t
this . displayedCount += INCREMENT_SIZE ;
} ,
{
distance : 50 , / / p i x e l s f r o m b o t t o m
canLoadMore : ( ) => this . canLoadMore ( ) ,
} ,
) ;
this . infiniteScrollReset = reset ;
}
} ) ;
}
/ / E m i t m e t h o d s u s i n g @ E m i t d e c o r a t o r / / E m i t m e t h o d s u s i n g @ E m i t d e c o r a t o r
@ Emit ( "entity-selected" ) @ Emit ( "entity-selected" )
@ -340,6 +573,33 @@ export default class EntityGrid extends Vue {
} { } {
return data ; return data ;
} }
/ * *
* Watch for changes in search term to reset displayed count
* /
@ Watch ( "searchTerm" )
onSearchTermChange ( ) : void {
this . displayedCount = INITIAL_BATCH_SIZE ;
this . infiniteScrollReset ? . ( ) ;
}
/ * *
* Watch for changes in entities prop to reset displayed count
* /
@ Watch ( "entities" )
onEntitiesChange ( ) : void {
this . displayedCount = INITIAL_BATCH_SIZE ;
this . infiniteScrollReset ? . ( ) ;
}
/ * *
* Cleanup timeouts when component is destroyed
* /
beforeUnmount ( ) : void {
if ( this . searchTimeout ) {
clearTimeout ( this . searchTimeout ) ;
}
}
} }
< / script > < / script >
Matthew Raymer
3 days ago