|
|
|
@ -6,7 +6,7 @@ |
|
|
|
*/ |
|
|
|
|
|
|
|
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; |
|
|
|
import { AppDto, AppsState, AuthService, DialogModel, DialogService, fadeAnimation, ModalModel, Types, UIState } from '@app/shared'; |
|
|
|
import { AppDto, AppsState, AuthService, DialogModel, DialogService, fadeAnimation, LocalizerService, ModalModel, Types, UIState } from '@app/shared'; |
|
|
|
import { GridsterItem } from 'angular-gridster2'; |
|
|
|
import { take } from 'rxjs/operators'; |
|
|
|
|
|
|
|
@ -31,7 +31,7 @@ export class DashboardConfigComponent implements OnChanges { |
|
|
|
@Output() |
|
|
|
public configChange = new EventEmitter<GridsterItem[]>(); |
|
|
|
|
|
|
|
public configDefaults = DEFAULT_CONFIG; |
|
|
|
public configOptions: ReadonlyArray<GridsterItem>; |
|
|
|
|
|
|
|
public expertDialog = new DialogModel(); |
|
|
|
public expertConfig: GridsterItem[]; |
|
|
|
@ -43,7 +43,14 @@ export class DashboardConfigComponent implements OnChanges { |
|
|
|
public readonly authState: AuthService, |
|
|
|
private readonly dialogs: DialogService, |
|
|
|
private readonly uiState: UIState, |
|
|
|
localizer: LocalizerService, |
|
|
|
) { |
|
|
|
this.configOptions = |
|
|
|
[...OPTIONAL_CARDS, ...DEFAULT_CONFIG].map(item => { |
|
|
|
const name = localizer.getOrKey(item.name); |
|
|
|
|
|
|
|
return { ...item, name }; |
|
|
|
}).sortByString(x => x.name); |
|
|
|
} |
|
|
|
|
|
|
|
public ngOnChanges(changes: SimpleChanges) { |
|
|
|
@ -95,7 +102,17 @@ export class DashboardConfigComponent implements OnChanges { |
|
|
|
if (current) { |
|
|
|
this.config.splice(this.config.indexOf(current), 1); |
|
|
|
} else { |
|
|
|
this.config.push(Types.clone(item)); |
|
|
|
let y = 0; |
|
|
|
|
|
|
|
for (const item of this.config) { |
|
|
|
y = Math.max(item.y, y); |
|
|
|
} |
|
|
|
|
|
|
|
const newOption = Types.clone(item); |
|
|
|
newOption.x = 0; |
|
|
|
newOption.y = y + 1; |
|
|
|
|
|
|
|
this.config.push(newOption); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -105,21 +122,32 @@ export class DashboardConfigComponent implements OnChanges { |
|
|
|
} |
|
|
|
|
|
|
|
const DEFAULT_CONFIG: GridsterItem[] = [ |
|
|
|
{ cols: 1, rows: 1, x: 0, y: 0, type: 'schemas', name: 'i18n:dashboard.schemasCard' }, |
|
|
|
{ cols: 1, rows: 1, x: 1, y: 0, type: 'api', name: 'i18n:dashboard.apiDocumentationCard' }, |
|
|
|
{ cols: 1, rows: 1, x: 2, y: 0, type: 'support', name: 'i18n:dashboard.supportCard' }, |
|
|
|
{ cols: 1, rows: 1, x: 3, y: 0, type: 'github', name: 'i18n:dashboard.githubCard' }, |
|
|
|
|
|
|
|
{ cols: 2, rows: 1, x: 0, y: 1, type: 'api-calls', name: 'i18n:dashboard.apiCallsChart' }, |
|
|
|
{ cols: 2, rows: 1, x: 2, y: 1, type: 'api-performance', name: 'i18n:dashboard.apiPerformanceChart' }, |
|
|
|
|
|
|
|
{ cols: 1, rows: 1, x: 0, y: 2, type: 'api-calls-summary', name: 'i18n:dashboard.apiCallsSummaryCard' }, |
|
|
|
{ cols: 2, rows: 1, x: 1, y: 2, type: 'asset-uploads-count', name: 'i18n:dashboard.assetUpdloadsCountChart' }, |
|
|
|
{ cols: 1, rows: 1, x: 2, y: 2, type: 'asset-uploads-size-summary', name: 'i18n:dashboard.assetUploadsSizeChart' }, |
|
|
|
|
|
|
|
{ cols: 2, rows: 1, x: 0, y: 3, type: 'asset-uploads-size', name: 'i18n:dashboard.assetTotalSize' }, |
|
|
|
{ cols: 2, rows: 1, x: 2, y: 3, type: 'api-traffic', name: 'i18n:dashboard.trafficChart' }, |
|
|
|
// Row 1
|
|
|
|
{ cols: 1, rows: 1, x: 0, y: 0, name: 'i18n:dashboard.schemasCard', type: 'schemas' }, |
|
|
|
{ cols: 1, rows: 1, x: 1, y: 0, name: 'i18n:dashboard.apiDocumentationCard', type: 'api' }, |
|
|
|
{ cols: 1, rows: 1, x: 2, y: 0, name: 'i18n:dashboard.supportCard', type: 'support' }, |
|
|
|
{ cols: 1, rows: 1, x: 3, y: 0, name: 'i18n:dashboard.githubCard', type: 'github' }, |
|
|
|
|
|
|
|
// Row 2
|
|
|
|
{ cols: 2, rows: 1, x: 0, y: 1, name: 'i18n:dashboard.apiCallsChart', type: 'api-calls' }, |
|
|
|
{ cols: 2, rows: 1, x: 2, y: 1, name: 'i18n:dashboard.apiPerformanceChart', type: 'api-performance' }, |
|
|
|
|
|
|
|
// Row 3
|
|
|
|
{ cols: 1, rows: 1, x: 0, y: 2, name: 'i18n:dashboard.apiCallsSummaryCard', type: 'api-calls-summary' }, |
|
|
|
{ cols: 2, rows: 1, x: 1, y: 2, name: 'i18n:dashboard.assetUpdloadsCountChart', type: 'asset-uploads-count' }, |
|
|
|
{ cols: 1, rows: 1, x: 2, y: 2, name: 'i18n:dashboard.assetUploadsSizeChart', type: 'asset-uploads-size-summary' }, |
|
|
|
|
|
|
|
// Row 4
|
|
|
|
{ cols: 2, rows: 1, x: 0, y: 3, name: 'i18n:dashboard.assetTotalSize', type: 'asset-uploads-size' }, |
|
|
|
{ cols: 2, rows: 1, x: 2, y: 3, name: 'i18n:dashboard.trafficChart', type: 'api-traffic' }, |
|
|
|
|
|
|
|
// Row 5
|
|
|
|
{ cols: 1, rows: 1, x: 0, y: 4, name: 'i18n:dashboard.trafficSummaryCard', type: 'api-traffic-summary' }, |
|
|
|
{ cols: 2, rows: 1, x: 1, y: 4, name: 'i18n:dashboard.historyCard', type: 'history' }, |
|
|
|
]; |
|
|
|
|
|
|
|
{ cols: 1, rows: 1, x: 0, y: 4, type: 'api-traffic-summary', name: 'i18n:dashboard.trafficSummaryCard' }, |
|
|
|
{ cols: 2, rows: 1, x: 1, y: 4, type: 'history', name: 'i18n:dashboard.historyCard' }, |
|
|
|
const OPTIONAL_CARDS = [ |
|
|
|
{ cols: 1, rows: 1, x: 0, y: 0, name: 'i18n:dashboard.randomCatCard', type: 'random-cat' }, |
|
|
|
{ cols: 1, rows: 1, x: 0, y: 0, name: 'i18n:dashboard.randomDogCard', type: 'random-dog' }, |
|
|
|
{ cols: 1, rows: 1, x: 0, y: 0, name: 'i18n:dashboard.contentSummaryCard', type: 'content-summary' }, |
|
|
|
]; |
|
|
|
|
Sebastian
4 years ago