put in new function call

Co-authored-by: and logout too

.gitignore

@@ -1,75 +1,75 @@
-# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
-# User-specific files
-*.rsuser
-*.suo
-*.user
-*.userosscache
-*.sln.docstates
-
-# User-specific files (MonoDevelop/Xamarin Studio)
-*.userprefs
-
-# Mono auto generated files
-mono_crash.*
-
-# Build results
-[Dd]ebug/
-[Dd]ebugPublic/
-[Rr]elease/
-[Rr]eleases/
-myZip/
-x64/
-x86/
-[Ww][Ii][Nn]32/
-[Aa][Rr][Mm]/
-[Aa][Rr][Mm]64/
-bld/
-[Bb]in/
-[Oo]bj/
-[Oo]ut/
-[Ll]og/
-[Ll]ogs/
-# Compiled output
-dist/
-bin/
-obj/
-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/*
-.vs/
-!.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
-
-# System files
-.DS_Store
-Thumbs.db
-/API/FamilyTreeAPI/uploads
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+# User-specific files
+*.rsuser
+*.suo
+*.user
+*.userosscache
+*.sln.docstates
+
+# User-specific files (MonoDevelop/Xamarin Studio)
+*.userprefs
+
+# Mono auto generated files
+mono_crash.*
+
+# Build results
+[Dd]ebug/
+[Dd]ebugPublic/
+[Rr]elease/
+[Rr]eleases/
+myZip/
+x64/
+x86/
+[Ww][Ii][Nn]32/
+[Aa][Rr][Mm]/
+[Aa][Rr][Mm]64/
+bld/
+[Bb]in/
+[Oo]bj/
+[Oo]ut/
+[Ll]og/
+[Ll]ogs/
+# Compiled output
+dist/
+bin/
+obj/
+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/*
+.vs/
+!.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
+
+# System files
+.DS_Store
+Thumbs.db
+/API/FamilyTreeAPI/uploads

API/.vscode/launch.json

@@ -0,0 +1,54 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+
+
+        {
+            "name": "C#: FamilyTreeAPI",
+            "type": "coreclr",
+            "request": "launch",
+            "preLaunchTask": "build",
+            "program": "${workspaceFolder}/FamilyTreeAPI/bin/Debug/net10.0/FamilyTreeAPI.dll",
+            "args": [],
+            "cwd": "${workspaceFolder}",
+            "stopAtEntry": false,
+            "console": "internalConsole",
+            
+            "env": {
+                "ASPNETCORE_ENVIRONMENT": "Development",
+                "ASPNETCORE_URLS": "http://localhost:5019"
+            },
+             "serverReadyAction": {
+                "action": "openExternally",
+                "pattern": "\\bNow listening on:\\s+(https?://\\S+)",
+                "uriFormat": "%s/swagger/index.html"
+            },
+           
+            "sourceFileMap": {
+                "/Views": "${workspaceFolder}/Views"
+            },
+            
+},
+{
+            "name": ".NET Core Launch (web) - Release",
+            "type": "coreclr",
+            "request": "launch",
+            "preLaunchTask": "publish",
+            "program": "${workspaceFolder}/FamilyTreeAPI/bin/Release/net10.0/linux-x64/FamilyTreeAPI.dll",
+            "serverReadyAction": {
+                "action": "openExternally",
+                "pattern": "listening on:\\s+(https?://\\S+)",
+                "uriFormat": "%s/swagger/index.html"
+            },
+            "env": {
+                "ASPNETCORE_ENVIRONMENT": "Production",
+                "ASPNETCORE_URLS": "https://localhost:5019"
+            },
+            "cwd": "${workspaceFolder}"
+        }
+
+            
+        
+         
+    ]
+}

API/.vscode/tasks.json

@@ -0,0 +1,31 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+        {
+            "label": "build",
+            "command": "dotnet",
+            "type": "shell",
+            "args": [
+                "build",
+                "${workspaceFolder}/FamilyTreeAPI/FamilyTreeAPI.csproj",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+          {
+            "label": "publish",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "publish",
+                "${workspaceFolder}/FamilyTreeAPI/FamilyTreeAPI.csproj",
+                "-c",
+                "Release"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+
+       
+    ]
+}

API/FamilyTreeAPI.sln

@@ -1,5 +1,4 @@
-
-Microsoft Visual Studio Solution File, Format Version 12.00
+Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 17
 VisualStudioVersion = 17.7.34202.233
 MinimumVisualStudioVersion = 10.0.40219.1

API/FamilyTreeAPI/Controllers/FileUploadController.cs

@@ -3,6 +3,7 @@ using FamilyTreeAPI.Repository;
 
 namespace FamilyTreeAPI.Controllers;
 
+using DocumentFormat.OpenXml.Drawing.Charts;
 using FamilyTreeAPI.Interface;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.Extensions.Primitives;
@@ -110,14 +111,44 @@ public class FileUploadController : ControllerBase
         return Ok(ret);
     }
 
-     
+    [HttpPost("[action]")]
+    public async Task<IActionResult> DownloadPersonPhotoById(DeleteCriteria<int> criteria)
+    {
+
+        var result = await _personPhoto.DownloadPersonPhotoById(criteria.Id);
+        if (result.StatusCode > 0)
+            return File(result.Data.Content, result.Data.ContentType, result.Data.FileName);
+        else
+            return NotFound("not found image");
+    }  
     [HttpPost("[action]")]
     public async Task<IActionResult> DownloadPersonPhoto(DownloadFileCriteria criteria)
     {
 
-        var result = await _personPhoto.DownloadPersonPhoto(criteria.Id, criteria.FileName);
+        var result = await _personPhoto.DownloadPersonPhotoPerson(criteria.Id,criteria.PhotoType ,criteria.FileName);
+        if (result.StatusCode > 0)
+            return File(result.Data.Content, result.Data.ContentType, result.Data.FileName);
+        else
+            return NotFound("not found image");
+    }
+    [HttpPost("[action]")]
+    public async Task<IActionResult> DownloadPersonPhoto64(DownloadFileCriteria criteria)
+    {
 
-        return File(result.Data.Content, result.Data.ContentType, result.Data.FileName);
+        var result = await _personPhoto.DownloadPersonPhotoPerson(criteria.Id,criteria.PhotoType ,criteria.FileName);
+        if (result.StatusCode > 0)
+        {
+            byte[] file64 = result.Data.Content;
+            string rval = Convert.ToBase64String(file64);
+            ResultModel<string> retval = new() {
+                Data = rval,
+                StatusCode = 1,
+                Message = ""
+            };
+            return Ok(retval);
+          }
+        else
+            return NotFound("not found image");
     }
     [HttpPost("[action]")]
     public async Task<ActionResult> DeletePersonPhoto(DeleteFileCriteria criteria)
@@ -127,8 +158,18 @@ public class FileUploadController : ControllerBase
         if ( criteria.Id > 0)
         {
 
-            ret = await _personPhoto.DeletePersonPhoto(criteria.Id);
+            ret = await _personPhoto.DeletePersonPhoto(criteria.Id, criteria.PhotoType);
         }
         return Ok(ret);
     }
+    [HttpPost("[action]")]
+    public async Task<ActionResult> DeletePersonPhotoById(DeleteCriteria<int> criteria)
+    {
+
+        ResultModel<int> ret = new();
+    
+        ret = await _personPhoto.DeletePersonPhotoById(criteria.Id);
+        
+        return Ok(ret);
+    }
 }

API/FamilyTreeAPI/Controllers/PersonController.cs

@@ -14,6 +14,7 @@ namespace FamilyTreeAPI.Controllers
         {
             _repo = repo;
         }
+        
         [HttpPost("[action]")]
         public async Task<IActionResult> UploadImage(IFormFile file)
         {

API/FamilyTreeAPI/Controllers/UsersController.cs

@@ -37,8 +37,25 @@ public class UsersController : ControllerBase
     public async Task<IActionResult> LoginApiAD([FromBody] AuthenticateRequest model)
     {
         string remoteIpAddress = HttpContext.Connection.RemoteIpAddress?.ToString();
-        var response = await _userService.LoginApiAD(model, remoteIpAddress);
-        return Ok(response);
+                    var rval = await _userService.LoginApiAD(model, remoteIpAddress);
+          if (rval.Data  != null && rval.Data.Token != null)
+            {
+                // Configure cookie options
+
+                var cookieOptions = new CookieOptions
+                {
+                    HttpOnly = true,                  // Blocks client-side JavaScript reading/theft
+                    Secure = false,                    // Requires HTTPS connections
+                    SameSite = SameSiteMode.Unspecified,   // Prevents CSRF attacks
+                    Expires = DateTimeOffset.UtcNow.AddDays(1), // Match your token lifespan
+                    Path = "/"                        // Accessible across entire domain structure
+                };
+
+                // Write cookie into response headers
+                Response.Cookies.Append("token", rval.Data.Token, cookieOptions);
+            }
+            return Ok(rval);
+
     }
 
     [HttpPost("[action]")]
@@ -51,6 +68,14 @@ public class UsersController : ControllerBase
         string token = Request.Headers["Authorization"].FirstOrDefault()?.Split(" ").Last();
         string remoteIpAddress = Request.HttpContext.Connection.RemoteIpAddress.ToString();
         var response = await _userService.Logout(token, currentUser, remoteIpAddress);
+          Response.Cookies.Delete("token", new CookieOptions
+            {
+                HttpOnly = true,
+                Secure = false,
+                SameSite = SameSiteMode.Unspecified,
+                    Path = "/"
+            });
+
         return Ok(response);
     }
 

API/FamilyTreeAPI/Dockerfile

@@ -3,7 +3,7 @@
 # This stage is used when running from VS in fast mode (Default for Debug configuration)
 #FROM mcr.microsoft.com/dotnet/aspnet:9::.0 AS base
 ARG BUILD_CONFIGURATION=Release
-FROM mcr.microsoft.com/dotnet/sdk:9.0 AS build
+FROM mcr.microsoft.com/dotnet/sdk:10.0 AS build
 WORKDIR /src
 COPY ["FamilyTreeAPI/FamilyTreeAPI.csproj", "FamilyTreeAPI/"]
 RUN dotnet restore "./FamilyTreeAPI/FamilyTreeAPI.csproj"
@@ -31,7 +31,7 @@ FROM build AS publish
 RUN dotnet publish "./FamilyTreeAPI.csproj" -c Release -o /app/publish /p:UseAppHost=false
 
 # This stage is used in production or when running from VS in regular mode (Default when not using the Debug configuration)
-FROM mcr.microsoft.com/dotnet/aspnet:9.0 AS base
+FROM mcr.microsoft.com/dotnet/aspnet:10.0 AS base
 WORKDIR /app
 ENV ASPNETCORE_HTTP_PORTS=8080
 EXPOSE 8080

API/FamilyTreeAPI/Entities/FileContent.cs

@@ -15,16 +15,19 @@ public class DownloadFileCriteria
 {
     public string FileName { get; set; }
     public int Id { get; set; }
+
+    public int PhotoType {get; set;}
 }
 public class UploadCriteria
 {
     public string FileName { get; set; }
     public int PersonId { get; set; }
-  
+    public int PhotoType {get; set;}
     public IFormFile File { get; set; }
 }
 public class DeleteFileCriteria
 {
     public int Id { get; set; }
     public string Filename { get; set; }
+     public int PhotoType {get; set;}
 }

API/FamilyTreeAPI/Entities/PersonPhotoDto.cs

@@ -1,5 +1,12 @@
 namespace FamilyTreeAPI.Entities;
 
+
+//photo Type string number
+public enum enumPhotoType
+{
+    Profile = 1,
+    Other = 2
+}
 public class PersonPhotoDto
 {
     public int Id { get; set; }

API/FamilyTreeAPI/FamilyTreeAPI.csproj

@@ -1,5 +1,4 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
-
   <PropertyGroup>
     <TargetFramework>net10.0</TargetFramework>
     <Nullable>enable</Nullable>
@@ -7,28 +6,36 @@
     <DockerDefaultTargetOS>Linux</DockerDefaultTargetOS>
 	<PublishSingleFile>true</PublishSingleFile>
     <DockerComposeProjectPath>..\docker-compose.dcproj</DockerComposeProjectPath>
+    <AllowMissingPrunePackageData>true</AllowMissingPrunePackageData>
   </PropertyGroup>
 
-
-
   <ItemGroup>
-    <PackageReference Include="HotChocolate.AspNetCore" Version="16.0.0" />
-    <PackageReference Include="HotChocolate.Data.EntityFramework" Version="16.0.0" />
+    <PackageReference Include="HotChocolate.AspNetCore" Version="16.6.1" />
+    <PackageReference Include="HotChocolate.Data.EntityFramework" Version="16.6.1" />
     <PackageReference Include="HotChocolate.Pagination.EntityFramework" Version="14.3.1" />
-    <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="10.0.7" />
-    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="10.0.7" />
-    <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="10.0.7">
+    <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="10.0.11" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="10.0.11" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="10.0.11">
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
       <PrivateAssets>all</PrivateAssets>
     </PackageReference>
-    <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="10.0.7">
+    <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="10.0.11">
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
     <PackageReference Include="Microsoft.VisualStudio.Azure.Containers.Tools.Targets" Version="1.23.0" />
-    <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="10.0.1" />
+    <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="10.0.3" />
     <PackageReference Include="SpreadsheetLight" Version="3.5.0" />
-    <PackageReference Include="Swashbuckle.AspNetCore" Version="10.1.7" />
+    <PackageReference Include="Swashbuckle.AspNetCore" Version="10.2.3" />
+    <PackageReference Include="System.Drawing.Common" Version="10.0.11" />
   </ItemGroup>
 
+<ItemGroup>
+  <Content Update="appsettings.json">
+    <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+  </Content>
+  <Content Update="appsettings.Development.json">
+    <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+  </Content>
+</ItemGroup>
 </Project>

API/FamilyTreeAPI/Helper/Helpers.cs

@@ -2,6 +2,12 @@
 {
     public class Helpers
     {
+        public static string GetFileExtension(string fileName)
+        {
+            string result = System.IO.Path.GetExtension(fileName);
+
+            return result;
+        }
         public static string GetFileContent(string extension)
         {
             string contentType = "";
@@ -82,7 +88,7 @@
             if (date.HasValue)
             {
                 result = date.Value.ToString("yyyy-MM-dd");
-            }
+            }    
             return result;
         }
         public static DateTime? DateToDateTime(string? date)

API/FamilyTreeAPI/Interface/IPersonPhoto.cs

@@ -5,8 +5,9 @@ namespace FamilyTreeAPI.Interface;
 public interface IPersonPhoto
 {
     Task<ResultModel<int>> SaveAsync(UploadCriteria criteria);
-    Task<ResultModel<FileContent>> DownloadPersonPhoto(int id, string? filename);
-
-    Task<ResultModel<int>> DeletePersonPhoto(int id);
+    Task<ResultModel<FileContent>> DownloadPersonPhotoPerson(int personId, int photoType, string filename);
+ Task<ResultModel<FileContent>> DownloadPersonPhotoById(int id);
+    Task<ResultModel<int>> DeletePersonPhoto(int id, int photoType);
+     Task<ResultModel<int>> DeletePersonPhotoById(int id);
     Task<ResultModel<List<PersonPhotoDto>>> LoadPersonPhoto(int personId);
 }

API/FamilyTreeAPI/Program.cs

@@ -4,7 +4,6 @@ using Microsoft.EntityFrameworkCore.Infrastructure;
 using Microsoft.EntityFrameworkCore.Storage;
 using Microsoft.IdentityModel.Tokens;
 using System.Text;
-using DocumentFormat.OpenXml.Office2010.Drawing.Charts;
 using FamilyTreeAPI.Authorization;
 using FamilyTreeAPI.Entities;
 using FamilyTreeAPI.GraphQL.Query;
@@ -14,6 +13,15 @@ using FamilyTreeAPI.Repository;
 
 var builder = WebApplication.CreateBuilder(args);
 
+builder.Logging.ClearProviders();
+builder.Logging.AddConsole();
+builder.Logging.AddDebug();
+// Explicitly register the base paths for Linux container execution
+builder.Configuration
+    .SetBasePath(AppContext.BaseDirectory) // <-- Pulls from wherever the binary sits
+    .AddJsonFile("appsettings.json", optional: false, reloadOnChange: true)
+    .AddJsonFile($"appsettings.{builder.Environment.EnvironmentName}.json", optional: true, reloadOnChange: true)
+    .AddEnvironmentVariables();
 // Add services to the container.
 #region Services
 var services = builder.Services;
@@ -22,19 +30,25 @@ services.AddControllers();
 // Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
 services.AddEndpointsApiExplorer();
 services.AddSwaggerGen();
+string skey = "Super Secret SIGN AND VERIFY JWT TOKENS";
 
+           
 var appSettingsSection = builder.Configuration.GetSection("AppSettings");
-string skey = "";
-if (appSettingsSection == null)
-{
-    skey = builder.Configuration.GetValue<string>("AppSettings:SecretKey");
-}
-else
+if (appSettingsSection.Exists())
 {
     services.Configure<AppSettings>(appSettingsSection);
     var appSettings = appSettingsSection.Get<AppSettings>();
-    skey = appSettings.Secret;
+    if ( appSettings != null)
+        skey = appSettings.Secret;
+    else
+    {
+      string  tkey = builder.Configuration.GetValue<string>("AppSettings:Secret") ?? string.Empty;
+      if (!string.IsNullOrEmpty(tkey))
+            skey = tkey;
+    }
 }
+
+
 var key = Encoding.ASCII.GetBytes(skey);
 
 services.AddAuthentication(x =>
@@ -122,7 +136,16 @@ using (var scope = app.Services.CreateScope())
                     //if (!databaseCreator.Exists())
                     try
                     {
-                        databaseCreator.CreateTables();
+                        // Check if database exists
+                        if (!databaseCreator.Exists()) 
+                        {
+                            databaseCreator.Create();
+                        }
+                        
+                        if (!databaseCreator.HasTables())
+                        {
+                            databaseCreator.CreateTables();
+                        }
                     }
                     catch 
                     {
@@ -164,6 +187,17 @@ app.Run();
 #endregion
 
 /*
+
+<ItemGroup>
+  <Content Update="appsettings.json">
+    <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+  </Content>
+  <Content Update="appsettings.Development.json">
+    <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+  </Content>
+</ItemGroup>
+</Project>
+
  https://www.youtube.com/watch?v=WQFx2m5Ub9M
 
 
@@ -179,14 +213,43 @@ PM> Scaffold-DbContext "Host=postgresdb;Port=5432;database=FamilyTreeDB;user id=
 https://www.youtube.com/watch?v=HnXA8RI7Tvc
 
 query {
-  family {
+  persons {
         nodes{
         id
-        firstname
-        lastname
+        firstName
+        sex
         email
         
         }
     }
   }
-*/
+
+  dotnet --list-sdks
+
+In the VS Code Explorer, click and open your <ProjectName>.csproj file.
+Locate the <TargetFramework> tag inside the <PropertyGroup> block.
+Change the value to your desired version (e.g., change net11.0 or net9.0 to net10.0
+
+now run to see out of date
+
+dotnet list package --outdated
+
+dotnet tool uninstall --global dotnet-outdated
+dotnet tool install --global dotnet-outdated-tool
+
+//update the outdate
+dotnet outdated -u
+
+update the package
+dotnet add package <Package_Name>
+
+Open the .vscode folder in your workspace and select launch.json.
+Look for lines containing your old framework directory string (e.g., /bin/Debug/net8.0/).
+Update those paths to reflect your new version (e.g., /bin/Debug/net9.0/).
+
+clear and rebuild 
+
+dotnet clean
+dotnet restore
+dotnet build
+*/

API/FamilyTreeAPI/Properties/launchSettings.json

@@ -8,35 +8,17 @@
         "ASPNETCORE_ENVIRONMENT": "Development"
       },
       "dotnetRunMessages": true,
-      "applicationUrl": "http://localhost:5016",
-      "applicationUrl1": "http://192.168.8.188:5015"
+      "applicationUrl": "http://localhost:5016"
+     
     },
-    "IIS Express": {
-      "commandName": "IISExpress",
+    "http": {
+      "commandName": "Project",
       "launchBrowser": true,
       "launchUrl": "swagger",
-      "environmentVariables": {
-        "ASPNETCORE_ENVIRONMENT": "Development"
-      }
+      "applicationUrl": "http://localhost:5000"
     },
-    "Container (Dockerfile)": {
-      "commandName": "Docker",
-      "launchBrowser": true,
-      "launchUrl": "{Scheme}://{ServiceHost}:{ServicePort}/swagger",
-      "environmentVariables": {
-        "ASPNETCORE_HTTP_PORTS": "8080"
-      },
-      "publishAllPorts": true,
-      "useSSL": false
-    }
-  },
+   
   "$schema": "https://json.schemastore.org/launchsettings.json",
-  "iisSettings": {
-    "windowsAuthentication": false,
-    "anonymousAuthentication": true,
-    "iisExpress": {
-      "applicationUrl": "http://localhost:4559",
-      "sslPort": 0
-    }
+  
   }
 }

API/FamilyTreeAPI/Repository/PersonPhotoRepository.cs

@@ -3,6 +3,7 @@ using FamilyTreeAPI.Entities;
 using FamilyTreeAPI.Helper;
 using FamilyTreeAPI.Interface;
 using FamilyTreeAPI.Models;
+using HotChocolate.CostAnalysis.Types;
 using Microsoft.EntityFrameworkCore;
 
 namespace FamilyTreeAPI.Repository
@@ -31,12 +32,12 @@ namespace FamilyTreeAPI.Repository
             dto.PhotoType = model.PhotoType;
             return dto;
         }
-        private PersonPhoto FillModel(PersonPhoto model, int personId, string filename)
+        private PersonPhoto FillModel(PersonPhoto model, int personId, int photoType, string filename)
         {
 
             model.PersonId = personId;
             model.Photo = filename;
-            model.PhotoType = System.IO.Path.GetExtension(filename);
+            model.PhotoType = photoType.ToString(); //System.IO.Path.GetExtension(filename);
 
             return model;
         }
@@ -44,8 +45,10 @@ namespace FamilyTreeAPI.Repository
         {
             int result = default(int);
             int statuscode = 0;
-            string error = "";
-
+            string error = "";//Other
+            string photoType = "2"; //
+            if (criteria.PhotoType > 0)
+                photoType = criteria.PhotoType.ToString();
             HttpContext? httpContext = _httpContext.HttpContext;
             string loginName = "";
             if (httpContext != null)
@@ -63,7 +66,7 @@ namespace FamilyTreeAPI.Repository
             
                     model = new();
                     
-                    model = FillModel(model,criteria.PersonId, formfile.FileName);
+                    model = FillModel(model,criteria.PersonId, criteria.PhotoType,formfile.FileName);
                    
                     using (var stream = new MemoryStream())
                     {
@@ -90,15 +93,50 @@ namespace FamilyTreeAPI.Repository
                 Message = error
             };
         }
-
-        public async Task<ResultModel<FileContent>> DownloadPersonPhoto(int id, string? filename)
+        public async Task<ResultModel<FileContent>> DownloadPersonPhotoById(int Id)
         {
 
             int statusCode = -1;
             string error = "";
+            string extension = "";
             PersonPhoto? model = null;
             FileContent fileContent = new();
-            if (id < 1)
+            try {
+            
+                model = await _context.PersonPhotos.FindAsync(Id);
+                
+
+            if (model != null)
+            {
+                extension = Helpers.GetFileExtension(model.Photo);
+                fileContent.ContentType = Helpers.GetFileContent(extension);
+                fileContent.Content = (byte[])model.ImagePhoto;
+                fileContent.FileName = model.Photo;
+                statusCode = 1;
+            }
+            }
+            catch (Exception e)
+            {
+                error = e.ToString();
+                statusCode = -1;
+            }
+            return new ResultModel<FileContent>()
+            {
+                Data = fileContent,
+                StatusCode = statusCode,
+                Message = error
+            };
+        }
+
+        public async Task<ResultModel<FileContent>> DownloadPersonPhotoPerson(int personId, int photoType, string filename)
+        {
+
+            int statusCode = -1;
+            string error = "";
+            string extension = "";
+            PersonPhoto? model = null;
+            FileContent fileContent = new();
+            if (personId < 1)
             {
                 var rlist = await _context.PersonPhotos.Where(x => x.Photo == filename).ToListAsync();
                 if (rlist != null)
@@ -109,19 +147,26 @@ namespace FamilyTreeAPI.Repository
                     }
                 }
             }
+                 
             else
             {
-                model = await _context.PersonPhotos.FindAsync(id);
-            }
+                var rlist = await _context.PersonPhotos.Where (x => x.PersonId == personId && photoType.ToString() == x.PhotoType).ToListAsync();
+                for ( int i = 0; i < rlist.Count; i++)
+                {
+                    model = rlist[i];
+                   
+                    break;
+                }
+            }  
 
             if (model != null)
             {
-                fileContent.ContentType = Helpers.GetFileContent(model.PhotoType);
+                extension = Helpers.GetFileExtension(model.Photo);
+                fileContent.ContentType = Helpers.GetFileContent(extension);
                 fileContent.Content = (byte[])model.ImagePhoto;
                 fileContent.FileName = model.Photo;
                 statusCode = 1;
             }
-
             return new ResultModel<FileContent>()
             {
                 Data = fileContent,
@@ -130,20 +175,69 @@ namespace FamilyTreeAPI.Repository
             };
         }
 
-        public async Task<ResultModel<int>> DeletePersonPhoto(int id)
+        public async Task<ResultModel<int>> DeletePersonPhoto(int personId, int photoType)
         {
             int result = default(int);
             int statuscode = 0;
             string error = "";
+            PersonPhoto? model;
             try
             {
-                PersonPhoto? model = await _context.PersonPhotos.FindAsync(id);
-                if (model != null)
+                if (photoType < 1)
                 {
-                    _context.PersonPhotos.Remove(model);
-                    await _context.SaveChangesAsync();
-                    statuscode = 1;
+                    List<PersonPhoto> list = await _context.PersonPhotos.Where ( x => x.PersonId == personId).ToListAsync();
+                    for (int i = 0; i< list.Count; i++)
+                    {
+                        model = list[i];
+                        _context.PersonPhotos.Remove(model);
+                        await _context.SaveChangesAsync();
+                        statuscode = 1;
+                    }
                 }
+                else 
+                {
+                    List<PersonPhoto> list = await _context.PersonPhotos.Where ( x => x.PersonId == personId && x.PhotoType == photoType.ToString()).ToListAsync();
+                    for (int i = 0; i< list.Count; i++)
+                    {
+                        model = list[i];
+                        _context.PersonPhotos.Remove(model);
+                        await _context.SaveChangesAsync();
+                        statuscode = 1;
+                    }
+                }
+            }
+            catch (Exception ex)
+            {
+                error = ex.ToString();
+                statuscode = -1;
+            }
+            //var dto = await Task.Run(() => result);
+            return new ResultModel<int>()
+            {
+                Data = result,
+                StatusCode = statuscode,
+                Message = error
+            };
+        }
+
+         public async Task<ResultModel<int>> DeletePersonPhotoById(int id)
+        {
+            int result = default(int);
+            int statuscode = 0;
+            string error = "";
+        
+            try
+            {
+                
+                    PersonPhoto? model = await _context.PersonPhotos.FindAsync(id);
+                    if (model != null)
+                    {
+                        
+                        _context.PersonPhotos.Remove(model);
+                        await _context.SaveChangesAsync();
+                        statuscode = 1;
+                    }
+                
             }
             catch (Exception ex)
             {

API/FamilyTreeAPI/Repository/PersonRepository.cs

@@ -283,7 +283,7 @@ public partial class PersonRepository : IPerson
                 node.Key = item.Id.ToString();
                 node.Type = type;
                 if (item.Image != null)
-                    node.Data.Image = await LoadPersonImage(item.Image);
+                    node.Data.Image = await LoadPersonImage(item.Id, (int) enumPhotoType.Profile, item.Image);
                
                 node.Icon = "T";  
                 node.StyleClass = getStyleClass(node.Icon);
@@ -319,8 +319,8 @@ public partial class PersonRepository : IPerson
         TreeNode<TreeData> child;
         PersonDto dto;
         Person pe;
-        int fatherId, motherId;
-        fatherId = motherId = 0;
+        int fatherId, motherId, personId;
+        personId = fatherId = motherId = 0;
         string data = person.Sex;
         TreeNode<TreeData> citem;
         string pName = "";
@@ -371,6 +371,7 @@ public partial class PersonRepository : IPerson
                         pName = pe.FirstName;
                         image = pe.Image;
                         key = motherId.ToString();
+                        personId = motherId;
                         data = pe.Sex;
                     }
                 }
@@ -382,6 +383,7 @@ public partial class PersonRepository : IPerson
                         pName = pe.FirstName;
                         image = pe.Image;
                         key = fatherId.ToString();
+                        personId = fatherId;
                         data = pe.Sex;
                     }
                 }
@@ -390,7 +392,7 @@ public partial class PersonRepository : IPerson
                 citem.Data = new();
                 citem.Label = pName;
                 if (image != null)
-                    citem.Data.Image = await LoadPersonImage(image);
+                    citem.Data.Image = await LoadPersonImage(personId, (int) enumPhotoType.Profile, image);
                
                citem.Icon = "P";    
                
@@ -411,7 +413,7 @@ public partial class PersonRepository : IPerson
                     child.Type = type;
                     image = dto.Image;
                     if (image != null)
-                        child.Data.Image = await LoadPersonImage(image);
+                        child.Data.Image = await LoadPersonImage(dto.Id,(int) enumPhotoType.Profile, image);
                     child.Icon = "C";
                     child.StyleClass = getStyleClass(child.Icon);
                     child.Label = dto.FirstName;
@@ -480,12 +482,12 @@ public partial class PersonRepository : IPerson
     /// <param name="fileName"></param>
     /// <param name="familyId"></param>
     /// <param name="base64"></param>
-    private string SaveFile(string fileName, int familyId, string base64)
+    private async Task<string> SaveFile(string fileName, int personId, string base64)
     {
         string path = "";
 
         int statusCode = 0;
-        string error = "";
+      // string error = "";
         string sdate = GetCurrentDateTime();
         string filename, extention;
         filename = extention = "";
@@ -494,14 +496,33 @@ public partial class PersonRepository : IPerson
         string rbase = base64.Substring(first, last - first);
 
         byte[] newBytes = Convert.FromBase64String(rbase);
+        extention = System.IO.Path.GetExtension(fileName);
+        filename = personId + "_" + sdate + extention;
+
+        // Wrap the byte array in a MemoryStream
+        var stream = new MemoryStream(newBytes);
+
+        // Create the IFormFile instance
+        IFormFile file = new FormFile(stream, 0, newBytes.Length, "Profile", filename)
+        {
+            Headers = new HeaderDictionary(),
+            ContentType = "application/octet-stream" // Change to your specific MIME type if known (e.g., "image/jpeg", "application/pdf")
+        };
+        //save to database.
+        UploadCriteria criteria = new();
+        criteria.FileName = filename;
+        criteria.PersonId = personId;
+        criteria.PhotoType = (int) enumPhotoType.Profile;
+        criteria.File = file;
+        var rval = await _personPhoto.SaveAsync(criteria);
+
+       /*
         path = _config["AppSettings:ImageFolder"];
         if (!Directory.Exists(path))
         {
             Directory.CreateDirectory(path);
         }
-
-        extention = System.IO.Path.GetExtension(fileName);
-        filename = familyId + "_" + sdate + extention;
+        
         string fullpath = System.IO.Path.Combine(path, filename);
         /*
          using (var fileStream = new FileStream(fullpath, FileMode.Create))
@@ -520,10 +541,12 @@ public partial class PersonRepository : IPerson
 
         }
         */
+        /*
         using (FileStream fileStream = new FileStream(fullpath, FileMode.Create, FileAccess.Write, FileShare.None))
         {
             fileStream.Write(newBytes, 0, newBytes.Length);
         }
+        */
 
         return filename;
     }
@@ -538,7 +561,7 @@ public partial class PersonRepository : IPerson
         string loginName = "";
         if (httpContext != null)
         {
-            UserDto? user = (UserDto?)httpContext.Items["User"];
+        UserDto? user = (UserDto?)httpContext.Items["User"];
             if (user != null)
                 loginName = user.FirstName + " " + user.LastName;
         }
@@ -571,7 +594,7 @@ public partial class PersonRepository : IPerson
                 if (!string.IsNullOrEmpty(container.FileName))
                 {
 
-                    string image = SaveFile(container.FileName, result, container.FormData);
+                    string image = await SaveFile(container.FileName, result, container.FormData);
                     // update the image in table to new 
                     model.Image = image;
                     await _context.SaveChangesAsync();
@@ -587,7 +610,7 @@ public partial class PersonRepository : IPerson
                     result = item.Id;
                     if (!string.IsNullOrEmpty(container.FileName))
                     {
-                        string image = SaveFile(container.FileName, result, container.FormData);
+                        string image = await SaveFile(container.FileName, result, container.FormData);
                         // update the image in table to new 
                         model1.Image = image;
                     }
@@ -714,17 +737,37 @@ public partial class PersonRepository : IPerson
         };
     }
 
-    private async Task<string> LoadPersonImage(string filename)
+    private async Task<string> LoadPersonImage_old(string filename)
     {
         string result = "";
 
         DownloadFileCriteria criteria = new() { FileName = filename };
         var resultModel = await _importPersonRepository.DownloadFile(criteria);
-        if (!string.IsNullOrEmpty((resultModel.Data)))
+        
+        
+        if (!string.IsNullOrEmpty(resultModel.Data))
             result = "data:image/png;base64," + resultModel.Data;
         return result;
     }
 
