Dashboard improvements.

backend/i18n/frontend_en.json

@@ -536,7 +536,7 @@
   "dashboard.configSaved": "Configuration saved.",
   "dashboard.contentApi": "Content API",
   "dashboard.contentApiDescription": "OpenAPI 3.0 compatible documentation for your app content.",
-  "dashboard.contentsSummaryCard": "Number of items",
+  "dashboard.contentSummaryCard": "Number of items",
   "dashboard.currentMonthLabel": "This month",
   "dashboard.downloadLog": "Download Log",
   "dashboard.editConfig": "Edit Config",
@@ -544,6 +544,8 @@
   "dashboard.githubCardDescription": "Get the source code from Github and report bugs or ask for support.",
   "dashboard.historyCard": "History",
   "dashboard.pageTitle": "Dashboard",
+  "dashboard.randomCatCard": "Random Cat",
+  "dashboard.randomDogCard": "Random Dog",
   "dashboard.resetConfigConfirmText": "Do you really want to reset the dashboard to the default?",
   "dashboard.resetConfigConfirmTitle": "Reset config",
   "dashboard.schemaNewCard": "New Schema",

backend/i18n/frontend_it.json

@@ -536,7 +536,7 @@
   "dashboard.configSaved": "Configurazione salvata.",
   "dashboard.contentApi": "API dei contenuti",
   "dashboard.contentApiDescription": "Documentazione OpenAPI 3.0 compatibile per i contenuti della tua app.",
-  "dashboard.contentsSummaryCard": "Numero di elementi",
+  "dashboard.contentSummaryCard": "Numero di elementi",
   "dashboard.currentMonthLabel": "Questo mese",
   "dashboard.downloadLog": "Scarica i Log",
   "dashboard.editConfig": "Modifica la configurazione",
@@ -544,6 +544,8 @@
   "dashboard.githubCardDescription": "Ottieni il codice sorgente da GitHub e segnala bug o richiedi assistenza.",
   "dashboard.historyCard": "Cronologia",
   "dashboard.pageTitle": "Dashboard",
+  "dashboard.randomCatCard": "Random Cat",
+  "dashboard.randomDogCard": "Random Dog",
   "dashboard.resetConfigConfirmText": "Sei sicuro di voler riportare la dashboard alle impostazioni predefinite?",
   "dashboard.resetConfigConfirmTitle": "Ripristina la configurazione",
   "dashboard.schemaNewCard": "Nuovo Schema",

backend/i18n/frontend_nl.json

@@ -536,7 +536,7 @@
   "dashboard.configSaved": "Configuratie opgeslagen.",
   "dashboard.contentApi": "Content API",
   "dashboard.contentApiDescription": "OpenAPI 3.0-compatibele documentatie voor uw app-inhoud.",
-  "dashboard.contentsSummaryCard": "Aantal items",
+  "dashboard.contentSummaryCard": "Aantal items",
   "dashboard.currentMonthLabel": "Deze maand",
   "dashboard.downloadLog": "Downloadlogboek",
   "dashboard.editConfig": "Configuratie bewerken",
@@ -544,6 +544,8 @@
   "dashboard.githubCardDescription": "Haal de broncode op van Github en meld bugs of vraag om ondersteuning.",
   "dashboard.historyCard": "Geschiedenis",
   "dashboard.pageTitle": "Dashboard",
+  "dashboard.randomCatCard": "Random Cat",
+  "dashboard.randomDogCard": "Random Dog",
   "dashboard.resetConfigConfirmText": "Wil je echt het dashboard terugzetten naar de standaardinstellingen?",
   "dashboard.resetConfigConfirmTitle": "Reset configuratie",
   "dashboard.schemaNewCard": "Nieuw schema",

backend/i18n/frontend_zh.json

@@ -536,7 +536,7 @@
   "dashboard.configSaved": "配置已保存。",
   "dashboard.contentApi": "内容 API",
   "dashboard.contentApiDescription": "适用于您的应用内容的 OpenAPI 3.0 兼容文档。",
