view.html.twig

{% extends 'sidebar.html.twig' %}
{% import 'flash/utilities.html.twig' as flashes %}
{% import 'time/partials.html.twig' as time %}
{% import 'components/autocomplete.html.twig' as autocomplete %}

{% block content_class %}w-100{% endblock %}
{% block turbo %}false{% endblock %}
{% block title %}Task: {{ task.name }}{% endblock %}

{% block content_body %}
<div
     {{ stimulus_controller('task-page-bridge') }}
     class="resource js-data"
     data-duration-format="{{ app.user.durationFormat }}"
     data-task-id="{{ task.idString }}">

    {% if task.deleted %}
        {{ flashes.deleted_warning('This task has been deleted') }}
    {% endif %}

    <div class="js-breadcrumbs">
        {{ include('task/partials/_breadcrumbs.html.twig', {tasks: task.lineage}) }}
    </div>

    {{ form_start(form) }}
    {{ form_row(form.name) }}
    {{ form_row(form.parentTask, {
        attr: {class: 'd-none'},
        label_attr: {class: 'd-none'}
    })}}

    {% set taskName = '' %}
    {% if task.parent %}
        {% set taskName = task.parent.name %}
    {% endif %}

    <label class="d-block form-label">Parent Task</label>
    {{ autocomplete.removable('task', { button: { class: 'bg-weak-white btn-outline-danger'}, search: { value: taskName, placeholder: 'task name' } }) }}

    <label class="d-block form-label mt-3">Tags</label>
    <div class="mt-2 d-flex align-items-center">
        <div
            {{ stimulus_controller('sync-tag-list', {
                addUrl: path('json_task_tag_create', {id: task.idString}),
                removeUrl: path('json_task_tag_delete', {id: task.idString, tagName: '{NAME}'})
            }) }}
            class="tag-list tag-list-autocomplete"
            data-action="autocomplete.change@window->sync-tag-list#requestAddFromAutocomplete removable-tag:remove->sync-tag-list#removeTag">
            {% for tag in task.tags %}
                {{ include('tag/partials/_removable-tag.html.twig', { tag: tag}) }}
            {% endfor %}
        </div>

        {{ autocomplete.addTag('task') }}
    </div>

    <div class="mt-3">
        {{ form_row(form.template) }}
    </div>

    <div class="mt-3">
        {{ form_row(form.active) }}
    </div>

    {{ form_row(form.priority) }}

    {{ form_row(form.timeEstimate) }}

    {{ form_label(form.completedAt, null, {label_attr: {class: 'd-block mt-3'}}) }}
    <div {{ stimulus_controller('clear-value') }}
        class="d-inline-flex">
        {{ form_widget(form.completedAt, {attr: {'data-clear-value-target': 'clearable'}}) }}
        <button
                type="button"
                class="btn btn-danger ms-2"
                data-action="clear-value#clear">
            <i class="fas fa-trash"></i>
        </button>
    </div>

    {{ form_label(form.dueAt, null, {label_attr: {class: 'd-block mt-3'}}) }}
    <div {{ stimulus_controller('clear-value') }}
        class="d-inline-flex">
        {{ form_widget(form.dueAt, {attr: {'data-clear-value-target': 'clearable'}}) }}
        <button
                type="button"
                class="btn btn-danger ms-2"
                data-action="clear-value#clear">
            <i class="fas fa-trash"></i>
        </button>
    </div>

    <div class="js-task-time-entry border rounded shadow-sm mt-3">
        <div class="js-content d-flex align-items-center p-2">
            <div class="d-inline-flex input-with-indicators flex-grow-1">
                <div class="input-indicator input-indicator-left d-flex">
                    <div class="spinner-border spinner-border-sm text-primary js-loading d-none" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                <input class="form-control js-time-entry-description no-resize left" placeholder="Entry description" />
            </div>

            <div class="js-duration ms-1">{{ time.user_duration(zeroDuration(), app.user) }}</div>
            <button type="button" class="btn btn-primary ms-2">
                <span class="js-task-time-entry-loading spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                <span class="js-task-time-entry-loading visually-hidden">Loading...</span>
                <span class="js-text"></span>
            </button>
        </div>
    </div>

    <ul class="nav nav-tabs mt-3" id="description-tab" role="tablist">
        <li class="nav-item" role="presentation">
            <button
                    id="activity-tab"
                    type="button"
                    class="nav-link active activity-link"
                    data-bs-target="#activity"
                    role="tab"
                    aria-controls="home"
                    aria-selected="true"
                    {{ stimulus_controller('bootstrap-tab') }}
                    {{ stimulus_action('bootstrap-tab', 'activateTab') }}
            >
                Activity
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button
                    id="activity-tab"
                    type="button"
                    class="nav-link activity-link"
                    data-bs-toggle="tab"
                    data-bs-target="#subtasks"
                    role="tab"
                    aria-controls="home"
                    aria-selected="true"
                    {{ stimulus_controller('bootstrap-tab') }}
                    {{ stimulus_action('bootstrap-tab', 'activateTab') }}
            >
                Subtasks
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button
                    id="home-tab"
                    type="button"
                    class="nav-link markdown-link"
                    data-bs-target="#markdown"
                    role="tab"
                    aria-controls="home"
                    aria-selected="true"
                    {{ stimulus_controller('bootstrap-tab') }}
                    {{ stimulus_action('bootstrap-tab', 'activateTab') }}
            >
                <span
                    {{ stimulus_controller('toggle-class', {
                        className: 'd-none',
                        key: task.idString
                    }) }}
                    data-action="upload-field:update:start@window->toggle-class#remove upload-field:update:finish@window->toggle-class#add"
                    class="me-1 d-none">
                    <i class="fas fa-sync-alt fa-spin"></i>
                </span>
                Description
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button
                    id="markdown-tab"
                    type="button"
                    class="nav-link"
                    data-bs-target="#preview"
                    role="tab"
                    aria-controls="profile"
                    aria-selected="false"
                    {{ stimulus_controller('bootstrap-tab') }}
                    {{ stimulus_action('bootstrap-tab', 'activateTab') }}
            >
                Preview
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button
                    id="details-tab"
                    type="button"
                    class="nav-link"
                    data-bs-target="#details"
                    role="tab"
                    aria-selected="false"
                    {{ stimulus_controller('bootstrap-tab') }}
                    {{ stimulus_action('bootstrap-tab', 'activateTab') }}
            >
                Details
            </button>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade show active contained task-activity" id="activity" role="tabpanel" aria-labelledby="activity-tab">
            <div class="total-time js-total-time">
                <strong>Total Time:</strong>
                <span class="js-value"></span>
                <div class="js-loading spinner-border spinner-border-sm text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <hr/>
            </div>
            <div class="js-task-time-entry-activity mt-3">
            </div>
        </div>
        <div id="markdown" class="tab-pane fade markdown-input" role="tabpanel" aria-labelledby="markdown-tab">
            {{ form_widget(form.description, {
                attr: {
                    rows: 10,
                    class: 'js-description border-top-0',
                    'data-controller': 'upload-field',
                    'data-action': 'upload-field#update',
                    'data-upload-field-key-value': task.idString,
                    'data-upload-field-field-name-value': 'description',
                    'data-upload-field-url-value': path('json_task_update', {id: task.idString} )
                }})
            }}
        </div>
        <div id="preview" class="tab-pane fade contained markdown-preview" role="tabpanel" aria-labelledby="profile-tab">
            <div
                id="preview-content"
                {{ stimulus_controller('markdown-updater', {
                    field: 'value',
                    key: task.idString
                }) }}
                data-action="upload-field:update:finish@window->markdown-updater#convert">
                {{ task.description|markdown_to_html }}
            </div>
        </div>
        <div class="tab-pane fade contained" id="subtasks" role="tabpanel" aria-labelledby="subtasks-tab">
            <div class="p-2">
                <div class="inline-form-header mb-2">Add subtask</div>
                <div class="js-task-create row g-2">
                    <div class="col">
                        <label class="visually-hidden" for="create-task-name">New task name</label>
                        <input
                                id="create-task-name"
                                type="text"
                                class="form-control js-name"
                                autocomplete="off"
                                placeholder="What do you want to achieve?"
                        />
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn btn-primary js-button js-loading-button">
                            <span class="js-loading spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                            <span class="js-loading visually-hidden">Loading...</span>
                            <span class="js-text">Create task</span>
                        </button>
                    </div>
                </div>
                <div class="stack-list task-list js-task-list mt-2 mb-2">
                    {% for subtask in subtasks %}
                        {{ include('task/partials/_task.html.twig', {task: subtask }) }}
                    {% else %}
                        <div class="text-center mt-2 mb-2 js-no-tasks">No subtasks</div>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="tab-pane fade bg-white" id="details" role="tabpanel" aria-labelledby="details-tab">
            <table class="table table-hover table-bordered">
                <thead>
                    <tr class="border-top-0">
                        <th class="border-top-0">Type</th>
                        <th class="border-top-0">Timestamp</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Created</td>
                        <td>{{ time.user_datetime(task.createdAt, app.user) }}</td>
                    </tr>
                    <tr>
                        <td>Updated</td>
                        <td>{{ time.user_datetime(task.updatedAt, app.user) }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    {{ form_widget(form) }}
    <div class="d-flex mt-3">
        {% if not task.deleted %}
            <button type="submit" class="btn btn-primary">Update</button>
            {% if task.completed %}
                <a href="{{ path('task_complete', {id: task.id, value: 'uncomplete'}) }}" class="btn btn-secondary ms-2">Uncomplete</a>
            {% elseif task.template %}
                <span
                        {{ stimulus_controller('bootstrap-tooltip') }}
                        data-bs-toggle="tooltip"
                        data-bs-placement="top"
                        title="Can not complete template tasks">
                    <a
                            href="{{ path('task_complete', {id: task.id, value: 'complete'}) }}"
                            role="button"
                            class="btn btn-secondary ms-2 disabled"
                            tabindex="-1"
                            aria-disabled="true"
                    >
                        Complete
                    </a>
                </span>
            {% else %}
                <a
                    href="{{ path('task_complete', {id: task.id, value: 'complete'}) }}"
                    role="button"
                    class="btn btn-secondary ms-2"
                >
                    Complete
                </a>
            {% endif %}

            {% if task.closed %}
                <a href="{{ path('task_close', {id: task.id, value: 'open'}) }}" class="btn btn-warning ms-2">Re-open</a>
            {% elseif task.template %}
            <span
                {{ stimulus_controller('bootstrap-tooltip') }}
                data-bs-toggle="tooltip"
                data-bs-placement="top"
                title="Can not close template tasks">
                <a
                    href="{{ path('task_close', {id: task.id, value: 'close'}) }}"
                    class="btn btn-warning ms-2 disabled"
                    role="button"
                    tabindex="-1"
                    aria-disabled="true"
                >
                    Close
                </a>
            </span>
            {% else %}
                <a href="{{ path('task_close', {id: task.id, value: 'close'}) }}" class="btn btn-warning ms-2">Close</a>
            {% endif %}

            <button
                    type="button"
                    class="btn btn-danger ms-2"
                    data-bs-toggle="modal"
                    data-bs-target="#delete-modal">
                Delete
            </button>
        {% endif %}
    </div>
    {{ form_end(form) }}
</div>

<!-- Delete modal -->
<div class="modal fade" id="delete-modal" tabindex="-1" aria-labelledby="delete-modal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="delete-modal-label">Are you sure you want to delete?</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                This will delete the task and all of it's children
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <a href="{{ path('task_delete', {id: task.id}) }}" class="btn btn-danger">Delete</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}