+    private async Task<string> LoadPersonImage(int personId, int photoType, string filename)
+    {
+        string result = "";
+
+      //  DownloadFileCriteria criteria = new() { FileName = filename };
+       
+        var resultModel = await _personPhoto.DownloadPersonPhotoPerson(personId, photoType , filename);
+        if (resultModel.StatusCode > 0)
+        {
+        
+        string base64String = Convert.ToBase64String(resultModel.Data.Content);
+        
+            if (!string.IsNullOrEmpty(base64String))
+                result = "data:image/png;base64," + base64String;
+        }
+        return result;
+    }
+
     public ResultModel<int> DeleteUploadFile(DeleteFileCriteria criteria)
     {
         int result = -1;

API/FamilyTreeAPI/Repository/Seed.cs

@@ -66,7 +66,6 @@ public class Seed
                 var conn = _context.Database.GetDbConnection();
                 try
                 {
-
                     conn.Open();
                     var command = conn.CreateCommand();
                     command.CommandText = sptext;

API/FamilyTreeAPI/appsettings.json

@@ -1,12 +1,12 @@
 {
 
   "AppSettings": {
-    "Secret": "Nepean Blue Mountain Super Secret SIGN AND VERIFY JWT TOKENS, BEARER TOKEN USE WHEN CALLING THIS API.",
-    "SQLConnectionString": "host=localhost;port=5432;database=FamilyTreeDB;username=postgres;password=Positive~1;",
-    "SQLConnectionString_vm": "host=192.168.1.240;port=5432;database=FamilyTreeDB;username=postgres;password=Positive~1;",
+    "Secret": "Super Secret SIGN AND VERIFY JWT TOKENS, BEARER TOKEN USE WHEN CALLING THIS API.",
+    "iSQLConnectionString_i": "host=localhost;port=5432;database=familytreedb;username=postgres;password=Positive~1;",
+    "SQLConnectionString": "host=127.0.0.1;port=5432;database=familytreedb;username=postgres;password=Positive~1;",
 
-    "ImageFolder": "c:\\temp\\Family",
-    "ImportFolder":  "c:\\temp"
+    "ImageFolder": "/temp/Family",
+    "ImportFolder":  "/temp"
 
   },
   "Logging": {
@@ -17,11 +17,12 @@
     }
   },
   "AllowedHosts": "*",
-  "Kestrel_not_use": {
+   
+  "Kestrel": {
     "Endpoints": {
-      "Http": {        
-        "Url": "http://*:5015"
+      "Http": {
+        "Url": "http://localhost:5016"
       }
     }
-  }
+}
 }

API/FamilyTreeAPI/familytree_service.service

@@ -1,15 +1,17 @@
 [Unit]
-   Description=ASP.NET Core Web App running on Ubuntu
+   Description=ASP.NET Core Web App running on arch linux 
    [Service]
    WorkingDirectory=/var/www/familytree/api
    ExecStart=/usr/bin/dotnet /var/www/familytree/api/FamilyTreeAPI.dll
    Restart=always
-   # Restart service after 10 seconds if the dotnet service crashes:
-   RestartSec=10
+   # Restart service after 20 seconds if the dotnet service crashes:
+   RestartSec=20
    KillSignal=SIGINT
    SyslogIdentifier=dotnet-web-familytree-api
    # This user should exist on the server and have ownership of the deployment directory
-   User=www-data
+   #User=www-data this is other ubuntu
+   #arch linux has user http
+   User=http
    Environment=ASPNETCORE_ENVIRONMENT=Production
    [Install]
-   WantedBy=multi-user.target
+   WantedBy=multi-user.target

API/FamilyTreeAPI/familytreeapp.conf

@@ -2,8 +2,9 @@
 #make sure in nginx.conf has include module.d/*.conf inside http block one.
 	server {
 		listen 80; #make nginx out side listen 82;
-		location / {
-			  proxy_pass         http://127.0.0.1:5000;
+		location /familytreeapi/ {
+			  #proxy_pass         http://127.0.0.1:5015;
+			  proxy_pass         http://192.168.1.219:5015/;
 			  proxy_http_version 1.1;
 			  proxy_set_header   Upgrade $http_upgrade;
 			  proxy_set_header   Connection keep-alive;
@@ -13,20 +14,29 @@
 			  proxy_set_header   X-Forwarded-Proto $scheme;
 		}
 	  
+	    location / {
+	    	return 301 /familytreeui/; #if same one redirect to /familytreeui/
+	    }
+
+	    location /familytreeui {
+	    	return 301 /familytreeui/; #if same one redirect to /familytreeui/
+	    }
+
 	    location /familytreeui/ {
-			root /var/www/familytree; #path must exist like /var/www/familytree/familytreeui and /var/www/familytree/api folder.
-			index index.html
-			try_files $uri $uri/ /index.html;
+			#root /var/www/familytree/; #path is real must exist like /var/www/familytree/familytreeui and /var/www/familytree/api folder.
+			alias /var/www/familytree/ui/; #location does not to match. but angular index baseurl must same as location.
+			#index index.html;
+			try_files $uri $uri/ /familytreeui/index.html /index.html;
 		}
 
 
 		# Optional: Cache static assets for better performance
-		location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
-			  expires 30d;
-			  add_header Cache-Control "public";
-		}
+		#location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
+		#	  expires 30d;
+		#		  add_header Cache-Control "public";
+		#}
   
-		error_page 404 /index.html;
+	#	error_page 404 /index.html;
 
 # put in /etc/nginx/sites-availalble/familytreeapp.conf
 # link to enable

API/FamilyTreeAPI/nginx.conf

@@ -0,0 +1,123 @@
+
+user http;
+worker_processes auto; 
+worker_cpu_affinity auto;
+
+#error_log  logs/error.log;
+#error_log  logs/error.log  notice;
+#error_log  logs/error.log  info;
+
+#pid        logs/nginx.pid;
+
+
+# Load all installed modules
+#include modules.d/*.conf;
+
+events {
+    worker_connections  1024;
+}
+
+
+http {
+    charset utf-8;
+    include       mime.types;
+    default_type  application/octet-stream;
+    types_hash_max_size 4096;
+    client_max_body_size 16M;
+    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+    #                  '$status $body_bytes_sent "$http_referer" '
+    #                  '"$http_user_agent" "$http_x_forwarded_for"';
+
+    #access_log  logs/access.log  main;
+
+    sendfile        on;
+    #tcp_nopush     on;
+
+    #keepalive_timeout  0;
+    keepalive_timeout  65;
+
+    #gzip  on;
+    include modules.d/*.conf;
+
+    server {
+        listen       81;
+        server_name  localhost;
+
+        #access_log  logs/host.access.log  main;
+
+	#kham comment out first
+        #location / {
+         #   root   /usr/share/nginx/html;
+         #   index  index.html index.htm;
+       # }
+
+        #error_page  404              /404.html;
+
+        # redirect server error pages to the static page /50x.html
+        #
+        error_page   500 502 503 504  /50x.html;
+        location = /50x.html {
+            root   /usr/share/nginx/html;
+        }
+
+        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
+        #
+        #location ~ \.php$ {
+        #    proxy_pass   http://127.0.0.1;
+        #}
+
+        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
+        #
+        #location ~ \.php$ {
+        #    root           html;
+        #    fastcgi_pass   127.0.0.1:9000;
+        #    fastcgi_index  index.php;
+        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
+        #    include        fastcgi_params;
+        #}
+
+        # deny access to .htaccess files, if Apache's document root
+        # concurs with nginx's one
+        #
+        #location ~ /\.ht {
+        #    deny  all;
+        #}
+    }
+
+
+    # another virtual host using mix of IP-, name-, and port-based configuration
+    #
+    #server {
+    #    listen       8000;
+    #    listen       somename:8080;
+    #    server_name  somename  alias  another.alias;
+
+    #    location / {
+    #        root   html;
+    #        index  index.html index.htm;
+    #    }
+    #}
+
+
+    # HTTPS server
+    #
+    #server {
+    #    listen       443 ssl;
+    #    server_name  localhost;
+
+    #    ssl_certificate      cert.pem;
+    #    ssl_certificate_key  cert.key;
+
+    #    ssl_session_cache    shared:SSL:1m;
+    #    ssl_session_timeout  5m;
+
+    #    ssl_ciphers  HIGH:!aNULL:!MD5;
+    #    ssl_prefer_server_ciphers  on;
+
+    #    location / {
+    #        root   html;
+    #        index  index.html index.htm;
+    #    }
+    #}
+
+}

UI/.editorconfig

@@ -1,17 +1,17 @@
-# Editor configuration, see https://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.ts]
-quote_type = single
-ij_typescript_use_double_quotes = false
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

UI/.gitignore

@@ -1,43 +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
+# 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/.postcssrc.json

@@ -1,5 +1,5 @@
-{
-  "plugins": {
-    "@tailwindcss/postcss": {}
-  }
+{
+  "plugins": {
+    "@tailwindcss/postcss": {}
+  }
 }

UI/.vscode/extensions.json

@@ -1,4 +1,4 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
-  "recommendations": ["angular.ng-template"]
-}
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

UI/.vscode/launch.json

@@ -1,20 +1,20 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "ng serve",
-      "type": "chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: start",
-      "url": "http://localhost:4200/"
-    },
-    {
-      "name": "ng test",
-      "type": "chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: test",
-      "url": "http://localhost:9876/debug.html"
-    }
-  ]
-}
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

UI/.vscode/tasks.json

@@ -1,42 +1,42 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "type": "npm",
-      "script": "start",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "(.*?)"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation complete"
-          }
-        }
-      }
-    },
-    {
-      "type": "npm",
-      "script": "test",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "(.*?)"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation complete"
-          }
-        }
-      }
-    }
-  ]
-}
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

UI/Dockerfile

@@ -1,32 +1,32 @@
-FROM node:24.0.0 AS build
-RUN mkdir -p /app
-WORKDIR /app
-
-COPY ["./*.json", "./"]
-
-RUN npm install -g @angular/cli
-
-COPY . .
-# Run command in Virtual directory
-RUN npm cache clean --force
-
-RUN npm install
-
-#RUN ng build --configuration=production
-RUN ng build -c=production
-
-FROM nginx:latest
-#### copy nginx conf
-COPY ./nginx.conf /etc/nginx/conf.d/default.conf
-
-#COPY --from=build app/dist/Familytree/browser /usr/share/nginx/html
-#### copy artifact build from the 'build environment' old is not in browser folder
-COPY --from=build /app/dist/Familytree/browser /usr/share/nginx/html
-
-#CMD ["nginx", "-g", "daemon off;"]
-
-EXPOSE 80
-
-#docker build -t my_angular_app:latest .
-#docker run --name carval -d -p 4200:80 varlidate_ui
+FROM node:24.0.0 AS build
+RUN mkdir -p /app
+WORKDIR /app
+
+COPY ["./*.json", "./"]
+
+RUN npm install -g @angular/cli
+
+COPY . .
+# Run command in Virtual directory
+RUN npm cache clean --force
+
+RUN npm install
+
+#RUN ng build --configuration=production
+RUN ng build -c=production
+
+FROM nginx:latest
+#### copy nginx conf
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf
+
+#COPY --from=build app/dist/Familytree/browser /usr/share/nginx/html
+#### copy artifact build from the 'build environment' old is not in browser folder
+COPY --from=build /app/dist/Familytree/browser /usr/share/nginx/html
+
+#CMD ["nginx", "-g", "daemon off;"]
+
+EXPOSE 80
+
+#docker build -t my_angular_app:latest .
+#docker run --name carval -d -p 4200:80 varlidate_ui
 #npm error code ENOENT

UI/README.md

@@ -1,59 +1,59 @@
-# FamilyTreeUI
-
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.0.2.
-
-## Development server
-
-To start a local development server, run:
-
-```bash
-ng serve
-```
-
-Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
-
-## Code scaffolding
-
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
-
-```bash
-ng generate component component-name
-```
-
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
-```
-
-## Building
-
-To build the project run:
-
-```bash
-ng build
-```
-
-This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
-
-## Running unit tests
-
-To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
-
-```bash
-ng test
-```
-
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
-
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
-
-## Additional Resources
-
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+# FamilyTreeUI
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.0.2.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+
+## Running unit tests
+
+To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

UI/angular.json

@@ -1,78 +1,78 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "cli": {
-    "packageManager": "npm",
-    "analytics": false
-  },
-  "newProjectRoot": "projects",
-  "projects": {
-    "FamilyTreeUI": {
-      "projectType": "application",
-      "schematics": {},
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular/build:application",
-          "options": {
-            "allowedCommonJsDependencies": [ 
-              "moment", "file-saver", "xlsx"
-             ],
-            "browser": "src/main.ts",
-            "tsConfig": "tsconfig.app.json",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "public"
-              }
-            ],
-            "styles": [
-              "src/styles.css"
-
-            ]
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "5MB",
-                  "maximumError": "6MB"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
-                }
-              ],
-              "outputHashing": "all"
-            },
-            "development": {
-              "optimization": false,
-              "extractLicenses": false,
-              "sourceMap": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular/build:dev-server",
-          "configurations": {
-            "production": {
-              "buildTarget": "FamilyTreeUI:build:production"
-            },
-            "development": {
-              "buildTarget": "FamilyTreeUI:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "test": {
-          "builder": "@angular/build:unit-test"
-        }
-      }
-    }
-  }
-}
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm",
+    "analytics": false
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "FamilyTreeUI": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "allowedCommonJsDependencies": [ 
+              "moment", "file-saver", "xlsx"
+             ],
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "5MB",
+                  "maximumError": "6MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "FamilyTreeUI:build:production"
+            },
+            "development": {
+              "buildTarget": "FamilyTreeUI:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test"
+        }
+      }
+    }
+  }
+}

UI/nginx.conf

@@ -1,20 +1,20 @@
-server {
-  listen 80;
-  sendfile on;
-  default_type application/octet-stream;
-
-  gzip on;
-  gzip_http_version 1.1;
-  gzip_disable      "MSIE [1-6]\.";
-  gzip_min_length   256;
-  gzip_vary         on;
-  gzip_proxied      expired no-cache no-store private auth;
-  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
-  gzip_comp_level   9;
-
-  root /usr/share/nginx/html;
-
-  location / {
-    try_files $uri $uri/ /index.html =404;
-  }
+server {
+  listen 80;
+  sendfile on;
+  default_type application/octet-stream;
+
+  gzip on;
+  gzip_http_version 1.1;
+  gzip_disable      "MSIE [1-6]\.";
+  gzip_min_length   256;
+  gzip_vary         on;
+  gzip_proxied      expired no-cache no-store private auth;
+  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+  gzip_comp_level   9;
+
+  root /usr/share/nginx/html;
+
+  location / {
+    try_files $uri $uri/ /index.html =404;
+  }
 }

UI/package.json

@@ -23,35 +23,35 @@
   "private": true,
   "packageManager": "npm@11.6.4",
   "dependencies": {
-    "@angular/common": "^21.0.0",
-    "@angular/compiler": "^21.0.0",
-    "@angular/core": "^21.0.0",
-    "@angular/forms": "^21.0.0",
-    "@angular/platform-browser": "^21.0.0",
-    "@angular/router": "^21.0.0",
-    "@ngrx/effects": "^21.0.1",
-    "@ngrx/store": "^21.0.1",
-    "@ngrx/store-devtools": "^21.0.1",
-    "@primeuix/themes": "^2.0.2",
+    "@angular/common": "^22.0.0",
+    "@angular/compiler": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/forms": "^22.0.0",
+    "@angular/platform-browser": "^22.0.0",
+    "@angular/router": "^22.0.0",
+    "@ngrx/effects": "^22.0.0",
+    "@ngrx/store": "^22.0.0",
+    "@ngrx/store-devtools": "^22.0.0",
+    "@openng/optimus-ui": "^2.0.2",
     "@tailwindcss/postcss": "^4.1.17",
     "file-saver": "^2.0.5",
     "moment": "^2.30.1",
     "postcss": "^8.5.6",
-    "primeicons": "^7.0.0",
-    "primeng": "^21.0.1",
     "rxjs": "~7.8.0",
     "tailwindcss": "^4.1.17",
-    "tailwindcss-primeui": "^0.6.1",
     "tslib": "^2.3.0",
-    "xlsx": "^0.18.5"
+    "xlsx": "^0.18.5",
+    "@openng/icons": "^1.0.0",
+    "@openng/optimus-ui-themes": "^2.0.2",
+    "@openng/optimus-ui-tailwindcss": "^2.0.2"
   },
   "devDependencies": {
-    "@angular/build": "^21.2.7",
-    "@angular/cli": "^21.2.7",
-    "@angular/compiler-cli": "^21.0.0",
+    "@angular/build": "^22.0.0",
+    "@angular/cli": "^22.0.0",
+    "@angular/compiler-cli": "^22.0.0",
     "@types/file-saver": "^2.0.7",
     "jsdom": "^27.1.0",
-    "typescript": "~5.9.2",
+    "typescript": "~6.0.0",
     "vitest": "^4.0.8"
   }
-}
+}

UI/public/config/appsetting.json

@@ -1,6 +1,8 @@
-{
-    "baseUrl1": "http://192.168.8.188:5015",    
-    "baseUrl": "http://localhost:5016",   
-     "baseUrl_docker": "http://localhost:8080",    
-    "attachment": "http://localhost/document/family"
+{
+    "baseUrl1": "http://192.168.8.188:5015",    
+    "baseUrl": "http://localhost:5016",   
+     "baseUrl_docker": "http://localhost:8080",    
+    "attachment": "http://localhost/document/family",
+    "username": "kham.vilaythong@gmail.com",
+    "prefill_ps": "passwor"
 }

UI/public/web.config

@@ -1,19 +1,19 @@
-<?xml version="1.0" encoding="utf-8"?>
-<configuration>
-
-<system.webServer>
-  <rewrite>
-    <rules>
-      <rule name="Angular Routes" stopProcessing="true">
-        <match url=".*" />
-        <conditions logicalGrouping="MatchAll">
-          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
-          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
-        </conditions>
-        <action type="Rewrite" url="./index.html" />
-      </rule>
-    </rules>
-  </rewrite>
-</system.webServer>
-
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+
+<system.webServer>
+  <rewrite>
+    <rules>
+      <rule name="Angular Routes" stopProcessing="true">
+        <match url=".*" />
+        <conditions logicalGrouping="MatchAll">
+          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
+          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
+        </conditions>
+        <action type="Rewrite" url="./index.html" />
+      </rule>
+    </rules>
+  </rewrite>
+</system.webServer>
+
 </configuration>

UI/src/app/app.config.ts

@@ -1,67 +1,67 @@
-import { ApplicationConfig, provideBrowserGlobalErrorListeners ,
-  provideAppInitializer} from '@angular/core';
-import { provideRouter, withComponentInputBinding } from '@angular/router';
-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';
-import { JwtInterceptor, ErrorInterceptor, initializeApp } from './shares';
-
-import { provideStore } from '@ngrx/store';
-import { provideStoreDevtools } from '@ngrx/store-devtools';
-import { isDevMode } from '@angular/core';
-import { provideEffects } from '@ngrx/effects';
-import { staffEffects,staffsReducer } from './state';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideStore({
-        myStaffs: staffsReducer,
-    }),
-    provideEffects([staffEffects]),
-    provideStoreDevtools({
-        maxAge: 30,
-        logOnly: !isDevMode()
-    }),
-    provideBrowserGlobalErrorListeners(),
-    MessageService, ConfirmationService,
-    provideAppInitializer(initializeApp()),
-    provideHttpClient(withInterceptors([JwtInterceptor, ErrorInterceptor])),
-    provideRouter(routes, withComponentInputBinding()),
-    providePrimeNG({
-        theme: {
-            preset: MyPreset,
-            options: {
-                cssLayer: {
-                    name: 'primeng',
-                    order: 'theme, base, primeng'
-                }
-            }
-        }
-    }),
-    
-]
-};
-
-/*
-$) ng build --base-href "/familytreeui/" -c production
-*/
-
-/*
- 
-import { Store } from '@ngrx/store'; 
- private readonly store = inject(Store);
- protected books = this.store.selectSignal(selectBooks);
- protected onAdd(id: number) {
-    this.store.dispatch(StaffsActions.addStaff({ id }));
-  }
-
-  protected onRemove(id: number) {
-    this.store.dispatch(StaffsActions.removeStaff({ id }));
-  }
- on ngOnInit() {
- use it normal get from API first
-and subscribe( (x) => this.store.dispatch(StaffApiAction.LoadStaffList({x})))
-}
+import { ApplicationConfig, provideBrowserGlobalErrorListeners ,
+  provideAppInitializer} from '@angular/core';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
+import { provideOptimus } from '@openng/optimus-ui/config';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { ConfirmationService, MessageService } from '@openng/optimus-ui/api';
+import { routes } from './app.routes';
+import MyPreset from './mythem';
+import { JwtInterceptor, ErrorInterceptor, initializeApp } from './shares';
+
+import { provideStore } from '@ngrx/store';
+import { provideStoreDevtools } from '@ngrx/store-devtools';
+import { isDevMode } from '@angular/core';
+import { provideEffects } from '@ngrx/effects';
+import { staffEffects,staffsReducer } from './state';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideStore({
+        myStaffs: staffsReducer,
+    }),
+    provideEffects([staffEffects]),
+    provideStoreDevtools({
+        maxAge: 30,
+        logOnly: !isDevMode()
+    }),
+    provideBrowserGlobalErrorListeners(),
+    MessageService, ConfirmationService,
+    provideAppInitializer(initializeApp()),
+    provideHttpClient(withInterceptors([JwtInterceptor, ErrorInterceptor])),
+    provideRouter(routes, withComponentInputBinding()),
+    provideOptimus({
+        theme: {
+            preset: MyPreset,
+            options: {
+                cssLayer: {
+                    name: 'optimus',
+                    order: 'theme, base, optimus'
+                }
+            }
+        }
+    }),
+    
+]
+};
+
+/*
+$) ng build --base-href "/familytreeui/" -c production
+*/
+
+/*
+ 
+import { Store } from '@ngrx/store'; 
+ private readonly store = inject(Store);
+ protected books = this.store.selectSignal(selectBooks);
+ protected onAdd(id: number) {
+    this.store.dispatch(StaffsActions.addStaff({ id }));
+  }
+
+  protected onRemove(id: number) {
+    this.store.dispatch(StaffsActions.removeStaff({ id }));
+  }
+ on ngOnInit() {
+ use it normal get from API first
+and subscribe( (x) => this.store.dispatch(StaffApiAction.LoadStaffList({x})))
+}
 */

UI/src/app/app.html

@@ -1,5 +1,5 @@
-<p-toast position="bottom-center" />
-<app-toolbar> </app-toolbar>
-<router-outlet />
-<p-confirmDialog [style]="{width: '50vw'}" 
+<p-toast position="bottom-center" />
+<app-toolbar> </app-toolbar>
+<router-outlet />
+<p-confirmDialog [style]="{width: '50vw'}" 
   rejectButtonStyleClass="p-button-text"> </p-confirmDialog>

UI/src/app/app.routes.ts

@@ -1,19 +1,19 @@
-import { Routes } from '@angular/router';
-import { Login } from './login';
-import { StaffComponent, StaffEditComponent } from './staff';
-import { AuthGuard } from './route-guard';
-import { FamilyTree, FamilyList} from './person';
-import { ImportCom } from './import.com/import.com';
-import { ImageDisplayComponent } from './pickperson/image.display';
-export const routes: Routes = [
-{ path: '', redirectTo: 'login', pathMatch: 'full' },
- //   { path: 'approval', component: ApprovalComponent,canActivate: [AuthGuard], data: { roleAllowed: '1,2,3' }},},
-   { path: 'login', component: Login},
-   { path: 'staff', component: StaffComponent},  
-   { path: 'person', component: FamilyList},  
-   { path: 'imagedisplay/:id', component: ImageDisplayComponent},  
-    { path: 'import', component: ImportCom},  
-   { path: 'familytree', component: FamilyTree},  
-   { path: 'staff/:id', component: StaffEditComponent},
-
-];
+import { Routes } from '@angular/router';
+import { Login } from './login';
+import { StaffComponent, StaffEditComponent } from './staff';
+import { AuthGuard } from './route-guard';
+import { FamilyTree, FamilyList} from './person';
+import { ImportCom } from './import.com/import.com';
+import { ImageDisplayComponent } from './pickperson/image.display';
+export const routes: Routes = [
+{ path: '', redirectTo: 'login', pathMatch: 'full' },
+ //   { path: 'approval', component: ApprovalComponent,canActivate: [AuthGuard], data: { roleAllowed: '1,2,3' }},},
+   { path: 'login', component: Login},
+   { path: 'staff', component: StaffComponent},  
+   { path: 'person', component: FamilyList},  
+   { path: 'imagedisplay/:id', component: ImageDisplayComponent},  
+    { path: 'import', component: ImportCom},  
+   { path: 'familytree', component: FamilyTree},  
+   { path: 'staff/:id', component: StaffEditComponent},
+
+];

UI/src/app/app.ts

@@ -1,15 +1,15 @@
-
-import { Component, signal } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-import { ToolbarComponent } from './toolbar/toolbar.component';
-import { ToastModule } from 'primeng/toast';
-import { ConfirmDialogModule } from 'primeng/confirmdialog';
-@Component({
-  selector: 'app-root',
-  imports: [RouterOutlet,ToastModule,ToolbarComponent,ConfirmDialogModule],
-  templateUrl: './app.html',
-  styleUrl: './app.css'
-})
-export class App {
-  protected readonly title = signal('FamilyTree');
-}
+
+import { Component, signal } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { ToolbarComponent } from './toolbar/toolbar.component';
+import { ToastModule } from '@openng/optimus-ui/toast';
+import { ConfirmDialogModule } from '@openng/optimus-ui/confirmdialog';
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet,ToastModule,ToolbarComponent,ConfirmDialogModule],
+  templateUrl: './app.html',
+  styleUrl: './app.css'
+})
+export class App {
+  protected readonly title = signal('FamilyTree');
+}

UI/src/app/attachphoto/add.photo.html

@@ -1,20 +1,20 @@
-    <div class="card gap-2">
-        <div class="mt-4">
-                <input type="file" class="file-input hidden" (change)="onFileSelected($event)" #fileUpload multiple>                
-                <div class="file-upload">
-                    <label>{{fileName || "Photo upload:"}}</label>
-                    <button pButton type="button" icon="pi pi-paperclip"
-                        class="p-button-rounded p-button-text p-button-raised ml-2" pTooltip="attach file"
-                        (click)="fileUpload.click()"></button>
-                </div>
-               <div class="flex items-end justify-end mt-4">
-                @if (files)
-                {
-                <button pButton pRipple type="button" icon="pi pi-upload" label="OK" class="p-button-sm mr-2"
-                    (click)="upload($event)"></button>
-                }
-            <button pButton pRipple type="button" icon="pi pi-times" label="Cancel" class="p-button-sm"
-                (click)="cancel($event)"></button>
-        </div>   
-        </div>
-    </div>    
+    <div class="card gap-2">
+        <div class="mt-4">
+                <input type="file" class="file-input hidden" (change)="onFileSelected($event)" #fileUpload multiple>                
+                <div class="file-upload">
+                    <label>{{fileName || "Photo upload:"}}</label>
+                    <button pButton type="button" icon="pi pi-paperclip"
+                        class="p-button-rounded p-button-text p-button-raised ml-2" pTooltip="attach file"
+                        (click)="fileUpload.click()"></button>
+                </div>
+               <div class="flex items-end justify-end mt-4">
+                @if (files)
+                {
+                <button pButton pRipple type="button" icon="pi pi-upload" label="OK" class="p-button-sm mr-2"
+                    (click)="upload($event)"></button>
+                }
+            <button pButton pRipple type="button" icon="pi pi-times" label="Cancel" class="p-button-sm"
+                (click)="cancel($event)"></button>
+        </div>   
+        </div>
+    </div>    

UI/src/app/attachphoto/add.photo.ts

@@ -1,178 +1,178 @@
-import { ChangeDetectorRef, Component, inject, Inject, OnDestroy, OnInit, signal } from '@angular/core';
-import { DynamicDialogModule, DynamicDialogRef ,DynamicDialogConfig} from 'primeng/dynamicdialog';
-
-import { LookupEdit } from '../models';
-import { UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
-import { Subject, Subscription } from 'rxjs';
-import { ConfirmationService, MessageService } from 'primeng/api';
-import { LookupService } from '../shares';
-import { CommonModule } from '@angular/common';
-import { CheckboxModule } from 'primeng/checkbox';
-import { InputTextModule } from 'primeng/inputtext';
-import { ButtonModule } from 'primeng/button';
-@Component({
-    selector: 'add-photo',
-    imports: [CommonModule, ReactiveFormsModule,
-        ButtonModule, InputTextModule,
-        DynamicDialogModule, CheckboxModule],
-    templateUrl: './add.photo.html',
-    styleUrls: ['./add.photo.css'],
-    providers: [ConfirmationService]
-})
-export class AddPhoto implements OnInit, OnDestroy {
-  isChange = true; // disable use false//true for not disable. make sure it true is disable button. 
-  selType = "";
-  _error = "";
-  downloadFile = signal(false);
-	 files: File[] = [];
-   fileName = "";
-  disabled: boolean = true;
-  subChanged$ = new Subject<boolean>();
-  private formBuilder = inject(UntypedFormBuilder);
-  private cdr = inject(ChangeDetectorRef);
-  private subscription: Subscription = new Subscription();
-  lookupForm = this.formBuilder.group({
-    id: [0], //Validators.required		
-    description: ['', [Validators.required, Validators.maxLength(50)]],
-    codeId: ['', [Validators.required]],
-    parentId: [0],
-    
-    active: [false], //Validators.required		
-  });
-
-  constructor(
-
-    private lookupService: LookupService,
-    private messageService: MessageService,
-    private confirmationService: ConfirmationService,
-    public ref: DynamicDialogRef, public config: DynamicDialogConfig) { }
-
-  ngOnInit(): void {
-    const id = this.config.data.id;
-    this.selType = this.config.data.type;
-    const maxcodeId = this.config.data.maxCodeId;
-    if (id > 0) {
-      this.lookupService.loadLookupById(id, this.selType).subscribe({
-        next: x => {
-          this.assignValue(x.data);
-          this.cdr.markForCheck();
-          this.subscription.add(this.lookupForm.valueChanges.subscribe(x => this.isChange = false));
-          this.subscription.add(this.subChanged$.subscribe(x => this.isChange = x));
-
-        },
-        error: e => {
-          console.error("error", e);
-          this.messageService.add({ severity: 'error', summary: 'Error on load cleaner ', detail: e.message });
-        }
-      });
-    }
-    else {
-      //new photo
-      const ward:LookupEdit = {
-        id, description: '', codeId: maxcodeId, type: this.selType, active: true,
-       
-      };
-      this.assignValue(ward);
-      this.subscription.add(this.lookupForm.valueChanges.subscribe(x => this.isChange = false));
-      this.subscription.add(this.subChanged$.subscribe(x => this.isChange = x));
-    }
-  }
-
-  getClassForRequire(prev: string, name: string) {
-    const notok = !this.lookupForm.controls[name].valid &&
-      this.lookupForm.controls[name].touched;
-    let str = prev;
-    if (notok)
-      str += " ng-invalid ng-dirty";
-    return str;
-  }
-  get isFieldsChange() {
-    const chan = this.isChange || !this.lookupForm.valid; // this disable so need true valid = true not
-    //console.log(this.msg + 'is fields change', chan);
-    return chan;
-  }
-
-  assignValue(item: LookupEdit): void {
-    this.lookupForm.patchValue({
-      id: item.id,
-      codeId: item.codeId,
-      description: item.description,
-      active: item.active,
-     
-      
-    });
-    // disable use false//true for not disable.
-    this.subChanged$.next(true);
-  }
-  validate(item: LookupEdit): boolean {
-    let result = true;
-    if (item.description!.trim() == "") {
-      this._error = "Description is empty or blank";
-      result = false;
-    }
-    return result;
-
-  }
-  deleteFile() : void {
-  //const filename = this.requestForm.value.attachmentFile;
-  //  const data = { filename };
-	this.fileName ="";
-	//this.requestForm.patchValue({ attachmentFile: "" });
-    /*
-	const delete$ = this.tradePersonService.deleteUploadFile(data);
-    this.subscription.add(delete$.subscribe(
-      {
-        next: x => {
-          if (x.statusCode == 1) {
-            {
-              this.requestForm.patchValue({ attachmentFile: "" });
-            }
-          }
-          else {
-            this.messageService.add({ severity: 'error', summary: 'Error delete upload file', detail: 'Fail to delete upload file: ' + x.message });
-          }
-        },
-        error: e => {
-          this.messageService.add({ severity: 'error', summary: 'Error delete upload file', detail: 'Fail to delete upload file: ' + e });
-        }
-      }
-    ));
-	*/
-}
- onFileSelected(event: any) {
-
-  let i =0;
-  for (i = 0; i < event.target.files.length; i++)
-  {
-    const file: File = event.target.files[i];
-    this.files.push(file);
-    if (this.fileName != "")
-      this.fileName = this.fileName + "," + file.name;
-    else
-      this.fileName = file.name;
-
-    this.subChanged$.next(false);
-    
-  }
-  }
-upload(e: Event): void {
-  e.preventDefault();
-  if (this.files.length > 0)
-  {
-    this.ref.close(this.files);
-  }
-  else
-  {
-    this.messageService.add({severity: 'error', summary: 'No File to upload file', detail: 'select file first then upload file'});
-  }
-}
-
-  cancel(e: Event): void {
-    e.preventDefault();
-    this.ref.close(null);
-  }
-
-  ngOnDestroy(): void {
-    this.subscription.unsubscribe();
-  }
-}
+import { ChangeDetectorRef, Component, inject, Inject, OnDestroy, OnInit, signal } from '@angular/core';
+import { DynamicDialogModule, DynamicDialogRef ,DynamicDialogConfig} from '@openng/optimus-ui/dynamicdialog';
+
+import { LookupEdit } from '../models';
+import { UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import { Subject, Subscription } from 'rxjs';
+import { ConfirmationService, MessageService } from '@openng/optimus-ui/api';
+import { LookupService } from '../shares';
+import { CommonModule } from '@angular/common';
+import { CheckboxModule } from '@openng/optimus-ui/checkbox';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
+import { ButtonModule } from '@openng/optimus-ui/button';
+@Component({
+    selector: 'add-photo',
+    imports: [CommonModule, ReactiveFormsModule,
+        ButtonModule, InputTextModule,
+        DynamicDialogModule, CheckboxModule],
+    templateUrl: './add.photo.html',
+    styleUrls: ['./add.photo.css'],
+    providers: [ConfirmationService]
+})
+export class AddPhoto implements OnInit, OnDestroy {
+  isChange = true; // disable use false//true for not disable. make sure it true is disable button. 
+  selType = "";
+  _error = "";
+  downloadFile = signal(false);
+	 files: File[] = [];
+   fileName = "";
+  disabled: boolean = true;
+  subChanged$ = new Subject<boolean>();
+  private formBuilder = inject(UntypedFormBuilder);
+  private cdr = inject(ChangeDetectorRef);
+  private subscription: Subscription = new Subscription();
+  lookupForm = this.formBuilder.group({
+    id: [0], //Validators.required		
+    description: ['', [Validators.required, Validators.maxLength(50)]],
+    codeId: ['', [Validators.required]],
+    parentId: [0],
+    
+    active: [false], //Validators.required		
+  });
+
+  constructor(
+
+    private lookupService: LookupService,
+    private messageService: MessageService,
+    private confirmationService: ConfirmationService,
+    public ref: DynamicDialogRef, public config: DynamicDialogConfig) { }
+
+  ngOnInit(): void {
+    const id = this.config.data.id;
+    this.selType = this.config.data.type;
+    const maxcodeId = this.config.data.maxCodeId;
+    if (id > 0) {
+      this.lookupService.loadLookupById(id, this.selType).subscribe({
+        next: x => {
+          this.assignValue(x.data);
+          this.cdr.markForCheck();
+          this.subscription.add(this.lookupForm.valueChanges.subscribe(x => this.isChange = false));
+          this.subscription.add(this.subChanged$.subscribe(x => this.isChange = x));
+
+        },
+        error: e => {
+          console.error("error", e);
+          this.messageService.add({ severity: 'error', summary: 'Error on load cleaner ', detail: e.message });
+        }
+      });
+    }
+    else {
+      //new photo
+      const ward:LookupEdit = {
+        id, description: '', codeId: maxcodeId, type: this.selType, active: true,
+       
+      };
+      this.assignValue(ward);
+      this.subscription.add(this.lookupForm.valueChanges.subscribe(x => this.isChange = false));
+      this.subscription.add(this.subChanged$.subscribe(x => this.isChange = x));
+    }
+  }
+
+  getClassForRequire(prev: string, name: string) {
+    const notok = !this.lookupForm.controls[name].valid &&
+      this.lookupForm.controls[name].touched;
+    let str = prev;
+    if (notok)
+      str += " ng-invalid ng-dirty";
+    return str;
+  }
+  get isFieldsChange() {
+    const chan = this.isChange || !this.lookupForm.valid; // this disable so need true valid = true not
+    //console.log(this.msg + 'is fields change', chan);
+    return chan;
+  }
+
+  assignValue(item: LookupEdit): void {
+    this.lookupForm.patchValue({
+      id: item.id,
+      codeId: item.codeId,
+      description: item.description,
+      active: item.active,
+     
+      
+    });
+    // disable use false//true for not disable.
+    this.subChanged$.next(true);
+  }
+  validate(item: LookupEdit): boolean {
+    let result = true;
+    if (item.description!.trim() == "") {
+      this._error = "Description is empty or blank";
+      result = false;
+    }
+    return result;
+
+  }
+  deleteFile() : void {
+  //const filename = this.requestForm.value.attachmentFile;
+  //  const data = { filename };
+	this.fileName ="";
+	//this.requestForm.patchValue({ attachmentFile: "" });
+    /*
+	const delete$ = this.tradePersonService.deleteUploadFile(data);
+    this.subscription.add(delete$.subscribe(
+      {
+        next: x => {
+          if (x.statusCode == 1) {
+            {
+              this.requestForm.patchValue({ attachmentFile: "" });
+            }
+          }
+          else {
+            this.messageService.add({ severity: 'error', summary: 'Error delete upload file', detail: 'Fail to delete upload file: ' + x.message });
+          }
+        },
+        error: e => {
+          this.messageService.add({ severity: 'error', summary: 'Error delete upload file', detail: 'Fail to delete upload file: ' + e });
+        }
+      }
+    ));
+	*/
+}
+ onFileSelected(event: any) {
+
+  let i =0;
+  for (i = 0; i < event.target.files.length; i++)
+  {
+    const file: File = event.target.files[i];
+    this.files.push(file);
+    if (this.fileName != "")
+      this.fileName = this.fileName + "," + file.name;
+    else
+      this.fileName = file.name;
+
+    this.subChanged$.next(false);
+    
+  }
+  }
+upload(e: Event): void {
+  e.preventDefault();
+  if (this.files.length > 0)
+  {
+    this.ref.close(this.files);
+  }
+  else
+  {
+    this.messageService.add({severity: 'error', summary: 'No File to upload file', detail: 'select file first then upload file'});
+  }
+}
+
+  cancel(e: Event): void {
+    e.preventDefault();
+    this.ref.close(null);
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+}

UI/src/app/attachphoto/index.ts

@@ -1,2 +1,2 @@
-export * from './photolist';
+export * from './photolist';
 export * from './add.photo';

UI/src/app/attachphoto/photolist.html

@@ -1,49 +1,50 @@
-<div class="shadow-xl rounded-md p-2">
-    <div class="flex fex-row justify-between mb-2">
-       <p> please click save at the end</p>
-        <div class="flex items-end self-end">
-            <button pButton pRipple type="button" icon="pi pi-file" label="Attach Photo" class="p-button-sm"
-                (click)="newSupportDoc($event)"></button>
-        </div>
-    </div>
-
-    <div class="p-4">
-        <p-table [value]="FileList" sortMode="multiple" class="p-datatable-sm"
-            [loading]="loading">
-
-            <ng-template pTemplate="header">
-                <tr>
-                    <th>Id</th>
-                    <th pSortableColumn="description">Description<p-sortIcon field="description"></p-sortIcon>
-                    </th>
-                  
-                    <th>Action</th>
-
-                </tr>
-            </ng-template>
-            <ng-template pTemplate="body" let-item>
-                <tr>
-                    <td>{{item.id}}</td>
-                    <td >{{item.photo}}</td>
-                    <td>
-                        
-                        <button pButton type="button" icon="pi pi-times"
-                        pTooltip="Delete" class="p-button-rounded text-red-500 p-button-text p-button-raised mr-2"
-                            (click)="remove(item.id)"></button>
-                        
-                        @if (item.id > 0) {
-                            <button pButton type="button" icon="pi pi-file"
-                            pTooltip="Download Photo"
-                            class="p-button-rounded p-button-text p-button-raised"
-                                (click)="downloadAttachment(item.id)"></button>
-                        }
-                    </td>
-                </tr>
-            </ng-template>
-        </p-table>
-
-         <div class="flex items-end justify-end mt-4">
-            <button pButton pRipple type="button" icon="pi pi-times" label="Close" class="p-button-sm"
-                (click)="onClose($event)"></button>
-        </div>
+<div class="shadow-xl rounded-md p-2">
+    <div class="flex fex-row justify-between mb-2">
+       <p> please click save at the end</p>
+        <div class="flex items-end self-end">
+            <button pButton pRipple type="button" icon="pi pi-file" label="Attach Photo" class="p-button-sm"
+                (click)="newSupportDoc($event)"></button>
+        </div>
+    </div>
+
+    <div class="p-4">
+        <p-table [value]="FileList" sortMode="multiple" class="p-datatable-sm"
+            [loading]="loading">
+
+            <ng-template pTemplate="header">
+                <tr>
+                    <th>Id</th>
+                    <th pSortableColumn="description">Description<p-sortIcon field="description"></p-sortIcon>
+                    </th>
+                    <th>Photo Type</th>
+                    <th>Action</th>
+
+                </tr>
+            </ng-template>
+            <ng-template pTemplate="body" let-item>
+                <tr>
+                    <td>{{item.id}}</td>
+                    <td >{{item.photo}}</td>
+                    <td>{{item.photoType}}</td>
+                    <td>
+                        
+                        <button pButton type="button" icon="pi pi-times"
+                        pTooltip="Delete" class="p-button-rounded text-red-500 p-button-text p-button-raised mr-2"
+                            (click)="remove(item.id)"></button>
+                        
+                        @if (item.id > 0) {
+                            <button pButton type="button" icon="pi pi-file"
+                            pTooltip="Download Photo"
+                            class="p-button-rounded p-button-text p-button-raised"
+                                (click)="downloadAttachment(item.id)"></button>
+                        }
+                    </td>
+                </tr>
+            </ng-template>
+        </p-table>
+
+         <div class="flex items-end justify-end mt-4">
+            <button pButton pRipple type="button" icon="pi pi-times" label="Close" class="p-button-sm"
+                (click)="onClose($event)"></button>
+        </div>
     </div>

UI/src/app/attachphoto/photolist.ts

@@ -1,183 +1,183 @@
-//import { Component, OnInit, OnDestroy } from '@angular/core';
-import { Component, OnInit, OnDestroy, inject, ChangeDetectorRef, signal, output } from '@angular/core';
-import { catchError, EMPTY, finalize, Subscription } from 'rxjs';
-import { CommonUtilities, HttpUtility, LookupService } from '../shares';
-import { DialogService ,DynamicDialogConfig,DynamicDialogModule, DynamicDialogRef} from 'primeng/dynamicdialog';
-import { ConfirmationService, MessageService } from 'primeng/api';
-import { AddPhoto } from './add.photo';
-import { PersonPhotoDto } from '../models';
-
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { TableModule } from 'primeng/table';
-import { ButtonModule } from 'primeng/button';
-import { TooltipModule } from 'primeng/tooltip';
-import { AuthenticationService } from '../user-services';
-import { HttpResponse } from '@angular/common/http';
-import { PersonService } from '../person';
-
-@Component({
-    selector: 'photo-list',
-    imports: [CommonModule, FormsModule, DynamicDialogModule,TooltipModule,
-        ButtonModule, TableModule],
-    templateUrl: './photolist.html',
-    styleUrls: ['./photolist.css'],
-    providers: [DialogService]
-})
-export class PhotoList implements OnInit, OnDestroy {
-  FileList: PersonPhotoDto[] =[]
-  loading = false;
-  _id = -1;
-  deletePersonPhoto: number[] = [];
-  private authenticationService = inject(AuthenticationService);
-  private cdr = inject(ChangeDetectorRef);
-  private confirmationService = inject(ConfirmationService);
-  private messageService = inject(MessageService);
-  private subscription: Subscription = new Subscription();
-  downloadFile = signal(false);
-  constructor(
-    private http: HttpUtility,
-    private personService: PersonService,
-   
-    public ref: DynamicDialogRef, public config: DynamicDialogConfig,
-    public dialogService: DialogService
-  ) { }
-
-  ngOnInit(): void {
-    const id = this.config.data.id;
-    const olist = this.config.data.personPhotos;
-    if (olist && olist.length > 0)
-    {
-      this.FileList = olist;
-      this.assignFileId(olist);
-    }
-  }
-  assignFileId(files: any[]): void {
-    let i = 0;
-    let id = -1;
-    let mx = 1;
-    for (i = 0; i < files.length; i++)
-    {
-      id = files[i].id;
-      if (id < mx)
-      {
-        mx = id;
-      }
-    }
-    this._id = -1 * mx;
-  }
-  downloadAttachment(id: number): void {
-    //GetReportFile
-    
-    let typeofCall = "personId_" + id.toString();
-    
-    let criteria:any ={id, fileName:''};
-    this.downloadFile.set(false);
-    this.http.getFileResponse("api/FileUpload/downloadPersonPhoto", criteria).pipe(
-      catchError(err => {
-        console.error(err.message);
-        return EMPTY;
-      }),
-      finalize(() => {
-        // this.toastr.success("download completed ok to view now");
-        this.downloadFile.set(false);
-     
-      })).subscribe((response: HttpResponse<Blob>) => {
-        if (response) {
-          console.log("the download report response", response);
-          CommonUtilities.downloadFile(response, typeofCall);
-        }
-      });
-  }
-
-onClose(event: Event): void {
-  const nlist = this.FileList.filter( x => x.id < 1);
-  this.ref.close({list: nlist, deleteIds: this.deletePersonPhoto});
-}
-newSupportDoc(event: Event): void {
-  this.showEdit(this._id--);
-}
-remove(id: number): void {
-   this.confirmationService.confirm({
-            
-            message: 'Do you want to delete this record?',
-            header: 'Confirmation Delete',
-            icon: 'pi pi-info-circle',
-            rejectLabel: 'Cancel',
-            rejectButtonProps: {
-                label: 'Cancel',
-                severity: 'secondary',
-                outlined: true,
-            },
-            acceptButtonProps: {
-                label: 'Delete',
-                severity: 'danger',
-            },
-
-            accept: () => {
-                this.doRemove(id);
-            }
-          });
-}
-doRemove(id: number): void {
-  if (id < 0)
-  {
-    const nlist = this.FileList.filter(x => x.id != id);
-    this.FileList = [...nlist];
-    this.cdr.markForCheck();
-  }
-  else
-  {
-    const deletepersonPhoto$ = this.personService.deletePersonPhotoFile(id);
-    this.subscription.add(deletepersonPhoto$.subscribe(
-      {
-        next: x => {
-          if (x.statusCode == 1)
-          {
-            const nlist = this.FileList.filter(x => x.id != id);
-            this.FileList = [...nlist];
-            this.deletePersonPhoto.push(id);            
-            this.cdr.markForCheck();
-            this.messageService.add({severity:'success', summary: 'delete person photo', detail: "person photo Id " + id });
-          }
-        },
-        error:e => console.error("error in client delete person photo", e)
-      }
-    ));
-  }
-  
-  
-  
-}
-  showEdit(id: number) {
-    const ref = this.dialogService.open(AddPhoto, {
-      data: {
-        id,      
-      },
-      header: 'Add File',
-      width: '70%',
-      maximizable: true,
-      draggable: true
-    });
-    if (ref)
-    {
-      ref.onClose.subscribe((list: File[]) => {
-      if (list) {
-        //console.log("after close ward edit", item);
-        this.messageService.add({ severity: 'success', summary: 'Attact File', detail: list.length.toString() });
-        let it = id;
-        for (let i = 0; i < list.length; i++)
-        {
-          const item = list[i];
-          this.FileList.push({id: it--, photo: item.name, photoType:'', file: item});
-        }
-        this.cdr.markForCheck();
-      }
-    });
-    }
-  }
-
-  ngOnDestroy() {
-    this.subscription.unsubscribe();
-  }
-}
+//import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, inject, ChangeDetectorRef, signal, output } from '@angular/core';
+import { catchError, EMPTY, finalize, Subscription } from 'rxjs';
+import { CommonUtilities, HttpUtility, LookupService } from '../shares';
+import { DialogService ,DynamicDialogConfig,DynamicDialogModule, DynamicDialogRef} from '@openng/optimus-ui/dynamicdialog';
+import { ConfirmationService, MessageService } from '@openng/optimus-ui/api';
+import { AddPhoto } from './add.photo';
+import { PersonPhotoDto } from '../models';
+
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { TableModule } from '@openng/optimus-ui/table';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { TooltipModule } from '@openng/optimus-ui/tooltip';
+import { AuthenticationService } from '../user-services';
+import { HttpResponse } from '@angular/common/http';
+import { PersonService } from '../person';
+
+@Component({
+    selector: 'photo-list',
+    imports: [CommonModule, FormsModule, DynamicDialogModule,TooltipModule,
+        ButtonModule, TableModule],
+    templateUrl: './photolist.html',
+    styleUrls: ['./photolist.css'],
+    providers: [DialogService]
+})
+export class PhotoList implements OnInit, OnDestroy {
+  FileList: PersonPhotoDto[] =[]
+  loading = false;
+  _id = -1;
+  deletePersonPhoto: number[] = [];
+  private authenticationService = inject(AuthenticationService);
+  private cdr = inject(ChangeDetectorRef);
+  private confirmationService = inject(ConfirmationService);
+  private messageService = inject(MessageService);
+  private subscription: Subscription = new Subscription();
+  downloadFile = signal(false);
+  constructor(
+    private http: HttpUtility,
+    private personService: PersonService,
+   
+    public ref: DynamicDialogRef, public config: DynamicDialogConfig,
+    public dialogService: DialogService
+  ) { }
+
+  ngOnInit(): void {
+    const id = this.config.data.id;
+    const olist = this.config.data.personPhotos;
+    if (olist && olist.length > 0)
+    {
+      this.FileList = olist;
+      this.assignFileId(olist);
+    }
+  }
+  assignFileId(files: any[]): void {
+    let i = 0;
+    let id = -1;
+    let mx = 1;
+    for (i = 0; i < files.length; i++)
+    {
+      id = files[i].id;
+      if (id < mx)
+      {
+        mx = id;
+      }
+    }
+    this._id = -1 * mx;
+  }
+  downloadAttachment(id: number): void {
+    //GetReportFile
+    
+    let typeofCall = "personPhotoId_" + id.toString();
+    
+    let criteria: any = { id };
+    this.downloadFile.set(false);
+    this.http.getFileResponse("api/FileUpload/DownloadPersonPhotoById", criteria).pipe(
+      catchError(err => {
+        console.error(err.message);
+        return EMPTY;
+      }),
+      finalize(() => {
+        // this.toastr.success("download completed ok to view now");
+        this.downloadFile.set(false);
+     
+      })).subscribe((response: HttpResponse<Blob>) => {
+        if (response) {
+          console.log("the download report response", response);
+          CommonUtilities.downloadFile(response, typeofCall);
+        }
+      });
+  }
+
+onClose(event: Event): void {
+  const nlist = this.FileList.filter( x => x.id < 1);
+  this.ref.close({list: nlist, deleteIds: this.deletePersonPhoto});
+}
+newSupportDoc(event: Event): void {
+  this.showEdit(this._id--);
+}
+remove(id: number): void {
+   this.confirmationService.confirm({
+            
+            message: 'Do you want to delete this record?',
+            header: 'Confirmation Delete',
+            icon: 'pi pi-info-circle',
+            rejectLabel: 'Cancel',
+            rejectButtonProps: {
+                label: 'Cancel',
+                severity: 'secondary',
+                outlined: true,
+            },
+            acceptButtonProps: {
+                label: 'Delete',
+                severity: 'danger',
+            },
+
+            accept: () => {
+                this.doRemove(id);
+            }
+          });
+}
+doRemove(id: number): void {
+  if (id < 0)
+  {
+    const nlist = this.FileList.filter(x => x.id != id);
+    this.FileList = [...nlist];
+    this.cdr.markForCheck();
+  }
+  else
+  {
+    const deletepersonPhoto$ = this.personService.deletePersonPhotoFileById(id);
+    this.subscription.add(deletepersonPhoto$.subscribe(
+      {
+        next: x => {
+          if (x.statusCode == 1)
+          {
+            const nlist = this.FileList.filter(x => x.id != id);
+            this.FileList = [...nlist];
+            this.deletePersonPhoto.push(id);            
+            this.cdr.markForCheck();
+            this.messageService.add({severity:'success', summary: 'delete person photo', detail: "person photo Id " + id });
+          }
+        },
+        error:e => console.error("error in client delete person photo", e)
+      }
+    ));
+  }
+  
+  
+  
+}
+  showEdit(id: number) {
+    const ref = this.dialogService.open(AddPhoto, {
+      data: {
+        id,      
+      },
+      header: 'Add File',
+      width: '70%',
+      maximizable: true,
+      draggable: true
+    });
+    if (ref)
+    {
+      ref.onClose.subscribe((list: File[]) => {
+      if (list) {
+        //console.log("after close ward edit", item);
+        this.messageService.add({ severity: 'success', summary: 'Attact File', detail: list.length.toString() });
+        let it = id;
+        for (let i = 0; i < list.length; i++)
+        {
+          const item = list[i];
+          this.FileList.push({id: it--, photo: item.name, photoType:'', file: item});
+        }
+        this.cdr.markForCheck();
+      }
+    });
+    }
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+}

UI/src/app/import.com/import.com.html

@@ -1,10 +1,10 @@
-<div>
-<label class="flex mb-2"> Import Excel File</label>
-<p-fileupload #fu mode="basic" chooseLabel="Choose" 
-    chooseIcon="pi pi-upload" name="file" 
-    url='{{baseUrl}}' 
-    maxFileSize="10000000000" (onUpload)="onUpload($event)" />
-<p-button styleClass="mt-4" label="Upload" (onClick)="fu.upload()" severity="primary" />
-
-
-</div>
+<div>
+<label class="flex mb-2"> Import Excel File</label>
+<p-fileupload #fu mode="basic" chooseLabel="Choose" 
+    chooseIcon="pi pi-upload" name="file" 
+    url='{{baseUrl}}' 
+    maxFileSize="10000000000" (onUpload)="onUpload($event)" />
+<p-button styleClass="mt-4" label="Upload" (onClick)="fu.upload()" severity="primary" />
+
+
+</div>

UI/src/app/import.com/import.com.ts

@@ -1,38 +1,38 @@
-import { Component, inject, OnInit } from '@angular/core';
-import { ButtonModule } from 'primeng/button';
-import { FileUploadEvent, FileUploadModule } from 'primeng/fileupload';
-import { MessageService } from 'primeng/api';
-import { FileUpload } from 'primeng/fileupload';
-import { ToastModule } from 'primeng/toast';
-import { AppSettingService } from '../shares';
-/*
-interface UploadEvent {
-    originalEvent: Event;
-    files: File[];
-}*/
-
-@Component({
-  selector: 'app-import.com',
-  imports: [FileUploadModule, ButtonModule,ToastModule,FileUpload],
-  templateUrl: './import.com.html',
-  styleUrl: './import.com.css'
-})
-export class ImportCom implements OnInit {
-   uploadedFiles: any[] = [];
-   baseUrl = "";
-   private appSetting = inject(AppSettingService);
-  constructor(private messageService: MessageService) {}
-ngOnInit(): void
-  { 
-    const cbaseUrl = this.appSetting.appSetting.baseUrl;     
-        //http://localhost:5015/api/FileUpload/UploadFile" 
-    this.baseUrl = cbaseUrl + "/api/FileUpload/UploadFile";
-  }
-onUpload(event:FileUploadEvent) {
-        for(let file of event.files) {
-            this.uploadedFiles.push(file);
-        }
-
-        this.messageService.add({severity: 'info', summary: 'File Uploaded', detail: ''});
-    }
-}
+import { Component, inject, OnInit } from '@angular/core';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { FileUploadEvent, FileUploadModule } from '@openng/optimus-ui/fileupload';
+import { MessageService } from '@openng/optimus-ui/api';
+import { FileUpload } from '@openng/optimus-ui/fileupload';
+import { ToastModule } from '@openng/optimus-ui/toast';
+import { AppSettingService } from '../shares';
+/*
+interface UploadEvent {
+    originalEvent: Event;
+    files: File[];
+}*/
+
+@Component({
+  selector: 'app-import.com',
+  imports: [FileUploadModule, ButtonModule,ToastModule,FileUpload],
+  templateUrl: './import.com.html',
+  styleUrl: './import.com.css'
+})
+export class ImportCom implements OnInit {
+   uploadedFiles: any[] = [];
+   baseUrl = "";
+   private appSetting = inject(AppSettingService);
+  constructor(private messageService: MessageService) {}
+ngOnInit(): void
+  { 
+    const cbaseUrl = this.appSetting.appSetting.baseUrl;     
+        //http://localhost:5015/api/FileUpload/UploadFile" 
+    this.baseUrl = cbaseUrl + "/api/FileUpload/UploadFile";
+  }
+onUpload(event:FileUploadEvent) {
+        for(let file of event.files) {
+            this.uploadedFiles.push(file);
+        }
+
+        this.messageService.add({severity: 'info', summary: 'File Uploaded', detail: ''});
+    }
+}

UI/src/app/import.com/load_and_preview.txt

@@ -1,12 +1,12 @@
-<form runat="server">
-  <input accept="image/*" type='file' id="imgInp" />
-  <img id="blah" src="#" alt="your image" />
-</form>
-
-
-imgInp.onchange = evt => {
-  const [file] = imgInp.files
-  if (file) {
-    blah.src = URL.createObjectURL(file)
-  }
-}
+<form runat="server">
+  <input accept="image/*" type='file' id="imgInp" />
+  <img id="blah" src="#" alt="your image" />
+</form>
+
+
+imgInp.onchange = evt => {
+  const [file] = imgInp.files
+  if (file) {
+    blah.src = URL.createObjectURL(file)
+  }
+}

UI/src/app/login/index.ts

@@ -1,2 +1,2 @@
-export * from './login';
-
+export * from './login';
+

UI/src/app/login/login.css

@@ -1,10 +1,10 @@
-.btnloginRigh {
-    display: flex;
-    flex-direction:reverse;
-    justify-content:flex-end;
-   width: 100%;
-}
-.myerror {
-    background-color: red;
-    color: white;
+.btnloginRigh {
+    display: flex;
+    flex-direction:reverse;
+    justify-content:flex-end;
+   width: 100%;
+}
+.myerror {
+    background-color: red;
+    color: white;
 }

UI/src/app/login/login.html

@@ -1,45 +1,45 @@
-<div class="flex justify-center items-center h-full">
-  <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" style="max-width: 600px;min-width: 300px;">
-    <p-card>
-      <div>
-        <img class="border-round" style="width:100%;height:100px;" alt="Logo" src="images/application_image_login.png">
-      </div>
-      <div class="mt-4">
-        <div class="flex flex-col">
-          <label for="email" class="w-full">Email<strong class="validateStar">*</strong></label>
-          <input type="text" pInputText formControlName="username" name="email"
-            [ngClass]="{ 'is-invalid': submitted && f.username.errors }" class="p-inputtext-sm inputfield">
-
-        </div>
-        <div class="flex flex-col">
-          <label for="ppassword" class="w-full">Password <strong class="validateStar">*</strong></label>
-          <input type="password" formControlName="password" name="ppassword" pInputText
-            [ngClass]="{ 'is-invalid': submitted && f.password.errors }" class="p-inputtext-sm inputfield">
-        </div>
-
-      </div>
-      <!--p-footer -->
-      <div class="btnloginRigh">
-        <div class="mt-4  pt-2">
-          <button pButton type="submit" label="Login" class="p-button-sm" [disabled]="isFieldsChange"
-            [loading]="loading"></button>
-        </div>
-      </div>
-      <!--/p-footer-->
-
-    </p-card>
-    <div class="myerror">{{error}}</div>
-    <div style="padding-top: 10px;"></div>
-    <!--div
-    style="text-align: center;display:inline-block;border-radius: var(--border-radius) !important;background-color:#e1e1e1; color:#222;font-size:13px;width:100%; margin-left:5px;margin-right: 5px;">
-    <p >
-      For management access to this application please email 
-    </p>
-    <a href="mailto:NBMLHD-fleetteamreceipt@health.nsw.gov.au">NBMLHD-fleetteamreceipt@health.nsw.gov.au
-    </a>
-  
-  </div-->
-    <!--pre> {{loginForm.value|json}} </pre-->
-  </form>
-
+<div class="flex justify-center items-center h-full">
+  <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" style="max-width: 600px;min-width: 300px;">
+    <p-card>
+      <div>
+        <img class="border-round" style="width:100%;height:100px;" alt="Logo" src="images/application_image_login.png">
+      </div>
+      <div class="mt-4">
+        <div class="flex flex-col">
+          <label for="email" class="w-full">Email<strong class="validateStar">*</strong></label>
+          <input type="text" pInputText formControlName="username" name="email"
+            [ngClass]="{ 'is-invalid': submitted && f.username.errors }" class="p-inputtext-sm inputfield">
+
+        </div>
+        <div class="flex flex-col">
+          <label for="ppassword" class="w-full">Password <strong class="validateStar">*</strong></label>
+          <input type="password" formControlName="password" name="ppassword" pInputText
+            [ngClass]="{ 'is-invalid': submitted && f.password.errors }" class="p-inputtext-sm inputfield">
+        </div>
+
+      </div>
+      <!--p-footer -->
+      <div class="btnloginRigh">
+        <div class="mt-4  pt-2">
+          <button pButton type="submit" label="Login" class="p-button-sm" [disabled]="isFieldsChange"
+            [loading]="loading"></button>
+        </div>
+      </div>
+      <!--/p-footer-->
+
+    </p-card>
+    <div class="myerror">{{error}}</div>
+    <div style="padding-top: 10px;"></div>
+    <!--div
+    style="text-align: center;display:inline-block;border-radius: var(--border-radius) !important;background-color:#e1e1e1; color:#222;font-size:13px;width:100%; margin-left:5px;margin-right: 5px;">
+    <p >
+      For management access to this application please email 
+    </p>
+    <a href="mailto:NBMLHD-fleetteamreceipt@health.nsw.gov.au">NBMLHD-fleetteamreceipt@health.nsw.gov.au
+    </a>
+  
+  </div-->
+    <!--pre> {{loginForm.value|json}} </pre-->
+  </form>
+
 </div>

UI/src/app/login/login.ts

@@ -1,135 +1,137 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/core';
-import { Router, ActivatedRoute, RouterModule } from '@angular/router';
-import { FormBuilder, Validators, FormGroup } from '@angular/forms';
-import { first } from 'rxjs/operators';
-
-import { AuthenticationService } from '../user-services';
-
-import { ConfirmationService } from 'primeng/api';
-import { Subject, Subscription } from 'rxjs';
-import { CommonModule } from '@angular/common';
-import { CardModule } from 'primeng/card';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { ButtonModule } from 'primeng/button';
-import { InputTextModule } from 'primeng/inputtext';
-
-import { Utils } from '../shares';
-@Component({
-    templateUrl: './login.html',
-    styleUrl: './login.css',
-    selector: 'login',
-    imports: [FormsModule, ReactiveFormsModule, ButtonModule, InputTextModule,
-        RouterModule, CommonModule, CardModule],
-    
-})
-export class Login implements OnInit, OnDestroy {
-  loginForm: FormGroup;
-  confirmationService = inject(ConfirmationService);
-  route = inject(ActivatedRoute);
-  router = inject(Router);
-  authenticationService = inject(AuthenticationService);
-  formBuilder = inject(FormBuilder);
-  loading = false;
-  homeUrl = "/person";
-  submitted = false;
-  isChange = true; // disable use false//true for not disable. make sure it true is disable button. 
-  subChanged$ = new Subject<boolean>();
-  // get return url from route parameters or default to '/'
-  returnUrl = this.route.snapshot.queryParams['returnUrl'] || this.homeUrl;
-  error = '';
-  private subscription: Subscription = new Subscription();
-
-  constructor() {
-
-    this.loginForm = this.formBuilder.group({
-      username: ['kham.vilaythong@gmail.com', Validators.required],
-      password: ['password', Validators.required],
-
-    });
-  }
-
-  ngOnInit() {
-    // reset login status
-    this.loading = false;
-    this.subscription.add(this.loginForm.valueChanges.subscribe((x: any) => this.isChange = false));
-    this.subscription.add(this.subChanged$.subscribe(x => this.isChange = x));
-
-  }
-
-  updateData($event: Event) {
-    console.log("onChange click", $event);
-  }
-
-  // convenience getter for easy access to form fields
-  get f() { return this.loginForm.value; }
-  get isFieldsChange() {
-    const chan = this.isChange || !this.loginForm.valid; // this disable so need true valid = true not
-    //console.log(this.msg + 'is fields change', chan);
-    return chan;
-  }
-  onSubmit() {
-
-    //this.playAudio();
-
-    // stop here if form is invalid
-    if (this.loginForm.invalid) {
-      return;
-    }
-    const fvalue = this.loginForm.value;
-    this.loading = true;
-    this.error = "";
-    let username = "";
-    let password = "";
-    if (fvalue.username != null)
-      username = fvalue.username;
-    if (fvalue.password != null)
-      password = fvalue.password;
-    this.authenticationService.login(username, password)
-      .pipe(first())
-      .subscribe({
-        next: (x: any) => {
-          this.loading = false;
-          console.log("login result ", x.data, this.returnUrl);
-          if (x.statusCode == 1) {
-            // if (x.data.role == 1) {
-            //   this.homeService.reportDate = Utils.getLastMonth();
-            // this.router.navigate(['/addkpi/' + x.data.id + '/' + x.data.measureId], { queryParams: { returnUrl: '/login' } });
-
-            // }
-            // else if (x.data.role == 3) {
-            //  this.homeService.reportDate = Utils.getLastMonth();
-            //    this.router.navigate(['/approval/' + x.data.id], { queryParams: { returnUrl: '/login' } });
-
-            //}
-            // else
-            this.router.navigate([this.homeUrl]);
-          }
-          else {
-            this.loginForm.patchValue({ password: '' });
-            //  alert("Invalid Username or Password. Please try again.");
-            console.error("error in login", x);
-            this.confirmationService.confirm({
-              message: 'Error in Login: Invalid username or password. May be your password is expired',
-              header: 'Error Login',
-              icon: 'pi pi-info-circle',
-              rejectVisible: false,
-              acceptLabel: 'OK',
-
-            });
-          }
-        },
-        error: er => {
-          console.log("error in login", er);
-          this.error = er.message;
-          this.loading = false;
-        }
-      });
-
-  }
-  
-  ngOnDestroy(): void {
-    this.subscription.unsubscribe();
-    this.loading = false;
-  }
-
-}
+import { Component, OnDestroy, OnInit, inject } from '@angular/core';
+import { Router, ActivatedRoute, RouterModule } from '@angular/router';
+import { FormBuilder, Validators, FormGroup } from '@angular/forms';
+import { first } from 'rxjs/operators';
+
+import { AuthenticationService } from '../user-services';
+
+import { ConfirmationService } from '@openng/optimus-ui/api';
+import { Subject, Subscription } from 'rxjs';
+import { CommonModule } from '@angular/common';
+import { CardModule } from '@openng/optimus-ui/card';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
+
+import { AppSettingService, Utils } from '../shares';
+@Component({
+    templateUrl: './login.html',
+    styleUrl: './login.css',
+    selector: 'login',
+    imports: [FormsModule, ReactiveFormsModule, ButtonModule, InputTextModule,
+        RouterModule, CommonModule, CardModule],
+    
+})
+export class Login implements OnInit, OnDestroy {
+  loginForm: FormGroup;
+  confirmationService = inject(ConfirmationService);
+  route = inject(ActivatedRoute);
+  router = inject(Router);
+  authenticationService = inject(AuthenticationService);
+  formBuilder = inject(FormBuilder);
+   private appSetting =inject(AppSettingService);
+  loading = false;
+  homeUrl = "/person";
+  submitted = false;
+  isChange = true; // disable use false//true for not disable. make sure it true is disable button. 
+  subChanged$ = new Subject<boolean>();
+  // get return url from route parameters or default to '/'
+  returnUrl = this.route.snapshot.queryParams['returnUrl'] || this.homeUrl;
+  error = '';
+  private subscription: Subscription = new Subscription();
+
+  constructor() {
+    const default_us = this.appSetting.appSetting.username;
+    const pass = this.appSetting.appSetting.prefill_ps;
+    this.loginForm = this.formBuilder.group({
+      username: [default_us, Validators.required],
+      password: [pass, Validators.required],
+
+    });
+  }
+
+  ngOnInit() {
+    // reset login status
+    this.loading = false;
+    this.subscription.add(this.loginForm.valueChanges.subscribe((x: any) => this.isChange = false));
+    this.subscription.add(this.subChanged$.subscribe(x => this.isChange = x));
+
+  }
+
+  updateData($event: Event) {
+    console.log("onChange click", $event);
+  }
+
+  // convenience getter for easy access to form fields
+  get f() { return this.loginForm.value; }
+  get isFieldsChange() {
+    const chan = this.isChange || !this.loginForm.valid; // this disable so need true valid = true not
+    //console.log(this.msg + 'is fields change', chan);
+    return chan;
+  }
+  onSubmit() {
+
+    //this.playAudio();
+
+    // stop here if form is invalid
+    if (this.loginForm.invalid) {
+      return;
+    }
+    const fvalue = this.loginForm.value;
+    this.loading = true;
+    this.error = "";
+    let username = "";
+    let password = "";
+    if (fvalue.username != null)
+      username = fvalue.username;
+    if (fvalue.password != null)
+      password = fvalue.password;
+    this.authenticationService.login(username, password)
+      .pipe(first())
+      .subscribe({
+        next: (x: any) => {
+          this.loading = false;
+          console.log("login result ", x.data, this.returnUrl);
+          if (x.statusCode == 1) {
+            // if (x.data.role == 1) {
+            //   this.homeService.reportDate = Utils.getLastMonth();
+            // this.router.navigate(['/addkpi/' + x.data.id + '/' + x.data.measureId], { queryParams: { returnUrl: '/login' } });
+
+            // }
+            // else if (x.data.role == 3) {
+            //  this.homeService.reportDate = Utils.getLastMonth();
+            //    this.router.navigate(['/approval/' + x.data.id], { queryParams: { returnUrl: '/login' } });
+
+            //}
+            // else
+            this.router.navigate([this.homeUrl]);
+          }
+          else {
+            this.loginForm.patchValue({ password: '' });
+            //  alert("Invalid Username or Password. Please try again.");
+            console.error("error in login", x);
+            this.confirmationService.confirm({
+              message: 'Error in Login: Invalid username or password. May be your password is expired',
+              header: 'Error Login',
+              icon: 'pi pi-info-circle',
+              rejectVisible: false,
+              acceptLabel: 'OK',
+
+            });
+          }
+        },
+        error: er => {
+          console.log("error in login", er);
+          this.error = er.message;
+          this.loading = false;
+        }
+      });
+
+  }
+  
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+    this.loading = false;
+  }
+
+}

UI/src/app/models/code.ts

@@ -1,6 +1,6 @@
-export interface Code {
-    id:number;
-    name:string;
-    status?:string;
-    active?:boolean;
-}
+export interface Code {
+    id:number;
+    name:string;
+    status?:string;
+    active?:boolean;
+}

UI/src/app/models/configureUrl.ts

@@ -1,17 +1,17 @@
-export enum ConfigureUrl
-{
-   //baseUrl = "http://localhost:61744",
-    loginApiUrl = "api/Users/Login",
-    searchStaffUrl = "api/Users/SearchADStaff",
-    staffUrl = "api/Staff",
-    personUrl = "api/Person",  
-    staffWorkUrl = "api/StaffWork",   
-    jobUrl ="api/Job",
-    clientUrl ="api/Client",
-    relationShipUrl ="api/RelationShip",
-    logoutUrl ="api/Users/Logout",
-    adminUserUrl = "api/Staff",
-    lookupUrl = "api/Lookup",
-    FileUploadUrl = "api/FileUpload",
-    
+export enum ConfigureUrl
+{
+   //baseUrl = "http://localhost:61744",
+    loginApiUrl = "api/Users/Login",
+    searchStaffUrl = "api/Users/SearchADStaff",
+    staffUrl = "api/Staff",
+    personUrl = "api/Person",  
+    staffWorkUrl = "api/StaffWork",   
+    jobUrl ="api/Job",
+    clientUrl ="api/Client",
+    relationShipUrl ="api/RelationShip",
+    logoutUrl ="api/Users/Logout",
+    adminUserUrl = "api/Staff",
+    lookupUrl = "api/Lookup",
+    FileUploadUrl = "api/FileUpload",
+    
 }

UI/src/app/models/enum.ts

@@ -1,37 +1,40 @@
-export const MIMEType = {
-  png: 'image/png',
-  jpg: 'image/jpg',
-  jpeg: 'image/jpeg',
-  gif: 'image/gif',
-  txt: 'text/plain',
-  pdf: 'application/pdf'
-};
-
-
-//for status of object 0 no change, 1 changed , -1 is deleted.
-export enum mState {
-  Delete = -1,
-  NoChange = 0,
-  Modified = 1,
-  New =2,
-};
-
-export enum userRole {
-  Normal = 1,
-  Admin = 2,
-  ServiceManager =3,
-  Accounting = 4,
-  WorkShop = 5,
-
-};
-
-export enum enumReqStatus {
-  Canel = -1,
-  Decline = -2,
-  NewRequest = 0,
-  Allocate = 1,
-  Arrival = 2,
-  Completed = 3,
-  OnHold = 4,
-  OffHold = 5
-};
+export const MIMEType = {
+  png: 'image/png',
+  jpg: 'image/jpg',
+  jpeg: 'image/jpeg',
+  gif: 'image/gif',
+  txt: 'text/plain',
+  pdf: 'application/pdf'
+};
+
+
+//for status of object 0 no change, 1 changed , -1 is deleted.
+export enum mState {
+  Delete = -1,
+  NoChange = 0,
+  Modified = 1,
+  New =2,
+};
+export enum enumPhoto {
+  Profile = 1,
+  Other = 2
+}
+export enum userRole {
+  Normal = 1,
+  Admin = 2,
+  ServiceManager =3,
+  Accounting = 4,
+  WorkShop = 5,
+
+};
+
+export enum enumReqStatus {
+  Canel = -1,
+  Decline = -2,
+  NewRequest = 0,
+  Allocate = 1,
+  Arrival = 2,
+  Completed = 3,
+  OnHold = 4,
+  OffHold = 5
+};

UI/src/app/models/index.ts

@@ -1,11 +1,11 @@
-export * from './code';
-export * from './configureUrl';
-export * from './user';
-export * from './resultmodel';
-export * from './enum';
-export * from './lookup';
-export * from './staff';
-export * from './person';
-export * from './job';
-export * from './relationship';
+export * from './code';
+export * from './configureUrl';
+export * from './user';
+export * from './resultmodel';
+export * from './enum';
+export * from './lookup';
+export * from './staff';
+export * from './person';
+export * from './job';
+export * from './relationship';
 export * from './personphotodto';

UI/src/app/models/job.ts

@@ -1,12 +1,12 @@
-
-export interface JobSearch {
-    code:string;
-    description:string;
-}
-export interface Job {
-    id:number;
-    code:string|null|undefined;
-    description:string |null|undefined;
-    active:boolean |null|undefined;
-      
-}
+
+export interface JobSearch {
+    code:string;
+    description:string;
+}
+export interface Job {
+    id:number;
+    code:string|null|undefined;
+    description:string |null|undefined;
+    active:boolean |null|undefined;
+      
+}

UI/src/app/models/lookup.ts

@@ -1,16 +1,16 @@
-// using for priority and infectionType
-export interface Lookup {
-    id:number;
-    codeId:string;
-    description:string;
-    
-}
-
-export interface LookupEdit {
-    id:number;
-    codeId:string;
-    description:string;
-    active:boolean;
-    type:string;
-    
+// using for priority and infectionType
+export interface Lookup {
+    id:number;
+    codeId:string;
+    description:string;
+    
+}
+
+export interface LookupEdit {
+    id:number;
+    codeId:string;
+    description:string;
+    active:boolean;
+    type:string;
+    
 }

UI/src/app/models/mydetail.ts

@@ -1,7 +1,7 @@
-export interface MyDetail{
-	id:number,
-	login:string,
-	firstname:string,
-	surname:string,
-	jobTitle:string,
+export interface MyDetail{
+	id:number,
+	login:string,
+	firstname:string,
+	surname:string,
+	jobTitle:string,
 }

UI/src/app/models/person.ts

@@ -1,37 +1,37 @@
-import { PersonPhotoDto } from "./personphotodto";
-import { RelationShip } from "./relationship";
-
-export interface FamilySearch {
-    email:string|null;
-    phone:string |null;
-    clientname:string |null;
-}
-
-export interface Person {
-	 
-    id: number;
-    title?:string| null| undefined;
-    firstName: string | null|undefined;
-    lastName: string | null|undefined;
-    email: string | null|undefined;
-    phone: string | null|undefined;
-    address?: string | null|undefined;
-    alive: boolean | null|undefined;
-    dob? : string | null|undefined;
-    fatherId?: number| null|undefined;
-    motherId?: number| null|undefined;
-    image?: string|null|undefined;
-    sex?: string|null|undefined;
-    fatherName?:string |null;
-    motherName?:string |null;
-    relationShips?: RelationShip[];
-    personPhotos?: PersonPhotoDto[];
-}
-
-export interface PersonContainer
-{
-    person: Person;
-    formData?:FormData;
-    
-}
-
+import { PersonPhotoDto } from "./personphotodto";
+import { RelationShip } from "./relationship";
+
+export interface FamilySearch {
+    email:string|null;
+    phone:string |null;
+    clientname:string |null;
+}
+
+export interface Person {
+	 
+    id: number;
+    title?:string| null| undefined;
+    firstName: string | null|undefined;
+    lastName: string | null|undefined;
+    email: string | null|undefined;
+    phone: string | null|undefined;
+    address?: string | null|undefined;
+    alive: boolean | null|undefined;
+    dob? : string | null|undefined;
+    fatherId?: number| null|undefined;
+    motherId?: number| null|undefined;
+    image?: string|null|undefined;
+    sex?: string|null|undefined;
+    fatherName?:string |null;
+    motherName?:string |null;
+    relationShips?: RelationShip[];
+    personPhotos?: PersonPhotoDto[];
+}
+
+export interface PersonContainer
+{
+    person: Person;
+    formData?:FormData;
+    
+}
+

UI/src/app/models/personphotodto.ts

@@ -1,6 +1,6 @@
-export interface PersonPhotoDto {
-    id: number;
-    photo:string|null | undefined;
-    photoType:string |null | undefined;
-    file: File | null | undefined;
+export interface PersonPhotoDto {
+    id: number;
+    photo:string|null | undefined;
+    photoType:string |null | undefined;
+    file: File | null | undefined;
 }

UI/src/app/models/relationship.ts

@@ -1,27 +1,27 @@
-import { mState } from "./enum";
-
-export interface RelationShip {
-    id: number;    
-    relatePersonId: number;
-    personId: number;
-    state: mState;
-}
-//relationship id this relatePersonId person has relation with other person
-// also other person has also has relation with you. look in two way
-// person id = 1 has to relation id = 90
-// that means when you edit person 90 their relation ship also be there.
-// so personid = 1 and relation id = 90 we need to show other way around.
-//example first name = Smith has partner Jennifer
-// when we edit Jennifer it should show Smith as her partner too.
-
-export interface RelationShipView {
-    id: number;
-    relatePersonId:number;
-    personId : number;
-    pfirstName: string |null |undefined;
-    plastName: string |null |undefined;
-    sex:string |null |undefined;
-    state: mState;
-   
-
+import { mState } from "./enum";
+
+export interface RelationShip {
+    id: number;    
+    relatePersonId: number;
+    personId: number;
+    state: mState;
+}
+//relationship id this relatePersonId person has relation with other person
+// also other person has also has relation with you. look in two way
+// person id = 1 has to relation id = 90
+// that means when you edit person 90 their relation ship also be there.
+// so personid = 1 and relation id = 90 we need to show other way around.
+//example first name = Smith has partner Jennifer
+// when we edit Jennifer it should show Smith as her partner too.
+
+export interface RelationShipView {
+    id: number;
+    relatePersonId:number;
+    personId : number;
+    pfirstName: string |null |undefined;
+    plastName: string |null |undefined;
+    sex:string |null |undefined;
+    state: mState;
+   
+
 }

UI/src/app/models/resultmodel.ts

@@ -1,5 +1,5 @@
-export interface ResultModel<T> {
-    data: T;
-    message: string;
-    statusCode:number;
+export interface ResultModel<T> {
+    data: T;
+    message: string;
+    statusCode:number;
 }

UI/src/app/models/staff.ts

@@ -1,39 +1,39 @@
-export interface StaffView {
-	id:number,
-	email:string,
-	firstname:string,
-	lastname:string,
-	active:boolean,
-}
-
-export interface ResetPassword{
-	id:number;
-	password:string;
-}
-
-export interface Staff {
-	id:number,
-	email:string,
-	firstname:string,
-	lastname:string,
-	phone:string,
-	type:number;	
-	active:boolean;
-	roleType: number;
-	password?:string,
-}
-
-export interface StaffSearch {
-	email:string;
-	firstName:string;
-	lastName:string;
-}
-
-//this use for new user only.
-export interface AdminUserNew {
-	loginId:number;
-	user: Staff;// first get userid from this table and 
-	
-	
-}
-
+export interface StaffView {
+	id:number,
+	email:string,
+	firstname:string,
+	lastname:string,
+	active:boolean,
+}
+
+export interface ResetPassword{
+	id:number;
+	password:string;
+}
+
+export interface Staff {
+	id:number,
+	email:string,
+	firstname:string,
+	lastname:string,
+	phone:string,
+	type:number;	
+	active:boolean;
+	roleType: number;
+	password?:string,
+}
+
+export interface StaffSearch {
+	email:string;
+	firstName:string;
+	lastName:string;
+}
+
+//this use for new user only.
+export interface AdminUserNew {
+	loginId:number;
+	user: Staff;// first get userid from this table and 
+	
+	
+}
+

UI/src/app/models/user.ts

@@ -1,36 +1,36 @@
-export class User {
-  id: number = 0;
-  username: string = '';
-  role: number = -1;
-  firstName: string = '';
-  lastName: string = '';
-  email:string = '';
-  token:string ='';
-  position: string ='';
-  department: string = '';
-  managerEmail:string ='';
-  phone:string='';
- 
-}
-
-export interface UserAD 
-{
-    id: number,
-    firstName: string,
-    lastName: string,
-    email: string,
-    username: string,
-    department: string,
-    position: string,
-    role: number,
-     phone:string,
-     managerEmail:string
-  }
-
-export class SecAccessLevel {
-  accessName:string='';
-  request:number=0;
-  report:number=0;
-  admin:number=0;
-  allocation:number=0;
-}
+export class User {
+  id: number = 0;
+  username: string = '';
+  role: number = -1;
+  firstName: string = '';
+  lastName: string = '';
+  email:string = '';
+  token:string ='';
+  position: string ='';
+  department: string = '';
+  managerEmail:string ='';
+  phone:string='';
+ 
+}
+
+export interface UserAD 
+{
+    id: number,
+    firstName: string,
+    lastName: string,
+    email: string,
+    username: string,
+    department: string,
+    position: string,
+    role: number,
+     phone:string,
+     managerEmail:string
+  }
+
+export class SecAccessLevel {
+  accessName:string='';
+  request:number=0;
+  report:number=0;
+  admin:number=0;
+  allocation:number=0;
+}

UI/src/app/mythem.ts

@@ -1,51 +1,41 @@
 
 
 //mypreset.ts
-import { definePreset } from '@primeuix/themes';
-import Aura from '@primeuix/themes/aura';
-import { primitive } from '@primeuix/themes/aura/base';
+import { definePreset } from '@openng/optimus-ui-themes';
+import Aura from '@openng/optimus-ui-themes/aura';
 
 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}'
+        primary: {
+            50: '{blue.50}',
+            100: '{blue.100}',
+            200: '{blue.200}',
+            300: '{blue.300}',
+            400: '{blue.400}',
+            500: '{blue.500}',
+            600: '{blue.600}',
+            700: '{blue.700}',
+            800: '{blue.800}',
+            900: '{blue.900}',
+            950: '{blue.950}'
         },
+        colorScheme: {
+
+
             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}'
+                    50: '{blue.50}',
+                    100: '{blue.100}',
+                    200: '{blue.200}',
+                    300: '{blue.300}',
+                    400: '{blue.400}',
+                    500: '{blue.500}',
+                    600: '{blue.600}',
+                    700: '{blue.700}',
+                    800: '{blue.800}',
+                    900: '{blue.900}',
+                    950: '{blue.950}'
                 }
             },
             dark: {
@@ -65,6 +55,7 @@ const MyPreset = definePreset(Aura, {
                 }
             }
         }
+
     }
 });
 

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

@@ -1,12 +1,12 @@
-table {
-  width: 100%;
-}
-
-.mat-form-field {
-  font-size: 14px;
-  width: 100%;
-}
-td.mat-column-edit, .mat-column-delete {
-  width: 35px;
-  padding-right: 2px;
-}
+table {
+  width: 100%;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+td.mat-column-edit, .mat-column-delete {
+  width: 35px;
+  padding-right: 2px;
+}

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

@@ -1,39 +1,39 @@
-<div class="shadow-2xl rounded p-2 mt-2">
-<h3>Family Tree </h3>
-<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 #targetEl class="flex flex-col items-center">
-                @if (node.data.image != "")
-                {
-                  <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" /-->
-                <div class="mt-2 font-medium text-lg">{{ node.label }}</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>
-        </ng-template>
-    </p-organization-chart>
-</div>
-<div class="flex justify-end">
-        <button pButton pRipple class="p-button-sm mr-2 p-button-success" type="button" icon="pi pi-sign-in" label="Close"
-          (click)="close()"></button>
-  </div>
-</div>
-  
+<div class="shadow-2xl rounded p-2 mt-2">
+<h3>Family Tree </h3>
+<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 #targetEl class="flex flex-col items-center">
+                @if (node.data.image != "")
+                {
+                  <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" /-->
+                <div class="mt-2 font-medium text-lg">{{ node.label }}</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>
+        </ng-template>
+    </p-organization-chart>
+</div>
+<div class="flex justify-end">
+        <button pButton pRipple class="p-button-sm mr-2 p-button-success" type="button" icon="pi pi-sign-in" label="Close"
+          (click)="close()"></button>
+  </div>
+</div>
+  

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

@@ -1,256 +1,256 @@
-import { Component, OnInit, OnDestroy, inject, ChangeDetectorRef, signal} from '@angular/core';
-
-import { StaffView ,StaffSearch, Person, RelationShip } from '../models';
-import { OrganizationChartModule } from 'primeng/organizationchart';
-
-import { take } from 'rxjs/operators';
-import { Subscription } from 'rxjs';
-import { PersonService } from './person.service';
-import { TableModule } from 'primeng/table';
-import { FormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-import { ButtonModule } from 'primeng/button';
-import { TreeNode } from 'primeng/api';
-import { InputTextModule } from 'primeng/inputtext';
-import { DialogService, DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
-import { PersonEdit } from './person.edit';
-import { MessageService } from 'primeng/api';
-import { TreeModule, TreeNodeDoubleClickEvent, TreeNodeSelectEvent } from 'primeng/tree';
-import { Utils } from '../shares';
-import { PopoverModule } from 'primeng/popover';
-
-@Component({
-  selector: 'family-orga',
-  templateUrl: './family.orga.html',
-  imports:[TableModule,FormsModule,TreeModule,PopoverModule, OrganizationChartModule,CommonModule,ButtonModule,InputTextModule],
-  styleUrls: ['./family.orga.css'],
-  providers: [DialogService]
-})
-export class FamilyOrga implements OnInit, OnDestroy{
-
-  private subscription:Subscription = new Subscription();
-    person!: Person;
-    selectedNode!: TreeNode;
-    selectedNodes!: TreeNode[];
-    private cd = inject(ChangeDetectorRef);
-    familyTree = signal<TreeNode[]>([]);
-    relations: RelationShip[] =[];
-    _id = -10;
-    loading = false;
-    familyList:Person[] = [];
-    msg ="[Person organise component]";
-  private messageService = inject(MessageService);
-  public ref = inject(DynamicDialogRef); 
-  public config = inject(DynamicDialogConfig);
-  /*
-  private store: Store<appValidationState>
-  */
- private personService = inject(PersonService);
- public dialogService = inject(DialogService);
-  
-  ngOnInit(): void
-  { 
-    const id = this.config.data.id;   
-    this.familyList = this.config.data.familyList;
-    const item = this.familyList.find(x => x.id == id);
-    if (item != undefined)
-      this.person = item;
-    this.loadPersonFamilyTree(id);
-   //this.populateTree();
-    
-  }  
-  populateTree() : void {
-    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: [
-                {
-                    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: 'Sales',
-                            styleClass: 'bg-purple-500 text-white',
-                            style: ' border-radius: 12px'
-                        },
-                        {
-                            label: 'Marketing',
-                            styleClass: 'bg-purple-500 text-white',
-                            style: ' border-radius: 12px'
-                        }
-                    ]
-                },
-                {
-                    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: 'Development',
-                            styleClass: 'bg-teal-500 text-white'
-                        },
-                        {
-                            label: 'UI/UX Design',
-                            styleClass: 'bg-teal-500 text-white'
-                        }
-                    ]
-                }
-            ]
-        }
-    ];
-    this.familyTree.set(data);
-  }
-  loadPersonFamilyTree(id: number): void {
-  const relationShip$ = this.personService.loadPersonFamily(id);
-    this.subscription.add(relationShip$.subscribe(
-      {
-        next: x => {
-          if (x.statusCode == 1)
-          {
-            let tree : TreeNode[] =[];
-            tree.push(x.data);
-            this.familyTree.set(tree);
-            console.log("load person family", this.familyTree());
-           
-          }
-        },
-        error: e => {
-          console.error("error load loadPersonFamily by personId", id);
-           this.messageService.add({severity:'error', summary: 'error load loadPersonFamily by personId', detail: e.message});
-        }
-      }
-    ));
-  }
-
-  nodeSelect(event: TreeNodeSelectEvent) {
-      //  this.messageService.add({ severity: 'info', summary: 'Node Selected', detail: event.node.label });
-  }
-nodeDoubleSelect(event:TreeNodeDoubleClickEvent) : void {
- // console.log("double click node", event.node.key);
-  const id = event.node.key;
-  this.edit(Number(id));
-}
-
-  getName(id:number): string
-  {
-    let result ="";
-    const item = this.familyList.find(x => x.id == id);
-    if (item)
-      result = item.lastName + " " + item.firstName;
-    return result;
-  }
-  updateParent(list:Person[]):void {
-    let i = 0;
-    let item:Person;
-    for (i = 0; i< list.length; i++)
-    {
-      item = list[i];
-      if (item.fatherId && item.fatherId > 0)
-      {
-        item.fatherName = this.getName(item.fatherId);
-      }
-    }
-  }
-
-  newFamily():void {
-  //console.log("add new employee");
-    this.personService.parentList = this.familyList;
-  //  this.router.navigate( ['/family/new'], { queryParams: {returnUrl:'/family' } });
-    this.showEdit(this._id--);
-  }
-  edit(id: number) : void {
-    //console.log("edit family", id);
-    this.personService.parentList = this.familyList;
-   // this.router.navigate( ['/family/'+id], { queryParams: {returnUrl:'/family' } });
-    this.showEdit(id);
-  }
-  showEdit(id:number) {
-    const ref = this.dialogService.open(PersonEdit, {
-      data: {
-         id, 
-         familyList: this.familyList,         
-    },
-      header: 'Family',
-      width: '80%',
-      maximizable: true
-    });
-    if (ref)
-    {
-    ref.onClose.subscribe((item: Person) => {
-      if (item) {
-        //console.log("after close ward edit", item);
-        this.messageService.add({severity:'success', summary: 'Save Family', detail: item.firstName!});
-       //update the current list
-        this.updateList(item);
-      }
-      });
-    }
-   }
-   updateList(item: Person) :void {
-    const idx = this.familyList.findIndex( x => x.id == item.id);
-    if (item.fatherId && item.fatherId > 0)
-      item.fatherName = this.getName(item.fatherId);
-    if (item.motherId && item.motherId > 0)
-      item.motherName = this.getName(item.motherId);
-    if (idx < 0)
-    {
-      
-      const olist = [... this.familyList, item];
-      this.familyList = olist;
-    }
-    else
-    {
-      const oitem = this.familyList[idx];
-      oitem.firstName = item.firstName;
-      oitem.lastName = item.lastName;
-      oitem.address = item.address;
-      oitem.alive = item.alive;
-      oitem.dob = item.dob;
-      oitem.email = item.email;
-      oitem.fatherId = item.fatherId;
-      oitem.motherId = item.motherId;
-      oitem.motherName = item.motherName;
-      oitem.fatherName = item.fatherName;
-      
-    }
-   }
-  deleteItem(id: number): void {
-    this.personService.deletePerson(id)
-      .pipe(take(1))
-      .subscribe({ next: result => {
-      console.log(this.msg + " deleteItem success", result);
-      
-      const nlist = this.familyList.filter(d => d.id !== id);
-      this.familyList = nlist;    
-      },
-      error: e => console.error(e)
-    });
-    //console.log(this.msg + "click button to delete");
-  }
-  close() :void {
-     this.ref.close(null);
-  }
-
-  ngOnDestroy() {
-		this.subscription.unsubscribe();
-	}
-}
-
+import { Component, OnInit, OnDestroy, inject, ChangeDetectorRef, signal} from '@angular/core';
+
+import { StaffView ,StaffSearch, Person, RelationShip } from '../models';
+import { OrganizationChartModule } from '@openng/optimus-ui/organizationchart';
+
+import { take } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
+import { PersonService } from './person.service';
+import { TableModule } from '@openng/optimus-ui/table';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { TreeNode } from '@openng/optimus-ui/api';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
+import { DialogService, DynamicDialogConfig, DynamicDialogRef } from '@openng/optimus-ui/dynamicdialog';
+import { PersonEdit } from './person.edit';
+import { MessageService } from '@openng/optimus-ui/api';
+import { TreeModule, TreeNodeDoubleClickEvent, TreeNodeSelectEvent } from '@openng/optimus-ui/tree';
+import { Utils } from '../shares';
+import { PopoverModule } from '@openng/optimus-ui/popover';
+
+@Component({
+  selector: 'family-orga',
+  templateUrl: './family.orga.html',
+  imports:[TableModule,FormsModule,TreeModule,PopoverModule, OrganizationChartModule,CommonModule,ButtonModule,InputTextModule],
+  styleUrls: ['./family.orga.css'],
+  providers: [DialogService]
+})
+export class FamilyOrga implements OnInit, OnDestroy{
+
+  private subscription:Subscription = new Subscription();
+    person!: Person;
+    selectedNode!: TreeNode;
+    selectedNodes!: TreeNode[];
+    private cd = inject(ChangeDetectorRef);
+    familyTree = signal<TreeNode[]>([]);
+    relations: RelationShip[] =[];
+    _id = -10;
+    loading = false;
+    familyList:Person[] = [];
+    msg ="[Person organise component]";
+  private messageService = inject(MessageService);
+  public ref = inject(DynamicDialogRef); 
+  public config = inject(DynamicDialogConfig);
+  /*
+  private store: Store<appValidationState>
+  */
+ private personService = inject(PersonService);
+ public dialogService = inject(DialogService);
+  
+  ngOnInit(): void
+  { 
+    const id = this.config.data.id;   
+    this.familyList = this.config.data.familyList;
+    const item = this.familyList.find(x => x.id == id);
+    if (item != undefined)
+      this.person = item;
+    this.loadPersonFamilyTree(id);
+   //this.populateTree();
+    
+  }  
+  populateTree() : void {
+    const data: TreeNode[] = [
+        {
+            expanded: true,
+            type: 'person',
+        styleClass: 'bg-blue-500 text-white',
+            data: {
+                image: 'https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png',
+                name: 'Amy Elsner',
+                title: 'CEO'
+            },
+            children: [
+                {
+                    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: 'Sales',
+                            styleClass: 'bg-purple-500 text-white',
+                            style: ' border-radius: 12px'
+                        },
+                        {
+                            label: 'Marketing',
+                            styleClass: 'bg-purple-500 text-white',
+                            style: ' border-radius: 12px'
+                        }
+                    ]
+                },
+                {
+                    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: 'Development',
+                            styleClass: 'bg-teal-500 text-white'
+                        },
+                        {
+                            label: 'UI/UX Design',
+                            styleClass: 'bg-teal-500 text-white'
+                        }
+                    ]
+                }
+            ]
+        }
+    ];
+    this.familyTree.set(data);
+  }
+  loadPersonFamilyTree(id: number): void {
+  const relationShip$ = this.personService.loadPersonFamily(id);
+    this.subscription.add(relationShip$.subscribe(
+      {
+        next: x => {
+          if (x.statusCode == 1)
+          {
+            let tree : TreeNode[] =[];
+            tree.push(x.data);
+            this.familyTree.set(tree);
+            console.log("load person family", this.familyTree());
+           
+          }
+        },
+        error: e => {
+          console.error("error load loadPersonFamily by personId", id);
+           this.messageService.add({severity:'error', summary: 'error load loadPersonFamily by personId', detail: e.message});
+        }
+      }
+    ));
+  }
+
+  nodeSelect(event: TreeNodeSelectEvent) {
+      //  this.messageService.add({ severity: 'info', summary: 'Node Selected', detail: event.node.label });
+  }
+nodeDoubleSelect(event:TreeNodeDoubleClickEvent) : void {
+ // console.log("double click node", event.node.key);
+  const id = event.node.key;
+  this.edit(Number(id));
+}
+
+  getName(id:number): string
+  {
+    let result ="";
+    const item = this.familyList.find(x => x.id == id);
+    if (item)
+      result = item.lastName + " " + item.firstName;
+    return result;
+  }
+  updateParent(list:Person[]):void {
+    let i = 0;
+    let item:Person;
+    for (i = 0; i< list.length; i++)
+    {
+      item = list[i];
+      if (item.fatherId && item.fatherId > 0)
+      {
+        item.fatherName = this.getName(item.fatherId);
+      }
+    }
+  }
+
+  newFamily():void {
+  //console.log("add new employee");
+    this.personService.parentList = this.familyList;
+  //  this.router.navigate( ['/family/new'], { queryParams: {returnUrl:'/family' } });
+    this.showEdit(this._id--);
+  }
+  edit(id: number) : void {
+    //console.log("edit family", id);
+    this.personService.parentList = this.familyList;
+   // this.router.navigate( ['/family/'+id], { queryParams: {returnUrl:'/family' } });
+    this.showEdit(id);
+  }
+  showEdit(id:number) {
+    const ref = this.dialogService.open(PersonEdit, {
+      data: {
+         id, 
+         familyList: this.familyList,         
+    },
+      header: 'Family',
+      width: '80%',
+      maximizable: true
+    });
+    if (ref)
+    {
+    ref.onClose.subscribe((item: Person) => {
+      if (item) {
+        //console.log("after close ward edit", item);
+        this.messageService.add({severity:'success', summary: 'Save Family', detail: item.firstName!});
+       //update the current list
+        this.updateList(item);
+      }
+      });
+    }
+   }
+   updateList(item: Person) :void {
+    const idx = this.familyList.findIndex( x => x.id == item.id);
+    if (item.fatherId && item.fatherId > 0)
+      item.fatherName = this.getName(item.fatherId);
+    if (item.motherId && item.motherId > 0)
+      item.motherName = this.getName(item.motherId);
+    if (idx < 0)
+    {
+      
+      const olist = [... this.familyList, item];
+      this.familyList = olist;
+    }
+    else
+    {
+      const oitem = this.familyList[idx];
+      oitem.firstName = item.firstName;
+      oitem.lastName = item.lastName;
+      oitem.address = item.address;
+      oitem.alive = item.alive;
+      oitem.dob = item.dob;
+      oitem.email = item.email;
+      oitem.fatherId = item.fatherId;
+      oitem.motherId = item.motherId;
+      oitem.motherName = item.motherName;
+      oitem.fatherName = item.fatherName;
+      
+    }
+   }
+  deleteItem(id: number): void {
+    this.personService.deletePerson(id)
+      .pipe(take(1))
+      .subscribe({ next: result => {
+      console.log(this.msg + " deleteItem success", result);
+      
+      const nlist = this.familyList.filter(d => d.id !== id);
+      this.familyList = nlist;    
+      },
+      error: e => console.error(e)
+    });
+    //console.log(this.msg + "click button to delete");
+  }
+  close() :void {
+     this.ref.close(null);
+  }
+
+  ngOnDestroy() {
+		this.subscription.unsubscribe();
+	}
+}
+

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