-  "dashboard.contentsSummaryCard": "项目数量",
+  "dashboard.contentSummaryCard": "项目数量",
   "dashboard.currentMonthLabel": "本月",
   "dashboard.downloadLog": "下载日志",
   "dashboard.editConfig": "编辑配置",
@@ -544,6 +544,8 @@
   "dashboard.githubCardDescription": "从 Github 获取源代码并报告错误或寻求支持。",
   "dashboard.historyCard": "历史",
   "dashboard.pageTitle": "仪表盘",
+  "dashboard.randomCatCard": "Random Cat",
+  "dashboard.randomDogCard": "Random Dog",
   "dashboard.resetConfigConfirmText": "您真的要将仪表板重置为默认设置吗？",
   "dashboard.resetConfigConfirmTitle": "重置配置",
   "dashboard.schemaNewCard": "新Schemas",

backend/i18n/source/frontend_en.json

@@ -536,7 +536,7 @@
   "dashboard.configSaved": "Configuration saved.",
   "dashboard.contentApi": "Content API",
   "dashboard.contentApiDescription": "OpenAPI 3.0 compatible documentation for your app content.",
-  "dashboard.contentsSummaryCard": "Number of items",
+  "dashboard.contentSummaryCard": "Number of items",
   "dashboard.currentMonthLabel": "This month",
   "dashboard.downloadLog": "Download Log",
   "dashboard.editConfig": "Edit Config",
@@ -544,6 +544,8 @@
   "dashboard.githubCardDescription": "Get the source code from Github and report bugs or ask for support.",
   "dashboard.historyCard": "History",
   "dashboard.pageTitle": "Dashboard",
+  "dashboard.randomCatCard": "Random Cat",
+  "dashboard.randomDogCard": "Random Dog",
   "dashboard.resetConfigConfirmText": "Do you really want to reset the dashboard to the default?",
   "dashboard.resetConfigConfirmTitle": "Reset config",
   "dashboard.schemaNewCard": "New Schema",

backend/i18n/source/frontend_it.json

@@ -487,7 +487,7 @@
   "dashboard.configSaved": "Configurazione salvata.",
   "dashboard.contentApi": "API dei contenuti",
   "dashboard.contentApiDescription": "Documentazione OpenAPI 3.0 compatibile per i contenuti della tua app.",
-  "dashboard.contentsSummaryCard": "Numero di elementi",
+  "dashboard.contentSummaryCard": "Numero di elementi",
   "dashboard.currentMonthLabel": "Questo mese",
   "dashboard.downloadLog": "Scarica i Log",
   "dashboard.editConfig": "Modifica la configurazione",

backend/i18n/source/frontend_nl.json

@@ -459,7 +459,7 @@
   "dashboard.configSaved": "Configuratie opgeslagen.",
   "dashboard.contentApi": "Content API",
   "dashboard.contentApiDescription": "OpenAPI 3.0-compatibele documentatie voor uw app-inhoud.",
-  "dashboard.contentsSummaryCard": "Aantal items",
+  "dashboard.contentSummaryCard": "Aantal items",
   "dashboard.currentMonthLabel": "Deze maand",
   "dashboard.downloadLog": "Downloadlogboek",
   "dashboard.editConfig": "Configuratie bewerken",

backend/i18n/source/frontend_zh.json

@@ -509,7 +509,7 @@
   "dashboard.configSaved": "配置已保存。",
   "dashboard.contentApi": "内容 API",
   "dashboard.contentApiDescription": "适用于您的应用内容的 OpenAPI 3.0 兼容文档。",
-  "dashboard.contentsSummaryCard": "项目数量",
+  "dashboard.contentSummaryCard": "项目数量",
   "dashboard.currentMonthLabel": "本月",
   "dashboard.downloadLog": "下载日志",
   "dashboard.editConfig": "编辑配置",

frontend/app/features/dashboard/declarations.ts

@@ -18,6 +18,8 @@ export * from './pages/cards/content-summary-card.component';
 export * from './pages/cards/github-card.component';
 export * from './pages/cards/history-card.component';
 export * from './pages/cards/iframe-card.component';
+export * from './pages/cards/random-cat-card.component';
+export * from './pages/cards/random-dog-card.component';
 export * from './pages/cards/schema-card.component';
 export * from './pages/cards/support-card.component';
 export * from './pages/dashboard-config.component';

