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

before ugrade

Browse Source
This commit is contained in:
Kham Vilaythong
2025-08-17 10:20:04 +10:00
parent de9cf16e8f
commit 230be1edb0
18 changed files with 263 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/src/app/app.config.ts
+3
View File
@@ -30,3 +30,6 @@ export const appConfig: ApplicationConfig = {
provideRouter(routes)
]
};
/*
ng build --base-href "/FamilyTreeUI/" -c production
*/
UI/src/app/mythem.ts
+12
View File
@@ -3,10 +3,22 @@
//mypreset.ts
import { definePreset } from '@primeuix/themes';
import Aura from '@primeuix/themes/aura';
import { primitive } from '@primeuix/themes/aura/base';
const MyPreset = definePreset(Aura, {
semantic: {
colorScheme: {
primitive: {
cyan: {
50: '{cyan.50}',
100: '{cyan.100}',
200: '{cyan.200}',
300: '{cyan.300}',
400: '{cyan.400}',
500: '{cyan.500}',
}
},
primary: {
50: '{zinc.50}',
100: '{zinc.100}',
UI/src/app/person/family.orga.html
+2 -1
View File
@@ -3,7 +3,8 @@
<div>
<label>link from partner and Father and Mother Id</label>
<div >
<p-organization-chart [value]="familyTree()" selectionMode="multiple" [(selection)]="selectedNodes" [collapsible]="true">
<!-- selectionMode="multiple" [(selection)]="selectedNodes" -->
<p-organization-chart [value]="familyTree()" [collapsible]="true">
<ng-template let-node pTemplate="default">
<div class="flex flex-col items-center">
<!--img src="https://primefaces.org/cdn/primeng/images/flag/flag_placeholder.png" [alt]="node.label" [class]="'flag' + ' flag-' + node.data" width="32" /-->
UI/src/app/person/family.orga.ts
+35 -11
View File
@@ -59,43 +59,67 @@ export class FamilyOrga implements OnInit, OnDestroy{
if (item != undefined)
this.person = item;
this.loadPersonFamilyTree(id);
// this. populateTree();
//this.populateTree();
}
populateTree() : void {
const tree = [
{
label: 'F.C Barcelona',
const data: TreeNode[] = [
{
expanded: true,
type: 'person',
styleClass: 'bg-indigo-500 text-white',
data: {
image: 'https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png',
name: 'Amy Elsner',
title: 'CEO'
},
children: [
{
label: 'Argentina',
expanded: true,
type: 'person',
styleClass: 'bg-purple-500 text-white',
data: {
image: 'https://primefaces.org/cdn/primeng/images/demo/avatar/annafali.png',
name: 'Anna Fali',
title: 'CMO'
},
children: [
{
label: 'Argentina'
label: 'Sales',
styleClass: 'bg-purple-500 text-white',
style: ' border-radius: 12px'
},
{
label: 'France'
label: 'Marketing',
styleClass: 'bg-purple-500 text-white',
style: ' border-radius: 12px'
}
]
},
{
label: 'France',
expanded: true,
type: 'person',
styleClass: 'bg-teal-500 text-white',
data: {
image: 'https://primefaces.org/cdn/primeng/images/demo/avatar/stephenshaw.png',
name: 'Stephen Shaw',
title: 'CTO'
},
children: [
{
label: 'France'
label: 'Development',
styleClass: 'bg-teal-500 text-white'
},
{
label: 'Morocco'
label: 'UI/UX Design',
styleClass: 'bg-teal-500 text-white'
}
]
}
]
}
];
this.familyTree.set(tree);
this.familyTree.set(data);
}
loadPersonFamilyTree(id: number): void {
const relationShip$ = this.personService.loadPersonFamily(id);
UI/src/app/person/family.tree.html
+8 -11
View File
@@ -2,18 +2,15 @@
<h3>Family Tree by Person has Father</h3>
<div>
<form>
<div class="grid grid-cols-4 gap-2">
<div class="">
<label for="firstname">Family Tree person Has Father </label>
<input id="firstname" name="firstname" pInputText type="text" [(ngModel)]="firstname"
class="inputfield w-full p-inputtext-sm">
</div>
<div class="grid grid-cols-12 gap-2">
<div class="flex items-center">
<p-checkbox inputId="isFather" [binary]="true" name="isFather" [(ngModel)]="isFather" />
<label for="isFather" class="ml-2"> Is Father </label>
</div>
<div class="flex items-end">
<button pButton pRipple class="p-button-sm mr-2 " type="submit" icon="pi pi-search" iconPos="left" label="Search"
(click)="search()"></button>
<button pButton pRipple class="p-button-sm " type="button" icon="pi pi-user-plus" iconPos="left" label="New Family"
(click)="newFamily()"></button>
</div>
<button pButton pRipple class="p-button-sm mr-2 " type="submit" icon="pi pi-sitemap" label="Load"
(click)="load()"></button>
</div>
</div>
</form>
</div>
UI/src/app/person/family.tree.ts
+13 -52
View File
@@ -1,4 +1,4 @@
import { Component, OnInit, OnDestroy, inject, ChangeDetectorRef} from '@angular/core';
import { Component, OnInit, OnDestroy, inject, ChangeDetectorRef, signal} from '@angular/core';
import { StaffView ,StaffSearch, Person } from '../models';
import { OrganizationChartModule } from 'primeng/organizationchart';
@@ -17,18 +17,22 @@ import { InputTextModule } from 'primeng/inputtext';
import { DialogService } from 'primeng/dynamicdialog';
import { PersonEdit } from './person.edit';
import { MessageService } from 'primeng/api';
import { CheckboxModule } from 'primeng/checkbox';
import { TreeModule, TreeNodeDoubleClickEvent, TreeNodeSelectEvent } from 'primeng/tree';
import { Utils } from '../shares';
@Component({
selector: 'family-tree',
templateUrl: './family.tree.html',
imports:[TableModule,FormsModule,TreeModule, OrganizationChartModule,CommonModule,ButtonModule,InputTextModule],
imports:[TableModule,FormsModule,TreeModule,CheckboxModule,
OrganizationChartModule,CommonModule,
FormsModule,
ButtonModule,InputTextModule],
styleUrls: ['./family.tree.css'],
providers: [DialogService]
})
export class FamilyTree implements OnInit, OnDestroy{
isFather = signal(true);
private subscription:Subscription = new Subscription();
firstname = '';
selectedNode!: TreeNode;
@@ -73,25 +77,8 @@ export class FamilyTree implements OnInit, OnDestroy{
this.authenticationService.isReport = false;
const prev = this.personService.searchCriteria;
let goload = true;
if (prev.lastName !== '')
{
this.lastname = prev.lastName;
goload = true;
}
if (prev.firstName !== '')
{
this.firstname = prev.firstName;
goload = true;
}
if (prev.email !== '')
{
this.email = prev.email;
goload = true;
}
if (goload)
{
this.search();
}
this.load();
}
getActive(active:boolean):string {
let result = 'false-icon pi-times-circle';
@@ -99,15 +86,13 @@ export class FamilyTree implements OnInit, OnDestroy{
result = 'true-icon pi-check-circle';
return result;
}
search():void {
const canSearch = true; // this.canSearch();
if (canSearch)
{
load():void {
let father = this.isFather();
this.loading = true;
//const criteria = this.getSearchCiteria();
// this.personService.searchCriteria = criteria;
this.subscription.add(
this.personService.loadPersonFamilyTree(true, false).subscribe(
this.personService.loadPersonFamilyTree(father, !father).subscribe(
{
next: x => {
if (x.statusCode == 1)
@@ -126,31 +111,7 @@ export class FamilyTree implements OnInit, OnDestroy{
console.log("error ", e);
}
})
);
/*
this.personService.searchPersons(criteria).subscribe( {
next: result => {
// console.log(this.msg + "search load Data", result);
this.familyList = result.data;
this.familyTree = Utils.populateNode( "fatherId", this.familyList);
this.loading = false;
this.cd.detectChanges();
}
},
error: e => {
const message = e || e.message;
// this.toastr.error(message);
this.loading = false;
console.log("error ", e);
}
})
);
*/
}
);
}
nodeSelect(event: TreeNodeSelectEvent) {
UI/src/app/person/familylist.html
+5 -2
View File
@@ -21,20 +21,23 @@
<div class="flex items-end">
<button pButton pRipple class="p-button-sm mr-2 " type="submit" icon="pi pi-search" iconPos="left" label="Search"
(click)="search()"></button>
<button pButton pRipple class="p-button-sm " type="button" icon="pi pi-user-plus" iconPos="left" label="New Person"
<button pButton pRipple class="p-button-sm " type="button" icon="pi pi-user-plus" label="New Person"
(click)="newFamily()"></button>
</div>
</div>
</form>
</div>
<div>
<p-table [value]="familyList()" sortMode="multiple" dataKey="id" class="p-datatable-sm"
<p-table [value]="familyList()" sortMode="multiple" dataKey="id" class="p-datatable-sm" #dt
class="p-datatable-sm" selectionMode="single" [(selection)]="selectedPerson"
[paginator]="true" rowHover="true" [globalFilterFields]="['lastName', 'firstName', 'email', 'fatherName', 'motherName']"
[rows]="20" [rowsPerPageOptions]="[10,20,50,100]"
[loading]="loading">
<ng-template #caption>
<div class="flex">
<p-button icon="pi pi-external-link" label="Export" (click)="exportExport()"
/>
<p-iconfield iconPosition="left" class="ml-auto">
<p-inputicon>
<i class="pi pi-search"></i>
UI/src/app/person/familylist.ts
+18
View File
@@ -20,6 +20,10 @@ import { IconFieldModule } from 'primeng/iconfield';
import { InputIconModule } from 'primeng/inputicon';
import { Menu, MenuModule } from 'primeng/menu';
import { FamilyOrga } from './family.orga';
import { saveAs } from 'file-saver';
import * as XLSX from 'xlsx';
@Component({
selector: 'family-list',
templateUrl: './familylist.html',
@@ -88,6 +92,20 @@ export class FamilyList implements OnInit, OnDestroy{
];
}
exportExport() : void {
this.ExcelExport(this.familyList(), 'family_export');
}
ExcelExport(data: any, fileName:string) :void
{
const worksheet = XLSX.utils.json_to_sheet(data);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
saveAs(blob, `${fileName}.xlsx`);
}
actionClick(id: number, event:Event): void {
// console.log("action edit "+ id);
this.selectId = id;
UI/src/app/shares/utils.ts
+1
View File
@@ -166,6 +166,7 @@ static formatNode(item:Person): TreeNode
let tree_node_child: TreeNode[];
let node:TreeNode;
let item: Person;
const children = childressNodes.filter(x => x[proName] == pid);
for (let c = 0; c < children.length; c++)
{