WIP search page #29

src/components/OcTopMenu.vue

@@ -49,7 +49,8 @@ const menuItems = computed(() => {
           params: {
             ...route.params,
             lang: key
-          }
+          },
+          query: route.query
         })
       }
     })

src/pages/community/[community].search.vue

@@ -5,16 +5,30 @@
   >
     <div class="flex flex-row">
       <div class="p-4 pl-8 w-2/12 ml-auto mr-auto">
-        <Panel :header="t('search.resourceType')" toggleable>
-          <template #toggleicon="toggleIconProps">
-            <i v-if="toggleIconProps.collapsed" class="fa-solid fa-chevron-down text-gray-700"/>
-            <i v-else class="fa-solid fa-chevron-up text-gray-700"/>
-          </template>
-          <div class="flex items-center gap-2" v-for="(dcatType, uri) in type2ResourceType" v-bind:key="uri">
-            <Checkbox v-model="resourceType" :inputId="uri" name="resourceType" :value="uri" />
-            <label for="resourceType" class="capitalize"> {{ t('resourceType.'+dcatType) }} </label>
-          </div>
-        </Panel>
+        <form id="searchForm" method="get" ref="searchForm" v-on:submit="submit">
+          <Panel :header="t('search.resourceType')" toggleable>
+            <template #toggleicon="toggleIconProps">
+              <i v-if="toggleIconProps.collapsed" class="fa-solid fa-chevron-down text-gray-700" />
+              <i v-else class="fa-solid fa-chevron-up text-gray-700" />
+            </template>
+            <div
+              class="flex items-center gap-2"
+              v-for="(dcatType, uri) in type2ResourceType"
+              v-bind:key="uri"
+            >
+              <Checkbox
+                v-model="resourceType"
+                :inputId="uri"
+                name="resourceType"
+                :value="uri"
+                @change="submit"
+              />
+              <label for="resourceType" class="capitalize">
+                {{ t('resourceType.' + dcatType) }}
+              </label>
+            </div>
+          </Panel>
+        </form>
       </div>
       <div class="p-4 pl-8 w-9/12 ml-auto mr-auto">
         <h1 class="font-title text-4xl uppercase font-bold mb-4 text-primary">
@@ -23,12 +37,13 @@
         <IconField class="w-full mt-8 mb-4">
           <InputText
             id="search"
+            form="searchForm"
             v-model="queryString"
             fluid
             size="large"
             :placeholder="t('community.homepage.searchBarPlaceholder')"
           />
-          <InputIcon class="fa-solid fa-magnifying-glass" :onclick="search" />
+          <InputIcon class="fa-solid fa-magnifying-glass" :onclick="submit" />
         </IconField>
         <div v-if="!searching">
           <template v-for="result in searchResultObjects" v-bind:key="result">
@@ -44,11 +59,11 @@
         </div>
         <Paginator
           class="mt-8"
-          always-show="false"
+          :always-show="false"
           :rows="itemsPerPage"
+          v-model:first="start"
           :total-records="searchResultList.length"
-          v-bind:currentPage="currentPage"
-          v-on:page="getResultsForPage($event.page)"
+          v-on:page="submit"
         />
       </div>
     </div>
@@ -62,7 +77,7 @@ import { useCommunityData } from '@/dataLoaders/community'
 import type { OcBreadcrumbItem, OcSearchResult } from '@/declarations'
 import OcLayoutSimple from '@/layout/OcLayoutSimple/OcLayoutSimple.vue'
 import { useAccountStore } from '@/stores/account'
