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([]) %}
                        {% include "sprints/_task_row.twig" with {
                            t: t, assign: assign, links: links, tot: tot
                        } %}
                    {% 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>

    {# Hidden row template — sprint-planner.js clones this when the admin
       clicks "+ Add task" so JS-built rows can never drift from the
       server-rendered ones above (R02-N02). #}
    {% if currentUser.isAdmin %}
        <template data-task-row-template>
            {% include "sprints/_task_row.twig" with {
                t: null, assign: {}, links: [], tot: 0
            } %}
        </template>
    {% endif %}
</section>