From 008b644bb1775357a4fb391356f1ee19df9de698 Mon Sep 17 00:00:00 2001
From: Schneider Roland <roland.schneider@extern.a1.at>
Date: Fri, 21 Nov 2025 21:14:00 +0100
Subject: [PATCH] small improvements:  - add colorview component  - improve
 generic action column  - improve generic table  - improve
 event-type-table.component.ts  - add headerText to admin layout

---
 .../admin-layout-rs1/admin-layout-rs1.html    |  2 +-
 .../admin-layout-rs1/admin-layout-rs1.ts      |  1 +
 admin/src/app/app.html                        |  2 +-
 .../app/components/color-view/color-view.css  |  0
 .../app/components/color-view/color-view.html |  8 ++++
 .../components/color-view/color-view.spec.ts  | 23 ++++++++++
 .../app/components/color-view/color-view.ts   | 11 +++++
 .../generic-action-column.html                |  5 ++-
 .../generic-action-column.ts                  | 45 +++++++++++++++++--
 .../column-definition.interface.ts            |  2 -
 .../generic-table/generic-table.html          |  6 +--
 .../components/generic-table/generic-table.ts |  5 ++-
 .../event-type-table.component.html           |  4 +-
 .../event-type-table.component.ts             | 25 ++++++++---
 14 files changed, 116 insertions(+), 23 deletions(-)
 create mode 100644 admin/src/app/components/color-view/color-view.css
 create mode 100644 admin/src/app/components/color-view/color-view.html
 create mode 100644 admin/src/app/components/color-view/color-view.spec.ts
 create mode 100644 admin/src/app/components/color-view/color-view.ts

diff --git a/admin/projects/rschneider/ng-daisyui/src/lib/layout/admin-layout-rs1/admin-layout-rs1.html b/admin/projects/rschneider/ng-daisyui/src/lib/layout/admin-layout-rs1/admin-layout-rs1.html
index 7a1bb80..8ecbe5d 100644
--- a/admin/projects/rschneider/ng-daisyui/src/lib/layout/admin-layout-rs1/admin-layout-rs1.html
+++ b/admin/projects/rschneider/ng-daisyui/src/lib/layout/admin-layout-rs1/admin-layout-rs1.html
@@ -12,7 +12,7 @@
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
           </svg>
         </label>
