vue2-bootstrap-table2
Version:
A sortable and searchable table, as a Vue component, using Bootstrap and Fontawesome styling.
431 lines (387 loc) • 345 kB
JavaScript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/build/";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var _stringify = __webpack_require__(1);
var _stringify2 = _interopRequireDefault(_stringify);
var _VueBootstrapTable = __webpack_require__(4);
var _VueBootstrapTable2 = _interopRequireDefault(_VueBootstrapTable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var renderfu = function renderfu(colname, entry) {
return '<div class="btn-group" role="group" >' + ' <button type="button" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button>' + ' <button type="button" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>' + '</div><span>' + (0, _stringify2.default)(entry) + '</span>';
};
var handleRow = function handleRow(event, entry) {
console.log("CLICK ROW: " + (0, _stringify2.default)(entry));
};
new Vue({
el: '#app',
components: {
VueBootstrapTable: _VueBootstrapTable2.default
},
data: {
logging: [],
showFilter: true,
showPicker: true,
paginated: true,
multiColumnSortable: true,
handleRowFunction: handleRow,
columnToSortBy: "name",
ajax: {
enabled: false,
url: "http://172.16.213.1:9430/data/test",
method: "POST",
delegate: true
},
columns: [{
title: 'Id',
name: 'id'
}, {
title: 'Name',
name: 'name',
filterable: false
}, {
title: 'Description',
name: 'description'
}, {
title: 'Street Address',
name: 'street_address'
}, {
title: 'City',
name: 'city'
}, {
title: 'State',
name: 'state_province'
}, {
title: 'Postal Code',
name: 'postal_code'
}],
values: [{
"id": "111",
"name": "Casper Cliff",
"description": "Id est rem aliquam animi libero minima. Praesentium ad cum autem quo voluptatum autem ea. Non rerum aliquam atque minima et. Omnis maiores debitis odio consequatur officiis.",
"created_by": 3,
"street_address": "90947 Schaefer Ramp",
"city": "Lake Jammiemouth",
"state_province": "Alaska",
"postal_code": "35070",
"status": "open"
}, {
"id": "0D7D9DB64C7946E0B3FBDDFC",
"name": "Alfredo Shore",
"description": "Beatae deserunt aut voluptas modi repudiandae sit animi. Minima sit quam eligendi non aliquid et excepturi. Fugit reiciendis illo illum eum quidem minus.",
"created_by": 4,
"street_address": "1943 Ericka Shoal Suite 196",
"city": "Johnathanshire",
"state_province": "Georgia",
"postal_code": "87106",
"status": "open"
}]
},
created: function created() {
var self = this;
this.$on('cellDataModifiedEvent', function (originalValue, newValue, columnTitle, entry) {
self.logging.push("cellDataModifiedEvent - Original Value : " + originalValue + " | New Value : " + newValue + " | Column : " + columnTitle + " | Complete Entry : " + entry);
});
this.$on('ajaxLoadedEvent', function (data) {
this.logging.push("ajaxLoadedEvent - data : " + data);
});
this.$on('ajaxLoadingError', function (error) {
this.logging.push("ajaxLoadingError - error : " + error);
});
},
methods: {
refreshTable: function refreshTable() {
this.$refs.exampleTable.refresh();
},
setNewPageSize: function setNewPageSize() {
this.$refs.exampleTable.setPageSize(1);
},
addItem: function addItem() {
var self = this;
var item = {
"id": this.values.length + 1,
"name": "name " + (this.values.length + 1)
};
this.values.push(item);
},
toggleFilter: function toggleFilter() {
this.showFilter = !this.showFilter;
},
togglePicker: function togglePicker() {
this.showPicker = !this.showPicker;
},
togglePagination: function togglePagination() {
this.paginated = !this.paginated;
}
}
});
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = { "default": __webpack_require__(2), __esModule: true };
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
var core = __webpack_require__(3);
var $JSON = core.JSON || (core.JSON = { stringify: JSON.stringify });
module.exports = function stringify(it) { // eslint-disable-line no-unused-vars
return $JSON.stringify.apply($JSON, arguments);
};
/***/ }),
/* 3 */
/***/ (function(module, exports) {
var core = module.exports = { version: '2.6.12' };
if (typeof __e == 'number') __e = core; // eslint-disable-line no-undef
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
var __vue_script__, __vue_template__
var __vue_styles__ = {}
__webpack_require__(5)
__vue_script__ = __webpack_require__(9)
if (Object.keys(__vue_script__).some(function (key) { return key !== "default" && key !== "__esModule" })) {
console.warn("[vue-loader] src\\VueBootstrapTable.vue: named exports in *.vue files are ignored.")}
__vue_template__ = __webpack_require__(48)
module.exports = __vue_script__ || {}
if (module.exports.__esModule) module.exports = module.exports.default
var __vue_options__ = typeof module.exports === "function" ? (module.exports.options || (module.exports.options = {})) : module.exports
if (__vue_template__) {
__vue_options__.template = __vue_template__
}
if (!__vue_options__.computed) __vue_options__.computed = {}
Object.keys(__vue_styles__).forEach(function (key) {
var module = __vue_styles__[key]
__vue_options__.computed[key] = function () { return module }
})
if (false) {(function () { module.hot.accept()
var hotAPI = require("vue-hot-reload-api")
hotAPI.install(require("vue"), false)
if (!hotAPI.compatible) return
var id = "_v-106767dc/VueBootstrapTable.vue"
if (!module.hot.data) {
hotAPI.createRecord(id, module.exports)
} else {
hotAPI.update(id, module.exports, __vue_template__)
}
})()}
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(6);
if(typeof content === 'string') content = [[module.id, content, '']];
// add the styles to the DOM
var update = __webpack_require__(8)(content, {});
if(content.locals) module.exports = content.locals;
// Hot Module Replacement
if(false) {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!../node_modules/css-loader/index.js?sourceMap!../node_modules/vue-loader/lib/style-rewriter.js!../node_modules/vue-loader/lib/selector.js?type=style&index=0!./VueBootstrapTable.vue", function() {
var newContent = require("!!../node_modules/css-loader/index.js?sourceMap!../node_modules/vue-loader/lib/style-rewriter.js!../node_modules/vue-loader/lib/selector.js?type=style&index=0!./VueBootstrapTable.vue");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
}
// When the module is disposed, remove the <style> tags
module.hot.dispose(function() { update(); });
}
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(7)();
// imports
// module
exports.push([module.id, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n .vue-table {\n\n }\n\n /*#maindiv {\n content: \" \";\n box-sizing: border-box;\n display:\n table; width: 100%;\n }\n*/\n .vue-table-loading .spinner {\n border: 16px solid #f3f3f3; /* Light grey */\n border-top: 16px solid #3498db; /* Blue */\n border-radius: 50%;\n width: 120px;\n height: 120px;\n animation: spin 2s linear infinite;\n position: absolute;\n left: 50%;\n top: 50%;\n margin: -60px 0 0 -60px;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n\n .vue-table-loading{\n position: absolute;\n z-index: 99;\n background-color: #ddd;\n opacity: 0.5;\n width: 100%;\n height: 100%;\n }\n\n .vue-table-loading-hidden {\n display: none;\n }\n\n table.vue-table thead > tr > th {\n cursor: pointer;\n padding-right: 30px !important;\n }\n\n /*.vue-table th.active {\n color: red;\n }*/\n\n .vue-table .arrow {\n opacity: 1;\n position: relative;\n }\n\n .vue-table .arrow:after {\n position: absolute;\n bottom: 8px;\n right: 8px;\n display: block;\n font-family: 'Glyphicons Halflings';\n content: \"\\E150\";\n /*\n display: inline-block;\n vertical-align: middle;\n width: 0;\n height: 0;\n margin-left: 5px;\n opacity: 0.66;*/\n }\n\n .vue-table .arrow.asc:after {\n content: \"\\E155\";\n /*\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 4px solid #000;\n */\n }\n\n .vue-table .arrow.dsc:after {\n content: \"\\E156\";\n }\n\n\n .vue-table .editableField {\n cursor:pointer;\n }\n\n /*.vue-table .selected-cell {\n background-color: #F7C072;\n }\n\n .vue-table .selected-row {\n background-color: #FAE1BE !important;\n }*/\n", "", {"version":3,"sources":["/./src/VueBootstrapTable.vue?71e27080"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkFA;;KAEA;;IAEA;;;;;;EAMA;IACA;QACA,2BAAA,CAAA,gBAAA;QACA,+BAAA,CAAA,UAAA;QACA,mBAAA;QACA,aAAA;QACA,cAAA;QACA,mCAAA;QACA,mBAAA;QACA,UAAA;QACA,SAAA;QACA,wBAAA;KACA;;IAEA;QACA,KAAA,wBAAA,EAAA;QACA,OAAA,0BAAA,EAAA;KACA;;;IAGA;QACA,mBAAA;QACA,YAAA;QACA,uBAAA;QACA,aAAA;QACA,YAAA;QACA,aAAA;KACA;;IAEA;QACA,cAAA;KACA;;IAEA;QACA,gBAAA;QACA,+BAAA;KACA;;IAEA;;OAEA;;IAEA;QACA,WAAA;QACA,mBAAA;KACA;;IAEA;QACA,mBAAA;QACA,YAAA;QACA,WAAA;QACA,eAAA;QACA,oCAAA;QACA,iBAAA;QACA;;;;;;wBAMA;KACA;;IAEA;QACA,iBAAA;QACA;;;;UAIA;KACA;;IAEA;QACA,iBAAA;KACA;;;IAGA;QACA,eAAA;KACA;;IAEA;;;;;;OAMA","file":"VueBootstrapTable.vue","sourcesContent":["<template>\r\n <div id=\"maindiv\" @click=\"closeDropdown\" @keyup.esc=\"closeDropdown\">\r\n <!--<pre>{{columns}}</pre>-->\r\n <!--<pre>{{$data}}</pre>-->\r\n <div class=\"col-sm-6\">\r\n <div v-if=\"showFilter\" style=\"padding-top: 10px;padding-bottom: 10px;\">\r\n <div class=\"input-group\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Filter\" v-model=\"filterKey\">\r\n <div class=\"input-group-addon\">\r\n <i class=\"glyphicon glyphicon-search\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-6\">\r\n <div v-if=\"showColumnPicker\" style=\"padding-top: 10px;padding-bottom: 10px;float:right;\">\r\n <div class=\"btn-group\" :class=\"{'open' : columnMenuOpen}\">\r\n <button @click.stop.prevent=\"columnMenuOpen = !columnMenuOpen\" @keyup.esc=\"columnMenuOpen = false\"\r\n type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\"\r\n aria-haspopup=\"true\">\r\n Columns <span class=\"caret\"></span>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li v-for=\"column in displayCols\">\r\n <a href=\"#\" @click.stop.prevent=\"toggleColumn(column)\">\r\n <i v-if=\"column.visible\" class=\"glyphicon glyphicon-ok\"></i> {{column.title}}\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-sm-12\">\r\n <div id=\"loadingdiv\" :class=\"{'vue-table-loading': this.loading , 'vue-table-loading-hidden': !this.loading}\">\r\n <div class=\"spinner\"></div>\r\n </div>\r\n <table class=\"table table-bordered table-hover table-condensed table-striped vue-table\">\r\n <thead>\r\n <tr>\r\n <th v-for=\"column in displayColsVisible\" @click=\"sortBy($event, column.name, column.sortable)\"\r\n track-by=\"column\"\r\n :class=\"getClasses(column)\">\r\n {{ column.title }}\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr v-for=\"entry in filteredValuesSorted \" track-by=\"entry\" @click=\"rowClickHandler($event, entry)\">\r\n <td v-for=\"column in displayColsVisible\" track-by=\"column\"\r\n v-show=\"column.visible\" :class=\"column.cellstyle\">\r\n <span v-if=\"column.renderfunction!==false\" v-html=\"column.renderfunction( column.name, entry )\"></span>\r\n <span v-else-if=\"!column.editable\"> {{ entry[column.name] }} </span>\r\n <value-field-section v-else\r\n :entry=\"entry\"\r\n :columnname=\"column.name\"></value-field-section>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div v-if=\"paginated\" class=\"col-sm-12\">\r\n <div class=\"btn-toolbar\" role=\"toolbar\" aria-label=\"pagination bar\">\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"first page\">\r\n <button type=\"button\" class=\"btn btn-default\" @click=\"page=1\">«</button>\r\n </div>\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"pages\">\r\n <button v-for=\"index in validPageNumbers\"\r\n type=\"button\" class=\"btn btn-default\"\r\n :class=\"{ active: page===index }\"\r\n @click=\"page=index\">\r\n {{index}}\r\n </button>\r\n </div>\r\n <div class=\"btn-group\" v-if=\"showPaginationEtc\">...</div>\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"last page\">\r\n <button type=\"button\" class=\"btn btn-default\" @click=\"page=maxPage\">»</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n<style>\r\n .vue-table {\r\n\r\n }\r\n\r\n /*#maindiv {\r\n content: \" \";\r\n box-sizing: border-box;\r\n display:\r\n table; width: 100%;\r\n }\r\n*/\r\n .vue-table-loading .spinner {\r\n border: 16px solid #f3f3f3; /* Light grey */\r\n border-top: 16px solid #3498db; /* Blue */\r\n border-radius: 50%;\r\n width: 120px;\r\n height: 120px;\r\n animation: spin 2s linear infinite;\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n margin: -60px 0 0 -60px;\r\n }\r\n\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n\r\n .vue-table-loading{\r\n position: absolute;\r\n z-index: 99;\r\n background-color: #ddd;\r\n opacity: 0.5;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .vue-table-loading-hidden {\r\n display: none;\r\n }\r\n\r\n table.vue-table thead > tr > th {\r\n cursor: pointer;\r\n padding-right: 30px !important;\r\n }\r\n\r\n /*.vue-table th.active {\r\n color: red;\r\n }*/\r\n\r\n .vue-table .arrow {\r\n opacity: 1;\r\n position: relative;\r\n }\r\n\r\n .vue-table .arrow:after {\r\n position: absolute;\r\n bottom: 8px;\r\n right: 8px;\r\n display: block;\r\n font-family: 'Glyphicons Halflings';\r\n content: \"\\e150\";\r\n /*\r\n display: inline-block;\r\n vertical-align: middle;\r\n width: 0;\r\n height: 0;\r\n margin-left: 5px;\r\n opacity: 0.66;*/\r\n }\r\n\r\n .vue-table .arrow.asc:after {\r\n content: \"\\e155\";\r\n /*\r\n border-left: 4px solid transparent;\r\n border-right: 4px solid transparent;\r\n border-bottom: 4px solid #000;\r\n */\r\n }\r\n\r\n .vue-table .arrow.dsc:after {\r\n content: \"\\e156\";\r\n }\r\n\r\n\r\n .vue-table .editableField {\r\n cursor:pointer;\r\n }\r\n\r\n /*.vue-table .selected-cell {\r\n background-color: #F7C072;\r\n }\r\n\r\n .vue-table .selected-row {\r\n background-color: #FAE1BE !important;\r\n }*/\r\n</style>\r\n<script>\r\n\r\n /* used for fixing IE problems*/\r\n import { polyfill } from 'es6-promise'; polyfill();\r\n import axios from 'axios';\r\n import qs from 'qs';\r\n import lodashorderby from 'lodash.orderby';\r\n import lodashincludes from 'lodash.includes';\r\n import lodashfindindex from 'lodash.findindex';\r\n\r\n\r\n /* Field Section used for displaying and editing value of cell */\r\n var valueFieldSection = {\r\n template: '<span v-if=\"!enabled\" @dblclick=\"toggleInput\" class=\"editableField\">{{this.entry[this.columnname]}}</span>'+\r\n '<div v-else-if=\"enabled\" class=\"input-group\">'+\r\n ' <input type=\"text\" class=\"form-control\" v-model=\"datavalue\" @keyup.enter=\"saveThis\" @keyup.esc=\"cancelThis\">'+\r\n ' <span class=\"input-group-btn\">'+\r\n ' <button class=\"btn btn-danger\" type=\"button\" @click=\"cancelThis\" ><span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\"></span></button>'+\r\n ' <button class=\"btn btn-primary\" type=\"button\" @click=\"saveThis\" ><span class=\"glyphicon glyphicon-ok\" aria-hidden=\"true\"></span></button>'+\r\n ' </span>'+\r\n '</div>',\r\n props: ['entry','columnname'],\r\n data: function () {\r\n return {\r\n enabled: false,\r\n datavalue: \"\",\r\n }\r\n },\r\n methods: {\r\n saveThis: function () {\r\n var originalValue = this.entry[this.columnname];\r\n this.entry[this.columnname] = this.datavalue;\r\n this.$parent.$emit('cellDataModifiedEvent', originalValue, this.datavalue, this.columnname, this.entry);\r\n this.enabled = !this.enabled;\r\n },\r\n cancelThis: function () {\r\n this.datavalue = this.entry[this.columnname];\r\n this.enabled = !this.enabled;\r\n },\r\n toggleInput: function () {\r\n this.datavalue= this.entry[this.columnname];\r\n this.enabled=!this.enabled;\r\n },\r\n }\r\n };\r\n\r\n export default {\r\n name: \"VueBootstrapTable\",\r\n components: {\r\n 'value-field-section': valueFieldSection,\r\n },\r\n props: {\r\n /**\r\n * The column titles, required\r\n */\r\n columns: {\r\n type: Array,\r\n required: true,\r\n },\r\n /**\r\n * The rows, an Array of objects\r\n */\r\n values: {\r\n type: Array,\r\n required: false,\r\n },\r\n /**\r\n * Enable/disable table sorting, optional, default true\r\n */\r\n sortable: {\r\n type: Boolean,\r\n required: false,\r\n default: true,\r\n },\r\n /**\r\n * Enable/disable table multicolumn sorting, optional, default false.\r\n * Also sortable must be enabled for this function to work.\r\n */\r\n multiColumnSortable: {\r\n type: Boolean,\r\n required: false,\r\n default: false,\r\n },\r\n /**\r\n * Enable/disable input filter, optional, default false\r\n */\r\n showFilter: {\r\n type: Boolean,\r\n required: false,\r\n default: false,\r\n },\r\n /**\r\n * Define if Filter search field is to work in a case Sensitive way. Default: true\r\n */\r\n filterCaseSensitive: {\r\n type: Boolean,\r\n required: false,\r\n default: true,\r\n },\r\n /**\r\n * Enable/disable column picker to show/hide table columns, optional, default false\r\n */\r\n showColumnPicker: {\r\n type: Boolean,\r\n required: false,\r\n default: false,\r\n },\r\n /**\r\n * Enable/disable pagination for the table, optional, default false\r\n */\r\n paginated: {\r\n type: Boolean,\r\n required: false,\r\n default: false,\r\n },\r\n /**\r\n * If pagination is enabled defining the page size, optional, default 10\r\n */\r\n pageSize: {\r\n type: Number,\r\n required: false,\r\n default: 10,\r\n },\r\n /**\r\n * Setting default order column. Expected name of the column\r\n */\r\n defaultOrderColumn: {\r\n type: String,\r\n required: false,\r\n default: null,\r\n },\r\n /**\r\n * Setting default order direction. Boolean: true = ASC , false = DESC\r\n */\r\n defaultOrderDirection: {\r\n type: Boolean,\r\n required: false,\r\n default: true,\r\n },\r\n /**\r\n * If loading of table is to be done through ajax, then this object must be set\r\n */\r\n ajax: {\r\n type: Object,\r\n required: false,\r\n default: function () {\r\n return {\r\n enabled: false,\r\n url: \"\",\r\n method: \"GET\",\r\n delegate: false,\r\n axiosConfig: {}\r\n }\r\n }\r\n },\r\n /**\r\n * Function to handle row clicks\r\n */\r\n rowClickHandler: {\r\n type: Function,\r\n required: false,\r\n default: function () {}\r\n },\r\n },\r\n data: function () {\r\n return {\r\n filteredSize: 0,\r\n filterKey: \"\",\r\n sortKey: [],\r\n sortOrders: {},\r\n sortChanged: 1,\r\n columnMenuOpen: false,\r\n displayCols: [],\r\n filteredValues: [],\r\n rawValues: [],\r\n page: 1,\r\n definedPageSize: 10,\r\n echo: 0,\r\n loading: false,\r\n };\r\n },\r\n /**\r\n * Once mounted and ready to start\r\n */\r\n mounted: function () {\r\n this.$nextTick(function () {\r\n this.loading = true;\r\n this.setSortOrders();\r\n this.definedPageSize = this.pageSize;\r\n var self = this;\r\n //\r\n if (this.defaultOrderColumn !== null) {\r\n console.log(\"setting order default\");\r\n self.sortKey[0] = this.defaultOrderColumn;\r\n if (this.defaultOrderDirection)\r\n self.sortOrders[this.defaultOrderColumn] = \"ASC\";\r\n else\r\n self.sortOrders[this.defaultOrderColumn] = \"DESC\";\r\n }\r\n // Build columns\r\n this.columns.forEach(function (column) {\r\n var obj = self.buildColumnObject(column);\r\n self.displayCols.push(obj);\r\n });\r\n // Work the data\r\n if (this.ajax.enabled) {\r\n if (!this.ajax.delegate) {\r\n // If ajax but NOT delegate\r\n // Perform the fetch of data now and set the raw values\r\n this.loading = true;\r\n this.fetchData(function (data) {\r\n self.rawValues = data.data;\r\n });\r\n } else {\r\n // If ajax and also delegate\r\n // Simply call processFilter, which will take care of the fetching\r\n //this.processFilter();\r\n }\r\n } else {\r\n // Not ajax, therefore working with given elements\r\n // Pass the Prop values to rawValues data object.\r\n self.rawValues = self.values;\r\n }\r\n })\r\n },\r\n /**\r\n * On created register on CellDataModified event\r\n */\r\n created: function () {\r\n var self = this ;\r\n this.$on('cellDataModifiedEvent', self.fireCellDataModifiedEvent);\r\n },\r\n /**\r\n * On destroy unregister the event\r\n */\r\n beforeDestroy: function(){\r\n var self = this ;\r\n this.$off('cellDataModifiedEvent', self.fireCellDataModifiedEvent);\r\n },\r\n watch: {\r\n rawValues: function () {\r\n this.processFilter();\r\n },\r\n columns: function () {\r\n this.displayCols = [];\r\n var self = this;\r\n this.columns.forEach(function (column) {\r\n var obj = self.buildColumnObject(column);\r\n self.displayCols.push(obj);\r\n });\r\n this.setSortOrders();\r\n },\r\n showFilter: function () {\r\n this.filterKey = \"\";\r\n },\r\n showColumnPicker: function () {\r\n this.columnMenuOpen = false;\r\n\r\n this.displayCols.forEach(function (column) {\r\n column.visible = true;\r\n });\r\n },\r\n filterKey: function () {\r\n // filter was updated, so resetting to page 1\r\n this.page = 1;\r\n this.processFilter();\r\n },\r\n sortKey: function () {\r\n this.processFilter();\r\n },\r\n sortChanged: function () {\r\n this.processFilter();\r\n },\r\n page: function () {\r\n this.processFilter();\r\n },\r\n paginated: function () {\r\n this.processFilter();\r\n },\r\n loading: function () {\r\n /*document.getElementById(\"loadingdiv\").style.width = document.getElementById(\"maindiv\").getBoundingClientRect().width + \"px\";\r\n document.getElementById(\"loadingdiv\").style.height = document.getElementById(\"maindiv\").getBoundingClientRect().height+\"px\";*/\r\n }\r\n },\r\n computed: {\r\n displayColsVisible: function () {\r\n var displayColsVisible = [];\r\n for (var a in this.displayCols) {\r\n if (this.displayCols[a].visible)\r\n displayColsVisible.push(this.displayCols[a]);\r\n }\r\n return displayColsVisible;\r\n },\r\n filteredValuesSorted: function () {\r\n var tColsDir = [];\r\n for(var i=0, len=this.sortKey.length; i < len; i++){\r\n tColsDir.push(this.sortOrders[this.sortKey[i]].toLowerCase());\r\n }\r\n if (typeof this.ajax !== 'undefined' && this.ajax.enabled && this.ajax.delegate) {\r\n return this.filteredValues;\r\n } else {\r\n return lodashorderby(this.filteredValues, this.sortKey, tColsDir);\r\n }\r\n },\r\n validPageNumbers: function () {\r\n // 5 page max\r\n var result = [];\r\n var start = 1;\r\n if (this.page > 3)\r\n start = this.page-2;\r\n for ( var i = 0 ; start <= this.maxPage && i<5; start++ ) {\r\n result.push(start);\r\n i++;\r\n }\r\n return result;\r\n },\r\n maxPage: function () {\r\n return Math.ceil(this.filteredSize / this.definedPageSize);\r\n },\r\n showPaginationEtc: function () {\r\n var temp = 1;\r\n if (this.page > 3)\r\n temp = this.page-2;\r\n return ( (temp+4) < this.maxPage );\r\n },\r\n },\r\n methods: {\r\n refresh: function(){\r\n this.processFilter();\r\n },\r\n setPageSize: function(newPageSize){\r\n this.definedPageSize = newPageSize;\r\n this.processFilter();\r\n },\r\n /**\r\n * Used to fire off events when something happens to a cell\r\n */\r\n fireCellDataModifiedEvent:function ( originalValue, newValue, columnTitle, entry) {\r\n this.$parent.$emit('cellDataModifiedEvent',originalValue, newValue, columnTitle, entry);\r\n },\r\n processFilter: function () {\r\n var self = this;\r\n this.loading = true;\r\n if ( this.ajax.enabled && this.ajax.delegate ) {\r\n this.fetchData(function (data) {\r\n self.filteredSize = data.filtered;\r\n self.filteredValues = data.data;\r\n self.loading = false;\r\n });\r\n } else {\r\n var result = this.rawValues.filter(item => {\r\n for (var col in self.displayColsVisible) {\r\n if (self.displayColsVisible[col].filterable) {\r\n if (self.filterCaseSensitive) {\r\n if (lodashincludes(item[self.displayColsVisible[col].name] + \"\", self.filterKey + \"\")) {\r\n return true;\r\n }\r\n } else {\r\n if (lodashincludes((item[self.displayColsVisible[col].name] + \"\").toLowerCase(), (self.filterKey + \"\").toLowerCase())) {\r\n return true;\r\n }\r\n }\r\n }\r\n }\r\n return false;\r\n });\r\n\r\n var tColsDir = [];\r\n for(var i=0, len=this.sortKey.length; i < len; i++){\r\n tColsDir.push(this.sortOrders[this.sortKey[i]].toLowerCase());\r\n }\r\n\r\n if (typeof this.ajax !== 'undefined' && this.ajax.enabled && this.ajax.delegate) {}\r\n else {\r\n result = lodashorderby(result, this.sortKey, tColsDir);\r\n }\r\n\r\n this.filteredSize = result.length;\r\n if (this.paginated) {\r\n var startIndex = (this.page - 1) * this.definedPageSize;\r\n var tIndex = 0;\r\n var tempResult = [];\r\n while (tIndex < this.definedPageSize) {\r\n if (typeof result[startIndex + tIndex] !== \"undefined\")\r\n tempResult.push(result[startIndex + tIndex]);\r\n tIndex++;\r\n }\r\n self.filteredValues = tempResult;\r\n } else\r\n self.filteredValues = result;\r\n self.loading = false;\r\n }\r\n },\r\n fetchData: function ( dataCallBackFunction ) {\r\n var self = this;\r\n var ajaxParameters = {\r\n params: {}\r\n };\r\n this.echo++;\r\n if (this.ajax.enabled && this.ajax.delegate) {\r\n var tColsDir = [];\r\n for(var i=0, len=this.sortKey.length; i < len; i++){\r\n tColsDir.push(this.sortOrders[this.sortKey[i]].toLowerCase());\r\n }\r\n if ( this.ajax.method=== \"GET\" ) {\r\n //COPY\r\n if (this.ajax !== null && this.ajax.axiosConfig!==null && this.ajax.axiosConfig!== undefined) {\r\n ajaxParameters = JSON.parse(\r\n JSON.stringify(this.ajax.axiosConfig)\r\n );\r\n }\r\n ajaxParameters.params = {};\r\n ajaxParameters.params.sortcol = this.sortKey;\r\n ajaxParameters.params.sortdir = tColsDir;\r\n ajaxParameters.params.filter = this.filterKey;\r\n if (self.paginated ) {\r\n ajaxParameters.params.page = this.page;\r\n ajaxParameters.params.pagesize = this.definedPageSize;\r\n } else {\r\n ajaxParameters.params.page = 1;\r\n ajaxParameters.params.pagesize = null;\r\n }\r\n ajaxParameters.params.echo = this.echo;\r\n }\r\n if ( this.ajax.method=== \"POST\" ) {\r\n ajaxParameters.sortcol = this.sortKey;\r\n ajaxParameters.sortdir = tColsDir;\r\n ajaxParameters.filter = this.filterKey;\r\n if (self.paginated ) {\r\n ajaxParameters.page = this.page;\r\n ajaxParameters.pagesize = this.definedPageSize;\r\n } else {\r\n ajaxParameters.page = 1;\r\n ajaxParameters.pagesize = null;\r\n }\r\n ajaxParameters.echo = this.echo;\r\n }\r\n //console.log(JSON.stringify(ajaxParameters));\r\n }\r\n if( this.ajax.enabled && !this.ajax.delegate ) {\r\n if ( this.ajax.method=== \"GET\" ) {\r\n //COPY\r\n if (this.ajax !== null && this.ajax.axiosConfig!==null && this.ajax.axiosConfig!== undefined) {\r\n ajaxParameters = JSON.parse(JSON.stringify(this.ajax.axiosConfig));\r\n }\r\n ajaxParameters.params = {};\r\n }\r\n if ( this.ajax.method=== \"POST\" ) {\r\n // Do nothing at this point !\r\n }\r\n }\r\n if (this.ajax.enabled && this.ajax.method === \"GET\") {\r\n axios.get(self.ajax.url, ajaxParameters )\r\n .then(response => {\r\n if (this.ajax.delegate) {\r\n if (response.data.echo !== self.echo) {\r\n return;\r\n }\r\n }\r\n dataCallBackFunction(response.data);\r\n this.$parent.$emit('ajaxLoadedEvent', response.data);\r\n })\r\n .catch(e => {\r\n this.$parent.$emit('ajaxLoadingError', e);\r\n });\r\n }\r\n if (this.ajax.enabled && this.ajax.method === \"POST\") {\r\n var tempAxiosConf = {};\r\n if (this.ajax !== null && this.ajax.axiosConfig!==null && this.ajax.axiosConfig!== undefined) {\r\n tempAxiosConf = this.ajax.axiosConfig\r\n }\r\n axios.post(self.ajax.url, qs.stringify(ajaxParameters) , tempAxiosConf )\r\n .then(response => {\r\n if (this.ajax.delegate) {\r\n if (response.data.echo !== self.echo) {\r\n return;\r\n }\r\n }\r\n\r\n dataCallBackFunction(response.data);\r\n this.$parent.$emit('ajaxLoadedEvent', response.data);\r\n\r\n })\r\n .catch(e => {\r\n this.$parent.$emit('ajaxLoadingError', e);\r\n });\r\n }\r\n },\r\n buildColumnObject: function (column) {\r\n var obj = {};\r\n obj.title = column.title;\r\n if ( typeof column.name !== \"undefined\")\r\n obj.name = column.name;\r\n else\r\n obj.name = column.title;\r\n if ( typeof column.visible !== \"undefined\")\r\n obj.visible = column.visible;\r\n else\r\n obj.visible = true;\r\n if ( typeof column.editable !== \"undefined\")\r\n obj.editable = column.editable;\r\n else\r\n obj.editable = false;\r\n if ( typeof column.renderfunction !== \"undefined\")\r\n obj.renderfunction = column.renderfunction;\r\n else\r\n obj.renderfunction = false;\r\n if ( typeof column.columnstyle !== \"undefined\")\r\n obj.columnstyle = column.columnstyle;\r\n else\r\n obj.columnstyle = \"\";\r\n if ( typeof column.cellstyle !== \"undefined\")\r\n obj.cellstyle = column.cellstyle;\r\n else\r\n obj.cellstyle = \"\";\r\n if ( typeof column.sortable !== \"undefined\")\r\n obj.sortable = column.sortable;\r\n else\r\n obj.sortable = true;\r\n if ( typeof column.filterable !== \"undefined\")\r\n obj.filterable = column.filterable;\r\n else\r\n obj.filterable = true;\r\n\r\n return obj;\r\n },\r\n setSortOrders: function () {\r\n this.sortKey = [];\r\n var sortOrders = {};\r\n this.columns.forEach(function (column) {\r\n sortOrders[column.name] = \"\";\r\n });\r\n this.sortOrders = sortOrders;\r\n\r\n },\r\n sortBy: function (event, key, enabled) {\r\n if (!enabled)\r\n return;\r\n if (this.sortable) {\r\n var self = this;\r\n\r\n if (!this.multiColumnSortable || ( this.multiColumnSortable && !event.shiftKey)) {\r\n this.sortKey = [key];\r\n this.columns.forEach(function (column) {\r\n if (column.name !== key) {\r\n self.sortOrders[column.name] = \"\";\r\n }\r\n });\r\n } else {\r\n if (lodashfindindex(this.sortKey, function(o) { return o === key; }) === -1) {\r\n this.sortKey.push(key);\r\n }\r\n }\r\n if (this.sortOrders[key] === \"\") {\r\n this.sortOrders[key] = \"ASC\";\r\n } else if (this.sortOrders[key] === \"ASC\") {\r\n this.sortOrders[key] = \"DESC\";\r\n } else {\r\n this.sortOrders[key] = \"ASC\";\r\n }\r\n\r\n this.sortChanged = this.sortChanged * -1;\r\n }\r\n },\r\n getClasses: function (column) {\r\n var classes = [column.columnstyle];\r\n var key = column.name;\r\n if (this.sortable && column.sortable) {\r\n classes.push(\"arrow\");\r\n /*if (this.sortKey === key) {\r\n classes.push(\"active\");\r\n }*/\r\n if (lodashfindindex(this.sortKey, function(o) { return o === key; }) !== -1) {\r\n classes.push(\"active\");\r\n }\r\n\r\n if (this.sortOrders[key] === \"ASC\") {\r\n classes.push(\"asc\");\r\n } else if (this.sortOrders[key] === \"DESC\") {\r\n classes.push(\"dsc\");\r\n }\r\n }\r\n return classes;\r\n },\r\n toggleColumn: function (column) {\r\n column.visible = !column.visible;\r\n },\r\n closeDropdown: function () {\r\n this.columnMenuOpen = false;\r\n },\r\n },\r\n events: {\r\n }\r\n }\r\n</script>\r\n"],"sourceRoot":"webpack://"}]);
// exports
/***/ }),
/* 7 */
/***/ (function(module, exports) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
// css base code, injected by the css-loader
module.exports = function() {
var list = [];
// return the list of modules as css string
list.toString = function toString() {
var result = [];
for(var i = 0; i < this.length; i++) {
var item = this[i];
if(item[2]) {
result.push("@media " + item[2] + "{" + item[1] + "}");
} else {
result.push(item[1]);
}
}
return result.join("");
};
// import a list of modules into the list
list.i = function(modules, mediaQuery) {
if(typeof modules === "string")
modules = [[null, modules, ""]];
var alreadyImportedModules = {};
for(var i = 0; i < this.length; i++) {
var id = this[i][0];
if(typeof id === "number")
alreadyImportedModules[id] = true;
}
for(i = 0; i < modules.length; i++) {
var item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
if(mediaQuery && !item[2]) {
item[2] = mediaQuery;
} else if(mediaQuery) {
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
}
list.push(item);
}
}
};
return list;
};
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
var stylesInDom = {},
memoize = function(fn) {
var memo;
return function () {
if (typeof memo === "undefined") memo = fn.apply(this, arguments);
return memo;
};
},
isOldIE = memoize(function() {
return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
}),
getHeadElement = memoize(function () {
return document.head || document.getElementsByTagName("head")[0];
}),
singletonElement = null,
singletonCounter = 0,
styleElementsInsertedAtTop = [];
module.exports = function(list, options) {
if(false) {
if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
}
options = options || {};
// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
// tags it will allow on a page
if (typeof options.singleton === "undefined") options.singleton = isOldIE();
// By default, add <style> tags to the bottom of <head>.
if (typeof options.insertAt === "undefined") options.insertAt = "bottom";
var styles = listToStyles(list);
addStylesToDom(styles, options);
return function update(newList) {
var mayRemove = [];
for(var i = 0; i < styles.length; i++) {
var item = styles[i];
var domStyle = stylesInDom[item.id];
domStyle.refs--;
mayRemove.push(domStyle);
}
if(newList) {
var newStyles = listToStyles(newList);
addStylesToDom(newStyles, options);
}
for(var i = 0; i < mayRemove.length; i++) {
var domStyle = mayRemove[i];
if(domStyle.refs === 0) {
for(var j = 0; j < domStyle.parts.length; j++)
domStyle.parts[j]();
delete stylesInDom[domStyle.id];
}
}
};
}
function addStylesToDom(styles, options) {
for(var i = 0; i < styles.length; i++) {
var item = styles[i];
var domStyle = stylesInDom[item.id];
if(domStyle) {
domStyle.refs++;
for(var j = 0; j < domStyle.parts.length; j++) {
domStyle.parts[j](item.parts[j]);
}
for(; j < item.parts.length; j++) {
domStyle.parts.push(addStyle(item.parts[j], options));
}
} else {
var parts = [];
for(var j = 0; j < item.parts.length; j++) {
parts.push(addStyle(item.parts[j], options));
}
stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};
}
}
}
function listToStyles(list) {
var styles = [];
var newStyles = {};
for(var i = 0; i < list.length; i++) {
var item = list[i];
var id = item[0];
var css = item[1];
var media = item[2];
var sourceMap = item[3];
var part = {css: css, media: media, sourceMap: sourceMap};
if(!newStyles[id])
styles.push(newStyles[id] = {id: id, parts: [part]});
else
newStyles[id].parts.push(part);
}
return styles;
}
function insertStyleElement(options, styleElement) {