trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 20 Releases 5 Wiki Activity

fix: linting

Browse Source
This commit is contained in:
Jose Olarte III
2025-10-30 21:49:35 +08:00
parent a804877a08
commit 75c89b471c
1 changed files with 32 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/EntityGrid.vue
View File

@@ -1,17 +1,9 @@
/** /** * EntityGrid.vue - Unified entity grid layout component * * Extracted from
* EntityGrid.vue - Unified entity grid layout component GiftedDialog.vue to provide a reusable grid layout * for displaying people,
* projects, and special entities with selection. * * @author Matthew Raymer */
* Extracted from GiftedDialog.vue to provide a reusable grid layout
* for displaying people, projects, and special entities with selection.
*
* @author Matthew Raymer
*/
<template> <template>
<!-- Quick Search --> <!-- Quick Search -->
<div <div id="QuickSearch" class="mb-4 flex items-center text-sm">
id="QuickSearch"
class="mb-4 flex items-center text-sm"
>
<input <input
v-model="searchTerm" v-model="searchTerm"
type="text" type="text"
@@ -20,21 +12,27 @@
@input="handleSearchInput" @input="handleSearchInput"
@keydown.enter="performSearch" @keydown.enter="performSearch"
/> />
<div <div
v-show="isSearching" v-show="isSearching"
class="border-y border-slate-400 ps-2 py-1.5 text-center text-slate-400" 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> </div>
<button <button
:disabled="!searchTerm" :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" 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" @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> </button>
</div> </div>
<ul class="border-t border-slate-300 mb-4 max-h-[60vh] overflow-y-auto"> <ul 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'">
@@ -335,7 +333,7 @@ export default class EntityGrid extends Vue {
handleSearchInput(): void { handleSearchInput(): void {
// Show spinner immediately when user types // Show spinner immediately when user types
this.isSearching = true; this.isSearching = true;
// Clear existing timeout // Clear existing timeout
if (this.searchTimeout) { if (this.searchTimeout) {
clearTimeout(this.searchTimeout); clearTimeout(this.searchTimeout);
@@ -360,22 +358,26 @@ export default class EntityGrid extends Vue {
try { try {
// Simulate async search (in case we need to add API calls later) // 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(); const searchLower = this.searchTerm.toLowerCase().trim();
if (this.entityType === "people") { if (this.entityType === "people") {
this.filteredEntities = (this.entities as Contact[]).filter((contact: Contact) => { this.filteredEntities = (this.entities as Contact[]).filter(
const name = contact.name?.toLowerCase() || ""; (contact: Contact) => {
const did = contact.did.toLowerCase(); const name = contact.name?.toLowerCase() || "";
return name.includes(searchLower) || did.includes(searchLower); const did = contact.did.toLowerCase();
}); return name.includes(searchLower) || did.includes(searchLower);
},
);
} else { } else {
this.filteredEntities = (this.entities as PlanData[]).filter((project: PlanData) => { this.filteredEntities = (this.entities as PlanData[]).filter(
const name = project.name?.toLowerCase() || ""; (project: PlanData) => {
const handleId = project.handleId.toLowerCase(); const name = project.name?.toLowerCase() || "";
return name.includes(searchLower) || handleId.includes(searchLower); const handleId = project.handleId.toLowerCase();
}); return name.includes(searchLower) || handleId.includes(searchLower);
},
);
} }
} finally { } finally {
this.isSearching = false; this.isSearching = false;
@@ -389,7 +391,7 @@ export default class EntityGrid extends Vue {
this.searchTerm = ""; this.searchTerm = "";
this.filteredEntities = []; this.filteredEntities = [];
this.isSearching = false; this.isSearching = false;
// Clear any pending timeout // Clear any pending timeout
if (this.searchTimeout) { if (this.searchTimeout) {
clearTimeout(this.searchTimeout); clearTimeout(this.searchTimeout);