import { getLabelText } from '/components/common/utils.js?v=3.4'
import VueSelect from "/Components/Common/VueSelect.js?v=3.4"
import InputSearch from "/Components/Common/InputSearch.js?v=3.4"
import Pager from "/Components/Common/Pager.js?v=3.4"
import SearchPanel from "/Components/Common/SearchPanelWrapper.js?v=3.4"
import ModalPopUp from '/Components/Common/ModalPopUp.js?v=3.4'
import NoRecords from "/Components/Common/NoRecords.js?v=3.4"
import OperationsPanel from '/Components/Common/OperationsPanelWrapper.js?v=3.4'
import Loading from "/Components/Common/Loading.js?v=3.4"


export default {

    props: {
        isSubReseller: { type: Boolean, required: true },
        readOnly: { type: Boolean, required: true },
        companyId: { type: String, required: true },
        orgCompanyIdFilter: { type: String, required: false, default: '0' },
        customerId: { type: String, required: true },
        organizationNameFilter: { type: String, required: false, default: '' },
        isLoggedInAsCustomer: { type: Boolean, required: true },
        isLoggedInAsReseller: { type: Boolean, required: true },
        orgIdFilterForManagement: { type: String, required: false, default: '' }, //Set value or default as expected by relevant SP
        sortPreference: { type: Object, required: true },
        packageTypeId: { type: String, required: true, default: '-1'},
        runGroupJob: { type: Boolean, required: true, default: true },
    },
    components: {
        OperationsPanel,
        VueSelect,
        InputSearch,
        Pager,
        getLabelText,
        SearchPanel,
        ModalPopUp,
        NoRecords,
        Loading
    },
    data() {
        return {
            isLoading: true,
            searchContainerDivClass: "col-md-3 col-sm-6 col-xs-12",
            owners: {},
            producttypes: {},
            actiontypes: {},
            totalRecords: 0,
            records: [],
            recordDetails: [],
            search: {
                selectedProductType: this.packageTypeId,
                selectedOwner: (this.orgCompanyIdFilter == '0' ? '' : this.orgCompanyIdFilter),
                clientId: (this.customerId != '0' ? this.customerId : ''),
                customerName: '',
                organization: (this.organizationNameFilter == '', '', this.organizationNameFilter),
                organizationId: (this.orgIdFilterForManagement == '', '', this.orgIdFilterForManagement),
                parameters: '',
                selectedActionType: '-1',
                selectedStatus: '-1',
                pageIndex: 1,
                pageSize: gridPageSize,
                sortExpression: 'TimeStampEntered',
                sortDir: 'Desc',
                updateSorting: false
            },
            showClearButton: false,
            useTranslation: true,

            //***** START: Modal Popup *******
            showModal: false,
            modalTitle: '',
            yesText: '',
            noText: '',
            parentContext: {},  //params to execute callback method related to current operation

            showPassModal: false,
            passModalTitle: '',
            passPolicy: '',
            password: '',
            confirmPassword: '',

            //***
        }
    },
    methods: {
        inputSearchChangeHandler: function (obj) {
            this.search[obj.fieldName] = obj.searchValue;
            this.showClearButton = obj.submit;

            if (obj.submit == true)
                this.doSearch();
        },
        sortBy: function (exp) {
            if (this.search.sortExpression != exp) {
                this.search.sortExpression = exp;
                this.search.sortDir = "Asc";
            }
            else
                this.search.sortDir = this.search.sortDir == "Asc" ? "Desc" : "Asc";

            this.updateSorting = true;
            this.doSearch();
        },
        checkAll: function (checked) {
            this.records.map(obj => {
                if (obj.StatusId == 0 || obj.Status == 1)
                    obj.IsItemSelected = checked;
            });


        },
        showActionButton: function () {
            return this.records.find(obj => obj.IsItemSelected);
        },
        checkAllChecked: function () {
            return !this.records.find(obj => !obj.IsItemSelected);
        },
        productTypeChangeHandler: async function (obj) {
            this.search.selectedProductType = obj.selectedValue;
            //this.actiontypes = {};
            await this.listActionTypes();

            updateSelectInterface();
        },
        ownerChangeHandler: async function (obj) {

            this.search.selectedOwner = obj.selectedValue;
            setOwnerCookie(obj.selectedValue);

        },
        mpModelEventHandler: function (obj) {
            this.recordDetails = [];
            this.showModal = false;
            this.showPassModal = false;
        },
        actionTypeChangeHandler: async function (obj) {

            this.search.selectedActionType = obj.selectedValue;

        },
        doSearch: function () {
            //this.ListAccounts();
            clearAllMsgs();
            var vm = this;
            this.listGroupActions().catch(function (e) {
                vm.records = [];
                vm.totalRecords = 0;
                vm.isLoading = false;
                displayErrorMsg(e);
            });
        },
        listProductTypes: async function () {

            var vm = this;

            let postRequest = { ...fetchPost };
            var params = {
                ShowActiveDirectoryType: true,
                ShowMiscProductType: true,
                ShowDedicatedHostingType: true,
                ShowSSLProductType: true,
                ShowDomainNameProductType: true,
                CompanyId: this.companyId,
                CustomerId: this.customerId
            };
            postRequest.body = JSON.stringify(params);

            await fetch("/webservices/machpanelservice.asmx/GetProductTypes", postRequest)
                .then(response => response.json()).then((data) => {
                    vm.producttypes = JSON.parse(data.d);
                    if (vm.packageTypeId == '-1')
                        vm.producttypes.show = true;
                    else
                        vm.producttypes.show = false;
                });
            vm.producttypes.selectedProductType = vm.producttypes.initialValue; //vm.search.selectedProductType;

        },
        listActionTypes: async function () {

            var vm = this;

            let postRequest = { ...fetchPost };
            var params = {
                packageType: vm.search.selectedProductType
            };
            postRequest.body = JSON.stringify(params);

            await fetch("/webservices/machpanelservice.asmx/GetActionTypes", postRequest)
                .then(response => response.json()).then((data) => {
                    vm.actiontypes = JSON.parse(data.d);
                    // vm.producttypes.show = true;
                    this.search.selectedActionType = vm.actiontypes.initialValue; //-1;
                });

        },
        listGroupActions: async function () {

            var vm = this;
            vm.isLoading = true;
            let postRequest = { ...fetchPost };
            postRequest.body = JSON.stringify(vm.search);

            await fetch("/RCC/Network/ServiceDirector/GroupActions.aspx/FillData", postRequest)
                .then(response => response.json()).then((data) => {
                    vm.records = JSON.parse(data.d);
                    this.updateSorting = false;
                    // console.log(vm.records.length);
                    if (vm.records.length > 0)
                        vm.totalRecords = vm.records[0].TotalRecords;
                });
            vm.isLoading = false;

        },
        showLogDetails: async function (jobId,packagetypeId) {

            var vm = this;

            let postRequest = { ...fetchPost };
            let params = {
                "JobID": jobId,
                "PackageTypeID": packagetypeId
            }
            postRequest.body = JSON.stringify(params);

            await fetch("/RCC/Network/ServiceDirector/GroupActions.aspx/FillQLogs", postRequest)
                .then(response => response.json()).then((data) => {

                    vm.recordDetails = JSON.parse(data.d);
                    vm.showModal = true;
                    vm.parentContext = { op: "convert" };
                    vm.modalTitle = 'Job Log Detail';
                    vm.noText = getLabelText('GN000150');

                }).catch(function (e) {
                    vm.recordDetails = [];
                    //vm.totalRecords = 0;
                    displayErrorMsg(e);
                });


        },
        showPasswordChangePopUP: async function (passPolicy, adUserId, compId) {

            var vm = this;
            vm.showPassModal = true;
            vm.yesText = getLabelText('GN0000858');
            vm.noText = getLabelText('GN0000572');
            vm.passModalTitle = getLabelText('M0087');
            vm.passPolicy = passPolicy;
            vm.password = "";
            vm.confirmPassword = "";
            vm.parentContext = { AdUserId: adUserId, CompanyId: compId };
        },
        changePassword: function (obj) {

            var vm = this;

            if (vm.password != vm.confirmPassword) {

                alert(this.getLabelText('DGN1110005'));
                vm.showPassModal = true;
                $('#' + obj.id).modal('show');
                return;
            }
            else if (vm.password == '') {
                alert(this.getLabelText('EM000001'));
                vm.showPassModal = true;
                $('#' + obj.id).modal('show');
            }
            else {
                //console.log(obj.parentContext);


                let postRequest = { ...fetchPost };
                let params = {
                    "ADUserId": obj.parentContext.AdUserId,
                    "CompanyId": obj.parentContext.CompanyId,
                    "Password": vm.password
                }
                //console.log(params);
                postRequest.body = JSON.stringify(params);

                fetch("/RCC/Network/ServiceDirector/GroupActions.aspx/ChangePassword", postRequest)
                    .then(response => response.json()).then((data) => {
                        if (data.d == true || data.d == 'true') {
                            //$('#' + obj.id).modal('hide'); 

                            displaySuccessMsg(this.getLabelText('SMI965'));
                        }

                    }).catch(function (e) {

                        displayErrorMsg(e);
                    });

                vm.showPassModal = false;
            }

        },
        getLabelText,
        listOwners: async function () {

            var vm = this;

            await fetch("/webservices/machpanelservice.asmx/GetOwners", fetchGet)
                .then(response => response.json()).then((data) => {

                    vm.owners = JSON.parse(data.d);
                    vm.search.selectedOwner = vm.owners.initialValue;

                })
                .catch(function (e) {
                    displayErrorMsg(e);
                });

        },
        doClearSearch: async function () {
            this.search.selectedProductType = this.packageTypeId;
            this.search.selectedActionType = this.actiontypes.initialValue;
            this.search.clientId = '';
            this.search.customerName = '';
            this.search.parameters = '';
            this.search.organization = '';
            this.search.organizationId = '';
            this.search.pageIndex = 1;
            this.search.selectedStatus = '-1';

            clearAllMsgs();
            updateSelectInterface();
            this.doSearch();
        },
        pagerChangeHandler: function (o) {
            this.search.pageIndex = o.pageIndex;
            this.search.pageSize = o.pageSize;
            this.doSearch();
        },
        resetTryCount: function (cId, selectedOwner, pTypeId) {
           // alert(cId);
            let postRequest = { ...fetchPost };
            var param = {

                'CId': cId,   //(cId === "" ? " 0 " : cId)
                'IsO365Job': false,
                'SelectedOwner': selectedOwner,
                'PackageTypeId': pTypeId
            };

            postRequest.body = JSON.stringify(param);

            fetch("/RCC/Network/ServiceDirector/GroupActions.aspx/ResetTryCount", postRequest)
                .then(response => response.json()).then((data) => {
                    //  alert(data.d);
                    if (data.d == true || data.d == 'true') {
                        this.doSearch();
                        displaySuccessMsg(this.getLabelText('EGN0000011')); //

                    }

                }).catch(function (e) {
                    displayErrorMsg(e);
                });

        },
        removeCompletedCancelledJobs: function (selectedOwner,orgid, pTypeId) {

            let postRequest = { ...fetchPost };
            var param = {

                 
                'SelectedOwner': selectedOwner,
                'OrganizationId': orgid,
                'PackageTypeId': pTypeId
            };

            postRequest.body = JSON.stringify(param);

            fetch("/RCC/Network/ServiceDirector/GroupActions.aspx/RemoveCompletedCancelledJobs", postRequest)
                .then(response => response.json()).then((data) => {
                    //  alert(data.d);
                    if (data.d == true || data.d == 'true') {
                        this.doSearch();
                        displaySuccessMsg(this.getLabelText('EGN0000011')); //

                    }

                }).catch(function (e) {
                    displayErrorMsg(e);
                });

        },
        runJob: function (jobId, packageTypeId) {

            let postRequest = { ...fetchPost };
            var param = {

                'JobId': jobId,
                'PackageTypeID': packageTypeId,
                'TenantId': 0
            };

            postRequest.body = JSON.stringify(param);

            fetch("/RCC/Network/ServiceDirector/GroupActions.aspx/RunJob", postRequest)
                .then(response => response.json()).then((data) => {
                    //  alert(data.d);
                    //if (data.d == true || data.d == 'true') {
                    this.doSearch();
                    displaySuccessMsg(data.d); //

                    //}

                }).catch(function (e) {
                    displayErrorMsg(e);
                });

        },
        confirmActionCancel: function (jId) {

            if (confirm(this.getLabelText('FAM00185')))
                this.cancelJobs(jId);



        },
        cancelJobs: function (jId) {
            let selectedRecords = this.records;

            if (jId != '')
                selectedRecords = this.records.filter(a => a.JobId.toLowerCase() == jId.toLowerCase());
            else
                selectedRecords = this.records.filter(a => a.StatusId == 0 || a.StatusId == 1);

            if (selectedRecords.length > 0) {
                let postRequest = { ...fetchPost };
                let params = {
                    data: {
                        //selectedItems: obj.parentContext.selectedRecords
                        selectedItems: selectedRecords.map(it => ({
                            "JobId": it.JobId,
                            "PackageTypeId": it.PackageTypeId,
                            "StatusId": it.StatusId,
                            "Parameters": it.Parameters,
                            "ActionType": it.ActionType,
                            "AccountId": it.AccountId,
                            "tid": 0
                        })),
                    }
                };

                postRequest.body = JSON.stringify(params);

                fetch("/RCC/Network/ServiceDirector/GroupActions.aspx/CancelJobs", postRequest)
                    .then(response => response.json()).then((data) => {
                        this.doSearch();
                        displaySuccessMsg(data.d);

                    }).catch(function (e) {
                        displayErrorMsg(e);
                    });
            }
            else {
                displaySuccessMsg(getLabelText('EGN0000011'));
            }
        },
        handleGlobalSearch: function () {
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

            for (var i = 0; i < hashes.length; i++) {
                var hash = hashes[i].split('=');
                if (hash[0].toLowerCase() == 'org') {
                    this.search.organization = hash[1];
                }
                else if (hash[0].toLowerCase() == 'cid') {
                    this.search.clientId = hash[1];
                }
            }
        },

    },
    created: async function () {

        this.search.sortDir = this.sortPreference.SortDirection;
        this.search.sortExpression = this.sortPreference.SortExpression;

        var vm = this;
        this.handleGlobalSearch();
        await this.listOwners().then(this.listProductTypes).then(this.listActionTypes).then(this.listGroupActions).catch(function (e) {
            vm.records = [];
            vm.totalRecords = 0;
            vm.isLoading = false;
            displayErrorMsg(e);
        });


    },
    template: ` 
        <div class="col-xs-12">
            <div class="card">
                <div class="body">
                    <div class="row">

                        <ModalPopUp v-if="showModal" :id="'groupActions'" :parentContext="parentContext" :modalTitle="modalTitle"
                            :yesButtonText="yesText" :noButtonText="noText" @onYes="mpModelEventHandler" @onNo="mpModelEventHandler">
                            <table class="table table-bordered table-striped table-hover table-layout-fixed" cellspacing="0" rules="all" border="1">
                                <tbody>
                                    <tr>
                                        <th class="col-xs-3">{{ getLabelText('Dev676') }}</th>
                                        <th class="col-xs-8">{{ getLabelText('Dev675') }}</th>                
                                    </tr>
                                    <tr v-for="record in recordDetails">
                                        <td>{{ record.TimeStamp }}</td>
                                        <td v-html="record.LogEntry"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </ModalPopUp>

                        <ModalPopUp v-if="showPassModal" :id="'changePassword'" :parentContext="parentContext" :modalTitle="getLabelText('M0087')"
                            :yesButtonText="getLabelText('GN0000858')" :noButtonText="getLabelText('GN0000572')" @onYes="changePassword" @onNo="mpModelEventHandler">
                                   
                            <div class="row">
                                <div class="col-xs-3 row-label"><label>{{ getLabelText('DGN1110554') }}</label></div>
                                <div class="col-xs-4">                                             
                                    <div class="form-group">
                                        <div class="form-line">
                                            <input type="password" v-model="password" class="form-control" />
                                        </div>
                                    </div>   
                                </div>
                                <div class="col-xs-5"><div v-html="passPolicy"  class="help-text sm"></div></div>                                                   
                            </div>
                            <div class="row">
                                <div class="col-xs-3 row-label"><label>{{ getLabelText('GN0001196') }}</label></div>                                              
                                <div class="col-xs-4"> 
                                    <div class="form-group">
                                        <div class="form-line">                                             
                                            <input type="password" v-model="confirmPassword" class="form-control" />
                                        </div>
                                    </div>
                                </div>                 
                            </div>
                        </ModalPopUp>

                        <OperationsPanel  v-if="!readOnly">
                            <a @click="resetTryCount(search.clientId,search.selectedOwner,search.selectedProductType);" class="btn btn-primary waves-effect btnAction">{{ getLabelText('ResetTriesCount') }}</a>
                            <a @click="removeCompletedCancelledJobs(search.selectedOwner,0,search.selectedProductType)" class="btn btn-primary waves-effect btnAction">{{ getLabelText('clearJobs') }}</a>
                            <a @click="confirmActionCancel('')" v-show="showActionButton" class="btn btn-primary waves-effect btnAction">{{ getLabelText('strCancelFailedJobs') }}</a>
                            <a v-bind:href="'/RCC/Network/ServiceDirector/GroupActionsSettings.aspx'" v-if="packageTypeId == -1 && !isLoggedInAsCustomer && !isLoggedInAsReseller && !isSubReseller" class="btn btn-primary waves-effect btnAction">{{ getLabelText('strGroupJobsSettings') }}</a>
                        </OperationsPanel>

                        <SearchPanel id='jobs-list' :showClearButton="showClearButton" @onSearch='doSearch' @onClear='doClearSearch'>
                            <div :class="searchContainerDivClass" v-if="owners.show && (orgIdFilterForManagement == '' || orgIdFilterForManagement == '0')">
                                <div class="form-group form-float">
                                    <VueSelect :options="owners.items" :selectedValue="this.search.selectedOwner" @selectchange="ownerChangeHandler" />
                                </div>
                            </div>
                                            
                            <InputSearch :searchValue="search.clientId" fieldName="clientId" fieldDataType="Number" v-if="!isLoggedInAsCustomer && (orgIdFilterForManagement == '' || orgIdFilterForManagement == '0')"  :fieldLabel="getLabelText('GN0000715')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                            <InputSearch :searchValue="search.customerName" fieldName="customerName" v-if="!isLoggedInAsCustomer && (orgIdFilterForManagement == '' || orgIdFilterForManagement == '0')" :fieldLabel="getLabelText('GN0000268')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                            <InputSearch :searchValue="search.organization" fieldName="organization" v-if="packageTypeId != 19 && (orgIdFilterForManagement == '' || orgIdFilterForManagement == '0')" :fieldLabel="getLabelText('DGN1110357')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                            <InputSearch :searchValue="search.parameters" fieldName="parameters" :fieldLabel="getLabelText('Parameters')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" /> 
                                           
                            <div :class="searchContainerDivClass" v-if="producttypes.show && packageTypeId == -1 && (orgIdFilterForManagement == '' || orgIdFilterForManagement == '0')">
                                <div class="form-group form-float">
                                    <VueSelect :options="producttypes.items" :selectedValue="this.search.selectedProductType" @selectchange="productTypeChangeHandler" />
                                </div>
                            </div>

                            <div :class="searchContainerDivClass" v-if="actiontypes.show">
                                <div class="form-group form-float">
                                    <VueSelect :options="actiontypes.items" :selectedValue="this.search.selectedActionType" @selectchange="actionTypeChangeHandler" />
                                </div>
                            </div>

                            <div :class="searchContainerDivClass">
                                <div class="form-group form-float">
                                    <select v-model="search.selectedStatus" class="vue-select">
                                        <option value="-1">{{ getLabelText('SelectStatus') }}</option>
                                        <option value="2">{{ getLabelText('GN0000347') }}</option>
                                        <option value="3">{{ getLabelText('GN0000343') }}</option>
                                        <option value="1">{{ getLabelText('DGN1110246') }}</option>
                                        <option value="0">{{ getLabelText('GN0000348') }}</option>                                        
                                        <option value="4">{{ getLabelText('strInProcess') }}</option>
                                    </select>
                                </div>
                            </div>

                        </SearchPanel> 

                        <div class="col-xs-12" v-if="isLoading">
                            <Loading/>
                        </div>
                        <div class="col-xs-12" v-else>
                            <table class="table table-bordered table-striped table-hover" v-if="records.length > 0">
                                <tbody>
                                    <tr>
                                        <th class="col-xs-1 align-center hide" v-if="!(readOnly || isSubReseller) && (packageTypeId == '3')">
                                            <input type="checkbox" id="CheckAll" :checked="checkAllChecked()" @change="checkAll($event.target.checked);" />
                                            <label for="CheckAll"></label>
                                        </th>
                                        <th class="col-xs-1">{{getLabelText("String385")}}</th>
                                        <th class="col-xs-3" >{{getLabelText("DGN1110209")}}</th>
                                        <th class="col-xs-1"><a href="#" @click.prevent="sortBy('TimeStampEntered')">{{getLabelText("DGN1110210")}}</a></th>
                                        <th class="col-xs-1"><a href="#" @click.prevent="sortBy('TriesCount')">{{getLabelText("GN0000813")}}</a></th>
                                        <th class="col-xs-1" v-if="!isLoggedInAsCustomer && (orgIdFilterForManagement == '' || orgIdFilterForManagement == '0')"><a href="#" @click.prevent="sortBy('LastTryTimeStamp')">{{getLabelText("DGN1110212")}}</a></th>
                                        <th class="col-xs-2" v-if="!isLoggedInAsCustomer && packageTypeId=='-1' && (orgIdFilterForManagement == '' || orgIdFilterForManagement == '0')"><a href="#" @click.prevent="sortBy('CustomerId')">{{getLabelText("GN0000850")}}</a></th>
                                        <th class="col-xs-2" v-if="owners.show && (orgIdFilterForManagement == '' || orgIdFilterForManagement == '0')"><a href="#" @click.prevent="sortBy('Owner')">{{getLabelText("Exh505")}}</a></th>
                                        <th class="col-xs-1 align-center" v-if="!isLoggedInAsCustomer && (orgIdFilterForManagement == '' || orgIdFilterForManagement == '0')">{{getLabelText("GN0000839")}}</th>
                                        <th class="col-xs-1 align-center" v-if="!readOnly">{{getLabelText("GN0000360")}}</th>
                                    </tr>
                                    <tr v-for="record in records">
                                       <td class="align-center hide" v-if="!(readOnly || isSubReseller) && (packageTypeId=='3')" >
                                            <input type="checkbox" v-bind:id="record.JobId" v-bind:class="[{'disabled':(!record.StatusId==0 && !record.StatusId==1)}, '']" v-model="record.IsItemSelected" />
                                            <label v-bind:for="record.JobId"></label>
                                        </td>
                                        <td v-if="record.InProcess">{{getLabelText("strInProcess")}}</td>
                                        <td v-else-if="record.StatusId == 0 && record.TriesCount <= 0">{{getLabelText("GN0000348")}}</td>
                                        <td v-else-if="record.StatusId == 0"><a @click.prevent="showLogDetails(record.JobId,record.PackageTypeId)">{{getLabelText("GN0000348")}}</a></td>
                                        <td v-else-if="record.StatusId == 1"><a @click.prevent="showLogDetails(record.JobId,record.PackageTypeId)">{{getLabelText("DGN1110246")}}</a></td>
                                        <td v-else-if="record.StatusId == 2 && record.TriesCount <= 0">{{getLabelText("GN0000347")}}</td>
                                        <td v-else-if="record.StatusId == 2"><a @click.prevent="showLogDetails(record.JobId,record.PackageTypeId)">{{getLabelText("GN0000347")}}</a></td>
                                        <td v-else-if="record.StatusId == 3"><a @click.prevent="showLogDetails(record.JobId,record.PackageTypeId)">{{getLabelText("GN0000343")}}</a></td>

                                        <td>{{record.JobText}}</td>    
                                        <td>{{record.TimeStampEntered}}</td>
                                        <td>{{record.TriesCount}}</td>
                                        <td v-if="!isLoggedInAsCustomer && (orgIdFilterForManagement == '' || orgIdFilterForManagement == '0')">{{record.LastTryTimeStamp}}</td>

                                        <td v-if="!isLoggedInAsCustomer && record.CompanyName=='' && packageTypeId=='-1' && (orgIdFilterForManagement == '' || orgIdFilterForManagement == '0')"><a v-bind:href="'/RCC/Clients/ClientDetail.aspx?CID='+record.CustomerId+'&Src=C'"># {{record.CustomerId}} {{record.CustomerName}} </a></td>
                                        <td v-else-if="!isLoggedInAsCustomer && record.CompanyName!='' && packageTypeId=='-1' && (orgIdFilterForManagement == '' || orgIdFilterForManagement == '0')"><a v-bind:href="'/RCC/Clients/ClientDetail.aspx?CID='+record.CustomerId+'&Src=C'"># {{record.CustomerId}} {{record.CustomerName}}[{{record.CompanyName}}] </a></td>
                                        
                                        <td v-if="owners.show && (record.CompanyId=='' || record.CompanyId=='1') && (orgIdFilterForManagement == '' || orgIdFilterForManagement == '0')">{{ record.OwnerName }}</td>
                                        <td v-else-if="owners.show && (orgIdFilterForManagement == '' || orgIdFilterForManagement == '0')">
                                            <a v-bind:href="'/RCC/Clients/ClientDetail.aspx?CID='+record.CustomerId+'&RD=1'">{{record.OwnerName}}</a>
                                        </td>

                                        <td v-if="!isLoggedInAsCustomer && (orgIdFilterForManagement == '' || orgIdFilterForManagement == '0')">{{record.AddedBy}}</td>
                                        <td v-if="!readOnly">
                                            <button v-if="!record.InProcess && (runGroupJob || record.TriesCount >= 100)" v-bind:class="[{'disabled':(record.StatusId==2 || record.StatusId==3)}, 'btn btn-primary']"  v-on:click.prevent="runJob(record.JobId,record.PackageTypeId);">{{getLabelText("DGN1110045")}}</button>
                                            <button class="btn btn-primary" v-if="record.AdUserId!=0" @click.prevent="showPasswordChangePopUP(record.PasswordPolicy,record.AdUserId,record.CompanyId);">{{getLabelText("M0087")}}</button>
                                            <button class="btn btn-primary" v-if="record.StatusId==0 || record.StatusId==1" v-on:click.prevent="confirmActionCancel(record.JobId);">{{getLabelText("GN0000572")}}</button>
                                        </td>
                                    </tr>

                                    <Pager :totalRecords="totalRecords" :pageSize="this.search.pageSize" :currentPage="this.search.pageIndex" @pagerChange="pagerChangeHandler" />
                                </tbody>
                            </table>
                            <NoRecords v-else/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
`

}