update to angular 21

UI/.gitignore

@@ -0,0 +1,43 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+__screenshots__/
+
+# System files
+.DS_Store
+Thumbs.db

UI/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "git.ignoreLimitWarning": true
-}

UI/README.md

@@ -1,6 +1,6 @@
-# FamilyTree
+# FamilyTreeUI
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.1.1.
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.0.2.
 
 ## Development server
 
@@ -38,7 +38,7 @@ This will compile your project and store the build artifacts in the `dist/` dire
 
 ## Running unit tests
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
 
 ```bash
 ng test

UI/angular.json

@@ -1,9 +1,13 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
+  "cli": {
+    "packageManager": "npm",
+    "analytics": false
+  },
   "newProjectRoot": "projects",
   "projects": {
-    "FamilyTree": {
+    "FamilyTreeUI": {
       "projectType": "application",
       "schematics": {},
       "root": "",
@@ -26,6 +30,7 @@
             ],
             "styles": [
               "src/styles.css"
+
             ]
           },
           "configurations": {
@@ -56,36 +61,18 @@
           "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
-              "buildTarget": "FamilyTree:build:production"
+              "buildTarget": "FamilyTreeUI:build:production"
             },
             "development": {
-              "buildTarget": "FamilyTree:build:development"
+              "buildTarget": "FamilyTreeUI:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
-        "extract-i18n": {
-          "builder": "@angular/build:extract-i18n"
-        },
         "test": {
-          "builder": "@angular/build:karma",
+          "builder": "@angular/build:unit-test"
-          "options": {
-            "tsConfig": "tsconfig.spec.json",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "public"
-              }
-            ],
-            "styles": [
-              "src/styles.css"
-            ]
-          }
         }
       }
     }
-  },
-  "cli": {
-    "analytics": false
   }
 }

UI/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "family-tree",
+  "name": "family-tree-ui",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -9,6 +9,8 @@
     "test": "ng test"
   },
   "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
     "overrides": [
       {
         "files": "*.html",
@@ -19,38 +21,34 @@
     ]
   },
   "private": true,
+  "packageManager": "npm@11.6.4",
   "dependencies": {
-    "@angular/common": "^20.1.7",
+    "@angular/common": "^21.0.0",
-    "@angular/compiler": "^20.1.7",
+    "@angular/compiler": "^21.0.0",
-    "@angular/core": "^20.1.7",
+    "@angular/core": "^21.0.0",
-    "@angular/forms": "^20.1.7",
+    "@angular/forms": "^21.0.0",
-    "@angular/platform-browser": "^20.1.7",
+    "@angular/platform-browser": "^21.0.0",
-    "@angular/router": "^20.1.7",
+    "@angular/router": "^21.0.0",
-    "@primeuix/themes": "^1.2.1",
+    "@primeuix/themes": "^2.0.2",
-    "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/postcss": "^4.1.17",
     "file-saver": "^2.0.5",
     "moment": "^2.30.1",
     "postcss": "^8.5.6",
     "primeicons": "^7.0.0",
-    "primeng": "^20.0.0",
+    "primeng": "^21.0.1",
     "rxjs": "~7.8.0",
-    "tailwindcss": "^4.1.11",
+    "tailwindcss": "^4.1.17",
     "tailwindcss-primeui": "^0.6.1",
     "tslib": "^2.3.0",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@angular/build": "^20.1.6",
+    "@angular/build": "^21.0.2",
-    "@angular/cli": "^20.1.6",
+    "@angular/cli": "^21.0.2",
-    "@angular/compiler-cli": "^20.1.7",
+    "@angular/compiler-cli": "^21.0.0",
     "@types/file-saver": "^2.0.7",
-    "@types/jasmine": "~5.1.0",
+    "jsdom": "^27.1.0",
-    "jasmine-core": "~5.8.0",
+    "typescript": "~5.9.2",
-    "karma": "~6.4.0",
+    "vitest": "^4.0.8"
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.8.2"
   }
 }

UI/src/app/app.config.ts

@@ -1,35 +1,11 @@
-import { ApplicationConfig, provideAppInitializer, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
-import { provideRouter, withComponentInputBinding } from '@angular/router';
+import { provideRouter } from '@angular/router';
-import { JwtInterceptor, ErrorInterceptor, initializeApp } from './shares';
+
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import { providePrimeNG } from 'primeng/config';
-import { provideHttpClient, withInterceptors } from '@angular/common/http';
-import { ConfirmationService, MessageService } from 'primeng/api';
 import { routes } from './app.routes';
-import MyPreset from './mythem';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
-    MessageService, ConfirmationService,
+    provideRouter(routes)
-     provideAppInitializer(initializeApp()),
-     provideHttpClient(withInterceptors([JwtInterceptor, ErrorInterceptor])),
-    provideZonelessChangeDetection(),
-     provideAnimationsAsync(),
-     providePrimeNG({
-            theme: {
-                preset: MyPreset,
-                options: {
-                  cssLayer: {
-                    name: 'primeng',
-                    order: 'theme, base, primeng'
-                }
-              }
-            }
-        }),
-    provideRouter(routes, withComponentInputBinding())
   ]
 };
-/*
-ng build --base-href "/familytreeui/" -c production
-*/

UI/src/app/app.ts

@@ -1,3 +1,4 @@
+
 import { Component, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { ToolbarComponent } from './toolbar/toolbar.component';

UI/src/app/mythem.ts

@@ -1,71 +0,0 @@
-
-
-//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}',
-            200: '{zinc.200}',
-            300: '{zinc.300}',
-            400: '{zinc.400}',
-            500: '{zinc.500}',
-            600: '{zinc.600}',
-            700: '{zinc.700}',
-            800: '{zinc.800}',
-            900: '{zinc.900}',
-            950: '{zinc.950}'
-        },
-            light: {
-                surface: {
-                    0: '#ffffff',
-                    50: '{zinc.50}',
-                    100: '{zinc.100}',
-                    200: '{zinc.200}',
-                    300: '{zinc.300}',
-                    400: '{zinc.400}',
-                    500: '{zinc.500}',
-                    600: '{zinc.600}',
-                    700: '{zinc.700}',
-                    800: '{zinc.800}',
-                    900: '{zinc.900}',
-                    950: '{zinc.950}'
-                }
-            },
-            dark: {
-                surface: {
-                    0: '#ffffff',
-                    50: '{slate.50}',
-                    100: '{slate.100}',
-                    200: '{slate.200}',
-                    300: '{slate.300}',
-                    400: '{slate.400}',
-                    500: '{slate.500}',
-                    600: '{slate.600}',
-                    700: '{slate.700}',
-                    800: '{slate.800}',
-                    900: '{slate.900}',
-                    950: '{slate.950}'
-                }
-            }
-        }
-    }
-});
-
-export default MyPreset;

UI/src/app/person/family.orga.ts

@@ -192,7 +192,8 @@ nodeDoubleSelect(event:TreeNodeDoubleClickEvent) : void {
       width: '80%',
       maximizable: true
     });
-    
+    if (ref)
+    {
     ref.onClose.subscribe((item: Person) => {
       if (item) {
         //console.log("after close ward edit", item);
@@ -201,7 +202,7 @@ nodeDoubleSelect(event:TreeNodeDoubleClickEvent) : void {
         this.updateList(item);
       }
       });
-
+    }
    }
    updateList(item: Person) :void {
     const idx = this.familyList.findIndex( x => x.id == item.id);

UI/src/app/person/family.tree.ts

@@ -166,7 +166,8 @@ nodeDoubleSelect(event:TreeNodeDoubleClickEvent) : void {
       width: '80%',
       maximizable: true
     });
-    
+    if (ref)
+    {
     ref.onClose.subscribe((item: Person) => {
       if (item) {
         //console.log("after close ward edit", item);
@@ -175,7 +176,7 @@ nodeDoubleSelect(event:TreeNodeDoubleClickEvent) : void {
         this.updateList(item);
       }
       });
-
+    }
    }
    updateList(item: Person) :void {
     const idx = this.familyList.findIndex( x => x.id == item.id);

UI/src/app/person/familylist.ts

@@ -282,15 +282,17 @@ export class FamilyList implements OnInit, OnDestroy{
       draggable: true,
       maximizable: true
     });
-    
+    if (ref)
-    ref.onClose.subscribe((item: Person) => {
+    {
-      if (item) {
+      ref.onClose.subscribe((item: Person) => {
-        //console.log("after close ward edit", item);
+        if (item) {
-     //   this.messageService.add({severity:'success', summary: 'Save Family', detail: item.firstName!});
+          //console.log("after close ward edit", item);
-       //update the current list
+        //   this.messageService.add({severity:'success', summary: 'Save Family', detail: item.firstName!});
-        this.updateList(item);
+        //update the current list
-      }
+          this.updateList(item);
-      });
+        }
+        });
+    }
    }
 
    showOrganise(id:number) {
@@ -304,7 +306,8 @@ export class FamilyList implements OnInit, OnDestroy{
       maximizable: true,
       closable: true
     });
-    
+    if (ref)
+    {
     ref.onClose.subscribe((item: Person) => {
       if (item) {
         //console.log("after close ward edit", item);
@@ -313,6 +316,7 @@ export class FamilyList implements OnInit, OnDestroy{
         //this.updateList(item);
       }
       });
+    }
    }
 
    updateList(item: Person) :void {

UI/src/app/person/person.edit.ts

@@ -316,15 +316,17 @@ doViewImage(imageName:string): void {
 	  modal:true,
       maximizable: true
     });
-    
+    if (ref)
-    ref.onClose.subscribe((item: Person) => {
+	{
-      if (item) {
+    	ref.onClose.subscribe((item: Person) => {
-        //console.log("after close ward edit", item);
+      	if (item) {
-        this.messageService.add({severity:'success', summary: 'Select', detail: item.firstName!});
+        	//console.log("after close ward edit", item);
-       //update the current list
+        	this.messageService.add({severity:'success', summary: 'Select', detail: item.firstName!});
+       	//update the current list
         
-      }
+      	}
-      });
+      	});
+	}
 }
 
 assignValue(item:Person): void {
@@ -628,7 +630,8 @@ showPickPerson(title:string, callback:(id: Person) => void) :void {
 	  draggable: true,
       maximizable: true
     });
-    
+   if (ref)
+	{ 
     ref.onClose.subscribe((item: Person) => {
       if (item) {
         //console.log("after close ward edit", item);
@@ -637,6 +640,7 @@ showPickPerson(title:string, callback:(id: Person) => void) :void {
         callback(item);
       }
       });
+	}
 }
 
 showAttachment(title:string): void {
@@ -650,7 +654,8 @@ showAttachment(title:string): void {
 	  draggable: true,
       maximizable: true
     });
-    
+   if (ref)
+	{ 
     ref.onClose.subscribe((ritem: any) => {
 	 const item = ritem.list;
 	 const deleteIds = ritem.deleteIds;
@@ -682,6 +687,7 @@ showAttachment(title:string): void {
 	  }
 
 	 });
+    }
 }
 
 updatePhotoList(list: PersonPhotoDto[]): void {

UI/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>FamilyTree</title>
+  <title>FamilyTreeUI</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

UI/tsconfig.json

@@ -19,7 +19,6 @@
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "typeCheckHostBindings": true,
     "strictTemplates": true
   },
   "files": [],

UI/tsconfig.spec.json

@@ -5,10 +5,11 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine"
+      "vitest/globals"
     ]
   },
   "include": [
-    "src/**/*.ts"
+    "src/**/*.d.ts",
+    "src/**/*.spec.ts"
   ]
 }