list data perbaikan

API/urls.py

@@ -82,5 +82,6 @@ urlpatterns = [
     path('edit_detail_poin', views.edit_detail_poin),
     path('dpoint', views.dpoint, name='dpoint'),
     
-    path('download_perbaikan_data', views.download_perbaikan_data)
+    path('download_perbaikan_data', views.download_perbaikan_data),
+    path('search_list_perbaikan', views.search_list_perbaikan)
 ]
\ No newline at end of file

API/views.py

@@ -3690,3 +3690,28 @@ def dpoint(request):
     
     respon={'data':data, 'info': info, 'status':status}
     return Response(respon)
+
+@api_view(('GET',))
+def search_list_perbaikan(request):
+    v = request.GET.get('v_list')
+    with conn.cursor() as list_s:
+        list_s.execute(
+                        """SELECT
+                        gl.NAME,
+                        tp.id_object,
+                        tp.NAME,
+                        tp.TYPE,
+                        tp.tgl_perbaikan,
+                        tp.anggaran,
+                        tp.tgl_selesai 
+                    FROM
+                        ( SELECT tbl_perbaikan.*, ROW_NUMBER ( ) OVER ( PARTITION BY id_object ORDER BY tgl_selesai DESC ) AS rn FROM tbl_perbaikan ) tp
+                        JOIN geo_label gl ON gl.ID = tp.type_id 
+                    WHERE
+                        rn = 1 
+                        AND ( gl.NAME ILIKE'{}%' OR tp.NAME ILIKE'{}%' OR tp.TYPE ILIKE'{}%' OR tp.anggaran ILIKE'{}%' )""".format(v,v,v,v))
+        search_list = list_s.fetchall()
+        
+    
+    return Response(search_list)
+    
\ No newline at end of file

templates/includes/sidebar.html

@@ -445,6 +445,18 @@ background: none;border-color: transparent;">
 
         <div class="panel-body " style="padding:14px 0px;">
             <table class="table table-responsive datatable-show-all table-sm bg-slate-610 list_perb" id="list_perbaikan" style="font-size : 8pt;padding:0px;border-top:0.5pt solid #343434;border-bottom:0.5pt solid #343434;margin-bottom: 10px;">
+                <div style="margin-left: 30px;" class="search_list">
+                    <input type="search" class="inp_search_list" placeholder="Data Perbaikan..." style="    outline: 0;
+                    width: 200px;
+                    height: 36px;
+                    padding: 7px 12px;
+                    padding-right: 36px;
+                    font-size: 13px;
+                    line-height: 1.5384616;
+                    color: #333333;
+                    background-color: #fff;
+                    border: 1px solid #ddd;border-radius: 3px;">
+                </div>
                 <div style="position: absolute;right: 30px;font-size: 10pt;">
                     <a class="btn side-bar-but" id="download_perbaikan" onclick="download_all('xlsx')" style="color: white;z-index:9;">
                         <div>
@@ -727,6 +739,8 @@ background: none;border-color: transparent;">
     $(document).ready(function() {
         var x = window.matchMedia("(min-width: 700px)")
         if (x.matches) { // If media query matches
+            $(".search_list").css('display', 'none')
+
             $.fn.dataList = function(options) {
                 this.each(function() {
                     var $table = $(this);
@@ -781,6 +795,8 @@ background: none;border-color: transparent;">
                 },
             });
         } else {
+            $(".search_list").css('display', 'block')
+            $("#download_perbaikan").css('display', 'none')
                 //            document.querySelector("#perbaikan-dashboard\\  > div > div.container-detached > div > ul > li > div:nth-child(1)").style.display = 'none';
                 //$('.datatab').dataTable({
                 //    "pageLength": 15
@@ -1371,4 +1387,69 @@ background: none;border-color: transparent;">
     function destroymodper() {
         $("#modal_detail_perbaikan").modal('hide')
     }
+
+    $(".search_list").on('input', function() {
+        var v = $(".inp_search_list").val()
+        $.ajax({
+            url: "api/search_list_perbaikan",
+            dataType: 'json',
+            data: {
+                'v_list': v
+            },
+            success: function(data) {
+                var data_perbaikan = []
+                var number = 0;
+
+                for (var i = 0; i < data.length; i++) {
+
+                    number += 1;
+                    var name_perbaikan = data[i][0];
+                    var id_object = data[i][1];
+                    var name = data[i][2];
+                    var type = data[i][3];
+                    var tgl_perbaikan = data[i][4];
+                    var anggaran = data[i][5];
+                    var tgl_selesai = data[i][6];
+
+
+                    var data_gab = `<li class="media panel panel-body stack-media-on-mobile" style="background: transparent;border: none;color: white;">
+                        <div>
+                            ` + number + `
+                        </div>
+                        <div>
+                            ` + name_perbaikan + `
+                        </div>
+                        <div>
+                            ` + name + `
+                        </div>
+                        <div>
+                            ` + type + `
+                        </div>
+                        <div>
+                            ` + tgl_perbaikan + `
+                        </div>
+                        <div>
+                            ` + tgl_selesai + `
+                        </div>
+                        <div>
+                            ` + anggaran + `
+                        </div>
+                        <div>
+                            <a class="btn mdlFire " onclick="loaddetailid( '` + id_object + `') " data-toggle="modal" data-target="#modal_detail_perbaikan" style="background-color: #5A9AFB;color: white;border-radius: 5px;width: 85px;height: 25px; ">
+                                <div style="margin-top: -5px; ">
+                                    <i class="icon-search4 text-muted text-size-base " style="color: white;font-size: 10px; "></i>
+                                    <span>&nbsp;&nbsp;
+                                        Detail</span>
+                                </div>
+                            </a>
+                        </div>
+                    </li>`;
+                    data_perbaikan.push(data_gab)
+                };
+
+                $(".datatab").html(data_perbaikan)
+            }
+        });
+
+    });
 </script>
\ No newline at end of file