-        <a class="btn btn-ghost text-xl">daisyUI</a>
+        <a class="btn btn-ghost text-xl">{{headerText()}}</a>
       </div>
       @if (loggedIn()) {
         <div class="flex-none">
diff --git a/admin/projects/rschneider/ng-daisyui/src/lib/layout/admin-layout-rs1/admin-layout-rs1.ts b/admin/projects/rschneider/ng-daisyui/src/lib/layout/admin-layout-rs1/admin-layout-rs1.ts
index fe48136..624b72f 100644
--- a/admin/projects/rschneider/ng-daisyui/src/lib/layout/admin-layout-rs1/admin-layout-rs1.ts
+++ b/admin/projects/rschneider/ng-daisyui/src/lib/layout/admin-layout-rs1/admin-layout-rs1.ts
@@ -8,6 +8,7 @@ import { Component, input, output } from '@angular/core';
 })
 export class AdminLayoutRs1 {
 
+  headerText = input<string>();
 
   readonly loggedIn = input<boolean>(false)
 
diff --git a/admin/src/app/app.html b/admin/src/app/app.html
index 7d2fa33..7eb59d0 100644
--- a/admin/src/app/app.html
+++ b/admin/src/app/app.html
@@ -1,4 +1,4 @@
-<rs-daisy-admin-layout-rs1 (clickEvent)="logout()" [loggedIn]="loggedIn()">
+<rs-daisy-admin-layout-rs1  [headerText]="'Foglalási rendszer'" (clickEvent)="logout()" [loggedIn]="loggedIn()">
 
   <app-menu
     [title]="menuTitle"
diff --git a/admin/src/app/components/color-view/color-view.css b/admin/src/app/components/color-view/color-view.css
new file mode 100644
index 0000000..e69de29
diff --git a/admin/src/app/components/color-view/color-view.html b/admin/src/app/components/color-view/color-view.html
new file mode 100644
index 0000000..0e7b7f1
--- /dev/null
+++ b/admin/src/app/components/color-view/color-view.html
@@ -0,0 +1,8 @@
+@if (color()) {
+<div class="flex flex-row gap-1 items-center">
+<div class='min-w-3 min-h-3 w-3 h-3'
+     [style]="'background-color: ' + color()"
+></div>
+{{color()}}
+</div>
+}
diff --git a/admin/src/app/components/color-view/color-view.spec.ts b/admin/src/app/components/color-view/color-view.spec.ts
new file mode 100644
index 0000000..86aa230
--- /dev/null
+++ b/admin/src/app/components/color-view/color-view.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ColorView } from './color-view';
+
+describe('ColorView', () => {
+  let component: ColorView;
+  let fixture: ComponentFixture<ColorView>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ColorView]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ColorView);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/admin/src/app/components/color-view/color-view.ts b/admin/src/app/components/color-view/color-view.ts
new file mode 100644
index 0000000..5c3a1f9
--- /dev/null
+++ b/admin/src/app/components/color-view/color-view.ts
@@ -0,0 +1,11 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'app-color-view',
+  imports: [],
+  templateUrl: './color-view.html',
+  styleUrl: './color-view.css',
+})
+export class ColorView {
+  color = input<string>();
+}
diff --git a/admin/src/app/components/generic-action-column/generic-action-column.html b/admin/src/app/components/generic-action-column/generic-action-column.html
index bc1301d..a1e6c9f 100644
--- a/admin/src/app/components/generic-action-column/generic-action-column.html
+++ b/admin/src/app/components/generic-action-column/generic-action-column.html
@@ -1,5 +1,7 @@
+<div class="flex flex-row gap-1 items-center">
+
 @for (action of actions(); track action){
-    <a  class="btn btn-primary"  (click)="onClick($event,action)">
+    <a  class="btn btn-primary" title="{{action.title ?? '' }}"  (click)="onClick($event,action)">
       @if(action.svgIcon){
         <span [outerHTML]="action.svgIcon | safeHtml"></span>
       }
@@ -8,3 +10,4 @@
       }
     </a>
 }
