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.
95 lines
2.3 KiB
95 lines
2.3 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 }}
|
|
</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 } 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.$emit("project-selected", this.project);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Component-specific styles if needed */
|
|
</style>
|