ps-toolkit-ui 0.0.102 → 0.0.103
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/ps-toolkit-ui.umd.js +11 -62
- package/bundles/ps-toolkit-ui.umd.js.map +1 -1
- package/bundles/ps-toolkit-ui.umd.min.js +1 -1
- package/bundles/ps-toolkit-ui.umd.min.js.map +1 -1
- package/esm2015/lib/classes/table.class.js +7 -6
- package/esm2015/lib/components/form/table/form.table.component.js +2 -2
- package/esm2015/lib/components/table/table.component.js +5 -34
- package/fesm2015/ps-toolkit-ui.js +11 -39
- package/fesm2015/ps-toolkit-ui.js.map +1 -1
- package/lib/classes/table.class.d.ts +3 -3
- package/lib/components/table/table.component.d.ts +0 -1
- package/package.json +1 -1
- package/ps-toolkit-ui.metadata.json +1 -1
- package/src/assets/scripts/base.js +0 -8
|
@@ -2126,6 +2126,7 @@ class TableComponent {
|
|
|
2126
2126
|
this.router = router;
|
|
2127
2127
|
this.changeRows = new EventEmitter();
|
|
2128
2128
|
this.select = null;
|
|
2129
|
+
this.export = null;
|
|
2129
2130
|
this.itemsWidth = 0;
|
|
2130
2131
|
}
|
|
2131
2132
|
get type() { return InputType; }
|
|
@@ -2154,7 +2155,6 @@ class TableComponent {
|
|
|
2154
2155
|
this.itemsWidth = this.table.cols.reduce((a, { percent }) => a + percent, 0);
|
|
2155
2156
|
this.reload = new InputClass(this.table.environment, this.table.l, 'Reload', 'fad fa-sync-alt', InputType.Icon, 'm-h-5');
|
|
2156
2157
|
this.maximum = new InputClass(this.table.environment, this.table.l, 'Maximum', 'fad fa-expand-arrows-alt', InputType.Icon, 'm-h-5');
|
|
2157
|
-
this.export = new InputClass(this.table.environment, this.table.l, 'Export', 'fad fa-arrow-to-bottom', InputType.Icon, 'm-h-5');
|
|
2158
2158
|
this.optDelete = new InputClass(this.table.environment, this.table.l, 'Delete', 'fad fa-trash', InputType.Icon, 'red h-25 m-h-5 d-ib va-m f-u');
|
|
2159
2159
|
for (const c of this.table.cols.filter(x => x.withSearch)) {
|
|
2160
2160
|
c.search = new InputClass(this.table.environment, this.table.l, c.name, null, c.type === TableCollType.Date ? InputType.Date : InputType.Text, 'h-25 table-search');
|
|
@@ -2194,11 +2194,6 @@ class TableComponent {
|
|
|
2194
2194
|
this.maximum.icon = this.maximum.name === 'Minimum' ? 'fad fa-expand-arrows-alt' : 'fad fa-compress-arrows-alt';
|
|
2195
2195
|
this.maximum.name = this.maximum.name === 'Minimum' ? 'Maximum' : 'Minimum';
|
|
2196
2196
|
};
|
|
2197
|
-
this.export.onClick = () => {
|
|
2198
|
-
if (!this.export.loading) {
|
|
2199
|
-
$(this.exportDropDown.nativeElement).fadeToggle();
|
|
2200
|
-
}
|
|
2201
|
-
};
|
|
2202
2197
|
this.optDelete.onClick = (i) => {
|
|
2203
2198
|
if (this.table.form) {
|
|
2204
2199
|
this.table.form.clear();
|
|
@@ -2229,7 +2224,7 @@ class TableComponent {
|
|
|
2229
2224
|
}
|
|
2230
2225
|
}
|
|
2231
2226
|
getOptions() {
|
|
2232
|
-
return this.table.
|
|
2227
|
+
return this.table.options.filter(x => x.condition == null).map((o) => {
|
|
2233
2228
|
const i = HelperClass.clone(o);
|
|
2234
2229
|
i.class = i.class + ' m-h-5 h-25 d-ib va-m f-u';
|
|
2235
2230
|
return i;
|
|
@@ -2276,36 +2271,12 @@ class TableComponent {
|
|
|
2276
2271
|
this.table.sort = s;
|
|
2277
2272
|
this.table.load();
|
|
2278
2273
|
}
|
|
2279
|
-
report(type) {
|
|
2280
|
-
$(this.exportDropDown.nativeElement).fadeOut();
|
|
2281
|
-
if (type === 'Print' || type === 'PDF') {
|
|
2282
|
-
window.open(this.table.getUrl(true), '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes');
|
|
2283
|
-
}
|
|
2284
|
-
else {
|
|
2285
|
-
new RequestClass(this.table.l).send(this.table.getUrl(true), Method.Post, null, this.export, (result) => {
|
|
2286
|
-
const report = [];
|
|
2287
|
-
for (const r of result.List) {
|
|
2288
|
-
const row = {};
|
|
2289
|
-
for (const k of Object.keys(r)) {
|
|
2290
|
-
row[this.table.l(k)] = r[k];
|
|
2291
|
-
}
|
|
2292
|
-
report.push(row);
|
|
2293
|
-
}
|
|
2294
|
-
if (type === 'Excel') {
|
|
2295
|
-
// new ExcelService().exportAsExcelFile(report, 'Report');
|
|
2296
|
-
}
|
|
2297
|
-
else if (type === 'CSV') {
|
|
2298
|
-
// new ExcelService().exportAsCsvFile(report, 'Report');
|
|
2299
|
-
}
|
|
2300
|
-
});
|
|
2301
|
-
}
|
|
2302
|
-
}
|
|
2303
2274
|
}
|
|
2304
2275
|
TableComponent.decorators = [
|
|
2305
2276
|
{ type: Component, args: [{
|
|
2306
2277
|
selector: 'lib-table',
|
|
2307
|
-
template: "<div [id]=\"table.id + 'Table'\" [style]=\"table.style\" #tableDiv [className]=\"(table.class ? table.class : '') + (table.sortable ? 'sortable' : '') + (table.hasChildren ? ' has-children' : '') + ' table-con'\">\r\n <div *ngIf=\"table.displayLabel\" class=\"title\">\r\n {{this.table.title ? this.table.title : 'List'}}\r\n <div class=\"extra-buttons\" *ngIf=\"table.
|
|
2308
|
-
styles: [".table-con{background-color:#fff;border-radius:5px;box-shadow:var(--box-shadow-table);float:right;padding:20px;position:relative;width:100%}.table-con.maximum{border-radius:0;height:100%;overflow-y:auto;position:fixed;right:0;top:0;width:100%;z-index:11}.table-con>.title{float:right;font-family:VazirBold;font-size:16px;height:40px;line-height:40px;margin-bottom:10px;position:relative;text-align:right;width:100%}.table-con>.title .extra-buttons{float:left;margin-top:5px}.table-con>.title .
|
|
2278
|
+
template: "<div [id]=\"table.id + 'Table'\" [style]=\"table.style\" #tableDiv [className]=\"(table.class ? table.class : '') + (table.sortable ? 'sortable' : '') + (table.hasChildren ? ' has-children' : '') + ' table-con'\">\r\n <div *ngIf=\"table.displayLabel\" class=\"title\">\r\n {{this.table.title ? this.table.title : 'List'}}\r\n <div class=\"extra-buttons\" *ngIf=\"table.showExtraButtons\">\r\n <lib-form-icon *ngFor=\"let btn of table.extraButtons\" [inp]=\"btn\"></lib-form-icon>\r\n <lib-form-icon [inp]=\"reload\"></lib-form-icon>\r\n <lib-form-icon [inp]=\"maximum\"></lib-form-icon>\r\n </div>\r\n <div *ngIf=\"table.buttons.length > 0\" class=\"buttons\">\r\n <lib-form-button [inp]=\"btn\" *ngFor=\"let btn of table.buttons\"></lib-form-button>\r\n </div>\r\n </div>\r\n <div class=\"search-form\" *ngIf=\"table.searchForm\">\r\n <lib-form [form]=\"table.searchForm\"></lib-form>\r\n </div>\r\n <lib-form *ngIf=\"table.form && table.form.onTop\" [form]=\"table.form\"></lib-form>\r\n <table>\r\n <thead>\r\n <tr>\r\n <th *ngIf=\"table.hasChildren\" style=\"width: 50px\"></th>\r\n <th *ngIf=\"table.sortable\" style=\"width: 50px\"></th>\r\n <th *ngIf=\"table.withSelect\" style=\"width: 50px\">\r\n <i (click)=\"selectAll()\" [className]=\"(allSelected() ? 'fas fa-check-square green' : isSelected() ? 'fas fa-minus-square green' : 'far fa-square') + ' select-row'\" *ngIf=\"table.rows.length > 0\"></i>\r\n </th>\r\n <th (click)=\"!table.sortable && col.sort && changeSort($event, col.name)\" [className]=\"(!table.sortable && col.sort ? 'sort' : '')\" *ngFor=\"let col of table.cols\" [style]=\"{width: col.percent + '%'}\">\r\n <i *ngIf=\"!table.sortable && col.sort\" [className]=\"'sort-icon fas' + (table.sort === col.name ? (table.sortType === 'ASC' ? ' fa-sort-up' : ' fa-sort-down') : ' fa-sort')\"></i>\r\n <span *ngIf=\"col.search == null\">{{ table.l(col.name) }}</span>\r\n <div class=\"w-90 header-search p-h-20 m-r-5\" *ngIf=\"!table.sortable && col.search != null\">\r\n <lib-form-textbox *ngIf=\"col.type != colType.Date\" [inp]=\"col.search\"></lib-form-textbox>\r\n <lib-form-date *ngIf=\"col.type == colType.Date\" [inp]=\"col.search\"></lib-form-date>\r\n </div>\r\n </th>\r\n <th *ngIf=\"table.optionType == tableOptionType.Show\" [style]=\"{width: (100 - itemsWidth) + '%'}\">{{table.l('Options')}}</th>\r\n<!-- <th *ngIf=\"table.hasOption()\" [style]=\"{width: (100 - itemsWidth) + '%'}\">-->\r\n<!-- <span *ngIf=\"!table.withSelect || !isSelected()\">{{ table.l('Options') }}</span>-->\r\n<!-- <span *ngIf=\"table.withSelect && isSelected()\" class=\"option-con\">-->\r\n<!-- <span *ngFor=\"let opt of options\">-->\r\n<!-- <lib-form-button *ngIf=\"opt.type == type.Button\" [inp]=\"opt\"></lib-form-button>-->\r\n<!-- <lib-form-icon *ngIf=\"opt.type == type.Icon\" [inp]=\"opt\"></lib-form-icon>-->\r\n<!-- </span>-->\r\n<!-- </span>-->\r\n<!-- </th>-->\r\n </tr>\r\n </thead>\r\n <tbody #rows [style]=\"table.perPage > 0 ? {height: table.height * table.perPage + 'px'} : table.loading || !table.permission || table.rows.length == 0 ? {height: '100px'} : {}\">\r\n <lib-table-row (confirmShow)=\"onConfirmShow($event)\" [level]=\"1\" (changeRows)=\"onChangeRows($event)\" [id]=\"row.id ? row.id : ''\" [table]=\"table\" [row]=\"row\" *ngFor=\"let row of getRows()\"></lib-table-row>\r\n <tr *ngIf=\"table.perPage > 0\" [style]=\"{height: (table.perPage > 0 ? (table.perPage - table.rows.length) * table.height : '100') + 'px', visibility: 'hidden'}\"></tr>\r\n <lib-table-loading [table]=\"table\"></lib-table-loading>\r\n </tbody>\r\n <tfoot>\r\n <tr>\r\n <td colspan=\"100%\">\r\n <lib-table-pagination [table]=\"table\" *ngIf=\"table.perPage > 0\"></lib-table-pagination>\r\n </td>\r\n </tr>\r\n </tfoot>\r\n </table>\r\n <lib-modal *ngIf=\"table.modal != null\" [modal]=\"table.modal\"></lib-modal>\r\n <lib-modal [modal]=\"opt.modal\" *ngFor=\"let opt of getOptionModals()\"></lib-modal>\r\n <lib-confirm #confirm [tableId]=\"table.name\"></lib-confirm>\r\n</div>\r\n",
|
|
2279
|
+
styles: [".table-con{background-color:#fff;border-radius:5px;box-shadow:var(--box-shadow-table);float:right;padding:20px;position:relative;width:100%}.table-con.maximum{border-radius:0;height:100%;overflow-y:auto;position:fixed;right:0;top:0;width:100%;z-index:11}.table-con>.title{float:right;font-family:VazirBold;font-size:16px;height:40px;line-height:40px;margin-bottom:10px;position:relative;text-align:right;width:100%}.table-con>.title .extra-buttons{float:left;margin-top:5px}.table-con>.title .buttons{float:left;margin-left:10px;margin-top:5px}.table-con>.search-form{border-radius:5px;float:right;margin-bottom:5px;width:100%}.table-con table{border-spacing:0!important;width:100%}.table-con table thead tr{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;position:relative}.table-con table thead tr th{background-color:var(--base-11);color:var(--black-88);font-family:VazirLight;font-size:12px;font-weight:400;height:45px;position:relative;vertical-align:middle}.table-con table thead tr th:first-child{border-bottom-right-radius:5px;border-top-right-radius:5px}.table-con table thead tr th:last-child{border-bottom-left-radius:5px;border-top-left-radius:5px}.table-con table thead tr th.sort{cursor:pointer}.table-con table thead tr th .sort-icon{font-size:13px;height:20px;left:5px;line-height:20px;opacity:.6;position:absolute;top:calc(50% - 10px);width:20px}.table-con table tbody{position:relative}.table-con table tfoot tr{height:45px}.table-con table tfoot tr td{position:relative;vertical-align:bottom}::ng-deep .table-con:not(.sortable) table lib-table-row:last-of-type>tr:after{background-image:unset}::ng-deep .table-con table thead tr th .select-row{cursor:pointer;font-size:18px;height:30px;line-height:30px}"]
|
|
2309
2280
|
},] }
|
|
2310
2281
|
];
|
|
2311
2282
|
TableComponent.ctorParameters = () => [
|
|
@@ -4351,7 +4322,7 @@ class FormTableComponent {
|
|
|
4351
4322
|
this.inp.table.displayLabel = false;
|
|
4352
4323
|
this.inp.table.style = { padding: 0, boxShadow: 'unset' };
|
|
4353
4324
|
this.inp.table.permissions = p;
|
|
4354
|
-
this.inp.table.
|
|
4325
|
+
this.inp.table.showExtraButtons = false;
|
|
4355
4326
|
this.inp.table.cols.forEach(x => x.sort = false);
|
|
4356
4327
|
if (this.inp.table.form) {
|
|
4357
4328
|
this.inp.table.form.onTop = true;
|
|
@@ -6088,7 +6059,6 @@ class TableClass {
|
|
|
6088
6059
|
this.title = null;
|
|
6089
6060
|
this.sortType = null;
|
|
6090
6061
|
this.displayLabel = true;
|
|
6091
|
-
this.isReport = false;
|
|
6092
6062
|
this.sortable = false;
|
|
6093
6063
|
this.optionType = TableOptionType.Hidden;
|
|
6094
6064
|
this.loading = true;
|
|
@@ -6096,7 +6066,8 @@ class TableClass {
|
|
|
6096
6066
|
this.hasChildren = false;
|
|
6097
6067
|
this.childrenAutoLoad = false;
|
|
6098
6068
|
this.withSelect = false;
|
|
6099
|
-
this.
|
|
6069
|
+
this.showExtraButtons = true;
|
|
6070
|
+
this.extraButtons = [];
|
|
6100
6071
|
this.form = null;
|
|
6101
6072
|
this.searchForm = null;
|
|
6102
6073
|
this.modal = null;
|
|
@@ -6143,8 +6114,8 @@ class TableClass {
|
|
|
6143
6114
|
}
|
|
6144
6115
|
return this.searchForm ? this.searchForm.json(d) : d;
|
|
6145
6116
|
}
|
|
6146
|
-
getUrl(
|
|
6147
|
-
return this.url +
|
|
6117
|
+
getUrl() {
|
|
6118
|
+
return this.url + 'List';
|
|
6148
6119
|
}
|
|
6149
6120
|
showInsertModal() {
|
|
6150
6121
|
const insertAccess = this.permissions.getAccess('Insert');
|
|
@@ -6207,9 +6178,10 @@ class TableClass {
|
|
|
6207
6178
|
}
|
|
6208
6179
|
const reportAccess = this.permissions.getAccess('Report');
|
|
6209
6180
|
if (reportAccess != null) {
|
|
6210
|
-
const report = new InputClass(this.environment, this.l, reportAccess.Name, reportAccess.Icon, InputType.Button, '
|
|
6181
|
+
const report = new InputClass(this.environment, this.l, reportAccess.Name, reportAccess.Icon, InputType.Button, 'm-h-5');
|
|
6211
6182
|
report.url = this.url + 'Report';
|
|
6212
6183
|
report.url.urlNewTab = true;
|
|
6184
|
+
this.extraButtons.push(report);
|
|
6213
6185
|
}
|
|
6214
6186
|
if ((this.permissions.hasAccess('Insert') || this.permissions.hasAccess('Update')) && this.form) {
|
|
6215
6187
|
this.form.addButtons('Save', 'green', true, this.permissions.Type === PermissionTypeEnum.Form ? (data) => {
|