+</div>
diff --git a/admin/src/app/components/generic-action-column/generic-action-column.ts b/admin/src/app/components/generic-action-column/generic-action-column.ts
index 2ee0ea2..a6509b3 100644
--- a/admin/src/app/components/generic-action-column/generic-action-column.ts
+++ b/admin/src/app/components/generic-action-column/generic-action-column.ts
@@ -1,10 +1,14 @@
 import { Component, inject, input, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { SafeHtmlPipe } from '../../pipes/safe-html-pipe';
+import { SvgIcons } from '../../svg-icons';
+import { EventType } from '../../features/event-type/models/event-type.model';
+import { CellDefinition, StyleClassContext } from '../generic-table/cell-definition.interface';
 
 export interface ActionDefinition<T> {
   action: string;
-  text?: string|false;
+  text?: string | false;
+  title?: string;
   generate: (action: string, item?: T) => string;
   handler?: (action: ActionDefinition<T>, item?: T) => void;
   svgIcon?: string; //https://heroicons.com/
@@ -30,12 +34,45 @@ export class GenericActionColumn<T> implements OnInit {
   ngOnInit(): void {
   }
 
-
   onClick($event: any, actionDefinition: ActionDefinition<T>) {
     if (actionDefinition?.handler) {
       actionDefinition.handler(actionDefinition, this.item());
     }
   }
-
-
 }
+
+export interface CreateActionColumnCellDefinitionContext<T> {
+  actionHandler?: (action: ActionDefinition<T>, item?: T) => void;
+  styleClass?: (definition: StyleClassContext<T>) => string;
+}
+
+export const createActionColumnCellDefinition = <T>(createCtx: CreateActionColumnCellDefinitionContext<T>): CellDefinition<T> => {
+  return {
+    styleClass: createCtx.styleClass ?? (ctx => 'w-[1%]'),
+    component: GenericActionColumn,
+    componentInputs: item => ({
+      item: item,
+      actions: [
+        {
+          action: 'view',
+          title: 'Részletek',
+          text: false,
+          handler: createCtx.actionHandler,
+          svgIcon: SvgIcons.heroDocument,
+        },
+        {
+          action: 'edit', title: 'Szerkesztés', text: false,
+          svgIcon: SvgIcons.heroCog6Tooth,
+          handler: createCtx.actionHandler,
+        },
+        {
+          action: 'delete',
+          title: 'Törlés',
+          text: false,
+          handler: createCtx.actionHandler,
+          svgIcon: SvgIcons.heroTrash,
+        },
+      ] as ActionDefinition<EventType>[],
+    }),
+  };
+};
diff --git a/admin/src/app/components/generic-table/column-definition.interface.ts b/admin/src/app/components/generic-table/column-definition.interface.ts
index 30e56e1..5ac0b73 100644
--- a/admin/src/app/components/generic-table/column-definition.interface.ts
+++ b/admin/src/app/components/generic-table/column-definition.interface.ts
@@ -5,8 +5,6 @@ export interface TypeDefinition{
   params?: Record<string, any>;
 }
 
-
-
 export interface ColumnDefinition<T> {
   attribute: keyof T;
   type: TypeDefinition;
diff --git a/admin/src/app/components/generic-table/generic-table.html b/admin/src/app/components/generic-table/generic-table.html
index 6bd55f0..d46335e 100644
--- a/admin/src/app/components/generic-table/generic-table.html
+++ b/admin/src/app/components/generic-table/generic-table.html
@@ -4,7 +4,7 @@
 
   </div>
   @if (data$ | async; as getDataResponse) {
-    <table class="table w-full table-zebra">
+    <table class="table w-full table-zebra" [class]="config.tableCssClass ?? ''">
       <thead>
       <tr>
 
@@ -37,10 +37,10 @@
               <td [class]="getValueStyleClass(column!,column.valueCell!,item) ">
                 @if (column.valueCell) {
                   @if (typeof column.valueCell === 'boolean') {
-                    {{ resolveValue(item, column) }}
+                    <div [outerHTML]="  resolveValue(item, column) | safeHtml "></div>
                   } @else {
                     @if (!column.valueCell.component) {
-                      {{ resolveValue(item, column, column.valueCell) }}
+                      <div [outerHTML]=" resolveValue(item, column, column.valueCell) | safeHtml "></div>
                     } @else {
                       <ng-container
                         *ngComponentOutlet="column.valueCell.component; inputs: getComponentInputs(item, column,column.valueCell)"></ng-container>
diff --git a/admin/src/app/components/generic-table/generic-table.ts b/admin/src/app/components/generic-table/generic-table.ts
index 4fafb71..9e74298 100644
--- a/admin/src/app/components/generic-table/generic-table.ts
+++ b/admin/src/app/components/generic-table/generic-table.ts
@@ -8,11 +8,12 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { GenericTableConfig } from './generic-table.config';
 import { startWith, switchMap } from 'rxjs/operators';
 import { GenericTableSearchForm } from './generic-table-search-form/generic-table-search-form';
+import { SafeHtmlPipe } from '../../pipes/safe-html-pipe';
 
 @Component({
   selector: 'app-generic-table',
   templateUrl: './generic-table.html',
-  imports: [NgClass, AsyncPipe, NgComponentOutlet, GenericTableSearchForm],
+  imports: [NgClass, AsyncPipe, NgComponentOutlet, GenericTableSearchForm, SafeHtmlPipe],
   standalone: true,
 })
 export class GenericTable<T> implements OnInit {
@@ -68,7 +69,7 @@ export class GenericTable<T> implements OnInit {
     if (cell.componentInputs) {
       return cell.componentInputs(item);
     }
-    return { data: item }; // Default input
+    return { item }; // Default input
   }
 
   getAsHtml(str: string) {
diff --git a/admin/src/app/features/event-type/components/event-type-table/event-type-table.component.html b/admin/src/app/features/event-type/components/event-type-table/event-type-table.component.html
index ddd007c..927a37d 100644
--- a/admin/src/app/features/event-type/components/event-type-table/event-type-table.component.html
+++ b/admin/src/app/features/event-type/components/event-type-table/event-type-table.component.html
@@ -3,9 +3,9 @@
 <!-- Generated by the CLI -->
 <div class="p-4 md:p-8 space-y-6">
   <div class="flex justify-between items-center">
-    <h1 class="text-3xl font-bold">EventTypes (Generic Table)</h1>
+    <h1 class="text-3xl font-bold">Esemény típusok</h1>
     <a routerLink="/event-type/new" class="btn btn-primary">Create New</a>
   </div>
 
   <app-generic-table [config]="tableConfig"></app-generic-table>
-</div>
\ No newline at end of file
+</div>
diff --git a/admin/src/app/features/event-type/components/event-type-table/event-type-table.component.ts b/admin/src/app/features/event-type/components/event-type-table/event-type-table.component.ts
index e3c6ab3..f67cc4f 100644
--- a/admin/src/app/features/event-type/components/event-type-table/event-type-table.component.ts
+++ b/admin/src/app/features/event-type/components/event-type-table/event-type-table.component.ts
@@ -15,6 +15,7 @@ import {
 import { EventTypeService } from '../../services/event-type.service';
 import { BehaviorSubject } from 'rxjs';
 import { SvgIcons } from '../../../../svg-icons';
+import { ColorView } from '../../../../components/color-view/color-view';
 
 @Component({
   selector: 'app-event-type-table',
@@ -60,42 +61,52 @@ export class EventTypeTableComponent implements OnInit {
         {
           attribute: 'name',
           headerCell: true,
-          valueCell: true,
+          valueCell: {
+            styleClass: ctx => 'w-[1%]',
+            value: item => item?.name,
+          },
         },
         {
           attribute: 'description',
           headerCell: true,
           valueCell: {
-            styleClass: ctx => 'w-auto',
             value: item => item?.description,
           },
         },
         {
           attribute: 'color',
           headerCell: true,
-          valueCell: true,
+          valueCell: {
+            styleClass: ctx => 'w-[1%]',
+            value: item => item?.color,
+            component: ColorView,
+            componentInputs: item => {
+              return { color: item?.color };
+            }
+          },
         },
         {
           attribute: 'actions',
           headerCell: { value: 'Actions' },
           valueCell: {
+            styleClass: ctx => 'w-[1%]',
             component: GenericActionColumn,
             componentInputs: item => ({
               item: item,
               actions: [
-                { action: 'view', text: false, handler: actionHandler, svgIcon: SvgIcons.heroDocument },
+                { action: 'view', title: 'Részletek', text: false, handler: actionHandler, svgIcon: SvgIcons.heroDocument },
                 {
-                  action: 'edit', text: false,
+                  action: 'edit', title: 'Szerkesztés', text: false,
                   svgIcon: SvgIcons.heroCog6Tooth,
                   handler: actionHandler,
                 },
-                { action: 'delete', text: false, handler: actionHandler, svgIcon: SvgIcons.heroTrash },
+                { action: 'delete', title: 'Törlés', text: false, handler: actionHandler, svgIcon: SvgIcons.heroTrash },
               ] as ActionDefinition<EventType>[],
             }),
           },
         },
       ] as ColumnDefinition<EventType>[],
-      tableCssClass: 'event-type-table-container',
+      tableCssClass: 'event-type-table-container w-full',
     };
   }