WIP: Implement frontend

2023-09-18 13:10:20 +02:00
parent bfc5e5e242
commit ce97017ac4
70 changed files with 8751 additions and 337 deletions
@@ -0,0 +1,22 @@
+<div id="ajax-modal"
+     class="fixed inset-0 w-full h-full z-50 hidden"
+     {{ stimulus_controller('ajax-modal') }}
+>
+    <div class="absolute inset-0 w-full h-full bg-black/80" {{ stimulus_action('ajax-modal', 'hide', 'click') }}></div>
+    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 px-4 shadow w-full max-w-xl">
+        <div class="bg-white p-8">
+            <div class="flex justify-between pb-4">
+                <div class="text-lg font-medium" {{ stimulus_target('ajax-modal', 'title') }}></div>
+                <button type="button"
+                        class="inline-block"
+                        {{ stimulus_action('ajax-modal', 'hide') }}>
+                    {{ icon('close', 'w-6 h-6')}}
+                </button>
+            </div>
+            <div class="hidden" {{ stimulus_target('ajax-modal', 'content') }}></div>
+            <div {{ stimulus_target('ajax-modal', 'spinner') }}>
+                {% include '_partials/_spinner.html.twig' with { 'class': 'w-8 h-8 mx-auto'} %}
+            </div>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,28 @@
+<div id="confirmation-modal"
+     class="fixed top-0 left-0 z-50 inset-0 hidden"
+     {{ stimulus_controller('confirmation-modal') }}
+>
+    <div class="absolute top-0 left-0 inset-0 bg-black/80" {{ stimulus_action('confirmation-modal', 'hide', 'click') }}></div>
+    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-8 shadow w-full max-w-3xl rounded">
+        <div class="flex justify-between border-b border-gray-200 pb-2 mb-4">
+            <div class="flex items-center space-x-2">
+                {{ icon('alert', 'w-8 h-8') }}
+                <span class="text-lg font-medium" {{ stimulus_target('confirmation-modal', 'title') }}></span>
+            </div>
+            <button class="inline-block" {{ stimulus_action('confirmation-modal', 'hide') }}>
+                {{ icon('close', 'w-8 h-8') }}
+            </button>
+        </div>
+        <form method="post" {{ stimulus_target('confirmation-modal', 'form') }}>
+            <div {{ stimulus_target('confirmation-modal', 'content') }}></div>
+            <div class="mt-6 flex justify-between">
+                <button type="submit" class="btn btn--warning">
+                    Ja
+                </button>
+                <button type="button" class="btn btn--secondary" {{ stimulus_action('confirmation-modal', 'hide') }}>
+                    Abbrechen
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
@@ -0,0 +1,9 @@
+{% if app.session.flashBag.peek('error')|length > 0 %}
+    {% include '_partials/_toast.html.twig' with { level: 'warning', messages: app.flashes('error') } %}
+{% endif %}
+{% if app.session.flashBag.peek('success')|length > 0 %}
+    {% include '_partials/_toast.html.twig' with { level: 'success', messages: app.flashes('success') } %}
+{% endif %}
+{% if app.session.flashBag.peek('info')|length > 0 %}
+    {% include '_partials/_toast.html.twig' with { level: 'info', messages: app.flashes('info') } %}
+{% endif %}
@@ -0,0 +1 @@
+<svg class="{{ class }}"><use href="{{ asset('build/images/icons.svg') }}#icon-{{ icon }}"/></svg>
@@ -0,0 +1,14 @@
+{% extends 'knp_menu.html.twig' %}
+
+{% block label %}
+    {% apply spaceless %}
+        {% if item.extras.icon is defined %}
+            {{ icon(item.extras.icon, 'w-5 h-5') }}
+            {% if item.extras.icon_only is defined and false == item.extras.icon_only %}
+                <span class="flex-1">{{ item.label|raw }}</span>
+            {% endif %}
+        {% else %}
+            {{ item.label|raw }}
+        {% endif %}
+    {% endapply %}
+{% endblock %}
@@ -0,0 +1,18 @@
+<div id="mobilenav"
+     class="fixed z-50 top-0 left-0 inset-0 pr-16 bg-black/70 -translate-x-full"
+    {{ stimulus_controller('mobilenav', [], { 'closed': '-translate-x-full' }, { 'mobilenav': '#mobilenav' }) }}
+>
+    <div class="h-screen w-full bg-white">
+        <div class="flex justify-between px-8 pt-4">
+            <img src="{{ asset('build/images/logo.svg') }}" alt="" class="block w-auto h-8">
+            <button type="button"
+                    {{ stimulus_action('mobilenav', 'trigger', null, { 'mode': 'close' }) }}>
+                {{ icon('close', 'w-8 h-8') }}
+            </button>
+        </div>
+        <div class="w-full h-full p-8 pt-4 overflow-y-scroll">
+            {% set mobileMenu = knp_menu_get('main', [], { 'mobile': true }) %}
+            {{ knp_menu_render(mobileMenu, { 'firstClass': null, 'lastClass': null, 'ancestorClass': 'active', 'compressed': true }) }}
+        </div>
+    </div>
+</div>
@@ -0,0 +1,19 @@
+<div class="fixed top-0 left-0 inset-x-0 z-50 bg-white shadow-sm">
+    <div class="container px-8 py-4 flex items-center justify-between">
+        <a href="{{ path(app.user.defaultRoute) }}" title="Home">
+            <div class="flex items-center space-x-4">
+                <img src="{{ asset('build/images/logo.svg') }}" alt="" class="block w-auto h-8">
+            </div>
+        </a>
+        <nav class="hidden md:block font-medium">
+            {% set menu = knp_menu_get('main') %}
+            {{ knp_menu_render(menu, { 'firstClass': null, 'lastClass': null, 'ancestorClass': 'active', 'compressed': true }) }}
+        </nav>
+        <button type="button"
+                class="md:hidden"
+                {{ stimulus_controller('mobilenav', [], [], { 'mobilenav': '#mobilenav' }) }}
+                {{ stimulus_action('mobilenav', 'trigger', null, { 'mode': 'open' }) }}>
+            {{ icon('menu', 'w-8 h-8') }}
+        </button>
+    </div>
+</div>
@@ -0,0 +1,37 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg class="{{ class }}" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
+    <g fill="none" fill-rule="evenodd" stroke-width="2">
+        <circle cx="22" cy="22" r="1">
+            <animate attributeName="r"
+                     begin="0s" dur="1.8s"
+                     values="1; 20"
+                     calcMode="spline"
+                     keyTimes="0; 1"
+                     keySplines="0.165, 0.84, 0.44, 1"
+                     repeatCount="indefinite" />
+            <animate attributeName="stroke-opacity"
+                     begin="0s" dur="1.8s"
+                     values="1; 0"
+                     calcMode="spline"
+                     keyTimes="0; 1"
+                     keySplines="0.3, 0.61, 0.355, 1"
+                     repeatCount="indefinite" />
+        </circle>
+        <circle cx="22" cy="22" r="1">
+            <animate attributeName="r"
+                     begin="-0.9s" dur="1.8s"
+                     values="1; 20"
+                     calcMode="spline"
+                     keyTimes="0; 1"
+                     keySplines="0.165, 0.84, 0.44, 1"
+                     repeatCount="indefinite" />
+            <animate attributeName="stroke-opacity"
+                     begin="-0.9s" dur="1.8s"
+                     values="1; 0"
+                     calcMode="spline"
+                     keyTimes="0; 1"
+                     keySplines="0.3, 0.61, 0.355, 1"
+                     repeatCount="indefinite" />
+        </circle>
+    </g>
+</svg>
@@ -0,0 +1,10 @@
+{% apply spaceless %}
+    {% for message in messages %}
+        {% if message is iterable %}
+            {% set message = message.id | trans(message.parameters | default({}), message.domain | default(null), message.locale | default(null)) | raw %}
+        {% else %}
+            {% set message = message | trans | raw %}
+        {% endif %}
+        <div {{ stimulus_controller('toast', { 'text': message, 'class': 'toastify--' ~ level}) }}{{ qa_attribute('toast', level)}}></div>
+    {% endfor %}
+{% endapply %}
@@ -1,4 +1,4 @@
-{% extends 'base.html.twig' %}
+{% extends 'layout.html.twig' %}

