From 3e0353c79bc610cf7a4fc8a05462462d507949bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= Date: Mon, 25 Sep 2023 16:02:53 +0200 Subject: [PATCH] WIP: Implement menu/navigation --- assets/styles/components/menu.css | 24 ++++- config/services.yaml | 38 +++++++- package-lock.json | 2 +- .../Teamer/Disposition/IndexController.php | 18 ++++ .../Disposition/WatchlistController.php | 18 ++++ .../Profile/AvailabilitiesController.php | 18 ++++ .../IndexController.php} | 6 +- .../Teamer/Profile/SkillsController.php | 18 ++++ ...enuBuilder.php => AbstractMenuBuilder.php} | 29 ++---- src/Menu/AdminMenuBuilder.php | 31 +++++++ src/Menu/ManagerMenuBuilder.php | 33 +++++++ src/Menu/TeamerMenuBuilder.php | 92 +++++++++++++++++++ templates/_partials/_menu.html.twig | 13 +++ templates/_partials/_mobile_menu.html.twig | 18 ---- templates/_partials/_page_header.html.twig | 3 +- templates/_partials/_sidebar_menu.html.twig | 68 ++++++++++++++ templates/admin/index.html.twig | 2 +- templates/admin/layout.html.twig | 9 ++ templates/forms.html.twig | 14 +-- templates/layout.html.twig | 29 +++++- templates/manager/layout.html.twig | 9 ++ templates/teamer/index.html.twig | 2 +- templates/teamer/layout.html.twig | 13 +++ templates/teamer/profile.html.twig | 60 ++++++------ 24 files changed, 475 insertions(+), 92 deletions(-) create mode 100644 src/Controller/Teamer/Disposition/IndexController.php create mode 100644 src/Controller/Teamer/Disposition/WatchlistController.php create mode 100644 src/Controller/Teamer/Profile/AvailabilitiesController.php rename src/Controller/Teamer/{ProfileController.php => Profile/IndexController.php} (95%) create mode 100644 src/Controller/Teamer/Profile/SkillsController.php rename src/Menu/{MenuBuilder.php => AbstractMenuBuilder.php} (65%) create mode 100644 src/Menu/AdminMenuBuilder.php create mode 100644 src/Menu/ManagerMenuBuilder.php create mode 100644 src/Menu/TeamerMenuBuilder.php delete mode 100644 templates/_partials/_mobile_menu.html.twig create mode 100644 templates/_partials/_sidebar_menu.html.twig create mode 100644 templates/admin/layout.html.twig create mode 100644 templates/manager/layout.html.twig create mode 100644 templates/teamer/layout.html.twig diff --git a/assets/styles/components/menu.css b/assets/styles/components/menu.css index 7ea260a..253bba7 100644 --- a/assets/styles/components/menu.css +++ b/assets/styles/components/menu.css @@ -1,7 +1,15 @@ -.menu { +.menu--header { @apply flex items-center space-x-4 h-8; } +.menu--main { + @apply flex flex-col divide-y divide-gray-200; +} + +.menu--main > li { + @apply py-4 first:pt-0 last:pb-0; +} + .menu--mobile { @apply flex-col space-x-0 h-auto divide-y divide-gray-200; } @@ -10,7 +18,8 @@ @apply py-4 w-full; } -.menu a { +.menu a, +.menu div { @apply uppercase hover:text-slate-700 text-slate-900 text-sm lg:text-base; } @@ -18,11 +27,20 @@ @apply text-lg; } +.menu ul { + @apply pl-7 pt-1; +} + +.menu ul a { + @apply text-sm; +} + .menu .current > a, .menu .active > a { @apply text-slate-900 font-bold; } -.menu .icon-link { +.menu .icon-link, +.menu .icon-section { @apply flex items-center space-x-2; } diff --git a/config/services.yaml b/config/services.yaml index ee3b5db..45a472b 100644 --- a/config/services.yaml +++ b/config/services.yaml @@ -56,13 +56,47 @@ services: $intlExtension: '@twig.extension.intl' $environment: '%kernel.environment%' - App\Menu\MenuBuilder: + App\Menu\AdminMenuBuilder: arguments: $factory: '@knp_menu.factory' tags: + - name: knp_menu.menu_builder + method: createHeaderMenu + alias: admin_header - name: knp_menu.menu_builder method: createMainMenu - alias: main + alias: admin_main + - name: knp_menu.menu_builder + method: createMobileMenu + alias: admin_mobile + + App\Menu\ManagerMenuBuilder: + arguments: + $factory: '@knp_menu.factory' + tags: + - name: knp_menu.menu_builder + method: createHeaderMenu + alias: manager_header + - name: knp_menu.menu_builder + method: createMainMenu + alias: manager_main + - name: knp_menu.menu_builder + method: createMobileMenu + alias: manager_mobile + + App\Menu\TeamerMenuBuilder: + arguments: + $factory: '@knp_menu.factory' + tags: + - name: knp_menu.menu_builder + method: createHeaderMenu + alias: teamer_header + - name: knp_menu.menu_builder + method: createMainMenu + alias: teamer_main + - name: knp_menu.menu_builder + method: createMobileMenu + alias: teamer_mobile App\Service\Upload\UploadHandler: arguments: diff --git a/package-lock.json b/package-lock.json index c4bca95..14c4ce6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "myep-team", + "name": "html", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/src/Controller/Teamer/Disposition/IndexController.php b/src/Controller/Teamer/Disposition/IndexController.php new file mode 100644 index 0000000..a517a1b --- /dev/null +++ b/src/Controller/Teamer/Disposition/IndexController.php @@ -0,0 +1,18 @@ +render(''); + } +} \ No newline at end of file diff --git a/src/Controller/Teamer/Disposition/WatchlistController.php b/src/Controller/Teamer/Disposition/WatchlistController.php new file mode 100644 index 0000000..9d88c1d --- /dev/null +++ b/src/Controller/Teamer/Disposition/WatchlistController.php @@ -0,0 +1,18 @@ +render(''); + } +} \ No newline at end of file diff --git a/src/Controller/Teamer/Profile/AvailabilitiesController.php b/src/Controller/Teamer/Profile/AvailabilitiesController.php new file mode 100644 index 0000000..1a670c7 --- /dev/null +++ b/src/Controller/Teamer/Profile/AvailabilitiesController.php @@ -0,0 +1,18 @@ +render(''); + } +} \ No newline at end of file diff --git a/src/Controller/Teamer/ProfileController.php b/src/Controller/Teamer/Profile/IndexController.php similarity index 95% rename from src/Controller/Teamer/ProfileController.php rename to src/Controller/Teamer/Profile/IndexController.php index 3225890..db802fd 100644 --- a/src/Controller/Teamer/ProfileController.php +++ b/src/Controller/Teamer/Profile/IndexController.php @@ -1,6 +1,6 @@ render(''); + } +} \ No newline at end of file diff --git a/src/Menu/MenuBuilder.php b/src/Menu/AbstractMenuBuilder.php similarity index 65% rename from src/Menu/MenuBuilder.php rename to src/Menu/AbstractMenuBuilder.php index 3fdc687..b61efcb 100644 --- a/src/Menu/MenuBuilder.php +++ b/src/Menu/AbstractMenuBuilder.php @@ -10,7 +10,7 @@ use Symfony\Component\HttpFoundation\RequestStack; use Symfony\Component\Security\Core\Authentication\Token\SwitchUserToken; use Symfony\Contracts\Translation\TranslatorInterface; -class MenuBuilder +abstract class AbstractMenuBuilder { public function __construct( protected FactoryInterface $factory, @@ -20,42 +20,26 @@ class MenuBuilder ) { } - private function assertMobile(array $options): bool + protected function assertMobile(array $options): bool { return isset($options['mobile']) && true === (bool) $options['mobile']; } - private function createRootElement(bool $isMobile): ItemInterface + protected function createRootElement(string $class): ItemInterface { return $this ->factory->createItem('root') - ->setChildrenAttribute('class', 'menu'.($isMobile ? ' menu--mobile' : '')) + ->setChildrenAttribute('class', $class) ; } - private function getDefaultRouteParameters(string $parameter = 'id', string $default = '0'): array + protected function getDefaultRouteParameters(string $parameter = 'id', string $default = '0'): array { return [$parameter => $this->requestStack->getMainRequest()->get($parameter, $default)]; } - public function createMainMenu(array $options): ItemInterface + protected function addLogoutItem(ItemInterface $menu, bool $isMobile = false): void { - /** @var User $user */ - $user = $this->security->getUser(); - $userLabel = $user->getUserIdentifier(); - - $isMobile = $this->assertMobile($options); - $menu = $this->createRootElement($isMobile); - - if ($this->security->isGranted('ROLE_TEAMER')) { - $menu - ->addChild('Profil', ['route' => 'app_teamer_profile']) - ->setLinkAttribute('title', 'Benutzer: '.$userLabel) - ->setExtra('icon', 'user') - ->setExtra('icon_only', false === $isMobile) - ; - } - $token = $this->security->getToken(); if ($token instanceof SwitchUserToken) { @@ -85,6 +69,5 @@ class MenuBuilder ; } - return $menu; } } diff --git a/src/Menu/AdminMenuBuilder.php b/src/Menu/AdminMenuBuilder.php new file mode 100644 index 0000000..073f7f9 --- /dev/null +++ b/src/Menu/AdminMenuBuilder.php @@ -0,0 +1,31 @@ +createRootElement(); + $this->addLogoutItem($menu); + + return $menu; + } + + public function createMainMenu(array $options): ItemInterface + { + $menu = $this->createRootElement(); + + return $menu; + } + + public function createMobileMenu(array $options): ItemInterface + { + $menu = $this->createRootElement(true); + $this->addLogoutItem($menu, true); + + return $menu; + } +} \ No newline at end of file diff --git a/src/Menu/ManagerMenuBuilder.php b/src/Menu/ManagerMenuBuilder.php new file mode 100644 index 0000000..4c2dd9f --- /dev/null +++ b/src/Menu/ManagerMenuBuilder.php @@ -0,0 +1,33 @@ +createRootElement(); + + $this->addLogoutItem($menu); + + return $menu; + } + + public function createMainMenu(array $options): ItemInterface + { + $menu = $this->createRootElement(); + + return $menu; + } + + public function createMobileMenu(array $options): ItemInterface + { + $menu = $this->createRootElement(true); + + $this->addLogoutItem($menu, true); + + return $menu; + } +} \ No newline at end of file diff --git a/src/Menu/TeamerMenuBuilder.php b/src/Menu/TeamerMenuBuilder.php new file mode 100644 index 0000000..9ccb28f --- /dev/null +++ b/src/Menu/TeamerMenuBuilder.php @@ -0,0 +1,92 @@ +createRootElement('menu menu--header'); + + $this->addLogoutItem($menu); + + return $menu; + } + + public function createMainMenu(array $options): ItemInterface + { + $menu = $this->createRootElement('menu menu--main'); + + + $menu + ->addChild('Einsatzübersicht', ['route' => 'app_teamer_disposition_index']) + ->setLinkAttributes([ + 'title' => 'Einsatzübersicht', + 'class' => 'icon-link', + ]) + ->setExtra('icon', 'calendar') + ->setExtra('icon_only', false) + ; + + + $profileMenu = $menu + ->addChild('Mein Profil') + ->setExtra('icon', 'user') + ->setExtra('icon_only', false) + ; + $profileMenu + ->addChild('Stammdaten und Foto', ['route' => 'app_teamer_profile_index']) + ->setLinkAttributes([ + 'title' => 'Mein Profil', + ]) + ; + $profileMenu + ->addChild('Jobprofile & Skills', ['route' => 'app_teamer_profile_skills']) + ->setLinkAttributes([ + 'title' => 'Jobprofile & Skills', + ]) + ; + $profileMenu + ->addChild('Meine Verfügbarkeit', ['route' => 'app_teamer_profile_availabilities']) + ->setLinkAttributes([ + 'title' => 'Meine Verfügbarkeit', + ]) + ; + + + $dispositionMenu = $menu + ->addChild('Meine Einsätze') + ->setExtra('icon', 'calendar') + ->setExtra('icon_only', false) + ; + $dispositionMenu + ->addChild('Merkliste', ['route' => 'app_teamer_disposition_watchlist']) + ->setLinkAttributes([ + 'title' => 'Merkliste', + ]) + ; + + return $menu; + } + + public function createMobileMenu(array $options): ItemInterface + { + $menu = $this->createRootElement('menu menu--mobile'); + + $menu + ->addChild('Profil', ['route' => 'app_teamer_profile_index']) + ->setLinkAttributes([ + 'title' => 'Mein Profil', + 'class' => 'icon-link', + ]) + ->setExtra('icon', 'user') + ->setExtra('icon_only', false) + ; + + $this->addLogoutItem($menu, true); + + return $menu; + } +} \ No newline at end of file diff --git a/templates/_partials/_menu.html.twig b/templates/_partials/_menu.html.twig index e42c3f7..3c9ec3b 100644 --- a/templates/_partials/_menu.html.twig +++ b/templates/_partials/_menu.html.twig @@ -12,3 +12,16 @@ {% endif %} {% endapply %} {% endblock %} + +{% block spanElement %} +
+ {% 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 %} + {{ item.label|raw }} + {% endif %} + {% else %} + {{ item.label|raw }} + {% endif %} +
+{% endblock %} diff --git a/templates/_partials/_mobile_menu.html.twig b/templates/_partials/_mobile_menu.html.twig deleted file mode 100644 index 888c11a..0000000 --- a/templates/_partials/_mobile_menu.html.twig +++ /dev/null @@ -1,18 +0,0 @@ -
-
-
- - -
-
- {% set mobileMenu = knp_menu_get('main', [], { 'mobile': true }) %} - {{ knp_menu_render(mobileMenu, { 'firstClass': null, 'lastClass': null, 'ancestorClass': 'active', 'compressed': true }) }} -
-
-
diff --git a/templates/_partials/_page_header.html.twig b/templates/_partials/_page_header.html.twig index 9c8b551..3238eea 100644 --- a/templates/_partials/_page_header.html.twig +++ b/templates/_partials/_page_header.html.twig @@ -6,8 +6,7 @@ + + + + +
  • +
    + + + +
    +
    • +
  • + Calendar +
    • +
  • + Documents +
    • +
  • + Reports +
    • + + + diff --git a/templates/admin/index.html.twig b/templates/admin/index.html.twig index 19aa1c4..4415abf 100644 --- a/templates/admin/index.html.twig +++ b/templates/admin/index.html.twig @@ -1,4 +1,4 @@ -{% extends 'layout.html.twig' %} +{% extends 'admin/layout.html.twig' %} {% block content %} {% endblock %} \ No newline at end of file diff --git a/templates/admin/layout.html.twig b/templates/admin/layout.html.twig new file mode 100644 index 0000000..33b8ec7 --- /dev/null +++ b/templates/admin/layout.html.twig @@ -0,0 +1,9 @@ +{% extends 'layout.html.twig' %} + +{% block header_menu %} + {{ knp_menu_render(knp_menu_get('admin_header'), { 'firstClass': null, 'lastClass': null, 'ancestorClass': 'active', 'compressed': true }) }} +{% endblock %} + +{% block mobile_menu %} + {{ knp_menu_render(knp_menu_get('admin_mobile'), { 'firstClass': null, 'lastClass': null, 'ancestorClass': 'active', 'compressed': true }) }} +{% endblock %} \ No newline at end of file diff --git a/templates/forms.html.twig b/templates/forms.html.twig index cdaa322..fd5e589 100644 --- a/templates/forms.html.twig +++ b/templates/forms.html.twig @@ -35,11 +35,11 @@ {%- 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 focus:ring-0')|trim }) -%} + {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6')|trim }) -%} {%- if errors|length -%} - {%- set attr = attr|merge({'class': attr.class|default('') ~ ' border-red-500 placeholder-red-500 focus:border-red-500' }) -%} + {%- set attr = attr|merge({'class': attr.class|default('') ~ ' ring-red-500 placeholder-red-500 focus:ring-red-500' }) -%} {% else %} - {%- set attr = attr|merge({'class': attr.class|default('') ~ ' placeholder:text-slate-400 focus:border-primary' }) -%} + {%- set attr = attr|merge({'class': attr.class|default('') ~ ' placeholder:text-slate-400 focus:ring-primary' }) -%} {%- endif -%} {%- if disabled is defined and disabled == true -%} {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%} @@ -52,9 +52,9 @@ {%- endblock form_widget_simple -%} {%- 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 }) -%} + {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6')|trim }) -%} {%- if errors|length -%} - {%- set attr = attr|merge({'class': attr.class|default('') ~ ' border-red-500 placeholder-red-500 focus:border-red-500' }) -%} + {%- set attr = attr|merge({'class': attr.class|default('') ~ ' ring-red-500 placeholder-red-500 focus:ring-red-500' }) -%} {% else %} {%- set attr = attr|merge({'class': attr.class|default('') ~ ' placeholder:text-slate-400 focus:ring-1 focus:ring-primary' }) -%} {%- endif -%} @@ -68,9 +68,9 @@ {%- 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 }) -%} + {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6')|trim }) -%} {%- if errors|length -%} - {%- set attr = attr|merge({'class': attr.class|default('') ~ ' border-red-500 placeholder-red-500 focus:border-red-500' }) -%} + {%- set attr = attr|merge({'class': attr.class|default('') ~ ' ring-red-500 placeholder-red-500 focus:ring-red-500' }) -%} {% else %} {%- set attr = attr|merge({'class': attr.class|default('') ~ ' placeholder:text-slate-400 focus:ring-1 focus:ring-primary' }) -%} {%- endif -%} diff --git a/templates/layout.html.twig b/templates/layout.html.twig index f0a59c6..72d0292 100644 --- a/templates/layout.html.twig +++ b/templates/layout.html.twig @@ -1,11 +1,32 @@ {% extends 'base.html.twig' %} {% block body %} - {% block page_header %}{% include '_partials/_page_header.html.twig' %}{% endblock %} -
    - {% block content %}{% endblock %} +
    +
    + My E&P Team +
    + {% include '_partials/_sidebar_menu.html.twig' %} +
    + {% block content %}{% endblock %} +
    {% include '_partials/_ajax_modal.html.twig' %} {% include '_partials/_confirmation_modal.html.twig' %} - {% include '_partials/_mobile_menu.html.twig' %} +
    +
    +
    + + +
    +
    + {% block mobile_menu %}{% endblock %} +
    +
    +
    {% endblock %} \ No newline at end of file diff --git a/templates/manager/layout.html.twig b/templates/manager/layout.html.twig new file mode 100644 index 0000000..bae5209 --- /dev/null +++ b/templates/manager/layout.html.twig @@ -0,0 +1,9 @@ +{% extends 'layout.html.twig' %} + +{% block header_menu %} + {{ knp_menu_render(knp_menu_get('manager_header'), { 'firstClass': null, 'lastClass': null, 'ancestorClass': 'active', 'compressed': true }) }} +{% endblock %} + +{% block mobile_menu %} + {{ knp_menu_render(knp_menu_get('manager_mobile'), { 'firstClass': null, 'lastClass': null, 'ancestorClass': 'active', 'compressed': true }) }} +{% endblock %} \ No newline at end of file diff --git a/templates/teamer/index.html.twig b/templates/teamer/index.html.twig index a414533..ee4781c 100644 --- a/templates/teamer/index.html.twig +++ b/templates/teamer/index.html.twig @@ -1,4 +1,4 @@ -{% extends 'layout.html.twig' %} +{% extends 'teamer/layout.html.twig' %} {% block title %}Mein Dashboard{% endblock %} diff --git a/templates/teamer/layout.html.twig b/templates/teamer/layout.html.twig new file mode 100644 index 0000000..974a8d7 --- /dev/null +++ b/templates/teamer/layout.html.twig @@ -0,0 +1,13 @@ +{% extends 'layout.html.twig' %} + +{% block header_menu %} + {{ knp_menu_render(knp_menu_get('teamer_header'), { 'firstClass': null, 'lastClass': null, 'ancestorClass': 'active', 'compressed': true }) }} +{% endblock %} + +{% block main_menu %} + {{ knp_menu_render(knp_menu_get('teamer_main'), { 'firstClass': null, 'lastClass': null, 'ancestorClass': 'active', 'compressed': true }) }} +{% endblock %} + +{% block mobile_menu %} + {{ knp_menu_render(knp_menu_get('teamer_mobile'), { 'firstClass': null, 'lastClass': null, 'ancestorClass': 'active', 'compressed': true }) }} +{% endblock %} \ No newline at end of file diff --git a/templates/teamer/profile.html.twig b/templates/teamer/profile.html.twig index 49a9691..bc5c13e 100644 --- a/templates/teamer/profile.html.twig +++ b/templates/teamer/profile.html.twig @@ -1,4 +1,4 @@ -{% extends 'layout.html.twig' %} +{% extends 'teamer/layout.html.twig' %} {% block title %}Mein Profil{% endblock %} @@ -17,33 +17,41 @@ {% block content %} {{ form_start(form) }} -
    +
    -
    - - - - -
    +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    {% if not form.vars.valid %} -
    +
    {{ _self.formErrors(form) }} {{ _self.formErrors(form.address) }} {{ _self.formErrors(form.communication) }} {{ _self.formErrors(form.bankAccount) }}
    {% elseif errors|length > 0 %} -
    +
      {% for error in errors %}
    • @@ -53,7 +61,7 @@
    {% endif %} -
    +

    Persönliche Daten

    @@ -68,7 +76,7 @@
    -
    +

    Anschrift

    @@ -88,7 +96,7 @@
    -
    +

    Bankverbindung

    @@ -100,7 +108,7 @@
    -
    +

    Sonstiges

    @@ -133,11 +141,9 @@
    -
    - -
    +