dasaproject/django/Item/templates/Item/table_index.html

{% extends 'base.html' %}
{% load tz %}

{% block title %}
    {{title}}
{% endblock title %}

{% block search_nav %}
    <form class="d-flex" role="search" action="" method="GET">
        <input autocomplete=off onfocusout="focusout(this)" id="search" list="itemname" class="form-control me-2" type="search" placeholder="Search" aria-label="Search" name="q">
        <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  
    <datalist id="itemname">
    {% for item in items %}
        {{item.FullName}}
        <option value="{{item.FullName}}"><a href="{{item.get_absolute_url}}">{{item.FullName}}; {{item.SalesDesc}}; {{item.SalesPrice}}</a></option>"
    {% endfor %}
    </datalist>
{% endblock search_nav %}


{% block body %}
    <div class="container">
        <div>
            <a href="{{addurl}}" class="btn btn-primary mt-2">Add New</a>
        </div>
        <div class="table-responsive mt-2">
            <table id="tableId" class=" table table-sm table-scroll table-bordered border-info table-hover table-striped resizable">
                <thead><tr>
                {% for verbose_name, key, val in objects.0.get_field_name  %}
                <th>{{verbose_name}}</th>
                {% endfor %}
                <th></th>
                </tr></thead>
                <tbody>
                {% for object in objects %}
                    <tr>
                    {% for vn, key, val in object.get_field_name %}
                        {% if forloop.first %}
                        {% comment %} <td><a href="{% url 'edit_item' object.pk %}">{{object.Name|safe}}</a></td> {% endcomment %}
                            <td><a href="{{ object.get_absolute_url }}">
                                {% if object.Name %}
                                    {{object.Name|safe}}
                                {% elif object.CustomerName %}
                                    {{object.CustomerName}}
                                {% elif object.RefNumber %}
                                    {{object.RefNumber}}
                                {% endif %}
                            </a></td>
                        {% else %}
                            {% if key == "TimeModified" or key == "TimeCreated" %}
                                <td>{{val|localtime}}</td>
                            {% elif key == "ItemType" %}
                                <td>{{object.get_ItemType_display}}</td>
                            {% else %}
                                <td>{{val}}</td>
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>


    {% if objects.paginator.num_pages > 1 %}
    <div class = "d-flex justify-content-center aligns-items-center">
        <div class="pagination ">
            <span class="step-links">   
            {% if objects.has_previous %}
                <a href="?page=1{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}">&laquo; first</a>
                <a href="?page={{ objects.previous_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}">previous</a>
            {% endif %}
    
            <span class="current">
                Page {{ objects.number }} of {{ objects.paginator.num_pages }}.
            </span>
    
            {% if objects.has_next %}
                <a href="?page={{ objects.next_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}">next</a>
                <a href="?page={{ objects.paginator.num_pages }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}">last &raquo;</a>
            {% endif %}
            </span>
        </div>
    </div>
    {% endif %}

    <div id="result">
    test
    </div>
    

    <script>
        const search = document.getElementById('search');
        const result = document.getElementById('result');
        const itemname =  document.getElementById('itemname');
        function focusout(e){
            let Text = document.querySelector('option[value="' + e.value + '"]');
            if (Text){
            console.log(e.value)
            console.log(Text.text)
            }
            else {
                console.log("element not exist")
            }
    
        }
        const inputHandler = function(e) {
            console.log(e.target.Text)
          result.innerHTML = e.target.value;
        }
        
        search.addEventListener('input', inputHandler);
        search.addEventListener('propertychange', inputHandler);
    </script>

    <script> 
    //script to rezise columns TABLE
    //var tables = document.getElementsByClassName('flexiCol');
    var tables = document.getElementsByClassName('resizable');
    for (var i = 0; i < tables.length; i++) {
        //console.log(tables[i]);
      resizableGrid(tables[i]);
    }
    
    function resizableGrid(table) {
      var row = table.getElementsByTagName('tr')[0],
        cols = row ? row.children : undefined;
      if (!cols) return;
      table.style.overflow = 'hidden';
    
      var tableHeight = table.offsetHeight;
    
      for (var i = 0; i < cols.length; i++) {
        var div = createDiv(tableHeight);
        cols[i].appendChild(div);
        cols[i].style.position = 'relative';
        setListeners(div);
      }
    
      function setListeners(div) {
        var pageX, curCol, nxtCol, curColWidth, nxtColWidth, tableWidth;
    
        div.addEventListener('mousedown', function(e) {
    
          tableWidth = document.getElementById('tableId').offsetWidth;
          curCol = e.target.parentElement;
          nxtCol = curCol.nextElementSibling;
          pageX = e.pageX;
    
          var padding = paddingDiff(curCol);
    
          curColWidth = curCol.offsetWidth - padding;
          //  if (nxtCol)
          //nxtColWidth = nxtCol.offsetWidth - padding;
        });
    
        div.addEventListener('mouseover', function(e) {
          e.target.style.borderRight = '2px solid #0000ff';
        })
    
        div.addEventListener('mouseout', function(e) {
          e.target.style.borderRight = '';
        })
    
        document.addEventListener('mousemove', function(e) {
          if (curCol) {
            var diffX = e.pageX - pageX;
    
            // if (nxtCol)
            //nxtCol.style.width = (nxtColWidth - (diffX)) + 'px';
    
            curCol.style.width = (curColWidth + diffX) + 'px';
            console.log(curCol.style.width)
            console.log(tableWidth)
            document.getElementById('tableId').style.width = tableWidth + diffX + "px"
          }
        });
    
        document.addEventListener('mouseup', function(e) {
          curCol = undefined;
          nxtCol = undefined;
          pageX = undefined;
          nxtColWidth = undefined;
          curColWidth = undefined
        });
      }
    
      function createDiv(height) {
        var div = document.createElement('div');
        div.style.top = 0;
        div.style.right = 0;
        div.style.width = '5px';
        div.style.position = 'absolute';
        div.style.cursor = 'col-resize';
        div.style.userSelect = 'none';
        div.style.height = height + 'px';
        return div;
      }
    
      function paddingDiff(col) {
    
        if (getStyleVal(col, 'box-sizing') == 'border-box') {
          return 0;
        }
    
        var padLeft = getStyleVal(col, 'padding-left');
        var padRight = getStyleVal(col, 'padding-right');
        return (parseInt(padLeft) + parseInt(padRight));
    
      }
    
      function getStyleVal(elm, css) {
        return (window.getComputedStyle(elm, null).getPropertyValue(css))
      }
    };
    </script>
{% endblock body %}