@datagouv/components-next 1.0.2-dev.53 → 1.0.2-dev.54

package/src/functions/api.ts

@@ -24,6 +24,7 @@ export async function useFetch<DataT, ErrorT = never>(
     return await config.customUseFetch(url, options)
   }
 
+  const isRaw = options?.raw
   const data: Ref<DataT | null> = ref(null)
   const error: Ref<ErrorT | null> = ref(null)
   const status = ref<AsyncDataRequestStatus>('idle')
@@ -35,37 +36,39 @@ export async function useFetch<DataT, ErrorT = never>(
     const query = deepToValue(options?.query)
     status.value = 'pending'
     try {
-      data.value = await ofetch<DataT | null>(urlValue, {
-        baseURL: config.apiBase,
-        params: params ?? query,
-        onRequest(param) {
-          if (config.onRequest) {
-            if (Array.isArray(config.onRequest)) {
-              config.onRequest.forEach(r => r(param))
-            }
-            else {
-              config.onRequest(param)
-            }
-          }
-          const { options } = param
-          options.headers.set('Content-Type', 'application/json')
-          options.headers.set('Accept', 'application/json')
-          options.credentials = 'include'
-          if (config.devApiKey) {
-            options.headers.set('X-API-KEY', config.devApiKey)
-          }
+      data.value = isRaw
+        ? await ofetch<DataT | null>(urlValue, { params: params ?? query })
+        : await ofetch<DataT | null>(urlValue, {
+            baseURL: config.apiBase,
+            params: params ?? query,
+            onRequest(param) {
+              if (config.onRequest) {
+                if (Array.isArray(config.onRequest)) {
+                  config.onRequest.forEach(r => r(param))
+                }
+                else {
+                  config.onRequest(param)
+                }
+              }
+              const { options } = param
+              options.headers.set('Content-Type', 'application/json')
+              options.headers.set('Accept', 'application/json')
+              options.credentials = 'include'
+              if (config.devApiKey) {
+                options.headers.set('X-API-KEY', config.devApiKey)
+              }
 
-          if (locale) {
-            if (!options.params) {
-              options.params = {}
-            }
-            options.params['lang'] = locale
-          }
-        },
-        onRequestError: config.onRequestError,
-        onResponse: config.onResponse,
-        onResponseError: config.onResponseError,
-      })
+              if (locale) {
+                if (!options.params) {
+                  options.params = {}
+                }
+                options.params['lang'] = locale
+              }
+            },
+            onRequestError: config.onRequestError,
+            onResponse: config.onResponse,
+            onResponseError: config.onResponseError,
+          })
       status.value = 'success'
     }
     catch (e) {
@@ -90,9 +93,7 @@ export async function useFetch<DataT, ErrorT = never>(
 
   return {
     data,
-    refresh: async () => {
-      execute()
-    },
+    refresh: () => execute(),
     execute,
     clear: () => {
       data.value = null

package/src/functions/api.types.ts

@@ -20,6 +20,7 @@ export type UseFetchOptions<DataT> = {
   transform?: (input: DataT) => DataT | Promise<DataT>
   pick?: string[]
   watch?: WatchSource[] | false
+  raw?: boolean
 }
 
 export type AsyncData<DataT, ErrorT> = {

package/src/functions/tabular.ts

@@ -0,0 +1,60 @@
+import type { Component } from 'vue'
+import {
+  RiHashtag,
+  RiPriceTag3Line,
+  RiText,
+  RiCalendarLine,
+  RiCheckboxLine,
+} from '@remixicon/vue'
+import { useTranslation } from '../composables/useTranslation'
+import type { ColumnFilters, ColumnType } from '../components/TabularExplorer/types'
+
+export function hasFilterForColumn(filters: Record<string, ColumnFilters>, column: string): boolean {
+  const f = filters[column]
+  if (!f) return false
+  return !!(f.in?.length || f.exact != null || f.contains || f.null || f.min != null || f.max != null)
+}
+
+export function buildTypeConfig(t: (s: string) => string): Record<ColumnType, { icon: Component, label: string }> {
+  return {
+    number: { icon: RiHashtag, label: t('Nombre') },
+    categorical: { icon: RiPriceTag3Line, label: t('Catégoriel') },
+    text: { icon: RiText, label: t('Texte') },
+    date: { icon: RiCalendarLine, label: t('Date') },
+    boolean: { icon: RiCheckboxLine, label: t('Booléen') },
+  }
+}
+
+export function useFormatTabular() {
+  const { locale } = useTranslation()
+
+  function formatNumber(value: unknown): string {
+    const num = Number(value)
+    if (Number.isNaN(num)) return String(value)
+    return num.toLocaleString(locale)
+  }
+
+  function formatCellDate(value: unknown): string {
+    if (value == null || value === '') return '–'
+    const d = new Date(String(value))
+    if (Number.isNaN(d.getTime())) return String(value)
+    return new Intl.DateTimeFormat(locale, { day: '2-digit', month: '2-digit', year: 'numeric' }).format(d)
+  }
+
+  return { formatNumber, formatCellDate }
+}
+
+const TRUTHY_VALUES = ['true', '1', 'oui', 'yes']
+const FALSY_VALUES = ['false', '0', 'non', 'no']
+
+export function isTruthy(value: unknown): boolean {
+  if (typeof value === 'boolean') return value
+  if (typeof value === 'string') return TRUTHY_VALUES.includes(value.toLowerCase())
+  return Boolean(value)
+}
+
+export function isFalsy(value: unknown): boolean {
+  if (typeof value === 'boolean') return !value
+  if (typeof value === 'string') return FALSY_VALUES.includes(value.toLowerCase())
+  return !value
+}

package/src/functions/tabularApi.ts

@@ -1,18 +1,16 @@
 import { ofetch } from 'ofetch'
 import { useComponentsConfig, type PluginConfig } from '../config'
+import type { SortConfig } from '../components/TabularExplorer/types'
 
-export type SortConfig = {
-  column: string
-  type: string
-} | null
+export type { SortConfig }
 
 /**
  * Call Tabular-api to get table content
  */
-export async function getData(config: PluginConfig, id: string, page: number, sortConfig?: SortConfig) {
+export async function getData(config: PluginConfig, id: string, page: number, sortConfig?: SortConfig | null) {
   let url = `${config.tabularApiUrl}/api/resources/${id}/data/?page=${page}&page_size=${config.tabularApiPageSize || 15}`
   if (sortConfig) {
-    url = url + `&${sortConfig.column}__sort=${sortConfig.type}`
+    url = url + `&${sortConfig.column}__sort=${sortConfig.direction}`
   }
   return await ofetch(url)
 }

package/src/main.ts

@@ -25,6 +25,8 @@ import type { User, UserReference } from './types/users'
 import type { Report, ReportSubject, ReportReason } from './types/reports'
 import type { GlobalSearchConfig, SearchType, SortOption } from './types/search'
 import { getDefaultDatasetConfig, getDefaultDataserviceConfig, getDefaultReuseConfig, getDefaultOrganizationConfig, getDefaultTopicConfig, getDefaultGlobalSearchConfig, defaultDatasetSortOptions, defaultDataserviceSortOptions, defaultReuseSortOptions, defaultOrganizationSortOptions } from './types/search'
+import { useSearchFilter } from './composables/useSearchFilter'
+import type { UseSearchFilterOptions } from './composables/useSearchFilter'
 
 import ActivityList from './components/ActivityList/ActivityList.vue'
 import UserActivityList from './components/ActivityList/UserActivityList.vue'
@@ -94,6 +96,8 @@ import GlobalSearch from './components/Search/GlobalSearch.vue'
 import SearchInput from './components/Search/SearchInput.vue'
 import SearchableSelect from './components/Form/SearchableSelect.vue'
 import SelectGroup from './components/Form/SelectGroup.vue'
+import InfiniteLoader from './components/InfiniteLoader.vue'
+import TabularExplorer from './components/TabularExplorer/TabularExplorer.vue'
 import type { UseFetchFunction } from './functions/api.types'
 import { configKey, useComponentsConfig, type PluginConfig } from './config.js'
 
@@ -119,6 +123,7 @@ export * from './functions/owned'
 export * from './functions/resources'
 export * from './functions/reuses'
 export * from './functions/schemas'
+export * from './functions/tabular'
 export * from './functions/users'
 export * from './types/access_types'
 
@@ -126,6 +131,7 @@ export type {
   GlobalSearchConfig,
   SearchType,
   SortOption,
+  UseSearchFilterOptions,
   UseFetchFunction,
   AccessType,
   AccessAudience,
@@ -229,6 +235,7 @@ export {
   defaultDataserviceSortOptions,
   defaultReuseSortOptions,
   defaultOrganizationSortOptions,
+  useSearchFilter,
 }
 
 // Vue Plugin
@@ -317,4 +324,6 @@ export {
   SearchInput,
   SearchableSelect,
   SelectGroup,
+  InfiniteLoader,
+  TabularExplorer,
 }