updates

Controllers/ApiController.cs

@@ -0,0 +1,195 @@
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Mvc;
+using static DbTableClass;
+using static resultClass;
+using System.Data.SqlClient;
+using Dapper.Contrib.Extensions;
+using Dapper;
+using Newtonsoft.Json;
+
+namespace QuotationMaker.Controllers
+{
+    [Route("Api")]
+    public class ApiController : ControllerBase
+    {
+        private readonly IHttpContextAccessor _httpContextAccessor;
+
+        DbConn dbConn = new DbConn();
+        SqlConnection conn = new SqlConnection(GlobalClass.appsettings("ConnectionStrings:SQLConnectionString"));
+        SqlConnection elabConn = new SqlConnection(GlobalClass.appsettings("ConnectionStrings:ElabConnectionString"));
+
+        public ApiController(IHttpContextAccessor httpContextAccessor)
+        {
+            this._httpContextAccessor = httpContextAccessor;
+
+
+        }
+
+        [Route("addEditDelGetCompany")]
+        public ActionResult AddEditDelSubItem(IFormCollection obj)
+        {
+            companyListResult ret = new companyListResult();
+
+            authToken token = new authToken(this._httpContextAccessor);
+            if (token.user_isLogin == false)
+            {
+                HttpContext.Response.Cookies.Delete("token_key");
+                ret.ret = "no";
+                ret.err_code = "99999";
+                ret.message = "非登入狀態!";
+                return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+            }
+
+           
+
+            string company_uid = obj["company_uid"].ToString();
+            string company_name = obj["company_name"].ToString();
+            string company_serialNo = obj["company_serialNo"].ToString();
+            string company_address = obj["company_address"].ToString();
+            string company_tel = obj["company_tel"].ToString();
+            string company_fax = obj["company_fax"].ToString();
+
+            string method = obj["method"].ToString();
+
+
+
+
+            if (method == "")
+            {
+                ret.ret = "no";
+                ret.err_code = "0001";
+                ret.message = "沒有method!";
+                return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+            }
+
+
+
+            
+
+            if (method == "add")
+            {
+                if (company_name.Trim() == "")
+                {
+                    ret.ret = "no";
+                    ret.err_code = "0003";
+                    ret.message = "沒有company_name!";
+                    return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+                }
+
+                company_uid = GlobalClass.CreateRandomCode(24);
+                company newItem = new company();
+                newItem.company_name = company_name;
+                newItem.company_uid = company_uid;
+                newItem.company_serialNo = company_serialNo;
+                newItem.company_address = company_address;
+                newItem.company_tel = company_tel;
+                newItem.company_fax = company_fax;
+
+                newItem.company_lastmodify_uid = token.user_uid;
+                newItem.company_createdate = DateTime.Now;
+                newItem.company_modifydate = DateTime.Now;
+
+                conn.Insert(newItem);
+                ret.companys.Add(newItem);
+                ret.ret = "yes";
+
+                return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+            }
+
+            if (company_uid.Trim() == "")
+            {
+                ret.ret = "no";
+                ret.err_code = "0002";
+                ret.message = "沒有company_uid!";
+                return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+            }
+
+
+
+            company editItem = conn.QueryFirstOrDefault<company>("select * from company where company_isdel = 'N' and company_uid = @company_uid ", new { company_uid = company_uid });
+
+            if (editItem == null)
+            {
+                ret.ret = "no";
+                ret.err_code = "0004";
+                ret.message = "沒有company_uid此筆資料!";
+                return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+            }
+
+            if (method == "edit")
+            {
+                
+
+                if (company_name.Trim() == "")
+                {
+                    ret.ret = "no";
+                    ret.err_code = "0002";
+                    ret.message = "沒有company_name!";
+                    return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+                }
+
+                editItem.company_name = company_name;
+
+                editItem.company_serialNo = company_serialNo;
+                editItem.company_address = company_address;
+                editItem.company_tel = company_tel;
+                editItem.company_fax = company_fax;
+
+                editItem.company_lastmodify_uid = token.user_uid;
+                editItem.company_modifydate = DateTime.Now;
+
+                conn.Update(editItem);
+                ret.companys.Add(editItem);
+                ret.ret = "yes";
+
+                return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+            }
+
+            if (method == "get")
+            {
+                ret.companys.Add(editItem);
+                ret.ret = "yes";
+
+                return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+            }
+
+            if (method == "del")
+            {
+                editItem.company_isdel = "Y";
+                editItem.company_lastmodify_uid = token.user_uid;
+                editItem.company_modifydate = DateTime.Now;
+
+                conn.Execute("update contactPerson set contactPerson_isdel = 'Y' where company_uid = @company_uid ", new { company_uid = company_uid });
+
+                conn.Update(editItem);
+                ret.ret = "yes";
+
+                return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+            }
+
+            return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+        }
+
+        [Route("companyList")]
+        public ActionResult AuthSubItemList(IFormCollection obj)
+        {
+            companyListResult ret = new companyListResult();
+
+            authToken token = new authToken(this._httpContextAccessor);
+            if (token.user_isLogin == false)
+            {
+                HttpContext.Response.Cookies.Delete("token_key");
+                ret.ret = "no";
+                ret.err_code = "99999";
+                ret.message = "非登入狀態!";
+                return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+            }
+
+  
+
+            ret.companys = conn.Query<company>("select * from company where company_isdel = 'N' ").ToList();
+            ret.ret = "yes";
+            return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+        }
+    }
+}

