@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
82 lines (78 loc) • 17.4 kB
JavaScript
import * as i0 from '@angular/core';
import { Input, Component } from '@angular/core';
import * as i1 from 'ngx-bootstrap/modal';
import { Subject, merge, from } from 'rxjs';
import * as i2 from '@c8y/ngx-components/static-assets/data';
import { shareReplay, map, tap, first } from 'rxjs/operators';
import { NgFor, NgIf, AsyncPipe, DatePipe } from '@angular/common';
import * as i3 from '@c8y/ngx-components';
import { gettext, CoreModule } from '@c8y/ngx-components';
import * as i4 from 'ngx-bootstrap/popover';
import { PopoverModule } from 'ngx-bootstrap/popover';
import * as i5 from 'ngx-bootstrap/collapse';
import { CollapseModule } from 'ngx-bootstrap/collapse';
class StaticAssetsModalComponent {
constructor(modalRef, staticAssets) {
this.modalRef = modalRef;
this.staticAssets = staticAssets;
this.assetType = 'branding';
this.supportedFileExtensions = [];
this.modalTitle = gettext('Select asset');
this.layout = 'grid';
this.accept = '';
this.isExpanded = false;
this._filesUpdate$ = new Subject();
this.result = new Promise((resolve, reject) => {
this.resolve = resolve;
this.reject = reject;
});
}
ngOnInit() {
this._unfilteredFiles$ = merge(this._filesUpdate$, from(this.staticAssets.listFiles(this.assetType))).pipe(shareReplay(1));
this.files$ = this._unfilteredFiles$.pipe(map(files => this.supportedFileExtensions
? files.filter(tmp => this.supportedFileExtensions.includes(tmp.extension.toLowerCase()))
: files), map(files => files.sort((a, b) => (a.addedAt < b.addedAt ? 1 : a.addedAt > b.addedAt ? -1 : 0))), tap(files => {
if (!files.length) {
this.isExpanded = true;
}
}));
if (this.supportedFileExtensions) {
this.accept = this.supportedFileExtensions.join(',');
}
}
async addFiles(files) {
if (!files?.length) {
return;
}
const existingFiles = await this._unfilteredFiles$.pipe(first()).toPromise();
const newFiles = await this.staticAssets.addFilesToStaticAssets(this.assetType, files, existingFiles);
this._filesUpdate$.next(newFiles);
}
select(asset) {
this.modalRef.hide();
this.resolve(asset);
}
cancel() {
this.modalRef.hide();
this.reject();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StaticAssetsModalComponent, deps: [{ token: i1.BsModalRef }, { token: i2.StaticAssetsService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: StaticAssetsModalComponent, isStandalone: true, selector: "c8y-static-assets-modal", inputs: { assetType: "assetType", supportedFileExtensions: "supportedFileExtensions", modalTitle: "modalTitle", layout: "layout" }, ngImport: i0, template: "<c8y-modal\n [title]=\"modalTitle\"\n (onDismiss)=\"cancel()\"\n [headerClasses]=\"'dialog-header'\"\n [labels]=\"{ cancel: 'Cancel' }\"\n>\n <ng-container c8y-modal-title>\n <span [c8yIcon]=\"'select-all'\"></span>\n </ng-container>\n <ng-container *ngIf=\"files$ | async as assets; else loading\">\n <div class=\"text-center sticky-top separator-bottom bg-component\" style=\"z-index: 1001;\">\n <p *ngIf=\"assets.length\" class=\"m-0 p-16\">\n {{ 'Select from the list below or`first part, followed by upload a new asset`' | translate }}\n <button\n class=\"btn-link\"\n aria-controls=\"collapseUpload\"\n [attr.aria-expanded]=\"isExpanded\"\n (click)=\"isExpanded = !isExpanded\"\n >\n {{ 'upload a new asset' | translate }}\n </button>\n </p>\n <div\n class=\"collapse\"\n id=\"collapseUpload\"\n [isAnimated]=\"true\"\n [collapse]=\"!isExpanded\"\n >\n <div class=\"p-t-24 p-l-24 p-r-24 bg-level-1 separator-top-bottom p-b-32\">\n <c8y-drop-area\n class=\"drop-area-sm m-b-8\"\n [icon]=\"'upload'\"\n [accept]=\"accept\"\n (dropped)=\"addFiles($event)\"\n ></c8y-drop-area>\n <c8y-messages\n [helpMessage]=\"\n 'After uploading, the asset will be visible in the list below.' | translate\n \"\n ></c8y-messages>\n </div>\n </div>\n </div>\n <div *ngIf=\"assets.length\">\n <c8y-list-group\n class=\"m-b-0\"\n *ngIf=\"layout != 'grid'\"\n >\n <c8y-list-item *ngFor=\"let asset of assets\">\n <c8y-list-item-icon icon=\"file\"></c8y-list-item-icon>\n\n <c8y-list-item-body>\n <div class=\"row\">\n <div class=\"col-md-3 col-xs-12 d-flex a-i-center\">\n <div\n class=\"text-truncate\"\n title=\"{{ asset.fileName }}\"\n >\n {{ asset.fileName }}\n </div>\n <button\n class=\"btn-dot m-l-4\"\n [title]=\"'Preview' | translate\"\n [popover]=\"preview\"\n placement=\"end\"\n triggers=\"focus\"\n container=\"body\"\n [adaptivePosition]=\"false\"\n >\n <i c8yIcon=\"eye\"></i>\n </button>\n <ng-template #preview>\n <div class=\"bg-checkered\">\n <img\n class=\"fit-w\"\n [alt]=\"asset.fileName\"\n [src]=\"asset.path\"\n />\n </div>\n </ng-template>\n </div>\n <div class=\"col-md-3 col-xs-12 text-muted\">\n <code class=\"text-10\">{{ asset.type }}</code>\n </div>\n <div class=\"col-md-2 col-xs-12 text-muted\">\n <span class=\"small\">{{ asset.size | bytes }}</span>\n </div>\n <div\n class=\"col-md-2 col-xs-12 text-muted\"\n [title]=\"asset.addedAt | date\"\n >\n <div class=\"icon-flex small\">\n <i\n class=\"m-r-4\"\n c8yIcon=\"calendar\"\n ></i>\n <span>{{ asset.addedAt | date }}</span>\n </div>\n </div>\n <div class=\"col-md-2 col-xs-12 d-flex\">\n <button\n class=\"btn btn-default btn-sm m-l-auto showOnHover\"\n (click)=\"select(asset)\"\n translate\n >\n Select\n </button>\n </div>\n </div>\n </c8y-list-item-body>\n </c8y-list-item>\n </c8y-list-group>\n <div\n class=\"card-group-block interact-grid\"\n *ngIf=\"layout === 'grid'\"\n >\n <button\n class=\"col-md-3 col-sm-4 col-xs-12 card btn-clean interact pointer\"\n *ngFor=\"let asset of assets\"\n (click)=\"select(asset)\"\n >\n <div class=\"card-block\">\n <div class=\"bg-checkered\">\n <img\n class=\"img-responsive m-auto img-square\"\n [alt]=\"asset.fileName\"\n [src]=\"asset.path\"\n />\n </div>\n <p\n class=\"text-medium text-truncate-wrap m-t-8\"\n title=\"{{ asset.fileName }}\"\n >\n {{ asset.fileName }}\n </p>\n <p class=\"m-b-4\">\n <code class=\"text-10\">{{ asset.type }}</code>\n </p>\n <p class=\"small text-muted d-flex a-i-center\">\n {{ asset.size | bytes }}\n <span class=\"m-l-auto\">\n <i\n class=\"m-r-4\"\n c8yIcon=\"calendar\"\n ></i>\n <span>{{ asset.addedAt | date }}</span>\n </span>\n </p>\n </div>\n </button>\n </div>\n </div>\n </ng-container>\n\n <ng-template #loading>\n <div class=\"p-24\">\n <c8y-loading></c8y-loading>\n </div>\n </ng-template>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: i3.BytesPipe, name: "bytes" }, { kind: "component", type: i3.DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "component", type: i3.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i3.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i3.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i5.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StaticAssetsModalComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-static-assets-modal', imports: [NgFor, NgIf, AsyncPipe, DatePipe, CoreModule, PopoverModule, CollapseModule], standalone: true, template: "<c8y-modal\n [title]=\"modalTitle\"\n (onDismiss)=\"cancel()\"\n [headerClasses]=\"'dialog-header'\"\n [labels]=\"{ cancel: 'Cancel' }\"\n>\n <ng-container c8y-modal-title>\n <span [c8yIcon]=\"'select-all'\"></span>\n </ng-container>\n <ng-container *ngIf=\"files$ | async as assets; else loading\">\n <div class=\"text-center sticky-top separator-bottom bg-component\" style=\"z-index: 1001;\">\n <p *ngIf=\"assets.length\" class=\"m-0 p-16\">\n {{ 'Select from the list below or`first part, followed by upload a new asset`' | translate }}\n <button\n class=\"btn-link\"\n aria-controls=\"collapseUpload\"\n [attr.aria-expanded]=\"isExpanded\"\n (click)=\"isExpanded = !isExpanded\"\n >\n {{ 'upload a new asset' | translate }}\n </button>\n </p>\n <div\n class=\"collapse\"\n id=\"collapseUpload\"\n [isAnimated]=\"true\"\n [collapse]=\"!isExpanded\"\n >\n <div class=\"p-t-24 p-l-24 p-r-24 bg-level-1 separator-top-bottom p-b-32\">\n <c8y-drop-area\n class=\"drop-area-sm m-b-8\"\n [icon]=\"'upload'\"\n [accept]=\"accept\"\n (dropped)=\"addFiles($event)\"\n ></c8y-drop-area>\n <c8y-messages\n [helpMessage]=\"\n 'After uploading, the asset will be visible in the list below.' | translate\n \"\n ></c8y-messages>\n </div>\n </div>\n </div>\n <div *ngIf=\"assets.length\">\n <c8y-list-group\n class=\"m-b-0\"\n *ngIf=\"layout != 'grid'\"\n >\n <c8y-list-item *ngFor=\"let asset of assets\">\n <c8y-list-item-icon icon=\"file\"></c8y-list-item-icon>\n\n <c8y-list-item-body>\n <div class=\"row\">\n <div class=\"col-md-3 col-xs-12 d-flex a-i-center\">\n <div\n class=\"text-truncate\"\n title=\"{{ asset.fileName }}\"\n >\n {{ asset.fileName }}\n </div>\n <button\n class=\"btn-dot m-l-4\"\n [title]=\"'Preview' | translate\"\n [popover]=\"preview\"\n placement=\"end\"\n triggers=\"focus\"\n container=\"body\"\n [adaptivePosition]=\"false\"\n >\n <i c8yIcon=\"eye\"></i>\n </button>\n <ng-template #preview>\n <div class=\"bg-checkered\">\n <img\n class=\"fit-w\"\n [alt]=\"asset.fileName\"\n [src]=\"asset.path\"\n />\n </div>\n </ng-template>\n </div>\n <div class=\"col-md-3 col-xs-12 text-muted\">\n <code class=\"text-10\">{{ asset.type }}</code>\n </div>\n <div class=\"col-md-2 col-xs-12 text-muted\">\n <span class=\"small\">{{ asset.size | bytes }}</span>\n </div>\n <div\n class=\"col-md-2 col-xs-12 text-muted\"\n [title]=\"asset.addedAt | date\"\n >\n <div class=\"icon-flex small\">\n <i\n class=\"m-r-4\"\n c8yIcon=\"calendar\"\n ></i>\n <span>{{ asset.addedAt | date }}</span>\n </div>\n </div>\n <div class=\"col-md-2 col-xs-12 d-flex\">\n <button\n class=\"btn btn-default btn-sm m-l-auto showOnHover\"\n (click)=\"select(asset)\"\n translate\n >\n Select\n </button>\n </div>\n </div>\n </c8y-list-item-body>\n </c8y-list-item>\n </c8y-list-group>\n <div\n class=\"card-group-block interact-grid\"\n *ngIf=\"layout === 'grid'\"\n >\n <button\n class=\"col-md-3 col-sm-4 col-xs-12 card btn-clean interact pointer\"\n *ngFor=\"let asset of assets\"\n (click)=\"select(asset)\"\n >\n <div class=\"card-block\">\n <div class=\"bg-checkered\">\n <img\n class=\"img-responsive m-auto img-square\"\n [alt]=\"asset.fileName\"\n [src]=\"asset.path\"\n />\n </div>\n <p\n class=\"text-medium text-truncate-wrap m-t-8\"\n title=\"{{ asset.fileName }}\"\n >\n {{ asset.fileName }}\n </p>\n <p class=\"m-b-4\">\n <code class=\"text-10\">{{ asset.type }}</code>\n </p>\n <p class=\"small text-muted d-flex a-i-center\">\n {{ asset.size | bytes }}\n <span class=\"m-l-auto\">\n <i\n class=\"m-r-4\"\n c8yIcon=\"calendar\"\n ></i>\n <span>{{ asset.addedAt | date }}</span>\n </span>\n </p>\n </div>\n </button>\n </div>\n </div>\n </ng-container>\n\n <ng-template #loading>\n <div class=\"p-24\">\n <c8y-loading></c8y-loading>\n </div>\n </ng-template>\n</c8y-modal>\n" }]
}], ctorParameters: () => [{ type: i1.BsModalRef }, { type: i2.StaticAssetsService }], propDecorators: { assetType: [{
type: Input
}], supportedFileExtensions: [{
type: Input
}], modalTitle: [{
type: Input
}], layout: [{
type: Input
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { StaticAssetsModalComponent };
//# sourceMappingURL=c8y-ngx-components-static-assets-modal.mjs.map