Finished a category grouped version of the search

codeformuenster · Sep 27, 2024 · 1b804f0 · 1b804f0
1 parent bf787fb
commit 1b804f0
Showing 1 changed file with 56 additions and 33 deletions.
diff --git a/components/Search/Search.vue b/components/Search/Search.vue
@@ -1,48 +1,71 @@
 <template>
   <div class="search">
-    <input type="text" placeholder="Suche nach Maßnahmen" v-model="suchstring" />
+    <input type="text" placeholder="Suche nach Maßnahmen" v-model="suchstring"/>
   </div>
   <div class="mearsure-grid">
-<!--    <slot></slot>-->
-    <template v-for="fuseresult in filteredMeasures" :key="fuseresult.item.id">
-      <NuxtLink :to="`/category/${fuseresult.item.categoryId}/measure/${fuseresult.item.id}`">
-        <Card>
-          <template #title>
-            {{ fuseresult.item['Action outline']?.['Action name'] }}
-            <Tag :value="fuseresult.item?.category" />
-          </template>
-        </Card>
-      </NuxtLink>
+    <template v-for="category in filteredCategories" :key="category">
+      <Card>
+        <template #title>
+          {{ category }}
+              <template v-for="fuseresult in filteredMeasures(category)" :key="fuseresult.item.id">
+                <NuxtLink :to="`/category/${fuseresult.item.categoryId}/measure/${fuseresult.item.id}`">
+                  <Card>
+                    <template #title>
+                      {{ fuseresult.item['Action outline']?.['Action name'] }}
+                      <Tag :value="fuseresult.item?.category"/>
+                    </template>
+                  </Card>
+                </NuxtLink>
+              </template>
+        </template>
+      </Card>
     </template>
   </div>
 
 </template>
 
 <script lang="ts" setup>
-  import type {Measure} from "~/dataProcessing/loadData";
-  import Fuse from 'fuse.js';
-  const props = defineProps<{
-    measures: Array<Measure>;
-  }>();
-
-  const suchstring = ref('');
-
-  const options = {
-    includeScore: true,
-    // Search in `author` and in `tags` array
-    keys: [
-      { name: 'name', getFn: (measure: Measure) => measure["Action outline"]?.["Action name"] },
-    ]
-  }
+import type {Measure} from "~/dataProcessing/loadData";
+import Fuse from 'fuse.js';
+
+const props = defineProps<{
+  measures: Array<Measure>;
+}>();
+
+const suchstring = ref('');
+
+const options = {
+  includeScore: true,
+  shouldSort: false,
+  threshold: 0.3,
+  // Search in `author` and in `tags` array
+  keys: [
+      "Action outline.Action name",
+      "category",
+  ],
+}
 
-  const fuse = new Fuse(props.measures,options)
+const fuse = new Fuse(props.measures, options)
 
-  const filteredMeasures = computed(() => {
-    if ("" === suchstring.value) {
-      return props.measures.map((item) => ({ item, score: 0 }));
-    }
-    return fuse.search(suchstring.value)
-  })
+const filteredCategories = computed(() => {
+  let fuseresults;
+  if ("" === suchstring.value) {
+    fuseresults = props.measures.map((item) => ({item, score: 0}));
+  } else {
+    fuseresults = fuse.search(suchstring.value)
+  }
+  const categories = new Set();
+  fuseresults.forEach(fuseresult => categories.add(fuseresult.item.category));
+  return Array.from(categories);
+})
+
+const filteredMeasures = function(category) {
+  if ("" === suchstring.value) {
+    return props.measures.filter((measure) => measure.category === category).map((item) => ({item, score: 0}));
+  }
+  const fuseresults = fuse.search(suchstring.value).filter((fuseresult) => fuseresult.item.category === category);
+  return fuseresults;
+};
 </script>
 
 <style scoped>