From a7a2ef7bf67237b1ab776438ba344cb0148793f2 Mon Sep 17 00:00:00 2001 From: bkis Date: Thu, 7 Mar 2024 16:39:54 +0100 Subject: [PATCH] Draft search results UI --- Tekst-Web/package-lock.json | 21 +++--- Tekst-Web/src/api/schema.d.ts | 7 ++ Tekst-Web/src/assets/main.css | 4 ++ .../src/components/search/SearchResult.vue | 70 +++++++++++++++++-- Tekst-Web/src/views/SearchResultsView.vue | 37 ++++++++-- Tekst-Web/src/views/SearchView.vue | 20 +++++- Tekst-Web/translations/ui/deDE.yml | 2 + Tekst-Web/translations/ui/enUS.yml | 2 + 8 files changed, 143 insertions(+), 20 deletions(-) diff --git a/Tekst-Web/package-lock.json b/Tekst-Web/package-lock.json index 6231f727..115feee9 100644 --- a/Tekst-Web/package-lock.json +++ b/Tekst-Web/package-lock.json @@ -1561,9 +1561,9 @@ } }, "node_modules/@types/node": { - "version": "20.11.24", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.24.tgz", - "integrity": "sha512-Kza43ewS3xoLgCEpQrsT+xRo/EJej1y0kVYGiLFE1NEODXGzTfwiC6tXTLMQskn1X4/Rjlh0MQUvx9W+L9long==", + "version": "20.11.25", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.25.tgz", + "integrity": "sha512-TBHyJxk2b7HceLVGFcpAUjsa5zIdsPWlR6XHfyGzd0SFu+/NFgQgMAl96MSDZgQDvJAvV6BKsFOrt6zIL09JDw==", "dev": true, "dependencies": { "undici-types": "~5.26.4" @@ -5320,15 +5320,18 @@ } }, "node_modules/unplugin": { - "version": "1.8.1", - "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.8.1.tgz", - "integrity": "sha512-NDAvOEnZmeSRRmjfD0FoLzfve2/9lqceO5bR4J/2V72zphnFdq7UYo3fg6F1y1HfZEaSHa+7bZgbEN+z5x8ZDQ==", + "version": "1.8.3", + "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.8.3.tgz", + "integrity": "sha512-ZlLteXGDcyJgsbN2g4sZ3Dw6fpX1O5rjgeaA5MmQhhA2YxnTxsh43f8nDQgFOzcir0iv8GYMjtCV8MtyNnrhEg==", "dev": true, "dependencies": { "acorn": "^8.11.3", "chokidar": "^3.6.0", "webpack-sources": "^3.2.3", "webpack-virtual-modules": "^0.6.1" + }, + "engines": { + "node": ">=14.0.0" } }, "node_modules/uri-js": { @@ -5750,9 +5753,9 @@ "dev": true }, "node_modules/yaml": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.0.tgz", - "integrity": "sha512-j9iR8g+/t0lArF4V6NE/QCfT+CO7iLqrXAHZbJdo+LfjqP1vR8Fg5bSiaq6Q2lOD1AUEVrEVIgABvBFYojJVYQ==", + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.1.tgz", + "integrity": "sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==", "dev": true, "bin": { "yaml": "bin.mjs" diff --git a/Tekst-Web/src/api/schema.d.ts b/Tekst-Web/src/api/schema.d.ts index 9aa35e61..5e41d124 100644 --- a/Tekst-Web/src/api/schema.d.ts +++ b/Tekst-Web/src/api/schema.d.ts @@ -2170,6 +2170,8 @@ export interface components { id: string; /** Label */ label: string; + /** Fulllabel */ + fullLabel: string; /** * Textid * @example 5eb7cf5a86d9755df3a6c593 @@ -2197,6 +2199,11 @@ export interface components { totalHitsRelation: 'eq' | 'gte'; /** Maxscore */ maxScore: number | null; + /** + * Indexcreationtime + * Format: date-time + */ + indexCreationTime: string; }; /** TekstErrorModel */ TekstErrorModel: { diff --git a/Tekst-Web/src/assets/main.css b/Tekst-Web/src/assets/main.css index 38de8401..ee9bdd9a 100644 --- a/Tekst-Web/src/assets/main.css +++ b/Tekst-Web/src/assets/main.css @@ -187,3 +187,7 @@ img { .n-thing-header__title { font-size: var(--font-size) !important; } + +.n-list-item__main { + min-width: 0; +} diff --git a/Tekst-Web/src/components/search/SearchResult.vue b/Tekst-Web/src/components/search/SearchResult.vue index dc54aebc..21cea03d 100644 --- a/Tekst-Web/src/components/search/SearchResult.vue +++ b/Tekst-Web/src/components/search/SearchResult.vue @@ -1,26 +1,84 @@ + + diff --git a/Tekst-Web/src/views/SearchResultsView.vue b/Tekst-Web/src/views/SearchResultsView.vue index eaad1cd6..ccda01d1 100644 --- a/Tekst-Web/src/views/SearchResultsView.vue +++ b/Tekst-Web/src/views/SearchResultsView.vue @@ -2,7 +2,7 @@ import IconHeading from '@/components/generic/IconHeading.vue'; import { SearchResultsIcon } from '@/icons'; import SearchResult from '@/components/search/SearchResult.vue'; -import { NList } from 'naive-ui'; +import { NList, NTime } from 'naive-ui'; import { usePlatformData } from '@/composables/platformData'; import { computed, onBeforeMount, ref } from 'vue'; import { GET, type SearchResults } from '@/api'; @@ -18,16 +18,20 @@ const resultsData = ref(); const results = computed( () => resultsData.value?.hits.map((r) => { - const text = pfData.value?.texts.find((t) => t.id === r.id); + const text = pfData.value?.texts.find((t) => t.id === r.textId); return { id: r.id, label: r.label, + fullLabel: r.fullLabel, text: text?.title || '', textColor: text?.accentColor || '#000', level: r.level, levelLabel: state.textLevelLabels[r.level] || '', position: r.position, - score: r.score, + scorePercent: resultsData.value?.maxScore + ? (r.score / resultsData.value?.maxScore) * 100 + : 0, + smallScreen: state.smallScreen, }; }) || [] ); @@ -64,8 +68,33 @@ onBeforeMount(async () => { {{ $t('search.results.heading') }} +
+
+ {{ + $t('search.results.results', { + count: (resultsData.totalHitsRelation === 'eq' ? '' : '≥') + resultsData.totalHits, + ms: resultsData.took, + }) + }} +
+
+ {{ $t('search.results.indexCreationTime') }}: + +
+
+
- + diff --git a/Tekst-Web/translations/ui/deDE.yml b/Tekst-Web/translations/ui/deDE.yml index f9000ff7..9bf4894a 100644 --- a/Tekst-Web/translations/ui/deDE.yml +++ b/Tekst-Web/translations/ui/deDE.yml @@ -677,6 +677,8 @@ search: heading: Globale Sucheinstellungen results: heading: Suchergebnisse + results: '{count} Ergebnisse in {ms} Millisekunden' + indexCreationTime: Stand der Daten für diese Suche nothingFound: Nichts gefunden help: diff --git a/Tekst-Web/translations/ui/enUS.yml b/Tekst-Web/translations/ui/enUS.yml index 4e21cc3f..ad2d4a21 100644 --- a/Tekst-Web/translations/ui/enUS.yml +++ b/Tekst-Web/translations/ui/enUS.yml @@ -653,6 +653,8 @@ search: heading: Global Search Settings results: heading: Search Results + results: '{count} results in {ms} milliseconds' + indexCreationTime: State of data for this search nothingFound: Nothing found help: