From 44df0c3d0973a8149e77d1f59f0f3338c3ab0f18 Mon Sep 17 00:00:00 2001
From: Ibrahim Nergiz <phyesix@gmail.com>
Date: Wed, 9 Aug 2023 15:41:24 +0300
Subject: [PATCH] Add New Detail Type :: Image

---
 .../global/DetailsSection/DetailsSection.vue           |  7 +++++++
 frontend/components/global/DetailsSection/types.ts     | 10 +++++++++-
 frontend/composables/utils.ts                          |  6 ++++++
 frontend/pages/item/[id]/index.vue                     |  9 ++++++++-
 4 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/frontend/components/global/DetailsSection/DetailsSection.vue b/frontend/components/global/DetailsSection/DetailsSection.vue
index 112970f..0f5eec1 100644
--- a/frontend/components/global/DetailsSection/DetailsSection.vue
+++ b/frontend/components/global/DetailsSection/DetailsSection.vue
@@ -21,6 +21,13 @@
                 </a>
               </div>
             </template>
+            <template v-else-if="detail.type === 'image'">
+              <div class="tooltip tooltip-primary tooltip-right" :data-tip="detail.href">
+                <a class="btn btn-primary btn-xs" :href="detail.href" target="_blank">
+                  <img :src="detail.href" class="w-6 h-6">
+                </a>
+              </div>
+            </template>
             <template v-else-if="detail.type === 'markdown'">
               <ClientOnly>
                 <Markdown :source="detail.text" />
diff --git a/frontend/components/global/DetailsSection/types.ts b/frontend/components/global/DetailsSection/types.ts
index 74135fb..a15d27b 100644
--- a/frontend/components/global/DetailsSection/types.ts
+++ b/frontend/components/global/DetailsSection/types.ts
@@ -33,7 +33,13 @@ export type Detail = BaseDetail & {
   copyable?: boolean;
 };
 
-export type AnyDetail = DateDetail | CurrencyDetail | LinkDetail | MarkdownDetail | Detail;
+type ImageDetail = BaseDetail & {
+  type: "image";
+  text: string;
+  href: string;
+};
+
+export type AnyDetail = DateDetail | CurrencyDetail | LinkDetail | MarkdownDetail | Detail | ImageDetail;
 
 export type Details = Array<Detail | AnyDetail>;
 
@@ -46,6 +52,8 @@ export function filterZeroValues(details: Details): Details {
         return !!detail.text;
       case "link":
         return !!detail.text && !!detail.href;
+      case "image":
+        return !!detail.text && !!detail.href;
       case undefined:
       case "text":
       case "markdown":
diff --git a/frontend/composables/utils.ts b/frontend/composables/utils.ts
index 42b05ce..897bc7d 100644
--- a/frontend/composables/utils.ts
+++ b/frontend/composables/utils.ts
@@ -38,7 +38,12 @@ export function fmtCurrency(value: number | string, currency = "USD", locale = "
   return formatter.format(value);
 }
 
+export function isImage(url: string) {
+  return /\.(jpg|jpeg|png|webp|avif|gif|svg)$/.test(url);
+}
+
 export type MaybeUrlResult = {
+  isImage: boolean,
   isUrl: boolean;
   url: string;
   text: string;
@@ -46,6 +51,7 @@ export type MaybeUrlResult = {
 
 export function maybeUrl(str: string): MaybeUrlResult {
   const result: MaybeUrlResult = {
+    isImage: isImage(str),
     isUrl: str.startsWith("http://") || str.startsWith("https://"),
     url: "",
     text: "",
diff --git a/frontend/pages/item/[id]/index.vue b/frontend/pages/item/[id]/index.vue
index 1056984..272f2a9 100644
--- a/frontend/pages/item/[id]/index.vue
+++ b/frontend/pages/item/[id]/index.vue
@@ -186,7 +186,14 @@
          * Support Special URL Syntax
          */
         const url = maybeUrl(field.textValue);
-        if (url.isUrl) {
+        if (url.isImage) {
+          return {
+            type: "image",
+            name: field.name,
+            text: url.text,
+            href: url.url,
+          } as AnyDetail;
+        } else {
           return {
             type: "link",
             name: field.name,