@@ -1,12 +1,12 @@
-table {
-  width: 100%;
-}
-
-.mat-form-field {
-  font-size: 14px;
-  width: 100%;
-}
-td.mat-column-edit, .mat-column-delete {
-  width: 35px;
-  padding-right: 2px;
-}
+table {
+  width: 100%;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+td.mat-column-edit, .mat-column-delete {
+  width: 35px;
+  padding-right: 2px;
+}

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

@@ -1,35 +1,35 @@
-<div class="shadow-2xl rounded p-2 mt-2">
-<h3>Family Tree by Person has Father</h3>
-<div>
-  <form>
-    <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-sitemap" label="Load"
-          (click)="load()"></button>
-       </div> 
-    </div>
-  </form>
-</div>
-<div>
-  <p-tree [value]="familyTree" class="w-full md:w-[30rem]" 
-   (onNodeDoubleClick)="nodeDoubleSelect($event)"
-   selectionMode="single" [(selection)]="selectedNode" (onNodeSelect)="nodeSelect($event)" />
-<!--div class="card flex justify-center overflow-x-auto">
-    <p-organization-chart [value]="familyTree" selectionMode="multiple" [(selection)]="selectedNodes" [collapsible]="true">
-        <ng-template let-node pTemplate="person">
-            <div class="flex flex-col">
-                <div class="flex flex-col items-center">
-                    <img [src]="node.data.image" class="mb-4 w-12 h-12" />
-                    <div class="font-bold mb-2">{{ node.data.name }}</div>
-                    <div>{{ node.data.title }}</div>
-                </div>
-            </div>
-        </ng-template>
-    </p-organization-chart>
-</div-->
-</div>
-  
+<div class="shadow-2xl rounded p-2 mt-2">
+<h3>Family Tree by Person has Father</h3>
+<div>
+  <form>
+    <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-sitemap" label="Load"
+          (click)="load()"></button>
+       </div> 
+    </div>
+  </form>
+</div>
+<div>
+  <p-tree [value]="familyTree" class="w-full md:w-[30rem]" 
+   (onNodeDoubleClick)="nodeDoubleSelect($event)"
+   selectionMode="single" [(selection)]="selectedNode" (onNodeSelect)="nodeSelect($event)" />
+<!--div class="card flex justify-center overflow-x-auto">
+    <p-organization-chart [value]="familyTree" selectionMode="multiple" [(selection)]="selectedNodes" [collapsible]="true">
+        <ng-template let-node pTemplate="person">
+            <div class="flex flex-col">
+                <div class="flex flex-col items-center">
+                    <img [src]="node.data.image" class="mb-4 w-12 h-12" />
+                    <div class="font-bold mb-2">{{ node.data.name }}</div>
+                    <div>{{ node.data.title }}</div>
+                </div>
+            </div>
+        </ng-template>
+    </p-organization-chart>
+</div-->
+</div>
+  

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

@@ -1,227 +1,227 @@
-import { Component, OnInit, OnDestroy, inject, ChangeDetectorRef, signal} from '@angular/core';
-
-import { StaffView ,StaffSearch, Person } from '../models';
-import { OrganizationChartModule } from 'primeng/organizationchart';
-
-import { take } from 'rxjs/operators';
-import { Subscription } from 'rxjs';
-import { Router } from '@angular/router';
-import { PersonService } from './person.service';
-import { AuthenticationService } from '../user-services';
-import { TableModule } from 'primeng/table';
-import { FormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-import { ButtonModule } from 'primeng/button';
-import { TreeNode } from 'primeng/api';
-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,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;
-    private cd = inject(ChangeDetectorRef);
-    familyTree: TreeNode[] = [];
-    email = '';
-    lastname = '';
-    _id = -10;
-    loading = false;
-    familyList:Person[] = [];
-    msg ="[Person tree component]";
-  private messageService = inject(MessageService);
-  /*
-  private store: Store<appValidationState>
-  */
-  constructor(  
-    public dialogService: DialogService,
-    private personService: PersonService,
-    private authenticationService: AuthenticationService,
-    private router: Router    
-     ) {}
-  getSearchCiteria(): StaffSearch {
-    let criteria:StaffSearch = {
-      email: this.email,
-      firstName: this.firstname,
-      lastName: this.lastname,
-    };
-
-    return criteria;
-
-  }
-  canSearch():boolean {
-    let result = false;
-    result = this.email !== "";
-    result = result || this.lastname !== "";
-    result = result || this.firstname !== "";
-    return result;
-  }
-  ngOnInit(): void
-  { 
-    this.authenticationService.isHome = false;
-    this.authenticationService.isReport = false;
-  const prev = this.personService.searchCriteria;
-    let goload = true;
-    this.load();
-    
-  }  
-  getActive(active:boolean):string {
-    let result = 'false-icon pi-times-circle';
-    if (active)
-      result = 'true-icon pi-check-circle';
-    return result;
-  }
-  load():void {
-    let father = this.isFather(); 
-      this.loading = true;
-      //const criteria = this.getSearchCiteria();
-      // this.personService.searchCriteria = criteria;
-      this.subscription.add(
-        this.personService.loadPersonFamilyTree(father, !father).subscribe(
-          {
-            next: x => {
-              if (x.statusCode == 1)
-              {
-                this.familyTree = x.data;
-                this.loading = false;
-                this.cd.detectChanges();
-                console.log("the family tree", this.familyTree);
-              }
-            },
-            
-      error: e => {      
-      const message = e || e.message;
-     // this.toastr.error(message);
-     this.loading = false;
-      console.log("error ", e);
-      }
-      }) 
-    );   
-  }
-  
-  nodeSelect(event: TreeNodeSelectEvent) {
-      //  this.messageService.add({ severity: 'info', summary: 'Node Selected', detail: event.node.label });
-  }
-nodeDoubleSelect(event:TreeNodeDoubleClickEvent) : void {
- // console.log("double click node", event.node.key);
-  const id = event.node.key;
-  this.edit(Number(id));
-}
-
-  getName(id:number): string
-  {
-    let result ="";
-    const item = this.familyList.find(x => x.id == id);
-    if (item)
-      result = item.lastName + " " + item.firstName;
-    return result;
-  }
-  updateParent(list:Person[]):void {
-    let i = 0;
-    let item:Person;
-    for (i = 0; i< list.length; i++)
-    {
-      item = list[i];
-      if (item.fatherId && item.fatherId > 0)
-      {
-        item.fatherName = this.getName(item.fatherId);
-      }
-    }
-  }
-
-  newFamily():void {
-  //console.log("add new employee");
-    this.personService.parentList = this.familyList;
-  //  this.router.navigate( ['/family/new'], { queryParams: {returnUrl:'/family' } });
-    this.showEdit(this._id--);
-  }
-  edit(id: number) : void {
-    //console.log("edit family", id);
-    this.personService.parentList = this.familyList;
-   // this.router.navigate( ['/family/'+id], { queryParams: {returnUrl:'/family' } });
-    this.showEdit(id);
-  }
-  showEdit(id:number) {
-    const ref = this.dialogService.open(PersonEdit, {
-      data: {
-         id, 
-         familyList: this.familyList,         
-    },
-      header: 'Family',
-      width: '80%',
-      maximizable: true
-    });
-    if (ref)
-    {
-    ref.onClose.subscribe((item: Person) => {
-      if (item) {
-        //console.log("after close ward edit", item);
-        this.messageService.add({severity:'success', summary: 'Save Family', detail: item.firstName!});
-       //update the current list
-        this.updateList(item);
-      }
-      });
-    }
-   }
-   updateList(item: Person) :void {
-    const idx = this.familyList.findIndex( x => x.id == item.id);
-    if (item.fatherId && item.fatherId > 0)
-      item.fatherName = this.getName(item.fatherId);
-    if (item.motherId && item.motherId > 0)
-      item.motherName = this.getName(item.motherId);
-    if (idx < 0)
-    {
-      
-      const olist = [... this.familyList, item];
-      this.familyList = olist;
-    }
-    else
-    {
-      const oitem = this.familyList[idx];
-      oitem.firstName = item.firstName;
-      oitem.lastName = item.lastName;
-      oitem.address = item.address;
-      oitem.alive = item.alive;
-      oitem.dob = item.dob;
-      oitem.email = item.email;
-      oitem.fatherId = item.fatherId;
-      oitem.motherId = item.motherId;
-      oitem.motherName = item.motherName;
-      oitem.fatherName = item.fatherName;
-      
-    }
-   }
-  deleteItem(id: number): void {
-    this.personService.deletePerson(id)
-      .pipe(take(1))
-      .subscribe({ next: result => {
-      console.log(this.msg + " deleteItem success", result);
-      
-      const nlist = this.familyList.filter(d => d.id !== id);
-      this.familyList = nlist;    
-      },
-      error: e => console.error(e)
-    });
-    //console.log(this.msg + "click button to delete");
-  }
-  
-  ngOnDestroy() {
-		this.subscription.unsubscribe();
-	}
-}
-
+import { Component, OnInit, OnDestroy, inject, ChangeDetectorRef, signal} from '@angular/core';
+
+import { StaffView ,StaffSearch, Person } from '../models';
+import { OrganizationChartModule } from '@openng/optimus-ui/organizationchart';
+
+import { take } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
+import { Router } from '@angular/router';
+import { PersonService } from './person.service';
+import { AuthenticationService } from '../user-services';
+import { TableModule } from '@openng/optimus-ui/table';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { TreeNode } from '@openng/optimus-ui/api';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
+import { DialogService } from '@openng/optimus-ui/dynamicdialog';
+import { PersonEdit } from './person.edit';
+import { MessageService } from '@openng/optimus-ui/api';
+import { CheckboxModule } from '@openng/optimus-ui/checkbox';
+import { TreeModule, TreeNodeDoubleClickEvent, TreeNodeSelectEvent } from '@openng/optimus-ui/tree';
+import { Utils } from '../shares';
+
+@Component({
+  selector: 'family-tree',
+  templateUrl: './family.tree.html',
+  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;
+    private cd = inject(ChangeDetectorRef);
+    familyTree: TreeNode[] = [];
+    email = '';
+    lastname = '';
+    _id = -10;
+    loading = false;
+    familyList:Person[] = [];
+    msg ="[Person tree component]";
+  private messageService = inject(MessageService);
+  /*
+  private store: Store<appValidationState>
+  */
+  constructor(  
+    public dialogService: DialogService,
+    private personService: PersonService,
+    private authenticationService: AuthenticationService,
+    private router: Router    
+     ) {}
+  getSearchCiteria(): StaffSearch {
+    let criteria:StaffSearch = {
+      email: this.email,
+      firstName: this.firstname,
+      lastName: this.lastname,
+    };
+
+    return criteria;
+
+  }
+  canSearch():boolean {
+    let result = false;
+    result = this.email !== "";
+    result = result || this.lastname !== "";
+    result = result || this.firstname !== "";
+    return result;
+  }
+  ngOnInit(): void
+  { 
+    this.authenticationService.isHome = false;
+    this.authenticationService.isReport = false;
+  const prev = this.personService.searchCriteria;
+    let goload = true;
+    this.load();
+    
+  }  
+  getActive(active:boolean):string {
+    let result = 'false-icon pi-times-circle';
+    if (active)
+      result = 'true-icon pi-check-circle';
+    return result;
+  }
+  load():void {
+    let father = this.isFather(); 
+      this.loading = true;
+      //const criteria = this.getSearchCiteria();
+      // this.personService.searchCriteria = criteria;
+      this.subscription.add(
+        this.personService.loadPersonFamilyTree(father, !father).subscribe(
+          {
+            next: x => {
+              if (x.statusCode == 1)
+              {
+                this.familyTree = x.data;
+                this.loading = false;
+                this.cd.detectChanges();
+                console.log("the family tree", this.familyTree);
+              }
+            },
+            
+      error: e => {      
+      const message = e || e.message;
+     // this.toastr.error(message);
+     this.loading = false;
+      console.log("error ", e);
+      }
+      }) 
+    );   
+  }
+  
+  nodeSelect(event: TreeNodeSelectEvent) {
+      //  this.messageService.add({ severity: 'info', summary: 'Node Selected', detail: event.node.label });
+  }
+nodeDoubleSelect(event:TreeNodeDoubleClickEvent) : void {
+ // console.log("double click node", event.node.key);
+  const id = event.node.key;
+  this.edit(Number(id));
+}
+
+  getName(id:number): string
+  {
+    let result ="";
+    const item = this.familyList.find(x => x.id == id);
+    if (item)
+      result = item.lastName + " " + item.firstName;
+    return result;
+  }
+  updateParent(list:Person[]):void {
+    let i = 0;
+    let item:Person;
+    for (i = 0; i< list.length; i++)
+    {
+      item = list[i];
+      if (item.fatherId && item.fatherId > 0)
+      {
+        item.fatherName = this.getName(item.fatherId);
+      }
+    }
+  }
+
+  newFamily():void {
+  //console.log("add new employee");
+    this.personService.parentList = this.familyList;
+  //  this.router.navigate( ['/family/new'], { queryParams: {returnUrl:'/family' } });
+    this.showEdit(this._id--);
+  }
+  edit(id: number) : void {
+    //console.log("edit family", id);
+    this.personService.parentList = this.familyList;
+   // this.router.navigate( ['/family/'+id], { queryParams: {returnUrl:'/family' } });
+    this.showEdit(id);
+  }
+  showEdit(id:number) {
+    const ref = this.dialogService.open(PersonEdit, {
+      data: {
+         id, 
+         familyList: this.familyList,         
+    },
+      header: 'Family',
+      width: '80%',
+      maximizable: true
+    });
+    if (ref)
+    {
+    ref.onClose.subscribe((item: Person) => {
+      if (item) {
+        //console.log("after close ward edit", item);
+        this.messageService.add({severity:'success', summary: 'Save Family', detail: item.firstName!});
+       //update the current list
+        this.updateList(item);
+      }
+      });
+    }
+   }
+   updateList(item: Person) :void {
+    const idx = this.familyList.findIndex( x => x.id == item.id);
+    if (item.fatherId && item.fatherId > 0)
+      item.fatherName = this.getName(item.fatherId);
+    if (item.motherId && item.motherId > 0)
+      item.motherName = this.getName(item.motherId);
+    if (idx < 0)
+    {
+      
+      const olist = [... this.familyList, item];
+      this.familyList = olist;
+    }
+    else
+    {
+      const oitem = this.familyList[idx];
+      oitem.firstName = item.firstName;
+      oitem.lastName = item.lastName;
+      oitem.address = item.address;
+      oitem.alive = item.alive;
+      oitem.dob = item.dob;
+      oitem.email = item.email;
+      oitem.fatherId = item.fatherId;
+      oitem.motherId = item.motherId;
+      oitem.motherName = item.motherName;
+      oitem.fatherName = item.fatherName;
+      
+    }
+   }
+  deleteItem(id: number): void {
+    this.personService.deletePerson(id)
+      .pipe(take(1))
+      .subscribe({ next: result => {
+      console.log(this.msg + " deleteItem success", result);
+      
+      const nlist = this.familyList.filter(d => d.id !== id);
+      this.familyList = nlist;    
+      },
+      error: e => console.error(e)
+    });
+    //console.log(this.msg + "click button to delete");
+  }
+  
+  ngOnDestroy() {
+		this.subscription.unsubscribe();
+	}
+}
+

UI/src/app/person/familylist.css

@@ -1,12 +1,12 @@
-table {
-  width: 100%;
-}
-
-.mat-form-field {
-  font-size: 14px;
-  width: 100%;
-}
-td.mat-column-edit, .mat-column-delete {
-  width: 35px;
-  padding-right: 2px;
-}
+table {
+  width: 100%;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+td.mat-column-edit, .mat-column-delete {
+  width: 35px;
+  padding-right: 2px;
+}

UI/src/app/person/familylist.html

@@ -1,86 +1,86 @@
-<div class="shadow-2xl rounded p-2 mt-2">
-<h3>Person List</h3>
-<div>
-  <form>
-    <div class="grid md:grid-cols-4 gap-2">
-      <div class="">
-        <label for="login">Email</label>
-        <input id="login" pInputText name="login" type="text" [(ngModel)]="email"
-          class="inputfield w-full p-inputtext-sm">
-      </div>
-      <div class="">
-        <label for="lastname1">Surname</label>
-        <input id="lastname1" pInputText name="lastname" type="text" [(ngModel)]="lastname"
-          class="inputfield w-full p-inputtext-sm">
-      </div>
-      <div class="">
-        <label for="firstname">First Name</label>
-        <input id="firstname" name="firstname" pInputText type="text" [(ngModel)]="firstname"
-          class="inputfield w-full p-inputtext-sm">
-      </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" label="New Person"
-          (click)="newFamily()"></button>
-         
-      </div>
-    </div>
-  </form>
-</div>
-<div>
-  <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>
-                </p-inputicon>
-                <input pInputText type="text" (input)="handleInput($event)" placeholder="Search keyword" />
-            </p-iconfield>
-        </div>
-    </ng-template>
-      <ng-template pTemplate="header">
-        <tr>       
-          
-          <th pSortableColumn="lastName">Last Name <p-sortIcon field="lastName"></p-sortIcon>
-          </th>
-          <th pSortableColumn="firstName">First Name <p-sortIcon field="firstName"></p-sortIcon>
-          </th>       
-        <th pSortableColumn="sex">Sex <p-sortIcon field="sex"></p-sortIcon></th>
-           <th pSortableColumn="fatherName">Father<p-sortIcon field="fatherName"></p-sortIcon>
-          </th>
-           <th pSortableColumn="motherName">Mother<p-sortIcon field="motherName"></p-sortIcon>
-          </th>
-         
-          <th>Edit</th>  
-        </tr>
-      </ng-template>
-      <ng-template pTemplate="body" let-user>
-          <tr>            
-            <td>{{user.lastName}}</td>
-            <td>{{user.firstName}}</td>                       
-            <td>{{user.sex}}</td> 
-            <td>{{user.fatherName}}</td>        
-            <td>{{user.motherName}}</td>        
-                        
-            <td> 
-              <p-button type="button" icon="pi pi-ellipsis-v" 
-              [rounded]="true" [text]="true" [raised]="true"
-              class="p-button-rounded p-button-text" 
-                (onClick)="actionClick(user.id,$event)"></p-button>
-                
-                
-            </td>
-          </tr>
-      </ng-template>
-    </p-table>
-    <p-menu #rowmenu [model]="items" [popup]="true" (onShow)="onMenuShow()" />
-</div>
-  
+<div class="shadow-2xl rounded p-2 mt-2">
+<h3>Person List</h3>
+<div>
+  <form>
+    <div class="grid md:grid-cols-4 gap-2">
+      <div class="">
+        <label for="login">Email</label>
+        <input id="login" pInputText name="login" type="text" [(ngModel)]="email"
+          class="inputfield w-full p-inputtext-sm">
+      </div>
+      <div class="">
+        <label for="lastname1">Surname</label>
+        <input id="lastname1" pInputText name="lastname" type="text" [(ngModel)]="lastname"
+          class="inputfield w-full p-inputtext-sm">
+      </div>
+      <div class="">
+        <label for="firstname">First Name</label>
+        <input id="firstname" name="firstname" pInputText type="text" [(ngModel)]="firstname"
+          class="inputfield w-full p-inputtext-sm">
+      </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" label="New Person"
+          (click)="newFamily()"></button>
+         
+      </div>
+    </div>
+  </form>
+</div>
+<div>
+  <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>
+                </p-inputicon>
+                <input pInputText type="text" (input)="handleInput($event)" placeholder="Search keyword" />
+            </p-iconfield>
+        </div>
+    </ng-template>
+      <ng-template pTemplate="header">
+        <tr>       
+          
+          <th pSortableColumn="lastName">Last Name <p-sortIcon field="lastName"></p-sortIcon>
+          </th>
+          <th pSortableColumn="firstName">First Name <p-sortIcon field="firstName"></p-sortIcon>
+          </th>       
+        <th pSortableColumn="sex">Sex <p-sortIcon field="sex"></p-sortIcon></th>
+           <th pSortableColumn="fatherName">Father<p-sortIcon field="fatherName"></p-sortIcon>
+          </th>
+           <th pSortableColumn="motherName">Mother<p-sortIcon field="motherName"></p-sortIcon>
+          </th>
+         
+          <th>Edit</th>  
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-user>
+          <tr>            
+            <td>{{user.lastName}}</td>
+            <td>{{user.firstName}}</td>                       
+            <td>{{user.sex}}</td> 
+            <td>{{user.fatherName}}</td>        
+            <td>{{user.motherName}}</td>        
+                        
+            <td> 
+              <p-button type="button" icon="pi pi-ellipsis-v" 
+              [rounded]="true" [text]="true" [raised]="true"
+              class="p-button-rounded p-button-text" 
+                (onClick)="actionClick(user.id,$event)"></p-button>
+                
+                
+            </td>
+          </tr>
+      </ng-template>
+    </p-table>
+    <p-menu #rowmenu [model]="items" [popup]="true" (onShow)="onMenuShow()" />
+</div>
+  

UI/src/app/person/familylist.ts

@@ -1,359 +1,359 @@
-import { Component, OnInit, OnDestroy, inject, ChangeDetectorRef, signal, ViewChild} from '@angular/core';
-
-import { StaffView ,StaffSearch, Person } from '../models';
-
-
-import { take } from 'rxjs/operators';
-import { Subscription } from 'rxjs';
-import { Router } from '@angular/router';
-import { PersonService } from './person.service';
-import { AuthenticationService } from '../user-services';
-import { Table, TableModule } from 'primeng/table';
-import { FormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-import { ButtonModule } from 'primeng/button';
-import { InputTextModule } from 'primeng/inputtext';
-import { DialogService } from 'primeng/dynamicdialog';
-import { PersonEdit } from './person.edit';
-import { ConfirmationService, MenuItem, MessageService } from 'primeng/api';
-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',
-  imports:[TableModule,FormsModule,CommonModule,ButtonModule,MenuModule,
-            InputTextModule,IconFieldModule,InputIconModule],
-  styleUrls: ['./familylist.css'],
-  providers: [DialogService]
-})
-export class FamilyList implements OnInit, OnDestroy{
-
-  private subscription:Subscription = new Subscription();
-  //private cd = inject(ChangeDetectorRef);
-    items: MenuItem[] | undefined;
-    selectedPerson!: Person;
-    firstname = '';
-    email = '';
-    lastname = '';
-    _id = -10;
-    selectId = -1;
-    loading = false;
-    familyList = signal<Person[]>([]);
-    msg ="[Person component]";
-    @ViewChild(Table) dt2!: Table;
-    @ViewChild('rowmenu') popMenu?: Menu;
-    private messageService = inject(MessageService);
-    public dialogService= inject( DialogService);
-    private personService= inject( PersonService);
-    private confirmationService = inject(ConfirmationService);
-    private cdr = inject(ChangeDetectorRef);
-    private authenticationService= inject( AuthenticationService);
-    private router= inject( Router);
-  
-    getSearchCiteria(): StaffSearch {
-    let criteria:StaffSearch = {
-      email: this.email,
-      firstName: this.firstname,
-      lastName: this.lastname,
-    };
-    console.log("get search citeria", criteria);
-    return criteria;
-
-  }
-  initMenu(): void {
-    this.items = [            
-                    {
-                        label: 'Edit',
-                        icon: 'pi pi-pencil',
-                        command: () => { 
-                        this.edit(this.selectId);         
-                      }  
-                    },
-                    {
-                        label: 'Delete',
-                        iconClass:'text-red-500',
-                        styleClass:'text-red-500',
-                        icon: 'pi pi-times',
-                        command: () => { 
-                        this.delete(this.selectId);         
-                      }  
-                    },
-                    {
-                        label: 'Show Family',
-                        icon: 'pi pi-sitemap',
-                        command: () => {
-                          this.showChildren(this.selectId);
-                        }
-                    }
-            
-        ];
-  }
-  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;
-    this.popMenu!.toggle(event);
-  }
-  showChildren(id: number): void {
-    console.log("show children of id", id);
-    this.showOrganise(id);
-
-}
-  handleInput(event: Event) {
-    const value = (event.target as HTMLInputElement).value;
-    this.dt2.filterGlobal(value, 'contains');
-  }
-  canSearch():boolean {
-    let result = false;
-    result = this.email !== "";
-    result = result || this.lastname !== "";
-    result = result || this.firstname !== "";
-    return result;
-  }
-  onMenuShow(): void {
-    console.log("this is show", this.selectedPerson);
-  }
-
-  ngOnInit(): void
-  { 
-    this.initMenu();
-    this.authenticationService.isHome = false;
-    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();
-    }
-  }  
-  getActive(active:boolean):string {
-    let result = 'false-icon pi-times-circle';
-    if (active)
-      result = 'true-icon pi-check-circle';
-    return result;
-  }
-  search():void {
-    const canSearch = true; // this.canSearch();
-    if (canSearch)
-    {
-      this.loading = true;
-      const criteria = this.getSearchCiteria();
-       this.personService.searchCriteria = criteria;
-      this.subscription.add(
-      this.personService.searchPersons(criteria).subscribe( {
-        next: result => {
-      //  console.log(this.msg + "search load Data", result);      
-        const familyList = result.data;
-        this.familyList.set(familyList);
-        this.updateParent( this.familyList());
-         //this.familyList.set(familyList);
-        
-         console.log("the person from load", this.familyList());
-        this.loading = false;
-        this.cdr.detectChanges();
-      }, 
-      error: e => {      
-      const message = e || e.message;
-     // this.toastr.error(message);
-     this.loading = false;
-      console.log("error ", e);
-      }
-      }) 
-    );
-   }
-  }
-  getName(id:number): string
-  {
-    let result ="";
-    const item = this.familyList().find(x => x.id == id);
-    if (item)
-      result = item.lastName + " " + item.firstName;
-    return result;
-  }
-  updateParent(list:Person[]):void {
-    let i = 0;
-    let item:Person;
-    for (i = 0; i< list.length; i++)
-    {
-      item = list[i];
-      if (item.fatherId && item.fatherId > 0)
-      {
-        item.fatherName = this.getName(item.fatherId);
-      }
-      if (item.motherId && item.motherId > 0)
-      {
-        item.motherName = this.getName(item.motherId);
-      }
-    }
-  }
-
-  delete(id: number): void {
-    this.confirmationService.confirm({
-            
-            message: 'Do you want to delete this record?',
-            header: 'Confirmation Delete',
-            icon: 'pi pi-info-circle',
-            rejectLabel: 'Cancel',
-            rejectButtonProps: {
-                label: 'Cancel',
-                severity: 'secondary',
-                outlined: true,
-            },
-            acceptButtonProps: {
-                label: 'Delete',
-                severity: 'danger',
-            },
-
-            accept: () => {
-                this.deleteItem(id);
-            }
-          });
-  }
-
- deleteItem(id: number): void {
-    this.personService.deletePerson(id)
-      .pipe(take(1))
-      .subscribe({ next: result => {
-      console.log(this.msg + " deleteItem success", result);
-      
-      const nlist = this.familyList().filter(d => d.id !== id);
-      this.familyList.set(nlist);    
-       this.cdr.detectChanges();
-      },
-      error: e => console.error(e)
-    });
-    //console.log(this.msg + "click button to delete");
-  }
-
-  newFamily():void {
-  //console.log("add new employee");
-    this.personService.parentList = this.familyList();
-  //  this.router.navigate( ['/family/new'], { queryParams: {returnUrl:'/family' } });
-    this.showEdit(this._id--);
-  }
-  edit(id: number) : void {
-    //console.log("edit family", id);
-    this.personService.parentList = this.familyList();
-   // this.router.navigate( ['/family/'+id], { queryParams: {returnUrl:'/family' } });
-    this.showEdit(id);
-  }
-  showEdit(id:number) {
-    const ref = this.dialogService.open(PersonEdit, {
-      data: {
-         id, 
-         familyList: this.familyList(),         
-    },
-      header: 'Person',
-      width: '80%',
-      draggable: true,
-      maximizable: true
-    });
-    if (ref)
-    {
-      ref.onClose.subscribe((item: Person) => {
-        if (item) {
-          //console.log("after close ward edit", item);
-        //   this.messageService.add({severity:'success', summary: 'Save Family', detail: item.firstName!});
-        //update the current list
-          this.updateList(item);
-        }
-        });
-    }
-   }
-
-   showOrganise(id:number) {
-    const ref = this.dialogService.open(FamilyOrga, {
-      data: {
-         id, 
-         familyList: this.familyList(),         
-    },
-      header: 'Family Tree and Children',
-      width: '80%',
-      maximizable: true,
-      closable: true
-    });
-    if (ref)
-    {
-    ref.onClose.subscribe((item: Person) => {
-      if (item) {
-        //console.log("after close ward edit", item);
-     //   this.messageService.add({severity:'success', summary: 'Save Family', detail: item.firstName!});
-       //update the current list
-        //this.updateList(item);
-      }
-      });
-    }
-   }
-
-   updateList(item: Person) :void {
-    const list = this.familyList();
-    const idx = list.findIndex( x => x.id === item.id);
-    if (item.fatherId && item.fatherId > 0)
-      item.fatherName = this.getName(item.fatherId);
-      if (item.motherId && item.motherId > 0)
-      item.motherName = this.getName(item.motherId);
-    if (idx < 0)
-    {      
-      const olist = [... list, item];
-      this.familyList.set(olist);
-    }
-    else
-    {
-      
-      const oitem = list[idx];
-      oitem.firstName = item.firstName;
-      oitem.lastName = item.lastName;
-      oitem.address = item.address;
-      oitem.alive = item.alive;
-      oitem.dob = item.dob;
-      oitem.sex = item.sex;
-      oitem.email = item.email;
-      oitem.fatherId = item.fatherId;
-      oitem.motherId = item.motherId;
-      oitem.fatherName = item.fatherName;
-      oitem.motherName = item.motherName;      
-      this.familyList.set(list);
-    }
-    this.cdr.markForCheck();
-   }
-  
-  
-  ngOnDestroy() {
-		this.subscription.unsubscribe();
-	}
-}
-
+import { Component, OnInit, OnDestroy, inject, ChangeDetectorRef, signal, ViewChild} from '@angular/core';
+
+import { StaffView ,StaffSearch, Person } from '../models';
+
+
+import { take } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
+import { Router } from '@angular/router';
+import { PersonService } from './person.service';
+import { AuthenticationService } from '../user-services';
+import { Table, TableModule } from '@openng/optimus-ui/table';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
+import { DialogService } from '@openng/optimus-ui/dynamicdialog';
+import { PersonEdit } from './person.edit';
+import { ConfirmationService, MenuItem, MessageService } from '@openng/optimus-ui/api';
+import { IconFieldModule } from '@openng/optimus-ui/iconfield';
+import { InputIconModule } from '@openng/optimus-ui/inputicon';
+import { Menu, MenuModule } from '@openng/optimus-ui/menu';
+import { FamilyOrga } from './family.orga';
+
+import { saveAs } from 'file-saver';
+import * as XLSX from 'xlsx';
+
+@Component({
+  selector: 'family-list',
+  templateUrl: './familylist.html',
+  imports:[TableModule,FormsModule,CommonModule,ButtonModule,MenuModule,
+            InputTextModule,IconFieldModule,InputIconModule],
+  styleUrls: ['./familylist.css'],
+  providers: [DialogService]
+})
+export class FamilyList implements OnInit, OnDestroy{
+
+  private subscription:Subscription = new Subscription();
+  //private cd = inject(ChangeDetectorRef);
+    items: MenuItem[] | undefined;
+    selectedPerson!: Person;
+    firstname = '';
+    email = '';
+    lastname = '';
+    _id = -10;
+    selectId = -1;
+    loading = false;
+    familyList = signal<Person[]>([]);
+    msg ="[Person component]";
+    @ViewChild(Table) dt2!: Table;
+    @ViewChild('rowmenu') popMenu?: Menu;
+    private messageService = inject(MessageService);
+    public dialogService= inject( DialogService);
+    private personService= inject( PersonService);
+    private confirmationService = inject(ConfirmationService);
+    private cdr = inject(ChangeDetectorRef);
+    private authenticationService= inject( AuthenticationService);
+    private router= inject( Router);
+  
+    getSearchCiteria(): StaffSearch {
+    let criteria:StaffSearch = {
+      email: this.email,
+      firstName: this.firstname,
+      lastName: this.lastname,
+    };
+    console.log("get search citeria", criteria);
+    return criteria;
+
+  }
+  initMenu(): void {
+    this.items = [            
+                    {
+                        label: 'Edit',
+                        icon: 'pi pi-pencil',
+                        command: () => { 
+                        this.edit(this.selectId);         
+                      }  
+                    },
+                    {
+                        label: 'Delete',
+                        iconClass:'text-red-500',
+                        styleClass:'text-red-500',
+                        icon: 'pi pi-times',
+                        command: () => { 
+                        this.delete(this.selectId);         
+                      }  
+                    },
+                    {
+                        label: 'Show Family',
+                        icon: 'pi pi-sitemap',
+                        command: () => {
+                          this.showChildren(this.selectId);
+                        }
+                    }
+            
+        ];
+  }
+  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;
+    this.popMenu!.toggle(event);
+  }
+  showChildren(id: number): void {
+    console.log("show children of id", id);
+    this.showOrganise(id);
+
+}
+  handleInput(event: Event) {
+    const value = (event.target as HTMLInputElement).value;
+    this.dt2.filterGlobal(value, 'contains');
+  }
+  canSearch():boolean {
+    let result = false;
+    result = this.email !== "";
+    result = result || this.lastname !== "";
+    result = result || this.firstname !== "";
+    return result;
+  }
+  onMenuShow(): void {
+    console.log("this is show", this.selectedPerson);
+  }
+
+  ngOnInit(): void
+  { 
+    this.initMenu();
+    this.authenticationService.isHome = false;
+    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();
+    }
+  }  
+  getActive(active:boolean):string {
+    let result = 'false-icon pi-times-circle';
+    if (active)
+      result = 'true-icon pi-check-circle';
+    return result;
+  }
+  search():void {
+    const canSearch = true; // this.canSearch();
+    if (canSearch)
+    {
+      this.loading = true;
+      const criteria = this.getSearchCiteria();
+       this.personService.searchCriteria = criteria;
+      this.subscription.add(
+      this.personService.searchPersons(criteria).subscribe( {
+        next: result => {
+      //  console.log(this.msg + "search load Data", result);      
+        const familyList = result.data;
+        this.familyList.set(familyList);
+        this.updateParent( this.familyList());
+         //this.familyList.set(familyList);
+        
+         console.log("the person from load", this.familyList());
+        this.loading = false;
+        this.cdr.detectChanges();
+      }, 
+      error: e => {      
+      const message = e || e.message;
+     // this.toastr.error(message);
+     this.loading = false;
+      console.log("error ", e);
+      }
+      }) 
+    );
+   }
+  }
+  getName(id:number): string
+  {
+    let result ="";
+    const item = this.familyList().find(x => x.id == id);
+    if (item)
+      result = item.lastName + " " + item.firstName;
+    return result;
+  }
+  updateParent(list:Person[]):void {
+    let i = 0;
+    let item:Person;
+    for (i = 0; i< list.length; i++)
+    {
+      item = list[i];
+      if (item.fatherId && item.fatherId > 0)
+      {
+        item.fatherName = this.getName(item.fatherId);
+      }
+      if (item.motherId && item.motherId > 0)
+      {
+        item.motherName = this.getName(item.motherId);
+      }
+    }
+  }
+
+  delete(id: number): void {
+    this.confirmationService.confirm({
+            
+            message: 'Do you want to delete this record?',
+            header: 'Confirmation Delete',
+            icon: 'pi pi-info-circle',
+            rejectLabel: 'Cancel',
+            rejectButtonProps: {
+                label: 'Cancel',
+                severity: 'secondary',
+                outlined: true,
+            },
+            acceptButtonProps: {
+                label: 'Delete',
+                severity: 'danger',
+            },
+
+            accept: () => {
+                this.deleteItem(id);
+            }
+          });
+  }
+
+ deleteItem(id: number): void {
+    this.personService.deletePerson(id)
+      .pipe(take(1))
+      .subscribe({ next: result => {
+      console.log(this.msg + " deleteItem success", result);
+      
+      const nlist = this.familyList().filter(d => d.id !== id);
+      this.familyList.set(nlist);    
+       this.cdr.detectChanges();
+      },
+      error: e => console.error(e)
+    });
+    //console.log(this.msg + "click button to delete");
+  }
+
+  newFamily():void {
+  //console.log("add new employee");
+    this.personService.parentList = this.familyList();
+  //  this.router.navigate( ['/family/new'], { queryParams: {returnUrl:'/family' } });
+    this.showEdit(this._id--);
+  }
+  edit(id: number) : void {
+    //console.log("edit family", id);
+    this.personService.parentList = this.familyList();
+   // this.router.navigate( ['/family/'+id], { queryParams: {returnUrl:'/family' } });
+    this.showEdit(id);
+  }
+  showEdit(id:number) {
+    const ref = this.dialogService.open(PersonEdit, {
+      data: {
+         id, 
+         familyList: this.familyList(),         
+    },
+      header: 'Person',
+      width: '80%',
+      draggable: true,
+      maximizable: true
+    });
+    if (ref)
+    {
+      ref.onClose.subscribe((item: Person) => {
+        if (item) {
+          //console.log("after close ward edit", item);
+        //   this.messageService.add({severity:'success', summary: 'Save Family', detail: item.firstName!});
+        //update the current list
+          this.updateList(item);
+        }
+        });
+    }
+   }
+
+   showOrganise(id:number) {
+    const ref = this.dialogService.open(FamilyOrga, {
+      data: {
+         id, 
+         familyList: this.familyList(),         
+    },
+      header: 'Family Tree and Children',
+      width: '80%',
+      maximizable: true,
+      closable: true
+    });
+    if (ref)
+    {
+    ref.onClose.subscribe((item: Person) => {
+      if (item) {
+        //console.log("after close ward edit", item);
+     //   this.messageService.add({severity:'success', summary: 'Save Family', detail: item.firstName!});
+       //update the current list
+        //this.updateList(item);
+      }
+      });
+    }
+   }
+
+   updateList(item: Person) :void {
+    const list = this.familyList();
+    const idx = list.findIndex( x => x.id === item.id);
+    if (item.fatherId && item.fatherId > 0)
+      item.fatherName = this.getName(item.fatherId);
+      if (item.motherId && item.motherId > 0)
+      item.motherName = this.getName(item.motherId);
+    if (idx < 0)
+    {      
+      const olist = [... list, item];
+      this.familyList.set(olist);
+    }
+    else
+    {
+      
+      const oitem = list[idx];
+      oitem.firstName = item.firstName;
+      oitem.lastName = item.lastName;
+      oitem.address = item.address;
+      oitem.alive = item.alive;
+      oitem.dob = item.dob;
+      oitem.sex = item.sex;
+      oitem.email = item.email;
+      oitem.fatherId = item.fatherId;
+      oitem.motherId = item.motherId;
+      oitem.fatherName = item.fatherName;
+      oitem.motherName = item.motherName;      
+      this.familyList.set(list);
+    }
+    this.cdr.markForCheck();
+   }
+  
+  
+  ngOnDestroy() {
+		this.subscription.unsubscribe();
+	}
+}
+