-import { computed, ref } from 'vue'
+import { computed, onBeforeMount, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import IconField from 'primevue/iconfield'
 import InputText from 'primevue/inputtext'
@@ -74,6 +89,7 @@ import Paginator from 'primevue/paginator'
 import Panel from 'primevue/panel'
 import Checkbox from 'primevue/checkbox'
 import { type2ResourceType } from '@/helpers/resourceType'
+import { useRoute, useRouter } from 'vue-router'
 
 definePage({
   name: 'community.search',
@@ -84,17 +100,20 @@ definePage({
 })
 
 const accountStore = useAccountStore()
-const { t } = useI18n()
+const { locale, t } = useI18n()
 
 const { translateValue } = useTranslateValue()
 
 const { data: community } = useCommunityData()
 
+const route = useRoute()
+const router = useRouter()
+
 const itemsPerPage = 5
-const currentPage = ref(0)
+const start = ref(route.query.start ?? 0)
 
-const queryString = ref('')
-const resourceType = ref([])
+const queryString = ref(route.query.q)
+const resourceType = ref(route.query.type)
 
 const searchResultList = ref<string[]>([])
 const searchResultObjects = ref<OcSearchResult[]>([])
@@ -102,13 +121,28 @@ const searchResultObjects = ref<OcSearchResult[]>([])
 const searching = ref(false)
 const errorMessage = ref<string | null>(null)
 
+const submit = () => {
+  router.push({
+    name: "community.search",
+    params: {
+      lang: locale.value,
+      community: community.value.name
+    },
+    query: {
+      q: queryString.value,
+      type: resourceType.value,
+      start: start.value
+    }
+  })
+}
+
 const search = async () => {
   if (searching.value) {
     return
   }
 
   searching.value = true
-  currentPage.value = 0
+  start.value = 0
   try {
     searchResultList.value = await searchResources(
       {
@@ -122,31 +156,28 @@ const search = async () => {
     errorMessage.value = (e as Error).message ?? 'Error'
   }
 
-  try {
-    searchResultObjects.value = await getSearchResults(
-      searchResultList.value.slice(0, itemsPerPage),
-      accountStore.auth
-    )
-  } catch (e) {
-    console.error(e)
-    errorMessage.value = (e as Error).message ?? 'Error'
-  }
+  getResultsForStart(start.value)
 
   searching.value = false
 }
 
-const getResultsForPage = async (pagenumber: number) => {
-  searching.value = true
-  try {
-    searchResultObjects.value = await getSearchResults(
-      searchResultList.value.slice(pagenumber * itemsPerPage, (pagenumber + 1) * itemsPerPage),
-      accountStore.auth
-    )
-  } catch (e) {
-    console.error(e)
-    errorMessage.value = (e as Error).message ?? 'Error'
+const getResultsForStart = async (start: number) => {
+  const resourceUriList = searchResultList.value.slice(start, start + itemsPerPage)
+  if (resourceUriList.length){
+    searching.value = true
+    try {
+      searchResultObjects.value = await getSearchResults(
+        resourceUriList,
+        accountStore.auth
+      )
+    } catch (e) {
+      console.error(e)
+      errorMessage.value = (e as Error).message ?? 'Error'
+    }
+    searching.value = false
+  } else {
+    console.log("No results")
   }
-  searching.value = false
 }
 
 const breadcrumbItems = computed<OcBreadcrumbItem[]>(() => [
@@ -162,13 +193,37 @@ const breadcrumbItems = computed<OcBreadcrumbItem[]>(() => [
     type: 'search'
   }
 ])
+
+watch(
+  () => route.query,
+  (newQuery, oldQuery) => {
+    if (newQuery.q != oldQuery.q || newQuery.type != oldQuery.type){
+      start.value = parseInt(newQuery.start) ?? 0
+      getResultsForStart(start.value)
+    }
+    else {
+      start.value = 0
+      search()
+    }
+  }
+)
+
+onBeforeMount(() => {
+  if (route.query.q || route.query.type){
+    queryString.value = route.query.q as string ?? ""
+    resourceType.value = route.query.type as string[] ?? []
+    start.value = parseInt(route.query.start as string) ?? 0
+    search()
+  }
+})
 </script>
+
 <style scoped>
 :deep(.p-panel-header) {
-  @apply bg-primary rounded-t text-white mb-2
+  @apply bg-primary rounded-t text-white mb-2;
 }
 
-:deep(.p-panel){
-  @apply bg-gray-100
+:deep(.p-panel) {
+  @apply bg-gray-100;
 }
-</style>
+</style>
\ No newline at end of file

src/pages/community/[community]/index.vue

@@ -22,15 +22,19 @@
         {{ t('community.homepage.searchBarLegend') }}
       </h3>
 
+      <form v-on:submit="search">
       <IconField class="w-full mt-4 mb-4">
-        <InputText
-          id="search"
-          fluid
-          size="large"
-          :placeholder="t('community.homepage.searchBarPlaceholder')"
-        />
-        <InputIcon class="fa-solid fa-magnifying-glass" />
-      </IconField>
+          <InputText
+            id="search"
+            v-model="queryString"
+            fluid
+            size="large"
+            :placeholder="t('community.homepage.searchBarPlaceholder')"
+          />
+          <InputIcon class="fa-solid fa-magnifying-glass" @click="search"/>
+        </IconField>
+    </form>
+
     </section>
 
     <section
@@ -71,7 +75,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useAccountStore } from '@/stores/account'
 import { useI18n } from 'vue-i18n'
 import { useTranslateValue } from '@/composables/useTranslateValue'
@@ -85,6 +89,7 @@ import { getColor } from '@/helpers/communityColor'
 import { useCommunityData } from '@/dataLoaders/community'
 import { useTreeStore } from '@/stores/tree'
 import { useAbility } from '@casl/vue'
+import { useRouter } from 'vue-router'
 
 definePage({
   name: 'community',
@@ -98,9 +103,10 @@ treeStore.state.selectedNodeKey = undefined
 
 const { data: community } = useCommunityData()
 
-const { t } = useI18n()
+const { locale, t } = useI18n()
 const { translateValue } = useTranslateValue()
 const { cannot } = useAbility()
+const router = useRouter()
 
 const account = useAccountStore()
 
@@ -108,4 +114,24 @@ const title = computed(() => translateValue(community.value?.title))
 const abstract = computed(() => translateValue(community.value?.abstract))
 const logoUrl = computed(() => community.value?.logo ?? null)
 const color = computed(() => getColor(community.value))
+
+const isMemberOfCurrentCommunity = computed(
+  () => community.value?.['@id'] && memberCommunitiesList.value.includes(community.value?.['@id'])
+)
+
+const queryString = ref('')
+
+const search = () => {
+  router.push({
+    name: 'community.search',
+    params: {
+      lang: locale.value,
+      community: community.value.name,
+    },
+    query: {
+      q: queryString.value,
+      start: 0
+    }
+  })
+}
 </script>

src/sparql/search.ts

@@ -7,34 +7,36 @@ import { resourceContext } from './resource'
  * Get results URI of a search query
  */
 export const searchResources = async (query: OcSearchQuery, auth?: Credentials) => {
-  let typeFilter = ""
-  if (query.resourceType?.length){
-    typeFilter = "FILTER (?type = <"
+  let typeFilter = ''
+  if (query.resourceType?.length) {
+    typeFilter = 'FILTER (?type = <'
     typeFilter += query.resourceType.join('> || ?type = <')
-    typeFilter += ">)"
+    typeFilter += '>)'
   }
 
-  let queryFilter = ""
-  if (query.queryString){
+  let queryFilter = ''
+  if (query.queryString) {
     queryFilter = `FILTER regex(?o, "${query.queryString}", "i")`
   }
 
-  const res =  await executeSparqlSelect(
-  `
+  const res = await executeSparqlSelect(
+    `
       SELECT DISTINCT ?resource
       WHERE {
         ?resource rdf:type ?type.
+        ?resource dct:identifier ?identifier.
         ${typeFilter}
         FILTER EXISTS {
           VALUES ?p { dct:title dct:description }
           ?resource ?p ?o
           ${queryFilter}
         }
-      }
+      } ORDER BY ASC(?identifier)
     `,
-  {
-    auth: auth,
-  })
+    {
+      auth: auth
+    }
+  )
 
   return res.map((result) => result.resource.value)
 }
@@ -42,7 +44,25 @@ export const searchResources = async (query: OcSearchQuery, auth?: Credentials)
 /** Get searchResults objects from URI list */
 export const getSearchResults = async (resourceUriList: string[], auth?: Credentials) => {
   const searchResultContext: ContextDefinition = {
-    ...resourceContext,
+    '@type': {
+      '@container': '@set'
+    },
+    identifier: {
+      '@id': 'http://purl.org/dc/terms/identifier'
+    },
+    title: {
+      '@id': 'http://purl.org/dc/terms/title',
+      '@container': '@language'
+    },
+    description: {
+      '@id': 'http://purl.org/dc/terms/description',
+      '@container': '@language'
+    },
+    graph: {
+      '@id': 'https://www.irit.fr/opencommon/terms/graph',
+      '@type': '@id',
+      '@container': ['@set']
+    },
     catalog: {
       '@id': 'http://www.w3.org/ns/dcat#catalog',
       '@type': '@id',
@@ -57,17 +77,17 @@ export const getSearchResults = async (resourceUriList: string[], auth?: Credent
       '@id': 'http://www.w3.org/ns/dcat#distribution',
       '@type': '@id',
       '@container': '@set'
-    },
+    }
   }
 
   const formattedUris = '<' + resourceUriList.join('> <') + '>'
 
   return await executeSparqlConstruct<OcSearchResult>(
-  `
+    `
       CONSTRUCT {
         ?s ?p ?o.
         ?s oct:graph ?g.
-        ?s dcat:dataset ?dataset
+        ?s dct:identifier ?identifier.
       }
       WHERE {
         VALUES ?s { ${formattedUris} }
@@ -88,8 +108,9 @@ export const getSearchResults = async (resourceUriList: string[], auth?: Credent
         }
       }
     `,
-  {
-    context: searchResultContext,
-    auth: auth,
-  })
-}
+    {
+      context: searchResultContext,
+      auth: auth
+    }
+  )
\ No newline at end of file
+}

typed-router.d.ts

@@ -30,7 +30,7 @@ declare module 'vue-router/auto-routes' {
     'community.dashboard.dataset': RouteRecordInfo<'community.dashboard.dataset', '/:lang/community/:community/dashboard/dataset', { community: ParamValue<true> }, { community: ParamValue<false> }>,
     'community.datasets.new': RouteRecordInfo<'community.datasets.new', '/:lang/community/:community/dataset/new', { community: ParamValue<true> }, { community: ParamValue<false> }>,
     'community.join': RouteRecordInfo<'community.join', '/:lang/community/:community/join', { community: ParamValue<true> }, { community: ParamValue<false> }>,
-    '/:lang/community/[community].search': RouteRecordInfo<'/:lang/community/[community].search', '/:lang/community/:community/search', { community: ParamValue<true> }, { community: ParamValue<false> }>,
+    'community.search': RouteRecordInfo<'community.search', '/:lang/community/:community/search', { community: ParamValue<true> }, { community: ParamValue<false> }>,
     'connection': RouteRecordInfo<'connection', '/:lang/connection', Record<never, never>, Record<never, never>>,
     'logout': RouteRecordInfo<'logout', '/:lang/logout', Record<never, never>, Record<never, never>>,
     'profile': RouteRecordInfo<'profile', '/:lang/profile', Record<never, never>, Record<never, never>>,