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;
    form form|field.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">
        <table
            id="${tableid}"
            class="table table-bordered table-hover table-condensed dataTable no-footer">
          <thead>
          <tr>
            <th colspan="${next(field.counter)-1}" tal:condition="form">${structure: form}</th>
          </tr>
          <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) {
      // $(document).ready(function () {

      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}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].className = "text-center";
          ${tableid}Columns[co].width = "30pt";
          ${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;
          }
          ${tableid}Columns[co].width = "30pt";
          ${tableid}Columns[co].orderable = false;
          ${tableid}Columns[co].className = "text-center";
          ${tableid}Columns[co].visible = true;
          //columns[1].order = "order_asc";

        }
      }

      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}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,

      }
      if (!${server_side}) {
        ${tableid}Params.data = ${data};
      } else {
        ${tableid}Params.ajax = o${tableid}Url;
      }
      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');
        }
      });
        ${structure:btnscripts}
    });
  </script>
</div>