com.phloxui
Version:
PhloxUI Ng2+ Framework
1,291 lines • 166 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
import * as tslib_1 from "tslib";
import { Component, ElementRef, Input, EventEmitter, ViewChild, Inject, Output } from '@angular/core';
import { AbstractDataEditorView } from '../AbstractDataEditorView';
import { RecordViewModel, ShortcutModel } from '../../model/models';
import { TypeResolveService } from '../../../service/TypeResolveService.service';
import { DialogService } from '../../../service/DialogService.service';
import { EditorSettingServiceFactory } from '../IEditorSettingServiceFactory';
import { FormView } from '../../../component/editor/editor.internal/FormView.component';
import { DataUtils } from '../../../share/utils/DataUtils';
import { ArrayUtils } from '../../../share/utils/ArrayUtils';
import { JsonSchemaUtils } from '../../../share/utils/JsonSchemaUtils';
import { Option } from '../../../decorator/Option.decorator';
import { I18N } from '../../../decorator/I18N.decorator';
import { PhloxTable } from '../../table/PhloxTable.component';
import { StringDataView } from '../../../component/dataview/StringDataView.component';
import { CheckBox } from '../../../component/dataview/input/CheckBox.component';
import { EllipsisButton } from '../../../component/EllipsisButton.component';
import { KeyboardShortcutService } from '../../../service/KeyboardShortcutService.service';
import { MaterialIconLoader } from '../../../theme/material/component/MaterialIconLoader.component';
import { ComponentPopoverModel } from '../../model/ComponentPopoverModel';
import { ComponentPopover } from '../../../component/ComponentPopover.component';
import { ColumnDisplay } from './record.internal/ColumnDisplay.component';
import { ColumnSorting } from './record.internal/ColumnSorting.component';
const /** @type {?} */ TYPE_NAME = "phx-record-view";
const /** @type {?} */ FORM_VIEW = FormView.TYPE_NAME;
export class RecordView extends AbstractDataEditorView {
/**
* @param {?} typeResolveServ
* @param {?} dialogService
* @param {?} editorSettingFactory
* @param {?} elementRef
* @param {?} kbService
*/
constructor(typeResolveServ, dialogService, editorSettingFactory, elementRef, kbService) {
super(editorSettingFactory, elementRef, kbService);
this.DEFAULT_CHECKBOX_WIDTH = "40pt";
this.DEFAULT_MORE_MENU_WIDTH = "40pt";
this.tableData = [];
this.lastTableData = [];
this.model = new RecordViewModel(null, "DEFAULT", []);
this.typeResolveServ = typeResolveServ;
this.editable = false;
this.dialogService = dialogService;
this.selectedAll = false;
this.tableOption = {};
this._columnDisplayModel = new ComponentPopoverModel(ColumnDisplay, null, null, null, null, 'auto', false, ["filter"]);
this._columnSortingModel = new ComponentPopoverModel(ColumnSorting, null, null, null, null, 'auto', false, ["sorting"]);
this.i18NResource = {
header: {
title: "RECORD_VIEW_TITLE",
}
};
// pass editor and store its instance.
this._columnDisplayHandler = (result) => {
if (result !== null && result !== undefined) {
this.columnDisplayInstance = result.instance;
}
if (this.columnDisplayInstance !== null && this.columnDisplayInstance !== undefined) {
if (typeof this.columnDisplayInstance.setDataEditor === 'function') {
this.columnDisplayInstance.setDataEditor(this.editor);
}
// set column
if (typeof this.columnDisplayInstance.setColumns === 'function') {
this.columnDisplayInstance.setColumns(this.model.columns);
}
if (typeof this.columnDisplayInstance.getColumnChangeEvent === 'function') {
this.columnDisplayInstance.getColumnChangeEvent().subscribe((event) => {
if (event.detail.data.data !== null || event.detail.data.data !== undefined) {
if (event.detail.data.column.show === true) {
this.showColumn(event.detail.data.column);
}
else {
this.hideColumn(event.detail.data.column);
}
}
});
}
}
};
this._columnSortingHandler = (result) => {
if (result !== null && result !== undefined) {
this.columnSortingInstance = result.instance;
}
if (this.columnSortingInstance !== null && this.columnSortingInstance !== undefined) {
if (typeof this.columnSortingInstance.setDataEditor === 'function') {
this.columnSortingInstance.setDataEditor(this.editor);
}
// set column
if (typeof this.columnSortingInstance.setColumns === 'function') {
this.columnSortingInstance.setColumns(this.model.columns);
}
if (typeof this.columnSortingInstance.getColumnChangeEvent === 'function') {
this.columnSortingInstance.getColumnChangeEvent().subscribe((event) => {
if (event.detail.data.data !== null || event.detail.data.data !== undefined) {
if (event.detail.data.column.show === true) {
this.showColumn(event.detail.data.column);
}
else {
this.hideColumn(event.detail.data.column);
}
}
});
}
}
};
}
/**
* @return {?}
*/
ngOnInit() {
super.ngOnInit();
this.applyI18N(this.i18NResource);
if (this.editor != null && (typeof this.editor !== 'undefined')) {
this.editor.addViewComponent(this);
this.menuFactory = this.editor.getMenuModelFactory();
this.reloadTable();
if (this.showEvent !== null && (typeof this.showEvent !== 'undefined')) {
this.showEvent.subscribe((event) => {
this.reloadTable();
});
}
let /** @type {?} */ createdEvent = this.editor.getDataCreateEvent();
if (createdEvent !== null && (typeof createdEvent !== 'undefined')) {
createdEvent.subscribe((event) => {
let /** @type {?} */ data = null;
if (event.detail !== null && typeof event.detail !== 'undefined') {
if (event.detail.data !== null && typeof event.detail.data !== 'undefined') {
data = event.detail.data;
}
}
if (data !== null) {
// do sthing
}
});
}
let /** @type {?} */ updateEvent = this.editor.getDataUpdateEvent();
if (updateEvent !== null && (typeof updateEvent !== 'undefined')) {
updateEvent.subscribe((event) => {
let /** @type {?} */ data = null;
if (event.detail !== null && typeof event.detail !== 'undefined') {
if (event.detail.data !== null && typeof event.detail.data !== 'undefined') {
data = event.detail.data;
}
}
if (data !== null) {
this.reloadTable();
}
});
}
let /** @type {?} */ deleteEvent = this.editor.getDataDeleteEvent();
if (deleteEvent !== null && (typeof deleteEvent !== 'undefined')) {
deleteEvent.subscribe((event) => {
let /** @type {?} */ data = null;
if (event.detail !== null && typeof event.detail !== 'undefined') {
if (event.detail.data !== null && typeof event.detail.data !== 'undefined') {
data = event.detail.data;
}
}
if (data !== null) {
this.reloadTable();
}
});
}
let /** @type {?} */ revertEvent = this.editor.getDataRevertEvent();
if (revertEvent !== null && (typeof revertEvent !== 'undefined')) {
revertEvent.subscribe((event) => {
let /** @type {?} */ data = null;
if (event.detail !== null && typeof event.detail !== 'undefined') {
if (event.detail.data !== null && typeof event.detail.data !== 'undefined') {
data = event.detail.data;
}
}
if (data !== null && data !== undefined) {
let /** @type {?} */ dataList = [];
// data pattern as { data: revertData[], originalData: oldData[]}
if (!Array.isArray(data)) {
dataList.push(data);
}
else {
dataList = data;
}
for (let /** @type {?} */ d of dataList) {
this.replaceRecordRowData(d.data);
}
}
this.bodyTable.rerender(true);
});
}
let /** @type {?} */ dataReloadEvent = this.editor.getDataReloadEvent();
if (dataReloadEvent !== null && (typeof dataReloadEvent !== 'undefined')) {
dataReloadEvent.subscribe((event) => {
this.reloadTable();
});
}
let /** @type {?} */ dataQueryEvent = this.editor.getDataQueryEvent();
if (dataQueryEvent !== null && (typeof dataQueryEvent !== 'undefined')) {
dataQueryEvent.subscribe((event) => {
this.reloadTable();
});
}
}
}
/**
* @return {?}
*/
ngOnDestroy() {
super.ngOnDestroy();
if (this.editor !== null && (typeof this.editor !== 'undefined')) {
this.editor.removeViewComponent(this);
}
}
/**
* @param {?} model
* @return {?}
*/
generateTBHeaderObject(model) {
let /** @type {?} */ result = {
"model": {
"header": {
"editable": true
},
"body": {},
"columns": []
}
};
if (model !== null && typeof model !== 'undefined') {
let /** @type {?} */ hasFlexibleWidth = false;
if (model.columns !== null && model.columns !== undefined) {
for (let /** @type {?} */ i = 0; i < model.columns.length; i++) {
let /** @type {?} */ col = model.columns[i];
let /** @type {?} */ colWidth = col.width;
// if colWidth is null or undefined set flag hasFlexibleWidth
if (colWidth === null || typeof colWidth === 'undefined') {
hasFlexibleWidth = true;
}
// in the end if FlexibleWidth was not found, set at least colWidth in to null
// if (i === model.columns.length - 1 && !hasFlexibleWidth) {
// colWidth = null;
// }
let /** @type {?} */ hCol = {};
if (model.columns[i].show === true) {
hCol = {
"name": col.label,
"width": colWidth,
"header": {
"type": StringDataView.TYPE_NAME,
"class": col.textAlign
}
};
}
else {
hCol = {
"name": col.label,
"width": colWidth,
"header": {
"type": StringDataView.TYPE_NAME,
"class": col.textAlign + " hide"
}
};
}
if (col.stylesHeaderClass !== undefined && col.stylesHeaderClass !== null) {
if (Array.isArray(col.stylesHeaderClass)) {
for (let /** @type {?} */ style of col.stylesHeaderClass) {
hCol.header.class += " " + style;
}
}
else if (typeof col.stylesHeaderClass === "string") {
hCol.header.class += " " + col.stylesHeaderClass;
}
}
result.model.columns.push(hCol);
}
}
}
// size > 0 add first and end col
if (result.model.columns.length > 0) {
let /** @type {?} */ chkBoxChanged = new EventEmitter();
chkBoxChanged.subscribe((event) => {
let /** @type {?} */ isCheck = event.detail.data.newValue;
if (isCheck) {
// selecte all
let /** @type {?} */ dataArray = this.bodyTable.getData();
for (let /** @type {?} */ row of dataArray) {
row.selected = true;
}
}
else {
// clear all selected
let /** @type {?} */ dataArray = this.bodyTable.getData();
for (let /** @type {?} */ row of dataArray) {
row.selected = false;
}
}
});
let /** @type {?} */ chkBxCol = {
"name": "",
"width": this.DEFAULT_CHECKBOX_WIDTH,
"header": {
"type": CheckBox.TYPE_NAME,
"class": "center",
"options": {
"change": chkBoxChanged,
"typeOfData": "boolean"
}
},
"editable": true
};
ArrayUtils.insert(result.model.columns, chkBxCol, 0);
let /** @type {?} */ moreCol = {
"name": "",
"width": this.DEFAULT_MORE_MENU_WIDTH,
"header": {
"type": StringDataView.TYPE_NAME,
"class": "center"
}
};
result.model.columns.push(moreCol);
}
return result;
}
/**
* @param {?} model
* @return {?}
*/
generateTBBodyObject(model) {
let /** @type {?} */ result = {
"model": {
"header": {},
"body": {
"row": {
"editable": this.editable,
}
},
"columns": []
}
};
if (model !== null && typeof model !== 'undefined') {
let /** @type {?} */ hasFlexibleWidth = false;
if (model.columns !== null && model.columns !== undefined) {
for (let /** @type {?} */ i = 0; i < model.columns.length; i++) {
let /** @type {?} */ col = model.columns[i];
let /** @type {?} */ colWidth = col.width;
// if colWidth is null or undefined set flag hasFlexibleWidth
if (colWidth === null || typeof colWidth === 'undefined') {
hasFlexibleWidth = true;
}
// in the end if FlexibleWidth was not found, set at least colWidth in to null
// if (i === model.columns.length - 1 && !hasFlexibleWidth) {
// colWidth = null
// }
let /** @type {?} */ hCol = {};
if (model.columns[i].show === true) {
hCol = {
"name": col.label,
"width": colWidth,
"editable": col.editable,
"body": {
"class": col.textAlign,
"type": col.view,
"options": col.options,
"editorType": col.editor,
"editorOptions": col.editorOptions
}
};
}
else {
hCol = {
"name": col.label,
"width": colWidth,
"editable": col.editable,
"body": {
"class": col.textAlign + " hide",
"type": col.view,
"options": col.options,
"editorType": col.editor,
"editorOptions": col.editorOptions
}
};
}
if (col.stylesBodyClass !== undefined && col.stylesBodyClass !== null) {
if (Array.isArray(col.stylesBodyClass)) {
for (let /** @type {?} */ style of col.stylesBodyClass) {
hCol.body.class += " " + style;
}
}
else if (typeof col.stylesBodyClass === "string") {
hCol.body.class += " " + col.stylesBodyClass;
}
}
// overide options field
if (hCol.body.options !== null && typeof hCol.body.options !== 'undefined') {
hCol.body.options["field"] = "data." + col.value;
}
else {
hCol.body.options = {
"field": "data." + col.value
};
}
// overide editorOptions field
if (hCol.body.editorOptions !== null && typeof hCol.body.editorOptions !== 'undefined') {
hCol.body.editorOptions["field"] = "data." + col.value;
}
else {
hCol.body.editorOptions = {
"field": "data." + col.value
};
}
// check data change
let /** @type {?} */ editorEmiter = new EventEmitter();
editorEmiter.subscribe((event) => {
if (event.detail.data.data !== undefined) {
for (let /** @type {?} */ i = 0; i < this.tableData.length; i++) {
let /** @type {?} */ lastTableDataCheck = JSON.stringify(this.lastTableData[i].data);
let /** @type {?} */ tableDataCheck = JSON.stringify(this.tableData[i].data);
if (lastTableDataCheck !== tableDataCheck) {
this.lastTableData = JSON.parse(JSON.stringify(this.tableData));
this.makeHistory();
}
}
}
});
hCol.body.editorOptions["change"] = editorEmiter;
// focus save values
let /** @type {?} */ editorFocusEmiter = new EventEmitter();
if (hCol.body.editorOptions["focus"] !== null && typeof hCol.body.editorOptions["focus"] !== 'undefined') {
let /** @type {?} */ tempEmitter = hCol.body.editorOptions["focus"];
editorFocusEmiter.subscribe((event) => {
//set defaultValue
let /** @type {?} */ itemCompo = undefined;
if (event.detail.data !== null && event.detail.data !== undefined) {
itemCompo = event.detail.data.item;
}
let /** @type {?} */ compoVal = undefined;
if (typeof itemCompo.getData === 'function') {
compoVal = itemCompo.getData();
}
// new val from json
this.currentFocusValue = undefined;
if (compoVal !== undefined && compoVal !== null) {
this.currentFocusValue = JSON.parse(JSON.stringify(compoVal));
}
// pass event
if (typeof tempEmitter["emit"] === 'function') {
tempEmitter.emit(event);
}
});
hCol.body.editorOptions["focus"] = editorFocusEmiter;
}
else {
editorFocusEmiter.subscribe((event) => {
//set defaultValue
let /** @type {?} */ itemCompo = undefined;
if (event.detail.data !== null && event.detail.data !== undefined) {
itemCompo = event.detail.data.item;
}
let /** @type {?} */ compoVal = undefined;
if (itemCompo !== undefined && typeof itemCompo.getData === 'function') {
compoVal = itemCompo.getData();
}
// new val from json
this.currentFocusValue = undefined;
if (compoVal !== undefined && compoVal !== null) {
this.currentFocusValue = JSON.parse(JSON.stringify(compoVal));
}
});
hCol.body.editorOptions["focus"] = editorFocusEmiter;
}
result.model.columns.push(hCol);
}
}
}
// size > 0 add first and end col
if (result.model.columns.length > 0) {
let /** @type {?} */ chkBxCol = {
"name": "",
"width": this.DEFAULT_CHECKBOX_WIDTH,
"body": {
"type": CheckBox.TYPE_NAME,
"class": "center",
"options": {
"field": "selected"
}
}
};
ArrayUtils.insert(result.model.columns, chkBxCol, 0);
let /** @type {?} */ moreCol = {
"name": "",
"width": this.DEFAULT_MORE_MENU_WIDTH,
"body": {
"type": EllipsisButton.TYPE_NAME,
"class": "center",
"options": {
"menuFactory": this.menuFactory,
"menuStyleClasses": this.menuStyleClasses
}
}
};
result.model.columns.push(moreCol);
}
return result;
}
/**
* @param {?} value
* @return {?}
*/
isDataChange(value) {
if (this.currentFocusValue === undefined && value === undefined) {
return false;
}
else if (this.currentFocusValue === null && value === null) {
return false;
}
else if (this.currentFocusValue === undefined && value === null) {
return true;
}
else if (this.currentFocusValue === null && value === undefined) {
return true;
}
if (typeof this.currentFocusValue === "object" && typeof value === 'object') {
return JSON.stringify(this.currentFocusValue) !== JSON.stringify(value);
}
return this.currentFocusValue !== value;
}
/**
* @return {?}
*/
getOriginalData() {
if (this.editor != null) {
return this.editor.getData();
}
return [];
}
/**
* @param {?} dataObj
* @return {?}
*/
replaceRecordRowData(dataObj) {
let /** @type {?} */ comparator = this.editor.getDataComparator();
if (Array.isArray(dataObj)) {
if (dataObj.length > 0) {
dataObj = dataObj[0];
}
}
let /** @type {?} */ index = -1;
for (let /** @type {?} */ i = 0; i < this.tableData.length; i++) {
let /** @type {?} */ row = this.tableData[i];
let /** @type {?} */ data = row.data;
if (comparator !== null) {
if (comparator.equals(dataObj, data)) {
index = i;
break;
}
}
}
if (index > -1) {
let /** @type {?} */ cloneObj = JSON.parse(JSON.stringify(dataObj));
let /** @type {?} */ recRow = new RecordRow(false, cloneObj);
this.tableData[index] = recRow; // clone object
}
}
/**
* @param {?} key
* @param {?} dataObj
* @return {?}
*/
getTableValue(key, dataObj) {
if (key == null || dataObj == null) {
return null;
}
let /** @type {?} */ result = null;
if (key.indexOf(".") > 0) {
let /** @type {?} */ splitKeys = key.split(".");
if (splitKeys.length > 0) {
let /** @type {?} */ firstKey = splitKeys[0];
let /** @type {?} */ firstValue = dataObj[firstKey];
if (firstValue != null && typeof firstValue !== 'undefined') {
if (typeof firstValue === 'object') {
if (splitKeys.length > 1) {
let /** @type {?} */ secondKey = key.substring(key.indexOf(".") + 1, key.length);
return this.getTableValue(secondKey, firstValue); // recursive beware looping
}
}
}
}
}
else {
result = dataObj[key];
}
if (result != null && typeof result !== 'undefined') {
return result;
}
return null;
}
/**
* @param {?} key
* @param {?} dataObj
* @param {?} value
* @return {?}
*/
editDataObjectValue(key, dataObj, value) {
DataUtils.setDataValue(key, dataObj, value);
}
/**
* @param {?} view
* @return {?}
*/
getViewComponent(view) {
if (view == null) {
return null;
}
if (this.typeResolveServ != null) {
return this.typeResolveServ.resolveType(view);
}
return null;
}
/**
* @param {?} rowIdx
* @param {?} colIdx
* @param {?} data
* @return {?}
*/
getDirty(rowIdx, colIdx, data) {
// compare with original data
if (data == null) {
return false;
}
let /** @type {?} */ column = null;
if (colIdx < this.model.columns.length) {
column = this.model.columns[colIdx];
}
let /** @type {?} */ editorData = this.getOriginalData();
let /** @type {?} */ originalData = null;
if (originalData < editorData.length) {
originalData = editorData[rowIdx];
}
if (column != null && originalData != null) {
let /** @type {?} */ colOriData = this.getTableValue(column.value, originalData);
let /** @type {?} */ colTBData = this.getTableValue(column.value, data);
return (colOriData !== colTBData);
}
return false;
}
/**
* @param {?} colIdx
* @return {?}
*/
getColumnEditable(colIdx) {
let /** @type {?} */ column = null;
if (colIdx < this.model.columns.length) {
column = this.model.columns[colIdx];
}
if (column != null) {
return column.editable;
}
return false;
}
/**
* @return {?}
*/
closeAllEditor() {
if (this.bodyTable !== null && typeof this.bodyTable !== 'undefined') {
let /** @type {?} */ rowControllers = this.bodyTable.getRowControllers();
for (let /** @type {?} */ row of rowControllers) {
row.setEditing(false);
}
}
}
/**
* @return {?}
*/
getDirtyCreateData() {
let /** @type {?} */ createObject = [];
let /** @type {?} */ editorData = this.getOriginalData();
let /** @type {?} */ idx = 0;
for (let /** @type {?} */ originalData of editorData) {
if (idx < this.tableData.length) {
let /** @type {?} */ tbData = this.tableData[idx].data;
// edit oridata
let /** @type {?} */ colIdx = 0;
for (let /** @type {?} */ col of this.model.columns) {
if (this.getDirty(idx, colIdx, tbData)) {
createObject.push(tbData);
break;
}
colIdx += 1;
}
}
idx += 1;
}
return createObject;
}
/**
* @return {?}
*/
reverseAllCellChanged() {
this.tableData = [];
let /** @type {?} */ editorData = this.getOriginalData();
let /** @type {?} */ rowIdx = 0;
for (let /** @type {?} */ row of editorData) {
if (row == null || typeof row === 'undefined') {
continue;
}
let /** @type {?} */ cloneObj = JSON.parse(JSON.stringify(row));
let /** @type {?} */ recRow = new RecordRow(false, cloneObj);
this.tableData.push(recRow); // clone object
let /** @type {?} */ colIdx = 0;
for (let /** @type {?} */ col of this.model.columns) {
let /** @type {?} */ key = rowIdx + ':' + colIdx;
colIdx += 1;
}
rowIdx += 1;
}
this.lastTableData = JSON.parse(JSON.stringify(this.tableData));
}
/**
* @param {?} rowIdx
* @param {?} colIdx
* @return {?}
*/
reverseCellChanged(rowIdx, colIdx) {
let /** @type {?} */ editorData = this.getOriginalData();
let /** @type {?} */ originalRowData = null;
if (rowIdx < editorData.length) {
originalRowData = editorData[rowIdx];
}
let /** @type {?} */ columnData = null;
if (colIdx < this.model.columns.length) {
columnData = this.model.columns[colIdx];
}
let /** @type {?} */ originalCellData = this.getTableValue(columnData.value, originalRowData);
let /** @type {?} */ tbData = null;
if (rowIdx < this.tableData.length) {
tbData = this.tableData[rowIdx].data;
}
this.editDataObjectValue(columnData.value, tbData, originalCellData);
}
/**
* @param {?} id
* @return {?}
*/
removeDataByObjectId(id) {
if (id !== null && typeof id !== 'undefined') {
let /** @type {?} */ objIdField = this.editor.getObjectIdField();
let /** @type {?} */ index = -1;
let /** @type {?} */ count = 0;
for (let /** @type {?} */ tbData of this.tableData) {
let /** @type {?} */ tbDataID = DataUtils.getDataValue(objIdField, tbData.data);
if (id === tbDataID) {
index = count;
break;
}
count += 1;
}
if (index > -1) {
this.tableData.splice(index, 1);
this.lastTableData = JSON.parse(JSON.stringify(this.tableData));
return true;
}
}
return false;
}
/**
* @param {?} selected
* @return {?}
*/
setAllCheckBox(selected) {
this.selectedAll = selected;
for (let /** @type {?} */ i = 0; i < this.tableData.length; i++) {
let /** @type {?} */ row = this.tableData[i];
row.selected = selected;
}
}
/**
* @return {?}
*/
getAllTableData() {
let /** @type {?} */ result = [];
for (let /** @type {?} */ i = 0; i < this.tableData.length; i++) {
let /** @type {?} */ item = this.tableData[i].data;
result.push(item);
}
return result;
}
/**
* @return {?}
*/
getTableSelectedData() {
let /** @type {?} */ result = [];
for (let /** @type {?} */ i = 0; i < this.tableData.length; i++) {
let /** @type {?} */ item = this.tableData[i].data;
let /** @type {?} */ selected = this.tableData[i].selected;
if (selected) {
result.push(item);
}
}
return result;
}
/**
* @return {?}
*/
onViewSettingLoaded() {
this.reloadTable();
}
/**
* @param {?} column
* @return {?}
*/
showColumn(column) {
this.reloadTable();
}
/**
* @param {?} column
* @return {?}
*/
hideColumn(column) {
this.reloadTable();
}
/**
* @return {?}
*/
getRecordColumnLength() {
if (this.model === null || this.model === undefined) {
return 0;
}
if (this.model.columns === null || this.model.columns === undefined) {
return 0;
}
return this.model.columns.length;
}
/**
* @param {?} toggleEvent
* @return {?}
*/
onToggleChanged(toggleEvent) {
this.editable = !this.editable;
for (let /** @type {?} */ i = 0; i < this.tableData.length; i++) {
this.bodyTable.getRowControllers()[i].setSelfEditable(this.editable);
}
if (toggleEvent.detail !== null && typeof toggleEvent.detail !== 'undefined') {
if (toggleEvent.detail.data !== null && typeof toggleEvent.detail.data !== 'undefined') {
this.editable = toggleEvent.detail.data.newValue;
}
}
if (!this.editable) {
this.closeAllEditor();
}
}
/**
* @param {?} $event
* @return {?}
*/
onSaveButtonClicked($event) {
if (this.dialogService != null) {
let /** @type {?} */ dialogPromise = this.dialogService.showConfirmDialog('Confirm Saving', 'Do you want to Save all data ?', true);
dialogPromise.then((result) => {
if (result == 1) {
// save
let /** @type {?} */ objs = this.getAllTableData();
this.editor.updateData(objs);
}
});
}
}
/**
* @param {?} $event
* @return {?}
*/
onUndoButtonClicked($event) {
if (!this.canUndo()) {
return;
}
// delay to wait for lostFocus fire
if (this.delayTimer !== null && typeof this.delayTimer !== 'undefined') {
clearTimeout(this.delayTimer);
this.delayTimer = null;
}
this.delayTimer = setTimeout(() => {
this.bodyTable.getModel().getRowModel().setEditable(this.editable);
this.undo();
}, 1);
}
/**
* @param {?} $event
* @return {?}
*/
onRedoButtonClicked($event) {
if (!this.canRedo()) {
return;
}
// delay to wait for lostFocus fire
if (this.delayTimer !== null && typeof this.delayTimer !== 'undefined') {
clearTimeout(this.delayTimer);
this.delayTimer = null;
}
this.delayTimer = setTimeout(() => {
this.bodyTable.getModel().getRowModel().setEditable(this.editable);
this.redo();
}, 1);
}
/**
* @param {?} $event
* @return {?}
*/
onCellDBLClicked($event) {
if (!this.editable) {
return;
}
if ($event !== null && typeof $event !== 'undefined') {
let /** @type {?} */ target = ($event.detail !== null && typeof $event.detail !== 'undefined') ? $event.detail.target : null;
let /** @type {?} */ evData = ($event.detail !== null && typeof $event.detail !== 'undefined') ? $event.detail.data : null;
if (evData !== null) {
let /** @type {?} */ row = evData.rowIndex;
let /** @type {?} */ col = evData.columnIndex;
if (target !== null && typeof target !== 'undefined') {
if (target.isCellEditing(col)) {
let /** @type {?} */ nativeElement = this.bodyTable.getRowControllers()[row].getCellComponentInstanceAt(col).getElementRef().nativeElement;
// blur all input before switch back
$(nativeElement).find(":input").each(function (index, el) {
$(el).blur();
});
target.setCellEditing(col, false);
}
else {
target.setCellEditing(col, true);
}
}
}
}
}
/**
* @return {?}
*/
getEditorDirtyData() {
return new Promise((resolve, reject) => {
let /** @type {?} */ dirtyArray = this.getDirtyCreateData();
resolve(dirtyArray);
});
}
/**
* @return {?}
*/
getSelectedData() {
return new Promise((resolve, reject) => {
let /** @type {?} */ selectedArray = this.getTableSelectedData();
resolve(selectedArray);
});
}
/**
* @return {?}
*/
hasDataDirty() {
let /** @type {?} */ rowIdx = 0;
for (let /** @type {?} */ row of this.tableData) {
let /** @type {?} */ colIdx = 0;
for (let /** @type {?} */ col of this.model.columns) {
if (this.getDirty(rowIdx, colIdx, row.data)) {
return true;
}
colIdx += 1;
}
rowIdx += 1;
}
return false;
}
/**
* @return {?}
*/
reloadTable() {
// start and hide when data was loaded
this.iconLoader.start();
let /** @type {?} */ setting = this.getViewSetting();
if (setting !== null && typeof setting !== 'undefined') {
if (setting != null && ((typeof setting) !== 'undefined')) {
this.model.fromJson(setting.value);
}
}
if (this.editor.getDataSchema() != null) {
let /** @type {?} */ dataSche = this.editor.getDataSchema();
let /** @type {?} */ jsonSchema = dataSche.jsonSchema;
if (this.model.columns !== null && typeof this.model.columns !== 'undefined') {
for (let /** @type {?} */ col of this.model.columns) {
// replace i18N
if (col.value === null || col.value === "") {
continue;
}
if (jsonSchema !== null && typeof jsonSchema !== 'undefined') {
let /** @type {?} */ i18NKey = col.value + ".title";
let /** @type {?} */ val = JsonSchemaUtils.getPropertiesValue(i18NKey, jsonSchema);
if (val !== null) {
col.label = val;
}
}
}
}
}
if (this.editor.getData() != null) {
let /** @type {?} */ editorData = this.getOriginalData();
this.tableData = [];
let /** @type {?} */ rowIdx = 0;
for (let /** @type {?} */ row of editorData) {
if (row === null || typeof row === 'undefined') {
continue;
}
let /** @type {?} */ cloneObj = JSON.parse(JSON.stringify(row));
let /** @type {?} */ recRow = new RecordRow(false, cloneObj);
this.tableData.push(recRow); // clone object
let /** @type {?} */ colIdx = 0;
for (let /** @type {?} */ col of this.model.columns) {
let /** @type {?} */ key = rowIdx + ':' + colIdx;
colIdx += 1;
}
rowIdx += 1;
}
this.lastTableData = JSON.parse(JSON.stringify(this.tableData));
}
if (this.columnDisplayInstance !== null && this.columnDisplayInstance !== undefined) {
this.columnDisplayInstance.setColumns(this.model.columns);
}
// table
let /** @type {?} */ headerObj = this.generateTBHeaderObject(this.model);
let /** @type {?} */ bodyObj = this.generateTBBodyObject(this.model);
this.tableOption = {
"headerTable": headerObj,
"bodyTable": bodyObj
};
this.setOptions(this.tableOption);
this.bodyTable.setData(this.tableData);
this.bodyTable.rerender(true);
// end when data more than 0 //! fix bug if no data this will not stop
if (this.tableData.length > 0) {
this.iconLoader.stop();
}
this.clearHistories();
this.makeFirstHistory();
}
/**
* @return {?}
*/
showTabBySelectedData() {
let /** @type {?} */ formView = /** @type {?} */ (this.editor.getViewComponentFromType(FORM_VIEW));
if (formView !== null && typeof formView !== 'undefined') {
// if create tab set to las
let /** @type {?} */ data = this.getTableSelectedData();
formView.showTabByData(data);
}
}
/**
* @return {?}
*/
getCurrentHistoryState() {
return this.lastTableData;
}
/**
* @param {?} history
* @param {?} state
* @return {?}
*/
loadHistoryState(history, state) {
if (history === null || typeof history === 'undefined') {
return Promise.reject(new Error('The "history" cannot be "null" or "undefined".'));
}
return new Promise((resolve, reject) => {
try {
this.tableData = state;
this.lastTableData = JSON.parse(JSON.stringify(this.tableData));
this.bodyTable.setData(this.tableData);
this.bodyTable.rerender(true);
resolve();
}
catch (/** @type {?} */ e) {
reject(e);
}
});
}
/**
* @param {?} $event
* @return {?}
*/
onCheckAllClicked($event) {
this.setAllCheckBox(!this.selectedAll);
}
/**
* @param {?} data
* @return {?}
*/
selfSaveData(data) {
}
/**
* @return {?}
*/
selfResetData() {
}
/**
* @return {?}
*/
doPreload() { return new Promise((resolve, reject) => { resolve(null); }); }
/**
* @return {?}
*/
doLoaded() {
}
/**
* @return {?}
*/
isSelfDataDirty() {
return false;
}
/**
* @return {?}
*/
isEditable() {
return this.editable;
}
/**
* @return {?}
*/
getHeaderTitle() {
if ((this.model !== null && this.model !== undefined) && (this.model.label !== null && this.model.label !== undefined)) {
return this.model.label;
}
return this.headerTitle;
}
/**
* @return {?}
*/
getHeaderSave() {
return (this.headerSave === undefined || this.headerSave === null || this.headerSave === "") ? "SAVE" : this.headerSave;
}
/**
* @return {?}
*/
getHeaderTop() {
return (this.headerTop === undefined || this.headerTop === null || this.headerTop === "") ? "TOP" : this.headerTop;
}
/**
* @return {?}
*/
getRecordViewModel() {
return this.model;
}
/**
* @return {?}
*/
getDefaultShortcutNameHandlers() {
let /** @type {?} */ defVal = [];
defVal.push(new ShortcutModel("undo", () => { this.onUndoButtonClicked(null); console.log("undo"); }, null, ".redo-container > .left-hint-shortcut"));
defVal.push(new ShortcutModel("redo", () => { this.onRedoButtonClicked(null); console.log("redo"); }, null, ".redo-container > .right-hint-shortcut"));
return defVal;
}
/**
* @return {?}
*/
getDefaultShortcutKeyHandlers() {
let /** @type {?} */ defVal = [];
defVal.push(new ShortcutModel("shift+a", () => { console.log("shift+a"); }, "ShftA", this.headerTable));
defVal.push(new ShortcutModel("alt+a", () => { console.log("alt+a"); }, null, this.headerTable));
// defVal.push(new ShortcutModel("ctrl+z", ()=>{ console.log("ctrl+z overide");}));
return defVal;
}
/**
* @return {?}
*/
_getTableBodyHeight() {
if (this.model !== null && this.model !== undefined) {
if (this.model.tableBodyHeight !== null && this.model.tableBodyHeight !== undefined && this.model.tableBodyHeight !== '') {
return this.model.tableBodyHeight;
}
}
return null;
}
/**
* @return {?}
*/
goTop() {
$(".body").scrollTop(0);
}
/**
* @return {?}
*/
reloadView() {
this.reloadTable();
}
/**
* @param {?} $event
* @return {?}
*/
onColumnDisplayBtnClick($event) {
if (this.columnDisplay.isShow()) {
this.columnDisplay.hide();
}
else {
this.columnDisplay.show();
}
}
/**
* @param {?} $event
* @return {?}
*/
onColumnSortingBtnClick($event) {
if (this.columnSorting.isShow()) {
this.columnSorting.hide();
}
else {
this.columnSorting.show();
}
}
}
RecordView.TYPE_NAME = TYPE_NAME;
RecordView.decorators = [
{ type: Component, args: [{
moduleId: module.id,
selector: TYPE_NAME,
template: `<div class="phx-record-view" [class.hide]="!isActive()">
<div class="header-wrapper">
<div class="header">
<div class="left">
<div class="wrapper">
<div class="switch-container">
<material-switch (phxChange)="onToggleChanged($event)" [data]="isEditable()"></material-switch>
</div>
<div class="title-container">
<div class="title">{{getHeaderTitle()}}</div>
</div>
</div>
</div>
<div class="right">
<div class="wrapper">
<div class="sorting-container">
<div class="wrapper">
<div class="icon col-sorting" (click)="onColumnSortingBtnClick($event)">J</div>
<div class="icon col-display" (click)="onColumnDisplayBtnClick($event)">v</div>
<div class="title" (click)="goTop()">{{getHeaderTop()}}</div>
</div>
</div>
<div class="save-container" (click)="onSaveButtonClicked($event)">
<div class="wrapper">
<div class="icon">F</div> <div class="title">{{getHeaderSave()}}</div>
</div>
</div>
<!-- # release next version -->
<div class="redo-container">
<div class="left" (click)="onUndoButtonClicked($event)">
<div class="wrapper">
<div class="icon" [class.disable]="!canUndo()">H</div>
</div>
</div>
<div class="left-hint-shortcut"></div>
<div class="right" (click)="onRedoButtonClicked($event)">
<div class="wrapper">
<div class="icon" [class.disable]="!canRedo()">I</div>
</div>
</div>
<div class="right-hint-shortcut"></div>
</div>
<!-- <div class="create-container">
<div class="wrapper">
<div class="icon">a</div> <div class="title">CREATE</div>
</div>
</div> -->
</div>
</div>
</div>
</div>
<div class="body-wrapper">
<div class="body" [style.height]="_getTableBodyHeight()">
<div class="load-container" [hidden]="getRecordColumnLength() > 0">
<div class="table-wrapper fluid">
<div class="table-cell-wrapper middle">
<material-icon-loader #loader [iconName]="'ball-scale-ripple-multiple'"></material-icon-loader>
</div>
</div>
</div>
<div class="table-header" [hidden]="getRecordColumnLength() <= 0">
<div class="wrapper">
<phx-table [dataParent]="this" [ignoreParentData]="true" #headerTable></phx-table>
</div>
</div>
<div class="table-body">
<div class="wrapper">
<phx-table #bodyTable [dataParent]="this" [ignoreParentData]="true" (phxCellDblClick)="onCellDBLClicked($event)"></phx-table>
</div>
</div>
</div>
</div>
<phx-component-popover #columnSorting [anchor]="'.col-sorting'" [model]="_columnSortingModel" [position]="'bottom'"
[autoFocus]="true" [componentHandler]="_columnSortingHandler"></phx-component-popover>
<phx-component-popover #columnDisplay [anchor]="'.col-display'" [mode