Reload buttons.

src/Squidex/app/features/administration/pages/users/users-page.component.html

@@ -4,6 +4,12 @@
     <div class="panel-header">
         <div class="panel-title-row">
             <div class="float-right">
+                <button class="btn btn-simple" (click)="load(true)" title="Refresh Users (CTRL + SHIFT + R)">
+                    <i class="icon-reset"></i> Refresh
+                </button>
+
+                <sqx-shortcut keys="ctrl+shift+r" (trigger)="load(true)"></sqx-shortcut>
+
                 <form class="form-inline" (ngSubmit)="search()">
                     <input class="form-control" [formControl]="usersFilter" placeholder="Search for user" />
                 </form>

src/Squidex/app/features/administration/pages/users/users-page.component.scss

@@ -5,6 +5,10 @@
     text-align: right;
 }
 
+.form-inline {
+    display: inline-block;
+}
+
 .user {
     &-name,
     &-email {

src/Squidex/app/features/administration/pages/users/users-page.component.ts

@@ -51,11 +51,15 @@ export class UsersPageComponent extends ComponentBase implements OnInit {
         this.load();
     }
 
-    private load() {
+    private load(showInfo = false) {
         this.userManagementService.getUsers(this.usersPager.pageSize, this.usersPager.skip, this.usersQuery)
             .subscribe(dtos => {
                 this.usersItems = ImmutableArray.of(dtos.items);
                 this.usersPager = this.usersPager.setCount(dtos.total);
+
+                if (showInfo) {
+                    this.notifyInfo('Users reloaded.');
+                }
             }, error => {
                 this.notifyError(error);
             });

src/Squidex/app/features/assets/pages/assets-page.component.html

@@ -4,6 +4,12 @@
     <div class="panel-header">
         <div class="panel-title-row">
             <div class="float-right">
+                <button class="btn btn-simple" (click)="load(true)" title="Refresh Assets (CTRL + SHIFT + R)">
+                    <i class="icon-reset"></i> Refresh
+                </button>
+
+                <sqx-shortcut keys="ctrl+shift+r" (trigger)="load(true)"></sqx-shortcut>
+
                 <form class="form-inline" (ngSubmit)="search()">
                     <input class="form-control" [formControl]="assetsFilter" placeholder="Search for assets" />
                 </form>

src/Squidex/app/features/assets/pages/assets-page.component.scss

@@ -31,6 +31,10 @@
     }
 }
 
+.form-inline {
+    display: inline-block;
+}
+
 .btn {
     cursor: pointer;
 }

src/Squidex/app/features/assets/pages/assets-page.component.ts

@@ -72,12 +72,16 @@ export class AssetsPageComponent extends AppComponentBase implements OnDestroy,
         this.load();
     }
 
-    private load() {
+    private load(showInfo = false) {
         this.appName()
             .switchMap(app => this.assetsService.getAssets(app, this.assetsPager.pageSize, this.assetsPager.skip, this.assertQuery))
             .subscribe(dtos => {
                 this.assetsItems = ImmutableArray.of(dtos.items);
                 this.assetsPager = this.assetsPager.setCount(dtos.total);
+
+                if (showInfo) {
+                    this.notifyInfo('Assets reloaded.');
+                }
             }, error => {
                 this.notifyError(error);
             });

src/Squidex/app/features/content/pages/content/content-page.component.ts

@@ -46,7 +46,7 @@ export class ContentPageComponent extends AppComponentBase implements OnDestroy,
     public contentFormSubmitted = false;
     public contentForm: FormGroup;
     public contentData: any = null;
-    public contentId: string | undefined;
+    public contentId: string | null = null;
 
     public isNewMode = true;
 

src/Squidex/app/features/content/pages/contents/contents-page.component.html

@@ -4,6 +4,12 @@
     <div class="panel-header">
         <div class="panel-title-row">
             <div class="float-right">
+                <button class="btn btn-simple" (click)="load(true)" title="Refresh Contents (CTRL + SHIFT + R)">
+                    <i class="icon-reset"></i> Refresh
+                </button>
+
+                <sqx-shortcut keys="ctrl+shift+r" (trigger)="load(true)"></sqx-shortcut>
+
                 <form class="form-inline" (ngSubmit)="search()">
                     <input class="form-control" [formControl]="contentsFilter" placeholder="Search for content" />
                 </form>

src/Squidex/app/features/content/pages/contents/contents-page.component.ts

@@ -159,13 +159,16 @@ export class ContentsPageComponent extends AppComponentBase implements OnDestroy
         }
     }
 
-    private load() {
+    private load(showInfo = false) {
         this.appName()
             .switchMap(app => this.contentsService.getContents(app, this.schema.name, this.contentsPager.pageSize, this.contentsPager.skip, this.contentsQuery))
                .subscribe(dtos => {
                     this.contentItems = ImmutableArray.of(dtos.items);
-
                     this.contentsPager = this.contentsPager.setCount(dtos.total);
+
+                    if (showInfo) {
+                        this.notifyInfo('Contents reloaded.');
+                    }
                 }, error => {
                     this.notifyError(error);
                 });

src/Squidex/app/framework/angular/image-source.directive.ts

@@ -14,7 +14,7 @@ import { MathHelper } from './../utils/math-helper';
 })
 export class ImageSourceComponent implements OnChanges, OnInit, AfterViewInit {
     private retries = 0;
-    private query = MathHelper.guid();
+    private query: string | null = null;
 
     @Input('sqxImageSource')
     public imageSource: string;
@@ -32,6 +32,7 @@ export class ImageSourceComponent implements OnChanges, OnInit, AfterViewInit {
     }
 
     public ngOnChanges() {
+        this.query = null;
         this.retries = 0;
 
         this.setImageSource();
@@ -86,7 +87,11 @@ export class ImageSourceComponent implements OnChanges, OnInit, AfterViewInit {
         const h = Math.round(size.height);
 
         if (w > 0 && h > 0) {
-            const source = `${this.imageSource}&width=${w}&height=${h}&mode=Crop&q=${this.query}`;
+            let source = `${this.imageSource}&width=${w}&height=${h}&mode=Crop`;
+
+            if (this.query !== null) {
+                source += `q=${this.query}`;
+            }
 
             this.renderer.setElementAttribute(this.element.nativeElement, 'src', source);
         }

src/Squidex/app/shared/guards/resolve-app-languages.guard.spec.ts

@@ -15,8 +15,11 @@ import { RouterMockup } from './router-mockup';
 
 describe('ResolveAppLanguagesGuard', () => {
     const route = {
-        params: {
-            appName: 'my-app'
+        params: { },
+        parent: {
+            params: {
+                appName: 'my-app'
+            }
         }
     };
 
@@ -64,7 +67,7 @@ describe('ResolveAppLanguagesGuard', () => {
             });
     });
 
-    it('should return schema if loading succeeded', (done) => {
+    it('should return languages if loading succeeded', (done) => {
         const languages: AppLanguageDto[] = [];
 
         appLanguagesService.setup(x => x.getLanguages('my-app'))

src/Squidex/app/shared/guards/resolve-content.guard.spec.ts

@@ -74,7 +74,7 @@ describe('ResolveContentGuard', () => {
             });
     });
 
-    it('should return schema if loading succeeded', (done) => {
+    it('should return content if loading succeeded', (done) => {
         const schema = {};
 
         appsStore.setup(x => x.getContent('my-app', 'my-schema', '123'))

src/Squidex/app/shared/services/schemas.service.ts

@@ -71,7 +71,7 @@ export class SchemaDto {
     constructor(
         public readonly id: string,
         public readonly name: string,
-        public readonly label: string | undefined,
+        public readonly label: string | null,
         public readonly isPublished: boolean,
         public readonly createdBy: string,
         public readonly lastModifiedBy: string,
@@ -113,9 +113,9 @@ export class FieldDto {
 export abstract class FieldPropertiesDto {
     constructor(
         public readonly fieldType: string,
-        public readonly label: string | undefined,
-        public readonly hints: string | undefined,
-        public readonly placeholder: string | undefined,
+        public readonly label: string | null,
+        public readonly hints: string | null,
+        public readonly placeholder: string | null,
         public readonly isRequired: boolean,
         public readonly isListField: boolean,
         public readonly isLocalizable: boolean
@@ -124,7 +124,7 @@ export abstract class FieldPropertiesDto {
 }
 
 export class StringFieldPropertiesDto extends FieldPropertiesDto {
-    constructor(label: string | undefined, hints: string | undefined, placeholder: string | undefined,
+    constructor(label: string | null, hints: string | null, placeholder: string | null,
         isRequired: boolean,
         isListField: boolean,
         isLocalizable: boolean,
@@ -141,7 +141,7 @@ export class StringFieldPropertiesDto extends FieldPropertiesDto {
 }
 
 export class NumberFieldPropertiesDto extends FieldPropertiesDto {
-    constructor(label: string | undefined, hints: string | undefined, placeholder: string | undefined,
+    constructor(label: string | null, hints: string | null, placeholder: string | null,
         isRequired: boolean,
         isListField: boolean,
         isLocalizable: boolean,
@@ -156,7 +156,7 @@ export class NumberFieldPropertiesDto extends FieldPropertiesDto {
 }
 
 export class DateTimeFieldPropertiesDto extends FieldPropertiesDto {
-    constructor(label: string | undefined, hints: string | undefined, placeholder: string | undefined,
+    constructor(label: string | null, hints: string | null, placeholder: string | null,
         isRequired: boolean,
         isListField: boolean,
         isLocalizable: boolean,
@@ -171,7 +171,7 @@ export class DateTimeFieldPropertiesDto extends FieldPropertiesDto {
 }
 
 export class BooleanFieldPropertiesDto extends FieldPropertiesDto {
-    constructor(label: string | undefined, hints: string | undefined, placeholder: string | undefined,
+    constructor(label: string | null, hints: string | null, placeholder: string | null,
         isRequired: boolean,
         isListField: boolean,
         isLocalizable: boolean,
@@ -183,7 +183,7 @@ export class BooleanFieldPropertiesDto extends FieldPropertiesDto {
 }
 
 export class GeolocationFieldPropertiesDto extends FieldPropertiesDto {
-    constructor(label: string | undefined, hints: string | undefined, placeholder: string | undefined,
+    constructor(label: string | null, hints: string | null, placeholder: string | null,
         isRequired: boolean,
         isListField: boolean,
         isLocalizable: boolean,
@@ -194,7 +194,7 @@ export class GeolocationFieldPropertiesDto extends FieldPropertiesDto {
 }
 
 export class AssetsFieldPropertiesDto extends FieldPropertiesDto {
-    constructor(label: string | undefined, hints: string | undefined, placeholder: string | undefined,
+    constructor(label: string | null, hints: string | null, placeholder: string | null,
         isRequired: boolean,
         isListField: boolean,
         isLocalizable: boolean
@@ -204,7 +204,7 @@ export class AssetsFieldPropertiesDto extends FieldPropertiesDto {
 }
 
 export class JsonFieldPropertiesDto extends FieldPropertiesDto {
-    constructor(label: string | undefined, hints: string | undefined, placeholder: string | undefined,
+    constructor(label: string | null, hints: string | null, placeholder: string | null,
         isRequired: boolean,
         isListField: boolean,
         isLocalizable: boolean

src/Squidex/app/shared/utils/file-helper.spec.ts

@@ -0,0 +1,72 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Sebastian Stehle. All rights reserved
+ */
+
+import { ApiUrlConfig, Version } from 'framework';
+
+import { FileHelper } from './file-helper';
+import { AssetDto } from './../services/assets.service';
+
+describe('FileHelper', () => {
+    it('should calculate correct human file size', () => {
+        expect(FileHelper.fileSize(50)).toBe('50 B');
+        expect(FileHelper.fileSize(1024)).toBe('1.0 kB');
+        expect(FileHelper.fileSize(1260000)).toBe('1.2 MB');
+    });
+
+    it('should calculate icon', () => {
+        expect(FileHelper.fileIcon('video/mp4')).toBe('/images/asset_video.png');
+        expect(FileHelper.fileIcon('application/text')).toBe('/images/asset_generic.png');
+        expect(FileHelper.fileIcon('application/msword')).toBe('/images/asset_doc.png');
+    });
+
+    it('should calculate file type', () => {
+        expect(FileHelper.fileType('video/mp4', 'test.mp4')).toBe('mp4');
+        expect(FileHelper.fileType('video/mp4', undefined)).toBe('mp4');
+        expect(FileHelper.fileType('application/text', 'test.txt')).toBe('txt');
+        expect(FileHelper.fileType('application/text', undefined)).toBe('text');
+
+        expect(FileHelper.fileType('invalid', undefined)).toBeUndefined();
+        expect(FileHelper.fileType(undefined, undefined)).toBeUndefined();
+    });
+
+    it('should calculate asset info for image asset', () => {
+        const asset = new AssetDto('1', undefined, undefined, undefined, undefined, 'File.png', 50, 1, 'image/png', true, 100, 20, undefined);
+
+        expect(FileHelper.assetInfo(asset)).toBe('100x20px, 50 B');
+    });
+
+    it('should calculate asset info for text asset', () => {
+        const asset = new AssetDto('1', undefined, undefined, undefined, undefined, 'File.txt', 50, 1, 'text/plain', false, 0, 0, undefined);
+
+        expect(FileHelper.assetInfo(asset)).toBe('50 B');
+    });
+
+    it('should return empty string for invalid asset', () => {
+        expect(FileHelper.assetInfo(undefined)).toBe('');
+        expect(FileHelper.assetInfo(null)).toBe('');
+    });
+
+    it('should return asset name', () => {
+        const asset = new AssetDto('1', undefined, undefined, undefined, undefined, 'File.txt', 50, 1, 'text/plain', false, 0, 0, undefined);
+
+        expect(FileHelper.assetName(asset)).toBe('File.txt');
+    });
+
+    it('should return preview url', () => {
+        const apiUrl = new ApiUrlConfig('my/');
+        const asset = new AssetDto('1', undefined, undefined, undefined, undefined, 'File.txt', 50, 1, 'text/plain', false, 0, 0, new Version('123'));
+
+        expect(FileHelper.assetPreviewUrl(apiUrl, asset)).toBe('my/api/assets/1?version=123');
+    });
+
+    it('should return download url', () => {
+        const apiUrl = new ApiUrlConfig('my/');
+        const asset = new AssetDto('1', undefined, undefined, undefined, undefined, 'File.txt', 50, 1, 'text/plain', false, 0, 0, new Version('123'));
+
+        expect(FileHelper.assetUrl(apiUrl, asset).startsWith('my/api/assets/1?q=')).toBeTruthy();
+    });
+});