detable.pt

<div
     tal:define="style style|field.widget.style;
    css_class css_class|string:${field.widget.css_class or field.css_class or 'jarviswidget jarviswidget-color-blueLight'};
    item_template item_template|field.widget.item_template;
    title title|field.title;
    errormsg errormsg|field.errormsg;
    description description|field.description;
    buttons buttons|field.buttons;
    tableid tableid|field.tableid;
    columns columns|field.columns;
    btnscripts scripts|field.scripts;
    url url|field.url;
    url_suffix url_suffix|field.url_suffix;
    sorts sorts|field.sorts;
    filters filters|field.filters;
    paginates paginates|field.paginates;
    server_side server_side|field.server_side;
    data data|field.data;
    allow_edit allow_edit|field.allow_edit;
    allow_delete allow_delete|field.allow_delete;
    allow_view allow_view|field.allow_view;
    allow_post allow_post|field.allow_post;
    allow_unpost allow_unpost|field.allow_unpost;
    state_save state_save|field.state_save;
    filter_columns filter_columns|field.filter_columns;
    filter_scripts filter_scripts|field.filter_scripts;
    filter_form filter_form|field.filter_form;
    "
     tal:attributes="style style; class css_class; attributes|field.widget.attributes|{};"
     i18n:domain="detable"
