126 lines
8.5 KiB
HTML
126 lines
8.5 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %}Tasks{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Main Content -->
|
|
<main class="container mx-auto w-full px-4 my-8 flex-1">
|
|
<h1 class="page-title">Tasks</h1>
|
|
<div class="sm:flex sm:flex-row-reverse justify-center">
|
|
<aside class="sm:w-2/5 sm:max-w-xs sm:pl-4 lg:pl-8 my-8 sm:my-0">
|
|
<div class="z-10 fixed sm:sticky top-0 sm:top-4 lg:top-8 left-0 w-full h-full sm:h-auto bg-black sm:bg-transparent bg-opacity-70 flex sm:block items-center justify-center"
|
|
x-show="showModal || $screen('sm')"
|
|
x-transition:enter="transition duration-300 ease-out"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition duration-150 ease-in"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
>
|
|
<div class="max-w-sm sm:w-full mx-4 sm:mx-0 p-4 rounded bg-white dark:bg-gray-800 sm:shadow-lg sm:dark:border-2 sm:dark:border-gray-700"
|
|
@click.outside="showModal = ! showModal"
|
|
x-show="showModal || $screen('sm')"
|
|
x-transition:enter="transition transform ease-out duration-300"
|
|
x-transition:enter-start="scale-110 opacity-0"
|
|
x-transition:enter-end="scale-100 opacity-100"
|
|
x-transition:leave="transition transform ease-in duration-150"
|
|
x-transition:leave-start="scale-100 opacity-100"
|
|
x-transition:leave-end="scale-110 opacity-0"
|
|
>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<h2 class="text-gray-800 dark:text-gray-100 sm:section-title sm:section-title-margins sm:w-full">
|
|
<span class="mr-1 text-gray-400 sm:hidden">
|
|
<i class="fas fa-filter"></i>
|
|
</span>
|
|
Auswahl einschränken
|
|
</h2>
|
|
<div class="ml-4 -mr-2 px-2 rounded text-xl text-gray-600 dark:text-gray-400 sm:hidden cursor-pointer" @click="showModal = false">
|
|
<i class="far fa-times"></i>
|
|
</div>
|
|
</div>
|
|
<form action="" method="GET" class="grid grid-cols-1 gap-2 sm:gap-4">
|
|
<label class="block">
|
|
<span class="text-gray-700 dark:text-gray-200">Task-Gruppe</span>
|
|
<select id="id_tasklist" name="tasklist" class="block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
|
|
<option value="all" {% if not show_tasklist %}selected{% endif %}>alle Task-Gruppen</option>
|
|
{% regroup tasks by task_list as section_list %}
|
|
{% for group in section_list %}
|
|
<option value="{{ group.grouper.id }}" {% if show_tasklist == group.grouper.id %}selected{% endif %}>{{ group.grouper.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</label>
|
|
<label>
|
|
<span class="text-gray-700 dark:text-gray-200">Tasks</span>
|
|
<select id="id_task" name="tasks" class="block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
|
|
<option value="assigned" {% if assigned_tasks %}selected{% endif %}>dir zugewiesene</option>
|
|
<option value="all" {% if not assigned_tasks %}selected{% endif %}>alle</option>
|
|
</select>
|
|
</label>
|
|
<label class="inline-flex items-center">
|
|
<input type="checkbox" name="open_tasks" {% if state_open %}checked{% endif %} class="rounded border-gray-300 dark:border-none text-proprietary shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
|
|
<span class="ml-2 text-gray-700 dark:text-gray-200">Offene Tasks</span>
|
|
</label>
|
|
<label class="inline-flex items-center">
|
|
<input type="checkbox" name="closed_tasks" {% if state_closed %}checked{% endif %} class="rounded border-gray-300 dark:border-none text-proprietary shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
|
|
<span class="ml-2 text-gray-700 dark:text-gray-200">Geschlossene Tasks</span>
|
|
</label>
|
|
<input type="submit" class="block btn btn-primary" value="Anzeigen">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<button id="modal-trigger-1" class="z-10 trigger fixed bottom-4 right-4 bg-proprietary-darker dark:bg-sky-500 text-blue-50 dark:text-sky-900 shadow-lg text-2xl rounded sm:hidden"
|
|
@click="showModal = true"
|
|
x-show="!showModal"
|
|
x-transition:enter="transition duration-100 ease-in"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition duration-100 ease-out"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
>
|
|
<i class="fas fa-filter p-2"></i>
|
|
</button>
|
|
</aside>
|
|
|
|
<section class="my-8 sm:my-0 sm:w-3/5 xl:w-2/5 flex flex-col gap-4 text-gray-700 dark:text-gray-200">
|
|
{% if tasks %}
|
|
<form action="" method="post">
|
|
{% csrf_token %}
|
|
|
|
{% regroup tasks by task_list as section_list %}
|
|
{% for group in section_list %}
|
|
<h3>{{ group.grouper }}</h3>
|
|
|
|
{% for task in group.list %}
|
|
<label class="flex justify-between items-start">
|
|
<div class="inline-flex items-baseline mr-2">
|
|
<input type="checkbox" name="checkbox" value="{{ task.id }}" {% if task.completed %}checked{% endif %} class="rounded border-gray-300 dark:border-none text-proprietary shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
|
|
<span class="ml-2">{{ task.title }} <a href="{% url 'tasks:task-detail' task.id %}" class="inline-block text-proprietary dark:text-proprietary-lighter">Link <i class="fa-solid fa-link"></i></a></span>
|
|
</div>
|
|
{% if task.due_date %}
|
|
<div class="inline-flex gap-2 flex-shrink-0">
|
|
<span class="px-2 py-0.5 rounded-full text-sm font-medium text-proprietary dark:text-blue-100 bg-blue-200 dark:bg-proprietary-dark"><i class="fa-solid fa-hourglass mr-1"></i>{{ task.due_date|date:"d.m.Y" }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</label>
|
|
{% endfor %}
|
|
{% endfor %}
|
|
|
|
<div class="flex flex-col md:flex-row gap-y-2 md:gap-y-0 md:gap-x-2 lg:justify-end mt-4">
|
|
<input type="submit" name="btn_checkbox" value="Tasks abschließen" class="btn btn-error block md:flex-grow lg:flex-grow-0">
|
|
|
|
<a href="{% url 'tasks:task-create' %}" class="btn btn-primary block md:flex-grow lg:flex-grow-0"><i class="fas fa-plus-square mr-2"></i>Task hinzufügen</a>
|
|
</div>
|
|
</form>
|
|
{% else %}
|
|
keine Tasks in dieser Liste für dich.
|
|
|
|
<div class="flex flex-col md:flex-row gap-y-2 md:gap-y-0 md:gap-x-2 lg:justify-end mt-4">
|
|
<a href="{% url 'tasks:task-create' %}" class="btn btn-primary block md:flex-grow lg:flex-grow-0"><i class="fas fa-plus-square mr-2"></i>Task hinzufügen</a>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
</div>
|
|
</main>
|
|
{% endblock %}
|