fleet-contractor/Site/Maintenance/CustomerRecordManagement.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Maintenance/MaintenanceBase.master" AutoEventWireup="true" CodeFile="CustomerRecordManagement.aspx.cs" Inherits="Maintenance_CustomerRecordManagement" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <style type="text/css">
        .no_wrap th {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .max160 {
            max-width: 160px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .dialog-content table {
            border-collapse: collapse;
            width: 100%;
            line-height: 32px;
        }

            .dialog-content table td.label {
                width: 130px;
                text-align: right;
                padding-right: 10px;
                line-height: 24px;
                height: 24px;
                vertical-align: top;
            }

            .dialog-content table td input,
            .dialog-content table td textarea {
                border: 1px solid #a9a9a9;
                width: 250px;
                height: 18px;
                padding: 1px;
            }

        #dialog_machines .dialog-content table td input {
            width: auto;
        }

        .dialog-content table td textarea {
            margin-top: 6px;
        }

        .dialog-content table td select {
            width: 254px;
            height: 24px;
        }

        .dialog-content table td input[type="checkbox"] {
            border: none;
        }

        .dialog-content table td textarea {
            height: 150px;
            width: 420px;
            max-width: 500px;
        }

        .ctl_button {
            font-family: 'CalciteWebCoreIcons';
            display: block;
            margin: 6px auto;
            width: 60px;
            height: 22px;
            line-height: 21px;
            padding: 0;
        }

        .group_table .main_table {
            table-layout: fixed;
        }

            .group_table .main_table thead tr {
                display: block;
            }

            .group_table .main_table tbody {
                height: 280px;
                display: block;
                overflow-y: auto;
            }

            .group_table .main_table th {
                width: 165px;
            }

            .group_table .main_table td {
                width: 165px;
                white-space: nowrap;
                word-break: keep-all;
            }

                .group_table .main_table td div {
                    width: 165px;
                    overflow: hidden;
                    white-space: nowrap;
                    word-break: keep-all;
                    text-overflow: ellipsis;
                }

        .td_controller {
            vertical-align: middle;
            padding: 40px 8px;
            /*border-left: 1px solid #b0b0b0;
                border-right: 1px solid #b0b0b0;*/
        }

        .ctl_button {
            font-family: 'CalciteWebCoreIcons';
            display: block;
            margin: 6px auto;
            width: 60px;
            height: 22px;
            line-height: 21px;
            padding: 0;
        }

        .machine_maskbg {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            background: #000;
            opacity: 0.2;
        }
    </style>
    <script src="<%=GetFileUrlWithVersion("js/controls.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("../js/assetselector.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("../fic/js/utility.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("js/customerrecord.js")%>" type="text/javascript"></script>
    <script type="text/javascript">
        var IsDealer = <%=IsDealer ?"true":"false"%>;
        var CRReadOnly = <%=CRReadOnly ?"true":"false"%>;

        customerquery = function (method, param, callback, error) {
            _network.request("Maintenance/CustomerRecordManagement.aspx", -1, method, param, callback, error);
        }        

        function OnDelete(u) {
            if (!u) {
                return;
            }
            showConfirm(GetTextByKey("P_CR_DOYOUWANTTODELETETHISCUSTOMERRECORD", 'Do you want to delete this customer record?'), GetTextByKey("P_CR_DELETECUSTOMERRECORD", 'Delete Customer Record'), function () {
                customerquery('DeletePartner', u.Id, function (data) {
                    OnRefresh();
                }, function (err) {
                    showAlert(GetTextByKey('P_CR_FAILEDTODELETETHISCUSTOMERRECORD', 'Failed to delete this customer record.'), GetTextByKey("P_CR_DELETECUSTOMERRECORD", 'Delete Customer Record'));
                });
            });
        }

        function CloseDialog(type) {
            $('#dialog_user').hideDialog();
            OnRefresh();
            showmaskbg(false);
        }

        function OnAdd() {
            execIframeFunc("init", [], "iframeuser");
            showmaskbg(true);
            $('#dialog_user')
                .attr('act', 'add')
                .showDialogRight();
        }

        var custrecordid;
        function OnEdit() {
            var index = grid_dt.selectedIndex;
            if (index < 0) {
                showAlert(GetTextByKey("P_CR_PLEASESELECTCUSTOMERRECORD", "Please select customer record."), GetTextByKey("P_CUSTOMERRECORD", "Customer Record")); return;
            }
            var cust = grid_dt.source[index].Values;
            if (!cust) {
                custrecordid = undefined;
                return;
            }
            custrecordid = cust.Id;

            execIframeFunc("init", [custrecordid], "iframeuser");
            showmaskbg(true);
            $('#dialog_user')
                .attr('act', 'edit')
                .showDialogRight();
        }

        function OnDblClick(e) {
            OnEdit();
        }

        function OnRefresh() {
            showloading(true);
            var searchtxt = "";
            searchtxt = htmlencode($.trim($('#searchinputtxt').val()));
            customerquery('GetPartners', searchtxt, function (data) {
                showloading(false);
                if (typeof (data) === "string") {
                    showAlert(data, GetTextByKey('P_CUSTOMERRECORD', "Customer Record"));
                    return;
                }
                showCustomerList(data);
            }, function (err) {
                showloading(false);
            });
        }

        function showCustomerList(data) {
            var rows = [];
            for (var i = 0; i < data.length; i++) {
                var r = data[i];
                for (var j in r) {
                }

                var fr = { Values: r };
                rows.push(fr);
            }

            grid_dt.setData(rows);
        }

        var grid_dt;
        function InitGridData() {
            grid_dt = new GridView('#customerlist');
            grid_dt.lang = {
                all: GetTextByKey("P_GRID_ALL", "(All)"),
                ok: GetTextByKey("P_GRID_OK", "OK"),
                reset: GetTextByKey("P_GRID_RESET", "Reset")
            };
            var list_columns = [
                { name: 'Code', caption: GetTextByKey("P_CR_CODE", "Code"), valueIndex: 'Code', allowFilter: true, css: { 'width': 120, 'text-align': 'left' } },
                { name: 'Name', caption: GetTextByKey("P_CR_COMPANYNAME", "Company Name"), valueIndex: 'Name', allowFilter: true, css: { 'width': 240, 'text-align': 'left' } },
                //{ name: 'ContactName', caption: GetTextByKey("P_CR_CONTACTNAME", "Contact Name"), valueIndex: 'ContactName', css: { 'width': 150, 'text-align': 'left' } },
                //{ name: 'ContactEmail', caption: GetTextByKey("P_CR_CONTACTEMAIL", "Contact Email"), valueIndex: 'ContactEmail', css: { 'width': 130, 'text-align': 'left' } },
                //{ name: 'ContactMobilePhone', caption: GetTextByKey("P_CR_CONTACTMOBILE", "Contact Mobile"), valueIndex: 'ContactMobilePhone', css: { 'width': 140, 'text-align': 'left' } },
                //{ name: 'ContactPreferenceStr', caption: GetTextByKey("P_CR_CONTACTPREFERENCES", "Contact Preferences"), valueIndex: 'ContactPreferenceStr', css: { 'width': 130, 'text-align': 'left' } },
                { name: 'SalespersonCode', caption: GetTextByKey("P_CR_SALESPERSONCODE", "Salesperson Code"), valueIndex: 'SalespersonCode', allowFilter: true, css: { 'width': 150, 'text-align': 'left' } },
                { name: 'SalespersonName', caption: GetTextByKey("P_CR_SALESPERSONNAME", "Salesperson Name"), valueIndex: 'SalespersonName', allowFilter: true, css: { 'width': 150, 'text-align': 'left' } },
                { name: 'Address', caption: GetTextByKey("P_CR_ADDRESS", "Address"), valueIndex: 'Address', css: { 'width': 200, 'text-align': 'left' } },
                { name: 'Notes', caption: GetTextByKey("P_CR_NOTES", "Notes"), valueIndex: 'Notes', css: { 'width': 300, 'text-align': 'left' } },
                { name: 'Edit', caption: "", css: { 'width': 30, 'text-align': 'center' } },
                { name: 'AssetAssignment', caption: "", css: { 'width': 30, 'text-align': 'center' } },
                { name: 'Delete', caption: "", css: { 'width': 30, 'text-align': 'center' } }
            ];
            var columns = [];
            // head
            for (var hd in list_columns) {
                var col = {};
                col.name = list_columns[hd].name;
                col.caption = list_columns[hd].caption;
                col.visible = true;
                col.sortable = true;
                col.width = list_columns[hd].css.width;
                col.align = list_columns[hd].css["text-align"]
                col.key = list_columns[hd].valueIndex;
                col.allowFilter = list_columns[hd].allowFilter;
                if (CRReadOnly && (col.name === "Edit" || col.name === "AssetAssignment" || col.name === "Delete")) {
                    continue;
                }

                if (col.name === "Edit") {
                    col.isurl = true;
                    col.text = "\uf044";
                    col.sortable = false;
                    col.events = {
                        onclick: function () {
                            OnEdit();
                        }
                    };
                    col.classFilter = function (e) {
                        return "icon-col";
                    }
                    col.attrs = { 'title': GetTextByKey("P_UM_EDIT", 'Edit') };
                }
                else if (col.name === "Delete") {
                    col.isurl = true;
                    col.text = "\uf00d";
                    col.sortable = false;
                    col.events = {
                        onclick: function () {
                            OnDelete(this);
                        }
                    };
                    col.classFilter = function (e) {
                        return "icon-col";
                    };
                    col.attrs = { 'title': GetTextByKey("P_UM_DELETE", 'Delete') };
                }
                else if (col.name === "AssetAssignment") {
                    col.visible = !IsDealer;
                    col.isurl = true;
                    col.text = "\uf63c";
                    col.sortable = false;
                    col.events = {
                        onclick: function () {
                            OnManageMachine(this);
                        }
                    };
                    col.classFilter = function (e) {
                        return "icon-col";
                    };
                    col.attrs = { 'title': GetTextByKey("P_UM_ASSETSASSIGNMENT", 'Assets Assignment') };
                }
                columns.push(col);
            }
            grid_dt.canMultiSelect = false;
            grid_dt.columns = columns;
            grid_dt.init();
            grid_dt.rowdblclick = OnEdit;

            grid_dt.selectedrowchanged = function (rowindex) {
                var rowdata = grid_dt.source[rowindex];
                if (rowdata) {
                    uiid = rowdata.Values.IID;
                }
            }
        }


        $(function () {
            setPageTitle(GetTextByKey("P_CUSTOMERRECORD", "Customer Record"), true);
            InitGridData();

            $('#dialog_managemahchine').dialog(function () {
                $('.machine_maskbg').hide();
            });

            OnRefresh();

            $('#dialog_managemahchine').dialog(function () {
                $('.machine_maskbg').hide();
            });

            $('#searchinputtxt').keydown(searchEnter);
            $(window).resize(function () {
                $("#customerlist").css("height", $(window).height() - $("#customerlist").offset().top - 4);
                grid_dt && grid_dt.resize();
            }).resize();

            if (!canExport) {
                $('#spExport').hide();
            }
        });

        function searchEnter(e) {
            if (e.keyCode == 13 || e.keyCode == 9) {
                OnRefresh();
            }
        }

        function OnExport() {
            var searchtxt = "";
            searchtxt = htmlencode($.trim($('#searchinputtxt').val()));

            window.open("../ExportToFile.aspx?type=custrecord&param=" + searchtxt);
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div style="min-width: 400px;">
        <div class="page_title" data-lgid="P_CUSTOMERRECORD">Customer Record</div>
        <div class="search_bar">
            <input type="password" autocomplete="new-password" style="display: none" />
            <input type="text" id="searchinputtxt" autocomplete="off" />
            <input class="search" type="button" onclick="OnRefresh();" value="Search" data-lgid="P_CM_SEARCH" />
        </div>
        <div class="function_title">
            <%if (!CRReadOnly)
                {%>
            <span class="sbutton iconadd" onclick="OnAdd();" data-lgid="P_UM_ADD">Add</span>
            <span class="sbutton iconedit" onclick="OnEdit();" data-lgid="P_UM_EDIT">Edit</span>
            <%}%>
            <span class="sbutton iconrefresh" onclick="OnRefresh();" data-lgid="P_UM_REFRESH">Refresh</span>
            <span id="spExport" class="sbutton iconexport" onclick="OnExport();" data-lgid="P_MR_EXPORTTOEXCEL">Export to Excel</span>
        </div>
        <div class="clear"></div>
        <div id="customerlist"></div>

        <div class="machine_maskbg" style="display: none;"></div>
        <div class="dialog" id="dialog_managemahchine" style="display: none;">
            <div id="dialogmask" class="maskbg" style="display: none; z-index: 1;">
                <div class="loading_icon icon c-spin"></div>
            </div>
            <div class="dialog-title"><span class="title" data-lgid="P_UM_ASSETASSIGNMENT">Asset Assignment</span><em class="dialog-close"></em></div>

            <div class="machine_filter" style="display: none">
                <span data-lgid="P_UM_TYPE_COLON">Type: </span>
                <select id="sel_machine_type" tabindex="20"></select>
                <input type="text" id="txt_machine_key" tabindex="21" />
                <input type="button" class="ybutton" id="button_machine_filter" value="Filter" data-lgid="P_UM_FILTER" tabindex="22" />
                <span id="span_text_holder" style="display: none;"></span>
            </div>
            <div class="machine_filter" style="margin: 9px 6px 5px">
                <span class="sbutton iconadd" onclick="OnMachineAdd()" data-lgid="P_UM_ADD">Add</span>
                <span class="sbutton icondelete" onclick="OnMachineDelete()" data-lgid="P_UM_DELETE">Delete</span>
            </div>
            <div class="div_machines">
                <table class="table_holder">
                    <tbody>
                        <tr>
                            <td style="padding: 2px 4px 4px">
                                <div id="selectedmachinelist" style="height: 500px; width: 780px;"></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="dialog-func">
                <input type="button" value="Close" data-lgid="P_UM_CLOSE" class="dialog-close" tabindex="28" />
                <div class="clear"></div>
            </div>
        </div>

        <div id="mask_bg" style="display: none;">
            <div class="loading c-spin"></div>
        </div>
        <div class="dialog" id="dialog_user" style="display: none; height: 100%; border-bottom: 0; border-top: 0;">
            <iframe id="iframeuser" src="AddCustomerRecord.aspx" style="width: 100%; height: 100%; display: block; border: none;"></iframe>
            <div class="maskbg" style="display: none;"></div>
        </div>
    </div>
</asp:Content>