ng2-json-editor
Version:
Angular2 component for editing large json documents
102 lines • 6.44 kB
JavaScript
/*
* This file is part of ng2-json-editor.
* Copyright (C) 2016 CERN.
*
* ng2-json-editor is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License as
* published by the Free Software Foundation; either version 2 of the
* License, or (at your option) any later version.
*
* ng2-json-editor is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with ng2-json-editor; if not, write to the Free Software Foundation, Inc.,
* 59 Temple Place, Suite 330, Boston, MA 02111-1307, USA.
* In applying this license, CERN does not
* waive the privileges and immunities granted to it by virtue of its status
* as an Intergovernmental Organization or submit itself to any jurisdiction.
*/
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { JsonStoreService, AppGlobalsService, TabsUtilService, KeysStoreService } from '../shared/services';
var SubRecordComponent = (function () {
function SubRecordComponent(jsonStoreService, appGlobalsService, tabsUtilService, keysStoreService) {
this.jsonStoreService = jsonStoreService;
this.appGlobalsService = appGlobalsService;
this.tabsUtilService = tabsUtilService;
this.keysStoreService = keysStoreService;
this.pathCache = {};
}
SubRecordComponent.prototype.ngOnChanges = function (changes) {
var _this = this;
if (changes['keys']) {
var keys = void 0;
if (this.tabName) {
var keyToTabName_1 = this.tabsUtilService.getSchemaKeyToTabName(this.appGlobalsService.config.tabsConfig, this.schema);
keys = this.keys
.filter(function (key) { return keyToTabName_1[key] === _this.tabName; });
}
else {
keys = this.keys;
}
this.keysByType = keys
.groupBy(function (key) { return _this.isToggle(key) ? 'toggles' : 'others'; })
.toObject();
}
};
// delete only work for others, not toggles (UPDATE: config comment if this changes)
SubRecordComponent.prototype.deleteField = function (field) {
this.jsonStoreService.removeIn(this.getPathForChild(field));
};
SubRecordComponent.prototype.getPathForChild = function (key) {
if (!this.pathCache[key]) {
this.pathCache[key] = [key];
}
return this.pathCache[key];
};
SubRecordComponent.prototype.onToggleValueChange = function (field, value) {
this.jsonStoreService.setIn(this.getPathForChild(field), value);
};
SubRecordComponent.prototype.isToggle = function (field) {
return this.schema.properties[field].toggleColor !== undefined;
};
SubRecordComponent.prototype.isDisabled = function (key) {
return this.schema.properties[key].disabled && !this.appGlobalsService.adminMode;
};
SubRecordComponent.prototype.isDeleteDisabled = function (key) {
return !this.schema.properties[key].isDeleteDisabled;
};
SubRecordComponent.prototype.trackByElement = function (index, element) {
return element;
};
SubRecordComponent.prototype.getTitleDropdownItemTemplateNamesForChild = function (key) {
return this.schema.properties[key].titleDropdownItemTemplateNames;
};
return SubRecordComponent;
}());
export { SubRecordComponent };
SubRecordComponent.decorators = [
{ type: Component, args: [{
selector: 'sub-record',
styles: ["tr.align-right td:first-child { width: 100%; } tr.align-right td:first-child slide-toggle { float: right; } "],
template: "<div class=\"record-fields-container\"> <table class=\"table\"> <div class=\"field-wrapper\"> <tr *ngIf=\"keysByType.toggles\" class=\"align-right\"> <td *ngFor=\"let key of keysByType.toggles; trackBy:trackByElement\"> <slide-toggle [id]=\"'/' + key\" [value]=\"value.get(key) | selfOrEmpty:schema.properties[key]\" (valueChange)=\"onToggleValueChange(key, $event)\" [onText]=\"key\" [offText]=\"key\" [onColor]=\"schema.properties[key].toggleColor\"></slide-toggle> </td> </tr> </div> <div *ngIf=\"keysByType.others\"> <div class=\"field-wrapper\" *ngFor=\"let key of keysByType.others | setFirstElementPath:tabName; trackBy:trackByElement\"> <tr> <td class=\"label-holder\"> <title-dropdown [title]=\"key | underscoreToSpace\" [isDisabled]=\"isDisabled(key)\"> <li *ngIf=\"schema.properties[key].type === 'array'\" class=\"title-dropdown-item\"> <add-new-element-button [path]=\"getPathForChild(key)\" [schema]=\"schema.properties[key]\"></add-new-element-button> </li> <li class=\"title-dropdown-item\" *ngIf=\"isDeleteDisabled(key)\"> <button type=\"button\" class=\"editor-btn-delete editor-btn-delete-text\" (click)=\"deleteField(key)\">Delete</button> </li> <ng-container *ngIf=\"getTitleDropdownItemTemplateNamesForChild(key)\"> <li *ngFor=\"let templateName of getTitleDropdownItemTemplateNamesForChild(key)\" class=\"title-dropdown-item custom-title-dropdown-item\"> <ng-template [ngTemplateOutlet]=\"appGlobalsService.templates[templateName]\"></ng-template> </li> </ng-container> <li class=\"divider\"></li> <li class=\"title-dropdown-item\" (click)=\"$event.stopPropagation()\"> <find-replace [path]=\"getPathForChild(key)\" [schema]=\"schema.properties[key]\"></find-replace> </li> </title-dropdown> </td> </tr> <tr> <td> <any-type-field [value]=\"value.get(key) | selfOrEmpty:schema.properties[key]\" [schema]=\"schema.properties[key]\" [path]=\"getPathForChild(key)\"></any-type-field> </td> </tr> </div> </div> </table> </div> ",
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
SubRecordComponent.ctorParameters = function () { return [
{ type: JsonStoreService, },
{ type: AppGlobalsService, },
{ type: TabsUtilService, },
{ type: KeysStoreService, },
]; };
SubRecordComponent.propDecorators = {
'value': [{ type: Input },],
'schema': [{ type: Input },],
'tabName': [{ type: Input },],
'keys': [{ type: Input },],
'pathString': [{ type: Input },],
};
//# sourceMappingURL=sub-record.component.js.map