reports-hyper74
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.
161 lines (160 loc) • 15.3 kB
JavaScript
import { Component, EventEmitter, Input, Output, } from '@angular/core';
import { sharedGridLayout } from './utils/sharedLayOut';
import * as i0 from "@angular/core";
import * as i1 from "./reports.service";
import * as i2 from "@angular/material/tabs";
import * as i3 from "@angular/material/grid-list";
import * as i4 from "@angular/material/card";
import * as i5 from "@angular/material/button";
import * as i6 from "@angular/common";
export class ReportsComponent {
constructor(reportService) {
this.reportService = reportService;
this.reportsGroups = [];
this.reportsByGroupId = [];
this.$subs = [];
this.onViewClicked = new EventEmitter();
this.breakpoint = 3;
}
ngOnInit() {
this.loadGroups();
}
loadGroups() {
const sub1 = this.reportService
.loadGroups(this.urlReportGroups)
.subscribe((res) => {
this.reportsGroups = res;
this.$subs.push(sub1);
});
}
listReportsByGroupId(groupId) {
const sub2 = this.reportService
.listReportsByGroupId(this.reportGroupByIdUrl, groupId)
.subscribe((res2) => {
this.reportsByGroupId = res2;
});
this.$subs.push(sub2);
}
onTabChanged(event) {
this.listReportsByGroupId(this.reportsGroups[event].id);
}
viewReportFilterDetails(report) {
this.onViewClicked.emit(report);
}
onResize(event) {
this.breakpoint = sharedGridLayout(true, event);
// console.log('breakPoint', this.breakpoint);
}
ngOnDestroy() {
this.$subs.forEach((item) => item.unsubscribe());
}
}
ReportsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ReportsComponent, deps: [{ token: i1.ReportsService }], target: i0.ɵɵFactoryTarget.Component });
ReportsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ReportsComponent, selector: "lib-reports-groups", inputs: { urlReportGroups: "urlReportGroups", reportGroupByIdUrl: "reportGroupByIdUrl" }, outputs: { onViewClicked: "onViewClicked" }, ngImport: i0, template: `
<div class="reportsContainer">
<div class="title">
Marketing Reports
</div>
<mat-tab-group *ngIf="reportsGroups" (selectedIndexChange)="onTabChanged($event)">
<mat-tab [id]="group.id" *ngFor="let group of reportsGroups;let i=index"
label="{{group.name}}" >
<mat-grid-list class="space" [cols]="breakpoint" (window:resize)="onResize($event)" rowHeight="200px">
<mat-grid-tile *ngFor="let report of reportsByGroupId">
<mat-card class="example-card">
<mat-card-title class="title">{{ report.name }}</mat-card-title>
<mat-card-content>
<p>{{ report.descreption }}</p>
</mat-card-content>
<mat-card-actions>
<button
mat-button
class="viewButton"
(click)="viewReportFilterDetails(report)"
>
View
</button>
</mat-card-actions>
</mat-card>
</mat-grid-tile>
</mat-grid-list>
</mat-tab>
</mat-tab-group>
</div>
`, isInline: true, styles: ["\n .example-card {\n max-width: 350px;\n border-radius: 8px;\n height: 160px;\n overflow: auto;\n width: 93%\n }\n\n .viewButton {\n background: #FF6600;\n color: #ffffff;\n float: right;\n }\n .title{\n font-size: 18px;\n font-weight: 600;\n letter-spacing: 0.34px;\n color: #1B1B1B;\n opacity: 1;\n margin-bottom: 15px;\n }\n .reportsContainer{\n margin: 30px;\n }\n .tabs{\n margin: 45px;\n }\n .space{\n margin-top: 20px;\n }\n "], components: [{ type: i2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i3.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i3.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: i4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ReportsComponent, decorators: [{
type: Component,
args: [{
selector: 'lib-reports-groups',
template: `
<div class="reportsContainer">
<div class="title">
Marketing Reports
</div>
<mat-tab-group *ngIf="reportsGroups" (selectedIndexChange)="onTabChanged($event)">
<mat-tab [id]="group.id" *ngFor="let group of reportsGroups;let i=index"
label="{{group.name}}" >
<mat-grid-list class="space" [cols]="breakpoint" (window:resize)="onResize($event)" rowHeight="200px">
<mat-grid-tile *ngFor="let report of reportsByGroupId">
<mat-card class="example-card">
<mat-card-title class="title">{{ report.name }}</mat-card-title>
<mat-card-content>
<p>{{ report.descreption }}</p>
</mat-card-content>
<mat-card-actions>
<button
mat-button
class="viewButton"
(click)="viewReportFilterDetails(report)"
>
View
</button>
</mat-card-actions>
</mat-card>
</mat-grid-tile>
</mat-grid-list>
</mat-tab>
</mat-tab-group>
</div>
`,
styles: [
`
.example-card {
max-width: 350px;
border-radius: 8px;
height: 160px;
overflow: auto;
width: 93%
}
.viewButton {
background: #FF6600;
color: #ffffff;
float: right;
}
.title{
font-size: 18px;
font-weight: 600;
letter-spacing: 0.34px;
color: #1B1B1B;
opacity: 1;
margin-bottom: 15px;
}
.reportsContainer{
margin: 30px;
}
.tabs{
margin: 45px;
}
.space{
margin-top: 20px;
}
`,
],
}]
}], ctorParameters: function () { return [{ type: i1.ReportsService }]; }, propDecorators: { urlReportGroups: [{
type: Input
}], reportGroupByIdUrl: [{
type: Input
}], onViewClicked: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVwb3J0cy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9yZXBvcnRzL3NyYy9saWIvcmVwb3J0cy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUdMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUl2QixPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSxzQkFBc0IsQ0FBQzs7Ozs7Ozs7QUFzRXRELE1BQU0sT0FBTyxnQkFBZ0I7SUFTM0IsWUFBb0IsYUFBNkI7UUFBN0Isa0JBQWEsR0FBYixhQUFhLENBQWdCO1FBUmpELGtCQUFhLEdBQW1CLEVBQUUsQ0FBQztRQUduQyxxQkFBZ0IsR0FBdUIsRUFBRSxDQUFDO1FBQzFDLFVBQUssR0FBbUIsRUFBRSxDQUFDO1FBQ2pCLGtCQUFhLEdBQXNCLElBQUksWUFBWSxFQUFPLENBQUM7UUFDckUsZUFBVSxHQUFXLENBQUMsQ0FBQztJQUd2QixDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztJQUNwQixDQUFDO0lBRUQsVUFBVTtRQUNSLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxhQUFhO2FBQzVCLFVBQVUsQ0FBQyxJQUFJLENBQUMsZUFBZSxDQUFDO2FBQ2hDLFNBQVMsQ0FBQyxDQUFDLEdBQUcsRUFBRSxFQUFFO1lBQ2pCLElBQUksQ0FBQyxhQUFhLEdBQUcsR0FBRyxDQUFDO1lBQ3pCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3hCLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVELG9CQUFvQixDQUFDLE9BQWU7UUFDbEMsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLGFBQWE7YUFDNUIsb0JBQW9CLENBQUMsSUFBSSxDQUFDLGtCQUFrQixFQUFFLE9BQU8sQ0FBQzthQUN0RCxTQUFTLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRTtZQUNsQixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDO1FBQy9CLENBQUMsQ0FBQyxDQUFDO1FBQ0wsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDeEIsQ0FBQztJQUVELFlBQVksQ0FBQyxLQUFVO1FBQ3JCLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQzFELENBQUM7SUFFRCx1QkFBdUIsQ0FBQyxNQUFXO1FBQ2pDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ2xDLENBQUM7SUFFRCxRQUFRLENBQUMsS0FBVTtRQUNqQixJQUFJLENBQUMsVUFBVSxHQUFHLGdCQUFnQixDQUFDLElBQUksRUFBRSxLQUFLLENBQUMsQ0FBQztRQUNoRCw4Q0FBOEM7SUFDaEQsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDLENBQUM7SUFDbkQsQ0FBQzs7OEdBakRVLGdCQUFnQjtrR0FBaEIsZ0JBQWdCLGlNQWxFakI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQThCVDs0RkFvQ1UsZ0JBQWdCO2tCQXBFNUIsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsb0JBQW9CO29CQUM5QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQThCVDtvQkFDRCxNQUFNLEVBQUU7d0JBQ047Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7S0ErQkM7cUJBQ0Y7aUJBQ0Y7cUdBR1UsZUFBZTtzQkFBdkIsS0FBSztnQkFDRyxrQkFBa0I7c0JBQTFCLEtBQUs7Z0JBR0ksYUFBYTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT25EZXN0cm95LFxuICBPbkluaXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1JlcG9ydEdyb3VwcywgUmVwb3J0c0J5R3JvdXBJZH0gZnJvbSAnLi9JbnRlcmZhY2VzJztcbmltcG9ydCB7U3Vic2NyaXB0aW9ufSBmcm9tICdyeGpzJztcbmltcG9ydCB7UmVwb3J0c1NlcnZpY2V9IGZyb20gJy4vcmVwb3J0cy5zZXJ2aWNlJztcbmltcG9ydCB7c2hhcmVkR3JpZExheW91dH0gZnJvbSAnLi91dGlscy9zaGFyZWRMYXlPdXQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsaWItcmVwb3J0cy1ncm91cHMnLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgY2xhc3M9XCJyZXBvcnRzQ29udGFpbmVyXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwidGl0bGVcIj5cbiAgICAgICAgTWFya2V0aW5nIFJlcG9ydHNcbiAgICAgIDwvZGl2PlxuICAgICAgICA8bWF0LXRhYi1ncm91cCAqbmdJZj1cInJlcG9ydHNHcm91cHNcIiAoc2VsZWN0ZWRJbmRleENoYW5nZSk9XCJvblRhYkNoYW5nZWQoJGV2ZW50KVwiPlxuICAgICAgICAgIDxtYXQtdGFiICBbaWRdPVwiZ3JvdXAuaWRcIiAqbmdGb3I9XCJsZXQgZ3JvdXAgb2YgcmVwb3J0c0dyb3VwcztsZXQgaT1pbmRleFwiXG4gICAgICAgICAgICAgICAgICAgIGxhYmVsPVwie3tncm91cC5uYW1lfX1cIiA+XG4gICAgICAgICAgPG1hdC1ncmlkLWxpc3QgIGNsYXNzPVwic3BhY2VcIiBbY29sc109XCJicmVha3BvaW50XCIgKHdpbmRvdzpyZXNpemUpPVwib25SZXNpemUoJGV2ZW50KVwiIHJvd0hlaWdodD1cIjIwMHB4XCI+XG4gICAgICAgICAgICA8bWF0LWdyaWQtdGlsZSAqbmdGb3I9XCJsZXQgcmVwb3J0IG9mIHJlcG9ydHNCeUdyb3VwSWRcIj5cbiAgICAgICAgICAgICAgPG1hdC1jYXJkIGNsYXNzPVwiZXhhbXBsZS1jYXJkXCI+XG4gICAgICAgICAgICAgICAgPG1hdC1jYXJkLXRpdGxlIGNsYXNzPVwidGl0bGVcIj57eyByZXBvcnQubmFtZSB9fTwvbWF0LWNhcmQtdGl0bGU+XG4gICAgICAgICAgICAgICAgPG1hdC1jYXJkLWNvbnRlbnQ+XG4gICAgICAgICAgICAgICAgICA8cD57eyByZXBvcnQuZGVzY3JlcHRpb24gfX08L3A+XG4gICAgICAgICAgICAgICAgPC9tYXQtY2FyZC1jb250ZW50PlxuICAgICAgICAgICAgICAgIDxtYXQtY2FyZC1hY3Rpb25zPlxuICAgICAgICAgICAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgICAgICAgICBtYXQtYnV0dG9uXG4gICAgICAgICAgICAgICAgICAgIGNsYXNzPVwidmlld0J1dHRvblwiXG4gICAgICAgICAgICAgICAgICAgIChjbGljayk9XCJ2aWV3UmVwb3J0RmlsdGVyRGV0YWlscyhyZXBvcnQpXCJcbiAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgVmlld1xuICAgICAgICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgICAgICAgPC9tYXQtY2FyZC1hY3Rpb25zPlxuICAgICAgICAgICAgICA8L21hdC1jYXJkPlxuICAgICAgICAgICAgPC9tYXQtZ3JpZC10aWxlPlxuICAgICAgICAgIDwvbWF0LWdyaWQtbGlzdD5cbiAgICAgICAgICA8L21hdC10YWI+XG4gICAgICAgIDwvbWF0LXRhYi1ncm91cD5cbiAgICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAgICAgLmV4YW1wbGUtY2FyZCB7XG4gICAgICAgIG1heC13aWR0aDogMzUwcHg7XG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDhweDtcbiAgICAgICAgaGVpZ2h0OiAxNjBweDtcbiAgICAgICAgb3ZlcmZsb3c6IGF1dG87XG4gICAgICAgIHdpZHRoOiA5MyVcbiAgICAgIH1cblxuICAgICAgLnZpZXdCdXR0b24ge1xuICAgICAgICBiYWNrZ3JvdW5kOiAjRkY2NjAwO1xuICAgICAgICBjb2xvcjogI2ZmZmZmZjtcbiAgICAgICAgZmxvYXQ6IHJpZ2h0O1xuICAgICAgfVxuICAgICAgLnRpdGxle1xuICAgICAgICBmb250LXNpemU6IDE4cHg7XG4gICAgICAgIGZvbnQtd2VpZ2h0OiA2MDA7XG4gICAgICAgIGxldHRlci1zcGFjaW5nOiAwLjM0cHg7XG4gICAgICAgIGNvbG9yOiAjMUIxQjFCO1xuICAgICAgICBvcGFjaXR5OiAxO1xuICAgICAgICBtYXJnaW4tYm90dG9tOiAxNXB4O1xuICAgICAgfVxuICAgICAgLnJlcG9ydHNDb250YWluZXJ7XG4gICAgICAgIG1hcmdpbjogMzBweDtcbiAgICAgIH1cbiAgICAgIC50YWJze1xuICAgICAgICBtYXJnaW46IDQ1cHg7XG4gICAgICB9XG4gICAgICAuc3BhY2V7XG4gICAgICAgIG1hcmdpbi10b3A6IDIwcHg7XG4gICAgICB9XG4gICAgYCxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgUmVwb3J0c0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgcmVwb3J0c0dyb3VwczogUmVwb3J0R3JvdXBzW10gPSBbXTtcbiAgQElucHV0KCkgdXJsUmVwb3J0R3JvdXBzOiBhbnk7XG4gIEBJbnB1dCgpIHJlcG9ydEdyb3VwQnlJZFVybDogYW55O1xuICByZXBvcnRzQnlHcm91cElkOiBSZXBvcnRzQnlHcm91cElkW10gPSBbXTtcbiAgJHN1YnM6IFN1YnNjcmlwdGlvbltdID0gW107XG4gIEBPdXRwdXQoKSBvblZpZXdDbGlja2VkOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBicmVha3BvaW50OiBudW1iZXIgPSAzO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcmVwb3J0U2VydmljZTogUmVwb3J0c1NlcnZpY2UpIHtcbiAgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMubG9hZEdyb3VwcygpO1xuICB9XG5cbiAgbG9hZEdyb3VwcygpOiB2b2lkIHtcbiAgICBjb25zdCBzdWIxID0gdGhpcy5yZXBvcnRTZXJ2aWNlXG4gICAgICAubG9hZEdyb3Vwcyh0aGlzLnVybFJlcG9ydEdyb3VwcylcbiAgICAgIC5zdWJzY3JpYmUoKHJlcykgPT4ge1xuICAgICAgICB0aGlzLnJlcG9ydHNHcm91cHMgPSByZXM7XG4gICAgICAgIHRoaXMuJHN1YnMucHVzaChzdWIxKTtcbiAgICAgIH0pO1xuICB9XG5cbiAgbGlzdFJlcG9ydHNCeUdyb3VwSWQoZ3JvdXBJZDogbnVtYmVyKTogdm9pZCB7XG4gICAgY29uc3Qgc3ViMiA9IHRoaXMucmVwb3J0U2VydmljZVxuICAgICAgLmxpc3RSZXBvcnRzQnlHcm91cElkKHRoaXMucmVwb3J0R3JvdXBCeUlkVXJsLCBncm91cElkKVxuICAgICAgLnN1YnNjcmliZSgocmVzMikgPT4ge1xuICAgICAgICB0aGlzLnJlcG9ydHNCeUdyb3VwSWQgPSByZXMyO1xuICAgICAgfSk7XG4gICAgdGhpcy4kc3Vicy5wdXNoKHN1YjIpO1xuICB9XG5cbiAgb25UYWJDaGFuZ2VkKGV2ZW50OiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLmxpc3RSZXBvcnRzQnlHcm91cElkKHRoaXMucmVwb3J0c0dyb3Vwc1tldmVudF0uaWQpO1xuICB9XG5cbiAgdmlld1JlcG9ydEZpbHRlckRldGFpbHMocmVwb3J0OiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLm9uVmlld0NsaWNrZWQuZW1pdChyZXBvcnQpO1xuICB9XG5cbiAgb25SZXNpemUoZXZlbnQ6IGFueSkge1xuICAgIHRoaXMuYnJlYWtwb2ludCA9IHNoYXJlZEdyaWRMYXlvdXQodHJ1ZSwgZXZlbnQpO1xuICAgIC8vIGNvbnNvbGUubG9nKCdicmVha1BvaW50JywgdGhpcy5icmVha3BvaW50KTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuJHN1YnMuZm9yRWFjaCgoaXRlbSkgPT4gaXRlbS51bnN1YnNjcmliZSgpKTtcbiAgfVxufVxuIl19