[#1548] added PDF preview

ui/src/components/records/RecordFieldCell.svelte

@@ -3,7 +3,7 @@
     import tooltip from "@/actions/tooltip";
     import IdLabel from "@/components/base/IdLabel.svelte";
     import FormattedDate from "@/components/base/FormattedDate.svelte";
-    import RecordFilePreview from "@/components/records/RecordFilePreview.svelte";
+    import RecordFileThumb from "@/components/records/RecordFileThumb.svelte";
 
     export let record;
     export let field;
@@ -57,9 +57,7 @@
     {:else if field.type === "file"}
         <div class="inline-flex">
             {#each CommonHelper.toArray(record[field.name]) as filename, i (i + filename)}
-                <figure class="thumb thumb-sm">
-                    <RecordFilePreview {record} {filename} />
-                </figure>
+                <RecordFileThumb {record} {filename} size="sm" />
             {/each}
         </div>
     {:else}

ui/src/components/records/RecordFilePreview.svelte

@@ -1,42 +0,0 @@
-<script>
-    import ApiClient from "@/utils/ApiClient";
-    import CommonHelper from "@/utils/CommonHelper";
-    import PreviewPopup from "@/components/base/PreviewPopup.svelte";
-
-    export let record;
-    export let filename;
-
-    let previewPopup;
-    let thumbUrl = "";
-    let originalUrl = "";
-
-    $: hasPreview = CommonHelper.hasImageExtension(filename);
-
-    $: if (hasPreview) {
-        originalUrl = ApiClient.getFileUrl(record, `${filename}`);
-    }
-
-    $: thumbUrl = originalUrl ? originalUrl + "?thumb=100x100" : "";
-
-    function onError() {
-        thumbUrl = "";
-    }
-</script>
-
-{#if hasPreview}
-    <img
-        src={thumbUrl}
-        alt={filename}
-        title="Preview {filename}"
-        class:link-fade={hasPreview}
-        on:click={(e) => {
-            e.stopPropagation();
-            previewPopup?.show(originalUrl);
-        }}
-        on:error={onError}
-    />
-{:else}
-    <i class="ri-file-line" />
-{/if}
-
-<PreviewPopup bind:this={previewPopup} />

ui/src/components/records/RecordFileThumb.svelte

@@ -0,0 +1,43 @@
+<script>
+    import ApiClient from "@/utils/ApiClient";
+    import CommonHelper from "@/utils/CommonHelper";
+    import PreviewPopup from "@/components/base/PreviewPopup.svelte";
+
+    export let record;
+    export let filename;
+    export let size;
+
+    let previewPopup;
+    let thumbUrl = "";
+    let originalUrl = ApiClient.getFileUrl(record, `${filename}`);
+
+    $: type = CommonHelper.getFileType(filename);
+    $: hasPreview = ["image", "pdf"].includes(type);
+    $: thumbUrl = originalUrl ? originalUrl + "?thumb=100x100" : "";
+
+    function onError() {
+        thumbUrl = "";
+    }
+</script>
+
+<a
+    class="thumb thumb-{size} link-fade"
+    href={originalUrl}
+    target="_blank"
+    rel="noreferrer"
+    on:click|stopPropagation={(e) => {
+        if (!hasPreview) return;
+        e.preventDefault();
+        previewPopup?.show(originalUrl);
+    }}
+>
+    {#if type === "image"}
+        <img src={thumbUrl} alt={filename} title="Preview {filename}" on:error={onError} />
+    {:else if type === "pdf"}
+        <i class="ri-file-pdf-line" />
+    {:else}
+        <i class="ri-file-3-line" />
+    {/if}
+</a>
+
+<PreviewPopup bind:this={previewPopup} {type} />

ui/src/components/records/fields/FileField.svelte

@@ -5,7 +5,7 @@
     import tooltip from "@/actions/tooltip";
     import Field from "@/components/base/Field.svelte";
     import UploadedFilePreview from "@/components/base/UploadedFilePreview.svelte";
-    import RecordFilePreview from "@/components/records/RecordFilePreview.svelte";
+    import RecordFileThumb from "@/components/records/RecordFileThumb.svelte";
 
     export let record;
     export let value = "";
@@ -79,9 +79,9 @@
     <div bind:this={filesListElem} class="files-list">
         {#each valueAsArray as filename, i (filename)}
             <div class="list-item">
-                <figure class="thumb" class:fade={deletedFileIndexes.includes(i)}>
-                    <RecordFilePreview {record} {filename} />
-                </figure>
+                <div class:fade={deletedFileIndexes.includes(i)}>
+                    <RecordFileThumb {record} {filename} />
+                </div>
                 <a
                     href={ApiClient.getFileUrl(record, filename)}
                     class="filename link-hint"