@datagouv/components-next 1.0.2-dev.2 → 1.0.2-dev.200

package/src/components/ResourceAccordion/Preview.vue

@@ -1,13 +1,8 @@
 <template>
   <div>
-    <SimpleBanner
-      v-if="hasError"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("L'aperçu de ce fichier n'a pas pu être chargé.") }}</span>
-    </SimpleBanner>
+    <PreviewUnavailable v-if="hasError">
+      {{ t("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le depuis l'onglet Téléchargements.") }}
+    </PreviewUnavailable>
     <PreviewLoader v-else-if="loading" />
     <div
       v-else
@@ -53,7 +48,7 @@
               >
                 <BrandedButton
                   color="tertiary"
-                  :icon="isSortedBy(col) && sortConfig && sortConfig.type == 'asc' ? RiArrowUpLine : RiArrowDownLine"
+                  :icon="isSortedBy(col) && sortConfig && sortConfig.direction === 'asc' ? RiArrowUpLine : RiArrowDownLine"
                   icon-right
                   size="xs"
                   @click="sortByField(col)"
@@ -61,7 +56,7 @@
                   <!-- There is a weird bug with `sr-only`, I needed to add a relative parent to avoid full page x scrolling into the void…  -->
                   <span class="relative">
                     {{ col }}
-                    <span class="sr-only">{{ sortConfig && sortConfig.type == 'desc' ? t("Trier par ordre croissant") : t("Trier par ordre décroissant") }}</span>
+                    <span class="sr-only">{{ sortConfig && sortConfig.direction === 'desc' ? t("Trier par ordre croissant") : t("Trier par ordre décroissant") }}</span>
                   </span>
                 </BrandedButton>
               </th>
@@ -95,7 +90,11 @@
         @change="changePage"
       />
       <div class="fr-px-5v">
-        {{ t("Dernière mise à jour de la prévisualisation : {date}", { date: lastUpdate }) }} —
+        <TranslationT keypath="Dernière mise à jour de la prévisualisation : {date}">
+          <template #date>
+            <FormattedDate :date="parsingFinishedAt" />
+          </template>
+        </TranslationT> —
         {{ t('{count} colonnes', columns.length) }} —
         {{ t('Lignes {count}', rowCount) }}
       </div>
@@ -105,15 +104,16 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import { RiArrowDownLine, RiArrowUpLine, RiErrorWarningLine, RiExternalLinkFill } from '@remixicon/vue'
+import { RiArrowDownLine, RiArrowUpLine, RiExternalLinkFill } from '@remixicon/vue'
 import Pagination from '../Pagination.vue'
 import { getData, type SortConfig } from '../../functions/tabularApi'
-import { useFormatDate } from '../../functions/dates'
+import FormattedDate from '../FormattedDate.vue'
+import TranslationT from '../TranslationT.vue'
 import { trackEvent } from '../../functions/matomo'
 import type { Resource } from '../../types/resources'
 import { useComponentsConfig } from '../../config'
 import BrandedButton from '../BrandedButton.vue'
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
 import { useTranslation } from '../../composables/useTranslation'
 import franceSvg from './france.svg?raw'
 import PreviewLoader from './PreviewLoader.vue'
@@ -121,13 +121,12 @@ import PreviewLoader from './PreviewLoader.vue'
 const props = defineProps<{ resource: Resource }>()
 
 const { t } = useTranslation()
-const { formatDate } = useFormatDate()
 
 const rows = ref<Array<Record<string, unknown>>>([])
 const columns = ref<Array<string>>([])
 const loading = ref(true)
 const hasError = ref(false)
-const sortConfig = ref<SortConfig>(null)
+const sortConfig = ref<SortConfig | null>(null)
 const rowCount = ref(0)
 const config = useComponentsConfig()
 const pageSize = computed(() => config.tabularApiPageSize || 15)
