mirror of https://github.com/Squidex/squidex.git
Sebastian
6 years ago
9 changed files with 218 additions and 115 deletions
@ -0,0 +1,55 @@ |
|||
<ng-container *ngIf="config"> |
|||
<button type="button" class="btn settings-button" (click)="dropdownModal.toggle()" #buttonSettings> |
|||
<i class="icon-settings"></i> |
|||
</button> |
|||
|
|||
<ng-container *sqxModal="dropdownModal"> |
|||
<div class="dropdown-menu" [sqxAnchoredTo]="buttonSettings" @fade position="bottom-right"> |
|||
<div class="dropdown-item" *ngFor="let item of configDefaults"> |
|||
<div class="form-check"> |
|||
<input class="form-check-input" type="checkbox" id="field_{{item.type}}" |
|||
[ngModel]="isSelected(item)" |
|||
(ngModelChange)="addOrRemove(item, $event)" /> |
|||
|
|||
<label class="form-check-label" for="field_{{item.type}}"> |
|||
{{item.name}} |
|||
</label> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="dropdown-divider"></div> |
|||
|
|||
<a class="dropdown-item" (click)="startExpertMode()">Expert Mode</a> |
|||
<a class="dropdown-item" (click)="saveConfig()">Save</a> |
|||
|
|||
<div class="dropdown-divider"></div> |
|||
|
|||
<a class="dropdown-item dropdown-item-delete" (beforeClick)="dropdownModal.hide()" |
|||
(sqxConfirmClick)="resetConfig()" |
|||
confirmTitle="Reset config" |
|||
confirmText="Do you really want to reset the dashboard to the default?"> |
|||
Reset |
|||
</a> |
|||
</div> |
|||
</ng-container> |
|||
|
|||
|
|||
<ng-container *sqxModal="expertDialog"> |
|||
<sqx-modal-dialog (close)="expertDialog.hide()" fullHeight="true" size="lg"> |
|||
<ng-container title> |
|||
Edit Config |
|||
</ng-container> |
|||
|
|||
<ng-container content> |
|||
<div class="json-editor"> |
|||
<sqx-json-editor [noBorder]="true" [(ngModel)]="expertConfig"></sqx-json-editor> |
|||
</div> |
|||
</ng-container> |
|||
|
|||
<ng-container footer> |
|||
<button type="button" class="btn btn-secondary" (click)="expertDialog.hide()">Cancel</button> |
|||
<button type="button" class="btn btn-primary" (click)="completeExpertMode()">Save</button> |
|||
</ng-container> |
|||
</sqx-modal-dialog> |
|||
</ng-container> |
|||
</ng-container> |
|||
@ -0,0 +1,5 @@ |
|||
.json-editor ::ng-deep { |
|||
.editor { |
|||
@include absolute(0, 0, 0, 0); |
|||
} |
|||
} |
|||
@ -0,0 +1,125 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
// tslint:disable: readonly-array
|
|||
|
|||
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; |
|||
import { AppDto, AppsState, AuthService, DialogModel, DialogService, fadeAnimation, ModalModel, Types, UIState } from '@app/shared'; |
|||
import { GridsterItem } from 'angular-gridster2'; |
|||
import { take } from 'rxjs/operators'; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-dashboard-config', |
|||
styleUrls: ['./dashboard-config.component.scss'], |
|||
templateUrl: './dashboard-config.component.html', |
|||
animations: [ |
|||
fadeAnimation |
|||
] |
|||
}) |
|||
export class DashboardConfigComponent implements OnChanges { |
|||
@Input() |
|||
public app: AppDto[]; |
|||
|
|||
@Input() |
|||
public config: GridsterItem[]; |
|||
|
|||
@Output() |
|||
public configChange = new EventEmitter<GridsterItem[]>(); |
|||
|
|||
public configDefaults = DEFAULT_CONFIG; |
|||
|
|||
public expertDialog = new DialogModel(); |
|||
public expertConfig: GridsterItem[]; |
|||
|
|||
public dropdownModal = new ModalModel(); |
|||
|
|||
constructor( |
|||
public readonly appsState: AppsState, |
|||
public readonly authState: AuthService, |
|||
private readonly dialogs: DialogService, |
|||
private readonly uiState: UIState |
|||
) { |
|||
} |
|||
|
|||
public ngOnChanges(changes: SimpleChanges) { |
|||
if (changes['app']) { |
|||
this.uiState.getUser('dashboard.grid', DEFAULT_CONFIG).pipe(take(1)) |
|||
.subscribe(dto => { |
|||
this.setConfig(dto); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
private setConfig(config: any) { |
|||
if (!Types.isArrayOfObject(config)) { |
|||
config = DEFAULT_CONFIG; |
|||
} |
|||
|
|||
this.configChange.emit(Types.clone(config)); |
|||
} |
|||
|
|||
public startExpertMode() { |
|||
this.dropdownModal.hide(); |
|||
|
|||
this.expertConfig = Types.clone(this.config); |
|||
this.expertDialog.show(); |
|||
} |
|||
|
|||
public completeExpertMode() { |
|||
this.setConfig(this.expertConfig); |
|||
|
|||
this.expertConfig = null!; |
|||
this.expertDialog.hide(); |
|||
|
|||
this.saveConfig(); |
|||
} |
|||
|
|||
public resetConfig() { |
|||
this.setConfig(Types.clone(DEFAULT_CONFIG)); |
|||
|
|||
this.saveConfig(); |
|||
} |
|||
|
|||
public saveConfig() { |
|||
this.uiState.set('dashboard.grid', this.config, true); |
|||
|
|||
this.dialogs.notifyInfo('Configuration saved.'); |
|||
} |
|||
|
|||
public addOrRemove(item: GridsterItem) { |
|||
const current = this.config.find(x => x.type === item.type); |
|||
|
|||
if (current) { |
|||
this.config.splice(this.config.indexOf(current), 1); |
|||
} else { |
|||
this.config.push(Types.clone(item)); |
|||
} |
|||
} |
|||
|
|||
public isSelected(item: GridsterItem) { |
|||
return this.config.find(x => x.type === item.type); |
|||
} |
|||
} |
|||
|
|||
const DEFAULT_CONFIG: GridsterItem[] = [ |
|||
{ cols: 1, rows: 1, x: 0, y: 0, type: 'schemas', name: 'Schema' }, |
|||
{ cols: 1, rows: 1, x: 1, y: 0, type: 'api', name: 'API Documentation' }, |
|||
{ cols: 1, rows: 1, x: 2, y: 0, type: 'support', name: 'Support' }, |
|||
{ cols: 1, rows: 1, x: 3, y: 0, type: 'github', name: 'Github' }, |
|||
|
|||
{ cols: 2, rows: 1, x: 0, y: 1, type: 'api-calls', name: 'API Calls Chart' }, |
|||
{ cols: 2, rows: 1, x: 2, y: 1, type: 'api-performance', name: 'API Performance Chart' }, |
|||
|
|||
{ cols: 1, rows: 1, x: 0, y: 2, type: 'api-calls-summary', name: 'API Calls Summary' }, |
|||
{ cols: 2, rows: 1, x: 1, y: 2, type: 'asset-uploads-count', name: 'Asset Uploads Count Chart' }, |
|||
{ cols: 1, rows: 1, x: 2, y: 2, type: 'asset-uploads-size-summary', name: 'Asset Uploads Size Chart' }, |
|||
|
|||
{ cols: 2, rows: 1, x: 0, y: 3, type: 'asset-uploads-size', name: 'Asset Total Storage Size' }, |
|||
{ cols: 2, rows: 1, x: 2, y: 3, type: 'api-traffic', name: 'API Traffic Chart' }, |
|||
|
|||
{ cols: 2, rows: 1, x: 0, y: 4, type: 'history', name: 'History' } |
|||
]; |
|||
Loading…
Reference in new issue