Asset list shows full mime type for Microsoft Documents. #15

9 years ago · e39d01dbcc
4 changed files with 130 additions and 96 deletions
--- a/src/Squidex/app/features/assets/pages/asset.component.html
+++ b/src/Squidex/app/features/assets/pages/asset.component.html
@ -3,7 +3,7 @@
        <div *ngIf="asset && progress == 0" [@fade]>
            <div class="card-block">
                <div class="file-preview">
-                    <span class="file-type">
+                    <span class="file-type" *ngIf="fileType">
                        {{fileType}}
                    </span>
                    
@ -20,14 +20,14 @@
                        <a class="file-edit" (click)="renameDialog.show()">
                            <i class="icon-pencil"></i>
                        </a>
-                        <a class="file-download" [attr.href]="downloadUrl" target="_blank">
+                        <a class="file-download" [attr.href]="fileUrl" target="_blank">
                            <i class="icon-download"></i>
                        </a>
                        <a class="file-delete" (click)="deleting.emit(asset)">
                            <i class="icon-delete"></i>
                        </a>

-                        <span class="file-overlay-type">
+                        <span class="file-overlay-type" *ngIf="fileType">
                            {{fileType}}
                        </span>
                        <span class="file-user">
--- a/src/Squidex/app/features/assets/pages/asset.component.ts
+++ b/src/Squidex/app/features/assets/pages/asset.component.ts
@ -19,8 +19,8 @@ import {
    AuthService,
    DateTime,
    fadeAnimation,
+    FileHelper,
    ModalView,
-    MathHelper,
    NotificationService,
    UpdateAssetDto,
    UsersProviderService,
@ -36,7 +36,6 @@ import {
    ]
 })
 export class AssetComponent extends AppComponentBase implements OnInit {
-    private cacheBuster = MathHelper.guid();
    private previewRetries = 0;
    private version: Version;

@ -66,40 +65,12 @@ export class AssetComponent extends AppComponentBase implements OnInit {
    public failed = new EventEmitter();

    public progress = 0;
-
-    public get previewUrl(): string {
-        return this.apiUrl.buildUrl(`api/assets/${this.asset.id}?width=230&height=155&mode=Crop&version=${this.version.value}&q=${this.cacheBuster}`);
-    }
-
-    public get downloadUrl(): string {
-        return this.apiUrl.buildUrl(`api/assets/${this.asset.id}?q=${this.cacheBuster}`);
-    }
-
-    public get fileType(): string {
-        return this.asset.mimeType.split('/')[1];
-    }
-
-    public get fileName(): string {
-        return this.asset.fileName;
-    }
-
-    public get fileIcon(): string {
-        return fileIcon(this.asset.mimeType);
-    }
-
-    public get fileInfo(): string {
-        let result = '';
-
-        if (this.asset != null) {
-            if (this.asset.pixelWidth) {
-                result = `${this.asset.pixelWidth}x${this.asset.pixelHeight}px, `;
-            }
-
-            result += fileSize(this.asset.fileSize);
-        }
-
-        return result;
-    }
+    public previewUrl: string;
+    public fileUrl: string;
+    public fileName: string;
+    public fileType: string;
+    public fileIcon: string;
+    public fileInfo: string;

    constructor(apps: AppsStoreService, notifications: NotificationService, users: UsersProviderService,
        private readonly formBuilder: FormBuilder,
@ -226,8 +197,13 @@ export class AssetComponent extends AppComponentBase implements OnInit {

    private updateAsset(asset: AssetDto) {
        this.asset = asset;
-        this.cacheBuster = MathHelper.guid();
+        this.fileUrl = FileHelper.assetUrl(this.apiUrl, asset);
+        this.fileInfo = FileHelper.assetInfo(asset);
+        this.fileName = FileHelper.assetName(asset);
+        this.fileType = FileHelper.fileType(asset.mimeType, this.asset.fileName);
+        this.fileIcon = FileHelper.fileIcon(asset.mimeType);
        this.progress = 0;
+        this.previewUrl = FileHelper.assetPreviewUrl(this.apiUrl, asset);
        this.previewRetries = 0;
        this.version = asset.version;

@ -239,63 +215,8 @@ export class AssetComponent extends AppComponentBase implements OnInit {

        if (this.previewRetries <= 10) {
            setTimeout(() => {
-                this.cacheBuster = MathHelper.guid();
+                this.previewUrl = FileHelper.assetPreviewUrl(this.apiUrl, this.asset);
            }, this.previewRetries * 1000);
        }
    }
-}
-
-function fileSize(b: number) {
-    let u = 0, s = 1024;
-
-    while (b >= s || -b >= s) {
-        b /= s;
-        u++;
-    }
-
-    return (u ? b.toFixed(1) + ' ' : b) + ' kMGTPEZY'[u] + 'B';
-}
-
-const mimeMapping = {
-    'pdf': 'pdf',
-    'vnd.openxmlformats-officedocument.wordprocessingml.document': 'docx',
-    'vnd.openxmlformats-officedocument.wordprocessingml.template': 'docx',
-    'vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'xlsx',
-    'vnd.openxmlformats-officedocument.spreadsheetml.template': 'xlsx',
-    'vnd.openxmlformats-officedocument.presentationml.presentation': 'pptx',
-    'vnd.openxmlformats-officedocument.presentationml.template': 'pptx',
-    'vnd.openxmlformats-officedocument.presentationml.slideshow': 'pptx',
-    'msword': 'doc',
-    'vnd.ms-word': 'doc',
-    'vnd.ms-word.document.macroEnabled.12': 'docx',
-    'vnd.ms-word.template.macroEnabled.12': 'docx',
-    'vnd.ms-excel': 'xls',
-    'vnd.ms-excel.sheet.macroEnabled.12': 'xlsx',
-    'vnd.ms-excel.template.macroEnabled.12': 'xlsx',
-    'vnd.ms-excel.addin.macroEnabled.12': 'xlsx',
-    'vnd.ms-excel.sheet.binary.macroEnabled.12': 'xlsx',
-    'vnd.ms-powerpoint': 'ppt',
-    'vnd.ms-powerpoint.addin.macroEnabled.12': 'pptx',
-    'vnd.ms-powerpoint.presentation.macroEnabled.12': 'pptx',
-    'vnd.ms-powerpoint.template.macroEnabled.12': 'pptx',
-    'vnd.ms-powerpoint.slideshow.macroEnabled.12': 'pptx'
-};
-
-function fileIcon(mimeType: string) {
-    const mimeParts = mimeType.split('/');
-
-    let mimeIcon = 'generic';
-
-    if (mimeParts.length === 2) {
-        const mimePrefix = mimeParts[0].toLowerCase();
-        const mimeSuffix = mimeParts[1].toLowerCase();
-
-        if (mimePrefix === 'video') {
-            mimeIcon = 'video';
-        } else {
-            mimeIcon = mimeMapping[mimeSuffix] || 'generic';
-        }
-    }
-
-    return `/images/asset_${mimeIcon}.png`;
 }
--- a/src/Squidex/app/shared/declarations.ts
+++ b/src/Squidex/app/shared/declarations.ts
@ -37,6 +37,7 @@ export * from './services/schemas.service';
 export * from './services/users-provider.service';
 export * from './services/users.service';

+export * from './utils/file-helper';
 export * from './utils/messages';

 export * from 'framework';
--- a/src/Squidex/app/shared/utils/file-helper.ts
+++ b/src/Squidex/app/shared/utils/file-helper.ts
@ -0,0 +1,112 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Sebastian Stehle. All rights reserved
+ */
+
+import { ApiUrlConfig, MathHelper } from 'framework';
+import { AssetDto } from './../services/assets.service';
+
+const mimeMapping = {
+    'pdf': 'pdf',
+    'vnd.openxmlformats-officedocument.wordprocessingml.document': 'docx',
+    'vnd.openxmlformats-officedocument.wordprocessingml.template': 'docx',
+    'vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'xlsx',
+    'vnd.openxmlformats-officedocument.spreadsheetml.template': 'xlsx',
+    'vnd.openxmlformats-officedocument.presentationml.presentation': 'pptx',
+    'vnd.openxmlformats-officedocument.presentationml.template': 'pptx',
+    'vnd.openxmlformats-officedocument.presentationml.slideshow': 'pptx',
+    'msword': 'doc',
+    'vnd.ms-word': 'doc',
+    'vnd.ms-word.document.macroEnabled.12': 'docx',
+    'vnd.ms-word.template.macroEnabled.12': 'docx',
+    'vnd.ms-excel': 'xls',
+    'vnd.ms-excel.sheet.macroEnabled.12': 'xlsx',
+    'vnd.ms-excel.template.macroEnabled.12': 'xlsx',
+    'vnd.ms-excel.addin.macroEnabled.12': 'xlsx',
+    'vnd.ms-excel.sheet.binary.macroEnabled.12': 'xlsx',
+    'vnd.ms-powerpoint': 'ppt',
+    'vnd.ms-powerpoint.addin.macroEnabled.12': 'pptx',
+    'vnd.ms-powerpoint.presentation.macroEnabled.12': 'pptx',
+    'vnd.ms-powerpoint.template.macroEnabled.12': 'pptx',
+    'vnd.ms-powerpoint.slideshow.macroEnabled.12': 'pptx'
+};
+
+export module FileHelper {
+    export function assetUrl(apiUrl: ApiUrlConfig, asset: AssetDto): string {
+        return apiUrl.buildUrl(`api/assets/${asset.id}?q=${MathHelper.guid()}`);
+    }
+
+    export function assetName(asset: AssetDto): string {
+        return asset.fileName;
+    }
+
+    export function assetPreviewUrl(apiUrl: ApiUrlConfig, asset: AssetDto) {
+        return apiUrl.buildUrl(`api/assets/${asset.id}?width=230&height=155&mode=Crop&version=${asset.version.value}&q=${MathHelper.guid()}`);
+    }
+
+    export function assetInfo(asset: AssetDto): string {
+        let result = '';
+
+        if (asset != null) {
+            if (asset.pixelWidth) {
+                result = `${asset.pixelWidth}x${asset.pixelHeight}px, `;
+            }
+
+            result += FileHelper.fileSize(asset.fileSize);
+        }
+
+        return result;
+    }
+
+    export function fileType(mimeType: string, fileName: string) {
+        if (fileName) {
+            const parts = fileName.split('.');
+
+            if (parts.length > 1) {
+                return parts[parts.length - 1].toLowerCase();
+            }
+        }
+        if (mimeType) {
+            const parts = mimeType.split('/');
+
+            if (parts.length === 2) {
+                const mimeSuffix = parts[1].toLowerCase();
+
+                return mimeMapping[mimeSuffix] || mimeSuffix;
+            }
+        }
+        return undefined;
+    }
+
+    export function fileIcon(mimeType: string) {
+        const mimeParts = mimeType.split('/');
+
+        let mimeIcon = 'generic';
+
+        if (mimeParts.length === 2) {
+            const mimePrefix = mimeParts[0].toLowerCase();
+            const mimeSuffix = mimeParts[1].toLowerCase();
+
+            if (mimePrefix === 'video') {
+                mimeIcon = 'video';
+            } else {
+                mimeIcon = mimeMapping[mimeSuffix] || 'generic';
+            }
+        }
+
+        return `/images/asset_${mimeIcon}.png`;
+    }
+
+    export function fileSize(bytes: number) {
+        let u = 0, s = 1024;
+
+        while (bytes >= s || -bytes >= s) {
+            bytes /= s;
+            u++;
+        }
+
+        return (u ? bytes.toFixed(1) + ' ' : bytes) + ' kMGTPEZY'[u] + 'B';
+    }
+}