kham/familytree
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

put in mouse over show bigger image

Browse Source
This commit is contained in:
Kham Vilaythong
2025-11-13 21:37:21 +11:00
parent 502945ca2b
commit 72b452d169
2 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/src/app/person/family.orga.html
+13 -3
View File
@@ -9,14 +9,24 @@
<!-- selectionMode="multiple" [(selection)]="selectedNodes" --> <!-- selectionMode="multiple" [(selection)]="selectedNodes" -->
<p-organization-chart [value]="familyTree()" [collapsible]="true"> <p-organization-chart [value]="familyTree()" [collapsible]="true">
<ng-template let-node pTemplate="default"> <ng-template let-node pTemplate="default">
<div class="flex flex-col items-center"> <div #targetEl class="flex flex-col items-center">
@if (node.data.image != "") @if (node.data.image != "")
{ {
<img [src]= "node.data.image" class="mb-2 w-12 h-12 rounded-full " /> <img (mouseover)="op.show($event, targetEl)" [src]= "node.data.image" class="mb-2 w-12 h-12 rounded-full " />
} }
<!--img src="https://primefaces.org/cdn/primeng/images/flag/flag_placeholder.png" [alt]="node.label" [class]="'flag' + ' flag-' + node.data" width="32" /--> <!--img src="https://primefaces.org/cdn/primeng/images/flag/flag_placeholder.png" [alt]="node.label" [class]="'flag' + ' flag-' + node.data" width="32" /-->
<div class="mt-2 font-medium text-lg">{{ node.label }}</div> <div class="mt-2 font-medium text-lg">{{ node.label }}</div>
<div>{{ node.data.sex }} </div> <div>{{ node.data.sex }} </div>
<p-popover #op class="flex w-2/5 h-2/5">
@if (node.data.image != "")
{
<div>
<p-button (onClick)="op.hide()" icon="pi pi-times" [rounded]="true" [text]="true" severity="danger" class="flex justify-end mb-2" />
<img [src]= "node.data.image" alt="person profile" />
</div>
}
</p-popover>
</div> </div>
</ng-template> </ng-template>
</p-organization-chart> </p-organization-chart>
UI/src/app/person/family.orga.ts
+2 -1
View File
@@ -17,11 +17,12 @@ import { PersonEdit } from './person.edit';
import { MessageService } from 'primeng/api'; import { MessageService } from 'primeng/api';
import { TreeModule, TreeNodeDoubleClickEvent, TreeNodeSelectEvent } from 'primeng/tree'; import { TreeModule, TreeNodeDoubleClickEvent, TreeNodeSelectEvent } from 'primeng/tree';
import { Utils } from '../shares'; import { Utils } from '../shares';
import { PopoverModule } from 'primeng/popover';
@Component({ @Component({
selector: 'family-orga', selector: 'family-orga',
templateUrl: './family.orga.html', templateUrl: './family.orga.html',
imports:[TableModule,FormsModule,TreeModule, OrganizationChartModule,CommonModule,ButtonModule,InputTextModule], imports:[TableModule,FormsModule,TreeModule,PopoverModule, OrganizationChartModule,CommonModule,ButtonModule,InputTextModule],
styleUrls: ['./family.orga.css'], styleUrls: ['./family.orga.css'],
providers: [DialogService] providers: [DialogService]
}) })