API calls this month
- {{callsCurrent}}
- Monthly limit: {{callsMax}}
+ {{callsCurrent | sqxKNumber}}
+ Monthly limit: {{callsMax | sqxKNumber}}
Asset size today
- {{assetsCurrent}}
- Total limit: {{assetsMax}}
+ {{assetsCurrent | sqxFileSize}}
+ Total limit: {{assetsMax | sqxFileSize}}
- {{formatCalls(plan.maxApiCalls)}} API Calls
+ {{plan.maxApiCalls | sqxKNumber}} API Calls
- {{formatSize(plan.maxAssetSize)}} Storage
+ {{plan.maxAssetSize | sqxFileSize}} Storage
{{plan.maxContributors}} Contributors
diff --git a/src/Squidex/app/features/settings/pages/plans/plans-page.component.ts b/src/Squidex/app/features/settings/pages/plans/plans-page.component.ts
index 71345cd2f..fdb019845 100644
--- a/src/Squidex/app/features/settings/pages/plans/plans-page.component.ts
+++ b/src/Squidex/app/features/settings/pages/plans/plans-page.component.ts
@@ -14,7 +14,6 @@ import {
AppsStoreService,
AuthService,
ChangePlanDto,
- FileHelper,
NotificationService,
PlansService,
Version
@@ -80,27 +79,5 @@ export class PlansPageComponent extends AppComponentBase implements OnInit {
this.isDisabled = false;
});
}
-
- public formatSize(count: number): string {
- return FileHelper.fileSize(count);
- }
-
- public formatCalls(count: number): string | null {
- if (count > 1000) {
- count = count / 1000;
-
- if (count < 10) {
- count = Math.round(count * 10) / 10;
- } else {
- count = Math.round(count);
- }
-
- return count + 'k';
- } else if (count < 0) {
- return null;
- } else {
- return count.toString();
- }
- }
}
diff --git a/src/Squidex/app/framework/angular/numbers.pipes.spec.ts b/src/Squidex/app/framework/angular/numbers.pipes.spec.ts
new file mode 100644
index 000000000..bcc786b00
--- /dev/null
+++ b/src/Squidex/app/framework/angular/numbers.pipes.spec.ts
@@ -0,0 +1,30 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Sebastian Stehle. All rights reserved
+ */
+
+import { FileSizePipe, KNumberPipe } from './..';
+
+describe('FileSizePipe', () => {
+ it('should calculate correct human file size', () => {
+ const pipe = new FileSizePipe();
+
+ expect(pipe.transform(50)).toBe('50 B');
+ expect(pipe.transform(1024)).toBe('1.0 kB');
+ expect(pipe.transform(1260000)).toBe('1.2 MB');
+ });
+});
+
+describe('KNumberPipe', () => {
+ it('should calculate correct human string', () => {
+ const pipe = new KNumberPipe();
+
+ expect(pipe.transform(0)).toBe('0');
+ expect(pipe.transform(-1)).toBe('');
+ expect(pipe.transform(50)).toBe('50');
+ expect(pipe.transform(1024)).toBe('1k');
+ expect(pipe.transform(1260000)).toBe('1000k');
+ });
+});
\ No newline at end of file
diff --git a/src/Squidex/app/framework/angular/numbers.pipes.ts b/src/Squidex/app/framework/angular/numbers.pipes.ts
new file mode 100644
index 000000000..129ab650e
--- /dev/null
+++ b/src/Squidex/app/framework/angular/numbers.pipes.ts
@@ -0,0 +1,50 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Sebastian Stehle. All rights reserved
+ */
+
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+ name: 'sqxKNumber',
+ pure: true
+})
+export class KNumberPipe implements PipeTransform {
+ public transform(value: number) {
+ if (value > 1000) {
+ value = value / 1000;
+
+ if (value < 10) {
+ value = Math.round(value * 10) / 10;
+ } else {
+ value = Math.round(value);
+ }
+
+ return value + 'k';
+ } else if (value < 0) {
+ return '';
+ } else {
+ return value.toString();
+ }
+ }
+}
+
+@Pipe({
+ name: 'sqxFileSize',
+ pure: true
+})
+export class FileSizePipe implements PipeTransform {
+ public transform(value: number) {
+ let u = 0, s = 1024;
+
+ while (value >= s || -value >= s) {
+ value /= s;
+ u++;
+ }
+
+ return (u ? value.toFixed(1) + ' ' : value) + ' kMGTPEZY'[u] + 'B';
+ }
+}
+
diff --git a/src/Squidex/app/framework/declarations.ts b/src/Squidex/app/framework/declarations.ts
index bab4a1762..2352082bb 100644
--- a/src/Squidex/app/framework/declarations.ts
+++ b/src/Squidex/app/framework/declarations.ts
@@ -26,6 +26,7 @@ export * from './angular/modal-target.directive';
export * from './angular/modal-view.directive';
export * from './angular/money.pipe';
export * from './angular/name.pipe';
+export * from './angular/numbers.pipes';
export * from './angular/panel.component';
export * from './angular/panel-container.directive';
export * from './angular/parent-link.directive';
diff --git a/src/Squidex/app/framework/module.ts b/src/Squidex/app/framework/module.ts
index fa6a19e8e..b255de2f1 100644
--- a/src/Squidex/app/framework/module.ts
+++ b/src/Squidex/app/framework/module.ts
@@ -24,12 +24,14 @@ import {
DropdownComponent,
DurationPipe,
FileDropDirective,
+ FileSizePipe,
FocusOnInitDirective,
FromNowPipe,
GeolocationEditorComponent,
ImageSourceDirective,
IndeterminateValueDirective,
JsonEditorComponent,
+ KNumberPipe,
LocalStoreService,
LowerCaseInputDirective,
MarkdownEditorComponent,
@@ -83,12 +85,14 @@ import {
DropdownComponent,
DurationPipe,
FileDropDirective,
+ FileSizePipe,
FocusOnInitDirective,
FromNowPipe,
GeolocationEditorComponent,
ImageSourceDirective,
IndeterminateValueDirective,
JsonEditorComponent,
+ KNumberPipe,
LowerCaseInputDirective,
MarkdownEditorComponent,
ModalTargetDirective,
@@ -126,12 +130,14 @@ import {
DropdownComponent,
DurationPipe,
FileDropDirective,
+ FileSizePipe,
FocusOnInitDirective,
FromNowPipe,
GeolocationEditorComponent,
ImageSourceDirective,
IndeterminateValueDirective,
JsonEditorComponent,
+ KNumberPipe,
LowerCaseInputDirective,
MarkdownEditorComponent,
ModalTargetDirective,
diff --git a/src/Squidex/app/framework/services/message-bus.spec.ts b/src/Squidex/app/framework/services/message-bus.spec.ts
index c592ba287..b40b0c406 100644
--- a/src/Squidex/app/framework/services/message-bus.spec.ts
+++ b/src/Squidex/app/framework/services/message-bus.spec.ts
@@ -34,8 +34,8 @@ describe('MessageBus', () => {
lastEvent = event;
});
- messageBus.publish(event1);
- messageBus.publish(event2);
+ messageBus.emit(event1);
+ messageBus.emit(event2);
expect(lastEvent).toBe(event1);
});
diff --git a/src/Squidex/app/framework/services/message-bus.ts b/src/Squidex/app/framework/services/message-bus.ts
index 5951651b4..4bfe3d7a1 100644
--- a/src/Squidex/app/framework/services/message-bus.ts
+++ b/src/Squidex/app/framework/services/message-bus.ts
@@ -21,7 +21,7 @@ export const MessageBusFactory = () => {
export class MessageBus {
private message$ = new Subject();
- public publish(message: T): void {
+ public emit(message: T): void {
const channel = (message.constructor).name;
this.message$.next({ channel: channel, data: message });
diff --git a/src/Squidex/app/shared/components/app-form.component.ts b/src/Squidex/app/shared/components/app-form.component.ts
index 78ff7af98..5123d4e4b 100644
--- a/src/Squidex/app/shared/components/app-form.component.ts
+++ b/src/Squidex/app/shared/components/app-form.component.ts
@@ -54,7 +54,7 @@ export class AppFormComponent {
}
public cancel() {
- this.sendCancelled();
+ this.emitCancelled();
this.resetCreateForm();
}
@@ -69,18 +69,18 @@ export class AppFormComponent {
this.appsStore.createApp(request)
.subscribe(dto => {
this.resetCreateForm();
- this.sendCreated(dto);
+ this.emitCreated(dto);
}, error => {
this.enableCreateForm(error.displayMessage);
});
}
}
- private sendCancelled() {
+ private emitCancelled() {
this.cancelled.emit();
}
- private sendCreated(app: AppDto) {
+ private emitCreated(app: AppDto) {
this.created.emit(app);
}
diff --git a/src/Squidex/app/shared/components/asset.component.html b/src/Squidex/app/shared/components/asset.component.html
index 5a8b228d4..e392bcc6a 100644
--- a/src/Squidex/app/shared/components/asset.component.html
+++ b/src/Squidex/app/shared/components/asset.component.html
@@ -1,15 +1,15 @@
-
- {{fileType}}
+
+ {{asset.fileType}}
- ![]()
+ ![]()
- ![]()
+ ![]()