@@ -143,11 +142,11 @@ function isSortedBy(col: string) {
 /**
  * Retrieve preview necessary infos
  */
-async function getTableInfos(page: number, sortConfig?: SortConfig) {
+async function getTableInfos(page: number, sortConfig?: SortConfig | null) {
   try {
     // Check that this function return wanted data
     const response = await getData(config, props.resource.id, page, sortConfig)
-    if ('data' in response && response.data && response.data.length > 0) {
+    if ('data' in response && response.data && 0 in response.data) {
       // Update existing rows
       rows.value = response.data
       columns.value = Object.keys(response.data[0]).filter(item => item !== '__id')
@@ -177,31 +176,31 @@ function changePage(page: number) {
  * Sort by a specific column
  */
 function sortByField(col: string) {
-  if (sortConfig.value && sortConfig.value.column == col) {
-    if (sortConfig.value.type == 'asc') {
-      sortConfig.value.type = 'desc'
+  if (sortConfig.value && sortConfig.value.column === col) {
+    if (sortConfig.value.direction === 'asc') {
+      sortConfig.value.direction = 'desc'
     }
     else {
-      sortConfig.value.type = 'asc'
+      sortConfig.value.direction = 'asc'
     }
   }
   else {
     if (!sortConfig.value) {
       sortConfig.value = {
         column: col,
-        type: 'asc',
+        direction: 'asc',
       }
     }
     else {
       sortConfig.value.column = col
-      sortConfig.value.type = 'asc'
+      sortConfig.value.direction = 'asc'
     }
   }
   currentPage.value = 1
   getTableInfos(currentPage.value, sortConfig.value)
 };
 
-const lastUpdate = computed(() => formatDate(props.resource.extras['analysis:parsing:finished_at'] as string | undefined))
+const parsingFinishedAt = computed(() => props.resource.extras['analysis:parsing:finished_at'] as string | undefined)
 
 onMounted(() => {
   getTableInfos(currentPage.value)

package/src/components/ResourceAccordion/PreviewLoader.vue

@@ -1,7 +1,6 @@
 <template>
   <ContentLoader
-    :width="1124"
-    :height="300"
+    viewBox="0 0 1124 300"
     :speed="2"
     primary-color="#f3f3f3"
     secondary-color="#ecebeb"

package/src/components/ResourceAccordion/PreviewUnavailable.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="flex flex-col items-center py-12">
+    <img
+      :src="microscopeSrc"
+      class="h-20 mb-3"
+      alt=""
+    >
+    <p class="fr-text--bold mb-1">
+      {{ t("Aucun aperçu disponible") }}
+    </p>
+    <p class="text-sm text-gray-medium mb-0 text-center max-w-lg">
+      <slot />
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import microscopeSrc from '../../../assets/illustrations/microscope.svg?url'
+
+const { t } = useTranslation()
+</script>

package/src/components/ResourceAccordion/PreviewWrapper.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    class="text-xs"
+    :class="fill ? 'flex min-h-0 flex-1 flex-col' : ''"
+  >
+    <slot
+      v-if="data !== null"
+      :data="data"
+    />
+    <slot
+      v-else-if="loading"
+      name="loading"
+    >
+      <div class="text-gray-medium">
+        {{ t("Chargement de l'aperçu {fileType}...", { fileType }) }}
+      </div>
+    </slot>
+    <PreviewUnavailable v-else-if="!isSizeAllowed">
+      {{ fileSizeBytes
+        ? t("Le fichier {fileType} est trop volumineux pour être prévisualisé. Téléchargez-le pour le consulter.", { fileType })
+        : t("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le pour le consulter.")
+      }}
+    </PreviewUnavailable>
+    <PreviewUnavailable v-else-if="corsStatus === 'blocked'">
+      {{ t("Ce fichier {fileType} ne peut pas être prévisualisé car il est hébergé sur un site distant qui restreint l'accès (CORS). Téléchargez-le pour le consulter.", { fileType }) }}
+    </PreviewUnavailable>
+    <PreviewUnavailable v-else-if="error === 'network'">
+      {{ t("Ce fichier est hébergé sur un site externe qui ne permet pas la prévisualisation. Téléchargez-le pour le consulter.") }}
+    </PreviewUnavailable>
+    <PreviewUnavailable v-else-if="error">
+      {{ t("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le pour le consulter.") }}
+    </PreviewUnavailable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref } from 'vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
+import type { Resource } from '../../types/resources'
+import { getResourceFilesize, getResourceCorsStatus } from '../../functions/resources'
+import { useTranslation } from '../../composables/useTranslation'
+
+const props = defineProps<{
+  fileType: string
+  resource: Resource
+  maxSize: number | undefined
+  load: () => Promise<unknown>
+  // Fill the available height (fullscreen) instead of sizing to content.
+  fill?: boolean
+}>()
+
+const emit = defineEmits<{
+  loaded: []
+}>()
+
+const { t } = useTranslation()
+
+const data = ref<unknown>(null)
+const loading = ref(false)
+const error = ref<'network' | 'generic' | null>(null)
+
+const fileSizeBytes = computed(() => getResourceFilesize(props.resource))
+const corsStatus = computed(() => getResourceCorsStatus(props.resource))
+
+const isSizeAllowed = computed(() => {
+  const size = fileSizeBytes.value
+  const max = props.maxSize
+  if (!size || !max) return false
+  return size <= max
+})
+
+onMounted(async () => {
+  if (!isSizeAllowed.value || corsStatus.value === 'blocked') return
+
+  loading.value = true
+  try {
+    data.value = await props.load()
+    await nextTick()
+    emit('loaded')
+  }
+  catch (err) {
+    console.error('Error loading preview:', err)
+    error.value = err instanceof TypeError ? 'network' : 'generic'
+  }
+  finally {
+    loading.value = false
+  }
+})
+</script>

package/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -56,11 +56,21 @@
             :resource
           />
           <RiSubtractLine
-            v-if="resource.schema"
+            v-if="resource.schema?.name || resource.schema?.url"
             aria-hidden="true"
             class="size-3 fill-gray-medium"
           />
-          <span class="text-xs mb-0">{{ t('Mis à jour {date}', { date: formatRelativeIfRecentDate(lastUpdate) }) }}</span>
+          <TranslationT
+            class="text-xs mb-0"
+            keypath="Mis à jour {date}"
+          >
+            <template #date>
+              <FormattedDate
+                :date="lastUpdate"
+                format="relative"
+              />
+            </template>
+          </TranslationT>
           <RiSubtractLine
             aria-hidden="true"
             class="size-3 fill-gray-medium"
@@ -197,7 +207,10 @@
             :key="tab.key"
             class="px-4"
           >
-            <div v-if="tab.key === 'map'">
+            <div
+              v-if="tab.key === 'map'"
+              class="-mx-4 h-[600px]"
+            >
               <Pmtiles
                 v-if="hasPmtiles"
                 :resource="resource"
@@ -224,6 +237,10 @@
                 v-else-if="resource.format && resource.format.toLowerCase() === 'xml'"
                 :resource="resource"
               />
+              <ImagePreview
+                v-else-if="isImagePreviewFormat(resource.format)"
+                :resource="resource"
+              />
               <!-- Show Datafair embedded preview (koumoul) -->
               <DatafairPreview
                 v-else-if="hasDatafairPreview"
@@ -231,7 +248,7 @@
                 :dataset="dataset"
               />
               <!-- Show Datafair embedded preview (koumoul) -->
-              <SwaggerClient
+              <OpenApiViewer
                 v-else-if="hasOpenAPIPreview"
                 :url="resource.extras['apidocUrl'] as string"
               />
@@ -265,91 +282,13 @@
             <div
               v-if="tab.key === 'downloads'"
             >
-              <dl class="fr-pl-0">
-                <dt
-                  v-if="resource.format === 'url'"
-                  class="font-bold fr-text--sm fr-mb-0"
-                >
-                  {{ t("URL d'origine") }}
-                </dt>
-                <dt
-                  v-else
-                  class="font-bold fr-text--sm fr-mb-0"
-                >
-                  {{ t('Format original') }}
-                </dt>
-                <dd class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center">
-                  <span v-if="resource.format === 'url'">
-                    <a
-                      :href="resource.latest"
-                      class="fr-link no-icon-after"
-                      rel="ugc nofollow noopener"
-                      target="_blank"
-                      @click="trackEvent('Jeux de données', 'Télécharger un fichier', 'Bouton : télécharger un fichier')"
-                    >
-                      <component
-                        :is="config.textClamp"
-                        v-if="config && config.textClamp"
-                        :auto-resize="true"
-                        :max-lines="1"
-                        :text="resource.url"
-                      >
-                        <template #after>
-                          <span class="fr-ml-1v fr-icon-external-link-line fr-icon--sm" />
-                        </template>
-                      </component>
-                    </a>
-                  </span>
-                  <span v-else>
-                    <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
-                    <a
-                      :href="resource.latest"
-                      class="fr-link"
-                      rel="ugc nofollow noopener"
-                      @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${resource.format}`)"
-                    >
-                      <span>{{ t('Format {format}', { format: resource.format }) }}<span v-if="resourceFilesize"> - {{ filesize(resourceFilesize) }}</span></span>
-                    </a>
-                  </span>
-                  <CopyButton
-                    :label="t('Copier le lien')"
-                    :copied-label="t('Lien copié !')"
-                    :text="resource.latest"
-                    class="relative"
-                  />
-                </dd>
-                <template v-if="generatedFormats.length">
-                  <dt class="font-bold fr-text--sm fr-mb-0">
-                    {{ t('Formats générés automatiquement par {platform} (dernière mise à jour {date})', { platform: config.name, date: conversionsLastUpdate }) }}
-                  </dt>
-                  <dd
-                    v-for="generatedFormat in generatedFormats"
-                    :key="generatedFormat.format"
-                    class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center"
-                  >
-                    <span>
-                      <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
-                      <a
-                        :href="generatedFormat.url"
-                        class="fr-link"
-                        rel="ugc nofollow noopener"
-                        @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${generatedFormat.format}`)"
-                      >
-                        <span>{{ t('Format {format}', { format: generatedFormat.format }) }}<span v-if="generatedFormat.size"> - {{ filesize(generatedFormat.size) }}</span></span>
-                      </a>
-                    </span>
-                    <CopyButton
-                      :label="t('Copier le lien')"
-                      :copied-label="t('Lien copié !')"
-                      :text="generatedFormat.url"
-                      class="relative"
-                    />
-                  </dd>
-                </template>
-              </dl>
+              <Downloads
+                :resource="resource"
+                :dataset="dataset"
+              />
             </div>
             <div
-              v-if="tab.key === 'swagger'"
+              v-if="tab.key === 'api'"
             >
               <div class="fr-mb-4w">
                 <p>{{ t("Cette API est générée automatiquement par {platform} à partir du fichier.", { platform: config.name }) }}</p>
@@ -357,7 +296,7 @@
                 <p>{{ t("- Si le fichier est supprimé, l'API sera également supprimée.") }}</p>
                 <p>{{ t("Pour des usages pérennes, prévoyez que cette API dépend directement du fichier source.") }}</p>
               </div>
-              <Swagger
+              <OpenApiViewer
                 v-if="hasTabularData"
                 :url="`${config.tabularApiUrl}/api/resources/${props.resource.id}/swagger/`"
               />
@@ -374,7 +313,8 @@ import { ref, computed, defineAsyncComponent } from 'vue'
 import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine, RiSubtractLine } from '@remixicon/vue'
 import OrganizationNameWithCertificate from '../OrganizationNameWithCertificate.vue'
 import { filesize, summarize } from '../../functions/helpers'
-import { useFormatDate } from '../../functions/dates'
+import FormattedDate from '../FormattedDate.vue'
+import TranslationT from '../TranslationT.vue'
 import MarkdownViewer from '../MarkdownViewer.vue'
 import type { CommunityResource, Resource } from '../../types/resources'
 import type { Dataset, DatasetV2 } from '../../types/datasets'
@@ -387,9 +327,8 @@ import { trackEvent } from '../../functions/matomo'
 import CopyButton from '../CopyButton.vue'
 import { useComponentsConfig } from '../../config'
 import { getOwnerName } from '../../functions/owned'
-import { getResourceFormatIcon, getResourceTitleId, detectOgcService } from '../../functions/resources'
+import { getResourceFormatIcon, getResourceTitleId, detectOgcService, getResourceExternalUrl, getResourceFilesize, isImagePreviewFormat } from '../../functions/resources'
 import BrandedButton from '../BrandedButton.vue'
-import { getResourceExternalUrl, getResourceFilesize } from '../../functions/datasets'
 import { useTranslation } from '../../composables/useTranslation'
 import { useHasTabularData } from '../../composables/useHasTabularData'
 import Metadata from './Metadata.vue'
@@ -397,11 +336,11 @@ import SchemaBadge from './SchemaBadge.vue'
 import ResourceIcon from './ResourceIcon.vue'
 import EditButton from './EditButton.vue'
 import DataStructure from './DataStructure.vue'
+import Downloads from './Downloads.vue'
 import Preview from './Preview.vue'
 import { isOrganizationCertified } from '../../functions/organizations'
-import SwaggerClient from './Swagger.client.vue'
+import OpenApiViewer from '../OpenApiViewer/OpenApiViewer.vue'
 
-const GENERATED_FORMATS = ['parquet', 'pmtiles', 'geojson']
 const URL_FORMATS = ['url', 'doi', 'www:link', ' www:link-1.0-http--link', 'www:link-1.0-http--partners', 'www:link-1.0-http--related', 'www:link-1.0-http--samples']
 
 const props = withDefaults(defineProps<{
@@ -418,24 +357,23 @@ const props = withDefaults(defineProps<{
 
 const config = useComponentsConfig()
 
-const Swagger = defineAsyncComponent(() => import('./Swagger.client.vue'))
 const MapContainer = defineAsyncComponent(() => import('./MapContainer.client.vue'))
 const Pmtiles = defineAsyncComponent(() => import('./Pmtiles.client.vue'))
 const JsonPreview = defineAsyncComponent(() => import('./JsonPreview.client.vue'))
 const PdfPreview = defineAsyncComponent(() => import('./PdfPreview.client.vue'))
 const XmlPreview = defineAsyncComponent(() => import('./XmlPreview.client.vue'))
+const ImagePreview = defineAsyncComponent(() => import('./ImagePreview.client.vue'))
 const DatafairPreview = defineAsyncComponent(() => import('./Datafair.client.vue'))
 
 const { t } = useTranslation()
-const { formatRelativeIfRecentDate } = useFormatDate()
 const checkTabularData = useHasTabularData()
 
 const hasPreview = computed(() => {
-  // For JSON, PDF, and XML files, show preview.
+  // For JSON, PDF, XML, and image files, show preview.
   // We cannot check for CORS issues here because we cannot use an async component here.
   // If there is a CORS issue when fetching the file for preview, it will be managed and displayed as an error banner by the preview component.
   const format = props.resource.format?.toLowerCase()
-  return format === 'json' || format === 'pdf' || format === 'xml'
+  return format === 'json' || format === 'pdf' || format === 'xml' || isImagePreviewFormat(format)
 })
 
 const hasTabularData = computed(() => checkTabularData(props.resource))
@@ -462,24 +400,6 @@ const ogcService = computed(() => detectOgcService(props.resource))
 
 const ogcWms = computed(() => ogcService.value === 'wms')
 
-const generatedFormats = computed(() => {
-  const formats = GENERATED_FORMATS
-    .filter(format => `analysis:parsing:${format}_url` in props.resource.extras)
-    .map(format => ({
-      url: props.resource.extras[`analysis:parsing:${format}_url`] as string,
-      size: props.resource.extras[`analysis:parsing:${format}_size`] as number | undefined,
-      format: format,
-    }))
-  if ('analysis:parsing:parsing_table' in props.resource.extras) {
-    formats.push({
-      url: `${config.tabularApiUrl}/api/resources/${props.resource.id}/data/json/`,
-      size: undefined,
-      format: 'json',
-    })
-  }
-  return formats
-})
-
 const open = ref(props.expandedOnMount)
 const toggle = () => {
   open.value = !open.value
@@ -515,7 +435,7 @@ const tabsOptions = computed(() => {
   options.push({ key: 'downloads', label: t('Téléchargements') })
 
   if (hasTabularData.value) {
-    options.push({ key: 'swagger', label: t('Swagger') })
+    options.push({ key: 'api', label: t('API') })
   }
 
   return options
@@ -542,7 +462,6 @@ const communityResource = computed<CommunityResource | null>(() => {
 const owner = computed(() => communityResource.value ? getOwnerName(communityResource.value) : null)
 
 const lastUpdate = props.resource.last_modified
-const conversionsLastUpdate = computed(() => formatRelativeIfRecentDate(props.resource.extras['analysis:parsing:finished_at'] as string | undefined))
 const availabilityChecked = props.resource.extras && 'check:available' in props.resource.extras
 const resourceFilesize = computed(() => getResourceFilesize(props.resource))
 

package/src/components/ResourceAccordion/XmlPreview.client.vue

@@ -1,59 +1,24 @@
 <template>
-  <div class="fr-text--xs">
-    <div v-if="xmlData">
-      <XmlViewer :xml="xmlData" />
-    </div>
-    <div
-      v-else-if="loading"
-      class="text-gray-medium"
-    >
-      {{ t("Chargement de l'aperçu XML...") }}
-    </div>
-    <SimpleBanner
-      v-else-if="fileTooLarge"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ fileSizeBytes
-        ? t("Fichier XML trop volumineux pour l'aperçu. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-        : t("L'aperçu n'est pas disponible car la taille du fichier est inconnue. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-      }}</span>
-    </SimpleBanner>
-    <SimpleBanner
-      v-else-if="error === 'network'"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("Ce fichier XML ne peut pas être prévisualisé, peut-être parce qu'il est hébergé sur un autre site qui ne l'autorise pas. Pour le consulter, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.") }}</span>
-    </SimpleBanner>
-    <SimpleBanner
-      v-else-if="error"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("Erreur lors du chargement de l'aperçu XML.") }}</span>
-    </SimpleBanner>
-  </div>
+  <PreviewWrapper
+    v-slot="{ data }"
+    file-type="XML"
+    :resource="resource"
+    :max-size="config.maxXmlPreviewCharSize"
+    :load="load"
+  >
+    <XmlViewer :xml="(data as string)" />
+  </PreviewWrapper>
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent, onMounted, ref } from 'vue'
-import { RiErrorWarningLine } from '@remixicon/vue'
-
+import { defineAsyncComponent } from 'vue'
 import { useComponentsConfig } from '../../config'
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewWrapper from './PreviewWrapper.vue'
 import type { Resource } from '../../types/resources'
-import { useTranslation } from '../../composables/useTranslation'
 import '../../types/vue3-xml-viewer.d'
-import { getResourceFilesize } from '../../main'
 
 const XmlViewer = defineAsyncComponent(() =>
-  import('vue3-xml-viewer').then((module) => {
-    return module.default || module.XmlViewer
-  }),
+  import('vue3-xml-viewer').then(module => module.default || module.XmlViewer),
 )
 
 const props = defineProps<{
@@ -61,74 +26,10 @@ const props = defineProps<{
 }>()
 
 const config = useComponentsConfig()
-const { t } = useTranslation()
-
-const xmlData = ref<string | null>(null)
-const loading = ref(false)
-const error = ref<string | null>(null)
-const fileTooLarge = ref(false)
-
-const fileSizeBytes = computed(() => getResourceFilesize(props.resource))
-
-const shouldLoadXml = computed(() => {
-  const size = fileSizeBytes.value
-  if (!size) {
-    // If we don't know the size, don't risk loading a potentially huge file
-    return false
-  }
-
-  // Check if maxXmlPreviewCharSize is configured
-  if (!config.maxXmlPreviewCharSize) {
-    // If no limit is set, don't load unknown files
-    return false
-  }
-
-  // Convert maxXmlPreviewCharSize from characters to bytes (rough estimate)
-  // Assuming average 1 byte per character for XML
-  const maxByteSize = config.maxXmlPreviewCharSize
-
-  return size <= maxByteSize
-})
 
-const fetchXmlData = async () => {
-  // Check if file is too large or size is unknown before making the request
-  if (!shouldLoadXml.value) {
-    fileTooLarge.value = true
-    return
-  }
-
-  loading.value = true
-  error.value = null
-
-  try {
-    const response = await fetch(props.resource.url)
-    // const response = await fetch('/test-data.xml') // For testing locally without CORS issues
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`)
-    }
-    const data = await response.text()
-
-    // Use the XML data as string - let the XML viewer handle large files
-    xmlData.value = data
-  }
-  catch (err) {
-    console.error('Error loading XML:', err)
-
-    if (err instanceof TypeError) {
-      error.value = 'network'
-    }
-    else {
-      error.value = 'generic'
-    }
-
-    xmlData.value = null
-  }
-  finally {
-    loading.value = false
-  }
+const load = async () => {
+  const response = await fetch(props.resource.url)
+  if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
+  return response.text()
 }
-
-onMounted(() => {
-  fetchXmlData()
-})
 </script>