| 
						
						
						
					 | 
				
				 | 
				
					@ -1,17 +1,9 @@ | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					/** | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					 * EntityGrid.vue - Unified entity grid layout component | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					 *  | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					 * Extracted from GiftedDialog.vue to provide a reusable grid layout | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					 * for displaying people, projects, and special entities with selection. | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					 *  | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					 * @author Matthew Raymer | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					 */ | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					/** * EntityGrid.vue - Unified entity grid layout component * * Extracted from | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					GiftedDialog.vue to provide a reusable grid layout * for displaying people, | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					projects, and special entities with selection. * * @author Matthew Raymer */ | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					<template> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					  <!-- Quick Search --> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					  <div | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    id="QuickSearch" | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    class="mb-4 flex items-center text-sm" | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					  > | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					  <div id="QuickSearch" class="mb-4 flex items-center text-sm"> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    <input | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					      v-model="searchTerm" | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					      type="text" | 
				
			
			
		
	
	
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
				
				 | 
				
					@ -24,14 +16,20 @@ | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					      v-show="isSearching" | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					      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]"></font-awesome> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					      <font-awesome | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        icon="spinner" | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        class="fa-spin-pulse leading-[1.1]" | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					      ></font-awesome> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    </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"></font-awesome> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					      <font-awesome | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        :icon="searchTerm ? 'times' : 'magnifying-glass'" | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        class="fa-fw" | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					      ></font-awesome> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    </button> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					  </div> | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
	
		
			
				
					| 
						
							
								
							
						
						
							
								
							
						
						
					 | 
				
				 | 
				
					@ -360,22 +358,26 @@ export default class EntityGrid extends Vue { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    try { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					      // Simulate async search (in case we need to add API calls later) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					      await new Promise(resolve => setTimeout(resolve, 100)); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					      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); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        }); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        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); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					          }, | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        ); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					      } 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); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        }); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        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); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					          }, | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					        ); | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					      } | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    } finally { | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					      this.isSearching = false; | 
				
			
			
		
	
	
		
			
				
					| 
						
							
								
							
						
						
						
					 | 
				
				 | 
				
					
  |