ihrm/horilla_views/templates/generic/horilla_card.html

{% load static i18n generic_template_filters %}
<div id="{{view_id|safe}}">
  <script>
    if (!$(".HTV").length) {
        reloadMessage(null);
    }
  </script>
  <div class="d-flex justify-content-between mb-2">
    <div>
      {% for filter in stored_filters %}
      <div class="oh-hover-btn-container"
        hx-get="{{request.path}}?{{filter.urlencode}}"
        hx-target="#{{view_id|safe}}" hx-swap="outerHTML"
        >
        <button
        hx-get="{% url "last-applied-filter" %}?{{filter.urlencode}}"
        hx-swap="none"
        class="oh-hover-btn" style="
        cursor: pointer;
        border: solid 2px {{filter.color}};
        color: {{filter.color}} !important;
        border-radius:30px;
        ">
          {{filter.title}}
        </button>
        <div class="oh-hover-btn-drawer" onclick="event.stopPropagation()">
          <button class="oh-hover-btn__small" onclick="$('#savedFilterModal').addClass('oh-modal--show')" hx-get="{% url "saved-filter-update" filter.id %}" hx-target="#SavedFilterFormTarget" hx-swap="innerHTML"><ion-icon name="create-outline"></ion-icon></button>
          <button class="oh-hover-btn__small" onclick="$(this).parent().find('button:hidden').click();$(this).closest('.oh-hover-btn-container').remove()" ><ion-icon name="trash-outline"></ion-icon></button>
          <button hidden hx-get="{% url "delete-saved-filter" filter.id %}" hx-swap="none"></button>
        </div>
      </div>
      {% endfor %}
    </div>
    {% if card_status_indications %}
    <div class="d-flex flex-row-reverse">
      {% for indication in card_status_indications %}
      <span class="m-1" style="cursor: pointer;margin-left: 7px;" {{indication.2|safe}}>
        <span class="oh-dot oh-dot--small me-1 {{indication.0}}"></span>
        {{indication.1}}
      </span>
      {% endfor %}
    </div>
    {% endif %}

  </div>

  <button class="reload-record" hidden hx-get="{{request.path}}?{{request.GET.urlencode}}" hx-target="#{{view_id|safe}}" hx-swap="outerHTML">
  </button>
    {% if show_filter_tags %}
    {% include "generic/filter_tags.html" %}
    {% endif %}
    {% if queryset %}
    <div class="oh-layout--grid-3">
    {% for instance in queryset %}
    <div class="oh-kanban-card {{card_status_class|format:instance|safe}}" {{card_attrs|format:instance|safe}}>
      {% if instance|getattribute:details.image_src %}
      <div class="oh-kanban-card__avatar">
        <div class="oh-kanban-card__profile-container">
          <img
            src="{{instance|getattribute:details.image_src}}"
            class="oh-kanban-card__profile-image"
            alt="Username"
          />
        </div>
      </div>
      {% endif %}
      <div class="oh-kanban-card__details">
        <span class="oh-kanban-card__title">{{details.title|format:instance|selected_format:request.user.employee_get.employee_work_info.company_id|safe}}</span>
        <div class="" style="display: grid;">{{details.subtitle|format:instance|selected_format:request.user.employee_get.employee_work_info.company_id|safe}}</div>
      </div>
      {% if actions %}
      <div class="oh-kanban-card__dots" onclick="event.stopPropagation()">
        <div class="oh-dropdown" x-data="{show: false}">
          <button
            class="oh-btn oh-btn--transparent text-muted p-3"
            @click="show = !show"
          >
            <ion-icon name="ellipsis-vertical-sharp"></ion-icon>
          </button>
          <div
            class="oh-dropdown__menu oh-dropdown__menu--dark-border oh-dropdown__menu--right"
            x-show="show"
            @click.outside="show = false"
          >
            <ul class="oh-dropdown__items">
                {% for action in actions %}
                {% if action.accessibility|accessibility:instance %}
                <li class="oh-dropdown__item">
                  <a {{action.attrs|format:instance|safe}}>{{instance|getattribute:action.action|default:action.action}}</a>
                </li>
                {% endif %}
                {% endfor %}
            </ul>
          </div>
        </div>
      </div>
      {% endif %}
    </div>
    {% endfor %}
  </div>
  {% if queryset.paginator.count %}
  <div class="oh-pagination">
    <span
      class="oh-pagination__page"
      data-toggle="modal"
      data-target="#addEmployeeModal"
      >{% trans "Page" %} {{queryset.number}} {% trans "of" %}
      {{queryset.paginator.num_pages}}</span
    >

    <nav class="oh-pagination__nav">
      <div class="oh-pagination__input-container me-3">
        <span class="oh-pagination__label me-1">{% trans "Page" %}</span>

        <input
          type="number"
          class="oh-pagination__input"
          value="{{queryset.number}}"
          min="1"
          name="page"
          hx-get="{{search_url}}?{{request.GET.urlencode}}&filter_applied=on"
          hx-swap="outerHTML"
          hx-target="#{{view_id|safe}}"
          hx-on-htmx-before-request="htmxLoadIndicator(this);"
        />
        <span class="oh-pagination__label"
          >{% trans "of" %} {{queryset.paginator.num_pages}}</span
        >
      </div>

      <ul class="oh-pagination__items">
        {% if queryset.has_previous %}
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a
            hx-get="{{search_url}}?{{request.GET.urlencode}}&page=1&filter_applied=on"
            hx-swap="outerHTML"
            hx-target="#{{view_id|safe}}"
            hx-on:click="htmxLoadIndicator(this);"
            class="oh-pagination__link"
            >{% trans "First" %}</a
          >
        </li>
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a
            hx-get="{{search_url}}?{{request.GET.urlencode}}&page={{ queryset.previous_page_number }}&filter_applied=on"
            hx-swap="outerHTML"
            hx-target="#{{view_id|safe}}"
            hx-on:click="htmxLoadIndicator(this);"
            class="oh-pagination__link"
            >{% trans "Previous" %}</a
          >
        </li>
        {% endif %} {% if queryset.has_next %}
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a
            hx-get="{{search_url}}?{{request.GET.urlencode}}&page={{ queryset.next_page_number }}&filter_applied=on"
            hx-swap="outerHTML"
            hx-target="#{{view_id|safe}}"
            hx-on:click="htmxLoadIndicator(this);"
            class="oh-pagination__link"
            >{% trans "Next" %}</a
          >
        </li>
        <li class="oh-pagination__item oh-pagination__item--wide">
          <a
            hx-get="{{search_url}}?{{request.GET.urlencode}}&page={{ queryset.paginator.num_pages }}&filter_applied=on"
            hx-swap="outerHTML"
            hx-target="#{{view_id|safe}}"
            hx-on:click="htmxLoadIndicator(this);"
            class="oh-pagination__link"
            >{% trans "Last" %}</a
          >
        </li>
        {% endif %}
      </ul>
    </nav>
  </div>
  <script>
    var tabId = $("#{{view_id}}").closest(".oh-tabs__content").attr("id");
    var badge = $(`#badge-${tabId}`);
    var count = "{{queryset.paginator.count}}";
    var label = badge.attr("data-badge-label") || "";
    var title = count + " " + label;
    badge.html(count);
    badge.attr("title", title);
  </script>
  {% endif %}
  {% else %}
  <div class="oh-wrapper" align="center" style="margin-top: 7vh; margin-bottom:7vh;">
    <div align="center">
      <img src="{% static "images/ui/search.svg" %}" class="oh-404__image" alt="Page not found. 404.">
      <h1 class="oh-404__title">{% trans "No Records found" %}</h1>
      <p class="oh-404__subtitle">
        {% trans "No records found." %}
      </p>
    </div>
  </div>
  {% endif %}
</div>