templates/dashboard/user.html

{% extends 'dashboard/base.html' %} {% block title %}Pengguna{% endblock title
%} {% block content %}
<div class="row g-3 mb-4 align-items-center justify-content-between">
  <div class="col-auto">
    <h1 class="app-page-title mb-0">Pengguna</h1>
  </div>
  <div class="col-auto">
    <input
      type="text"
      id="search"
      class="form-control search-orders"
      placeholder="Cari nama..."
    />
  </div>
</div>
<!--//row-->

<div class="tab-content" id="orders-table-tab-content">
  <div
    class="tab-pane fade show active"
    id="orders-all"
    role="tabpanel"
    aria-labelledby="orders-all-tab"
  >
    <div class="app-card app-card-orders-table shadow-sm mb-5">
      <div class="app-card-body">
        <div class="table-responsive">
          <table class="table app-table-hover mb-0 text-left">
            <thead>
              <tr>
                <th class="cell">No</th>
                <th class="cell">Nama</th>
                <th class="cell">Email</th>
                <th class="cell">Waktu Registrasi</th>
                <th class="cell">Status</th>
                <th class="cell">Aksi</th>
              </tr>
            </thead>
            <tbody id="userTableBody"></tbody>
          </table>
        </div>
        <!--//table-responsive-->
      </div>
      <!--//app-card-body-->
    </div>
    <nav class="app-pagination">
      <ul class="pagination justify-content-center" id="pagination"></ul>
    </nav>
  </div>
  <!--//tab-pane-->
</div>
{% endblock content %} {% block modal %}
<div
  class="modal fade"
  id="modal"
  data-bs-backdrop="static"
  data-bs-keyboard="false"
  tabindex="-1"
  aria-labelledby="modalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="modalLabel">Ubah Status</h1>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <form id="dataForm" method="post" action="{{ url_for('user.update') }}">
          <input type="hidden" name="id" id="id" />

          <div class="mb-5">
            <label for="status" class="form-label">Status</label>
            <select class="form-select" id="status" name="status">
              <option value="0">Aktif</option>
              <option value="1">Nonaktif</option>
            </select>
          </div>

          <div class="row justify-content-between">
            <div class="col-auto">
              <a class="btn app-btn-secondary" href="#" data-bs-dismiss="modal"
                >Batal</a
              >
            </div>
            <div class="col-auto">
              <button class="btn app-btn-primary" type="submit">Simpan</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock modal %} {% block script %}
<script>
  const users = {{ users|tojson|safe }};
  const rowsPerPage = 5;
  let currentPage = 1;

  function displayUsers(page, filter) {
    const $tableBody = $('#userTableBody');
    $tableBody.empty();

    const filteredUsers = filterUsers(users, filter);
    const start = (page - 1) * rowsPerPage;
    const end = start + rowsPerPage;
    const paginatedUsers = filteredUsers.slice(start, end);

    if (paginatedUsers.length === 0) {
      const $row = $('<tr>');
      $row.html('<td colspan="6" class="cell text-center">Tidak ada data</td>');
      $tableBody.append($row);
      $('#pagination').addClass('d-none');
    } else {
      $('#pagination').removeClass('d-none');
      $.each(paginatedUsers, (index, user) => {
        const $row = $('<tr>');
        $row.html(`
          <td class="cell">${start + index + 1}.</td>
          <td class="cell">${user.nama}</td>
          <td class="cell">${user.email}</td>
          <td class="cell">${user.registered_at}</td>
          <td class="cell"><span class="badge bg-${user.status_badge}">${user.inactive === "1" ? 'Nonaktif' : 'Aktif'}</span></td>
          <td class="cell">
            <div class="d-flex">
            <a class="btn-sm app-btn-secondary me-1 text-center" href="#" data-bs-toggle="modal" data-bs-target="#modal" onclick="setModalData('${user.id}', '${user.inactive}')">Edit Status</a>
          <a class="btn-sm app-btn-secondary text-center" href="/dashboard/history/${user.id}">Lihat Riwayat</a></td></div>
        `);
        $tableBody.append($row);
      });
    }
  }

  function filterUsers(users, filter) {
    if (!filter) {
      return users;
    }
    const regex = new RegExp(filter, 'i');
    return users.filter(user => regex.test(user.nama));
  }

  function setupPagination(filter) {
    const $pagination = $('#pagination');
    $pagination.empty();

    const filteredUsers = filterUsers(users, filter);
    const totalPages = Math.ceil(filteredUsers.length / rowsPerPage);

    const $prevPageItem = $('<li>').addClass('page-item ' + (currentPage === 1 ? 'disabled' : ''));
    $prevPageItem.html('<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>');
    $prevPageItem.on('click', () => {
      if (currentPage > 1) {
        currentPage--;
        displayUsers(currentPage);
        setupPagination();
      }
    });
    $pagination.append($prevPageItem);

    for (let page = 1; page <= totalPages; page++) {
      const $pageItem = $('<li>').addClass('page-item ' + (page === currentPage ? 'active' : ''));
      $pageItem.html(`<a class="page-link" href="#">${page}</a>`);
      $pageItem.on('click', () => {
        currentPage = page;
        displayUsers(currentPage);
        setupPagination();
      });
      $pagination.append($pageItem);
    }

    const $nextPageItem = $('<li>').addClass('page-item ' + (currentPage === totalPages ? 'disabled' : ''));
    $nextPageItem.html('<a class="page-link" href="#">Next</a>');
    $nextPageItem.on('click', () => {
      if (currentPage < totalPages) {
        currentPage++;
        displayUsers(currentPage);
        setupPagination();
      }
    });
    $pagination.append($nextPageItem);
  }

  function setModalData(id, status) {
    $('#id').val(id);
    $('#status').val(status);
  }

  $('#search').on('input', function() {
    const filter = $(this).val().trim();
    currentPage = 1;
    displayUsers(currentPage, filter);
    setupPagination(filter);
  });

  displayUsers(currentPage);
  setupPagination();

  $('#dataForm').on('submit', function(event) {
      $(".spinner").removeClass("d-none");
      $(".overlay").removeClass("d-none");
  });
</script>
{% endblock script %}