Controllers/AuthApiController.cs

@@ -21,10 +21,10 @@ namespace QuotationMaker.Controllers
         public AuthApiController(IHttpContextAccessor httpContextAccessor)
         {
             this._httpContextAccessor = httpContextAccessor;
-
-
         }
 
+        
+
         [Route("addEditDelGetSubItem")]
         public ActionResult AddEditDelSubItem(IFormCollection obj) {
             authSubItemResult ret = new authSubItemResult();

Controllers/HomeController.cs

@@ -22,6 +22,18 @@ namespace QuotationMaker.Controllers
             return View();
         }
 
+        public IActionResult CompanyList()
+        {
+            if (checkToken() == false)
+            {
+                HttpContext.Response.Cookies.Delete("token_key");
+                return Redirect("~/Home/Login");
+            }
+
+
+            return View();
+        }
+
         public IActionResult RateList()
         {
             if (checkToken() == false)

Modals/DbTableClass.cs

@@ -8,6 +8,44 @@ using Newtonsoft.Json.Linq;
 
 public class DbTableClass
 {
+    [Table("contactPerson")]
+    public class contactPerson
+    {
+        [JsonIgnore]
+        [Key]
+        public int contactPerson_sn { get; set; }
+        public string company_uid { get; set; } = "";
+        public string contactPerson_uid { get; set; } = "";
+        public string contactPerson_name { get; set; } = "";
+        public string contactPerson_email { get; set; } = "";
+        public string contactPerson_tel { get; set; } = "";
+        public string contactPerson_isdel { get; set; } = "N";
+        public DateTime contactPerson_createdate { get; set; } = DateTime.Now;
+        public DateTime contactPerson_modifydate { get; set; } = DateTime.Now;
+        public string contactPerson_lastmodify_uid { get; set; } = "";
+    }
+
+
+
+    [Table("company")]
+    public class company
+    {
+        [JsonIgnore]
+        [Key]
+        public int company_sn { get; set; }
+        public string company_uid { get; set; } = "";
+        public string company_name { get; set; } = "";
+        public string company_serialNo { get; set; } = "";
+        public string company_address { get; set; } = "";
+        public string company_tel { get; set; } = "";
+        public string company_fax { get; set; } = "";
+        public string company_isdel { get; set; } = "N";
+        public DateTime company_createdate { get; set; } = DateTime.Now;
+        public DateTime company_modifydate { get; set; } = DateTime.Now;
+        public string company_lastmodify_uid { get; set; } = "";
+    }
+
+
     [Table("subItem")]
     public class subItem
     {

Modals/resultClass.cs

@@ -4,6 +4,21 @@ using Dapper;
 using static DbTableClass;
 public class resultClass
 {
+    public class contactPersonListResult
+    {
+        public string ret = "no";
+        public string err_code = "0000";
+        public string message = "";
+        public List<contactPerson> contactPersons = new List<contactPerson>();
+    }
+
+    public class companyListResult
+    {
+        public string ret = "no";
+        public string err_code = "0000";
+        public string message = "";
+        public List<company> companys = new List<company>();
+    }
     public class authMainItemResult
     {
         public string ret = "no";

Views/Home/CompanyList.cshtml

@@ -0,0 +1,116 @@
+@*
+    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
+*@
+@{
+    Layout = "_LooperLayout";
+}
+
+@section Style {
+    <link rel="stylesheet" href="~/assets/vendor/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css">
+}
+@section Script {
+    <script src="~/assets/vendor/datatables.net/js/jquery.dataTables.min.js"></script>
+    <script src="~/assets/vendor/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
+    <script src="~/assets/vendor/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js"></script>
+    <script src="~/assets/javascript/pages/dataTables.bootstrap.js"></script>
+    <script src="~/assets/javascript/custom/companylist.js" asp-append-version="true"></script>
+}
+
+<div class="page-inner">
+    <!-- .page-title-bar -->
+    <header class="page-title-bar">
+        <!-- .breadcrumb -->
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item active">
+                    <a href="#"><i class="breadcrumb-icon fa fa-angle-left mr-2"></i>客戶清單</a>
+                </li>
+            </ol>
+        </nav><!-- /.breadcrumb -->
+        <!-- title -->
+        <h1 class="page-title"> 客戶清單 </h1>
+        <p class="text-muted">  </p><!-- /title -->
+    </header><!-- /.page-title-bar -->
+    <!-- .page-section -->
+    <div class="page-section">
+        <button type="button" id="maintItemNewModal" class="btn btn-primary btn-floated position-absolute" title="Add new client"><i class="fa fa-plus"></i></button>
+       
+        <!-- .card -->
+        <div class="card card-fluid">
+            <!-- .card-body -->
+            <div class="card-body">
+                <!-- .table -->
+                <table id="dt-responsive" class="table dt-responsive nowrap w-100">
+                    <thead>
+                        <tr>
+                            <th> 公司名稱 </th>
+                            <th> 統編 </th>
+                            <th> 電話 </th>
+                            <th> 地址 </th>
+                            <th> 功能 </th>
+                        </tr>
+                    </thead>
+
+                </table><!-- /.table -->
+            </div><!-- /.card-body -->
+        </div><!-- /.card -->
+    </div><!-- /.page-section -->
+</div>
+
+<!-- .modal -->
+<form id="clientItemEditForm" name="clientItemEditForm">
+    <div class="modal fade" id="mainItemModal" tabindex="-1" role="dialog" aria-labelledby="mainItemModalLabel" data-backdrop="static"
+         data-keyboard="false" aria-hidden="true">
+        <!-- .modal-dialog -->
+        <div class="modal-dialog" role="document">
+            <!-- .modal-content -->
+            <div class="modal-content">
+                <!-- .modal-header -->
+                <div class="modal-header">
+                    <h6 id="mainItemModalLabel" class="modal-title inline-editable">
+                        <span class="sr-only">客戶公司資料</span> <input id="group_content" type="text" class="form-control form-control-lg" value="" placeholder="客戶公司資料" readonly="readonly " required="">
+                    </h6>
+                </div><!-- /.modal-header -->
+                <!-- .modal-body -->
+                <div class="modal-body">
+                    <input type="hidden" id="company_method" />
+                    <input type="hidden" id="company_uid" />
+                    <!-- .form-group -->
+                    <div class="form-group">
+                        <div class="form-label-group">
+                            <input type="text" id="modal_company_name" class="form-control" value="" placeholder="公司名稱" maxlength="30" required=""> <label for="modal_company_name">公司名稱</label>
+                        </div>
+                    </div>
+                    <!-- /.form-group -->
+                    <div class="form-group">
+                        <div class="form-label-group">
+                            <input type="text" id="modal_company_serialNo" class="form-control" value="" placeholder="統編" maxlength="30" required=""> <label for="modal_company_serialNo">統編</label>
+                        </div>
+                    </div><!-- /.form-group -->
+                    <!-- /.form-group -->
+                    <div class="form-group">
+                        <div class="form-label-group">
+                            <input type="text" id="modal_company_address" class="form-control" value="" placeholder="地址" maxlength="35" required=""> <label for="modal_company_address">地址</label>
+                        </div>
+                    </div><!-- /.form-group -->
+                    <!-- /.form-group -->
+                    <div class="form-group">
+                        <div class="form-label-group">
+                            <input type="text" id="modal_company_tel" class="form-control" value="" placeholder="電話" maxlength="20" required=""> <label for="modal_company_tel">電話</label>
+                        </div>
+                    </div><!-- /.form-group -->
+                    <!-- /.form-group -->
+                    <div class="form-group">
+                        <div class="form-label-group">
+                            <input type="text" id="modal_company_fax" class="form-control" value="" placeholder="傳真" maxlength="20" required=""> <label for="modal_company_fax">傳真</label>
+                        </div>
+                    </div><!-- /.form-group -->
+                </div><!-- /.modal-body -->
+                <!-- .modal-footer -->
+                <div class="modal-footer">
+                    <button type="button" id="mainItemDialogSaveBtn" class="btn btn-primary">Save</button> <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
+                </div><!-- /.modal-footer -->
+            </div><!-- /.modal-content -->
+        </div><!-- /.modal-dialog -->
+    </div>
+</form><!-- /.modal -->

Views/Shared/_LooperLayout.cshtml

@@ -132,6 +132,10 @@
                                 <a href="~/Home/ProjectList" class="menu-link"><span class="menu-icon oi oi-box"></span> <span class="menu-text">報價單清單</span></a>
                             </li><!-- /.menu-item -->
                             <!-- .menu-item -->
+                            <li class="menu-item">
+                                <a href="~/Home/CompanyList" class="menu-link"><span class="menu-icon oi oi-box"></span> <span class="menu-text">客戶清單</span></a>
+                            </li><!-- /.menu-item -->
+                            <!-- .menu-item -->
                             <li class="menu-item has-child" id="authMenu" style='@ViewData["authMenu"]'>
                                 <a href="#" class="menu-link"><span class="menu-icon oi oi-wrench"></span> <span class="menu-text">Auth</span></a> <!-- child menu -->
                                 <ul class="menu">

wwwroot/assets/javascript/custom/companylist.js

@@ -0,0 +1,329 @@
+var mainItemTable;
+var mainItemRowID;
+var mainItemRowPos;
+
+var subItemTable;
+var subItemRowID;
+var subItemRowPos;
+
+$(document).ready(function () {
+    loadDataTable();
+
+    $('#maintItemNewModal').on('click', function () {
+        $("#company_method").val('add');
+        $('#mainItemModal').modal('toggle');
+    });
+
+    $('#mainItemDialogSaveBtn').on('click', function () {
+        var method = $('#company_method').val();
+        var company_uid = $('#company_uid').val();
+        var company_name = $('#modal_company_name').val();
+        var company_serialNo = $('#modal_company_serialNo').val();
+        var company_address = $('#modal_company_address').val();
+        var company_fax = $('#modal_company_fax').val();
+        var company_tel = $('#modal_company_tel').val();
+
+        if (company_name == "") {
+            alert('請輸入公司名稱');
+            retur;
+        }
+
+        var formData = {
+            method: method,
+            company_uid: company_uid,
+            company_name: company_name,
+            company_serialNo: company_serialNo,
+            company_address: company_address,
+            company_tel: company_tel,
+            company_fax: company_fax
+        }
+
+        $.ajax({
+            url: "/Api/addEditDelGetCompany",
+            type: "post",
+            data: formData,
+            success: function (data, textStatus, jqXHR) {
+                if (data.ret == "yes") {
+                    var obj = data.companys[0];
+
+                    if (method == "add") {
+                        mainItemTable.fnAddData(obj);
+                    }
+
+                    if (method == "edit") {
+                        mainItemTable.fnUpdate(obj, mainItemRowPos);
+                    }
+
+
+
+                    $('#mainItemModal').modal('toggle');
+                } else {
+                    alert(data.message);
+
+                    if (data.err_code == "99999") {
+                        location.href = "/Root/Login";
+                    }
+                }
+            },
+            error: function (jqXHR, textStatus, errorThrown) {
+                alert('網路或伺服器發生錯誤，請稍後重試!');
+            }
+        });
+    });
+});
+
+function buttonClick(obj) {
+
+    var type = obj.getAttribute('data-method');
+    var uid = obj.getAttribute('data-uid');
+
+    mainItemRowID = $('#' + uid);
+
+    mainItemRowPos = mainItemTable.fnGetPosition($('#' + uid)[0]);
+
+    if (type == "preview") {
+        var mainItem_name = obj.innerText.trim();
+        var formData = {
+            dept_uid: dept_uid,
+            mainItem_uid: uid
+        }
+
+        $.ajax({
+            url: "/AuthApi/authSubItemList",
+            type: "post",
+            data: formData,
+            success: function (data, textStatus, jqXHR) {
+                if (data.ret == "yes") {
+                    var obj = data.subItems;
+
+                    $('#dt-responsive-subItem').dataTable().fnClearTable();
+                    if (obj.length > 0) {
+
+                        $('#dt-responsive-subItem').dataTable().fnAddData(obj);
+                    }
+                    $('#mainItemTitle').val(mainItem_name + ' 的子項目列表').trigger('change');
+
+                    $('#subItemList_mainItem_uid').val(uid);
+                    $('#clientSubItemListModal').modal('toggle');
+                } else {
+                    alert(data.message);
+
+                    if (data.err_code == "99999") {
+                        location.href = "/Root/Login";
+                    }
+                }
+            },
+            error: function (jqXHR, textStatus, errorThrown) {
+                alert('網路或伺服器發生錯誤，請稍後重試!');
+            }
+        });
+    }
+
+    if (type == "edit") {
+        var formData = {
+            method: 'get',
+            company_uid: uid
+        }
+
+        $.ajax({
+            url: "/Api/addEditDelGetCompany",
+            type: "post",
+            data: formData,
+            success: function (data, textStatus, jqXHR) {
+                if (data.ret == "yes") {
+                    var obj = data.companys[0];
+
+                    $("#company_method").val('edit');
+                    $("#company_uid").val(obj.company_uid);
+                    $("#modal_company_name").val(obj.company_name).trigger('change');
+                    $("#modal_company_serialNo").val(obj.company_serialNo).trigger('change');
+                    $("#modal_company_address").val(obj.company_address).trigger('change');
+                    $("#modal_company_tel").val(obj.company_tel).trigger('change');
+                    $("#modal_company_fax").val(obj.company_fax).trigger('change');
+
+                    $('#mainItemModal').modal('toggle');
+                } else {
+                    alert(data.message);
+
+                    if (data.err_code == "99999") {
+                        location.href = "/Root/Login";
+                    }
+                }
+            },
+            error: function (jqXHR, textStatus, errorThrown) {
+                alert('網路或伺服器發生錯誤，請稍後重試!');
+            }
+        });
+
+
+    }
+
+    if (type == "del") {
+        if (confirm('確定刪除此筆資料? 所有子項目也會一併刪除~')) {
+            if (confirm('再次確認是否刪除所有此公司資料與成員?')) {
+                var formData = {
+                    method: 'del',
+                    company_uid: uid
+                }
+
+                $.ajax({
+                    url: "/Api/addEditDelGetCompany",
+                    type: "post",
+                    data: formData,
+                    success: function (data, textStatus, jqXHR) {
+                        if (data.ret == "yes") {
+                            var row = mainItemTable.api().row(mainItemRowID).remove().draw(false);
+                            alert('刪除成功');
+
+                        } else {
+                            alert(data.message);
+
+                            if (data.err_code == "99999") {
+                                location.href = "/Root/Login";
+                            }
+                        }
+                    },
+                    error: function (jqXHR, textStatus, errorThrown) {
+                        alert('網路或伺服器發生錯誤，請稍後重試!');
+                    }
+                });
+            }
+
+        }
+    }
+}
+function loadDataTable() {
+    var dataTables = {
+        init: function init() {
+
+            this.bindUIActions();
+        },
+        bindUIActions: function bindUIActions() {
+
+            // event handlers
+            this.table = this.handleDataTables();
+
+            // add buttons
+            //this.table.buttons().container().appendTo('#dt-buttons').unwrap();
+        },
+        handleDataTables: function handleDataTables() {
+            //$('#myTable').append("<tfoot><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tfoot>");
+            return $('#dt-responsive').DataTable({
+                dom: '<\'text-muted\'Bif>\n        <\'table-responsive\'trl>\n        <\'mt-4\'p>',
+                lengthChange: true,
+                lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
+                pageLength: 50,
+                buttons: [
+                    //{
+                    //    text: '休假設定',
+                    //    action: function (e, dt, node, config) {
+                    //        vacationBtnFun();
+
+                    //    }
+                    //},
+                    //'excelHtml5'
+                ],
+                language: {
+                    paginate: {
+                        previous: '<i class="fa fa-lg fa-angle-left"></i>',
+                        next: '<i class="fa fa-lg fa-angle-right"></i>'
+                    },
+                    buttons: {
+                        copyTitle: 'Data copied',
+                        copyKeys: 'Use your keyboard or menu to select the copy command'
+                    }
+                },
+                autoWidth: false,
+                ajax: {
+                    url: '/Api/companyList',
+                    type: 'POST',
+                    data: function (d) {
+                        Object.assign(d, {
+                            dept_uid: ''
+                        });
+
+                        return d;
+                    },
+                    dataSrc: 'companys'
+                },
+                rowId: 'company_uid',
+                deferRender: true,
+                initComplete: function () {
+                    mainItemTable = $('#dt-responsive').dataTable();
+                    $('#dt-responsive').on('click', 'a', function () {
+                        buttonClick(this);
+                    });
+
+                    $('#dt-responsive').on('click', 'button', function () {
+                        buttonClick(this);
+                    });
+
+
+                },
+                order: [[1, 'desc']],
+                info: true,
+                search: "搜尋:",
+                searching: true,
+                columns: [
+                    { data: 'company_name', className: 'align-top text-left', orderable: true, searchable: true },
+                    { data: 'company_serialNo', className: 'align-top text-center', orderable: false, searchable: true },
+                    { data: 'company_tel', className: 'align-top text-center', orderable: false, searchable: true },
+                    { data: 'company_address', className: 'align-top text-center', orderable: false, searchable: true }
+                ],
+                columnDefs: [
+                    {
+                        targets: 0,
+                        className: 'align-middle text-left',
+                        orderable: false,
+                        searchable: true,
+                        render: function render(data, type, row, meta) {
+
+
+                            return '<a href="javascript: void(0);" data-uid="' + row.company_uid + '" data-method="preview" >' + row.company_name + '</a>';
+
+                        }
+                    },
+                    {
+                        targets: 4,
+                        orderable: false,
+                        searchable: false,
+                        render: function render(data, type, row, meta) {
+                            var ret = '';
+
+                            ret += '<button type="button" data-uid="' + row.company_uid + '" data-method="edit" class="btn btn-sm btn-icon btn-secondary" ><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></button>';
+                            ret += '<button type="button" data-uid="' + row.company_uid + '" data-method="del" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>';
+                            return ret;
+                        }
+                    }
+
+                ],
+                responsive: {
+                    details: {
+                        display: $.fn.dataTable.Responsive.display.childRowImmediate,
+                        type: ''
+                    }
+                }
+            });
+        },
+        handleSearchRecords: function handleSearchRecords() {
+            var self = this;
+
+            $('#table-search, #filterBy').on('keyup change focus', function (e) {
+                var filterBy = $('#filterBy').val();
+                var hasFilter = filterBy !== '';
+                var value = $('#table-search').val();
+
+                self.table.search('').columns().search('').draw();
+
+                if (hasFilter) {
+                    self.table.columns(filterBy).search(value).draw();
+                } else {
+                    self.table.search(value).draw();
+                }
+
+            });
+        }
+    }
+
+    dataTables.init();
+}