sprint_planer_web/views/sprints/_task_list.twig

{# Shared task list section used by both views/sprints/show.twig and views/sprints/present.twig.
   The owning template provides: sprint, currentUser, sprintWorkers, tasks, taskGrid,
   statusGrid, ownerChoices, taskStatusEnabled. #}
{% set TaskAssignment_STATUSES = constant('App\\Domain\\TaskAssignment::STATUSES') %}
{% set STATUS_ZUGEWIESEN = constant('App\\Domain\\TaskAssignment::STATUS_ZUGEWIESEN') %}

<section class="rounded-lg border bg-white {% if isBeamer|default(false) %}m-2 {% endif %}dark:bg-slate-800 dark:border-slate-700"
         data-task-section
         data-task-status-enabled="{{ taskStatusEnabled ? '1' : '0' }}"
         data-assignment-slider-max="{{ assignmentSliderMax|default(10) }}"
         data-sprint-choices="{{ sprintChoices|default([])|json_encode|e('html_attr') }}">
    <div class="rounded-t-lg px-4 py-3 border-b bg-slate-50 flex flex-wrap items-center gap-2 dark:bg-slate-700 dark:border-slate-700">
        <h2 class="text-sm font-semibold text-slate-700 uppercase tracking-wider dark:text-slate-200">Tasks</h2>

        <div class="ml-auto flex flex-wrap items-center gap-2">
            <button type="button" data-reset-filters
                    class="hidden rounded border border-slate-300 px-2 py-1 text-sm bg-white text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700">
                Reset
            </button>

            <input type="search" data-task-search placeholder="Search…"
                   class="rounded border border-slate-300 px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:focus:ring-slate-500">

            <select data-prio-filter
                    class="rounded border border-slate-300 px-2 py-1 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:focus:ring-slate-500">
                <option value="">All prios</option>
                <option value="1">Prio 1 only</option>
                <option value="2">Prio 2 only</option>
            </select>

            <div class="relative" data-owner-filter-root>
                <button type="button" data-owner-filter-trigger
                        class="rounded border border-slate-300 px-2 py-1 text-sm bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700">
                    Owners <span data-owner-filter-count class="text-slate-500 dark:text-slate-400"></span>
                </button>
                <div data-owner-filter-dropdown
                     class="hidden absolute right-0 z-20 mt-1 w-56 rounded-md border border-slate-200 bg-white shadow-lg dark:bg-slate-800 dark:border-slate-700">
                    <div class="px-3 py-2 text-xs text-slate-500 flex items-center justify-between dark:text-slate-400">
                        <span>Owner</span>
                        <button type="button" data-owner-filter-clear
                                class="text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300">Clear</button>
                    </div>
                    <div class="max-h-64 overflow-y-auto">
                        <label class="flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-700">
                            <input type="checkbox" data-owner-filter-opt value="__none__"
                                   class="rounded border-slate-300 dark:border-slate-600">
                            <span class="text-slate-500 italic dark:text-slate-400">No owner</span>
                        </label>
                        {% for ow in ownerChoices %}
                            <label class="flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-700">
                                <input type="checkbox" data-owner-filter-opt value="{{ ow.id }}"
                                       class="rounded border-slate-300 dark:border-slate-600">
                                <span>{{ ow.name }}</span>
                            </label>
                        {% endfor %}
                    </div>
                </div>
            </div>

            {% if taskStatusEnabled %}
            <div class="relative" data-status-filter-root>
                <button type="button" data-status-filter-trigger
                        class="rounded border border-slate-300 px-2 py-1 text-sm bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700">
                    Status <span data-status-filter-count class="text-slate-500 dark:text-slate-400"></span>
                </button>
                <div data-status-filter-dropdown
                     class="hidden absolute right-0 z-20 mt-1 w-56 rounded-md border border-slate-200 bg-white shadow-lg dark:bg-slate-800 dark:border-slate-700">
                    <div class="px-3 py-2 text-xs text-slate-500 flex items-center justify-between dark:text-slate-400">
                        <span>Status</span>
                        <button type="button" data-status-filter-clear
                                class="text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300">Clear</button>
                    </div>
                    <div class="max-h-64 overflow-y-auto">
                        {% for key, meta in {
                            'zugewiesen':    ['Zugewiesen',    'border border-slate-300 dark:border-slate-600'],
                            'gestartet':     ['Gestartet',     'bg-yellow-300 dark:bg-yellow-500'],
                            'abgeschlossen': ['Abgeschlossen', 'bg-green-300 dark:bg-green-500'],
                            'abgebrochen':   ['Abgebrochen',   'bg-red-300 dark:bg-red-500'],
                        } %}
                            <label class="flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-700">
                                <input type="checkbox" data-status-filter-opt value="{{ key }}"
                                       class="rounded border-slate-300 dark:border-slate-600">
                                <span class="inline-block h-3 w-3 rounded {{ meta[1] }}"></span>
                                <span>{{ meta[0] }}</span>
                            </label>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}

            <div class="flex items-center gap-1" data-focus-filter-root>
                <label for="data-focus-select" class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">Focus</label>
                <select id="data-focus-select" data-focus-select
                        class="rounded border border-slate-300 px-2 py-1 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:focus:ring-slate-500">
                    <option value="">All workers</option>
                    {% for sw in sprintWorkers|sort((a, b) => a.workerName <=> b.workerName) %}
                        <option value="{{ sw.id }}">{{ sw.workerName }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="relative" data-columns-root>
                <button type="button" data-columns-trigger
                        class="rounded border border-slate-300 px-2 py-1 text-sm bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700">
                    Columns
                </button>
                <div data-columns-dropdown
                     class="hidden absolute right-0 z-20 mt-1 w-56 rounded-md border border-slate-200 bg-white shadow-lg dark:bg-slate-800 dark:border-slate-700">
                    <div class="px-3 py-2 text-xs text-slate-500 dark:text-slate-400">Show columns</div>
                    <div class="max-h-64 overflow-y-auto">
                        <label class="flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-700">
                            <input type="checkbox" data-column-opt value="owner" checked class="rounded border-slate-300 dark:border-slate-600">
                            <span>Owner</span>
                        </label>
                        <label class="flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-700">
                            <input type="checkbox" data-column-opt value="prio"  checked class="rounded border-slate-300 dark:border-slate-600">
                            <span>Prio</span>
                        </label>
                        <label class="flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-700">
                            <input type="checkbox" data-column-opt value="tot"   checked class="rounded border-slate-300 dark:border-slate-600">
                            <span>Tot</span>
                        </label>
                        {% for sw in sprintWorkers %}
                            <label class="flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-700">
                                <input type="checkbox" data-column-opt value="sw-{{ sw.id }}" checked class="rounded border-slate-300 dark:border-slate-600">
                                <span>{{ sw.workerName }}</span>
                            </label>
                        {% endfor %}
                    </div>
                </div>
            </div>

            {% if currentUser.isAdmin %}
                <button type="button" data-add-task
                        class="rounded bg-slate-900 text-white px-3 py-1 text-sm font-medium hover:bg-slate-800 dark:bg-slate-700 dark:hover:bg-slate-600">
                    + Add task
                </button>
            {% endif %}
        </div>
    </div>

    <div class="overflow-x-auto rounded-b-lg">
        <table class="min-w-full text-sm" data-task-table>
            <thead class="bg-slate-50 text-slate-600 text-xs uppercase tracking-wider dark:bg-slate-700 dark:text-slate-300">
                <tr>
                    <th class="w-6 px-2 py-2"></th>
                    <th class="text-left px-2 py-2 font-semibold cursor-pointer select-none whitespace-nowrap"
                        data-sort-col="title">Task <span class="sort-ind opacity-30">↕</span></th>
                    <th class="text-left px-2 py-2 font-semibold cursor-pointer select-none whitespace-nowrap"
                        data-sort-col="owner" data-col="owner">Owner <span class="sort-ind opacity-30">↕</span></th>
                    <th class="text-center px-2 py-2 font-semibold cursor-pointer select-none whitespace-nowrap"
                        data-sort-col="prio" data-col="prio">Prio <span class="sort-ind opacity-30">↕</span></th>
                    <th class="text-center px-2 py-2 font-semibold cursor-pointer select-none whitespace-nowrap"
                        data-sort-col="tot" data-col="tot">Tot <span class="sort-ind opacity-30">↕</span></th>
                    {% for sw in sprintWorkers %}
                        <th class="text-center px-2 py-2 font-semibold cursor-pointer select-none whitespace-nowrap"
                            data-sort-col="sw-{{ sw.id }}" data-col="sw-{{ sw.id }}">
                            <span class="beamer-th-content">
                                {{ sw.workerName }}
                                <span class="sort-ind opacity-30">↕</span>
                            </span>
                        </th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100 dark:divide-slate-700" data-task-tbody>
                {% if tasks is empty %}
                    <tr data-empty-tasks>
                        <td colspan="{{ 5 + sprintWorkers|length }}" class="px-3 py-8 text-center text-slate-500 text-sm dark:text-slate-400">
                            No tasks yet.
                            {% if currentUser.isAdmin %}
                                Click <b>+ Add task</b> to start.
                            {% endif %}
                        </td>
                    </tr>
                {% else %}
                    {% for t in tasks %}
                        {% set assign = taskGrid[t.id]|default({}) %}
                        {% set tot = 0 %}
                        {% for v in assign %}{% set tot = tot + v %}{% endfor %}
                        {% set links = linkedMap[t.id]|default([]) %}
                        <tr data-task-row
                            class="hover:bg-slate-50 dark:hover:bg-slate-700"
                            data-task-id="{{ t.id }}"
                            data-prio="{{ t.priority }}"
                            data-owner="{{ t.ownerWorkerId is not null ? t.ownerWorkerId : '' }}"
                            data-sort-order="{{ t.sortOrder }}"
                            data-description="{{ t.description }}"
                            data-url="{{ t.url }}"
                            data-task-title="{{ t.title }}"
                            data-links="{{ links|json_encode|e('html_attr') }}">
                            <td class="px-2 py-1">
                                <button type="button" data-task-menu-trigger
                                        class="task-menu-trigger inline-flex items-center justify-center w-6 h-6 rounded text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400"
                                        aria-haspopup="true" aria-expanded="false"
                                        aria-label="Task actions">
                                    <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
                                        <line x1="2" y1="4"  x2="14" y2="4"  stroke="currentColor" stroke-width="2"/>
                                        <line x1="2" y1="8"  x2="14" y2="8"  stroke="currentColor" stroke-width="2"/>
                                        <line x1="2" y1="12" x2="14" y2="12" stroke="currentColor" stroke-width="2"/>
                                    </svg>
                                </button>
                            </td>
                            <td class="px-2 py-1 min-w-[14rem]">
                                <div class="flex items-center gap-1.5">
                                    {% if currentUser.isAdmin %}
                                        <input type="text" data-title value="{{ t.title }}"
                                               class="flex-1 rounded border border-slate-200 px-2 py-1 focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:focus:ring-slate-500">
                                    {% else %}
                                        <span class="flex-1">{{ t.title }}</span>
                                    {% endif %}

                                    <a data-task-url-link href="{{ t.url }}"
                                       target="_blank" rel="noopener noreferrer"
                                       class="task-url-link inline-flex items-center justify-center w-5 h-5 rounded text-blue-600 hover:bg-slate-100 dark:text-blue-400 dark:hover:bg-slate-700{% if t.url == '' %} hidden{% endif %}"
                                       title="Open task link"
                                       aria-label="Open task link">
                                        <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true">
                                            <path d="M9 2h5v5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M14 2L7 9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M12 9v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                    </a>
                                </div>
                            </td>
                            <td class="px-2 py-1" data-col="owner">
                                {% if currentUser.isAdmin %}
                                    <select data-owner-select
                                            class="w-full rounded border border-slate-200 px-2 py-1 bg-white focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:focus:ring-slate-500">
                                        <option value="">—</option>
                                        {% for ow in ownerChoices %}
                                            <option value="{{ ow.id }}" {{ t.ownerWorkerId == ow.id ? 'selected' : '' }}>
                                                {{ ow.name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                {% else %}
                                    {% set ownerName = '—' %}
                                    {% for ow in ownerChoices %}
                                        {% if ow.id == t.ownerWorkerId %}{% set ownerName = ow.name %}{% endif %}
                                    {% endfor %}
                                    {{ ownerName }}
                                {% endif %}
                            </td>
                            <td class="px-2 py-1 text-center" data-col="prio">
                                {% if currentUser.isAdmin %}
                                    <select data-prio-select
                                            class="rounded border border-slate-200 px-2 py-1 bg-white font-mono focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:focus:ring-slate-500">
                                        <option value="1" {{ t.priority == 1 ? 'selected' : '' }}>1</option>
                                        <option value="2" {{ t.priority == 2 ? 'selected' : '' }}>2</option>
                                    </select>
                                {% else %}
                                    <span class="font-mono">{{ t.priority }}</span>
                                {% endif %}
                            </td>
                            <td class="px-2 py-1 text-center font-mono font-semibold"
                                data-col="tot" data-task-tot>
                                {{ fmt_days(tot) }}
                            </td>
                            {% for sw in sprintWorkers %}
                                {% set d = assign[sw.id]|default(0.0) %}
                                {% set st = statusGrid[t.id][sw.id]|default(STATUS_ZUGEWIESEN) %}
                                {% set tdExtraClass = taskStatusEnabled ? ' assign-status-' ~ st : '' %}
                                <td class="px-1 py-1 text-center whitespace-nowrap{{ tdExtraClass }}"
                                    data-col="sw-{{ sw.id }}"
                                    {% if taskStatusEnabled %}data-assign-cell data-status="{{ st }}" data-sw-id="{{ sw.id }}"{% endif %}
                                    data-sort-value-sw-{{ sw.id }}="{{ d|number_format(2, '.', '') }}">
                                    {% if currentUser.isAdmin %}
                                        <input type="number" min="0" step="0.5"
                                               value="{{ fmt_days(d) }}"
                                               data-assign
                                               data-sw-id="{{ sw.id }}"
                                               class="w-14 rounded border border-slate-200 px-1 py-1 text-center font-mono focus:outline-none focus:ring-2 focus:ring-slate-400 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:focus:ring-slate-500">
                                    {% else %}
                                        <span class="font-mono inline-block min-w-[2rem]{% if taskStatusEnabled %} cursor-pointer{% endif %}"
                                              data-assign-readonly
                                              data-sw-id="{{ sw.id }}">{{ fmt_days(d) }}</span>
                                    {% endif %}
                                </td>
                            {% endfor %}
                        </tr>
                    {% endfor %}
                {% endif %}
            </tbody>
        </table>
    </div>
    <div data-task-empty-filter class="hidden p-4 text-center text-slate-500 text-sm dark:text-slate-400">
        No tasks match the current filters.
    </div>
</section>