This commit is contained in:
Thomas Peterson 2025-12-31 16:47:12 +01:00
parent e9ca2223e4
commit 47057ea7a3
6 changed files with 251 additions and 143 deletions

View File

@ -1471,7 +1471,7 @@ Siehe `backend_tailwind_base.html.twig` für vollständige Implementierung.
{% endblock %} {% endblock %}
``` ```
### Liste-Seite (CRUD List) ### Liste-Seite (CRUD List)
```twig ```twig
{% extends 'backend_tailwind_base.html.twig' %} {% extends 'backend_tailwind_base.html.twig' %}
@ -1562,23 +1562,51 @@ Siehe `backend_tailwind_base.html.twig` für vollständige Implementierung.
</table> </table>
</div> </div>
{# Pagination #} {# Pagination #}
{{ knp_pagination_render(pagination, 'tailwind_pagination.html.twig') }} {{ knp_pagination_render(pagination, 'tailwind_pagination.html.twig') }}
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
``` ```
### Edit/Create-Seite (CRUD Form) #### List-Header im `block header` (Titel + Aktion rechts)
```twig
{% block header %}
<div class="flex flex-wrap items-center gap-4 justify-between w-full">
<div>
<h1 class="text-psc text-2xl font-medium flex flex-row gap-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8"><!-- Icon --></svg>
Module Name <span class="text-gray-500">Liste</span>
</h1>
</div>
<div class="flex flex-wrap items-center gap-4 justify-end shrink-0 ml-auto">
<a href="{{ path('route_create') }}" class="psc-button-save">
Neu erstellen
</a>
</div>
</div>
{% endblock %}
```
#### KNP Pagination mit Sortable-Template
```twig
{{ knp_pagination_render(pagination, 'tailwind_pagination.html.twig', {}, {
'sortableTemplate': 'tailwind_sortable.html.twig'
}) }}
```
### Edit/Create-Seite (CRUD Form)
**WICHTIG: Verwende immer das vertikale Tab-Layout für Edit/Create-Seiten mit mehreren Sektionen!** **WICHTIG: Verwende immer das vertikale Tab-Layout für Edit/Create-Seiten mit mehreren Sektionen!**
#### Standard Edit-Seite mit vertikalen Tabs #### Standard Edit-Seite mit vertikalen Tabs
```twig ```twig
{% extends 'backend_tailwind_base.html.twig' %} {% extends 'backend_tailwind_base.html.twig' %}
{% form_theme form 'tailwind_formtheme.html.twig' %} {% form_theme form 'form_div_layout_tailwind.html.twig' %}
{% block header %} {% block header %}
<div> <div>
@ -1719,10 +1747,76 @@ Siehe `backend_tailwind_base.html.twig` für vollständige Implementierung.
</div> </div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
``` ```
#### Design-Specs für Edit/Create-Seiten ### Delete-Seite (Confirmation Card)
**WICHTIG: Delete immer als eigene Bestätigungs-Card mit Header, Body, Footer.**
```twig
{% extends 'backend_tailwind_base.html.twig' %}
{% form_theme form 'form_div_layout_tailwind.html.twig' %}
{% block header %}
<div>
<h1 class="text-3xl font-bold text-gray-900 dark:text-bodydark flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8"><!-- Icon --></svg>
Module Name <span class="text-gray-500">Löschen</span>
</h1>
</div>
<div class="flex flex-wrap items-center gap-4 justify-start shrink-0">
<a href="{{ path('module_list') }}" class="inline-flex items-center justify-center py-1 gap-1 font-medium rounded-md px-4 text-sm text-white shadow-lg bg-gray-500 hover:bg-gray-600 hover:ring-2 hover:ring-gray-500 hover:ring-offset-2 min-h-[2.25rem]">
<svg xmlns="http://www.w3.org/2000/svg" class="button-icon"><!-- Icon --></svg>
Zurück
</a>
</div>
{% endblock %}
{% block body %}
<div class="flex flex-col gap-6">
<div class="rounded-md border border-red-200 bg-white shadow-lg dark:border-strokedark dark:bg-boxdark">
<div class="border-b border-red-200 bg-red-50 px-7.5 py-4 dark:border-strokedark dark:bg-red-900/20">
<div class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-red-600"><!-- Warn Icon --></svg>
<h3 class="text-xl font-medium text-red-900 dark:text-red-200">Löschen?</h3>
</div>
</div>
<div class="px-7.5 py-6">
<p class="text-gray-700 dark:text-bodydark">
Bist du sicher, dass du diesen Eintrag löschen willst?
</p>
<div class="mt-4 p-4 bg-gray-50 rounded-md border border-gray-200 dark:bg-boxdark-2 dark:border-strokedark">
<h5 class="text-lg font-medium text-gray-900 dark:text-bodydark">
{{ item.title }}
</h5>
</div>
<div class="mt-4 p-4 bg-yellow-50 rounded-md border border-yellow-200">
<p class="text-sm text-yellow-800">Diese Aktion kann nicht rückgängig gemacht werden.</p>
</div>
</div>
<div class="border-t border-gray-200 px-7.5 py-4 bg-gray-50 dark:border-strokedark dark:bg-boxdark-2">
{{ form_start(form) }}
<div class="flex flex-wrap items-center gap-3 justify-end">
{{ form_widget(form.no, {
attr: {
class: 'inline-flex items-center justify-center py-2 gap-2 font-medium rounded-md px-4 text-sm text-psc-600 border border-psc-500 bg-white hover:bg-gray-50 hover:ring-2 hover:ring-psc-500 hover:ring-offset-1 shadow-sm'
}
}) }}
{{ form_widget(form.yes, {
attr: {
class: 'inline-flex items-center justify-center py-2 gap-2 font-medium rounded-md px-4 text-sm text-white shadow-lg bg-red-500 hover:bg-red-600 hover:ring-2 hover:ring-red-500 hover:ring-offset-1'
}
}) }}
</div>
{{ form_end(form) }}
</div>
</div>
</div>
{% endblock %}
```
#### Design-Specs für Edit/Create-Seiten
**Header:** **Header:**
- **Titel:** Links mit Icon, Format: `Module Name <span class="text-gray-500">Aktion</span>` - **Titel:** Links mit Icon, Format: `Module Name <span class="text-gray-500">Aktion</span>`
@ -2054,11 +2148,16 @@ Immer Dark Mode Varianten hinzufügen:
{% endblock %} {% endblock %}
``` ```
#### 3. Form Theme #### 3. Form Theme
```twig ```twig
{% form_theme form 'form_div_layout_tailwind.html.twig' %} {% form_theme form 'form_div_layout_tailwind.html.twig' %}
``` ```
**Nicht verwenden:**
```twig
{% form_theme form 'tailwind_formtheme.html.twig' %}
```
#### 4. Naming Conventions #### 4. Naming Conventions

View File

@ -11,7 +11,7 @@
</h1> </h1>
</div> </div>
<div class="flex flex-wrap items-center gap-4 justify-start shrink-0"> <div class="flex flex-wrap items-center gap-4 justify-start shrink-0">
<a href="{{ path("psc_system_help_list") }}" class="inline-flex items-center justify-center py-1 gap-1 font-medium rounded-sm px-4 text-sm text-white shadow-lg bg-psc-500 hover:bg-psc-600 hover:ring-2 hover:ring-psc-500 hover:ring-offset-2 min-h-[2.25rem]"> <a href="{{ path("psc_system_help_list") }}" class="inline-flex items-center justify-center py-1 gap-1 font-medium rounded-md px-4 text-sm text-white shadow-lg bg-gray-500 hover:bg-gray-600 hover:ring-2 hover:ring-gray-500 hover:ring-offset-2 min-h-[2.25rem]">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="button-icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="button-icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" /> <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
</svg> </svg>
@ -25,7 +25,7 @@
{{ form_start(form, {attr: {class: ''}}) }} {{ form_start(form, {attr: {class: ''}}) }}
<div class="tab-group flex-none md:flex w-full" data-dui-orientation="vertical"> <div class="tab-group flex-none md:flex w-full" data-dui-orientation="vertical">
<div role="tablist" class="relative mr-5 rounded-sm flex flex-col p-1 w-full md:w-2/12"> <div role="tablist" class="relative mr-5 rounded-md flex flex-col p-1 w-full md:w-2/12">
<div class="tab-indicator absolute left-0 w-1 bg-psc-500 transition-transform duration-300"></div> <div class="tab-indicator absolute left-0 w-1 bg-psc-500 transition-transform duration-300"></div>
<a href="#" class="tab-link flex items-center text-sm active px-4 py-2 relative" data-dui-tab-target="details"> <a href="#" class="tab-link flex items-center text-sm active px-4 py-2 relative" data-dui-tab-target="details">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="button-icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="button-icon">
@ -35,7 +35,7 @@
</a> </a>
</div> </div>
<div class="rounded-sm w-full border bg-white p-5 shadow-lg dark:border-strokedark dark:bg-boxdark"> <div class="rounded-md w-full border bg-white p-5 shadow-lg dark:border-strokedark dark:bg-boxdark">
<div id="details" class="tab-content w-full text-stone-500 text-sm block"> <div id="details" class="tab-content w-full text-stone-500 text-sm block">
<h6 class="text-sm mt-3 mb-6 font-bold uppercase">Details</h6> <h6 class="text-sm mt-3 mb-6 font-bold uppercase">Details</h6>
<div class="flex flex-wrap"> <div class="flex flex-wrap">
@ -61,12 +61,7 @@
</div> </div>
<div class="text-end my-2"> <div class="text-end my-2">
<button type="submit" class="inline-flex items-center justify-center py-1 gap-1 font-medium rounded-sm px-4 text-sm text-white shadow-lg bg-psc-500 hover:bg-psc-600 hover:ring-2 hover:ring-psc-500 hover:ring-offset-2 min-h-[2.25rem]"> <button type="submit" class="inline-flex items-center justify-center py-1 gap-1 font-medium rounded-md px-4 text-sm text-white shadow-lg bg-psc-500 hover:bg-psc-600 hover:ring-2 hover:ring-psc-500 hover:ring-offset-2 min-h-[2.25rem]">Speichern</button>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="button-icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
Speichern
</button>
</div> </div>
{{ form_end(form) }} {{ form_end(form) }}

View File

@ -1,4 +1,5 @@
{% extends 'backend_tailwind_base.html.twig' %} {% extends 'backend_tailwind_base.html.twig' %}
{% form_theme form 'form_div_layout_tailwind.html.twig' %}
{% block header %} {% block header %}
<div> <div>
@ -10,7 +11,7 @@
</h1> </h1>
</div> </div>
<div class="flex flex-wrap items-center gap-4 justify-start shrink-0"> <div class="flex flex-wrap items-center gap-4 justify-start shrink-0">
<a href="{{ path("psc_system_help_list") }}" class="inline-flex items-center justify-center py-1 gap-1 font-medium rounded-sm px-4 text-sm text-white shadow-lg bg-psc-500 hover:bg-psc-600 hover:ring-2 hover:ring-psc-500 hover:ring-offset-2 min-h-[2.25rem]"> <a href="{{ path("psc_system_help_list") }}" class="inline-flex items-center justify-center py-1 gap-1 font-medium rounded-md px-4 text-sm text-white shadow-lg bg-gray-500 hover:bg-gray-600 hover:ring-2 hover:ring-gray-500 hover:ring-offset-2 min-h-[2.25rem]">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="button-icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="button-icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" /> <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
</svg> </svg>
@ -21,45 +22,57 @@
{% block body %} {% block body %}
<div class="flex flex-col gap-6"> <div class="flex flex-col gap-6">
<div class="rounded-sm border bg-white px-7.5 py-6 shadow-lg dark:border-strokedark dark:bg-boxdark"> <div class="rounded-md border border-red-200 bg-white shadow-lg dark:border-strokedark dark:bg-boxdark">
<div class="mb-6 px-7"> <div class="border-b border-red-200 bg-red-50 px-7.5 py-4 dark:border-strokedark dark:bg-red-900/20">
<h4 class="text-lg font-semibold text-gray-900 mb-4">Hilfetext löschen?</h4> <div class="flex items-center gap-3">
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-600">
<div class="flex"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
<div class="flex-shrink-0"> </svg>
<svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <h3 class="text-xl font-medium text-red-900 dark:text-red-200">Hilfetext löschen?</h3>
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" /> </div>
</svg> </div>
</div>
<div class="ml-3"> <div class="px-7.5 py-6">
<p class="text-sm text-yellow-700 font-medium"> <p class="text-gray-700 dark:text-bodydark">
{{ help.name }} Soll der ausgewählte Hilfetext wirklich gelöscht werden?
</p> </p>
</div>
<div class="mt-4 p-4 bg-gray-50 rounded-md border border-gray-200 dark:bg-boxdark-2 dark:border-strokedark">
<h5 class="text-lg font-medium text-gray-900 dark:text-bodydark">
{{ help.name }}
</h5>
</div>
<div class="mt-4 p-4 bg-yellow-50 rounded-md border border-yellow-200">
<div class="flex gap-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
</svg>
<p class="text-sm text-yellow-800">
Diese Aktion kann nicht rückgängig gemacht werden.
</p>
</div> </div>
</div> </div>
</div> </div>
{{ form_start(form, {attr: {class: ''}}) }} <div class="border-t border-gray-200 px-7.5 py-4 bg-gray-50 dark:border-strokedark dark:bg-boxdark-2">
<div class="flex gap-4 px-7 items-center"> {{ form_start(form) }}
<button type="submit" name="{{ form.yes.vars.full_name }}" value="1" class="inline-flex items-center justify-center py-2 gap-1 font-medium rounded-sm px-6 text-sm text-white shadow-lg bg-red-500 hover:bg-red-600 hover:ring-2 hover:ring-red-500 hover:ring-offset-2 min-h-[2.25rem]"> <div class="flex flex-wrap items-center gap-3 justify-end">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="button-icon"> {{ form_widget(form.no, {
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /> attr: {
</svg> class: 'inline-flex items-center justify-center py-2 gap-2 font-medium rounded-md px-4 text-sm text-psc-600 border border-psc-500 bg-white hover:bg-gray-50 hover:ring-2 hover:ring-psc-500 hover:ring-offset-1 shadow-sm'
Ja, löschen },
</button> label: 'Nein, abbrechen'
<button type="submit" name="{{ form.no.vars.full_name }}" value="1" class="inline-flex items-center justify-center py-2 gap-1 font-medium rounded-sm px-6 text-sm text-gray-700 shadow-lg bg-white hover:bg-gray-50 hover:ring-2 hover:ring-gray-300 hover:ring-offset-2 min-h-[2.25rem] border border-gray-300"> }) }}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="button-icon"> {{ form_widget(form.yes, {
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /> attr: {
</svg> class: 'inline-flex items-center justify-center py-2 gap-2 font-medium rounded-md px-4 text-sm text-white shadow-lg bg-red-500 hover:bg-red-600 hover:ring-2 hover:ring-red-500 hover:ring-offset-1'
Nein, abbrechen },
</button> label: 'Ja, löschen'
}) }}
</div>
{{ form_end(form) }}
</div> </div>
<div class="hidden">
{{ form_widget(form.yes) }}
{{ form_widget(form.no) }}
</div>
{{ form_end(form) }}
</div> </div>
</div> </div>
{% endblock %} {% endblock %}

View File

@ -11,7 +11,7 @@
</h1> </h1>
</div> </div>
<div class="flex flex-wrap items-center gap-4 justify-start shrink-0"> <div class="flex flex-wrap items-center gap-4 justify-start shrink-0">
<a href="{{ path("psc_system_help_list") }}" class="inline-flex items-center justify-center py-1 gap-1 font-medium rounded-sm px-4 text-sm text-white shadow-lg bg-psc-500 hover:bg-psc-600 hover:ring-2 hover:ring-psc-500 hover:ring-offset-2 min-h-[2.25rem]"> <a href="{{ path("psc_system_help_list") }}" class="inline-flex items-center justify-center py-1 gap-1 font-medium rounded-md px-4 text-sm text-white shadow-lg bg-gray-500 hover:bg-gray-600 hover:ring-2 hover:ring-gray-500 hover:ring-offset-2 min-h-[2.25rem]">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="button-icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="button-icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" /> <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
</svg> </svg>
@ -25,7 +25,7 @@
{{ form_start(form, {attr: {class: ''}}) }} {{ form_start(form, {attr: {class: ''}}) }}
<div class="tab-group flex-none md:flex w-full" data-dui-orientation="vertical"> <div class="tab-group flex-none md:flex w-full" data-dui-orientation="vertical">
<div role="tablist" class="relative mr-5 rounded-sm flex flex-col p-1 w-full md:w-2/12"> <div role="tablist" class="relative mr-5 rounded-md flex flex-col p-1 w-full md:w-2/12">
<div class="tab-indicator absolute left-0 w-1 bg-psc-500 transition-transform duration-300"></div> <div class="tab-indicator absolute left-0 w-1 bg-psc-500 transition-transform duration-300"></div>
<a href="#" class="tab-link flex items-center text-sm active px-4 py-2 relative" data-dui-tab-target="details"> <a href="#" class="tab-link flex items-center text-sm active px-4 py-2 relative" data-dui-tab-target="details">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="button-icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="button-icon">
@ -35,7 +35,7 @@
</a> </a>
</div> </div>
<div class="rounded-sm w-full border bg-white p-5 shadow-lg dark:border-strokedark dark:bg-boxdark"> <div class="rounded-md w-full border bg-white p-5 shadow-lg dark:border-strokedark dark:bg-boxdark">
<div id="details" class="tab-content w-full text-stone-500 text-sm block"> <div id="details" class="tab-content w-full text-stone-500 text-sm block">
<h6 class="text-sm mt-3 mb-6 font-bold uppercase">Details</h6> <h6 class="text-sm mt-3 mb-6 font-bold uppercase">Details</h6>
<div class="flex flex-wrap"> <div class="flex flex-wrap">
@ -61,12 +61,7 @@
</div> </div>
<div class="text-end my-2"> <div class="text-end my-2">
<button type="submit" class="inline-flex items-center justify-center py-1 gap-1 font-medium rounded-sm px-4 text-sm text-white shadow-lg bg-psc-500 hover:bg-psc-600 hover:ring-2 hover:ring-psc-500 hover:ring-offset-2 min-h-[2.25rem]"> <button type="submit" class="inline-flex items-center justify-center py-1 gap-1 font-medium rounded-md px-4 text-sm text-white shadow-lg bg-psc-500 hover:bg-psc-600 hover:ring-2 hover:ring-psc-500 hover:ring-offset-2 min-h-[2.25rem]">Speichern</button>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="button-icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
Speichern
</button>
</div> </div>
{{ form_end(form) }} {{ form_end(form) }}

View File

@ -1,63 +1,81 @@
{% extends 'backend_tailwind_base.html.twig' %} {% extends 'backend_tailwind_base.html.twig' %}
{% block header %} {% block header %}
<div> <div class="flex flex-wrap items-center gap-4 justify-between w-full">
<h1 class="text-psc text-2xl font-medium flex flex-row gap-1"> <div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-8"> <h1 class="text-psc text-2xl font-medium flex flex-row gap-1">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" /> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-8">
</svg> <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
Hilfetexte <span class="text-gray-500">Liste</span> </svg>
</h1> Hilfetexte <span class="text-gray-500">Liste</span>
</div> </h1>
<div class="flex flex-wrap items-center gap-4 justify-start shrink-0"> </div>
<a href="{{ path("psc_system_help_create") }}" class="inline-flex items-center justify-center py-1 gap-1 font-medium rounded-sm px-4 text-sm text-white shadow-lg bg-psc-500 hover:bg-psc-600 hover:ring-2 hover:ring-psc-500 hover:ring-offset-2 min-h-[2.25rem]"> <div class="flex flex-wrap items-center gap-4 justify-end shrink-0 ml-auto">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="button-icon"> <a href="{{ path("psc_system_help_create") }}" class="inline-flex items-center justify-center py-1 gap-1 font-medium rounded-md px-4 text-sm text-white shadow-lg bg-psc-500 hover:bg-psc-600 hover:ring-2 hover:ring-psc-500 hover:ring-offset-2 min-h-[2.25rem]">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="button-icon">
</svg> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
Hilfetext hinzufügen </svg>
</a> Hilfetext hinzufügen
</a>
</div>
</div> </div>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="flex flex-col gap-6"> <div class="flex flex-col gap-6">
<div class="rounded-sm border bg-white px-7.5 py-6 shadow-lg dark:border-strokedark dark:bg-boxdark"> <div class="rounded-md border bg-white px-7.5 py-6 shadow-lg dark:border-strokedark dark:bg-boxdark">
<div class=""> <div class="overflow-x-auto">
<div class="w-full grid grid-cols-12 border-t border-stroke px-4 bg-slate-100 py-4.5 dark:border-strokedark md:px-6 2xl:px-7.5"> <table class="min-w-full text-sm">
<div class="col-span-3 px-2 py-3"> <thead class="bg-slate-50 dark:bg-gray-800">
<p class="font-medium">Name</p> <tr class="border-b-2 border-gray-200 dark:border-gray-700">
</div> <th class="px-4 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider dark:text-gray-300">
<div class="col-span-3 px-2 py-3"> Name
<p class="font-medium">Interner Name</p> </th>
</div> <th class="px-4 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider dark:text-gray-300">
<div class="col-span-5 px-2 py-3"> Interner Name
<p class="font-medium">Hilfetext</p> </th>
</div> <th class="px-4 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider dark:text-gray-300">
<div class="col-span-1 px-2 py-3"></div> Hilfetext
</div> </th>
{% for help in helpItems %} <th class="px-4 py-4 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider dark:text-gray-300">
<div class="w-full grid grid-cols-12 border-t border-stroke px-4 py-4.5 dark:border-strokedark md:px-6 2xl:px-7.5"> Aktionen
<div class="col-span-3 px-2 py-3">{{ help.name }}</div> </th>
<div class="col-span-3 px-2 py-3">{{ help.internName }}</div> </tr>
<div class="col-span-5 px-2 py-3"> </thead>
<div class="truncate"> <tbody class="bg-white dark:bg-boxdark">
{{ help.helpText|striptags }} {% for help in helpItems %}
</div> <tr class="border-t border-gray-100 hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800/50 transition-colors">
</div> <td class="px-4 py-3 font-medium text-gray-900 dark:text-gray-100">
<div class="col-span-1 px-2 py-3 text-end flex flex-row gap-2 justify-end"> {{ help.name }}
<a href="{{ path("psc_system_help_edit", {uuid: help.id}) }}" class=""> </td>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="table-icon"> <td class="px-4 py-3 text-gray-900 dark:text-gray-100">
<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /> <code class="px-2 py-1 text-xs font-mono bg-gray-100 rounded dark:bg-gray-700 dark:text-gray-300">{{ help.internName }}</code>
</svg> </td>
</a> <td class="px-4 py-3 text-gray-600 dark:text-gray-400">
<a href="{{ path("psc_system_help_delete", {uuid: help.id}) }}" class=""> <div class="truncate max-w-md">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="table-icon"> {{ help.helpText|striptags }}
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /> </div>
</svg> </td>
</a> <td class="px-4 py-3 text-right">
</div> <div class="flex flex-row gap-2 justify-end">
</div> {# Bearbeiten - GRÜN #}
{% endfor %} <a href="{{ path("psc_system_help_edit", {uuid: help.id}) }}" title="Bearbeiten">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="table-icon text-green-600 hover:text-green-700 dark:text-green-500 dark:hover:text-green-400">
<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
</svg>
</a>
{# Löschen - ROT #}
<a href="{{ path("psc_system_help_delete", {uuid: help.id}) }}" title="Löschen">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="table-icon text-red-600 hover:text-red-700 dark:text-red-500 dark:hover:text-red-400">
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
</svg>
</a>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>

View File

@ -129,9 +129,9 @@
<th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">Seiten</th> <th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">Seiten</th>
<th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">2-Seitig</th> <th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">2-Seitig</th>
<th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">Tab</th> <th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">Tab</th>
<th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">Tab-Farbe</th>
<th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">OCR Bereich</th> <th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">OCR Bereich</th>
<th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">Nummer (OCR)</th> <th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">Tab-Nummer (OCR)</th>
<th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">Farbe</th>
<th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">OCR</th> <th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">OCR</th>
<th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">Löschen</th> <th class="px-4 py-3 text-center text-xs font-medium uppercase tracking-wider">Löschen</th>
</tr> </tr>
@ -145,7 +145,7 @@
<div class="mt-6 flex justify-between items-center"> <div class="mt-6 flex justify-between items-center">
<button class="px-6 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600" id="backToStep1">Zurück zu Schritt 1</button> <button class="px-6 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600" id="backToStep1">Zurück zu Schritt 1</button>
<div class="flex gap-2"> <div class="flex gap-2">
<button class="px-6 py-2 bg-cyan-500 text-white rounded-lg hover:bg-cyan-600" id="autoProcessAll">Alle automatisch verarbeiten</button> <button class="px-6 py-2 bg-cyan-500 text-white rounded-lg hover:bg-cyan-600" id="autoProcessAll">Alle TAB (OCR) automatisch verarbeiten</button>
<button class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600" id="nextToStep3">Weiter zu Schritt 3</button> <button class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600" id="nextToStep3">Weiter zu Schritt 3</button>
</div> </div>
</div> </div>
@ -810,19 +810,7 @@
onchange="updateOCRNumber(${index}, this.value)" /> onchange="updateOCRNumber(${index}, this.value)" />
</td> </td>
<td class="px-4 py-3 whitespace-nowrap text-center" onclick="event.stopPropagation()"> <td class="px-4 py-3 whitespace-nowrap text-center" onclick="event.stopPropagation()">
<select class="px-2 py-1 border border-gray-300 rounded focus:outline-none focus:border-blue-500" <button class="px-3 py-1 text-sm bg-cyan-500 text-white rounded hover:bg-cyan-600" onclick="processOCR(${index})">
id="color-select-${index}"
onchange="updateColor(${index}, this.value)"
style="color: ${pdf.color || 'black'};">
<option value="black" ${(!pdf.color || pdf.color === 'black') ? 'selected' : ''} style="color: black;">Schwarz</option>
<option value="red" ${pdf.color === 'red' ? 'selected' : ''} style="color: red;">Rot</option>
<option value="green" ${pdf.color === 'green' ? 'selected' : ''} style="color: green;">Grün</option>
<option value="blue" ${pdf.color === 'blue' ? 'selected' : ''} style="color: blue;">Blau</option>
<option value="yellow" ${pdf.color === 'yellow' ? 'selected' : ''} style="color: #997700;">Gelb</option>
</select>
</td>
<td class="px-4 py-3 whitespace-nowrap text-center" onclick="event.stopPropagation()">
<button class="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600" onclick="processOCR(${index})">
${pdf.processed ? 'Neu scannen' : 'Scannen'} ${pdf.processed ? 'Neu scannen' : 'Scannen'}
</button> </button>
${pdf.processed ? '<span class="ml-2 text-green-500">✓</span>' : ''} ${pdf.processed ? '<span class="ml-2 text-green-500">✓</span>' : ''}
@ -1523,7 +1511,7 @@
<th class="px-4 py-3 text-center text-xs font-medium uppercase">Seiten</th> <th class="px-4 py-3 text-center text-xs font-medium uppercase">Seiten</th>
<th class="px-4 py-3 text-center text-xs font-medium uppercase">2-Seitig</th> <th class="px-4 py-3 text-center text-xs font-medium uppercase">2-Seitig</th>
<th class="px-4 py-3 text-center text-xs font-medium uppercase">OCR Nummer</th> <th class="px-4 py-3 text-center text-xs font-medium uppercase">OCR Nummer</th>
<th class="px-4 py-3 text-center text-xs font-medium uppercase">Farbe</th> <th class="px-4 py-3 text-center text-xs font-medium uppercase">Tab-Farbe</th>
</tr> </tr>
</thead> </thead>
<tbody class="bg-white divide-y divide-gray-200"> <tbody class="bg-white divide-y divide-gray-200">