Merge branch 'dev'

CHANGELOG.md

@@ -13,7 +13,14 @@ As this project is a user-facing application, the places in the semantic version
 
 ## [Unreleased]
 
-### [2.5.0] (2023-12-20)
+## [2.5.1] (2023-12-27)
+
+### Fixed
+
+- Bug when erasing thesaurus search text
+- Reset sort when clicking logo
+
+## [2.5.0] (2023-12-20)
 
 ### Added
 
@@ -320,7 +327,8 @@ As this project is a user-facing application, the places in the semantic version
 
 This date marks the public release of the website. It features a search interface for the Queerlit bibliography, as well as a thesaurus browser for the QLIT thesaurus. Change up until this point are not documented other than in the git commit log.
 
-[unreleased]: https://github.com/gu-gridh/queerlit-gui/compare/v2.5.0...HEAD
+[unreleased]: https://github.com/gu-gridh/queerlit-gui/compare/v2.5.1...HEAD
+[2.5.1]: https://github.com/gu-gridh/queerlit-gui/compare/v2.5.0...v2.5.1
 [2.5.0]: https://github.com/gu-gridh/queerlit-gui/compare/v2.4.0...v2.5.0
 [2.4.0]: https://github.com/gu-gridh/queerlit-gui/compare/v2.3.0...v2.4.0
 [2.3.0]: https://github.com/gu-gridh/queerlit-gui/compare/v2.2.7...v2.3.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "queerlit-gui",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "license": "MIT",
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -167,6 +167,7 @@ activateHistory();
 
 function reset() {
   queryStore.resetQuery();
+  store.sort = "-meta.modified";
   doSearch();
 }
 

src/terms/TermTreeList.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { vElementVisibility } from "@vueuse/components";
+import TermTree from "./TermTree.vue";
+import LoadingSpinner from "@/components/LoadingSpinner.vue";
+import type { QlitTerm } from "@/services/qlit.types";
+
+const props = defineProps<{
+  heading?: string;
+  terms?: QlitTerm[];
+}>();
+
+const PAGE_SIZE = 15;
+const limit = ref(PAGE_SIZE);
+const termsLimited = computed(() => props.terms?.slice(0, limit.value));
+
+function onBottomVisibility(visible: boolean) {
+  if (visible && props.terms && props.terms.length > limit.value) {
+    limit.value += PAGE_SIZE;
+  }
+}
+</script>
+
+<template>
+  <section>
+    <h1 v-if="heading" class="text-4xl mb-6">
+      {{ heading }}
+    </h1>
+
+    <template v-if="terms">
+      <TermTree
+        v-for="term in termsLimited"
+        :key="term.name"
+        :parent="term"
+        :level="0"
+      />
+    </template>
+
+    <LoadingSpinner v-if="!terms" />
+    <div v-else-if="!terms.length" class="my-8 text-center text-xl">
+      Inga träffar!
+    </div>
+
+    <div v-element-visibility="onBottomVisibility"></div>
+  </section>
+</template>

src/terms/ThesaurusInfo.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useRouter } from "vue-router";
+import debounce from "lodash/debounce";
 import type { QlitCollection } from "@/services/qlit.types";
 import useRootStore from "@/stores/root.store";
 import LabeledSection from "@/components/LabeledSection.vue";
@@ -11,7 +12,7 @@ const router = useRouter();
 
 const termTextQuery = computed({
   get: () => store.termTextQuery,
-  set: (value) => store.setTermTextQuery(value),
+  set: debounce(store.setTermTextQuery, 400),
 });
 
 function selectCollection(collection: QlitCollection) {

src/views/ThesaurusView.vue

@@ -1,91 +1,66 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch, watchEffect } from "vue";
-import { vElementVisibility } from "@vueuse/components";
-import debounce from "lodash/debounce";
+import { onMounted, ref, watch } from "vue";
 import useRootStore from "@/stores/root.store";
 import useTerms from "@/terms/terms.composable";
-import TermTree from "@/terms/TermTree.vue";
-import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import type { QlitTerm } from "@/services/qlit.types";
 import { getCollection } from "@/services/terms.service";
 import { useRouteInfo } from "./routeInfo.composable";
