contrib_todo_list-1.1.1/templates/contrib-todo-list.html.twig

{#
/**
 * @file
 * Template for contribution todo-list.
 *
 * Variables:
 * - todos: All user and shared todos
 */
#}

{% set classes = ['contrib-todo-list'] %}

<div{{ attributes.addClass(classes) }}>
  <div class="todo-btn"></div>
  <div class="todos-wrapper">
    <h1 class="todo-list-title">{{ 'TODO list'|t }}</h1>
    {% if todos %}
      <div class="todo-select-wrapper">
        <div class="todo-select__trigger">
          <span>{{ 'Choose a state'|t }}</span>
          <div class="arrow"></div>
        </div>
        <div class="todo-select">
          <div class="todo-options">
            <span class="todo-option" data-value="all">{{ 'All'|t }}</span>
            {% for key, value in get_available_todo_state() %}
              <span class="todo-option" data-value="{{ key }}">{{ value|t  }}</span>
            {% endfor %}
          </div>
        </div>
      </div>

      <div class="todos-list">
        {% for todo in todos %}
          {% set is_owner = todo.uid.value.0['target_id'] == user_id %}
          <div class="todo-item todo-state-{{ get_todo_state_key_by_label(todo.state.value) }}"
               data-todo-id="{{ todo.id() }}">
            <div class="todo-upper">
              <div class="todo-content">
                {{ todo.todo.value }}
                {% if not is_owner %}
                  <p class='todo-author-name'>{{ todo.uid.entity.accountname }}</p>
                {% endif %}
              </div>
              <div class="todo-dropdown-container">
                <button class="todo-dropdown-toggle" type="button" aria-expanded="false">
                  <span aria-hidden="true">&#8230;</span>
                </button>
                <ul class="custom-dropdown-menu">
                  {% set state = todo.state.value %}
                  {% set states = get_available_todo_state() %}
                  {% for key, value in states %}
                    {% set is_state = get_todo_state_key_by_label(todo.state.value) == key %}
                    <li>
                      <a href="#"
                         class="todo-state-action{{ is_state ? ' disabled' : '' }}"
                         data-state="{{ key }}"
                        {{ is_state ? 'aria-disabled="true"' : '' }}>
                        {{ value|t }}
                      </a>
                    </li>
                  {% endfor %}
                  {% if is_owner %}
                    <li class="divider"></li>
                    <li>
                      <a href="#" class="todo-delete-action">
                        {{ 'Delete'|t }}
                        {% include '@contrib_todo_list/images/icons/bin.svg' with {
                          'width': 24,
                          'height': 24,
                        } %}
                      </a>
                    </li>
                  {% endif %}
                </ul>
              </div>
            </div>

            <div class="todo-actions">
              <div class="todo-lower">
                <div class="todo-lower-left">
                  <span class="todo-state-label">{{ todo.state.value|t }}</span>
                </div>
                <div class="todo-lower-right">
                  {% if todo.pin.value is iterable and is_owner %}
                    <div class='add-pin' data-todo-id="{{ todo.id() }}">
                      {% include '@contrib_todo_list/images/icons/pin.svg' with {
                        'width': 28,
                        'height': 28,
                      } %}
                    </div>
                  {% elseif not todo.pin.0.isEmpty() %}
                    <div class='go-pin' title="Go to pin" data-todo-id="{{ todo.id() }}">
                      {% include '@contrib_todo_list/images/icons/locate.svg' with {
                        'width': 28,
                        'height': 28,
                      } %}
                    </div>
                  {% endif %}

                  {% if is_owner %}
                    <div class="icon-share-wrapper {{ todo.share.value ? 'active' : '' }}"
                         title="{{ todo.share.value ? 'Share' : 'Cancel share' }}"
                         data-shared="{{ todo.share.value }}">
                      {% include '@contrib_todo_list/images/icons/share.svg' with {
                        'width': 28,
                        'height': 28,
                      } %}
                    </div>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <p class="no-todos">{{ 'No todos yet.'|t }}</p>
    {% endif %}
  </div>
  <div class="todo-form-wrapper">
    <form class="todo-add-form">
      <div class="form-item">
        <input type="text"
               id="todo-text"
               name="todo-text"
               class="form-text"
               placeholder="{{ 'Enter your todo...'|t }}"
               required>
      </div>
      <div class="form-actions">
        <button type="submit" class="button button--primary">
          {{ 'Add Todo'|t }}
        </button>
      </div>
    </form>
  </div>
</div>