>
  <header role="heading" class="txt-color-grayDark">
    <h2 tal:condition="title"><i class="fa fa-fw fa-table"></i>${title}</h2>
    <div class="alert alert-danger " role="alert" id="emptyID" style="opacity:0.7;display: none;">
      <strong>Pilih data terlebih dahulu!!</strong>
      <!--?      <button type="button" class="close" data-dismiss="alert" aria-label="Close">-->
      <!--?        <span aria-hidden="true">&times;</span>-->
      <!--?      </button>-->
    </div>
    <div role="content">
      <div class="widget-body">
        <div class="row" tal:condition="filter_columns" >
          <div id="${tableid}-form-filter-container" class="col-md-6">
            <div id="${tableid}-form-filter" class="collapse">
                ${structure:filter_form}
            </div>
          </div>
        </div>

        <table id="${tableid}"
               class="table table-bordered table-hover table-condensed dataTable no-footer">
          <thead>
          <tr>
            <th tal:repeat="child field">${child.title}</th>
          </tr>

          </thead>
          <tbody></tbody>
        </table>
      </div>
      <!-- widget-body -->
    </div>
  </header>
  <style>
    .fa-minus-square {
      color: red;
    }

    .fa-check-square {
      color: forestgreen;
    }
  </style>
  <script type="text/javascript">
    var m${tableid}ID;
    var o${tableid};
    var o${tableid}Uri = "${url}";
    var o${tableid}Url = o${tableid}Uri + "${url_suffix}";
    var m${tableid}ID;
    deform.addCallback('${tableid}', function (oid) {
          function displayEmptyID() {
            $("#emptyID").show();
            $('#emptyID').animate({opacity: 0.8}, 2000);
            setTimeout(function () {
                  $("#emptyID").fadeTo(500, 0).slideUp(500, function () {
                    $("#emptyID").hide();
                  });
                }
                , 4000);
          }

          let tb_array = [
            '<div class="btn-group pull-left">',
            '${structure:buttons}',
            '	&nbsp;',
            '</div>',
          ]

          let ${tableid}Language = {
            "search": "Cari: ",
            "paginate": {
              "first": '<span class="glyphicon glyphicon-step-backward"></span> ',
              "last": '<span class="glyphicon glyphicon glyphicon-step-forward"></span> ',
              "previous": '<span class="glyphicon glyphicon-backward"></span> ',
              "next": '<span class="glyphicon glyphicon-forward"></span> ',
            },
            "lengthMenu": " _MENU_ baris "
          };


          let ${tableid}Columns = ${structure: columns};

          function render_checkbox(value) {
            if (value === true) {
              return '<i class="fas fa-check-square" aria-hidden="true">';
            }
            if (value === false) {
              return '<i class="fas fa-minus-square" aria-hidden="true">';
              //'Archived';
            }
            return value;
          }

          function render_checklist(value) {

            return '<input type="checkbox" checked="' + {value} + '"></input>';
          }


          for (let co in ${tableid}Columns) {
            if (${tableid}Columns[co].checkbox === true) {
              ${tableid}Columns[co].render = function (value) {
                if (typeof value === "string" && value.length > 0) {
                  return render_checkbox(value)
                }
                if (["", false, 0, null].indexOf(value) === -1) {
                  return render_checkbox(true);
                }
                return render_checkbox(false);
              }
            } else if (${tableid}Columns[co].hasOwnProperty("url")) {
              let url = ${tableid}Columns[co].url;
              ${tableid}Columns[co].render = function (data) {
                let result = "No Data"
                if (data != null) {
                  result = '<a href="' + url + data + '" target="_blank">Link</a>&nbsp;';
                }
                return result;
              }
            } else if (${tableid}Columns[co].data === "id" && ${tableid}Columns[co].action === true) {
              ${tableid}Columns[co].render = function (id) {
                let result = ""
                if (${allow_view}) {
                  result = '<a href="${url}/' + id + '/view"><i class="fas fa-eye" aria-hidden="true" title="View"></i></a>&nbsp;';
                }
                if (${allow_edit}) {
                  result += '<a href="${url}/' + id + '/edit"><i class="fas fa-edit" aria-hidden="true" title="Edit"></i></a>&nbsp;'
                }
                if (${allow_delete}) {
                  result += '<a href="${url}/' + id + '/delete"><i class="fas fa-trash" aria-hidden="true" title="Delete"></i></a>';
                }
                if (${allow_post}) {
                  result += '<a href="${url}/' + id + '/post"><i class="fas fa-signs-post" aria-hidden="true" title="Post"></i></a>';
                }
                if (${allow_unpost}) {
                  result += '<a href="${url}/' + id + '/unpost"><i class="fas fa-delete-left" aria-hidden="true" title="Unpost"></i></a>';
                }
                return result;
              }
              //columns[1].order = "order_asc";
            }
          }


          let ${tableid}Params = {
            dom: '<"row"<"col-md-8"<"toolbar">Bl><"col-md-4"fr>>tip',
            processing: true,
            serverSide: ${server_side},
            stateSave: ${state_save},
            scrollCollapse: true,
            sort: ${sorts},
            info: false,
            filter: ${filters},
            autoWidth: false,
            paginate: ${paginates},
            paginationType: "full_numbers",
            order: [],
            lengthMenu: [
              [10, 25, 50, 100],
              [10, 25, 50, 100]
            ],
            pageLength: 25,
            columns: ${tableid}Columns,
            language: ${tableid}Language,
            initComplete: function () {
              $('.dataTables_filter input').unbind()
                  .bind('keyup', function (e) {
                    var code = e.keyCode || e.which;
                    if (code === 13) {
                      o${tableid}.search(this.value).draw();
                    }
                  });
            }
          }

          if (!${server_side}) {
            ${tableid}Params.data = ${data};
          } else {
            ${tableid}Params.ajax = o${tableid}Url;
          }

          //<talblock talcondition="filter_columns">
          //console.log(${tableid}Columns);
          //var html = "";
          //for (let co in ${tableid}Columns) {
          //  var col = ${tableid}Columns[co];
          //  if (col.searchable === true) {
          //    var col_id = "${tableid}-" + col.data;
          //    var col_val = localStorage.getItem(col_id);
          //    if (col_val === null || col_val === undefined) {
          //      col_val = "";
          //    }
          //    var txt = 'id="' + col_id + '" data-index="' + co + '" value="' + col_val + '"';
//
          //    html += '<div class="form-group">';
          //    if (col.checkbox === true) {
          //      var radioVal = [["", 'Semua'], [col.check_val[0], 'Aktif'], [col.check_val[1], 'Pasif']];
          //      html += '<label class="" for="' + col_id + '">' + col.title + '</label>';
          //      html += '<div class="input-group" id="' + col_id + '">';
          //      for (var rdo = 0; rdo < radioVal.length; rdo++) {
          //        var selected = (col_val === radioVal[rdo][0]) ? "checked" : "";
          //        txt = 'id="' + col_id + '-' + radioVal[rdo][0] + '" ' +
          //            'class="${tableid}-control-filter" data-index="' + co + '"' +
          //            'name="' + col_id + '" value="' + radioVal[rdo][0] + '" '+selected;
//
          //        html += '<label class="radio-inline">';
          //        html += '<input type="radio" ' + txt + '/>';
          //        html += '<label for="' + col_id + '-' + radioVal[rdo][0] + '">' + radioVal[rdo][1] + '</label>';
          //        html += '</label>';
          //      }
          //      html += '</div>';
          //    } else
          //      html += '<input type="text" class="form-control ' + "${tableid}" + '-control-filter" placeholder="' + col.title + '" ' + txt + '/>';
          //    html += '</div>';
          //  }
          //}


            ${structure: filter_scripts}

          o${tableid} = $('#${tableid}').DataTable(${tableid}Params);

          let tb = tb_array.join(' ');
          $("div.toolbar").html(tb);
          $("div.toolbar").attr('style', 'display:block; float: left; margin-bottom:6px; line-height:16px;');
          $('#${tableid} tbody').on('click', 'tr', function () {
            if ($(this).hasClass('selected')) {
              $(this).removeClass('selected');
              m${tableid}ID = null;
            } else {
              let aData = o${tableid}.row(this).data();
              o${tableid}.$('tr.selected').removeClass('selected');
              $(this).addClass('selected');
              m${tableid}ID = aData.id;
              //console.log("m${tableid}ID", m${tableid}ID);
              o${tableid}.$('tr.row_selected').removeClass('row_selected');
              $(this).addClass('row_selected');
            }
          });

          $(".${tableid}-control-filter").on('keyup', function (e) {
            var code = e.keyCode || e.which;
            if (code === 13) {
              filter_table()
            }
          });

          function filter_table() {
            $(".${tableid}-control-filter").each(function (e) {
              var col_id = $(this).attr("id")
              var value;
              if ($(this).attr("type") === 'radio') {
                col_id = $(this).attr('id').split("-");
                col_id.length = 2;
                col_id = col_id.join("-");
                value = this.value;
                if (this.checked) {
                  console.log(col_id, $(this).attr('id'), value, this.checked);
                  localStorage.setItem(col_id, value);
                  o${tableid}
                      .column($(this).data('index'))
                      .search(this.value)
                }
              } else {
                col_id = this.id;
                value = this.value;
                if (value === undefined || value === null) {
                  value = "";
                }
                console.log(col_id, $(this).attr('id'), value, $(this).data('index'));
                localStorage.setItem(col_id, value);
                o${tableid}
                    .column($(this).data('index'))
                    .search(value);
              }
            });
            o${tableid}.draw();
          }

          $(".${tableid}-control-filter").on('click', function (e) {
            console.log("Write Data Click");
            if ($(this).attr("type") === 'radio') {
              filter_table()
            }
          });

          console.log("Read Data");
          $(".${tableid}-control-filter").each(function (e) {
            var col_id = $(this).attr("id")
            var value;
            if ($(this).attr("type") === 'radio') {
              col_id = $(this).attr('id').split("-");
              col_id.length = 2;
              col_id = col_id.join("-");
              value = localStorage.getItem(col_id);
              if (value !== undefined && value != null)
                if ($(this).val() === value) $(this).attr("checked", true);
                else $(this).attr("checked", false);
            } else {
              value = localStorage.getItem(col_id);
              if (value !== undefined && value !== null)
                $(this).val(value);
            }
            console.log(col_id, $(this).attr('id'), value);
          })

            ${structure:btnscripts}
        }
    )
    ;
  </script>
</div>