-{% block body %}
+{% block content %}
 {% endblock %}
@@ -2,8 +2,11 @@
 <html>
    <head>
        <meta charset="UTF-8">
-        <title>{% block title %}Welcome!{% endblock %}</title>
-        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
+        <title>{% block title %}MyE&amp;P Team{% endblock %}</title>
+        <link rel="icon" href="{{ asset('favicon.ico') }}" sizes="any">
+        <link rel="icon" href="{{ asset('icon.svg') }}" type="image/svg+xml">
+        <link rel="apple-touch-icon" href="{{ asset('apple-touch-icon.png') }}">
+        <link rel="manifest" href="{{ asset('site.webmanifest') }}">
        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}
@@ -13,5 +16,6 @@
    </head>
    <body class="bg-white font-sans antialiased">
        {% block body %}{% endblock %}
+        {% include '_partials/_flashes.html.twig' %}
    </body>
 </html>
@@ -1,11 +1,36 @@
 {% use 'form_div_layout.html.twig' %}

+{%- block form_row -%}
+    {%- set widget_attr = {} -%}
+    {%- if help is not empty -%}
+        {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
+    {%- endif -%}
+    <div{% with {attr: row_attr} %}{{ block('attributes') }}{% endwith %}>
+        {{- form_label(form) -}}
+        {{- form_errors(form) -}}
+        {{- form_widget(form, widget_attr) -}}
+        {{- form_help(form) -}}
+    </div>
+{%- endblock form_row -%}
+
+{%- block form_errors -%}
+    {%- if errors|length > 0 -%}
+        <ul>
+            {%- for error in errors -%}
+                <li class="text-red-500">{{ error.message }}</li>
+            {%- endfor -%}
+        </ul>
+    {%- endif -%}
+{%- endblock form_errors -%}
+
 {%- block form_widget_simple -%}
    {%- set type = type|default('text') -%}
    {%- if type != 'hidden' -%}
-        {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' mt-2 appearance-none text-slate-900 bg-white rounded-md block w-full px-3 h-10 shadow-sm sm:text-sm focus:outline-none ring-0 placeholder:text-slate-400 focus:ring-1 focus:ring-primary')|trim }) -%}
+        {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' mt-2 appearance-none text-slate-900 bg-white rounded-md block w-full px-3 h-10 shadow-sm sm:text-sm focus:outline-none ring-0 focus:ring-0')|trim }) -%}
        {%- if errors|length -%}
