WIP: Improve assignment overview for teamers in mobile view

assets/images/icons.svg

@@ -75,6 +75,12 @@
     <symbol id="icon-mail" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
     </symbol>
+    <symbol id="icon-globe" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
+    </symbol>
+    <symbol id="icon-house" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205l3 1m1.5.5l-1.5-.5M6.75 7.364V3h-3v18m3-13.636l10.5-3.819" />
+    </symbol>
     <symbol id="icon-phone" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
     </symbol>
@@ -161,6 +167,11 @@
         <!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
         <path d="M24 0C10.7 0 0 10.7 0 24S10.7 48 24 48h8V67c0 40.3 16 79 44.5 107.5L158.1 256 76.5 337.5C48 366 32 404.7 32 445v19H24c-13.3 0-24 10.7-24 24s10.7 24 24 24H360c13.3 0 24-10.7 24-24s-10.7-24-24-24h-8V445c0-40.3-16-79-44.5-107.5L225.9 256l81.5-81.5C336 146 352 107.3 352 67V48h8c13.3 0 24-10.7 24-24s-10.7-24-24-24H24zM192 289.9l81.5 81.5C293 391 304 417.4 304 445v19H80V445c0-27.6 11-54 30.5-73.5L192 289.9zm0-67.9l-81.5-81.5C91 121 80 94.6 80 67V48H304V67c0 27.6-11 54-30.5 73.5L192 222.1z"/>
     </symbol>
+    <symbol id="icon-flag-a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><g fill-rule="evenodd"><path fill="#fff" d="M640 480H0V0h640z"/><path fill="#ed2939" d="M640 480H0V320h640zm0-319.9H0V.1h640z"/></g></symbol>
+    <symbol id="icon-flag-ch" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><g fill-rule="evenodd" stroke-width="1pt"><path fill="#d52b1e" d="M0 0h640v480H0z"/><g fill="#fff"><path d="M170 195h300v90H170z"/><path d="M275 90h90v300h-90z"/></g></g></symbol>
+    <symbol id="icon-flag-d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><path fill="#ffce00" d="M0 320h640v160H0z"/><path d="M0 0h640v160H0z"/><path fill="#d00" d="M0 160h640v160H0z"/></symbol>
+    <symbol id="icon-flag-f" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><g fill-rule="evenodd" stroke-width="1pt"><path fill="#fff" d="M0 0h640v480H0z"/><path fill="#00267f" d="M0 0h213.3v480H0z"/><path fill="#f31830" d="M426.7 0H640v480H426.7z"/></g></symbol>
+    <symbol id="icon-flag-i" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><g fill-rule="evenodd" stroke-width="1pt"><path fill="#fff" d="M0 0h640v480H0z"/><path fill="#009246" d="M0 0h213.3v480H0z"/><path fill="#ce2b37" d="M426.7 0H640v480H426.7z"/></g></symbol>
     <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
     <symbol id="icon-spinner" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
         <g fill="none" fill-rule="evenodd" stroke-width="2">

migrations/Version20231020102814.php

@@ -0,0 +1,31 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ */
+final class Version20231020102814 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return '';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // this up() migration is auto-generated, please modify it to your needs
+        $this->addSql('ALTER TABLE destination ADD country VARCHAR(2) DEFAULT NULL');
+    }
+
+    public function down(Schema $schema): void
+    {
+        // this down() migration is auto-generated, please modify it to your needs
+        $this->addSql('ALTER TABLE destination DROP country');
+    }
+}

src/BusProNet/Model/Hotel.php

@@ -12,6 +12,7 @@ class Hotel
     private ?string $street = null;
     private ?string $phone = null;
     private ?string $type = null;
+    private ?string $country = null;
 
     public function getId(): ?int
     {
@@ -109,4 +110,15 @@ class Hotel
         return $this;
     }
 
+    public function getCountry(): ?string
+    {
+        return $this->country;
+    }
+
+    public function setCountry(?string $country): static
+    {
+        $this->country = $country;
+
+        return $this;
+    }
 }

src/BusProNet/ResponseParser.php

@@ -227,6 +227,7 @@ class ResponseParser
                 ->setBusProId($busProId)
                 ->setCode((string) $item->attributes()['code'])
                 ->setName($item->xpath('name') ? (string) $item->xpath('name')[0] : null)