frontend/app/features/dashboard/module.ts

@@ -10,7 +10,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { SqxFrameworkModule, SqxSharedModule } from '@app/shared';
 import { GridsterModule } from 'angular-gridster2';
 import { ChartModule } from 'angular2-chartjs';
-import { ApiCallsCardComponent, ApiCallsSummaryCardComponent, ApiCardComponent, ApiPerformanceCardComponent, ApiTrafficCardComponent, ApiTrafficSummaryCardComponent, AssetUploadsCountCardComponent, AssetUploadsSizeCardComponent, AssetUploadsSizeSummaryCardComponent, ContentSummaryCardComponent, DashboardConfigComponent, DashboardPageComponent, GithubCardComponent, HistoryCardComponent, IFrameCardComponent, SchemaCardComponent, SupportCardComponent } from './declarations';
+import { ApiCallsCardComponent, ApiCallsSummaryCardComponent, ApiCardComponent, ApiPerformanceCardComponent, ApiTrafficCardComponent, ApiTrafficSummaryCardComponent, AssetUploadsCountCardComponent, AssetUploadsSizeCardComponent, AssetUploadsSizeSummaryCardComponent, ContentSummaryCardComponent, DashboardConfigComponent, DashboardPageComponent, GithubCardComponent, HistoryCardComponent, IFrameCardComponent, RandomCatCardComponent, RandomDogCardComponent, SchemaCardComponent, SupportCardComponent } from './declarations';
 
 const routes: Routes = [
     {
@@ -43,6 +43,8 @@ const routes: Routes = [
         GithubCardComponent,
         HistoryCardComponent,
         IFrameCardComponent,
+        RandomCatCardComponent,
+        RandomDogCardComponent,
         SchemaCardComponent,
         SupportCardComponent,
     ],

frontend/app/features/dashboard/pages/cards/content-summary-card.component.html

@@ -2,7 +2,7 @@
     <div class="card-header">{{options?.name}}</div>
     <div class="card-body">
         <div class="aggregation">
-            <div class="aggregation-label">{{ 'dashboard.contentsSummaryCard' | sqxTranslate }}</div>
+            <div class="aggregation-label">{{ 'dashboard.contentSummaryCard' | sqxTranslate }}</div>
             <div class="aggregation-value">{{snapshot.itemCount}}</div>
         </div>
     </div>

frontend/app/features/dashboard/pages/cards/random-cat-card.component.html

@@ -0,0 +1 @@
+<img src="https://source.unsplash.com/collection/12276674/?query={{random}}" />

frontend/app/features/dashboard/pages/cards/random-cat-card.component.scss

@@ -0,0 +1,7 @@
+img {
+    border-radius: $border-radius;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    width: 100%;
+}

frontend/app/features/dashboard/pages/cards/random-cat-card.component.ts

@@ -0,0 +1,20 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    selector: 'sqx-random-cat-card',
+    styleUrls: ['./random-cat-card.component.scss'],
+    templateUrl: './random-cat-card.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RandomCatCardComponent {
+    public get random() {
+        return new Date().getTime();
+    }
+}

frontend/app/features/dashboard/pages/cards/random-dog-card.component.html

@@ -0,0 +1 @@
+<img src="https://source.unsplash.com/collection/9718726?key={{random}}" />

frontend/app/features/dashboard/pages/cards/random-dog-card.component.scss

@@ -0,0 +1,7 @@
+img {
+    border-radius: $border-radius;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    width: 100%;
+}

frontend/app/features/dashboard/pages/cards/random-dog-card.component.ts

@@ -0,0 +1,20 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    selector: 'sqx-random-dog-card',
+    styleUrls: ['./random-dog-card.component.scss'],
+    templateUrl: './random-dog-card.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RandomDogCardComponent {
+    public get random() {
+        return new Date().getTime();
+    }
+}

frontend/app/features/dashboard/pages/dashboard-config.component.html

@@ -5,12 +5,12 @@
     
     <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="dropdown-item" *ngFor="let item of configOptions">
                 <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 | sqxTranslate}}
