You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
2.4 KiB
96 lines
2.4 KiB
/** * 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="cursor-pointer" @click="handleClick">
|
|
<div class="relative w-fit mx-auto">
|
|
<ProjectIcon
|
|
:entity-id="project.handleId"
|
|
:icon-size="48"
|
|
:image-url="project.image"
|
|
class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
|
|
/>
|
|
</div>
|
|
|
|
<h3
|
|
class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
|
|
>
|
|
{{ project.name || "Unnamed Project" }}
|
|
</h3>
|
|
|
|
<div class="text-xs text-slate-500 truncate">
|
|
<font-awesome icon="user" class="fa-fw text-slate-400" />
|
|
{{ issuerDisplayName }}
|
|
</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";
|
|
|
|
/**
|
|
* 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[];
|
|
|
|
/**
|
|
* 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>
|
|
|