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;
    allow_check allow_check|field.allow_check;
    check_field check_field|field.check_field;
    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;
    edit_buttons edit_buttons|field.edit_buttons;
    " 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-3">
            <div id="${tableid}-form-filter" class="collapse">
              ${structure:filter_form}
            </div>
          </div>
        </div>
        <!-- <div tal:condition="allow_check=='true'">
          <div class="row"> -->
           <!--
            <div class="input-group col-md-2">
              <span class="input-group-addon">
                <input type="checkbox" class="${tableid}checkAll"/>
              </span>
              <label for="${tableid}checkAll">Pilih Semua</label>
            </div>
          </div>
          -->
          
        <!-- </div> -->
        <table id="${tableid}" class="table table-bordered table-hover table-condensed dataTable no-footer">
          <thead>
          <tr>
            <tal:block tal:repeat="child field">
            <th class="no-sort" tal:condition="child.name=='id'">
              <input tal:condition="allow_check=='true'" type="checkbox" class="${tableid}checkAll" id="${tableid}checkAll"/>
              <span tal:condition="allow_check!='true'">${child.title}</span>
            </th>  
            <th tal:condition="child.name!='id'">
              ${child.title}
            </th>
            </tal:block>
          </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;
    var m${tableid}CheckList = [];
    var check_field = ${ check_field };
    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> ',
        },
        "infoEmpty": "Menampilkan 0 sampai 0 dari 0",
        "info": "Menampilkan _START_ sampai _END_ dari _TOTAL_",
        "infoFiltered": "(disaring dari _MAX_ total keseluruhan)",
        "lengthMenu": " _MENU_ baris ",
        "loadingRecords": "Sedang memuat...",
        "processing": "Sedang memproses...",
        "emptyTable": "Tidak ada data yang tersedia pada tabel ini",
        "zeroRecords": "Tidak ditemukan data yang sesuai",
      };


      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">';
        return value;
      }

      function render_checklist(value) {
        return '<input type="checkbox" class="${tableid}_check" checked="' + { value } + ' checked=false"></input>';
      }

      var mtableId = "${tableid}";
      for (let co in ${tableid}Columns) {
        if (${tableid}Columns[co].wg_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].wg_select === true) {
           ${tableid}Columns[co].render = function (value) {
             if (value != null)
               return ${tableid}Columns[co].wg_select_val[value];
             return "";
           }
        }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].render = function (id, typ, data, setting) {
            if (${tableid}Columns[co].action === false) return "";
            let result = "";
            <tal:block tal:condition="allow_check=='true'">
              var checked = "";
              if (check_field !== "") {
                //checked = data[check_field] !== null ? "checked" : "";
                //  m${tableid}CheckList.push(id);

              }
              result = '<input type="checkbox" class="' + mtableId + '_check" id="' + mtableId + '_check_' + id +'" value="' + id + '"  name="' + mtableId + '_check"/>&nbsp;';
            </tal:block>
            <tal:block tal:condition="allow_check=='false'">
              <tal:block tal:condition="allow_view=='true'">
                  result += '<a href="${url}/' + id + '/view"><i class="fas fa-eye" aria-hidden="true" title="View"></i></a>&nbsp;';
              </tal:block>
              <tal:block tal:condition="allow_edit=='true'">
                  result += '<a href="${url}/' + id + '/edit"><i class="fas fa-edit" aria-hidden="true" title="Edit"></i></a>&nbsp;'
              </tal:block>
              <tal:block tal:condition="allow_delete=='true'">
                  result += '<a href="${url}/' + id + '/delete"><i class="fas fa-trash" aria-hidden="true" title="Delete"></i></a>';
              </tal:block>
              <tal:block tal:condition="allow_post=='true'">
                  result += '<a href="${url}/' + id + '/post"><i class="fas fa-signs-post" aria-hidden="true" title="Post"></i></a>';
              </tal:block>
              <tal:block tal:condition="allow_post=='true'">
                  result += '<a href="${url}/' + id + '/unpost"><i class="fas fa-delete-left" aria-hidden="true" title="Unpost"></i></a>';
              </tal:block>
            </tal:block>
            return result;
          }
        }
      }

      //end column definition loop
      
      let ${tableid}Params = {};
      var param_ajax = "";
      var param_data = [];
      if (!${ server_side }) param_data = ${ data };
      else param_ajax = o${tableid}Url;

      o${tableid} = $('#${tableid}').DataTable({
        scrollX: ${ field.scroll_x },
        //scrollY: ${field.scroll_y},
        //dom: '<"row"<"col-md-8"<"toolbar">Bl><"col-md-4"fr>>tip',
        dom: '<"row"<"col-md-8"<"toolbar">>><"row"<"col-md-8"Bl><"col-md-4"fr>>t<"row dt-footer"<"col-md-8 sub-foot" i><"col-md-4"p>>',
        processing: true,
        serverSide: ${ server_side },
        data: param_data,
        ajax: param_ajax,
        stateSave: ${ state_save },
        scrollCollapse: true,
        sort: ${ sorts },
        info: true,
        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();
              }
            });
        }
      });

      let tb = tb_array.join(' ');
      $("div.toolbar").html(tb);
      $("div.toolbar").attr('style', 'display:block; float: left; margin-bottom:6px; line-height:16px;');
      $("div.dt-footer").attr('style', 'margin-left: -7px;');
      $("div.sub-foot").attr('style', 'position:unset;');
      $(".dataTables_scrollBody").attr('style', 'margin-top: -10px;');
      <tal:block tal:condition="allow_check=='true'">
      
      //Begin Allow Check
  $('#${tableid} tbody').on('click', ':checkbox', function () {
    var checkboxValue = $(this).val();
    if (this.checked) {
      // Add to list if not already present
      if (m${tableid}CheckList.indexOf(checkboxValue) === -1) {
        m${tableid}CheckList.push(checkboxValue);
      }
    }else {
      // Remove from list
      var index = m${tableid}CheckList.indexOf(checkboxValue);
      if (index > -1) {
        m${tableid}CheckList.splice(index, 1);
      }
    }
    console.log("Checkbox Clicked", m${tableid}CheckList);
    updateCheckAllStatus();
  });
  $('#${tableid} tbody').on('change', ':checkbox', function () {
    var checkboxValue = $(this).val();
    if (this.checked) {
      // Add to list if not already present
      if (m${tableid}CheckList.indexOf(checkboxValue) === -1) {
        m${tableid}CheckList.push(checkboxValue);
      }
    }else {
      // Remove from list
      var index = m${tableid}CheckList.indexOf(checkboxValue);
      if (index > -1) {
        m${tableid}CheckList.splice(index, 1);
      }
    }
    console.log("Checkbox Changed", m${tableid}CheckList);
    updateCheckAllStatus();
  });
  $("#${tableid}checkAll").on("click", '', function (e) {
    e.stopPropagation();
    if (this.checked) {
      // Check all checkboxes and add all to list
      $(".${tableid}_check").each(function () {
        $(this).prop("checked", true);
        var checkboxValue = $(this).val();
        if (m${tableid}CheckList.indexOf(checkboxValue) === -1) {
          m${tableid}CheckList.push(checkboxValue);
        }
      });
    }else {
      // Uncheck all checkboxes and clear list
      $(".${tableid}_check").prop("checked", false);
      m${tableid}CheckList = [];
    }
    console.log("Check All Clicked", m${tableid}CheckList);
  });

  // Function to update check all status based on individual checkboxes
  function updateCheckAllStatus() {
    var totalCheckboxes = $(".${tableid}_check").length;
    var checkedCheckboxes = $(".${tableid}_check:checked").length;

    if (checkedCheckboxes === 0) {
      $("#${tableid}checkAll").prop("checked", false);
      $("#${tableid}checkAll").prop("indeterminate", false);
    }else if (checkedCheckboxes === totalCheckboxes) {
      $("#${tableid}checkAll").prop("checked", true);
      $("#${tableid}checkAll").prop("indeterminate", false);
    }else {
      $("#${tableid}checkAll").prop("checked", false);
      $("#${tableid}checkAll").prop("indeterminate", true);
    }
  };

  // Function to get selected data from checked rows
  function get${tableid}SelectedData() {
    var selectedData = [];
    $(".${tableid}_check:checked").each(function() {
      var rowData = o${tableid}.row($(this).closest('tr')).data();
      if (rowData) {
        selectedData.push(rowData);
      }
    });
    return selectedData;
  };

  // Function to get selected IDs
  function get${tableid}SelectedIds() {
    return m${tableid}CheckList.slice(); // Return copy of the array
  };
      //End Allow Check
      </tal:block>
      $('#${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;
            o${tableid}.$('tr.row_selected').removeClass('row_selected');
          $(this).addClass('row_selected');
        }
      });


      <tal:block tal:condition="filter_columns">
      //Begin Filter Columns
      $(".${tableid}-control-filter").on('keyup', function (e) {
        var code = e.keyCode || e.which;
      if (code === 13) filter_table();
      });

      $("#${tableid}_length").append('<label>&emsp;${structure:edit_buttons}</label>');

      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 if ($(this).attr("type") === 'date') {
            value = this.value;
            localStorage.setItem(col_id, value);
            var splitted = col_id.split('-');
            if (splitted[splitted.length - 1] !== "min" && splitted[splitted.length - 1] !== "max"){
              o${tableid}.column($(this).data('index')).search(value)
            }
            else{
              var min_val = undefined;
              var max_val = undefined;
              if (splitted[splitted.length - 1] === "min") {
                min_val = this.value;
                splitted.length = splitted.length - 1;
                col_id = splitted.join("-");
                max_val = $("#" + col_id + '-max').val()
              }
              else {
                max_val = this.value;
                splitted.length = splitted.length - 1;
                col_id = splitted.join("-");
                min_val = $("#" + col_id + '-min').val();
              }
              if (min_val === undefined && max_val !== undefined) min_val = max_val;
              if (max_val === undefined && min_val !== undefined) max_val = min_val;
              if (max_val !== undefined && min_val !== undefined && min_val !== null && max_val !== null)
                o${tableid}
                  .column($(this).data('index'))
                  .search(min_val + '-yadcf_delim-' + max_val, true);
                  //&& min_val !== "" && max_val !== ""
            }
          }
          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");
        var typ = $(this).attr("type");
        if (typ === 'radio') {
        filter_table();
        }
      });
      $(".${tableid}-control-filter").on('change', function (e) {
        var typ = $(this).prop("nodeName").toLowerCase();
        if (typ === "select") filter_table();

        var typ = $(this).attr("type").toLowerCase();
        if (typ === "date") 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);
        }
      });

      filter_table();
      //End Filter Columns
      </tal:block>
      ${structure:btnscripts}
      ${structure:filter_scripts}
    
    }); // deform callback
    
  </script>
</div>