+                        {{item.name}}
                     </label>
                 </div>
             </div>

frontend/app/features/dashboard/pages/dashboard-config.component.ts

@@ -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' },
+    // Row 1
-    { cols: 1, rows: 1, x: 1, y: 0, type: 'api', name: 'i18n:dashboard.apiDocumentationCard' },
+    { cols: 1, rows: 1, x: 0, y: 0, name: 'i18n:dashboard.schemasCard', type: 'schemas' },
-    { cols: 1, rows: 1, x: 2, y: 0, type: 'support', name: 'i18n:dashboard.supportCard' },
+    { cols: 1, rows: 1, x: 1, y: 0, name: 'i18n:dashboard.apiDocumentationCard', type: 'api' },
-    { cols: 1, rows: 1, x: 3, y: 0, type: 'github', name: 'i18n:dashboard.githubCard' },
+    { 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' },
-    { 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' },
+    // Row 2
-
+    { cols: 2, rows: 1, x: 0, y: 1, name: 'i18n:dashboard.apiCallsChart', type: 'api-calls' },
-    { cols: 1, rows: 1, x: 0, y: 2, type: 'api-calls-summary', name: 'i18n:dashboard.apiCallsSummaryCard' },
+    { cols: 2, rows: 1, x: 2, y: 1, name: 'i18n:dashboard.apiPerformanceChart', type: 'api-performance' },
-    { 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' },
+    // Row 3
-
+    { cols: 1, rows: 1, x: 0, y: 2, name: 'i18n:dashboard.apiCallsSummaryCard', type: 'api-calls-summary' },
-    { cols: 2, rows: 1, x: 0, y: 3, type: 'asset-uploads-size', name: 'i18n:dashboard.assetTotalSize' },
+    { cols: 2, rows: 1, x: 1, y: 2, name: 'i18n:dashboard.assetUpdloadsCountChart', type: 'asset-uploads-count' },
-    { cols: 2, rows: 1, x: 2, y: 3, type: 'api-traffic', name: 'i18n:dashboard.trafficChart' },
+    { 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' },
+const OPTIONAL_CARDS = [
-    { cols: 2, rows: 1, x: 1, y: 4, type: 'history', name: 'i18n:dashboard.historyCard' },
+    { 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' },
 ];

frontend/app/features/dashboard/pages/dashboard-page.component.html

@@ -26,11 +26,8 @@
                     <ng-container *ngSwitchCase="'api-calls'">
                         <sqx-api-calls-card [app]="app" [usage]="callsUsage"></sqx-api-calls-card>
                     </ng-container>
-                    <ng-container *ngSwitchCase="'api-performance'">
+                    <ng-container *ngSwitchCase="'api-traffic-summary'">                
-                        <sqx-api-performance-card [app]="app" [usage]="callsUsage"
+                        <sqx-api-traffic-summary-card [app]="app" [usage]="callsUsage"></sqx-api-traffic-summary-card>
-                            [isStacked]="isStacked"
-                            (isStackedChange)="changeIsStacked($event)">
-                        </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>
@@ -50,8 +47,17 @@
                             (isStackedChange)="changeIsStacked($event)">
                         </sqx-api-traffic-card>
                     </ng-container>
-                    <ng-container *ngSwitchCase="'api-traffic-summary'">                
+                    <ng-container *ngSwitchCase="'api-performance'">
-                        <sqx-api-traffic-summary-card [app]="app" [usage]="callsUsage"></sqx-api-traffic-summary-card>
+                        <sqx-api-performance-card [app]="app" [usage]="callsUsage"
+                            [isStacked]="isStacked"
+                            (isStackedChange)="changeIsStacked($event)">
+                        </sqx-api-performance-card>
+                    </ng-container>
+                    <ng-container *ngSwitchCase="'random-dog'">
+                        <sqx-random-dog-card></sqx-random-dog-card>
+                    </ng-container>
+                    <ng-container *ngSwitchCase="'random-cat'">
+                        <sqx-random-cat-card></sqx-random-cat-card>
                     </ng-container>
                     <ng-container *ngSwitchCase="'history'">
                         <sqx-history-card [app]="app"></sqx-history-card>