-            {%- set attr = attr|merge({'class': attr.class|default('') ~ ' ring-red-500 placeholder-red-500 focus:ring-red-500' }) -%}
+            {%- set attr = attr|merge({'class': attr.class|default('') ~ ' border-red-500 placeholder-red-500 focus:border-red-500' }) -%}
+        {% else %}
+            {%- set attr = attr|merge({'class': attr.class|default('') ~ ' placeholder:text-slate-400 focus:border-primary' }) -%}
        {%- endif -%}
        {%- if disabled is defined and disabled == true -%}
            {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
@@ -17,10 +42,28 @@
    {%- endif -%}
 {%- endblock form_widget_simple -%}

-{%- block choice_widget_collapsed -%}
-    {%- set attr = attr|merge({'class': attr.class|default('') ~ ' mt-2 appearance-none text-slate-900 bg-white rounded-md block w-full px-3 h-10 shadow-sm sm:text-sm focus:outline-none ring-0 placeholder:text-slate-400 focus:ring-1 focus:ring-primary' }) -%}
+{%- block textarea_widget -%}
+    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' mt-2 appearance-none text-slate-900 bg-white rounded-md block w-full px-3 shadow-sm sm:text-sm focus:outline-none ring-0 focus:ring-0')|trim }) -%}
    {%- if errors|length -%}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' ring-red-500 placeholder-red-500 focus:ring-red-500' }) -%}
