Merge branch '28-issue' into 'main'

Resolve "Zoekresultaten in KOOP stijl" Closes MinBZK#28 See merge request ictu/devops/algoritmeregister/algoritmeregister!10
floort · Dec 6, 2022 · 4addeab · 4addeab
2 parents 61f1b47 + 315caae
commit 4addeab
Show file tree

Hide file tree

Showing 5 changed files with 142 additions and 71 deletions.
diff --git a/frontend/components/Pagination.vue b/frontend/components/Pagination.vue
@@ -1,4 +1,28 @@
 <template>
+  <!-- <div class="pagination">
+    <div class="pagination__index">
+      <ul>
+        <li class="prev">
+          <a href="#"><span class="">Vorige pagina</span></a>
+        </li>
+        <li class="">
+          <a href="#"><span class="visually-hidden">Pagina: </span>3</a>
+        </li>
+        <li aria-current="page" class="active">
+          <span class="visually-hidden">Pagina: </span>4
+        </li>
+        <li class="">
+          <a href="#"><span class="visually-hidden">Pagina: </span>...</a>
+        </li>
+        <li class="">
+          <a href="#"><span class="visually-hidden">Pagina: </span>102</a>
+        </li>
+        <li class="next">
+          <a href="#"><span class="">Volgende pagina</span></a>
+        </li>
+      </ul>
+    </div>
+  </div> -->
   <nav role="navigation" aria-label="Paginering navigatie">
     <div
       class="pagenumber"

diff --git a/frontend/components/SearchResultCard.vue b/frontend/components/SearchResultCard.vue
@@ -0,0 +1,43 @@
+<template>
+  <li class="item">
+    <div class="item-header">
+      <a :href="`/algoritme/${props.algoritme.id}`" class="result--title">
+        {{ props.algoritme.name }}
+      </a>
+    </div>
+    <p>{{ truncatedDescription }}&nbsp;<a :href="`/algoritme/${props.algoritme.id} `" v-if="isTruncated">lees meer </a></p>
+
+    <p>
+    <dl class="dl columns--data">
+      <div v-for="sT in summaryTiles">
+        <dt>{{
+            t(`algorithmProperties.algemeneInformatie.${sT}.label`)
+        }}</dt>
+        <dd class="word-break">{{ algoritme[sT as keyof typeof algoritme] }}</dd>
+      </div>
+    </dl>
+    </p>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { summaryTiles } from '@/config/config'
+import { useI18n } from 'vue-i18n'
+import type { Algoritme } from '@/types/algoritme'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  algoritme: Algoritme
+}>()
+
+const length = 300
+const truncatedDescription = computed(() => {
+  const truncatedString = props.algoritme.description_short.substring(0, length)
+  return truncatedString == props.algoritme.description_short ? props.algoritme.description_short : truncatedString + '...'
+})
+
+const isTruncated = computed(() => {
+  return truncatedDescription.value != props.algoritme.description_short.substring(0,length)
+})
+</script>
diff --git a/frontend/components/Sort.vue b/frontend/components/Sort.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="sort">
+    <div class="columns">
+      <div class="column">
+        Sorteer op:
+        <ul class="sort__options">
+          <li>
+            <a
+              href="#"
+              role="button"
+              class="sort--ascending is-active"
+              aria-current="true"
+              ><span class="visually-hidden">Sorteer op: </span>Datum<span
+                class="visually-hidden"
+              >
+                oplopend</span
+              ></a
+            >
+          </li>
+          <li>
+            <a
+              href="#"
+              role="button"
+              class="sort--ascending"
+              aria-current="false"
+              ><span class="visually-hidden">Sorteer op: </span>Titel<span
+                class="visually-hidden"
+              >
+                oplopend</span
+              ></a
+            >
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
@@ -5,7 +5,7 @@
   "locale-en": "English",
   "locale-nl": "Dutch",
   "selectLanguage": "Choose language",