+                ->setCountry($item->xpath('land') ? strtolower((string) $item->xpath('land')[0]) : null)
                 ->setCity($item->xpath('ort') ? (string) $item->xpath('ort')[0] : null)
                 ->setStreet($item->xpath('strasse') ? (string) $item->xpath('strasse')[0] : null)
                 ->setPhone($item->xpath('telefon') ? (string) $item->xpath('telefon')[0] : null)

src/Command/BpnImportCommand.php

@@ -93,6 +93,7 @@ class BpnImportCommand extends Command
                                 'date_to' => $dateTo->format('Y-m-d'),
                                 'product' => $product,
                                 'pickups' => json_encode($datePickups),
+                                'country' => $hotel->getCountry(),
                             ], [
                                 'id' => $id,
                                 'hotel_bus_pro_id' => $hotelBusProId,
@@ -112,6 +113,7 @@ class BpnImportCommand extends Command
                                 'hotel_code' => $hotel->getCode(),
                                 'hotel_bus_pro_id' => $hotelBusProId,
                                 'pickups' => json_encode($datePickups),
+                                'country' => $hotel->getCountry(),
                             ])
                         ;
                         ++$addedCount;

src/Entity/Destination.php

@@ -41,6 +41,9 @@ class Destination
     #[ORM\Column]
     private array $pickups = [];
 
