a5a9af5ddc
Replace Project Link text input with interactive selection dialog using new MeetingProjectDialog component. Dialog displays user's projects with icons and issuer information, following the same pattern as ProjectRepresentativeDialog. - Create MeetingProjectDialog with EntityGrid integration - Add clickable project field with icon, name, and issuer display - Load projects from /api/v2/report/plansByIssuer endpoint - Show issuer name instead of handleId for better UX - Refactor loadProjects to remove unused rowId field
106 lines
2.6 KiB
Vue
106 lines
2.6 KiB
Vue
/** * ProjectCard.vue - Individual project display component * * Extracted from
|
|
GiftedDialog.vue to handle project entity display * with selection states and
|
|
issuer information. * * @author Matthew Raymer */
|
|
<template>
|
|
<li
|
|
class="flex items-center gap-2 px-2 py-1.5 border-b border-slate-300 hover:bg-slate-50 cursor-pointer"
|
|
@click="handleClick"
|
|
>
|
|
<ProjectIcon
|
|
:entity-id="project.handleId"
|
|
:icon-size="30"
|
|
:image-url="project.image"
|
|
class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
|
|
/>
|
|
|
|
<div class="overflow-hidden">
|
|
<h3 class="text-sm font-semibold truncate">
|
|
{{ project.name || unnamedProject }}
|
|
</h3>
|
|
|
|
<div class="text-xs text-slate-500 truncate">
|
|
<font-awesome icon="user" class="text-slate-400" />
|
|
{{ issuerDisplayName }}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
|
|
import ProjectIcon from "./ProjectIcon.vue";
|
|
import { PlanData } from "../interfaces/records";
|
|
import { Contact } from "../db/tables/contacts";
|
|
import { didInfo } from "../libs/endorserServer";
|
|
import { UNNAMED_PROJECT } from "@/constants/entities";
|
|
|
|
/**
|
|
* ProjectCard - Displays a project entity with selection capability
|
|
*
|
|
* Features:
|
|
* - Shows project icon using ProjectIcon
|
|
* - Displays project name and issuer information
|
|
* - Handles click events for selection
|
|
* - Shows issuer name using didInfo utility
|
|
*/
|
|
@Component({
|
|
components: {
|
|
ProjectIcon,
|
|
},
|
|
})
|
|
export default class ProjectCard extends Vue {
|
|
/** Project entity to display */
|
|
@Prop({ required: true })
|
|
project!: PlanData;
|
|
|
|
/** Active user's DID for issuer display */
|
|
@Prop({ required: true })
|
|
activeDid!: string;
|
|
|
|
/** All user's DIDs for issuer display */
|
|
@Prop({ required: true })
|
|
allMyDids!: string[];
|
|
|
|
/** All contacts for issuer display */
|
|
@Prop({ required: true })
|
|
allContacts!: Contact[];
|
|
|
|
/**
|
|
* Get the unnamed project constant
|
|
*/
|
|
get unnamedProject(): string {
|
|
return UNNAMED_PROJECT;
|
|
}
|
|
|
|
/**
|
|
* Computed display name for the project issuer
|
|
*/
|
|
get issuerDisplayName(): string {
|
|
return didInfo(
|
|
this.project.issuerDid,
|
|
this.activeDid,
|
|
this.allMyDids,
|
|
this.allContacts,
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Handle card click - emit project selection
|
|
*/
|
|
handleClick(): void {
|
|
this.emitProjectSelected(this.project);
|
|
}
|
|
|
|
// Emit methods using @Emit decorator
|
|
|
|
@Emit("project-selected")
|
|
emitProjectSelected(project: PlanData): PlanData {
|
|
return project;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Component-specific styles if needed */
|
|
</style>
|