UI/src/app/person/index.ts

@@ -1,5 +1,5 @@
-export * from './familylist';
-export * from './person.edit';
-export * from './family.tree';
-export * from './person.service';
-
+export * from './familylist';
+export * from './person.edit';
+export * from './family.tree';
+export * from './person.service';
+

UI/src/app/person/person.edit.css

@@ -1,13 +1,13 @@
-.profilePhotoBorder
-{
-    
-    border-color: gray;
-    border-width: 2px;
-    border-radius: 15%;
-}
-
-.profilePhotoWH
-{
-    width: 150px;
-    height: 100px;
+.profilePhotoBorder
+{
+    
+    border-color: gray;
+    border-width: 2px;
+    border-radius: 15%;
+}
+
+.profilePhotoWH
+{
+    width: 150px;
+    height: 100px;
 }

UI/src/app/person/person.edit.html

@@ -1,134 +1,134 @@
-<div class=" mt-2">
-   
-    <form [formGroup]="adminuserForm" (ngSubmit)="onSubmit($event)" >        
-        <div class="ml-2 grid md:grid-cols-2 gap-3 p-2">  
-            <div>
-                <div class="">
-                    <label for="lastname1">Surname<strong class="app-require">*</strong></label>
-                    <input id="lastname1" pInputText formControlName="lastname" type="text" [pAutoFocus]="true"
-                        [class]="getClassForRequire('inputfield w-full p-inputtext-sm','lastname')">
-                </div>
-                <div class="">
-                    <label for="firstname">First Name<strong class="app-require">*</strong></label>
-                    <input id="firstname" pInputText formControlName="firstname" type="text"
-                        [class]="getClassForRequire('inputfield w-full p-inputtext-sm','firstname')">
-                </div>
-            </div>      
-            <!--put here photo of person-->
-            <div class="flex flex-row gap-2">
-                <div>
-                <div class="">
-                    <label for="dob" class="flex w-full">DOB</label>               
-                    <p-datepicker  ariaLabelledBy="dob" formControlName="dob" [iconDisplay]="'input'" [showIcon]="true"
-                     dateFormat="dd/mm/yy" ></p-datepicker>
-                </div>
-                <div class="">
-                    <label class="flex w-full">Sex <strong class="app-require">*</strong></label>
-                    <p-select  [options]="sexList" optionLabel="name" optionValue="status" placeholder="Select Gender"
-                        formControlName="sex" 
-                        [class]="getClassForRequire('inputfield w-full p-inputtext-sm','sex')" 
-                        class="w-full p-inputtext-sm mr-1"></p-select >
-                </div>
-                </div>
-                <div class="flex flex-row shadow-md rounded-xl border-gray-100 border-1 p-4">         
-                    <!--a href="{{hostsite}}/{{adminuserForm.value.image}}" target="_blank" class="text-blue-400">View Attachment
-                    </a-->
-                    <input type="file" class="file-input hidden" (change)="onFileSelected($event)" #fileUpload>
-                    @if (adminuserForm.value.image != "" && adminuserForm.value.image != null)
-                    {
-                        <img id="blah" [src]= "dislayImage()" alt="your image" 
-                        class="profilePhotoWH profilePhotoBorder" (click)="doViewImage(adminuserForm.value.image)" />
-                       
-                    }
-                    @else
-                    {
-                        <div class="file-upload profilePhotoBorder profilePhotoWH text-center flex justify-center items-center ">
-                            <label class="">{{ adminuserForm.value.image || "No Profile Photo."}}</label>
-                        </div>
-                    }
-                    <div class="flex flex-col gap-2">
-                        @if (adminuserForm.value.image != "" && adminuserForm.value.image != null)
-                        {
-                        <button pButton type="button" icon="pi pi-times" pTooltip="remove profile photo"
-                                class="p-button-rounded p-button-text text-red-500 p-button-raised ml-2"
-                                (click)="deleteFile()"></button>
-                        }
-                        <button pButton type="button" icon="pi pi-paperclip"
-                                    class="self-end p-button-rounded p-button-text p-button-raised ml-2" pTooltip="load photo"
-                                (click)="fileUpload.click()"></button> 
-                    </div>
-                
-                </div>
-            </div>
-                
-            <!---->   
-             
-           
-            <div class="">
-                <label for="login">Email</label>
-                <input id="login" [attr.disabled]="!isNew?true:null" pInputText formControlName="email"
-                    type="text" class="inputfield w-full">
-            </div>
-            <div class="">
-                <label for="phone" class="w-full">Phone</label>
-                <input class="w-full" id="phone" pInputText formControlName="phone" type="text" >
-            </div>
-            <div class="">
-                <label class="flex w-full">Father</label>
-                <p-select [filter]="true" [showClear]="true" filterBy="name" [options]="fatherList" optionLabel="name" appendTo="body" optionValue="id" placeholder="Select Parent"
-                    formControlName="fatherId" class="w-full p-inputtext-sm mr-1"></p-select >
-            </div>
-             <div class="">
-                <label class="flex w-full">Mother</label>
-                <p-select  [options]="motherList" [showClear]="true" [filter]="true" filterBy="name" optionLabel="name" appendTo="body" optionValue="id" placeholder="Select Parent"
-                    formControlName="motherId" class="w-full p-inputtext-sm mr-1"></p-select >
-            </div>
-           
-            <div class="grid align-end">
-                <div class="p-field-checkbox">
-                    <p-checkbox inputId="alive" formControlName="alive" [binary]="true"></p-checkbox>
-                    <label for="alive" class="ml-2 w-full">Alive</label>
-                </div>
-            </div>
-        </div>     
-         <div class="mt-2 w-full">       
-            <div class="flex flex-row justify-between">
-            <p-button icon="pi pi-images" [raised]="true"
-                badge="{{photoList.length}}"
-                severity="success" label="Attach Photos" 
-                        (onClick)="viewAttachment()"/>    
-            <p-button icon="pi pi-user" [raised]="true" severity="info" label="Add Partner" 
-                        (onClick)="addPartner()"/>
-           </div>
-            <div class="shadow rounded mt-2 mb-2">
-                <p-table [value]="partners()">
-                    <ng-template #header>
-                        <tr>    
-                            <th>First Name</th>
-                            <th>Last Name</th>
-                            <th>Sex</th>
-                            <th>Action</th>
-                        </tr>
-                    </ng-template>
-                    <ng-template #body let-user>
-                        <tr>
-                            <td>{{ user.pfirstName }}</td>
-                            <td>{{ user.plastName }}</td>
-                            <td>{{ user.sex }}</td>
-                            <td>
-                                <button pButton type="button" icon="pi pi-times" class="p-button-rounded p-button-text p-button-danger" 
-                                    (click)="onDeletePartner(user)"></button>
-                            </td>
-                        </tr>
-                    </ng-template>
-                </p-table>
-            </div>
-        </div>
-
-        <div class="flex justify-end mr-2 mb-2 p-2">          
-            <button pButton type="submit" class="p-button-sm mr-2" icon="pi pi-check"  label="Save" [disabled]="isFieldsChange"></button>            
-            <button pButton pRipple class="p-button-sm p-button-secondary" type="button" icon="pi pi-times"  label="Cancel" (click)="cancel($event)"></button>
-        </div>
-    </form>
-    <!--pre>{{ adminuserForm.value|json}}</pre-->
+<div class=" mt-2">
+   
+    <form [formGroup]="adminuserForm" (ngSubmit)="onSubmit($event)" >        
+        <div class="ml-2 grid md:grid-cols-2 gap-3 p-2">  
+            <div>
+                <div class="">
+                    <label for="lastname1">Surname<strong class="app-require">*</strong></label>
+                    <input id="lastname1" pInputText formControlName="lastname" type="text" [pAutoFocus]="true"
+                        [class]="getClassForRequire('inputfield w-full p-inputtext-sm','lastname')">
+                </div>
+                <div class="">
+                    <label for="firstname">First Name<strong class="app-require">*</strong></label>
+                    <input id="firstname" pInputText formControlName="firstname" type="text"
+                        [class]="getClassForRequire('inputfield w-full p-inputtext-sm','firstname')">
+                </div>
+            </div>      
+            <!--put here photo of person-->
+            <div class="flex flex-row gap-2">
+                <div>
+                <div class="">
+                    <label for="dob" class="flex w-full">DOB</label>               
+                    <p-datepicker  ariaLabelledBy="dob" formControlName="dob" [iconDisplay]="'input'" [showIcon]="true"
+                     dateFormat="dd/mm/yy" ></p-datepicker>
+                </div>
+                <div class="">
+                    <label class="flex w-full">Sex <strong class="app-require">*</strong></label>
+                    <p-select  [options]="sexList" optionLabel="name" optionValue="status" placeholder="Select Gender"
+                        formControlName="sex" 
+                        [class]="getClassForRequire('inputfield w-full p-inputtext-sm','sex')" 
+                        class="w-full p-inputtext-sm mr-1"></p-select >
+                </div>
+                </div>
+                <div class="flex flex-row shadow-md rounded-xl border-gray-100 border-1 p-4">         
+                    <!--a href="{{hostsite}}/{{adminuserForm.value.image}}" target="_blank" class="text-blue-400">View Attachment
+                    </a-->
+                    <input type="file" class="file-input hidden" (change)="onFileSelected($event)" #fileUpload>
+                    @if (adminuserForm.value.image != "" && adminuserForm.value.image != null)
+                    {
+                        <img id="blah" [src]= "dislayImage()" alt="your image" 
+                        class="profilePhotoWH profilePhotoBorder" (click)="doViewImage(adminuserForm.value.image)" />
+                       
+                    }
+                    @else
+                    {
+                        <div class="file-upload profilePhotoBorder profilePhotoWH text-center flex justify-center items-center ">
+                            <label class="">{{ adminuserForm.value.image || "No Profile Photo."}}</label>
+                        </div>
+                    }
+                    <div class="flex flex-col gap-2">
+                        @if (adminuserForm.value.image != "" && adminuserForm.value.image != null)
+                        {
+                        <button pButton type="button" icon="pi pi-times" pTooltip="remove profile photo"
+                                class="p-button-rounded p-button-text text-red-500 p-button-raised ml-2"
+                                (click)="deleteFile()"></button>
+                        }
+                        <button pButton type="button" icon="pi pi-paperclip"
+                                    class="self-end p-button-rounded p-button-text p-button-raised ml-2" pTooltip="load photo"
+                                (click)="fileUpload.click()"></button> 
+                    </div>
+                
+                </div>
+            </div>
+                
+            <!---->   
+             
+           
+            <div class="">
+                <label for="login">Email</label>
+                <input id="login" [attr.disabled]="!isNew?true:null" pInputText formControlName="email"
+                    type="text" class="inputfield w-full">
+            </div>
+            <div class="">
+                <label for="phone" class="w-full">Phone</label>
+                <input class="w-full" id="phone" pInputText formControlName="phone" type="text" >
+            </div>
+            <div class="">
+                <label class="flex w-full">Father</label>
+                <p-select [filter]="true" [showClear]="true" filterBy="name" [options]="fatherList" optionLabel="name" appendTo="body" optionValue="id" placeholder="Select Parent"
+                    formControlName="fatherId" class="w-full p-inputtext-sm mr-1"></p-select >
+            </div>
+             <div class="">
+                <label class="flex w-full">Mother</label>
+                <p-select  [options]="motherList" [showClear]="true" [filter]="true" filterBy="name" optionLabel="name" appendTo="body" optionValue="id" placeholder="Select Parent"
+                    formControlName="motherId" class="w-full p-inputtext-sm mr-1"></p-select >
+            </div>
+           
+            <div class="grid align-end">
+                <div class="p-field-checkbox">
+                    <p-checkbox inputId="alive" formControlName="alive" [binary]="true"></p-checkbox>
+                    <label for="alive" class="ml-2 w-full">Alive</label>
+                </div>
+            </div>
+        </div>     
+         <div class="mt-2 w-full">       
+            <div class="flex flex-row justify-between">
+            <p-button icon="pi pi-images" [raised]="true"
+                badge="{{photoList.length}}"
+                severity="success" label="Attach Photos" 
+                        (onClick)="viewAttachment()"/>    
+            <p-button icon="pi pi-user" [raised]="true" severity="info" label="Add Partner" 
+                        (onClick)="addPartner()"/>
+           </div>
+            <div class="shadow rounded mt-2 mb-2">
+                <p-table [value]="partners()">
+                    <ng-template #header>
+                        <tr>    
+                            <th>First Name</th>
+                            <th>Last Name</th>
+                            <th>Sex</th>
+                            <th>Action</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template #body let-user>
+                        <tr>
+                            <td>{{ user.pfirstName }}</td>
+                            <td>{{ user.plastName }}</td>
+                            <td>{{ user.sex }}</td>
+                            <td>
+                                <button pButton type="button" icon="pi pi-times" class="p-button-rounded p-button-text p-button-danger" 
+                                    (click)="onDeletePartner(user)"></button>
+                            </td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </div>
+
+        <div class="flex justify-end mr-2 mb-2 p-2">          
+            <button pButton type="submit" class="p-button-sm mr-2" icon="pi pi-check"  label="Save" [disabled]="isFieldsChange"></button>            
+            <button pButton pRipple class="p-button-sm p-button-secondary" type="button" icon="pi pi-times"  label="Cancel" (click)="cancel($event)"></button>
+        </div>
+    </form>
+    <!--pre>{{ adminuserForm.value|json}}</pre-->
 </div>

UI/src/app/person/person.service.ts

@@ -1,109 +1,136 @@
-
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { Staff,StaffSearch, StaffView, ResultModel,ConfigureUrl,ResetPassword, Person, PersonContainer, RelationShip }  from '../models';
-import { AppSettingService } from '../shares';
-import { TreeNode } from 'primeng/api';
-
-@Injectable({ providedIn: 'root' })
-export class PersonService {
-	public searchCriteria: StaffSearch;
-	public parentList: Person[] =[];
-	constructor(private http: HttpClient,
-
-		private appSetting :AppSettingService
-		) {
-			this.searchCriteria = {
-				email:'',
-				firstName: '',
-				lastName:''
-			};
-		
-		}
-	searchPersons(criteria: StaffSearch): Observable<ResultModel<Person[]>> {
-		let config = { headers : { 'Content-Type': 'application/json' } };
-		const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.personUrl + "/SearchPerson";
-		return this.http.post<ResultModel<Person[]>>(baseUrl, criteria, config);
-	}
-	
-	loadPersonById(id:number): Observable<ResultModel<Person>> {
-		const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.personUrl;
-		/*
-		const params = new HttpParams().set("id", ""+id);
-		const headers = new HttpHeaders().set('Content-Type', 'application/json');
-		const options = {
-			headers: headers,
-			params: params
-			}; 
-			*/
-		
-		return this.http.get<ResultModel<Person>>(baseUrl + "/GetById/" + id);
-	}
-	loadPersonFamily(id: number): Observable<ResultModel<TreeNode>> {
-		const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.personUrl;
-		return this.http.get<ResultModel<TreeNode>>(baseUrl + "/GetByPersonFamily/" + id);
-	}
-
-	loadPersonFamilyTree(useFather: boolean, useMother: boolean): Observable<ResultModel<TreeNode[]>> {
-		const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.personUrl;
-		const data = {useFather,useMother};
-		return this.http.post<ResultModel<TreeNode[]>>(baseUrl + "/GetFamilyTreeBy", data);
-	}
-
-	loadChildrenById(fatherId:number, motherId: number): Observable<ResultModel<Person[]>> {
-		const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.personUrl;
-		const data = {fatherId,motherId};
-		
-		return this.http.post<ResultModel<Person[]>>(baseUrl + "/GetChildress/" ,data);
-	}
-	loadRelationshipById(personId:number): Observable<ResultModel<RelationShip[]>> {
-		const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.relationShipUrl;
-		return this.http.get<ResultModel<RelationShip[]>>(baseUrl + "/GetByPersonId/" +personId);
-	}
-	savePerson(data:PersonContainer): Observable<ResultModel<number>> { //insert Adminuser
-		let config = { headers : { 'Content-Type': 'application/json' } };
-		console.log("save family", data);
-		const baseUrl = this.appSetting.appSetting.baseUrl  + "/"+ ConfigureUrl.personUrl +"/SavePerson";
-		return this.http.post<ResultModel<number>>(baseUrl, data, config);
-	}
-	
-	deletePerson(id:number): Observable<ResultModel<number>>{
-		const baseUrl = this.appSetting.appSetting.baseUrl  + "/"+ ConfigureUrl.personUrl;
-		const data = {id};
-		return this.http.post<ResultModel<number>>(baseUrl + "/DeleteById" ,data);
-	}
-	uploadFile(data: any): Observable<ResultModel<string>> {
-		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.personUrl + "/UploadImage";
-		return this.http.post<ResultModel<string>>(baseUrl, data);
-	}
-	downloadFile(imageName: string): Observable<ResultModel<string>> {
-		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.FileUploadUrl + "/DownloadFile";
-		const data = {
-			fileName: imageName
-		};
-		return this.http.post<ResultModel<string>>(baseUrl, data);
-	}
-	deleteUploadFile(data: any): Observable<ResultModel<number>> {
-		//data ={filename};
-		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.personUrl + "/DeleteUploadFile";
-		return this.http.post<ResultModel<number>>(baseUrl, data);
-	}
-	deletePersonPhotoFile(id: number): Observable<ResultModel<number>> {
-		const data ={id, fileName:''};
-		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.FileUploadUrl + "/DeletePersonPhoto";
-		return this.http.post<ResultModel<number>>(baseUrl, data);
-	}
-	savePersonPhotoList(data:FormData):  Observable<ResultModel<number>> {
-		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.FileUploadUrl + "/SavePersonPhoto";
-		return this.http.post<ResultModel<number>>(baseUrl, data);
-	}
-	downloadPersonPhoto(id: number): Observable<ResultModel<string>> {
-		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.FileUploadUrl + "/DownloadPersonPhoto";
-		const data = {
-			id,
-			fileName: ''
-		};
-		return this.http.post<ResultModel<string>>(baseUrl, data);
-	}
-}
+
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Staff,StaffSearch, StaffView, ResultModel,ConfigureUrl,ResetPassword, Person, PersonContainer, RelationShip }  from '../models';
+import { AppSettingService } from '../shares';
+import { TreeNode } from '@openng/optimus-ui/api';
+
+@Injectable({ providedIn: 'root' })
+export class PersonService {
+	public searchCriteria: StaffSearch;
+	public parentList: Person[] =[];
+	constructor(private http: HttpClient,
+
+		private appSetting :AppSettingService
+		) {
+			this.searchCriteria = {
+				email:'',
+				firstName: '',
+				lastName:''
+			};
+		
+		}
+	searchPersons(criteria: StaffSearch): Observable<ResultModel<Person[]>> {
+		let config = { headers : { 'Content-Type': 'application/json' } };
+		const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.personUrl + "/SearchPerson";
+		return this.http.post<ResultModel<Person[]>>(baseUrl, criteria, config);
+	}
+	
+	loadPersonById(id:number): Observable<ResultModel<Person>> {
+		const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.personUrl;
+		/*
+		const params = new HttpParams().set("id", ""+id);
+		const headers = new HttpHeaders().set('Content-Type', 'application/json');
+		const options = {
+			headers: headers,
+			params: params
+			}; 
+			*/
+		
+		return this.http.get<ResultModel<Person>>(baseUrl + "/GetById/" + id);
+	}
+	loadPersonFamily(id: number): Observable<ResultModel<TreeNode>> {
+		const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.personUrl;
+		return this.http.get<ResultModel<TreeNode>>(baseUrl + "/GetByPersonFamily/" + id);
+	}
+
+	loadPersonFamilyTree(useFather: boolean, useMother: boolean): Observable<ResultModel<TreeNode[]>> {
+		const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.personUrl;
+		const data = {useFather,useMother};
+		return this.http.post<ResultModel<TreeNode[]>>(baseUrl + "/GetFamilyTreeBy", data);
+	}
+
+	loadChildrenById(fatherId:number, motherId: number): Observable<ResultModel<Person[]>> {
+		const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.personUrl;
+		const data = {fatherId,motherId};
+		
+		return this.http.post<ResultModel<Person[]>>(baseUrl + "/GetChildress/" ,data);
+	}
+	loadRelationshipById(personId:number): Observable<ResultModel<RelationShip[]>> {
+		const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.relationShipUrl;
+		return this.http.get<ResultModel<RelationShip[]>>(baseUrl + "/GetByPersonId/" +personId);
+	}
+	savePerson(data:PersonContainer): Observable<ResultModel<number>> { //insert Adminuser
+		let config = { headers : { 'Content-Type': 'application/json' } };
+		console.log("save family", data);
+		const baseUrl = this.appSetting.appSetting.baseUrl  + "/"+ ConfigureUrl.personUrl +"/SavePerson";
+		return this.http.post<ResultModel<number>>(baseUrl, data, config);
+	}
+	
+	deletePerson(id:number): Observable<ResultModel<number>>{
+		const baseUrl = this.appSetting.appSetting.baseUrl  + "/"+ ConfigureUrl.personUrl;
+		const data = {id};
+		return this.http.post<ResultModel<number>>(baseUrl + "/DeleteById" ,data);
+	}
+	uploadFile(data: any): Observable<ResultModel<string>> {
+		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.personUrl + "/UploadImage";
+		return this.http.post<ResultModel<string>>(baseUrl, data);
+	}
+	downloadFile_dontusethis(imageName: string, personId: number,
+		photoType: number): Observable<ResultModel<string>> {
+		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.FileUploadUrl + "/DownloadFile";
+		const data = {
+			fileName: imageName,
+			id: personId,
+			photoType
+		};
+		return this.http.post<ResultModel<string>>(baseUrl, data);
+	}
+	deleteUploadFile_dotnotuse(data: any): Observable<ResultModel<number>> {
+		//data ={filename};
+		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.personUrl + "/DeleteUploadFile";
+		return this.http.post<ResultModel<number>>(baseUrl, data);
+	}
+	deletePersonPhotoFile(personId: number, photoType: number): Observable<ResultModel<number>> {
+		const data = {
+			id: personId,
+			fileName: '',
+			photoType
+		};
+		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.FileUploadUrl + "/DeletePersonPhoto";
+		return this.http.post<ResultModel<number>>(baseUrl, data);
+	}
+	deletePersonPhotoFileById(id: number): Observable<ResultModel<number>> {
+		const data = {
+			id
+		};
+		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.FileUploadUrl + "/DeletePersonPhotoById";
+		return this.http.post<ResultModel<number>>(baseUrl, data);
+	}
+	savePersonPhotoList(data:FormData):  Observable<ResultModel<number>> {
+		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.FileUploadUrl + "/SavePersonPhoto";
+		return this.http.post<ResultModel<number>>(baseUrl, data);
+	}
+
+	downloadPersonPhoto64(imageName: string, personId: number,
+		photoType: number): Observable<ResultModel<string>> {
+		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.FileUploadUrl + "/DownloadPersonPhoto64";
+		const data = {
+			id: personId,
+			photoType,
+			fileName: imageName
+		};
+		return this.http.post<ResultModel<string>>(baseUrl, data);
+	}
+	downloadPersonPhoto(imageName: string, personId: number,
+		photoType: number): Observable<any> {
+		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.FileUploadUrl + "/DownloadPersonPhoto";
+		const data = {
+			id: personId,
+			photoType,
+			fileName: imageName
+		};
+		return this.http.post<any>(baseUrl, data);
+	}
+}