+    #[ORM\Column(length: 2, nullable: true)]
+    private ?string $country = null;
+
     public function __toString(): string
     {
         return sprintf('%s - %s: %s, %s',
@@ -168,4 +171,16 @@ class Destination
     {
         return 0 < count($this->getPickups());
     }
+
+    public function getCountry(): ?string
+    {
+        return $this->country;
+    }
+
+    public function setCountry(?string $country): static
+    {
+        $this->country = $country;
+
+        return $this;
+    }
 }

templates/base.html.twig

@@ -2,6 +2,7 @@
 <html>
     <head>
         <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <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">

templates/teamer/index.html.twig

@@ -17,80 +17,59 @@
             </ul>
         </div>
     {% endif %}
-    <div class="data-table-wrapper">
+
-        <div class="data-table-wrapper__inner">
+    <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-4 pb-2">
-            <table class="data-table">
+        {% for assignment in pagination %}
-                <thead>
+            <div class="flex flex-col justify-between rounded-md border border-gray-200 bg-gray-100 p-4">
-                <tr>
+                <div class="flex flex-col space-y-2 pb-2">
-                    <th>
+                    <div class="flex items-start space-x-2">
-                        {{ knp_pagination_sortable(pagination, 'Einsatz&shy;zeitraum', 'assignment.dateFrom') }}
+                        {{ icon('flag-' ~ assignment.destination.country, 'w-5 h-5 shrink-0') }}
-                    </th>
+                        <span class="flex-1 font-bold">{{ assignment.destination.product }}</span>
-                    <th>
+                    </div>
-                        {{ knp_pagination_sortable(pagination, 'Jobprofil', 'assignment.jobProfile') }}
+                    <div class="flex items-start space-x-2">
-                    </th>
+                        {{ icon('calendar', 'w-5 h-5 shrink-0') }}
-                    <th>
+                        <span class="flex-1">{{ assignment.effectivePeriod.start|date('d.m.Y') }} - {{ assignment.effectivePeriod.end|date('d.m.Y') }}</span>
-                        {{ knp_pagination_sortable(pagination, 'Destination', 'destination.dateFrom') }}
+                    </div>
-                    </th>
+                    <div class="flex items-start space-x-2">
-                    <th>
+                        {{ icon('profile', 'w-5 h-5 shrink-0') }}
-                        {{ knp_pagination_sortable(pagination, 'Bus', 'assignment.pickup') }}
+                        <span class="flex-1">{{ assignment.jobProfile.name }}</span>
-                    </th>
+                    </div>
-                    <th></th>
+                    <div class="flex items-start space-x-2">
-                </tr>
+                        {{ icon('house', 'w-5 h-5 shrink-0') }}
-                </thead>
+                        <span class="flex-1">{{ assignment.destination.hotel }}</span>
-                <tbody>
+                    </div>
-                {% for assignment in pagination %}
+                    {% if assignment.pickup %}
-                    <tr>
+                        <div class="flex items-start space-x-2">
-                        <td>
+                            {{ icon('bus', 'w-5 h-5 shrink-0') }}
-                            {{ assignment.effectivePeriod.start|date('d.m.Y') }} -
+                            <span>{{ assignment.pickup|bpn_pickup_label|default('-') }} {{ assignment.effectivePickupDate ? assignment.effectivePickupDate|date('d.m.Y') : '' }}</span>
-                            <br>
+                        </div>
-                            {{ assignment.effectivePeriod.end|date('d.m.Y') }}
+                    {% endif %}
-                        </td>
+                </div>
-                        <td>
+                <div>
-                            {{ assignment.jobProfile.name }}
+                    {% if assignment.applications|length %}
-                        </td>
+                        {% set icon = 'hourglass' %}
-                        <td>
+                        {% set class = 'bg-yellow-100 text-yellow-800 hover:bg-yellow-50' %}
-                            {{ assignment.destination.product }}
+                        {% set url = path('app_teamer_assignment', { 'uuid': assignment.uuid, 'r': return_url() }) %}
-                            <br>
+                        {% set label = 'in Bearbeitung' %}
-                            {{ assignment.destination.hotel }}
+                    {% elseif assignment.dispositions|length %}
-                        </td>
+                        {% set icon = 'check' %}
-                        <td>
+                        {% set class = 'bg-green-100 text-green-700 hover:bg-green-50' %}
-                            {{ assignment.pickup ? assignment.pickup|bpn_pickup_label|default('-') : '-' }}
+                        {% set url = path('app_teamer_disposition_detail', { 'uuid': assignment.dispositions[0].uuid }) %}
-                            <br>
+                        {% set label = 'eingeteilt' %}
-                            {{ assignment.effectivePickupDate ? assignment.effectivePickupDate|date('d.m.Y') : '' }}
+                    {% else %}
-                        </td>
+                        {% set icon = 'info' %}
-                        <td>
+                        {% set class = 'btn--info' %}
-                            {% if assignment.applications|length %}
+                        {% set url = path('app_teamer_assignment', { 'uuid': assignment.uuid, 'r': return_url() }) %}
-                                {% set icon = 'hourglass' %}
+                        {% set label = 'bewerben' %}
-                                {% set class = 'bg-yellow-100 text-yellow-800 hover:bg-yellow-50' %}
+                    {% endif %}
-                                {% set url = path('app_teamer_assignment', { 'uuid': assignment.uuid, 'r': return_url() }) %}
+                    <a href="{{ url }}"
-                            {% elseif assignment.dispositions|length %}
+                       class="btn btn--small flex items-center space-x-2 {{ class }}">
-                                {% set icon = 'check' %}
+                        {{ icon(icon, 'w-4 h-4') }}
-                                {% set class = 'bg-green-100 text-green-700 hover:bg-green-50' %}
+                        <span>{{ label }}</span>
-                                {% set url = path('app_teamer_disposition_detail', { 'uuid': assignment.dispositions[0].uuid }) %}
+                    </a>
-                            {% else %}
+                </div>
-                                {% set icon = 'info' %}
+            </div>
-                                {% set class = 'btn--info' %}
+        {% endfor %}
-                                {% set url = path('app_teamer_assignment', { 'uuid': assignment.uuid, 'r': return_url() }) %}
-                            {% endif %}
-                            <a href="{{ url }}"
-                               class="btn btn--small {{ class }}">
-                                {{ icon(icon, 'w-4 h-4') }}
-                            </a>
-                        </td>
-                    </tr>
-                {% else %}
-                    <tr>
-                        <td colspan="6">
-                            Keine Daten...
-                        </td>
-                    </tr>
-                {% endfor %}
-                </tbody>
-            </table>
-            {{ knp_pagination_render(pagination) }}
-        </div>
     </div>
-    <a href="{{ path('app_admin_assignment_create') }}" class="btn">
+    {{ knp_pagination_render(pagination) }}
-        Neu
-    </a>
 {% endblock %}