Browse Source
- Create EntityGrid.vue for unified entity grid layout * Responsive grid layout for people and projects * Integrates special entities (You, Unnamed) seamlessly * Conflict detection integration with prop-based checker * Empty state messaging based on entity type * Show All navigation with query parameter support * Event delegation for all entity selection types * Configurable display limits and grid columns - Create SpecialEntityCard.vue for special entity handling * Handles 'You' and 'Unnamed' entity types * FontAwesome icon integration with configurable styling * Conflict state handling with visual feedback * Entity-type-specific color schemes (blue for You, gray for Unnamed) * Emits structured events with entity data - Create ShowAllCard.vue for navigation functionality * Router-link integration with query parameter passing * Consistent visual styling with other entity cards * Hover effects and animations * Maintains context through configurable route params - Update GiftedDialog-Decomposition-Plan.md * Mark Phase 2 as completed * Add comprehensive integration examples * Update component specifications with actual props/emits * Add EntityGrid, SpecialEntityCard, and ShowAllCard usage patterns * Update project status and next steps Phase 2 creates reusable layout components that can replace the complex grid logic in GiftedDialog. The EntityGrid component provides a clean API for entity selection while maintaining all existing functionality. Components: 7 total (4 Phase 1 + 3 Phase 2) Next: Integration phase - Update GiftedDialog to use new componentsmatthew-scratch-2025-06-28
Matthew Raymer
2 weeks ago
4 changed files with 556 additions and 16 deletions
@ -0,0 +1,259 @@ |
|||
/** |
|||
* 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> |
|||
<ul :class="gridClasses"> |
|||
<!-- Special entities (You, Unnamed) for people grids --> |
|||
<template v-if="entityType === 'people'"> |
|||
<!-- "You" entity --> |
|||
<SpecialEntityCard |
|||
v-if="showYouEntity" |
|||
entity-type="you" |
|||
label="You" |
|||
icon="hand" |
|||
:selectable="youSelectable" |
|||
:conflicted="youConflicted" |
|||
:entity-data="youEntityData" |
|||
@entity-selected="handleEntitySelected" |
|||
/> |
|||
|
|||
<!-- "Unnamed" entity --> |
|||
<SpecialEntityCard |
|||
entity-type="unnamed" |
|||
label="Unnamed" |
|||
icon="circle-question" |
|||
:entity-data="unnamedEntityData" |
|||
@entity-selected="handleEntitySelected" |
|||
/> |
|||
</template> |
|||
|
|||
<!-- Empty state message --> |
|||
<li |
|||
v-if="entities.length === 0" |
|||
class="text-xs text-slate-500 italic col-span-full" |
|||
> |
|||
{{ emptyStateMessage }} |
|||
</li> |
|||
|
|||
<!-- Entity cards (people or projects) --> |
|||
<template v-if="entityType === 'people'"> |
|||
<PersonCard |
|||
v-for="person in displayedEntities" |
|||
:key="person.did" |
|||
:person="person" |
|||
:conflicted="isPersonConflicted(person.did)" |
|||
:show-time-icon="true" |
|||
@person-selected="handlePersonSelected" |
|||
/> |
|||
</template> |
|||
|
|||
<template v-else-if="entityType === 'projects'"> |
|||
<ProjectCard |
|||
v-for="project in displayedEntities" |
|||
:key="project.handleId" |
|||
:project="project" |
|||
:active-did="activeDid" |
|||
:all-my-dids="allMyDids" |
|||
:all-contacts="allContacts" |
|||
@project-selected="handleProjectSelected" |
|||
/> |
|||
</template> |
|||
|
|||
<!-- Show All navigation --> |
|||
<ShowAllCard |
|||
v-if="shouldShowAll" |
|||
:entity-type="entityType" |
|||
:route-name="showAllRoute" |
|||
:query-params="showAllQueryParams" |
|||
/> |
|||
</ul> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { Component, Prop, Vue } from "vue-facing-decorator"; |
|||
import PersonCard from "./PersonCard.vue"; |
|||
import ProjectCard from "./ProjectCard.vue"; |
|||
import SpecialEntityCard from "./SpecialEntityCard.vue"; |
|||
import ShowAllCard from "./ShowAllCard.vue"; |
|||
import { Contact } from "@/interfaces/contact"; |
|||
import { PlanData } from "@/interfaces/plan-data"; |
|||
|
|||
/** |
|||
* EntityGrid - Unified grid layout for entity selection |
|||
* |
|||
* Features: |
|||
* - Responsive grid layout for people or projects |
|||
* - Special entity handling (You, Unnamed) |
|||
* - Conflict detection integration |
|||
* - Empty state messaging |
|||
* - Show All navigation |
|||
* - Configurable display limits |
|||
* - Event delegation for entity selection |
|||
*/ |
|||
@Component({ |
|||
components: { |
|||
PersonCard, |
|||
ProjectCard, |
|||
SpecialEntityCard, |
|||
ShowAllCard, |
|||
}, |
|||
}) |
|||
export default class EntityGrid extends Vue { |
|||
/** Type of entities to display */ |
|||
@Prop({ required: true }) |
|||
entityType!: "people" | "projects"; |
|||
|
|||
/** Array of entities to display */ |
|||
@Prop({ required: true }) |
|||
entities!: Contact[] | PlanData[]; |
|||
|
|||
/** Maximum number of entities to display */ |
|||
@Prop({ default: 10 }) |
|||
maxItems!: number; |
|||
|
|||
/** Active user's DID */ |
|||
@Prop({ required: true }) |
|||
activeDid!: string; |
|||
|
|||
/** All user's DIDs */ |
|||
@Prop({ required: true }) |
|||
allMyDids!: string[]; |
|||
|
|||
/** All contacts */ |
|||
@Prop({ required: true }) |
|||
allContacts!: Contact[]; |
|||
|
|||
/** Function to check if a person DID would create a conflict */ |
|||
@Prop({ required: true }) |
|||
conflictChecker!: (did: string) => boolean; |
|||
|
|||
/** Whether to show the "You" entity for people grids */ |
|||
@Prop({ default: true }) |
|||
showYouEntity!: boolean; |
|||
|
|||
/** Whether the "You" entity is selectable */ |
|||
@Prop({ default: true }) |
|||
youSelectable!: boolean; |
|||
|
|||
/** Route name for "Show All" navigation */ |
|||
@Prop({ default: "" }) |
|||
showAllRoute!: string; |
|||
|
|||
/** Query parameters for "Show All" navigation */ |
|||
@Prop({ default: () => ({}) }) |
|||
showAllQueryParams!: Record<string, any>; |
|||
|
|||
/** |
|||
* Computed CSS classes for the grid layout |
|||
*/ |
|||
get gridClasses(): string { |
|||
const baseClasses = "grid gap-x-2 gap-y-4 text-center mb-4"; |
|||
|
|||
if (this.entityType === "projects") { |
|||
return `${baseClasses} grid-cols-3 md:grid-cols-4`; |
|||
} else { |
|||
return `${baseClasses} grid-cols-4 sm:grid-cols-5 md:grid-cols-6`; |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* Computed entities to display (limited by maxItems) |
|||
*/ |
|||
get displayedEntities(): Contact[] | PlanData[] { |
|||
const maxDisplay = this.entityType === "projects" ? 7 : this.maxItems; |
|||
return this.entities.slice(0, maxDisplay); |
|||
} |
|||
|
|||
/** |
|||
* Computed empty state message based on entity type |
|||
*/ |
|||
get emptyStateMessage(): string { |
|||
if (this.entityType === "projects") { |
|||
return "(No projects found.)"; |
|||
} else { |
|||
return "(Add friends to see more people worthy of recognition.)"; |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* Whether to show the "Show All" navigation |
|||
*/ |
|||
get shouldShowAll(): boolean { |
|||
return this.entities.length > 0 && this.showAllRoute !== ""; |
|||
} |
|||
|
|||
/** |
|||
* Whether the "You" entity is conflicted |
|||
*/ |
|||
get youConflicted(): boolean { |
|||
return this.conflictChecker(this.activeDid); |
|||
} |
|||
|
|||
/** |
|||
* Entity data for the "You" special entity |
|||
*/ |
|||
get youEntityData(): { did: string; name: string } { |
|||
return { |
|||
did: this.activeDid, |
|||
name: "You", |
|||
}; |
|||
} |
|||
|
|||
/** |
|||
* Entity data for the "Unnamed" special entity |
|||
*/ |
|||
get unnamedEntityData(): { did: string; name: string } { |
|||
return { |
|||
did: "", |
|||
name: "Unnamed", |
|||
}; |
|||
} |
|||
|
|||
/** |
|||
* Check if a person DID is conflicted |
|||
*/ |
|||
isPersonConflicted(did: string): boolean { |
|||
return this.conflictChecker(did); |
|||
} |
|||
|
|||
/** |
|||
* Handle person selection from PersonCard |
|||
*/ |
|||
handlePersonSelected(person: Contact): void { |
|||
this.$emit("entity-selected", { |
|||
type: "person", |
|||
data: person, |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* Handle project selection from ProjectCard |
|||
*/ |
|||
handleProjectSelected(project: PlanData): void { |
|||
this.$emit("entity-selected", { |
|||
type: "project", |
|||
data: project, |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* Handle special entity selection from SpecialEntityCard |
|||
*/ |
|||
handleEntitySelected(event: { type: string; entityType: string; data: any }): void { |
|||
this.$emit("entity-selected", { |
|||
type: "special", |
|||
entityType: event.entityType, |
|||
data: event.data, |
|||
}); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* Grid-specific styles if needed */ |
|||
</style> |
|||
@ -0,0 +1,75 @@ |
|||
/** |
|||
* ShowAllCard.vue - Show All navigation card component |
|||
* |
|||
* Extracted from GiftedDialog.vue to handle "Show All" navigation |
|||
* for both people and projects entity types. |
|||
* |
|||
* @author Matthew Raymer |
|||
*/ |
|||
<template> |
|||
<li class="cursor-pointer"> |
|||
<router-link |
|||
:to="navigationRoute" |
|||
class="block text-center" |
|||
> |
|||
<font-awesome |
|||
icon="circle-right" |
|||
class="text-blue-500 text-5xl mb-1" |
|||
/> |
|||
<h3 class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"> |
|||
Show All |
|||
</h3> |
|||
</router-link> |
|||
</li> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { Component, Prop, Vue } from "vue-facing-decorator"; |
|||
import { RouteLocationRaw } from "vue-router"; |
|||
|
|||
/** |
|||
* ShowAllCard - Displays "Show All" navigation for entity grids |
|||
* |
|||
* Features: |
|||
* - Provides navigation to full entity listings |
|||
* - Supports different routes based on entity type |
|||
* - Maintains context through query parameters |
|||
* - Consistent visual styling with other cards |
|||
*/ |
|||
@Component |
|||
export default class ShowAllCard extends Vue { |
|||
/** Type of entities being shown */ |
|||
@Prop({ required: true }) |
|||
entityType!: "people" | "projects"; |
|||
|
|||
/** Route name to navigate to */ |
|||
@Prop({ required: true }) |
|||
routeName!: string; |
|||
|
|||
/** Query parameters to pass to the route */ |
|||
@Prop({ default: () => ({}) }) |
|||
queryParams!: Record<string, any>; |
|||
|
|||
/** |
|||
* Computed navigation route with query parameters |
|||
*/ |
|||
get navigationRoute(): RouteLocationRaw { |
|||
return { |
|||
name: this.routeName, |
|||
query: this.queryParams, |
|||
}; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* Ensure router-link styling is consistent */ |
|||
a { |
|||
text-decoration: none; |
|||
} |
|||
|
|||
a:hover .fa-circle-right { |
|||
transform: scale(1.1); |
|||
transition: transform 0.2s ease; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,135 @@ |
|||
/** |
|||
* SpecialEntityCard.vue - Special entity display component |
|||
* |
|||
* Extracted from GiftedDialog.vue to handle special entities like "You" |
|||
* and "Unnamed" with conflict detection and selection capability. |
|||
* |
|||
* @author Matthew Raymer |
|||
*/ |
|||
<template> |
|||
<li |
|||
:class="cardClasses" |
|||
@click="handleClick" |
|||
> |
|||
<font-awesome |
|||
:icon="icon" |
|||
:class="iconClasses" |
|||
/> |
|||
<h3 :class="nameClasses"> |
|||
{{ label }} |
|||
</h3> |
|||
</li> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { Component, Prop, Vue } from "vue-facing-decorator"; |
|||
|
|||
/** |
|||
* SpecialEntityCard - Displays special entities with selection capability |
|||
* |
|||
* Features: |
|||
* - Displays special entities like "You" and "Unnamed" |
|||
* - Shows appropriate FontAwesome icons |
|||
* - Handles conflict states and selection |
|||
* - Emits selection events with entity data |
|||
* - Configurable styling based on entity type |
|||
*/ |
|||
@Component |
|||
export default class SpecialEntityCard extends Vue { |
|||
/** Type of special entity */ |
|||
@Prop({ required: true }) |
|||
entityType!: "you" | "unnamed"; |
|||
|
|||
/** Display label for the entity */ |
|||
@Prop({ required: true }) |
|||
label!: string; |
|||
|
|||
/** FontAwesome icon name */ |
|||
@Prop({ required: true }) |
|||
icon!: string; |
|||
|
|||
/** Whether this entity can be selected */ |
|||
@Prop({ default: true }) |
|||
selectable!: boolean; |
|||
|
|||
/** Whether selecting this entity would create a conflict */ |
|||
@Prop({ default: false }) |
|||
conflicted!: boolean; |
|||
|
|||
/** Entity data to emit when selected */ |
|||
@Prop({ required: true }) |
|||
entityData!: { did?: string; name: string }; |
|||
|
|||
/** |
|||
* Computed CSS classes for the card container |
|||
*/ |
|||
get cardClasses(): string { |
|||
const baseClasses = "block"; |
|||
|
|||
if (!this.selectable || this.conflicted) { |
|||
return `${baseClasses} cursor-not-allowed opacity-50`; |
|||
} |
|||
|
|||
return `${baseClasses} cursor-pointer`; |
|||
} |
|||
|
|||
/** |
|||
* Computed CSS classes for the icon |
|||
*/ |
|||
get iconClasses(): string { |
|||
const baseClasses = "text-5xl mb-1"; |
|||
|
|||
if (this.conflicted) { |
|||
return `${baseClasses} text-slate-400`; |
|||
} |
|||
|
|||
// Different colors for different entity types |
|||
switch (this.entityType) { |
|||
case "you": |
|||
return `${baseClasses} text-blue-500`; |
|||
case "unnamed": |
|||
return `${baseClasses} text-slate-400`; |
|||
default: |
|||
return `${baseClasses} text-slate-400`; |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* Computed CSS classes for the entity name/label |
|||
*/ |
|||
get nameClasses(): string { |
|||
const baseClasses = "text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"; |
|||
|
|||
if (this.conflicted) { |
|||
return `${baseClasses} text-slate-400`; |
|||
} |
|||
|
|||
// Different colors for different entity types |
|||
switch (this.entityType) { |
|||
case "you": |
|||
return `${baseClasses} text-blue-500`; |
|||
case "unnamed": |
|||
return `${baseClasses} text-slate-500 italic`; |
|||
default: |
|||
return `${baseClasses} text-slate-500`; |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* Handle card click - only emit if selectable and not conflicted |
|||
*/ |
|||
handleClick(): void { |
|||
if (this.selectable && !this.conflicted) { |
|||
this.$emit("entity-selected", { |
|||
type: "special", |
|||
entityType: this.entityType, |
|||
data: this.entityData, |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* Component-specific styles if needed */ |
|||
</style> |
|||
Loading…
Reference in new issue