UI/src/app/pickperson/image.display.html

@@ -1,5 +1,5 @@
-<img [src]="imageDataUrl()" alt="Person Image" width="400" height="300"/>
-<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>
+<img [src]="imageDataUrl()" alt="Person Image" width="400" height="300"/>
+<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>

UI/src/app/pickperson/image.display.ts

@@ -1,64 +1,66 @@
-import { Component, inject, OnDestroy, OnInit, signal } from '@angular/core';
-import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
-import { AppSettingService } from '../shares';
-import { PersonService } from '../person';
-import { Subscription } from 'rxjs';
-import { ActivatedRoute } from '@angular/router';
-import { CommonModule } from '@angular/common';
-import { ButtonModule } from 'primeng/button';
-import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
-
-@Component({
-  selector: 'app-image-display',
-  imports:[CommonModule, ButtonModule],
-  templateUrl: './image.display.html',
-  styleUrls: ['./image.display.css']
-})
-export class ImageDisplayComponent implements OnInit, OnDestroy {
-  //base64ImageString: string = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='; // Example Base64 (a tiny red dot PNG)
-  //imageDataUrl: SafeResourceUrl ={};
-  imageDataUrl = signal<string>("");
-  private personService = inject(PersonService);
-  private sanitizer = inject(DomSanitizer);
-  //private route = inject(ActivatedRoute);
-  public ref = inject(DynamicDialogRef); 
-  public config = inject(DynamicDialogConfig);
-  private subscription:Subscription = new Subscription();
-
- ngOnInit(): void {
-    
-     const imageName = this.config.data.imageName;   
-    this.loadImage(imageName);
-
-  }
-  loadImage(fileName: string| null): void {
-    const download = this.personService.downloadFile(fileName!);
-    this.subscription.add(download.subscribe({
-      next: x => {
-        if (x.statusCode == 1)
-        {
-          this.display(x.data);
-          console.log("this is show image" , this.imageDataUrl(), x);
-        }
-        else
-        {
-          console.log("error in download in api ", x.message);
-        }
-      },
-      error: e => console.error("error in download image", e)
-    }));
-  }
-  display(baseImage: string): void 
-  { 
-    const changeUrl = (this.sanitizer.bypassSecurityTrustResourceUrl(baseImage) as any).changingThisBreaksApplicationSecurity;
-    console.log('this is bypassSecurityTrustResourceUrl', changeUrl);
-    const fullDataUri = `data:image/png;base64,${changeUrl}`;
-    this.imageDataUrl.set(fullDataUri);
-  }
-  ngOnDestroy(): void {
-    this.subscription.unsubscribe();
-  }
-  close() :void {
-     this.ref.close(null);
-  }
+import { Component, inject, OnDestroy, OnInit, signal } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { AppSettingService } from '../shares';
+import { PersonService } from '../person';
+import { Subscription } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { DynamicDialogConfig, DynamicDialogRef } from '@openng/optimus-ui/dynamicdialog';
+
+@Component({
+  selector: 'app-image-display',
+  imports:[CommonModule, ButtonModule],
+  templateUrl: './image.display.html',
+  styleUrls: ['./image.display.css']
+})
+export class ImageDisplayComponent implements OnInit, OnDestroy {
+  //base64ImageString: string = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='; // Example Base64 (a tiny red dot PNG)
+  //imageDataUrl: SafeResourceUrl ={};
+  imageDataUrl = signal<string>("");
+  private personService = inject(PersonService);
+  private sanitizer = inject(DomSanitizer);
+  //private route = inject(ActivatedRoute);
+  public ref = inject(DynamicDialogRef); 
+  public config = inject(DynamicDialogConfig);
+  private subscription:Subscription = new Subscription();
+
+ ngOnInit(): void {
+    
+   const imageName = this.config.data.imageName;   
+   const personId = this.config.data.personId;
+   const photoType = this.config.data.photyType;
+   this.loadImage(imageName, personId, photoType);
+
+  }
+  loadImage(fileName: string | null, personId: number, photoType: number): void {
+    const download = this.personService.downloadPersonPhoto64(fileName!, personId, photoType);
+    this.subscription.add(download.subscribe({
+      next: x => {
+        if (x.statusCode == 1)
+        {
+          this.display(x.data);
+          console.log("this is show image" , this.imageDataUrl(), x);
+        }
+        else
+        {
+          console.log("error in download in api ", x.message);
+        }
+      },
+      error: e => console.error("error in download image", e)
+    }));
+  }
+  display(baseImage: string): void 
+  { 
+    const changeUrl = (this.sanitizer.bypassSecurityTrustResourceUrl(baseImage) as any).changingThisBreaksApplicationSecurity;
+    console.log('this is bypassSecurityTrustResourceUrl', changeUrl);
+    const fullDataUri = `data:image/png;base64,${changeUrl}`;
+    this.imageDataUrl.set(fullDataUri);
+  }
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+  close() :void {
+     this.ref.close(null);
+  }
 }

UI/src/app/pickperson/pickperson.html

@@ -1,47 +1,47 @@
-<div class="flex-row w-full h-full">
-   <p-table #dt2 [value]="familyList()"  sortMode="multiple"  
-      class="p-datatable-sm"  paginatorDropdownAppendTo="body"  
-      dataKey="id" selectionMode="single" [(selection)]="selectedPerson"
-      [paginator]="true" [globalFilterFields]="['lastName', 'firstName', 'sex']"
-    [rows]="10" [rowsPerPageOptions]="[5,10, 20,50]"
-      [loading]="loading">
-      <ng-template #caption>
-        <div class="flex">
-            <p-iconfield iconPosition="left" class="ml-auto">
-                <p-inputicon>
-                    <i class="pi pi-search"></i>
-                </p-inputicon>
-                <input pInputText type="text" (input)="handleInput($event)" placeholder="Search keyword" />
-            </p-iconfield>
-        </div>
-    </ng-template>
-      <ng-template pTemplate="header">
-        <tr>    
-          <th pSortableColumn="lastName">Last Name <p-sortIcon field="lastName"></p-sortIcon>
-          </th>
-          <th pSortableColumn="firstName">First Name <p-sortIcon field="firstName"></p-sortIcon>
-          </th>
-         <th pSortableColumn="sex">Sex<p-sortIcon field="sex"></p-sortIcon>
-          </th>
-          <th></th>  
-        </tr>
-      </ng-template>
-      <ng-template pTemplate="body" let-user>
-          <tr [pSelectableRow]="user">
-            <td>{{user.lastName}}</td>
-            <td>{{user.firstName}}</td>   
-            <td>{{user.sex}}</td>        
-            <td></td>
-          </tr>
-      </ng-template>
-    </p-table> 
-     <div class="flex justify-end mr-2 mb-2 p-2">          
-          <button pButton type="submit" class="p-button-sm mr-2" 
-            icon="pi pi-check" iconPos="left" label="Select"
-            (click)="select($event)" [disabled]="selectedPerson == null" ></button>            
-          <button pButton pRipple class="p-button-sm" type="button" 
-            icon="pi pi-times" iconPos="left" 
-            label="Cancel" (click)="cancel($event)"></button>
-        </div>
-</div>
-
+<div class="flex-row w-full h-full">
+   <p-table #dt2 [value]="familyList()"  sortMode="multiple"  
+      class="p-datatable-sm"  paginatorDropdownAppendTo="body"  
+      dataKey="id" selectionMode="single" [(selection)]="selectedPerson"
+      [paginator]="true" [globalFilterFields]="['lastName', 'firstName', 'sex']"
+    [rows]="10" [rowsPerPageOptions]="[5,10, 20,50]"
+      [loading]="loading">
+      <ng-template #caption>
+        <div class="flex">
+            <p-iconfield iconPosition="left" class="ml-auto">
+                <p-inputicon>
+                    <i class="pi pi-search"></i>
+                </p-inputicon>
+                <input pInputText type="text" (input)="handleInput($event)" placeholder="Search keyword" />
+            </p-iconfield>
+        </div>
+    </ng-template>
+      <ng-template pTemplate="header">
+        <tr>    
+          <th pSortableColumn="lastName">Last Name <p-sortIcon field="lastName"></p-sortIcon>
+          </th>
+          <th pSortableColumn="firstName">First Name <p-sortIcon field="firstName"></p-sortIcon>
+          </th>
+         <th pSortableColumn="sex">Sex<p-sortIcon field="sex"></p-sortIcon>
+          </th>
+          <th></th>  
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-user>
+          <tr [pSelectableRow]="user">
+            <td>{{user.lastName}}</td>
+            <td>{{user.firstName}}</td>   
+            <td>{{user.sex}}</td>        
+            <td></td>
+          </tr>
+      </ng-template>
+    </p-table> 
+     <div class="flex justify-end mr-2 mb-2 p-2">          
+          <button pButton type="submit" class="p-button-sm mr-2" 
+            icon="pi pi-check" iconPos="left" label="Select"
+            (click)="select($event)" [disabled]="selectedPerson == null" ></button>            
+          <button pButton pRipple class="p-button-sm" type="button" 
+            icon="pi pi-times" iconPos="left" 
+            label="Cancel" (click)="cancel($event)"></button>
+        </div>
+</div>
+

UI/src/app/pickperson/pickperson.ts

@@ -1,53 +1,53 @@
-import { CommonModule } from '@angular/common';
-import { Component, OnDestroy, OnInit, signal, ViewChild } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { Table, TableModule } from 'primeng/table';
-import { Person } from '../models';
-import { IconFieldModule } from 'primeng/iconfield';
-import { InputIconModule } from 'primeng/inputicon';
-import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
-import { ButtonModule } from 'primeng/button';
-import { InputTextModule } from 'primeng/inputtext';
-
-@Component({
-  selector: 'app-pickperson',
-  imports: [TableModule, ButtonModule,CommonModule, InputTextModule, FormsModule,IconFieldModule,InputIconModule],
-  templateUrl: './pickperson.html',
-  styleUrl: './pickperson.css'
-})
-export class Pickperson implements OnInit, OnDestroy{
-  @ViewChild(Table) dt2!: Table;
-  constructor(public ref: DynamicDialogRef, public config: DynamicDialogConfig)
-  {
-    
-  }
-  loading = false;
-  familyList = signal<Person[]>([]);
-  selectedPerson!: Person;
-  handleInput(event: Event) {
-    const value = (event.target as HTMLInputElement).value;
-    this.dt2.filterGlobal(value, 'contains');
-  }
-
-  edit(id: number): void {
-
-  }
-  cancel(e:Event):void {
-    e.preventDefault();
-    this.ref.close(null);
-  }
-  select(e:Event):void {
-    e.preventDefault();
-    this.ref.close(this.selectedPerson);
-  }
-
-  ngOnDestroy(): void {
-    
-  }
-  ngOnInit(): void {
-    console.log("pick person the familyList", this.config);
-    this.familyList.set(this.config.data.familyList);
-    
-  }
-
-}
+import { CommonModule } from '@angular/common';
+import { Component, OnDestroy, OnInit, signal, ViewChild } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { Table, TableModule } from '@openng/optimus-ui/table';
+import { Person } from '../models';
+import { IconFieldModule } from '@openng/optimus-ui/iconfield';
+import { InputIconModule } from '@openng/optimus-ui/inputicon';
+import { DynamicDialogConfig, DynamicDialogRef } from '@openng/optimus-ui/dynamicdialog';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
+
+@Component({
+  selector: 'app-pickperson',
+  imports: [TableModule, ButtonModule,CommonModule, InputTextModule, FormsModule,IconFieldModule,InputIconModule],
+  templateUrl: './pickperson.html',
+  styleUrl: './pickperson.css'
+})
+export class Pickperson implements OnInit, OnDestroy{
+  @ViewChild(Table) dt2!: Table;
+  constructor(public ref: DynamicDialogRef, public config: DynamicDialogConfig)
+  {
+    
+  }
+  loading = false;
+  familyList = signal<Person[]>([]);
+  selectedPerson!: Person;
+  handleInput(event: Event) {
+    const value = (event.target as HTMLInputElement).value;
+    this.dt2.filterGlobal(value, 'contains');
+  }
+
+  edit(id: number): void {
+
+  }
+  cancel(e:Event):void {
+    e.preventDefault();
+    this.ref.close(null);
+  }
+  select(e:Event):void {
+    e.preventDefault();
+    this.ref.close(this.selectedPerson);
+  }
+
+  ngOnDestroy(): void {
+    
+  }
+  ngOnInit(): void {
+    console.log("pick person the familyList", this.config);
+    this.familyList.set(this.config.data.familyList);
+    
+  }
+
+}

UI/src/app/route-guard/auth.guard.ts

@@ -1,52 +1,52 @@
-import { Injectable } from '@angular/core';
-import { Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
-import { Utils } from '../shares';
-import {AuthenticationService} from '../user-services/authentication.service';
-@Injectable({ providedIn: 'root' })
-export class AuthGuard  {
-  msg ="[AuthGuard] ";
-  constructor(private router: Router,
-    private authService :AuthenticationService ) { }
-
-  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
-    const roleAllowed = route.data['roleAllowed'];
-    const user = Utils.getCurrentUser();   
-    const userRole = Utils.getUserRole(user);
-    let hasLoggedIn = Utils.getIsAuth();   
-    //console.log(this.msg + " the userlogin ", user, hasLoggedIn);
-    if (hasLoggedIn) {
-
-      if (roleAllowed != undefined)
-      {
-        //it number toString
-      // console.log("[auth-guard] ther roleAllow ", roleAllowed);
-     // console.log("[auth-guard] before roleAllow ", roleAllowed,userRole);
-        if (roleAllowed.indexOf(userRole.toString()) != -1) {       
-         // console.log("[auth-guard] pass roleAllow ", roleAllowed,userRole);
-          return true;
-        }
-        else {
-          this.authService.logout();
-          this.router.navigate(['/login']);
-          return false;
-        }
-      }
-      else //if no role define just return hasLoggedIn
-      {
-        return hasLoggedIn;
-      }
-    }
-    else
-    {
-     // this.authService.logout();
-      this.router.navigate(['/login']);
-      return false;
-    }
-
-    // not logged in so redirect to login page with the return url
-    //this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
-    this.authService.logout();
-    return false;
-  }
- 
-}
+import { Injectable } from '@angular/core';
+import { Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { Utils } from '../shares';
+import {AuthenticationService} from '../user-services/authentication.service';
+@Injectable({ providedIn: 'root' })
+export class AuthGuard  {
+  msg ="[AuthGuard] ";
+  constructor(private router: Router,
+    private authService :AuthenticationService ) { }
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+    const roleAllowed = route.data['roleAllowed'];
+    const user = Utils.getCurrentUser();   
+    const userRole = Utils.getUserRole(user);
+    let hasLoggedIn = Utils.getIsAuth();   
+    //console.log(this.msg + " the userlogin ", user, hasLoggedIn);
+    if (hasLoggedIn) {
+
+      if (roleAllowed != undefined)
+      {
+        //it number toString
+      // console.log("[auth-guard] ther roleAllow ", roleAllowed);
+     // console.log("[auth-guard] before roleAllow ", roleAllowed,userRole);
+        if (roleAllowed.indexOf(userRole.toString()) != -1) {       
+         // console.log("[auth-guard] pass roleAllow ", roleAllowed,userRole);
+          return true;
+        }
+        else {
+          this.authService.logout();
+          this.router.navigate(['/login']);
+          return false;
+        }
+      }
+      else //if no role define just return hasLoggedIn
+      {
+        return hasLoggedIn;
+      }
+    }
+    else
+    {
+     // this.authService.logout();
+      this.router.navigate(['/login']);
+      return false;
+    }
+
+    // not logged in so redirect to login page with the return url
+    //this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
+    this.authService.logout();
+    return false;
+  }
+ 
+}

UI/src/app/route-guard/index.ts

@@ -1 +1 @@
-export * from './auth.guard';
+export * from './auth.guard';

UI/src/app/shares/CommonUtilities.ts

@@ -1,54 +1,54 @@
-import { FormControl, FormGroup } from '@angular/forms';
-
-export class CommonUtilities {
-     /** Display the blob */
-  static displayFileInNewTab(response:any, defaultFileName:string) {
-    const contentType = response.headers.get('content-type');
-    const blob = new Blob([response.body], { type: contentType });
-    const fileName = this.getFileName(response,defaultFileName);
-     const nav = (window.navigator as any);
-    if (nav.msSaveOrOpenBlob) {
-      nav.msSaveOrOpenBlob(blob, fileName);
-    } else {
-      const data = window.URL.createObjectURL(blob);
-      const link = document.createElement('a');
-      link.href = data;
-      link.target = '_blank';
-      link.click();
-    }
-  }
-     /*** Download the blob ***/
-  static downloadFile(response:any, defaultFileName:string) {
-    const contentType = response.headers.get('content-type');
-    const blob = new Blob([response.body], { type: contentType });
-    const fileName = this.getFileName(response,defaultFileName);
-   const nav = (window.navigator as any);
-    if (typeof nav.msSaveBlob === 'function')
-    {
-      console.log("download the report saveblob");
-      nav.msSaveBlob(blob, fileName);
-      console.log("download the report saveblob done");
-    }
-    else {      
-      const link = document.createElement('a');
-      link.href = window.URL.createObjectURL(blob);
-      console.log("no msSaveBlob download the report saveblob done");
-      //link.download? = fileName;
-      link.download = fileName;
-      link.click();
-    }
-  }
-   /** Get the attachment file name */
-   static getFileName(response:any, defaultFileName:string) {
-    const contentDis = response.headers.get('content-disposition');
-    let fileName =defaultFileName;   
-    if (contentDis && contentDis.indexOf('attachment') !== -1) {
-      const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
-      const matches = filenameRegex.exec(contentDis);
-      if (matches != null && matches[1]) {
-        fileName = matches[1].replace(/['"]/g, '');
-      }
-    }
-    return fileName;
-  }
+import { FormControl, FormGroup } from '@angular/forms';
+
+export class CommonUtilities {
+     /** Display the blob */
+  static displayFileInNewTab(response:any, defaultFileName:string) {
+    const contentType = response.headers.get('content-type');
+    const blob = new Blob([response.body], { type: contentType });
+    const fileName = this.getFileName(response,defaultFileName);
+     const nav = (window.navigator as any);
+    if (nav.msSaveOrOpenBlob) {
+      nav.msSaveOrOpenBlob(blob, fileName);
+    } else {
+      const data = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = data;
+      link.target = '_blank';
+      link.click();
+    }
+  }
+     /*** Download the blob ***/
+  static downloadFile(response:any, defaultFileName:string) {
+    const contentType = response.headers.get('content-type');
+    const blob = new Blob([response.body], { type: contentType });
+    const fileName = this.getFileName(response,defaultFileName);
+   const nav = (window.navigator as any);
+    if (typeof nav.msSaveBlob === 'function')
+    {
+      console.log("download the report saveblob");
+      nav.msSaveBlob(blob, fileName);
+      console.log("download the report saveblob done");
+    }
+    else {      
+      const link = document.createElement('a');
+      link.href = window.URL.createObjectURL(blob);
+      console.log("no msSaveBlob download the report saveblob done");
+      //link.download? = fileName;
+      link.download = fileName;
+      link.click();
+    }
+  }
+   /** Get the attachment file name */
+   static getFileName(response:any, defaultFileName:string) {
+    const contentDis = response.headers.get('content-disposition');
+    let fileName =defaultFileName;   
+    if (contentDis && contentDis.indexOf('attachment') !== -1) {
+      const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+      const matches = filenameRegex.exec(contentDis);
+      if (matches != null && matches[1]) {
+        fileName = matches[1].replace(/['"]/g, '');
+      }
+    }
+    return fileName;
+  }
 }

UI/src/app/shares/appsetting.ts

@@ -1,77 +1,77 @@
-import { inject, Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { firstValueFrom, Observable } from 'rxjs';
-export function initializeApp_old(appInitService: AppSettingService) {
-  return (): Promise<any> => {
-    return appInitService.loadAppSetting_p();
-  }
-
-};
-export function initializeApp() {
-   return (): Promise<any> => {
-    return inject(AppSettingService).loadAppSetting_p();
-  }
-  //  return () => inject(AppSettingService).loadAppSetting();
-};
-
-@Injectable({ providedIn: 'root' })
-export class AppSettingService {
-  private _appsetting: any;
-  constructor(private http: HttpClient
-  ) { }
-
-  public loadAppSetting_p(): Promise<any> {
-    const source$ = this.http.get("config/appsetting.json")
-    const rs$ = firstValueFrom(source$)
-      .then(x => {
-        this._appsetting = x;
-        console.log("[AppSettingService] assign", x);
-      });
-    return rs$;
-  }
-    public loadAppSetting(): Observable<any> {
-    const source$ = this.http.get("config/appsetting.json")
-   return source$;
-  }
-  set appSetting(value: any) {
-    this._appsetting = value;
-  }
-  get appSetting(): any {
-    return this._appsetting;
-  }
-
-}
-/* angular 19 new one in app.config.ts
- provideAppInitializer(initializeApp()),
- 
-/* module put this 
-to use it 
-in app.module.ts
-add
-1) 
- providers: [ 
- { provide : APP_INITIALIZER,  multi : true, deps : [AppSettingService], 
-      useFactory: initializeApp
-    },
-  ]
-
-2) 
-other this one work too.
-providers: [ 
-{ 
-    provide : APP_INITIALIZER, 
-    multi : true, 
-     deps : [AppSettingService], 
-     useFactory : (appConfigService : AppSettingService) =>  () => appConfigService.loadAppSetting()
-}
-]
-
-to use it calling something like this
-export class TestComponent {
-    public test1ServiceUrl: string;
-
-    constructor(public configService: AppConfigService) {
-        this.test1ServiceUrl = this.configService.appSetting.test1ServiceUrl;
-    }
-}
+import { inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { firstValueFrom, Observable } from 'rxjs';
+export function initializeApp_old(appInitService: AppSettingService) {
+  return (): Promise<any> => {
+    return appInitService.loadAppSetting_p();
+  }
+
+};
+export function initializeApp() {
+   return (): Promise<any> => {
+    return inject(AppSettingService).loadAppSetting_p();
+  }
+  //  return () => inject(AppSettingService).loadAppSetting();
+};
+
+@Injectable({ providedIn: 'root' })
+export class AppSettingService {
+  private _appsetting: any;
+  constructor(private http: HttpClient
+  ) { }
+
+  public loadAppSetting_p(): Promise<any> {
+    const source$ = this.http.get("config/appsetting.json")
+    const rs$ = firstValueFrom(source$)
+      .then(x => {
+        this._appsetting = x;
+        console.log("[AppSettingService] assign", x);
+      });
+    return rs$;
+  }
+    public loadAppSetting(): Observable<any> {
+    const source$ = this.http.get("config/appsetting.json")
+   return source$;
+  }
+  set appSetting(value: any) {
+    this._appsetting = value;
+  }
+  get appSetting(): any {
+    return this._appsetting;
+  }
+
+}
+/* angular 19 new one in app.config.ts
+ provideAppInitializer(initializeApp()),
+ 
+/* module put this 
+to use it 
+in app.module.ts
+add
+1) 
+ providers: [ 
+ { provide : APP_INITIALIZER,  multi : true, deps : [AppSettingService], 
+      useFactory: initializeApp
+    },
+  ]
+
+2) 
+other this one work too.
+providers: [ 
+{ 
+    provide : APP_INITIALIZER, 
+    multi : true, 
+     deps : [AppSettingService], 
+     useFactory : (appConfigService : AppSettingService) =>  () => appConfigService.loadAppSetting()
+}
+]
+
+to use it calling something like this
+export class TestComponent {
+    public test1ServiceUrl: string;
+
+    constructor(public configService: AppConfigService) {
+        this.test1ServiceUrl = this.configService.appSetting.test1ServiceUrl;
+    }
+}
 */

UI/src/app/shares/error.interceptor.ts

@@ -1,97 +1,97 @@
-import { Injectable, inject } from '@angular/core';
-import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpInterceptorFn, HttpHandlerFn } from '@angular/common/http';
-import { Observable, throwError } from 'rxjs';
-import { catchError } from 'rxjs/operators';
-
-import { AuthenticationService } from '../user-services';
-//import { ToastrService } from 'ngx-toastr';
-import { NavigationExtras, Router } from '@angular/router';
-/*
-@Injectable()
-export class ErrorInterceptor implements HttpInterceptor {
-  //private authenticationService: AuthenticationService;
-  constructor(
-    private router: Router,
-    //   private toastr: ToastrService,
-  ) { }
-
-  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    // console.log("I am intercept to catch error status = 401...", request);
-    return next.handle(request).pipe(catchError(err => {
-      /* no use yet
-      if (err) {
-        switch(err.status) {
-          case 400: 
-          if (err.error.errors) {
-            const modalStateErrors = [];
-            for (const key in err.error.errors) {
-              if (err.error.errors[key]) {
-                modalStateErrors.push(err.error.errors[key]);                
-              }
-            }
-            throw modalStateErrors;
-          } else {
-            this.toastr.error(err.statusText, err.status);
-          }
-          break;
-          case 401:
-            this.toastr.error(err.statusText, err.status);
-            break;
-          case 404:
-            this.router.navigateByUrl('/not-found');
-            break;
-          case 500: 
-            const navigationExtras: NavigationExtras = {state:{error:err.error}};
-            this.router.navigateByUrl('/server-error', navigationExtras);
-            break;
-          default:
-            this.toastr.error('Something unexpected went wrong');
-            console.log("this error interceptor",err);
-            break;
-        }
-      }
-     */
-/*
-    if (err.status === 401) {
-      // auto logout if 401 response returned from api  Unauthorized 
-      //   this.authenticationService.logout();
-      //location.reload();
-      const error = err.error.message || err.statusText;
-      console.log("After I Get Error status = 401...", error, err);
-      return throwError(error);
-    }
-    else {
-      console.log("I Get Error .", err);
-      return throwError(err);
-    }
-  }))
-}
-}
-
-*/
-//new one 
-//https://blog.ninja-squad.com/2022/11/09/angular-http-in-standalone-applications/
-////////////////
-export const ErrorInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> => {
-  const authenticationService = inject(AuthenticationService);
-
-  // logger.log(`Request is on its way to ${req.url}`);
-  return next(req).pipe(catchError(err => {
-    if (err.status === 401) {
-      // auto logout if 401 response returned from api  Unauthorized 
-      //   this.authenticationService.logout();
-      //location.reload();
-      const error = err.error.message || err.statusText;
-     // console.log("After I Get Error status = 401...", error, err);
-      return throwError(() => error);
-    }
-    else {
-      console.log("I Get Error .", err);
-      return throwError(() => err);
-    }
-
-  }));
-}
-
-////////////////
-
+import { Injectable, inject } from '@angular/core';
+import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpInterceptorFn, HttpHandlerFn } from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+
+import { AuthenticationService } from '../user-services';
+//import { ToastrService } from 'ngx-toastr';
+import { NavigationExtras, Router } from '@angular/router';
+/*
+@Injectable()
+export class ErrorInterceptor implements HttpInterceptor {
+  //private authenticationService: AuthenticationService;
+  constructor(
+    private router: Router,
+    //   private toastr: ToastrService,
+  ) { }
+
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    // console.log("I am intercept to catch error status = 401...", request);
+    return next.handle(request).pipe(catchError(err => {
+      /* no use yet
+      if (err) {
+        switch(err.status) {
+          case 400: 
+          if (err.error.errors) {
+            const modalStateErrors = [];
+            for (const key in err.error.errors) {
+              if (err.error.errors[key]) {
+                modalStateErrors.push(err.error.errors[key]);                
+              }
+            }
+            throw modalStateErrors;
+          } else {
+            this.toastr.error(err.statusText, err.status);
+          }
+          break;
+          case 401:
+            this.toastr.error(err.statusText, err.status);
+            break;
+          case 404:
+            this.router.navigateByUrl('/not-found');
+            break;
+          case 500: 
+            const navigationExtras: NavigationExtras = {state:{error:err.error}};
+            this.router.navigateByUrl('/server-error', navigationExtras);
+            break;
+          default:
+            this.toastr.error('Something unexpected went wrong');
+            console.log("this error interceptor",err);
+            break;
+        }
+      }
+     */
+/*
+    if (err.status === 401) {
+      // auto logout if 401 response returned from api  Unauthorized 
+      //   this.authenticationService.logout();
+      //location.reload();
+      const error = err.error.message || err.statusText;
+      console.log("After I Get Error status = 401...", error, err);
+      return throwError(error);
+    }
+    else {
+      console.log("I Get Error .", err);
+      return throwError(err);
+    }
+  }))
+}
+}
+
+*/
+//new one 
+//https://blog.ninja-squad.com/2022/11/09/angular-http-in-standalone-applications/
+////////////////
+export const ErrorInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> => {
+  const authenticationService = inject(AuthenticationService);
+
+  // logger.log(`Request is on its way to ${req.url}`);
+  return next(req).pipe(catchError(err => {
+    if (err.status === 401) {
+      // auto logout if 401 response returned from api  Unauthorized 
+      //   this.authenticationService.logout();
+      //location.reload();
+      const error = err.error.message || err.statusText;
+     // console.log("After I Get Error status = 401...", error, err);
+      return throwError(() => error);
+    }
+    else {
+      console.log("I Get Error .", err);
+      return throwError(() => err);
+    }
+
+  }));
+}
+
+////////////////
+

UI/src/app/shares/httpfile.service.ts

@@ -1,115 +1,115 @@
-import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { Router } from '@angular/router';
-import { Observable, throwError } from 'rxjs';
-import { catchError } from 'rxjs/operators';
-import { ConfigureUrl } from '../models';
-import { AppSettingService } from './appsetting';
-
-
-@Injectable({
-  providedIn: 'root'
-})
-export class HttpUtility {
-    private baseApiUrl: string = "";
-    constructor(private http: HttpClient, 
-      private appSetting :AppSettingService,
-      private router: Router) {
-    }
-  /**
-   * getFile
-   * @param url
-   */
-   public getFileAsText(url: string): Observable<any> {
-    return this.http
-      .get(this.getApiUrl(url), { responseType: 'blob' as 'text' })
-      .pipe(catchError(e => this.handleError(e)));
-  }
-  /**
-   * getFile
-   * @param url
-   */
-   public getFile(url: string): Observable<any> {
-    return this.http
-      .get(this.getApiUrl(url), { responseType: 'blob' as 'json' })
-      .pipe(catchError(e => this.handleError(e)));
-  }
-
-  /**
-   * handleError
-   * @param response
-   */
-  private handleError(errorResponse: HttpErrorResponse) {
-    // in a real world app, we may send the server to some remote logging infrastructure
-    // instead of just logging it to the console
-    return throwError(errorResponse);
-  }
-  //get excel file zip file etc ..
-  /*
-   allowedToDisplay = [
-    this.mimeConstant.png,
-    this.mimeConstant.jpeg,
-    this.mimeConstant.jpg,
-    this.mimeConstant.gif,
-    this.mimeConstant.txt,
-    this.mimeConstant.pdf
-  ];
-  */
-  /* how to use it 
-  this.http.getFileResponse(`Person/GetPhoto?recordId=${personId}`).pipe(
-      catchError(err => {
-        this.snackBar.error(err || this.constants.error_Getting_photo);
-        return EMPTY;
-      }),
-      finalize(() => {
-        this.spinner.hide();
-      })).subscribe(response => {
-        if (response) {
-          if (isDownload) {
-            CommonUtilities.downloadFile(response);
-          } else {
-            if (response.body && response.body.type) {
-              if (this.allowedToDisplay.includes(response.body.type)) {
-                CommonUtilities.displayFileInNewTab(response);
-              } else {
-                this.temporaryFile = response;
-                this.downloadWarning = true;
-              }
-            }
-          }
-        }
-      });
-  */
-  public getFileResponse(url: string, data?: any): Observable<any> {
-    if (data) {
-      return this.http.post(this.getApiUrl(url),
-        data,
-        { responseType: 'blob', observe: 'response' })
-        .pipe(catchError(e => this.handleError(e)));
-
-    }
-    return this.http
-      .get(this.getApiUrl(url), { responseType: 'blob', observe: 'response' })
-      .pipe(catchError(e => this.handleError(e)));
-  }
-
-  public getFileAsPDF(url: string, data: any): Observable<any> {
-    let updateURL;
-    if (data) {
-      updateURL = url + data;
-    } else {
-      updateURL = url;
-    }
-    return this.http
-      .get(this.getApiUrl(updateURL), { responseType: 'blob' as 'text', observe: 'response' })
-      .pipe(catchError(e => this.handleError(e)));
-  }
-  /**
-   * getApiUrl
-   * @param url
-   */
-  private getApiUrl(url:string) {
-    const baseUrl = this.appSetting.appSetting.baseUrl; 
-    return baseUrl + "/"+ url;
-  }
+import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { ConfigureUrl } from '../models';
+import { AppSettingService } from './appsetting';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HttpUtility {
+    private baseApiUrl: string = "";
+    constructor(private http: HttpClient, 
+      private appSetting :AppSettingService,
+      private router: Router) {
+    }
+  /**
+   * getFile
+   * @param url
+   */
+   public getFileAsText(url: string): Observable<any> {
+    return this.http
+      .get(this.getApiUrl(url), { responseType: 'blob' as 'text' })
+      .pipe(catchError(e => this.handleError(e)));
+  }
+  /**
+   * getFile
+   * @param url
+   */
+   public getFile(url: string): Observable<any> {
+    return this.http
+      .get(this.getApiUrl(url), { responseType: 'blob' as 'json' })
+      .pipe(catchError(e => this.handleError(e)));
+  }
+
+  /**
+   * handleError
+   * @param response
+   */
+  private handleError(errorResponse: HttpErrorResponse) {
+    // in a real world app, we may send the server to some remote logging infrastructure
+    // instead of just logging it to the console
+    return throwError(errorResponse);
+  }
+  //get excel file zip file etc ..
+  /*
+   allowedToDisplay = [
+    this.mimeConstant.png,
+    this.mimeConstant.jpeg,
+    this.mimeConstant.jpg,
+    this.mimeConstant.gif,
+    this.mimeConstant.txt,
+    this.mimeConstant.pdf
+  ];
+  */
+  /* how to use it 
+  this.http.getFileResponse(`Person/GetPhoto?recordId=${personId}`).pipe(
+      catchError(err => {
+        this.snackBar.error(err || this.constants.error_Getting_photo);
+        return EMPTY;
+      }),
+      finalize(() => {
+        this.spinner.hide();
+      })).subscribe(response => {
+        if (response) {
+          if (isDownload) {
+            CommonUtilities.downloadFile(response);
+          } else {
+            if (response.body && response.body.type) {
+              if (this.allowedToDisplay.includes(response.body.type)) {
+                CommonUtilities.displayFileInNewTab(response);
+              } else {
+                this.temporaryFile = response;
+                this.downloadWarning = true;
+              }
+            }
+          }
+        }
+      });
+  */
+  public getFileResponse(url: string, data?: any): Observable<any> {
+    if (data) {
+      return this.http.post(this.getApiUrl(url),
+        data,
+        { responseType: 'blob', observe: 'response' })
+        .pipe(catchError(e => this.handleError(e)));
+
+    }
+    return this.http
+      .get(this.getApiUrl(url), { responseType: 'blob', observe: 'response' })
+      .pipe(catchError(e => this.handleError(e)));
+  }
+
+  public getFileAsPDF(url: string, data: any): Observable<any> {
+    let updateURL;
+    if (data) {
+      updateURL = url + data;
+    } else {
+      updateURL = url;
+    }
+    return this.http
+      .get(this.getApiUrl(updateURL), { responseType: 'blob' as 'text', observe: 'response' })
+      .pipe(catchError(e => this.handleError(e)));
+  }
+  /**
+   * getApiUrl
+   * @param url
+   */
+  private getApiUrl(url:string) {
+    const baseUrl = this.appSetting.appSetting.baseUrl; 
+    return baseUrl + "/"+ url;
+  }
 }

UI/src/app/shares/index.ts

@@ -1,8 +1,8 @@
-export * from './utils';
-export {initializeApp, AppSettingService} from './appsetting';
-export * from './error.interceptor';
-export * from './jwt.interceptor';
-export * from './lookup.service';
-export * from './httpfile.service';
-export * from './CommonUtilities';
+export * from './utils';
+export {initializeApp, AppSettingService} from './appsetting';
+export * from './error.interceptor';
+export * from './jwt.interceptor';
+export * from './lookup.service';
+export * from './httpfile.service';
+export * from './CommonUtilities';
 export * from './timeinput';

UI/src/app/shares/jwt.interceptor.ts

@@ -1,47 +1,47 @@
-import { Injectable } from '@angular/core';
-import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpInterceptorFn, HttpHandlerFn } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { Utils } from './utils';
-/*
-@Injectable()
-export class JwtInterceptor implements HttpInterceptor {
-  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    // add authorization header with jwt token if available
-    const currentUser = Utils.getCurrentUser();//localStorage.getItem('currentUser')!;    
-    console.log('I am interceptor debug for currentUser obj', currentUser);
-    if (currentUser && currentUser.token) {
-      //console.log('I am interceptor add authorization header with jwt token');
-      request = request.clone({
-        setHeaders: {
-          Authorization: `Bearer ${currentUser.token}`
-        }
-      });
-    }
-    return next.handle(request);
-  }
-}
-
-/*
-new one 
-////////////////
-*/
-export const JwtInterceptor: HttpInterceptorFn = (request: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> => {
-  //const logger = inject(Logger);
-  //logger.log(`Request is on its way to ${req.url}`);
-  const currentUser = Utils.getCurrentUser();//localStorage.getItem('currentUser')!;    
- // console.log('I am interceptor debug for currentUser obj', currentUser);
-  if (currentUser && currentUser.token && currentUser.token != "") {
-   // console.log('I am interceptor add authorization header with jwt token');
-    request = request.clone({
-      setHeaders: {
-        Authorization: `Bearer ${currentUser.token}`
-      }
-    });
-  }
-  return next(request);
-}
-
-////////////////
-/*
-providers: [provideHttpClient(withInterceptors([loggerInterceptor]))] 
+import { Injectable } from '@angular/core';
+import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpInterceptorFn, HttpHandlerFn } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Utils } from './utils';
+/*
+@Injectable()
+export class JwtInterceptor implements HttpInterceptor {
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    // add authorization header with jwt token if available
+    const currentUser = Utils.getCurrentUser();//localStorage.getItem('currentUser')!;    
+    console.log('I am interceptor debug for currentUser obj', currentUser);
+    if (currentUser && currentUser.token) {
+      //console.log('I am interceptor add authorization header with jwt token');
+      request = request.clone({
+        setHeaders: {
+          Authorization: `Bearer ${currentUser.token}`
+        }
+      });
+    }
+    return next.handle(request);
+  }
+}
+
+/*
+new one 
+////////////////
+*/
+export const JwtInterceptor: HttpInterceptorFn = (request: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> => {
+  //const logger = inject(Logger);
+  //logger.log(`Request is on its way to ${req.url}`);
+  const currentUser = Utils.getCurrentUser();//localStorage.getItem('currentUser')!;    
+ // console.log('I am interceptor debug for currentUser obj', currentUser);
+  if (currentUser && currentUser.token && currentUser.token != "") {
+   // console.log('I am interceptor add authorization header with jwt token');
+    request = request.clone({
+      setHeaders: {
+        Authorization: `Bearer ${currentUser.token}`
+      }
+    });
+  }
+  return next(request);
+}
+
+////////////////
+/*
+providers: [provideHttpClient(withInterceptors([loggerInterceptor]))] 
 */

UI/src/app/shares/lookup.service.ts

@@ -1,136 +1,136 @@
-import { Injectable, Inject , Output} from '@angular/core';
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { map } from 'rxjs/operators';
-import { Observable, of } from 'rxjs';
-import { ConfigureUrl,Lookup,LookupEdit,ResultModel
-   } from '../models';
-import { Utils,AppSettingService } from '../shares';
-
-
-@Injectable({ providedIn: 'root' })
-export class LookupService {
-  msg: string = "[lookupService] ";  
-    _lookupByStatus:any;
-    _staffList:any;
-    _clientList:any;
-    _jobList:any;
-  constructor(private http: HttpClient,   
-    private appSetting :AppSettingService
-  ) {
-      // this default when load look for previous login information
-        // if no need then comment out downthere  
-    this.setAllNull();
-  }
-  setAllNull() :void {
-    // this._lhdList = undefined;
-    this._lookupByStatus = {};
-    this._staffList = null;
-    this._clientList = null;
-    this._jobList = null;
-  }
-  loadLookupEditBystatus(type:string): Observable<ResultModel<LookupEdit[]>> {			
-  	const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.lookupUrl + "/LoadLookupEdit";
-    const params = new HttpParams().append('type', type);
-    console.log(this.msg + "go server this loadLookupEditBystatus is in cache ", type);
-    return this.http.get<ResultModel<LookupEdit[]>>(baseUrl, {params});
-}
-loadLookupById(id:number, type:string): Observable<ResultModel<LookupEdit>> {
-		const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.lookupUrl;
-     const params = new HttpParams()
-                    .append('id', id)
-                    .append('type', type);
-		return this.http.get<ResultModel<LookupEdit>>(baseUrl,{params});
-	}
-	saveLookup(item:LookupEdit): Observable<ResultModel<number>> { //insert Lookup
-    this.setAllNull();
-		let config = { headers : { 'Content-Type': 'application/json' } };
-		const baseUrl = this.appSetting.appSetting.baseUrl  + "/"+ ConfigureUrl.lookupUrl;
-		return this.http.post<ResultModel<number>>(baseUrl, item, config);
-	}
-	deleteLookup(id:number): Observable<ResultModel<number>>{
-		const baseUrl = this.appSetting.appSetting.baseUrl  + "/"+ ConfigureUrl.lookupUrl;
-		return this.http.delete<ResultModel<number>>(baseUrl + "/" + id );
-	}
-
-  loadLookupBystatus(type:string): Observable<ResultModel<Lookup[]>> {			
-		const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.lookupUrl + "/LoadJobs";
-    console.log(this.msg + "loadLookupBystatus", this._lookupByStatus);
-		if (this._lookupByStatus[type])
-    {
-      console.log(this.msg + "Not go server this LoadJobs is in cache ",type);
-      return of(this._lookupByStatus[type]);
-    }
-    else
-    {
-       const params = new HttpParams().append('type', type);
-      console.log(this.msg + "go server this loadLookupBystatus is in cache ", type);
-    return this.http.get<ResultModel<Lookup[]>>(baseUrl, {params})
-    .pipe(map(resultModel => {
-      this._lookupByStatus[type] = resultModel;
-      return resultModel;
-     })      
-    ); 
-    }   
-	}
-  loadStaffs(): Observable<ResultModel<Lookup[]>> {
-		const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.lookupUrl + "/GetStaffs";
-   /*  const params = new HttpParams()
-                    .append('id', id)
-                    .append('type', type);
-		return this.http.get<ResultModel<LookupEdit>>(baseUrl,{params});
-    */
-   if (this._staffList != null)
-   {
-    return of(this._staffList);
-   }
-   else
-   {
-    return this.http.get<ResultModel<Lookup[]>>(baseUrl)
-    .pipe(map( x => {
-      this._staffList = x;
-      return x;
-    }));
-   }
-	}
-  loadClients(): Observable<ResultModel<Lookup[]>> {
-		const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.lookupUrl + "/GetClients";
-   /*  const params = new HttpParams()
-                    .append('id', id)
-                    .append('type', type);
-		return this.http.get<ResultModel<LookupEdit>>(baseUrl,{params});
-    */
-   if (this._clientList != null)
-   {
-      return of(this._clientList);
-   }
-   else
-   {
-      return this.http.get<ResultModel<Lookup[]>>(baseUrl)
-      .pipe(map(resultModel => {
-      this._clientList = resultModel;
-      return resultModel;
-     })
-      );   
-   }
-	}
-  loadJobs(): Observable<ResultModel<Lookup[]>> {
-		const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.lookupUrl + "/GetJobs";
-   /*  const params = new HttpParams()
-                    .append('id', id)
-                    .append('type', type);
-		return this.http.get<ResultModel<LookupEdit>>(baseUrl,{params});
-    */
-   if (this._jobList != null)
-   {
-    return of(this._jobList);
-   }
-   else 
-   {
-    return this.http.get<ResultModel<Lookup[]>>(baseUrl)
-    .pipe(map(x => {
-      this._jobList = x;
-      return x;
-    }))
-   }
-	}
-}
+import { Injectable, Inject , Output} from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { map } from 'rxjs/operators';
+import { Observable, of } from 'rxjs';
+import { ConfigureUrl,Lookup,LookupEdit,ResultModel
+   } from '../models';
+import { Utils,AppSettingService } from '../shares';
+
+
+@Injectable({ providedIn: 'root' })
+export class LookupService {
+  msg: string = "[lookupService] ";  
+    _lookupByStatus:any;
+    _staffList:any;
+    _clientList:any;
+    _jobList:any;
+  constructor(private http: HttpClient,   
+    private appSetting :AppSettingService
+  ) {
+      // this default when load look for previous login information
+        // if no need then comment out downthere  
+    this.setAllNull();
+  }
+  setAllNull() :void {
+    // this._lhdList = undefined;
+    this._lookupByStatus = {};
+    this._staffList = null;
+    this._clientList = null;
+    this._jobList = null;
+  }
+  loadLookupEditBystatus(type:string): Observable<ResultModel<LookupEdit[]>> {			
+  	const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.lookupUrl + "/LoadLookupEdit";
+    const params = new HttpParams().append('type', type);
+    console.log(this.msg + "go server this loadLookupEditBystatus is in cache ", type);
+    return this.http.get<ResultModel<LookupEdit[]>>(baseUrl, {params});
+}
+loadLookupById(id:number, type:string): Observable<ResultModel<LookupEdit>> {
+		const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.lookupUrl;
+     const params = new HttpParams()
+                    .append('id', id)
+                    .append('type', type);
+		return this.http.get<ResultModel<LookupEdit>>(baseUrl,{params});
+	}
+	saveLookup(item:LookupEdit): Observable<ResultModel<number>> { //insert Lookup
+    this.setAllNull();
+		let config = { headers : { 'Content-Type': 'application/json' } };
+		const baseUrl = this.appSetting.appSetting.baseUrl  + "/"+ ConfigureUrl.lookupUrl;
+		return this.http.post<ResultModel<number>>(baseUrl, item, config);
+	}
+	deleteLookup(id:number): Observable<ResultModel<number>>{
+		const baseUrl = this.appSetting.appSetting.baseUrl  + "/"+ ConfigureUrl.lookupUrl;
+		return this.http.delete<ResultModel<number>>(baseUrl + "/" + id );
+	}
+
+  loadLookupBystatus(type:string): Observable<ResultModel<Lookup[]>> {			
+		const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.lookupUrl + "/LoadJobs";
+    console.log(this.msg + "loadLookupBystatus", this._lookupByStatus);
+		if (this._lookupByStatus[type])
+    {
+      console.log(this.msg + "Not go server this LoadJobs is in cache ",type);
+      return of(this._lookupByStatus[type]);
+    }
+    else
+    {
+       const params = new HttpParams().append('type', type);
+      console.log(this.msg + "go server this loadLookupBystatus is in cache ", type);
+    return this.http.get<ResultModel<Lookup[]>>(baseUrl, {params})
+    .pipe(map(resultModel => {
+      this._lookupByStatus[type] = resultModel;
+      return resultModel;
+     })      
+    ); 
+    }   
+	}
+  loadStaffs(): Observable<ResultModel<Lookup[]>> {
+		const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.lookupUrl + "/GetStaffs";
+   /*  const params = new HttpParams()
+                    .append('id', id)
+                    .append('type', type);
+		return this.http.get<ResultModel<LookupEdit>>(baseUrl,{params});
+    */
+   if (this._staffList != null)
+   {
+    return of(this._staffList);
+   }
+   else
+   {
+    return this.http.get<ResultModel<Lookup[]>>(baseUrl)
+    .pipe(map( x => {
+      this._staffList = x;
+      return x;
+    }));
+   }
+	}
+  loadClients(): Observable<ResultModel<Lookup[]>> {
+		const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.lookupUrl + "/GetClients";
+   /*  const params = new HttpParams()
+                    .append('id', id)
+                    .append('type', type);
+		return this.http.get<ResultModel<LookupEdit>>(baseUrl,{params});
+    */
+   if (this._clientList != null)
+   {
+      return of(this._clientList);
+   }
+   else
+   {
+      return this.http.get<ResultModel<Lookup[]>>(baseUrl)
+      .pipe(map(resultModel => {
+      this._clientList = resultModel;
+      return resultModel;
+     })
+      );   
+   }
+	}
+  loadJobs(): Observable<ResultModel<Lookup[]>> {
+		const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.lookupUrl + "/GetJobs";
+   /*  const params = new HttpParams()
+                    .append('id', id)
+                    .append('type', type);
+		return this.http.get<ResultModel<LookupEdit>>(baseUrl,{params});
+    */
+   if (this._jobList != null)
+   {
+    return of(this._jobList);
+   }
+   else 
+   {
+    return this.http.get<ResultModel<Lookup[]>>(baseUrl)
+    .pipe(map(x => {
+      this._jobList = x;
+      return x;
+    }))
+   }
+	}
+}

UI/src/app/shares/timeinput.ts

@@ -1,149 +1,149 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, forwardRef, OnInit, OnDestroy } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR,ReactiveFormsModule, FormControl, Validators } from '@angular/forms';
-import { Subject, takeUntil } from 'rxjs';
-
-@Component({
-  selector: 'time-input',
-  imports:[ReactiveFormsModule,CommonModule],
-  template: `
-    <input
-      type="text"
-      [formControl]="timeControl"
-      (input)="onInput($event)"
-      (blur)="onBlur()"
-      class="time-input"
-      style="width: 80px; text-align: center;" 
-    />
-  `,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => TimeInputComponent),
-      multi: true,
-    },
-  ],
-})
-export class TimeInputComponent implements ControlValueAccessor, OnInit, OnDestroy {
-  @Input() placeholder: string = 'HH:MM';
-  @Input() initialValue: string = ''; // Added initialValue input
-  @Input() disabled: boolean = false;
-
-  timeControl = new FormControl('', [
-    Validators.pattern(/^([0-2][0-9]:[0-5][0-9])?$/), // Added more precise regex
-  ]);
-
-  private destroy$ = new Subject<void>();
-  private _value: string = '';
-  private onChange: (value: string) => void = () => {};
-  private onTouched: () => void = () => {};
-
-  constructor() {}
-
-  ngOnInit(): void {
-    this.timeControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
-      this.onChange(value || ''); // Pass the value to the parent form
-    });
-    if (this.initialValue) {
-      this.writeValue(this.initialValue);
-    }
-    this.timeControl.disable();
-    if(!this.disabled){
-      this.timeControl.enable();
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  get value(): string {
-    return this._value;
-  }
-
-  set value(val: string) {
-    this._value = val;
-    this.onChange(val);
-    this.onTouched();
-  }
-
-  writeValue(value: string): void {
-    this._value = value || '';
-    this.formatInput(this._value); // Use the formatting function
-  }
-
-  registerOnChange(fn: (value: string) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-    if (isDisabled) {
-      this.timeControl.disable();
-    } else {
-      this.timeControl.enable();
-    }
-  }
-
-  onInput(event: Event): void {
-    let input = (event.target as HTMLInputElement).value;
-    input = input.replace(/[^0-9]/g, ''); // Remove non-numeric characters.
-
-    if (input.length > 4) {
-      input = input.slice(0, 4); // Limit to 4 digits
-    }
-
-    let formatted = '';
-    if (input.length > 2) {
-      formatted = input.slice(0, 2) + ':' + input.slice(2);
-    } else {
-      formatted = input;
-    }
-    this.timeControl.setValue(formatted, { emitEvent: false }); // Prevent infinite loop
-    this.value = formatted;
-  }
-
-  onBlur(): void {
-    this.onTouched();
-    if (this.timeControl.valid) {
-      return;
-    }
-    if (this.timeControl.value?.length === 0) {
-      this.timeControl.setValue('', {emitEvent: false});
-      this.value = '';
-      return
-    }
-    this.formatInput(this.timeControl.value);
-  }
-
-  private formatInput(val: string | null): void {
-      if (!val) {
-        this.timeControl.setValue('', {emitEvent: false});
-        this.value = '';
-        return;
-      }
-      let numbersOnly = val.replace(/[^0-9]/g, '');
-      let formatted = '';
-
-      if (numbersOnly.length > 2) {
-          formatted = numbersOnly.slice(0, 2) + ':' + numbersOnly.slice(2, 4);
-      } else {
-          formatted = numbersOnly;
-      }
-      if (formatted.length === 5 && this.timeControl.valid) {
-        this.timeControl.setValue(formatted, {emitEvent: false});
-        this.value = formatted;
-      } else if (numbersOnly.length <= 2) {
-        this.timeControl.setValue(formatted, {emitEvent: false});
-        this.value = formatted;
-      } else {
-        this.timeControl.setValue('00:00', {emitEvent: false});
-        this.value = '00:00'
-      }
-  }
-}
+import { CommonModule } from '@angular/common';
+import { Component, Input, forwardRef, OnInit, OnDestroy } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR,ReactiveFormsModule, FormControl, Validators } from '@angular/forms';
+import { Subject, takeUntil } from 'rxjs';
+
+@Component({
+  selector: 'time-input',
+  imports:[ReactiveFormsModule,CommonModule],
+  template: `
+    <input
+      type="text"
+      [formControl]="timeControl"
+      (input)="onInput($event)"
+      (blur)="onBlur()"
+      class="time-input"
+      style="width: 80px; text-align: center;" 
+    />
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TimeInputComponent),
+      multi: true,
+    },
+  ],
+})
+export class TimeInputComponent implements ControlValueAccessor, OnInit, OnDestroy {
+  @Input() placeholder: string = 'HH:MM';
+  @Input() initialValue: string = ''; // Added initialValue input
+  @Input() disabled: boolean = false;
+
+  timeControl = new FormControl('', [
+    Validators.pattern(/^([0-2][0-9]:[0-5][0-9])?$/), // Added more precise regex
+  ]);
+
+  private destroy$ = new Subject<void>();
+  private _value: string = '';
+  private onChange: (value: string) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.timeControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
+      this.onChange(value || ''); // Pass the value to the parent form
+    });
+    if (this.initialValue) {
+      this.writeValue(this.initialValue);
+    }
+    this.timeControl.disable();
+    if(!this.disabled){
+      this.timeControl.enable();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  get value(): string {
+    return this._value;
+  }
+
+  set value(val: string) {
+    this._value = val;
+    this.onChange(val);
+    this.onTouched();
+  }
+
+  writeValue(value: string): void {
+    this._value = value || '';
+    this.formatInput(this._value); // Use the formatting function
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    if (isDisabled) {
+      this.timeControl.disable();
+    } else {
+      this.timeControl.enable();
+    }
+  }
+
+  onInput(event: Event): void {
+    let input = (event.target as HTMLInputElement).value;
+    input = input.replace(/[^0-9]/g, ''); // Remove non-numeric characters.
+
+    if (input.length > 4) {
+      input = input.slice(0, 4); // Limit to 4 digits
+    }
+
+    let formatted = '';
+    if (input.length > 2) {
+      formatted = input.slice(0, 2) + ':' + input.slice(2);
+    } else {
+      formatted = input;
+    }
+    this.timeControl.setValue(formatted, { emitEvent: false }); // Prevent infinite loop
+    this.value = formatted;
+  }
+
+  onBlur(): void {
+    this.onTouched();
+    if (this.timeControl.valid) {
+      return;
+    }
+    if (this.timeControl.value?.length === 0) {
+      this.timeControl.setValue('', {emitEvent: false});
+      this.value = '';
+      return
+    }
+    this.formatInput(this.timeControl.value);
+  }
+
+  private formatInput(val: string | null): void {
+      if (!val) {
+        this.timeControl.setValue('', {emitEvent: false});
+        this.value = '';
+        return;
+      }
+      let numbersOnly = val.replace(/[^0-9]/g, '');
+      let formatted = '';
+
+      if (numbersOnly.length > 2) {
+          formatted = numbersOnly.slice(0, 2) + ':' + numbersOnly.slice(2, 4);
+      } else {
+          formatted = numbersOnly;
+      }
+      if (formatted.length === 5 && this.timeControl.valid) {
+        this.timeControl.setValue(formatted, {emitEvent: false});
+        this.value = formatted;
+      } else if (numbersOnly.length <= 2) {
+        this.timeControl.setValue(formatted, {emitEvent: false});
+        this.value = formatted;
+      } else {
+        this.timeControl.setValue('00:00', {emitEvent: false});
+        this.value = '00:00'
+      }
+  }
+}

UI/src/app/shares/utils.ts

@@ -1,219 +1,219 @@
-import moment from "moment";
-import { Person, User, userRole } from "../models"
-import { TreeNode } from "primeng/api";
-
-type MyProName = "fatherId" | "motherId";
-
-export class Utils {
-   static toBase64 (file:any) 
-   {
-    let promise = new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = () => resolve(reader.result);
-    reader.onerror = reject;
-    });
-    return promise;
-  }
-    static getBase64(file: any) {
-        let result: any;
-        var reader = new FileReader();
-        reader.readAsDataURL(file);
-        reader.onload = function () {
-            result = reader.result;
-            console.log('tobase64 ', result);
-        };
-        reader.onerror = function (error) {
-            console.log('Error: ', error);
-        };
-    }
-    static getCurrentUser(): User {
-
-        let myUser = new User();
-        myUser.username = "";
-        const obj = sessionStorage.getItem('currentUser');
-        //const obj = localStorage.getItem('currentUser');
-        if (obj != undefined) {
-            let user = JSON.parse(obj);
-            myUser.firstName = user.firstName;
-            myUser.id = user.id;
-            myUser.lastName = user.lastName;
-            myUser.role = user.role;
-            myUser.username = user.username;
-            myUser.email = user.email;
-            myUser.token = user.token;
-            myUser.phone = user.phone;
-            myUser.department = user.department;
-            myUser.position = user.position;
-            myUser.managerEmail = user.managerEmail;
-
-
-
-        }
-        // console.log("[util] getcurrentUser",myUser);
-        return myUser;
-    }
-    static setLocalStore(user: User): void {
-        if (user && user.token) {
-            // store user details and jwt token in local storage to keep user logged in between page refreshes
-            // localStorage.setItem('currentUser', JSON.stringify(user));
-            sessionStorage.setItem('currentUser', JSON.stringify(user));
-        }
-    }
-
-    static getLastMonth(): Date {
-        let result = moment().subtract(1, 'months').toDate();
-        result.setDate(1);
-        return result;
-    }
-    static getHome(): string {
-        let result ="";
-        const user = this.getCurrentUser();
-        const urole = user.role;
-        if (urole == userRole.Accounting)
-        {
-            result = "staffworkw";
-        }
-        else if (urole == userRole.Admin)
-        {
-            result = "staff";
-        }
-        else if (urole == userRole.ServiceManager)
-        {
-            result = "servicetask";
-        }
-        else if (urole == userRole.WorkShop)
-        {
-            result = "staffwork";
-        }
-        else if (urole == userRole.Normal)
-        {
-             result = "staff";
-        }
-        return result;
-    }
-    static getTimeStr(val:Date): string {
-        let result = "00:00";
-        if (val)
-        {
-            const hh = val.getHours();
-            const min = val.getMinutes();
-            if (hh < 10)
-                result = '0' + hh.toString();
-            else
-                result = hh.toString();
-            if (min < 10)
-                result = result + ":0" + min.toString();
-            else
-                result = result + ":" + min.toString();
-
-        }
-        return result;
-    }
-     static canRunReport(role: number): boolean {
-        let result = false;
-        if (role == userRole.Admin)
-            result = true;
-        return result;
-    }
-static getUserRole(user: User): number {
-        /*
-        sysadmin
-        request_manager
-        ward_user
-        */
-        let ret = 0;
-        if (user) {
-            // console.log("utils user", user);
-            if (user.role)
-                ret = user.role;
-        }
-        return ret;
-    }
-    static getIsAuth(): boolean {
-        const user = this.getCurrentUser();
-        if (user.username != "") {
-            return true;
-        }
-        else
-            return false;
-    }
-    static getAdminRoleName(): number {
-        return userRole.Admin;
-    }
-    static clearCurrentUser(): void {
-        sessionStorage.clear();
-        //localStorage.clear();
-    }
-
-static formatNode(item:Person): TreeNode
-  {
-    let label =  item.lastName + " " + item.firstName;
-    let key = item.id.toString();
-     let node: TreeNode ={
-      key,
-      label,
-       type: 'person',
-      data: {title: item.title, name: label, image: item.image},
-      icon: 'pi pi-user'
-     };
-
-     return node;
-  }
-static getFileExtension(filename: string): string {
-  const lastDotIndex = filename.lastIndexOf('.');
-  if (lastDotIndex !== -1 && lastDotIndex < filename.length - 1) { // Ensure a dot exists and is not the last character
-    return filename.substring(lastDotIndex + 1);
-  }
-  return ''; // No extension found
-}
-  static getChildForParentId(proName: MyProName , pid: number,childressNodes: Person[]): TreeNode[] {
-    let result: 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++)
-    {
-          item = children[c];        
-          node = this.formatNode(item);
-          tree_node_child = this.getChildForParentId(proName,item.id, childressNodes);
-          console.log("getChildForParentId childressNodes item tree_node_child ", childressNodes, item, tree_node_child);
-          if (tree_node_child.length > 0)
-          {
-            node.expanded = true;
-            node.children = tree_node_child;
-          }
-          result.push(node);
-    }
-    return result;
-  }
-
-static populateNode(proName: MyProName, familyList: Person[]): TreeNode[] {
-        let familyTree: TreeNode[] = [];
-        let node:TreeNode;
-        let child_nodes:TreeNode[];
-        
-        let childressNodes:Person[];
-       
-        let item: Person;
-        const topNodes = familyList.filter(x => x[proName]! < 1);
-        childressNodes = familyList.filter(x => x[proName]! > 0);
-        for(let i = 0; i < topNodes.length; i++)
-        {
-            item = topNodes[i];        
-            node = Utils.formatNode(item);
-            child_nodes = this.getChildForParentId(proName, item.id,childressNodes);
-            console.log("populate getchildrenForParentId", child_nodes);
-            if (child_nodes.length > 0)
-            {
-              node.expanded = true;
-              node.children = child_nodes;
-            }
-            familyTree.push(node);
-            //childressNodes = 
-        }
-        return familyTree;
-      }
+import moment from "moment";
+import { Person, User, userRole } from "../models"
+import { TreeNode } from "@openng/optimus-ui/api";
+
+type MyProName = "fatherId" | "motherId";
+
+export class Utils {
+   static toBase64 (file:any) 
+   {
+    let promise = new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = reject;
+    });
+    return promise;
+  }
+    static getBase64(file: any) {
+        let result: any;
+        var reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = function () {
+            result = reader.result;
+            console.log('tobase64 ', result);
+        };
+        reader.onerror = function (error) {
+            console.log('Error: ', error);
+        };
+    }
+    static getCurrentUser(): User {
+
+        let myUser = new User();
+        myUser.username = "";
+        const obj = sessionStorage.getItem('currentUser');
+        //const obj = localStorage.getItem('currentUser');
+        if (obj != undefined) {
+            let user = JSON.parse(obj);
+            myUser.firstName = user.firstName;
+            myUser.id = user.id;
+            myUser.lastName = user.lastName;
+            myUser.role = user.role;
+            myUser.username = user.username;
+            myUser.email = user.email;
+            myUser.token = user.token;
+            myUser.phone = user.phone;
+            myUser.department = user.department;
+            myUser.position = user.position;
+            myUser.managerEmail = user.managerEmail;
+
+
+
+        }
+        // console.log("[util] getcurrentUser",myUser);
+        return myUser;
+    }
+    static setLocalStore(user: User): void {
+        if (user && user.token) {
+            // store user details and jwt token in local storage to keep user logged in between page refreshes
+            // localStorage.setItem('currentUser', JSON.stringify(user));
+            sessionStorage.setItem('currentUser', JSON.stringify(user));
+        }
+    }
+
+    static getLastMonth(): Date {
+        let result = moment().subtract(1, 'months').toDate();
+        result.setDate(1);
+        return result;
+    }
+    static getHome(): string {
+        let result ="";
+        const user = this.getCurrentUser();
+        const urole = user.role;
+        if (urole == userRole.Accounting)
+        {
+            result = "staffworkw";
+        }
+        else if (urole == userRole.Admin)
+        {
+            result = "staff";
+        }
+        else if (urole == userRole.ServiceManager)
+        {
+            result = "servicetask";
+        }
+        else if (urole == userRole.WorkShop)
+        {
+            result = "staffwork";
+        }
+        else if (urole == userRole.Normal)
+        {
+             result = "staff";
+        }
+        return result;
+    }
+    static getTimeStr(val:Date): string {
+        let result = "00:00";
+        if (val)
+        {
+            const hh = val.getHours();
+            const min = val.getMinutes();
+            if (hh < 10)
+                result = '0' + hh.toString();
+            else
+                result = hh.toString();
+            if (min < 10)
+                result = result + ":0" + min.toString();
+            else
+                result = result + ":" + min.toString();
+
+        }
+        return result;
+    }
+     static canRunReport(role: number): boolean {
+        let result = false;
+        if (role == userRole.Admin)
+            result = true;
+        return result;
+    }
+static getUserRole(user: User): number {
+        /*
+        sysadmin
+        request_manager
+        ward_user
+        */
+        let ret = 0;
+        if (user) {
+            // console.log("utils user", user);
+            if (user.role)
+                ret = user.role;
+        }
+        return ret;
+    }
+    static getIsAuth(): boolean {
+        const user = this.getCurrentUser();
+        if (user.username != "") {
+            return true;
+        }
+        else
+            return false;
+    }
+    static getAdminRoleName(): number {
+        return userRole.Admin;
+    }
+    static clearCurrentUser(): void {
+        sessionStorage.clear();
+        //localStorage.clear();
+    }
+
+static formatNode(item:Person): TreeNode
+  {
+    let label =  item.lastName + " " + item.firstName;
+    let key = item.id.toString();
+     let node: TreeNode ={
+      key,
+      label,
+       type: 'person',
+      data: {title: item.title, name: label, image: item.image},
+      icon: 'pi pi-user'
+     };
+
+     return node;
+  }
+static getFileExtension(filename: string): string {
+  const lastDotIndex = filename.lastIndexOf('.');
+  if (lastDotIndex !== -1 && lastDotIndex < filename.length - 1) { // Ensure a dot exists and is not the last character
+    return filename.substring(lastDotIndex + 1);
+  }
+  return ''; // No extension found
+}
+  static getChildForParentId(proName: MyProName , pid: number,childressNodes: Person[]): TreeNode[] {
+    let result: 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++)
+    {
+          item = children[c];        
+          node = this.formatNode(item);
+          tree_node_child = this.getChildForParentId(proName,item.id, childressNodes);
+          console.log("getChildForParentId childressNodes item tree_node_child ", childressNodes, item, tree_node_child);
+          if (tree_node_child.length > 0)
+          {
+            node.expanded = true;
+            node.children = tree_node_child;
+          }
+          result.push(node);
+    }
+    return result;
+  }
+
+static populateNode(proName: MyProName, familyList: Person[]): TreeNode[] {
+        let familyTree: TreeNode[] = [];
+        let node:TreeNode;
+        let child_nodes:TreeNode[];
+        
+        let childressNodes:Person[];
+       
+        let item: Person;
+        const topNodes = familyList.filter(x => x[proName]! < 1);
+        childressNodes = familyList.filter(x => x[proName]! > 0);
+        for(let i = 0; i < topNodes.length; i++)
+        {
+            item = topNodes[i];        
+            node = Utils.formatNode(item);
+            child_nodes = this.getChildForParentId(proName, item.id,childressNodes);
+            console.log("populate getchildrenForParentId", child_nodes);
+            if (child_nodes.length > 0)
+            {
+              node.expanded = true;
+              node.children = child_nodes;
+            }
+            familyTree.push(node);
+            //childressNodes = 
+        }
+        return familyTree;
+      }
 }

UI/src/app/staff/index.ts

@@ -1,4 +1,4 @@
-export * from './staff.component';
-export * from './staff.edit.component';
-export * from './staff.service';
-export * from './staff.pass.component';
+export * from './staff.component';
+export * from './staff.edit.component';
+export * from './staff.service';
+export * from './staff.pass.component';

UI/src/app/staff/staff.component.css

@@ -1,12 +1,12 @@
-table {
-  width: 100%;
-}
-
-.mat-form-field {
-  font-size: 14px;
-  width: 100%;
-}
-td.mat-column-edit, .mat-column-delete {
-  width: 35px;
-  padding-right: 2px;
-}
+table {
+  width: 100%;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+td.mat-column-edit, .mat-column-delete {
+  width: 35px;
+  padding-right: 2px;
+}

UI/src/app/staff/staff.component.html

@@ -1,64 +1,64 @@
-<div class="shadow-2xl rounded p-2 mt-2">
-<h3>Staff List</h3>
-<div>
-  <form>
-    <div class="grid md:grid-cols-4 gap-2">
-      <div class="">
-        <label for="login">Email</label>
-        <input id="login" pInputText name="login" type="text" [(ngModel)]="email"
-          class="inputfield w-full p-inputtext-sm">
-      </div>
-      <div class="">
-        <label for="lastname1">Surname</label>
-        <input id="lastname1" pInputText name="lastname" type="text" [(ngModel)]="lastname"
-          class="inputfield w-full p-inputtext-sm">
-      </div>
-      <div class="">
-        <label for="firstname">First Name</label>
-        <input id="firstname" name="firstname" pInputText type="text" [(ngModel)]="firstname"
-          class="inputfield w-full p-inputtext-sm">
-      </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 Staff"
-          (click)="newUser()"></button>
-      </div>
-    </div>
-  </form>
-</div>
-<div>
-  <!--[value]="userList"-->
-  <p-table [value]="users()" sortMode="multiple"  
-      class="p-datatable-sm" [loading]="loading">
-      <ng-template pTemplate="header">
-        <tr>       
-          <th pSortableColumn="email">Email<p-sortIcon field="email"></p-sortIcon>
-          </th>
-          <th pSortableColumn="lastname">Surname <p-sortIcon field="lastname"></p-sortIcon>
-          </th>
-          <th pSortableColumn="firstname">First Name <p-sortIcon field="firstname"></p-sortIcon>
-          </th>
-         
-          <th >Active </th>
-          <th>Edit</th>  
-        </tr>
-      </ng-template>
-      <ng-template pTemplate="body" let-user>
-          <tr>
-            <td>{{user.email}}</td>
-            <td>{{user.lastname}}</td>
-            <td>{{user.firstname}}</td>           
-            <td>     
-                 
-              <i class="pi" [ngClass]="{'true-icon pi-check-circle': user.active, 'false-icon pi-times-circle': !user.active}"></i>
-            </td>
-            <td> 
-              <button pButton type="button" icon="pi pi-pencil" class="p-button-rounded p-button-text" 
-                (click)="edit(user.id)"></button>
-            </td>
-          </tr>
-      </ng-template>
-    </p-table>
-</div>
-  
+<div class="shadow-2xl rounded p-2 mt-2">
+<h3>Staff List</h3>
+<div>
+  <form>
+    <div class="grid md:grid-cols-4 gap-2">
+      <div class="">
+        <label for="login">Email</label>
+        <input id="login" pInputText name="login" type="text" [(ngModel)]="email"
+          class="inputfield w-full p-inputtext-sm">
+      </div>
+      <div class="">
+        <label for="lastname1">Surname</label>
+        <input id="lastname1" pInputText name="lastname" type="text" [(ngModel)]="lastname"
+          class="inputfield w-full p-inputtext-sm">
+      </div>
+      <div class="">
+        <label for="firstname">First Name</label>
+        <input id="firstname" name="firstname" pInputText type="text" [(ngModel)]="firstname"
+          class="inputfield w-full p-inputtext-sm">
+      </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 Staff"
+          (click)="newUser()"></button>
+      </div>
+    </div>
+  </form>
+</div>
+<div>
+  <!--[value]="userList"-->
+  <p-table [value]="users()" sortMode="multiple"  
+      class="p-datatable-sm" [loading]="loading">
+      <ng-template pTemplate="header">
+        <tr>       
+          <th pSortableColumn="email">Email<p-sortIcon field="email"></p-sortIcon>
+          </th>
+          <th pSortableColumn="lastname">Surname <p-sortIcon field="lastname"></p-sortIcon>
+          </th>
+          <th pSortableColumn="firstname">First Name <p-sortIcon field="firstname"></p-sortIcon>
+          </th>
+         
+          <th >Active </th>
+          <th>Edit</th>  
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-user>
+          <tr>
+            <td>{{user.email}}</td>
+            <td>{{user.lastname}}</td>
+            <td>{{user.firstname}}</td>           
+            <td>     
+                 
+              <i class="pi" [ngClass]="{'true-icon pi-check-circle': user.active, 'false-icon pi-times-circle': !user.active}"></i>
+            </td>
+            <td> 
+              <button pButton type="button" icon="pi pi-pencil" class="p-button-rounded p-button-text" 
+                (click)="edit(user.id)"></button>
+            </td>
+          </tr>
+      </ng-template>
+    </p-table>
+</div>
+  

UI/src/app/staff/staff.component.ts

@@ -1,162 +1,162 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, inject, ChangeDetectorRef} from '@angular/core';
-
-import { StaffView ,StaffSearch } from '../models';
-
-import { Store } from '@ngrx/store'; 
-import { StaffsActions, StaffsApiActions } from '../state/staff.actions';
-import { take } from 'rxjs/operators';
-import { Subscription } from 'rxjs';
-import { Router } from '@angular/router';
-import { StaffService } from './staff.service';
-import { AuthenticationService } from '../user-services';
-import { TableModule } from 'primeng/table';
-import { FormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-import { ButtonModule } from 'primeng/button';
-import { InputTextModule } from 'primeng/inputtext';
-import { selectStaffLoaded,selectStaff } from '../state/staff.selectors';
-
-@Component({
-  selector: 'staff-list',
-  templateUrl: './staff.component.html',
-  imports:[TableModule,FormsModule,CommonModule,ButtonModule,InputTextModule],
-  styleUrls: ['./staff.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class StaffComponent implements OnInit, OnDestroy{
-  private readonly store = inject(Store);
-  private subscription:Subscription = new Subscription();
-  firstname = '';
-  email = '';
-  lastname = '';
-  loading = false;
-  userList:StaffView[] = [];
-  users = this.store.selectSignal(selectStaff);
-  staffloadyet = this.store.selectSignal(selectStaffLoaded)
-  private cd = inject(ChangeDetectorRef);
-  msg ="[Staff component]";
- 
-  /*
-  private store: Store<appValidationState>
-  */
-  constructor(  
-    private staffService: StaffService,
-    private authenticationService: AuthenticationService,
-    private router: Router    
-     ) {}
-     getSearchCiteria(): StaffSearch {
-    let criteria:StaffSearch = {
-      email: this.email,
-      firstName: this.firstname,
-      lastName: this.lastname,
-    };
-
-    return criteria;
-
-  }
-  canSearch():boolean {
-    let result = false;
-    result = this.email !== "";
-    result = result || this.lastname !== "";
-    result = result || this.firstname !== "";
-    return result;
-  }
-  ngOnInit(): void
-  { 
-    this.authenticationService.isHome = false;
-    this.authenticationService.isReport = false;
-  const prev = this.staffService.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();
-    }
-  }  
-  getActive(active:boolean):string {
-    let result = 'false-icon pi-times-circle';
-    if (active)
-      result = 'true-icon pi-check-circle';
-    return result;
-  }
-  search():void {
-    const canSearch = true; // this.canSearch();
-    if (canSearch)
-    {
-     
-      const criteria = this.getSearchCiteria();
-       this.staffService.searchCriteria = criteria;
-       console.log("search function store staffload yet",this.staffloadyet(), this.users);
-       if (this.staffloadyet() != true) {
-        this.store.dispatch(StaffsActions.loadStaff({criteria}));
-       }
-      /*
-      if (this.staffloadyet() != true) {
-          this.loading = true;
-          const loadStaff$ =  this.staffService.searchStaffs(criteria);
-          this.subscription.add(
-         loadStaff$.subscribe( {
-            next: result => {
-            
-            this.loading = false;
-           
-            this.userList = result.data;
-            this.store.dispatch(StaffsApiActions.loadStaffSuccess({staffs:this.userList, staffLoad: true}));
-            this.cd.detectChanges();
-          }, 
-          error: e => {      
-            const message = e || e.message;
-            // this.toastr.error(message);
-            this.loading = false;
-            console.log("error ", e);
-          }
-          }) 
-        );
-      }
-      */
-   }
-  }
-  newUser():void {
-  //console.log("add new employee");
-    this.router.navigate( ['/staff/new'], { queryParams: {returnUrl:'/staff' } });
-  }
-  edit(id: number) : void {
-    //console.log("edit staff", id);
- this.router.navigate( ['/staff/'+id], { queryParams: {returnUrl:'/staff' } });
-  }
-  
-  deleteItem(id: number): void {
-    this.staffService.deleteStaff(id)
-      .pipe(take(1))
-      .subscribe({ next: result => {
-      console.log(this.msg + " deleteItem success", result);
-      //let data = this.dataSource.data;
-      //let index: number = data.findIndex(d => d.id === id);
-    //  console.log(this.msg + "delete from datasource");
-      //data.splice(index, 1)
-      //this.dataSource.data = data;
-      },
-      error: e => console.error(e)
-    });
-    //console.log(this.msg + "click button to delete");
-  }
-  
-  ngOnDestroy() {
-		this.subscription.unsubscribe();
-	}
-}
-
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, inject, ChangeDetectorRef} from '@angular/core';
+
+import { StaffView ,StaffSearch } from '../models';
+
+import { Store } from '@ngrx/store'; 
+import { StaffsActions, StaffsApiActions } from '../state/staff.actions';
+import { take } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
+import { Router } from '@angular/router';
+import { StaffService } from './staff.service';
+import { AuthenticationService } from '../user-services';
+import { TableModule } from '@openng/optimus-ui/table';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
+import { selectStaffLoaded,selectStaff } from '../state/staff.selectors';
+
+@Component({
+  selector: 'staff-list',
+  templateUrl: './staff.component.html',
+  imports:[TableModule,FormsModule,CommonModule,ButtonModule,InputTextModule],
+  styleUrls: ['./staff.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class StaffComponent implements OnInit, OnDestroy{
+  private readonly store = inject(Store);
+  private subscription:Subscription = new Subscription();
+  firstname = '';
+  email = '';
+  lastname = '';
+  loading = false;
+  userList:StaffView[] = [];
+  users = this.store.selectSignal(selectStaff);
+  staffloadyet = this.store.selectSignal(selectStaffLoaded)
+  private cd = inject(ChangeDetectorRef);
+  msg ="[Staff component]";
+ 
+  /*
+  private store: Store<appValidationState>
+  */
+  constructor(  
+    private staffService: StaffService,
+    private authenticationService: AuthenticationService,
+    private router: Router    
+     ) {}
+     getSearchCiteria(): StaffSearch {
+    let criteria:StaffSearch = {
+      email: this.email,
+      firstName: this.firstname,
+      lastName: this.lastname,
+    };
+
+    return criteria;
+
+  }
+  canSearch():boolean {
+    let result = false;
+    result = this.email !== "";
+    result = result || this.lastname !== "";
+    result = result || this.firstname !== "";
+    return result;
+  }
+  ngOnInit(): void
+  { 
+    this.authenticationService.isHome = false;
+    this.authenticationService.isReport = false;
+  const prev = this.staffService.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();
+    }
+  }  
+  getActive(active:boolean):string {
+    let result = 'false-icon pi-times-circle';
+    if (active)
+      result = 'true-icon pi-check-circle';
+    return result;
+  }
+  search():void {
+    const canSearch = true; // this.canSearch();
+    if (canSearch)
+    {
+     
+      const criteria = this.getSearchCiteria();
+       this.staffService.searchCriteria = criteria;
+       console.log("search function store staffload yet",this.staffloadyet(), this.users);
+       if (this.staffloadyet() != true) {
+        this.store.dispatch(StaffsActions.loadStaff({criteria}));
+       }
+      /*
+      if (this.staffloadyet() != true) {
+          this.loading = true;
+          const loadStaff$ =  this.staffService.searchStaffs(criteria);
+          this.subscription.add(
+         loadStaff$.subscribe( {
+            next: result => {
+            
+            this.loading = false;
+           
+            this.userList = result.data;
+            this.store.dispatch(StaffsApiActions.loadStaffSuccess({staffs:this.userList, staffLoad: true}));
+            this.cd.detectChanges();
+          }, 
+          error: e => {      
+            const message = e || e.message;
+            // this.toastr.error(message);
+            this.loading = false;
+            console.log("error ", e);
+          }
+          }) 
+        );
+      }
+      */
+   }
+  }
+  newUser():void {
+  //console.log("add new employee");
+    this.router.navigate( ['/staff/new'], { queryParams: {returnUrl:'/staff' } });
+  }
+  edit(id: number) : void {
+    //console.log("edit staff", id);
+ this.router.navigate( ['/staff/'+id], { queryParams: {returnUrl:'/staff' } });
+  }
+  
+  deleteItem(id: number): void {
+    this.staffService.deleteStaff(id)
+      .pipe(take(1))
+      .subscribe({ next: result => {
+      console.log(this.msg + " deleteItem success", result);
+      //let data = this.dataSource.data;
+      //let index: number = data.findIndex(d => d.id === id);
+    //  console.log(this.msg + "delete from datasource");
+      //data.splice(index, 1)
+      //this.dataSource.data = data;
+      },
+      error: e => console.error(e)
+    });
+    //console.log(this.msg + "click button to delete");
+  }
+  
+  ngOnDestroy() {
+		this.subscription.unsubscribe();
+	}
+}
+