sharix-open-tickets/templates/tickets/ticket_list_detail.html

{% extends "tickets/base.html" %}
{% load static %}

{% block content %}
  {% if my_tickets %}
    <h1 class="fw-bold">My Tickets (in all groups)</h1>
  {% elif assignments %}
    <h1 class="fw-bold">Assignments (in all groups)</h1>
  {% else %}
    <h1>{{ ticket_list.group }} > <b>{{ ticket_list.name }}</b></h1>
    
    <div class="d-flex justify-content-between">
      <button type="button" data-bs-toggle="modal" data-bs-target="#ticket-create-modal" class="btn btn-primary">
        <i class="fa-solid fa-plus pe-1"></i>
        New Ticket
      </button>
      {% if user.is_staff or user.is_superuser %}
        <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#ticket_list-delete-modal">
          <i class="fa-solid fa-trash-can"></i>
        </button>  
      {% endif %}    
    </div>

    {% if user.is_staff or user.is_superuser %}
      <!--List delete modal-->
      <div class="modal fade" id="ticket_list-delete-modal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5">
                <i class="fa-solid fa-trash-can pe-1"></i>
                Delete List
              </h1>
            </div>
            <div class="modal-body">
              Are you sure you want to delete the list "{{ ticket_list.name }}"? All related tickets will also be deleted.
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
                <i class="fa-solid fa-xmark pe-1"></i>
                Close
              </button>
              <form action="{% url 'tickets:ticket_list_delete' ticket_list.pk %}" method="post">
                {% csrf_token %}
                <button class="btn btn-outline-danger" type="submit">
                  <i class="fa-solid fa-check pe-1"></i>
                  Confirm
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    {% endif %}

    <!--ticket create modal-->
    <div class="modal fade" id="ticket-create-modal" tabindex="-1">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5">
              <i class="fa-solid fa-plus pe-1"></i>
              New Ticket
          </div>
          <div class="modal-body">
            <form id="ticket-create-form" action="{% url 'tickets:ticket_create' ticket_list.pk %}" method="post">
              {% include 'tickets/include/form.html' %}
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
              <i class="fa-solid fa-xmark pe-1"></i>
              Close
            </button>
            <button class="btn btn-primary" type="submit" form="ticket-create-form">
              <i class="fa-solid fa-check pe-1"></i>
              Confirm
            </button>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
  
  <hr>
  {% if tickets %} 
    <div class="d-flex flex-wrap gap-1">
      {% for ticket_type in ticket_types %}
        <input type="radio" class="btn-check ticket_type-filter" name="btnradio" id="{{ ticket_type }}-radio">
        <label class="btn btn-outline-secondary" for="{{ ticket_type }}-radio">
          {{ ticket_type }}
        </label>
      {% endfor %}
    </div>
    <hr>
    
    <div class="overflow-x-scroll">
      <table class="table" id="tickettable">
        <thead>
          <tr class="nodrop">
            <th>ID</th>
            <th>Title</th>
            <th class="text-nowrap">Created at</th>
            <th class="text-nowrap">Due on</th>
            <th>Owner</th>
            <th>Assigned</th>
            <th>Status</th>
            <th>Priority</th>
          </tr>
        </thead>

        <tbody>
          {% for ticket in tickets %}
            <tr class="ticket" id="{{ ticket.pk }}" data-ticket-type="{{ ticket.get_ticket_type_display }}">
              <td>
                {{ ticket.pk }}
              </td>
              <td>
                <a href="{% url 'tickets:ticket_detail' ticket.pk %}">{{ ticket.title|truncatechars:48 }}</a>
              </td>
              <td>
                  {{ ticket.created_at }}
              </td>
              <td>
                  {{ ticket.due_date }}
              </td>
              <td>
                {{ ticket.created_by_username }}
              </td>
              <td>
                {% if ticket.assigned_to_username %}{{ ticket.assigned_to_username }}{% else %}Anyone{% endif %}
              </td>
              <td>
                {{ ticket.get_status_display }}
              </td>
              <td>
                {{ ticket.priority }}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    
  {% else %}
    <h4>There are no Tickets!</h4>
  {% endif %}
{% endblock %}

{% block extra_js %}
  {% if tickets %}
    <script>
      let tickets = $(".ticket");
      let filters = $(".ticket_type-filter");
      
      filters.on("click", function() {
        localStorage.setItem("checked", this.id);
        apply_filters();
      });

      function apply_filters() {
        tickets.hide();
    
        let checkedFilterId = localStorage.getItem("checked");
        let checkedFilterEl = document.getElementById(checkedFilterId);
        if (checkedFilterEl) {
          checkedFilterEl.checked = true;
        } else {
          filters[0].checked = true;
          checkedFilterId = filters[0].id;
        }

        let ticket_type = checkedFilterId.split("-")[0];
        let filteredtickets = tickets.filter(function() {
          return $(this).data("ticket-type") === ticket_type;
        });
    
        filteredtickets.show();
      }

      document.addEventListener("DOMContentLoaded", apply_filters);
    </script>
  {% endif %}
{% endblock extra_js %}