@knora/viewer
Version:
Knora ui module: viewer
63 lines • 13.5 kB
JavaScript
import * as tslib_1 from "tslib";
import { Component, Input } from '@angular/core';
import { Router } from '@angular/router';
/**
* Shows all metadata (properties) in the resource viewer
*
*/
var PropertiesViewComponent = /** @class */ (function () {
function PropertiesViewComponent(_router) {
this._router = _router;
/**
* Show all properties, even they don't have a value.
*
* @param {boolean} [allProps]
*/
this.allProps = false;
/**
* Show toolbar with project info and some action tools
*
* @param {boolean} [toolbar]
*/
this.toolbar = false;
this.loading = false;
}
PropertiesViewComponent.prototype.ngOnInit = function () {
};
/**
* Navigate to the incoming resource view.
*
* @param {string} id Incoming resource iri
*/
PropertiesViewComponent.prototype.openLink = function (id) {
this.loading = true;
// this.routeChanged.emit(id);
this._router.navigate(['/resource/' + encodeURIComponent(id)]);
};
PropertiesViewComponent.ctorParameters = function () { return [
{ type: Router }
]; };
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Object)
], PropertiesViewComponent.prototype, "propArray", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Boolean)
], PropertiesViewComponent.prototype, "allProps", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Boolean)
], PropertiesViewComponent.prototype, "toolbar", void 0);
PropertiesViewComponent = tslib_1.__decorate([
Component({
selector: 'kui-properties-view',
template: "<!-- properties -->\n<div class=\"properties-container\">\n <div class=\"properties\" *ngIf=\"!loading\">\n\n <!-- list of properties -->\n <div *ngFor=\"let prop of propArray; let last = last\">\n <!-- show property; all in case of showAll === true or only the ones with prop.values -->\n <div class=\"property\" *ngIf=\"allProps || prop.values\">\n <div class=\"property-label\">\n <!-- label of the property -->\n <h3 class=\"label mat-subheading-1\">\n {{prop.propDef.label}}\n </h3>\n </div>\n <div class=\"property-value\">\n\n <!-- the value(s) of the property -->\n <div class=\"property-value-item\" *ngFor=\"let val of prop.values; let lastItem = last\">\n\n <span *ngIf=\"prop.values\" [class.list]=\"prop.values.length > 1\"\n [class.lastItem]=\"lastItem\">{{val.strval}}</span>\n\n <!-- TODO: reactivate switch by value type as soon the new viewer elements are ready -->\n <!--\n <span [ngSwitch]=\"val.type\" [class.list]=\"prop.values.length > 1\" [class.lastItem]=\"lastItem\">\n <kui-text-value-as-string *ngSwitchCase=\"KnoraConstants.TextValue\" [valueObject]=\"val\">\n </kui-text-value-as-string>\n <kui-text-value-as-xml *ngSwitchCase=\"KnoraConstants.TextValueAsXml\" [valueObject]=\"val\">\n </kui-text-value-as-xml>\n <kui-date-value *ngSwitchCase=\"KnoraConstants.ReadDateValue\" [valueObject]=\"val\"\n [calendar]=\"true\" [era]=\"true\">\n </kui-date-value>\n <kui-link-value class=\"app-link\" *ngSwitchCase=\"KnoraConstants.ReadLinkValue\"\n [valueObject]=\"val\"\n (referredResourceClicked)=\"openLink(val.referredResourceIri)\">\n </kui-link-value>\n <kui-integer-value *ngSwitchCase=\"KnoraConstants.IntValue\" [valueObject]=\"val\">\n </kui-integer-value>\n <kui-decimal-value *ngSwitchCase=\"KnoraConstants.DecimalValue\" [valueObject]=\"val\">\n </kui-decimal-value>\n <kui-geometry-value *ngSwitchCase=\"KnoraConstants.GeomValue\" [valueObject]=\"val\">\n </kui-geometry-value>\n <kui-color-value *ngSwitchCase=\"KnoraConstants.ColorValue\" [valueObject]=\"val\">\n </kui-color-value>\n <kui-uri-value *ngSwitchCase=\"KnoraConstants.UriValue\" [valueObject]=\"val\">\n </kui-uri-value>\n <kui-boolean-value *ngSwitchCase=\"KnoraConstants.BooleanValue\" [valueObject]=\"val\">\n </kui-boolean-value>\n <kui-interval-value *ngSwitchCase=\"KnoraConstants.IntervalValue\" [valueObject]=\"val\">\n </kui-interval-value>\n <kui-list-value *ngSwitchCase=\"KnoraConstants.ReadListValue\" [valueObject]=\"val\">\n </kui-list-value>\n <kui-textfile-value *ngSwitchCase=\"KnoraConstants.FileValueHasFilename\" [valueObject]=\"val\">\n </kui-textfile-value>\n <span *ngSwitchDefault>Not supported {{val.type}}</span>\n <br>\n </span>\n -->\n </div>\n </div>\n </div>\n </div>\n\n\n <!-- TODO / QUESTION: What happend to incoming links and annotations? -->\n <div class=\"incoming\">\n\n <!-- annotations are resources like region, sequence etc. -->\n <!-- TODO: we can't display incoming annotations as expected\n <div class=\"annotations\">\n <!-- *ngIf=\"annotations?.length > 0\"> --\n <h3 class=\"label mat-subheading-1\">\n Annotations\n </h3>\n <mat-list *ngFor=\"let annotation of annotations\">\n <mat-list-item class=\"kui-link\" (click)=\"openLink(annotation.id)\">\n <span>{{annotation.label}}</span>\n </mat-list-item>\n </mat-list>\n </div>\n -->\n\n <!-- incoming links -->\n <!-- <div class=\"links\" *ngIf=\"incomingLinks?.length > 0\">\n <h3 class=\"label mat-subheading-1\">\n Links\n </h3>\n <ul>\n <li *ngFor=\"let incoming of incomingLinks\" class=\"kui-link\" (click)=\"openLink(incoming.id)\">\n {{incoming.label}}\n </li>\n </ul>\n </div> -->\n </div>\n </div>\n</div>\n",
styles: [".mat-form-field{width:320px}.fill-remaining-space{-webkit-box-flex:1;flex:1 1 auto}.center{text-align:center}a{text-decoration:none;color:inherit}.kui-link{cursor:pointer;border-bottom:2px solid rgba(0,105,92,.25)}.lv-prop-label{color:rgba(0,0,0,.54)}.lv-html-text{position:relative;overflow:hidden}.properties-container{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[6];grid-template-columns:repeat(6,1fr);gap:16px}.properties-container .incoming,.properties-container .properties{margin-top:16px}.properties-container .properties{-ms-grid-column:1;-ms-grid-column-span:4;grid-column:1/span 4}.properties-container .properties .property{-ms-grid-row:1;grid-row:1/1;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr);gap:16px}.properties-container .properties .property .property-label,.properties-container .properties .property .property-value{padding:2px;overflow-wrap:break-word}.properties-container .properties .property .property-label{-ms-grid-column:1;-ms-grid-column-span:1;grid-column:1/span 1}.properties-container .properties .property .property-label .label{text-align:right}.properties-container .properties .property .property-value{padding-top:5px;-ms-grid-column:2;-ms-grid-column-span:3;grid-column:2/span 3}.properties-container .incoming{-ms-grid-column:5;-ms-grid-column-span:2;grid-column:5/span 2;display:-ms-grid;display:grid;gap:16px;-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;-ms-grid-rows:(minmax(60px,auto))[6];grid-template-rows:repeat(6,minmax(60px,auto))}.properties-container .incoming .annotations,.properties-container .incoming .links{padding:16px;-ms-grid-column:1;-ms-grid-column-span:2;grid-column:1/span 2;border-radius:6px}.properties-container .incoming .annotations ul,.properties-container .incoming .links ul{-webkit-padding-start:5px;padding-inline-start:5px;list-style-type:none}.properties-container .incoming .annotations ul li,.properties-container .incoming .links ul li{margin-bottom:10px;text-indent:-8px}.properties-container .incoming .annotations ul li:before,.properties-container .incoming .links ul li:before{content:\"- \"}.properties-container .incoming .annotations{background:rgba(245,222,179,.39)}.properties-container .incoming .links{background:rgba(222,184,135,.39)}.label{color:rgba(0,0,0,.54)}@media screen and (max-width:768px){.incoming,.properties{-ms-grid-column:1!important;-ms-grid-column-span:6!important;grid-column:1/span 6!important;gap:0!important}.incoming .property,.properties .property{gap:0!important}.incoming .annotations,.incoming .links,.incoming .property-label,.incoming .property-value,.properties .annotations,.properties .links,.properties .property-label,.properties .property-value{-ms-grid-column:1!important;-ms-grid-column-span:4!important;grid-column:1/span 4!important}h3.label{text-align:left!important;margin:16px 0 0!important}}"]
}),
tslib_1.__metadata("design:paramtypes", [Router])
], PropertiesViewComponent);
return PropertiesViewComponent;
}());
export { PropertiesViewComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvcGVydGllcy12aWV3LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0Brbm9yYS92aWV3ZXIvIiwic291cmNlcyI6WyJsaWIvdmlldy9wcm9wZXJ0aWVzLXZpZXcvcHJvcGVydGllcy12aWV3LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFDekQsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBS3pDOzs7R0FHRztBQU1IO0lBeUJJLGlDQUNjLE9BQWU7UUFBZixZQUFPLEdBQVAsT0FBTyxDQUFRO1FBakI3Qjs7OztXQUlHO1FBQ00sYUFBUSxHQUFhLEtBQUssQ0FBQztRQUVwQzs7OztXQUlHO1FBQ00sWUFBTyxHQUFhLEtBQUssQ0FBQztRQUVuQyxZQUFPLEdBQVksS0FBSyxDQUFDO0lBSXpCLENBQUM7SUFFRCwwQ0FBUSxHQUFSO0lBRUEsQ0FBQztJQUVEOzs7O09BSUc7SUFDSCwwQ0FBUSxHQUFSLFVBQVMsRUFBVTtRQUVmLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDO1FBQ3BCLDhCQUE4QjtRQUM5QixJQUFJLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxDQUFDLFlBQVksR0FBRyxrQkFBa0IsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFFbkUsQ0FBQzs7Z0JBbEJzQixNQUFNOztJQW5CcEI7UUFBUixLQUFLLEVBQUU7OzhEQUF5QjtJQU94QjtRQUFSLEtBQUssRUFBRTs7NkRBQTRCO0lBTzNCO1FBQVIsS0FBSyxFQUFFOzs0REFBMkI7SUFyQjFCLHVCQUF1QjtRQUxuQyxTQUFTLENBQUM7WUFDUCxRQUFRLEVBQUUscUJBQXFCO1lBQy9CLGd1S0FBK0M7O1NBRWxELENBQUM7aURBMkJ5QixNQUFNO09BMUJwQix1QkFBdUIsQ0ErQ25DO0lBQUQsOEJBQUM7Q0FBQSxBQS9DRCxJQStDQztTQS9DWSx1QkFBdUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFJvdXRlciB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5pbXBvcnQgeyBSZWFkUmVzb3VyY2UgfSBmcm9tICdAa25vcmEvYXBpJztcblxuaW1wb3J0IHsgVGVtcFByb3BlcnR5IH0gZnJvbSAnLi4nO1xuXG4vKipcbiAqIFNob3dzIGFsbCBtZXRhZGF0YSAocHJvcGVydGllcykgaW4gdGhlIHJlc291cmNlIHZpZXdlclxuICpcbiAqL1xuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdrdWktcHJvcGVydGllcy12aWV3JyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vcHJvcGVydGllcy12aWV3LmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9wcm9wZXJ0aWVzLXZpZXcuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBQcm9wZXJ0aWVzVmlld0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgICAvKipcbiAgICAgKiBBcnJheSBvZiBwcm9wZXJ0eSBvYmplY3Qgd2l0aCBvbnRvbG9neSBjbGFzcyBwcm9wIGRlZiwgbGlzdCBvZiBwcm9wZXJ0aWVzIGFuZCBjb3JyZXNwb25kaW5nIHZhbHVlc1xuICAgICAqXG4gICAgICogQHBhcmFtICB7VGVtcFByb3BlcnR5fSBwcm9wQXJyYXlcbiAgICAgKi9cbiAgICBASW5wdXQoKSBwcm9wQXJyYXk6IFRlbXBQcm9wZXJ0eTtcblxuICAgIC8qKlxuICAgICAqIFNob3cgYWxsIHByb3BlcnRpZXMsIGV2ZW4gdGhleSBkb24ndCBoYXZlIGEgdmFsdWUuXG4gICAgICpcbiAgICAgKiBAcGFyYW0gIHtib29sZWFufSBbYWxsUHJvcHNdXG4gICAgICovXG4gICAgQElucHV0KCkgYWxsUHJvcHM/OiBib29sZWFuID0gZmFsc2U7XG5cbiAgICAvKipcbiAgICAgKiBTaG93IHRvb2xiYXIgd2l0aCBwcm9qZWN0IGluZm8gYW5kIHNvbWUgYWN0aW9uIHRvb2xzXG4gICAgICpcbiAgICAgKiBAcGFyYW0gIHtib29sZWFufSBbdG9vbGJhcl1cbiAgICAgKi9cbiAgICBASW5wdXQoKSB0b29sYmFyPzogYm9vbGVhbiA9IGZhbHNlO1xuXG4gICAgbG9hZGluZzogYm9vbGVhbiA9IGZhbHNlO1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIHByb3RlY3RlZCBfcm91dGVyOiBSb3V0ZXIpIHtcbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpIHtcblxuICAgIH1cblxuICAgIC8qKlxuICAgICAqIE5hdmlnYXRlIHRvIHRoZSBpbmNvbWluZyByZXNvdXJjZSB2aWV3LlxuICAgICAqXG4gICAgICogQHBhcmFtIHtzdHJpbmd9IGlkIEluY29taW5nIHJlc291cmNlIGlyaVxuICAgICAqL1xuICAgIG9wZW5MaW5rKGlkOiBzdHJpbmcpIHtcblxuICAgICAgICB0aGlzLmxvYWRpbmcgPSB0cnVlO1xuICAgICAgICAvLyB0aGlzLnJvdXRlQ2hhbmdlZC5lbWl0KGlkKTtcbiAgICAgICAgdGhpcy5fcm91dGVyLm5hdmlnYXRlKFsnL3Jlc291cmNlLycgKyBlbmNvZGVVUklDb21wb25lbnQoaWQpXSk7XG5cbiAgICB9XG5cblxufVxuIl19