show_product.html

{% extends 'pos_base.html' %}
{% block content %}
    {% include 'navbar.html' %} 
    
    <div class="container d-lg-none">
       <h1>
        ขนาดของจอเล็กเกินไป
        </h1>
    </div>


    <div class='container d-none d-lg-block mt-5'>
    <a name="" id="" class="btn btn-lg btn-primary align-content-center" href="{% url 'add_product' %}" role="button">เพิ่มสินค้า</a>
        {% comment %} <button class='btn btn-outline-info'>  </button> {% endcomment %}
        {% comment %} unable to sort data in table have to fix it? {% endcomment %}
        <ul class="list-group list-group-flush">
            <li class="list-group-item m-0 p-1 list-group-item-primary">     
                <div class="row">          
                    <div class='col-lg-2  '>product id</div>
                    <div class='col-lg-2  '>name</div>
                    <div class='col-xl-2 d-lg-none d-xl-block '>description</div>
                    <div class='col-lg-2 col-xl-1 text-center'>price</div>
                    <div class='col-lg-2 col-xl-1 text-center'>quantity</div>
                    <div class='col-lg-2  text-center'>category</div>
                    <div class='col-lg-2  '>management</div>
                </div>
            </li>
            {% for product in products %}
        
            <li class="list-group-item m-0 p-1">     
                <div class="row">
                        
                    <div class='col-lg-2 '>{{product.product_id}}</div>
                    <div class='col-lg-2  text-truncate'>{{product.name}}</div>
                    <div class='col-lg-2 d-lg-none d-xl-block'><p  class='m-0'>{{product.description}}
                        {% comment %} ครับ สำหรับท่านที่เดินผ่านไปผ่านมานะครับ วันนี้ เฉาก๊วยชากังราวของเรานะครับ 
                        ก็ได้มาบริการท่านพ่อแม่พี่น้องกันอีกแล้วครับ อากาศร้อนๆ อย่างนี้นะครับ 
                        สำหรับท่านที่เดินผ่านไปผ่านมา ลองมาแวะชิมเฉาก๊วยแท้ๆ กันก่อนนะครับ 
                        เฉาก๊วยชากังราวของเราเป็นที่รู้จักไปทั่ว {% endcomment %}
                    </p></div>
                    <div class='col-lg-2 col-xl-1  text-center'>{{product.price}}</div>
                    <div class='col-lg-2 col-xl-1  text-center'>{{product.quantity}}</div>
                    <div class='col-lg-2  text-center'>{{product.category}}</div>
                    <div class='col-lg-2 '>
                        {% comment %} <a href='{% url "edit_product" %}'> {% endcomment %}
                        <button type="button" class="btn btn-small btn-outline-secondary" onclick='to_edit_page({{product.id}})'><i class="bi-list"></i></button>
                        {% comment %} </a> {% endcomment %}
                        <button type="button" class="btn btn-small" disabled></button>
                        {% comment %} <button type="button" class="btn btn-small btn-outline-secondary" data-toggle="modal" data-target="#confirm_delete" onclick='savePIDforDELETE({{product.id}})'><i class="bi-trash"></i></button> {% endcomment %}
                        <a href='{% url "deleteproduct" product.id %}'> <button type="button" class="btn btn-small btn-outline-secondary" ><i class="bi-trash"></i></button> </a>
                    </div>
                
                </div>
            </li>
            {% endfor %}
        </ul>
    </div>
    <script>
        console.log('hi');
        function to_edit_page(pid){
                window.location.href = '{% url "home" %}'+'management/editproduct/'+pid; 
        }
        
    </script>
{% endblock %}