+        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' border-red-500 placeholder-red-500 focus:border-red-500' }) -%}
+    {% else %}
+        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' placeholder:text-slate-400 focus:ring-1 focus:ring-primary' }) -%}
+    {%- endif -%}
+    {%- if disabled is defined and disabled == true -%}
+        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
+    {%- endif -%}
+    {{ parent() }}
+    {%- if disabled is defined and disabled == true -%}
+        <input type="hidden" name="{{ form.vars.full_name }}" value="{{ form.vars.value }}">
+    {%- endif -%}
+{%- endblock textarea_widget -%}
+
+{%- block choice_widget_collapsed -%}
+    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' mt-2 appearance-none text-slate-900 bg-white rounded-md block w-full px-3 shadow-sm sm:text-sm focus:outline-none ring-0 focus:ring-0')|trim }) -%}
+    {%- if errors|length -%}
+        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' border-red-500 placeholder-red-500 focus:border-red-500' }) -%}
+    {% else %}
+        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' placeholder:text-slate-400 focus:ring-1 focus:ring-primary' }) -%}
    {%- endif -%}
    {%- if disabled is defined and disabled == true -%}
        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
@@ -0,0 +1,11 @@
+{% extends 'base.html.twig' %}
+
+{% block body %}
+    {% block page_header %}{% include '_partials/_page_header.html.twig' %}{% endblock %}
+    <div class="container py-24">
+        {% block content %}{% endblock %}
+    </div>
+    {% include '_partials/_ajax_modal.html.twig' %}
+    {% include '_partials/_confirmation_modal.html.twig' %}
+    {% include '_partials/_mobile_menu.html.twig' %}
+{% endblock %}
@@ -1,4 +1,4 @@
-{% extends 'base.html.twig' %}
+{% extends 'layout.html.twig' %}

-{% block body %}
+{% block content %}
 {% endblock %}
@@ -1,4 +1,6 @@
-{% extends 'base.html.twig' %}
+{% extends 'layout.html.twig' %}

-{% block body %}
+{% block title %}Mein Dashboard{% endblock %}
+
+{% block content %}
 {% endblock %}
@@ -1,24 +1,115 @@
-{% extends 'base.html.twig' %}
+{% extends 'layout.html.twig' %}

-{% block body %}
+{% block title %}Mein Profil{% endblock %}
+
+{% macro formErrors(form) %}
+    <ul>
+        {% for child in form.children %}
+            {% for error in child.vars.errors %}
+                <li>
+                    {{ child.vars.label }}: {{error.message}}
+                </li>
+            {% endfor %}
+        {%endfor%}
+    </ul>
+{% endmacro %}
+
+{% block content %}
    {{ form_start(form) }}
-    <div class="container">
-        <div class="grid grid-cols-2 gap-8">
-            <div class="flex flex-col space-y-4">
-                {{ form_row(form.academicTitle) }}
-                {{ form_row(form.firstName) }}
-                {{ form_row(form.lastName) }}
-                {{ form_row(form.gender) }}
-                {{ form_row(form.dateOfBirth) }}
-                {{ form_row(form.nationality) }}
-            </div>
-            <div></div>
-            <div>
-                <button type="submit" class="btn">
-                    Aktualisieren
+
+    <div {{ stimulus_controller('tabs', {}, { 'buttonActive': 'btn--secondary' }) }}>
+
+        <div class="grid lg:grid-cols-3 gap-y-8 lg:gap-y-0 lg:gap-x-16">
+            <div class="flex flex-col space-y-2">
+                <button type="button" class="btn" {{ stimulus_target('tabs', 'button') }} {{ stimulus_action('tabs', 'select', null, { 'tab': 0 }) }}>
+                    Persönliche Daten
+                </button>
+                <button type="button" class="btn" {{ stimulus_target('tabs', 'button') }} {{ stimulus_action('tabs', 'select', null, { 'tab': 1 }) }}>
+                    Anschrift/Kontakt
+                </button>
+                <button type="button" class="btn" {{ stimulus_target('tabs', 'button') }} {{ stimulus_action('tabs', 'select', null, { 'tab': 2 }) }}>
+                    Bankverbindung
+                </button>
+                <button type="button" class="btn" {{ stimulus_target('tabs', 'button') }} {{ stimulus_action('tabs', 'select', null, { 'tab': 3 }) }}>
+                    Sonstiges
                </button>
            </div>
