From 2358ac9090dd0667374e7572b143a33c5c235e3f Mon Sep 17 00:00:00 2001
From: "kham.vilaythong" <kham.vilaythong@gmail.com>
Date: Sun, 9 Nov 2025 16:39:52 +1100
Subject: [PATCH] adding image on familytree show

---
 UI/src/app/person/family.orga.html       | 11 +++++++++--
 UI/src/app/person/familylist.ts          |  5 +++--
 UI/src/app/pickperson/image.display.html |  3 +--
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/UI/src/app/person/family.orga.html b/UI/src/app/person/family.orga.html
index 5bd8736..a42c5c6 100644
--- a/UI/src/app/person/family.orga.html
+++ b/UI/src/app/person/family.orga.html
@@ -3,13 +3,20 @@
 <div>
     <label>link from partner and Father and Mother Id</label>
 <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" -->
     <p-organization-chart [value]="familyTree()" [collapsible]="true">
         <ng-template let-node pTemplate="default">
             <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" /-->
-                <div class="mt-4 font-medium text-lg">{{ node.label }}</div>
-                <div>{{ node.data }}</div>
+                <div class="mt-2 font-medium text-lg">{{ node.label }}</div>
+                <div>{{ node.data.sex }} </div>
             </div>
         </ng-template>
     </p-organization-chart>
diff --git a/UI/src/app/person/familylist.ts b/UI/src/app/person/familylist.ts
index d24093d..3b18997 100644
--- a/UI/src/app/person/familylist.ts
+++ b/UI/src/app/person/familylist.ts
@@ -299,9 +299,10 @@ export class FamilyList implements OnInit, OnDestroy{
          id, 
          familyList: this.familyList(),         
     },
-      header: 'Children',
+      header: 'Family Tree and Children',
       width: '80%',
-      maximizable: true
+      maximizable: true,
+      closable: true
     });
     
     ref.onClose.subscribe((item: Person) => {
diff --git a/UI/src/app/pickperson/image.display.html b/UI/src/app/pickperson/image.display.html
index 2888bbe..a84eca5 100644
--- a/UI/src/app/pickperson/image.display.html
+++ b/UI/src/app/pickperson/image.display.html
@@ -1,6 +1,5 @@
 <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"
           (click)="close()"></button>
   </div>
\ No newline at end of file