Fixes
This commit is contained in:
parent
e9ca2223e4
commit
47057ea7a3
@ -1570,6 +1570,34 @@ Siehe `backend_tailwind_base.html.twig` für vollständige Implementierung.
|
||||
{% endblock %}
|
||||
```
|
||||
|
||||
#### 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!**
|
||||
@ -1578,7 +1606,7 @@ Siehe `backend_tailwind_base.html.twig` für vollständige Implementierung.
|
||||
|
||||
```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 %}
|
||||
<div>
|
||||
@ -1722,6 +1750,72 @@ Siehe `backend_tailwind_base.html.twig` für vollständige Implementierung.
|
||||
{% endblock %}
|
||||
```
|
||||
|
||||
### 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:**
|
||||
@ -2060,6 +2154,11 @@ Immer Dark Mode Varianten hinzufügen:
|
||||
{% form_theme form 'form_div_layout_tailwind.html.twig' %}
|
||||
```
|
||||
|
||||
**Nicht verwenden:**
|
||||
```twig
|
||||
{% form_theme form 'tailwind_formtheme.html.twig' %}
|
||||
```
|
||||
|
||||
#### 4. Naming Conventions
|
||||
|
||||
**Routen:**
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
</h1>
|
||||
</div>
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
|
||||
</svg>
|
||||
@ -25,7 +25,7 @@
|
||||
{{ form_start(form, {attr: {class: ''}}) }}
|
||||
|
||||
<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>
|
||||
<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">
|
||||
@ -35,7 +35,7 @@
|
||||
</a>
|
||||
</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">
|
||||
<h6 class="text-sm mt-3 mb-6 font-bold uppercase">Details</h6>
|
||||
<div class="flex flex-wrap">
|
||||
@ -61,12 +61,7 @@
|
||||
</div>
|
||||
|
||||
<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]">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{{ form_end(form) }}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
{% extends 'backend_tailwind_base.html.twig' %}
|
||||
{% form_theme form 'form_div_layout_tailwind.html.twig' %}
|
||||
|
||||
{% block header %}
|
||||
<div>
|
||||
@ -10,7 +11,7 @@
|
||||
</h1>
|
||||
</div>
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
|
||||
</svg>
|
||||
@ -21,45 +22,57 @@
|
||||
|
||||
{% block body %}
|
||||
<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="mb-6 px-7">
|
||||
<h4 class="text-lg font-semibold text-gray-900 mb-4">Hilfetext löschen?</h4>
|
||||
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<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 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" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-600">
|
||||
<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" />
|
||||
</svg>
|
||||
<h3 class="text-xl font-medium text-red-900 dark:text-red-200">Hilfetext löschen?</h3>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm text-yellow-700 font-medium">
|
||||
</div>
|
||||
|
||||
<div class="px-7.5 py-6">
|
||||
<p class="text-gray-700 dark:text-bodydark">
|
||||
Soll der ausgewählte Hilfetext wirklich gelöscht werden?
|
||||
</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">
|
||||
{{ 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>
|
||||
|
||||
{{ form_start(form, {attr: {class: ''}}) }}
|
||||
<div class="flex gap-4 px-7 items-center">
|
||||
<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]">
|
||||
<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="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>
|
||||
Ja, löschen
|
||||
</button>
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
Nein, abbrechen
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden">
|
||||
{{ form_widget(form.yes) }}
|
||||
{{ form_widget(form.no) }}
|
||||
<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'
|
||||
},
|
||||
label: 'Nein, abbrechen'
|
||||
}) }}
|
||||
{{ 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'
|
||||
},
|
||||
label: 'Ja, löschen'
|
||||
}) }}
|
||||
</div>
|
||||
{{ form_end(form) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
</h1>
|
||||
</div>
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
|
||||
</svg>
|
||||
@ -25,7 +25,7 @@
|
||||
{{ form_start(form, {attr: {class: ''}}) }}
|
||||
|
||||
<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>
|
||||
<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">
|
||||
@ -35,7 +35,7 @@
|
||||
</a>
|
||||
</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">
|
||||
<h6 class="text-sm mt-3 mb-6 font-bold uppercase">Details</h6>
|
||||
<div class="flex flex-wrap">
|
||||
@ -61,12 +61,7 @@
|
||||
</div>
|
||||
|
||||
<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]">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{{ form_end(form) }}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
{% extends 'backend_tailwind_base.html.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" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-8">
|
||||
@ -9,55 +10,72 @@
|
||||
Hilfetexte <span class="text-gray-500">Liste</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-4 justify-start shrink-0">
|
||||
<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">
|
||||
<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]">
|
||||
<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="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
Hilfetext hinzufügen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<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="">
|
||||
<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">
|
||||
<div class="col-span-3 px-2 py-3">
|
||||
<p class="font-medium">Name</p>
|
||||
</div>
|
||||
<div class="col-span-3 px-2 py-3">
|
||||
<p class="font-medium">Interner Name</p>
|
||||
</div>
|
||||
<div class="col-span-5 px-2 py-3">
|
||||
<p class="font-medium">Hilfetext</p>
|
||||
</div>
|
||||
<div class="col-span-1 px-2 py-3"></div>
|
||||
</div>
|
||||
<div class="rounded-md border bg-white px-7.5 py-6 shadow-lg dark:border-strokedark dark:bg-boxdark">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full text-sm">
|
||||
<thead class="bg-slate-50 dark:bg-gray-800">
|
||||
<tr class="border-b-2 border-gray-200 dark:border-gray-700">
|
||||
<th class="px-4 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider dark:text-gray-300">
|
||||
Name
|
||||
</th>
|
||||
<th class="px-4 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider dark:text-gray-300">
|
||||
Interner Name
|
||||
</th>
|
||||
<th class="px-4 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider dark:text-gray-300">
|
||||
Hilfetext
|
||||
</th>
|
||||
<th class="px-4 py-4 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider dark:text-gray-300">
|
||||
Aktionen
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white dark:bg-boxdark">
|
||||
{% for help in helpItems %}
|
||||
<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">
|
||||
<div class="col-span-3 px-2 py-3">{{ help.name }}</div>
|
||||
<div class="col-span-3 px-2 py-3">{{ help.internName }}</div>
|
||||
<div class="col-span-5 px-2 py-3">
|
||||
<div class="truncate">
|
||||
<tr class="border-t border-gray-100 hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800/50 transition-colors">
|
||||
<td class="px-4 py-3 font-medium text-gray-900 dark:text-gray-100">
|
||||
{{ help.name }}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-gray-900 dark:text-gray-100">
|
||||
<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>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-gray-600 dark:text-gray-400">
|
||||
<div class="truncate max-w-md">
|
||||
{{ help.helpText|striptags }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-1 px-2 py-3 text-end flex flex-row gap-2 justify-end">
|
||||
<a href="{{ path("psc_system_help_edit", {uuid: help.id}) }}" class="">
|
||||
<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>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<div class="flex flex-row gap-2 justify-end">
|
||||
{# Bearbeiten - GRÜN #}
|
||||
<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>
|
||||
<a href="{{ path("psc_system_help_delete", {uuid: help.id}) }}" class="">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="table-icon">
|
||||
{# 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>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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">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-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">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">Tab-Nummer (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>
|
||||
</tr>
|
||||
@ -145,7 +145,7 @@
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@ -810,19 +810,7 @@
|
||||
onchange="updateOCRNumber(${index}, this.value)" />
|
||||
</td>
|
||||
<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"
|
||||
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})">
|
||||
<button class="px-3 py-1 text-sm bg-cyan-500 text-white rounded hover:bg-cyan-600" onclick="processOCR(${index})">
|
||||
${pdf.processed ? 'Neu scannen' : 'Scannen'}
|
||||
</button>
|
||||
${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">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">Farbe</th>
|
||||
<th class="px-4 py-3 text-center text-xs font-medium uppercase">Tab-Farbe</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user