adding image on familytree show
This commit is contained in:
@@ -3,13 +3,20 @@
|
|||||||
<div>
|
<div>
|
||||||
<label>link from partner and Father and Mother Id</label>
|
<label>link from partner and Father and Mother Id</label>
|
||||||
<div >
|
<div >
|
||||||
|
<!--this styleclass all logic in api one not here. background color -->
|
||||||
|
<!--the treeNode.Data has treeData image and sex-->
|
||||||
|
<!--image is 64 string so to show 'data:image/png;base64,'imageStr' here -->
|
||||||
<!-- 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 class="flex flex-col items-center">
|
||||||
|
@if (node.data.image != "")
|
||||||
|
{
|
||||||
|
<img [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-4 font-medium text-lg">{{ node.label }}</div>
|
<div class="mt-2 font-medium text-lg">{{ node.label }}</div>
|
||||||
<div>{{ node.data }}</div>
|
<div>{{ node.data.sex }} </div>
|
||||||
</div>
|
</div>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</p-organization-chart>
|
</p-organization-chart>
|
||||||
|
|||||||
@@ -299,9 +299,10 @@ export class FamilyList implements OnInit, OnDestroy{
|
|||||||
id,
|
id,
|
||||||
familyList: this.familyList(),
|
familyList: this.familyList(),
|
||||||
},
|
},
|
||||||
header: 'Children',
|
header: 'Family Tree and Children',
|
||||||
width: '80%',
|
width: '80%',
|
||||||
maximizable: true
|
maximizable: true,
|
||||||
|
closable: true
|
||||||
});
|
});
|
||||||
|
|
||||||
ref.onClose.subscribe((item: Person) => {
|
ref.onClose.subscribe((item: Person) => {
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
<img [src]="imageDataUrl()" alt="Person Image" width="400" height="300"/>
|
<img [src]="imageDataUrl()" alt="Person Image" width="400" height="300"/>
|
||||||
<div class="flex justify-end">
|
<div class="flex justify-end">
|
||||||
|
|
||||||
<button pButton pRipple class="p-button-sm mr-2 p-button-secondary" type="button" icon="pi pi-sign-in" label="Close"
|
<button pButton pRipple class="p-button-sm mr-2 p-button-secondary" type="button" icon="pi pi-sign-in" label="Close"
|
||||||
(click)="close()"></button>
|
(click)="close()"></button>
|
||||||
</div>
|
</div>
|
||||||
Reference in New Issue
Block a user