Inventur/templates/table.html.tera

{# vim: set filetype=html: #}
{% extends "base" %}

{# This file is part of inventur.
 # inventur is a simple web app using rocket to help maintain inventory data.
 # Copyright (C) 2024 Johannes Randerath
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU Affero General Public License as published by
 # the Free Software Foundation, either version 3 of the License, or
 # (at your option) any later version.
 #
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU Affero General Public License for more details.
 #
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <https://www.gnu.org/licenses/>.
 #}

{% block pagename %}Table{% endblock pagename %}

{% block body %}

<!-- Table header and editing -->
<div class="row justify-content-between">
  <div class="col-auto">
    <h1>
    <div class='input-group'>
    <span id="tname">{{ tblname }}</span>
    <button class="btn" type="button" onclick="toggle_edit_tname();" id="pencil_button_edit_tname">
    <i class="bi bi-pencil"></i>
    </button>
    </div>
    </h1>
  </div>

<!-- Search bar -->
  <div class="col-auto">
    <div class="btn-toolbar mt-2" role="toolbar">
      <div class="btn-group me-2">
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#create_entry_modal">
        <i class="bi bi-plus-lg"></i>
        </button>
      </div>
      <form method="get" action="/table/{{ tblid }}">
	<div class="input-group">
	  <div class="input-group-text dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
	    <i class="bi bi-table"></i>
	  </div>
	  <input id="input_search_value" name="search_value" type="text" placeholder="Search" value="{{ search_value }}" class="form-control">
	  <button class="btn btn-outline-primary" type="submit"><i class="bi bi-search"></i></button>
	  <ul class="dropdown-menu">
	    <select name="search_fields" class="form-select" multiple>
	      <option disabled class="dropdown-header">Search in</option>
	      {% for column in column_names %}
	      <option class="dropdown-option" value="{{ loop.index - 1 }}" {% if (loop.index - 1) in search_fields %}selected{% endif %}>{{ column }}</option>
	      {% endfor %}
	    </select>
	  </ul>
	</div>
      </form>
    </div>
  </div>
</div>


<br>

<!-- Table contents -->
<table id="content_table" class="table table-striped table-hover table-responsive table-bordered mt-2">
  <!-- column headings -->
  <thead>
    <tr>
      <!-- Index (#) column -->
      <th style="width:7%">
	<div class="row justify-content-between">
	  <div class="col-auto">
	    #
	  </div>
	  <div class="col-auto">
	    <div class="btn-toolbar">
	      <button class="btn" data-bs-toggle="modal" data-bs-target="#create_column_modal" type="button"><i class="bi bi-bookmark-plus"></i></button>
	      <form method="get" action="/table/{{ tblid }}">
		<input value="0" name="sort_field" hidden />
		<input value="{% if sort_field == 0 %}{{ (sort_dir + 1) % 2}}{% else %}0{% endif %}" name="sort_dir" hidden />
		{% if sort_field == 0 and sort_dir == 0 %}
		{% set dir='up' %}
		{% else %}
		{% set dir='down' %}
		{% endif %}
		<button class="btn p-0" type="submit"><i class="bi bi-sort-{{ dir }}"></i></button>
	      </form>
	    </div>
	  </div>
	</div>
      </th>
      <!-- individual columns -->
      {% for column in column_names %}
      <th>
	<div class="row justify-content-between">
	  <div class="col-auto">
	    {{ column }}
	  </div>
	  <div class="col-auto">
	    <div class="btn-toolbar">
	      <button class="btn p-0 me-2" type="button" data-bs-toggle="modal" data-bs-target="#edit_column_modal" onclick="edit_column({{ loop.index0 }});"><i class="bi bi-pencil"></i></button>
	      <form method="GET" action="/table/{{ tblid }}">
		<input value="{{ loop.index }}" name="sort_field" hidden />
		<input value="{% if sort_field == loop.index %}{{ (sort_dir + 1) % 2}}{% else %}0{% endif %}" name="sort_dir" hidden />
		{% if sort_field == loop.index and sort_dir == 0 %}
		{% set dir='up' %}
		{% else %}
		{% set dir='down'%}
		{% endif %}
		<button class="btn p-0" type="submit"><i class="bi bi-sort-{{ dir }}"></i></button>
	      </form>
	    </div>
	  </div>
	</div>
      </th>
      {% endfor %}
    </tr>
  </thead>

  <!-- Table rows -->
  <tbody>
    {% for row in rows %}
    <tr>
      {% for column in row %}
      <td>{{ column }}</td>
      {% endfor %}
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endblock body %}
{% block modals %}
<!-- Table specific modals -->
{% include "table_modals" %}
{% endblock modals %}

{% block script %}
<!-- table specific values -->
<script type="text/javascript">
  const column_names = [{% for col in column_names %} '{{ col }}', {% endfor %}];
  const column_types = [{% for col in column_types %} {{ col }}, {% endfor %}];
  const tblid = {{ tblid }};
  const tblname = '{{ tblname }}';
</script>
<!-- Table specific functionality -->
<script type="text/javascript" src="/js/table.js"></script>
{% endblock script %}