Headless CMS and Content Managment Hub
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

120 lines
5.5 KiB

<sqx-title message="Dashboard"></sqx-title>
<ng-container *ngIf="appsState.selectedApp | async; let app">
<div class="dashboard" @fade>
<div class="dashboard-summary" *ngIf="!isScrolled" @fade>
<h1 class="dashboard-title">Hi {{authState.user?.displayName}}</h1>
<div class="subtext">
Welcome to <strong>{{app.displayName}}</strong> dashboard.
</div>
</div>
<gridster [options]="gridOptions" #grid>
<gridster-item [item]="item" *ngFor="let item of gridConfig; trackBy: trackByItem">
<ng-container [ngSwitch]="item.type">
<ng-container *ngSwitchCase="'schemas'">
<sqx-schema-card
[app]="app">
</sqx-schema-card>
</ng-container>
<ng-container *ngSwitchCase="'api'">
<sqx-api-card
[app]="app">
</sqx-api-card>
</ng-container>
<ng-container *ngSwitchCase="'support'">
<sqx-support-card
[app]="app">
</sqx-support-card>
</ng-container>
<ng-container *ngSwitchCase="'github'">
<sqx-github-card
[app]="app">
</sqx-github-card>
</ng-container>
<ng-container *ngSwitchCase="'api-calls'">
<sqx-api-calls-card
[app]="app" [usage]="callsUsage">
</sqx-api-calls-card>
</ng-container>
<ng-container *ngSwitchCase="'api-performance'">
<sqx-api-performance-card
[isStacked]="isStacked"
(isStackedChange)="changeIsStacked($event)"
[app]="app" [usage]="callsUsage">
</sqx-api-performance-card>
</ng-container>
<ng-container *ngSwitchCase="'api-calls-summary'">
<sqx-api-calls-summary-card
[app]="app" [usage]="callsUsage">
</sqx-api-calls-summary-card>
</ng-container>
<ng-container *ngSwitchCase="'asset-uploads-count'">
<sqx-asset-uploads-count-card
[app]="app" [usage]="storageUsage">
</sqx-asset-uploads-count-card>
</ng-container>
<ng-container *ngSwitchCase="'asset-uploads-size-summary'">
<sqx-asset-uploads-size-summary-card
[app]="app" [usage]="storageCurrent">
</sqx-asset-uploads-size-summary-card>
</ng-container>
<ng-container *ngSwitchCase="'asset-uploads-size'">
<sqx-asset-uploads-size-card
[app]="app" [usage]="storageUsage">
</sqx-asset-uploads-size-card>
</ng-container>
<ng-container *ngSwitchCase="'api-traffic'">
<sqx-api-traffic-card
[isStacked]="isStacked"
(isStackedChange)="changeIsStacked($event)"
[app]="app" [usage]="callsUsage">
</sqx-api-traffic-card>
</ng-container>
<ng-container *ngSwitchCase="'history'">
<sqx-history-card
[app]="app">
</sqx-history-card>
</ng-container>
</ng-container>
</gridster-item>
</gridster>
<div class="dashboard-settings">
<button type="button" class="btn settings-button" (click)="gridModal.toggle()" #buttonSettings>
<i class="icon-settings"></i>
</button>
<ng-container *sqxModal="gridModal">
<div class="dropdown-menu" [sqxAnchoredTo]="buttonSettings" @fade position="bottom-right">
<div class="dropdown-item" *ngFor="let item of allItems">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="field_{{item.type}}"
[ngModel]="isSelected(item)"
(ngModelChange)="addOrRemove(item)" />
<label class="form-check-label" for="field_{{item.type}}">
{{item.name}}
</label>
</div>
</div>
<div class="dropdown-divider"></div>
<a class="dropdown-item" (click)="saveConfig()">Save</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item dropdown-item-delete" (beforeClick)="gridModal.hide()"
(sqxConfirmClick)="resetConfig()"
confirmTitle="Reset config"
confirmText="Do you really want to reset the dashboard to the default?">
Reset
</a>
</div>
</ng-container>
</div>
</div>
</ng-container>