ng-simplegrid
Version:
<!--[](https://travis-ci.org/tb/ng2-nouislider) [](http://badge.fury.io/js/ng2-nouislider) [ • 20 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("@angular/core"), require("@angular/common"));
else if(typeof define === 'function' && define.amd)
define("ng-simplegrid", ["@angular/core", "@angular/common"], factory);
else if(typeof exports === 'object')
exports["ng-simplegrid"] = factory(require("@angular/core"), require("@angular/common"));
else
root["ng-simplegrid"] = factory(root["@angular/core"], root["@angular/common"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_10__) {
return /******/ (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] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = 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;
/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 5);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = __webpack_require__(0);
var GridComponent = (function () {
function GridComponent() {
this.rowsPerPage = 10;
this.dataList = [];
this.emptyMessage = '검색한 내역이 없습니다';
this.dataListToShow = [];
this.totalPageCount = 1;
this.currentPageIndex = 0;
this.emptyRows = [];
}
GridComponent.prototype.ngOnInit = function () {
if (!this.columns)
console.error('ng-simpleGrid: grid.columns is not exists.');
};
GridComponent.prototype.setDataList = function (dataList) {
this.dataList = dataList;
this.initializeData(dataList);
};
GridComponent.prototype.initializeData = function (dataList) {
this.totalPageCount = this._getTotalPageCount(this.rowsPerPage, dataList);
this.dataListPerPage = this._getDataListPerPage(this.rowsPerPage, dataList);
this.dataListToShow = this.dataListPerPage[0];
this.emptyRows = this._getEmptyRowsToBeFilled(this.rowsPerPage, this.dataListToShow);
};
GridComponent.prototype.search = function (key, value) {
if (!this.dataList)
return;
if (value === '') {
this.initializeData(this.dataList);
return;
}
var filteredList = [];
for (var _i = 0, _a = this.dataList; _i < _a.length; _i++) {
var data = _a[_i];
if (data[key].include(data))
filteredList.push(data);
}
this.initializeData(filteredList);
};
GridComponent.prototype.onClickDataItem = function (e, value, datarow, key, index) {
var column = this._getColumnByProperty(this.columns, key, 'onClick');
if (column == null)
return;
column.onClick(e, value, index, datarow);
};
GridComponent.prototype.onMovePage = function (pageIndex) {
if (!this.dataListPerPage)
return;
this.dataListToShow = this.dataListPerPage[pageIndex];
this.emptyRows = this._getEmptyRowsToBeFilled(this.rowsPerPage, this.dataListToShow);
this.currentPageIndex = pageIndex;
};
GridComponent.prototype.onClickDataRow = function (e, row, index) {
if (this.event && this.event.onClickRow) {
this.event.onClickRow(row, index);
}
};
GridComponent.prototype._getColumnByProperty = function (columns, key, property) {
var selectedColumn = null;
for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {
var column = columns_1[_i];
if (column.key == key) {
if (column.hasOwnProperty(property)) {
selectedColumn = column;
break;
}
}
}
return selectedColumn;
};
GridComponent.prototype._getTotalPageCount = function (rowsPerPage, dataList) {
var dataListSize = dataList.length;
return Math.ceil(dataListSize / rowsPerPage);
};
GridComponent.prototype._getDataListPerPage = function (rowsPerPage, dataList) {
var dataListPerPage = [];
for (var i = 0; i <= this.totalPageCount; i++) {
dataListPerPage.push(this.dataList.splice(0, rowsPerPage));
}
return dataListPerPage;
};
GridComponent.prototype._getEmptyRowsToBeFilled = function (rowsPerPage, dataList) {
var emptyRowsCount = rowsPerPage - dataList.length;
return new Array(emptyRowsCount);
};
return GridComponent;
}());
__decorate([
core_1.Input(),
__metadata("design:type", Array)
], GridComponent.prototype, "columns", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Object)
], GridComponent.prototype, "event", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Number)
], GridComponent.prototype, "rowsPerPage", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Array)
], GridComponent.prototype, "dataList", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", String)
], GridComponent.prototype, "emptyMessage", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", String)
], GridComponent.prototype, "emptySubMessage", void 0);
GridComponent = __decorate([
core_1.Component({
selector: 'ng-simpleGrid',
styles: [__webpack_require__(6)],
template: __webpack_require__(8)
}),
__metadata("design:paramtypes", [])
], GridComponent);
exports.GridComponent = GridComponent;
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = __webpack_require__(0);
var PaginationComponent = (function () {
function PaginationComponent() {
this.movePage = new core_1.EventEmitter();
}
PaginationComponent.prototype.ngOnInit = function () {
console.log('oninit pagination');
};
PaginationComponent.prototype.createRange = function (number) {
var numberList = [];
for (var i = 0; i < number; i++) {
numberList.push(i);
}
return numberList;
};
PaginationComponent.prototype.onMovePage = function (pageIndex) {
this.movePage.emit(pageIndex);
};
PaginationComponent.prototype.onMoveFirst = function () {
var FIRST_PAGE_INDEX = 0;
if (this.currentPageIndex == FIRST_PAGE_INDEX)
return;
this.onMovePage(FIRST_PAGE_INDEX);
};
PaginationComponent.prototype.onMoveLast = function () {
var LAST_PAGE_INDEX = this.totalPageCount - 1;
if (this.currentPageIndex == LAST_PAGE_INDEX)
return;
this.onMovePage(LAST_PAGE_INDEX);
};
PaginationComponent.prototype.onMoveNext = function () {
var LAST_PAGE_INDEX = this.totalPageCount - 1;
if (this.currentPageIndex == LAST_PAGE_INDEX)
return;
this.currentPageIndex = this.currentPageIndex + 1;
this.onMovePage(this.currentPageIndex);
};
PaginationComponent.prototype.onMovePrev = function () {
var FIRST_PAGE_INDEX = 0;
if (this.currentPageIndex == FIRST_PAGE_INDEX)
return;
this.currentPageIndex = this.currentPageIndex - 1;
this.onMovePage(this.currentPageIndex);
};
return PaginationComponent;
}());
__decorate([
core_1.Input(),
__metadata("design:type", Number)
], PaginationComponent.prototype, "totalPageCount", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Number)
], PaginationComponent.prototype, "currentPageIndex", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", core_1.EventEmitter)
], PaginationComponent.prototype, "movePage", void 0);
PaginationComponent = __decorate([
core_1.Component({
selector: 'ng-simplePagination',
styles: [__webpack_require__(7)],
template: __webpack_require__(9)
}),
__metadata("design:paramtypes", [])
], PaginationComponent);
exports.PaginationComponent = PaginationComponent;
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var grid_component_1 = __webpack_require__(1);
exports.GridComponent = grid_component_1.GridComponent;
var pagination_component_1 = __webpack_require__(2);
exports.PaginationComponent = pagination_component_1.PaginationComponent;
var grid_module_1 = __webpack_require__(4);
exports.GridModule = grid_module_1.GridModule;
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = __webpack_require__(0);
var common_1 = __webpack_require__(10);
var grid_component_1 = __webpack_require__(1);
var pagination_component_1 = __webpack_require__(2);
var GridModule = (function () {
function GridModule() {
}
return GridModule;
}());
GridModule = __decorate([
core_1.NgModule({
imports: [common_1.CommonModule],
declarations: [grid_component_1.GridComponent, pagination_component_1.PaginationComponent],
exports: [common_1.CommonModule, grid_component_1.GridComponent, pagination_component_1.PaginationComponent]
})
], GridModule);
exports.GridModule = GridModule;
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var index_1 = __webpack_require__(3);
exports.GridModule = index_1.GridModule;
exports.GridComponent = index_1.GridComponent;
exports.PaginationComponent = index_1.PaginationComponent;
/***/ }),
/* 6 */
/***/ (function(module, exports) {
module.exports = ".tbl-search-result {\n margin: 0;\n padding: 0;\n border: 0;\n outline: 0;\n vertical-align: middle;\n background: transparent;\n border-spacing: 0;\n width: 100%;\n border: 1px solid #dee1e6;\n border-width: 1px 1px 0 1px;\n table-layout: fixed; }\n .tbl-search-result thead th {\n border-top: 1px;\n height: 40px;\n text-align: center;\n color: #6d6e73;\n background: #f2f5fa;\n font-size: 14px;\n padding: 0 5px; }\n .tbl-search-result tbody tr:hover {\n background-color: beige; }\n .tbl-search-result tbody td {\n cursor: pointer;\n text-align: center;\n font-size: 14px;\n color: #6d6e73;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n height: 40px;\n border-bottom: 1px solid #dee1e6;\n padding: 0 5px; }\n .tbl-search-result tbody td.no-data {\n padding: 0;\n height: 200px;\n color: #4d5662;\n font-size: 16px;\n font-weight: bold; }\n .tbl-search-result tbody td.no-data .sub {\n font-size: 14px;\n color: #6d6e73;\n line-height: 150%;\n margin-top: 20px;\n font-weight: 400; }\n .tbl-search-result tbody td button {\n background-color: #555555;\n /* Green */\n cursor: pointer;\n border: none;\n color: white;\n padding: 5px 10px;\n margin: 5px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 16px; }\n"
/***/ }),
/* 7 */
/***/ (function(module, exports) {
module.exports = ".paginate {\n text-align: center;\n padding: 10px 0;\n font: 0/0 \"Noto Sans KR\"; }\n .paginate a {\n display: inline-block;\n width: 30px;\n height: 30px;\n text-align: center;\n font-size: 15px;\n line-height: 30px;\n cursor: pointer;\n vertical-align: middle; }\n .paginate strong {\n display: inline-block;\n width: 30px;\n height: 30px;\n text-align: center;\n font-size: 15px;\n line-height: 30px;\n cursor: pointer;\n vertical-align: middle;\n border: 1px solid #fcd20c;\n font-size: 15px;\n line-height: 26px; }\n .paginate .button-prev {\n font: 0/0 \"Noto Sans KR\";\n background: url(\"/assets/images/icon/ico-paginate-prev.png\") 50% 50% no-repeat; }\n .paginate .button-next {\n font: 0/0 \"Noto Sans KR\";\n background: url(\"/assets/images/icon/ico-paginate-next.png\") 50% 50% no-repeat; }\n"
/***/ }),
/* 8 */
/***/ (function(module, exports) {
module.exports = "<table class=\"tbl-search-result\">\n <thead>\n <tr>\n <ng-template ngFor let-column [ngForOf]=\"columns\">\n <th [width]=\"column.width || '10%'\">{{ column.name }}</th>\n </ng-template>\n </tr>\n </thead>\n <tbody>\n <ng-template ngFor let-datarow [ngForOf]=\"dataListToShow\" let-i=\"index\">\n <tr (click)=\"onClickDataRow($event, datarow, i)\">\n <ng-template ngFor let-column [ngForOf]=\"columns\" let-i=\"index\">\n \n <ng-template [ngIf]=\"column.type == 'text'\">\n <td (click)=\"onClickDataItem($event, column.value ? column.value : datarow[column.key], datarow, column.key, i)\">\n {{ column.value ? column.value : datarow[column.key] }}\n </td>\n </ng-template>\n\n <ng-template [ngIf]=\"column.type == 'button'\">\n <td>\n <button\n (click)=\"onClickDataItem($event, column.value ? column.value : datarow[column.key], datarow, column.key, i)\">\n {{ column.value ? column.value : datarow[column.key] }}\n </button>\n </td>\n </ng-template>\n\n </ng-template>\n </tr>\n </ng-template>\n <ng-template ngFor let-emptyRow [ngForOf]=\"emptyRows\">\n <tr>\n <ng-template ngFor let-column [ngForOf]=\"columns\" let-i=\"index\">\n <td>\n </td>\n </ng-template>\n </tr>\n </ng-template>\n <ng-template [ngIf]=\"dataListToShow.length === 0\">\n <tr>\n <td class=\"no-data\"\n [style.height.px]=\"rowsPerPage * 30\"\n [attr.colspan]=\"columns.length\">\n <p>{{ emptyMessage }}</p>\n <p class=\"sub\" [innerHTML]=\"emptySubMessage\">\n </p>\n </td>\n </tr>\n </ng-template>\n </tbody>\n</table>\n<ng-simplePagination\n [totalPageCount]=\"totalPageCount\"\n [currentPageIndex]=\"currentPageIndex\"\n (movePage)=\"onMovePage($event)\">\n</ng-simplePagination>"
/***/ }),
/* 9 */
/***/ (function(module, exports) {
module.exports = "<div class=\"paginate\">\n <a class=\"item\" (click)=\"onMoveFirst()\">First</a>\n <a class=\"button-prev\" (click)=\"onMovePrev()\">처음</a>\n \n <ng-template ngFor let-pageIndex [ngForOf]=\"createRange(totalPageCount)\">\n <ng-template [ngIf]=\"currentPageIndex === pageIndex\">\n <strong (click)=\"onMovePage(pageIndex)\">\n {{ pageIndex + 1 }} \n </strong> \n </ng-template>\n\n <ng-template [ngIf]=\"currentPageIndex !== pageIndex\">\n <a (click)=\"onMovePage(pageIndex)\">\n {{ pageIndex + 1 }} \n </a>\n </ng-template>\n </ng-template>\n \n <a class=\"button-next\" (click)=\"onMoveNext()\">끝</a>\n <a class=\"item\" (click)=\"onMoveLast()\">Last</a>\n</div>"
/***/ }),
/* 10 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_10__;
/***/ })
/******/ ]);
});
//# sourceMappingURL=ng-simplegrid.umd.js.map