WIP: Extend and improve profile editing
This commit is contained in:
Björn Fromme
@@ -1,16 +1,38 @@
|
||||
<div {{ stimulus_controller('upload-collection', {
|
||||
'endpointUpload': endpoint_upload,
|
||||
'endpointDelete': path('app_upload_delete'),
|
||||
'maxFiles': 1500,
|
||||
'maxFilesize': 1000,
|
||||
'acceptedFiles': null,
|
||||
'chunking': true,
|
||||
'params': upload_session_params,
|
||||
'maxFiles': max_files|default(10),
|
||||
'maxFilesize': max_filesize|default(1),
|
||||
'acceptedFiles': accepted_files|default(null),
|
||||
'params': upload_session_params|default(null),
|
||||
'language': {
|
||||
'fileTooBig': 'uploader.file_too_big'|trans({ '{maxFilesize}': 1000 }),
|
||||
'fileTooBig': 'uploader.file_too_big'|trans({ '%maxFilesize%': 1 }),
|
||||
'invalidFileType': 'uploader.invalid_file_type'|trans,
|
||||
'maxFilesExceeded': 'uploader.max_files_exceeded'|trans({ '{maxFiles}': 1500 })
|
||||
'maxFilesExceeded': 'uploader.max_files_exceeded'|trans({ '%maxFiles%': 10 })
|
||||
}
|
||||
}) }}>
|
||||
<div {{ stimulus_target('upload-collection', 'dropzone') }} class="dropzone"></div>
|
||||
<div {{ stimulus_target('upload-collection', 'dropzone') }} class="w-full flex flex-col space-y-4">
|
||||
<div class="border border-dashed border-gray-400 rounded flex flex-col justify-center items-center p-4 pointer-events-none">
|
||||
{{ icon('upload', 'w-6 h-6') }}
|
||||
<span class="block text-sm text-center">{{ 'uploader.drop_files'|trans }} <strong>{{ 'uploader.click_here'|trans }}</strong></span>
|
||||
</div>
|
||||
<div class="border border-red-500 rounded-md p-4 text-red-500 hidden" {{ stimulus_target('upload-collection', 'errors') }}></div>
|
||||
<template {{ stimulus_target('upload-collection', 'previewTemplate') }}>
|
||||
<div class="bg-gray-100 border rounded p-2">
|
||||
<div class="pb-2">
|
||||
<span class="block bg-gray-400 h-1 w-0" data-dz-uploadprogress></span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 px-2">
|
||||
<img data-dz-thumbnail
|
||||
src="{{ '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m6.75 12l-3-3m0 0l-3 3m3-3v6m-1.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>'|data_uri }}"
|
||||
class="block h-8 w-auto"
|
||||
alt="Upload">
|
||||
<span class="flex-1" data-dz-name></span>
|
||||
<button type="button" data-dz-remove>
|
||||
{{ icon('delete', 'w-6 h-6 pointer-events-none') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,15 +6,24 @@
|
||||
<a href="{{ path(app.user.defaultRoute) }}">
|
||||
<img class="h-8 w-auto" src="{{ asset('build/images/logo.svg') }}" alt="My E&P Team">
|
||||
</a>
|
||||
<a href="{{ path('app_security_logout') }}" class="hidden lg:block">
|
||||
{{ icon('logout', 'w-8 h-8 text-gray-700') }}
|
||||
</a>
|
||||
<button type="button"
|
||||
class="lg:hidden"
|
||||
{{ stimulus_controller('mobilenav', [], [], { 'mobilenav': '#mobilenav' }) }}
|
||||
{{ stimulus_action('mobilenav', 'trigger', null, { 'mode': 'open' }) }}>
|
||||
{{ icon('menu', 'w-8 h-8 text-gray-700') }}
|
||||
</button>
|
||||
<div class="flex items-center space-x-4">
|
||||
{% if app.user.teamer.photo %}
|
||||
<a href="{{ path('app_teamer_profile_index') }}" title="Mein Profil">
|
||||
<img src="{{ asset(teamer.photo.filename | imagine_filter('profile')) }}"
|
||||
class="h-8 w-auto rounded-full border-2 border-primary"
|
||||
alt="{{ teamer.firstName }}">
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="{{ path('app_security_logout') }}" class="hidden lg:block">
|
||||
{{ icon('logout', 'w-8 h-8 text-gray-700') }}
|
||||
</a>
|
||||
<button type="button"
|
||||
class="lg:hidden"
|
||||
{{ stimulus_controller('mobilenav', [], [], { 'mobilenav': '#mobilenav' }) }}
|
||||
{{ stimulus_action('mobilenav', 'trigger', null, { 'mode': 'open' }) }}>
|
||||
{{ icon('menu', 'w-8 h-8 text-gray-700') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden lg:block">
|
||||
{% block main_menu %}{% endblock %}
|
||||
|
||||
@@ -7,13 +7,30 @@
|
||||
{% for child in form.children %}
|
||||
{% for error in child.vars.errors %}
|
||||
<li>
|
||||
{{error.message}}
|
||||
{{ error.message }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
{%endfor%}
|
||||
{% for error in form.vars.errors %}
|
||||
<li>
|
||||
{{ error.message }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro collectionRow(form) %}
|
||||
<div {{ stimulus_target('form-collection', 'field') }}>
|
||||
<div class="flex items-center space-x-4">
|
||||
{{ form_widget(form) }}
|
||||
<button type="button" {{ stimulus_action('form-collection', 'removeItem') }}>
|
||||
{{ icon('delete', 'w-4 h-4 mt-2 pointer-events-none') }}
|
||||
</button>
|
||||
</div>
|
||||
{{ form_errors(form) }}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% block content %}
|
||||
{{ form_start(form) }}
|
||||
|
||||
@@ -41,7 +58,12 @@
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-10 w-full text-left text-sm leading-6 font-semibold text-gray-700" {{ stimulus_target('tabs', 'button') }} {{ stimulus_action('tabs', 'select', null, { 'tab': 3 }) }}>
|
||||
Sonstiges/Foto
|
||||
Sonstiges
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-10 w-full text-left text-sm leading-6 font-semibold text-gray-700" {{ stimulus_target('tabs', 'button') }} {{ stimulus_action('tabs', 'select', null, { 'tab': 4 }) }}>
|
||||
Foto
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -70,6 +92,7 @@
|
||||
Persönliche Daten
|
||||
</h2>
|
||||
<div class="flex flex-col space-y-4">
|
||||
{{ form_row(form.status) }}
|
||||
{{ form_row(form.salutation) }}
|
||||
{{ form_row(form.academicTitle) }}
|
||||
{{ form_row(form.firstName) }}
|
||||
@@ -119,30 +142,48 @@
|
||||
<div class="flex flex-col space-y-4 pb-8">
|
||||
{{ form_row(form.taxId) }}
|
||||
{{ form_row(form.healthInsuranceCompany) }}
|
||||
{{ form_row(form.language) }}
|
||||
{{ form_row(form.size) }}
|
||||
{{ form_row(form.remarks) }}
|
||||
</div>
|
||||
|
||||
<div {{ stimulus_controller('form-collection', { 'prototype': _self.collectionRow(form.pickups.vars.prototype)|json_encode }) }}>
|
||||
<h4 class="font-bold">
|
||||
Buszustiege
|
||||
</h4>
|
||||
<div {{ stimulus_target('form-collection', 'fields')}} class="flex flex-col space-y-4 mb-4">
|
||||
{% do form.pickups.setRendered %}
|
||||
{%- for pickup in form.pickups -%}{{- _self.collectionRow(pickup) -}}{%- endfor -%}
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<button type="button"
|
||||
{{ stimulus_action('form-collection', 'addItem') }}
|
||||
title="Zustieg hinzufügen">
|
||||
{{ icon('plus', 'w-4 h-4 pointer-events-none') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pb-8" {{ stimulus_target('tabs', 'tab') }}>
|
||||
|
||||
{% if teamer.photo %}
|
||||
<div class="pb-8">
|
||||
<h2 class="text-xl font-bold pb-2">
|
||||
Mein Foto
|
||||
</h2>
|
||||
<img src="{{ asset(teamer.photo.filename | imagine_filter('profile')) }}"
|
||||
class="w-48 h-auto border-2 border-primary"
|
||||
alt="{{ teamer.firstName }}">
|
||||
</div>
|
||||
{% endif %}
|
||||
<h2 class="text-xl font-bold pb-2">
|
||||
Fotoupload
|
||||
</h2>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
{% include '_partials/_upload_collection_form.html.twig' with {
|
||||
'endpoint_upload': path('_uploader_upload_photo'),
|
||||
'upload_session_params': form.vars.upload_session_params,
|
||||
} %}
|
||||
</div>
|
||||
<div>
|
||||
{% if teamer.photo %}
|
||||
<img src="{{ asset(teamer.photo.filename | imagine_filter('profile')) }}"
|
||||
class="w-full h-auto rounded-full border-2 border-primary"
|
||||
alt="{{ teamer.firstName }}">
|
||||
{% else %}
|
||||
<svg class="w-full h-auto text-gray-300" viewBox="0 0 10 10" fill="currentColor">
|
||||
<circle r="5" cx="5" cy="5"/>
|
||||
</svg>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% include '_partials/_upload_collection_form.html.twig' with {
|
||||
'endpoint_upload': path('_uploader_upload_photo'),
|
||||
'upload_session_params': form.vars.upload_session_params,
|
||||
} %}
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn">
|
||||
|
||||
Reference in New Issue
Block a user