-  "foundResults": "Found {n} results",
+  "foundResults": "{n} results found",
   "noResults": "No algorithm was found for this search request.",
   "footer": {
     "text": "Note: this website is under development. Information will change often. Do you want to help?",

diff --git a/frontend/pages/algoritme/index.vue b/frontend/pages/algoritme/index.vue
@@ -3,80 +3,54 @@
     <SearchFunction
       v-bind:value="searchQuery"
       @input="(v) => (searchQuery = v)"
-    >
-    </SearchFunction>
-    <v-row>
-      <v-col :cols="isMobile ? 12 : 3">
-        <AlgoritmeFilters :aggregatedAlgoritmes="aggregatedAlgoritmes" />
-      </v-col>
-
-      <v-col>
-        <v-row>
-          <v-col
-            ><h2>
-              {{ $t(`foundResults`, { n: filteredAlgoritmes.length }) }}
-            </h2></v-col
-          >
-        </v-row>
-
-        <div v-for="algoritme in paginatedAlgoritmes">
-          <h3>
-            <NuxtLink :to="`/algoritme/${algoritme.id}`">
-              {{ algoritme.name }}
-            </NuxtLink>
-          </h3>
-          <v-row>
-            <v-col>
-              {{ algoritme.description_short }}
-            </v-col>
-          </v-row>
-          <v-row class="mt-3">
-            <v-col v-for="sT in summaryTiles"
-              ><h4>
-                {{ $t(`algorithmProperties.algemeneInformatie.${sT}.label`) }}
-              </h4>
-              {{ algoritme[sT as keyof typeof algoritme] }}</v-col
-            >
-          </v-row>
-          <v-divider></v-divider>
-        </div>
-
-        <div v-if="paginatedAlgoritmes.length == 0">
-          {{ $t('noResults') }}
+    ></SearchFunction>
+
+    <div class="row container columns columns--sidebar-left">
+      <div>
+        <h1>{{ t(`foundResults`, { n: filteredAlgoritmes.length }) }}</h1>
+        <Pagination
+          v-if="paginatedAlgoritmes.length != 0"
+          :current-page="page"
+          :page-length="nPages"
+          @setPage="(p) => (page = p)"
+        />
+        <!-- <Sort /> -->
+        <div class="result--list result--list__data">
+          <ul v-if="paginatedAlgoritmes.length != 0">
+            <SearchResultCard
+              :algoritme="algoritme"
+              v-for="algoritme in paginatedAlgoritmes"
+            ></SearchResultCard>
+          </ul>
+          <div v-if="paginatedAlgoritmes.length == 0">
+            {{ t('noResults') }}
+          </div>
         </div>
-
-        <v-row v-if="filteredAlgoritmes.length > 1">
-          <v-col :cols="6" class="text-grey"
-            >{{ $t(`foundResults`, { n: filteredAlgoritmes.length }) }}
-          </v-col>
-          <v-col :cols="isMobile ? 12 : 6">
-            <Pagination
-              :current-page="page"
-              :page-length="nPages"
-              @setPage="(p) => (page = p)"
-            />
-          </v-col>
-        </v-row>
-      </v-col>
-    </v-row>
+        <Pagination
+          v-if="paginatedAlgoritmes.length != 0"
+          :current-page="page"
+          :page-length="nPages"
+          @setPage="(p) => (page = p)"
+        />
+      </div>
+      <div v-if="paginatedAlgoritmes.length != 0">
+        <AlgoritmeFilters :aggregatedAlgoritmes="aggregatedAlgoritmes" />
+      </div>
+    </div>
   </Page>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import Page from '@/components/PageWrapper.vue'
 import algoritmeService from '@/services/algoritme'
 import { useI18n } from 'vue-i18n'
-import { summaryTiles } from '@/config/config'
 import type {
   Algoritme,
   AggregatedAlgoritmes,
   AlgoritmeFilter,
 } from '@/types/algoritme'
 import AlgoritmeFilters from '@/components/algoritme/AlgoritmeFilters.vue'
 
-const isMobile = useMobileBreakpoint()
-
 const { t } = useI18n()
 
 definePageMeta({
@@ -162,18 +136,11 @@ watch(searchQuery, () => {
 
 <style scoped lang="scss">
 @import '/assets/styles/main.scss';
-.v-divider {
-  margin: 1em 0;
-}
-.text-field-sheet {
-  background-color: $quaternary;
-}
 
-h3 {
-  margin-bottom: 0.5em;
+.item-header {
+  margin-bottom: 15px;
 }
-
-h3 a {
-  text-decoration: none;
+.word-break {
+  word-break: break-word;
 }
 </style>