rschneider/dvbooking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

basic single event dashboard

Browse Source
This commit is contained in:
Schneider Roland 2025-11-27 22:24:41 +01:00
parent 364be9976a
commit 02442a162a
5 changed files with 37 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-card/single-event-dashboard-card.html
View File

@ -1,7 +1,7 @@
<div class="card bg-base-100 shadow-sm" [class]="styleClass()">
<div class="card bg-base-100 hover:bg-base-300 shadow-sm h-full" [class]="">
<div class="card-body items-center ">
<h2 class="card-title">{{ title() }}</h2>
<p>{{ description() }}</p>
<h2 class="card-title text-center">{{ title() }}</h2>
<p class="text-center">{{ description() }}</p>
<div class="card-actions justify-end">
<button class="btn btn-primary">
<!-- Using the new @if control flow -->

4
admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-card/single-event-dashboard-card.ts
View File

@ -18,14 +18,14 @@ export class SingleEventDashboardCard {
// 1. Define the Input Signal to receive class names as a string or array
// Example: 'grow-2 align-center'
public customClasses = input<string | null>(null);
public styleClass = input<string | null>(null);
// 2. Create a computed signal that filters out any null/undefined and returns the class string
private hostClasses = computed(() => {
// We append a base class that should always be present (e.g., 'flex-item')
const classes = ['flex-item'];
const custom = this.customClasses();
const custom = this.styleClass();
if (custom) {
// Split the input string and add the class names
classes.push(...custom.trim().split(/\s+/));

6
admin/src/app/features/calendar/components/calendar-view/single-event-dashboard/single-event-dashboard.html
View File

@ -1,4 +1,4 @@
<h3>Esemény</h3>
<h2 class="text-xl">Esemény</h2>
@if (config) {
<app-detail-view
@ -6,7 +6,7 @@
></app-detail-view>
}
<div class="flex mt-3 gap-2 flex-wrap ">
<div class="flex mt-3 gap-2 flex-wrap content-stretch ">
@for (card of cards; let i = $index; track i) {
<app-single-event-dashboard-card
@ -14,7 +14,7 @@
[svgIcon]="card.svgIcon"
[description]="card.description"
[buttonTitle]="card.buttonTitle"
[customClasses]="'flex-1'"
[styleClass]="'flex-1'"
></app-single-event-dashboard-card>
<!-- [customClasses]="'flex-[50_1_0] w-50' "-->

35
admin/src/app/features/calendar/components/calendar-view/single-event-dashboard/single-event-dashboard.ts
View File

@ -1,17 +1,13 @@
import { Component, effect, input, signal } from '@angular/core';
import { CalendarEventDto, EventsInRangeDTO } from '../../../models/events-in-range-dto.model';
import { Component, effect, input } from '@angular/core';
import { CalendarEventDto } from '../../../models/events-in-range-dto.model';
import { DetailView, DetailViewConfig } from '../../../../../components/detail-view/detail-view';
import { JsonPipe } from '@angular/common';
import { SvgIcons } from '../../../../../svg-icons';
import { SafeHtmlPipe } from '../../../../../pipes/safe-html-pipe';
import { SingleEventDashboardCard } from '../single-event-dashboard-card/single-event-dashboard-card';
@Component({
selector: 'app-single-event-dashboard',
imports: [
DetailView,
JsonPipe,
SafeHtmlPipe,
SingleEventDashboardCard,
],
templateUrl: './single-event-dashboard.html',
@ -27,32 +23,32 @@ export class SingleEventDashboard {
buttonTitle: 'Szerkesztés',
title: 'Szerkesztés',
svgIcon: SvgIcons.heorPencilSquare,
description: 'Az esemény módosítása'
description: 'Az esemény módosítása',
},
{
buttonTitle: 'Esemény lemondása',
buttonTitle: 'Lemondás',
title: 'Esemény lemondása',
svgIcon: SvgIcons.heroXcircle,
description: 'Az esemény lemondása'
description: 'Az esemény lemondása, email küldése a jelentkezőknek',
},
{
buttonTitle: 'Esemény törlése',
buttonTitle: 'Törlése',
title: 'Esemény törlése',
svgIcon: SvgIcons.heroTrash,
description: 'Az esemény törlése'
description: 'Az esemény törlése',
},
{
buttonTitle: 'Bejelentkezés',
title: 'Időpont foglalás',
svgIcon: SvgIcons.heroTrash,
description: 'Időpont foglalása eseményre'
svgIcon: SvgIcons.heroUserPlus,
description: 'Időpont foglalása eseményre',
},
{
buttonTitle: 'Lemondás',
title: 'Időpont lemondása',
svgIcon: SvgIcons.heroTrash,
description: 'Az időpont lemondása'
}
title: 'Lemondása',
svgIcon: SvgIcons.heroUserMinus,
description: 'Az időpont lemondása',
},
];
constructor() {
@ -71,14 +67,14 @@ export class SingleEventDashboard {
{
attribute: 'startTime',
getTitle: 'Kezdési időpont',
format: 'datetime'
format: 'datetime',
},
{
attribute: 'eventType',
getTitle: 'Esemény típusa',
getValue: obj => obj.eventType.name,
}
},
],
};
});
@ -86,6 +82,7 @@ export class SingleEventDashboard {
protected readonly SvgIcons = SvgIcons;
}
export interface CardConfig {
title?: string;
description?: string;

12
admin/src/app/svg-icons.ts
View File

@ -24,4 +24,16 @@ export class SvgIcons {
</svg>
`;
public static heroUserPlus = `
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
</svg>
`
public static heroUserMinus = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M22 10.5h-6m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM4 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 10.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
</svg>
`
}