+import TermTreeList from "@/terms/TermTreeList.vue";
 
-const PAGE_SIZE = 15;
-
-const { getRoots, searchTerms } = useTerms();
-const rootTerms = ref<QlitTerm[]>([]);
-const terms = ref<QlitTerm[]>([]);
 const store = useRootStore();
+const { getRoots, searchTerms } = useTerms();
 const { setRouteInfo } = useRouteInfo();
 
-const limit = ref(PAGE_SIZE);
-const termsLimited = computed(() => terms.value.slice(0, limit.value));
-const isLoading = ref(false);
-const heading = ref<string>();
+// Undefined means loading, [] means no results
+const termsRoot = ref<QlitTerm[] | undefined>(undefined);
+const termsSearched = ref<QlitTerm[] | undefined>(undefined);
+const termsCollection = ref<QlitTerm[] | undefined>(undefined);
 
 setRouteInfo({
   title: "Ämnen",
   description:
     "Till Queerlit-databasen skapas en tesaurus, det vill säga en ordlista som sorterar ämnesord, för att göra skönlitteraturen i databasen mer lättillgänglig.",
 });
 
-onMounted(async () => {
-  isLoading.value = true;
-  rootTerms.value = await getRoots();
-  isLoading.value = false;
-});
-
-// A debounced function for loading terms matching text input
-const findTerms = debounce(async () => {
-  isLoading.value = true;
-  terms.value = await searchTerms(store.termTextQuery);
-  isLoading.value = false;
-}, 400);
+onMounted(async () => (termsRoot.value = await getRoots()));
 
-// Reactively determine what terms to show
-watchEffect(async () => {
-  if (store.termTextQuery) {
-    // A text query has been entered
-    heading.value = `Ämnen på "${store.termTextQuery}"`;
-    findTerms();
-  } else if (store.termCollection) {
-    // A collection is selected
-    heading.value = store.termCollection.label;
-    isLoading.value = true;
-    terms.value = await getCollection(store.termCollection.name);
-    isLoading.value = false;
-  } else {
-    // Default case: show root terms
-    heading.value = "Ämnesträd";
-    terms.value = rootTerms.value;
-  }
-});
-
-watch(terms, () => {
-  limit.value = PAGE_SIZE;
-});
+// Search terms when query is changed
+watch(
+  () => store.termTextQuery,
+  async () => {
+    termsSearched.value = undefined;
+    termsSearched.value = await searchTerms(store.termTextQuery);
+  },
+  { immediate: true },
+);
 
-function onBottomVisibility(visible: boolean) {
-  if (visible && terms.value.length > limit.value) {
-    limit.value += PAGE_SIZE;
-  }
-}
+// Load terms in a selected collection
+watch(
+  () => store.termCollection,
+  async (collection) => {
+    termsCollection.value = undefined;
+    if (collection)
+      termsCollection.value = await getCollection(collection.name);
+  },
+  { immediate: true },
+);
 </script>
 
 <template>
   <div class="container py-6">
-    <LoadingSpinner v-if="isLoading" />
-    <div v-else-if="terms.length" :key="store.termTextQuery">
-      <h1 v-if="heading" class="text-4xl mb-6">{{ heading }}</h1>
-      <TermTree
-        v-for="term in termsLimited"
-        :key="term.name"
-        :parent="term"
-        :level="0"
-      />
-      <div v-element-visibility="onBottomVisibility"></div>
-    </div>
-    <div v-else class="my-8 text-center text-xl">Inga träffar!</div>
+    <TermTreeList
+      v-if="store.termTextQuery"
+      :heading="`Ämnen på &quot;${store.termTextQuery}&quot;`"
+      :terms="termsSearched"
+    />
+
+    <TermTreeList
+      v-else-if="store.termCollection"
+      :heading="store.termCollection.label"
+      :terms="termsCollection"
+    />
+
+    <TermTreeList v-else heading="Ämnesträd" :terms="termsRoot" />
   </div>
 </template>