+            <div class="lg:col-span-2">
+                {% if not form.vars.valid %}
+                    <div class="max-w-screen-md mx-auto border border-red-500 rounded-md p-4 text-red-500 mb-8">
+                        {{ _self.formErrors(form) }}
+                        {{ _self.formErrors(form.address) }}
+                        {{ _self.formErrors(form.communication) }}
+                        {{ _self.formErrors(form.bankAccount) }}
+                    </div>
+                {%endif%}
+                <div class="pb-8 max-w-screen-md mx-auto" {{ stimulus_target('tabs', 'tab') }}>
+                    <h3 class="text-xl font-bold pb-2">
+                        Persönliche Daten
+                    </h3>
+                    <div class="flex flex-col space-y-4">
+                        {{ form_row(form.salutation) }}
+                        {{ form_row(form.academicTitle) }}
+                        {{ form_row(form.firstName) }}
+                        {{ form_row(form.lastName) }}
+                        {{ form_row(form.gender) }}
+                        {{ form_row(form.dateOfBirth) }}
+                        {{ form_row(form.nationality) }}
+                    </div>
+                </div>
+
+                <div class="pb-8 max-w-screen-md mx-auto" {{ stimulus_target('tabs', 'tab') }}>
+                    <h3 class="text-xl font-bold pb-2">
+                        Anschrift
+                    </h3>
+                    <div class="flex flex-col space-y-4 pb-8">
+                        {{ form_row(form.address.street) }}
+                        {{ form_row(form.address.postCode) }}
+                        {{ form_row(form.address.city) }}
+                        {{ form_row(form.address.country) }}
+                    </div>
+                    <h3 class="text-xl font-bold pb-2">
+                        Kontakt
+                    </h3>
+                    <div class="flex flex-col space-y-4">
+                        {{ form_row(form.communication.email) }}
+                        {{ form_row(form.communication.phone) }}
+                        {{ form_row(form.communication.mobile) }}
+                    </div>
+                </div>
+
+                <div class="pb-8 max-w-screen-md mx-auto" {{ stimulus_target('tabs', 'tab') }}>
+                    <h3 class="text-xl font-bold pb-2">
+                        Bankverbindung
+                    </h3>
+                    <div class="flex flex-col space-y-4">
+                        {{ form_row(form.bankAccount.iban) }}
+                        {{ form_row(form.bankAccount.bic) }}
+                        {{ form_row(form.bankAccount.bank) }}
+                        {{ form_row(form.bankAccount.holder) }}
+                    </div>
+                </div>
+
+                <div class="pb-8 max-w-screen-md mx-auto" {{ stimulus_target('tabs', 'tab') }}>
+                    <h3 class="text-xl font-bold pb-2">
+                        Sonstiges
+                    </h3>
+                    <div class="flex flex-col space-y-4">
+                        {{ form_row(form.taxId) }}
+                        {{ form_row(form.healthInsuranceCompany) }}
+                        {{ form_row(form.remarks) }}
+                    </div>
+                </div>
+
+                <div class="max-w-screen-md mx-auto">
+                    <button type="submit" class="btn">
+                        Aktualisieren
+                    </button>
+                </div>
+
+            </div>
        </div>
+
    </div>
    {{ form_rest(form) }}
    {{ form_end(form) }}
				`@@ -0,0 +1 @@`
				`<svg class="{{ class }}"><use href="{{ asset('build/images/icons.svg') }}#icon-{{ icon }}"/></svg>`