slight refactor on displaying the query 'name'

acdh-oeaw · Aug 11, 2024 · c5b7616 · c5b7616
1 parent 88ed40f
commit c5b7616
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 29 deletions.
diff --git a/src/components/DataDisplay/DataDisplayKeywordInContext.vue b/src/components/DataDisplay/DataDisplayKeywordInContext.vue
@@ -108,12 +108,10 @@ const showIds = ref(false);
 			<div v-for="(query, index) of queries" :key="query.id">
 				<VCheckbox v-model="showViewOptionsMode" :label="t('viewOptions')"></VCheckbox>
 				<KWICAttributeSelect v-if="showViewOptionsMode" :query="query" @refresh="refresh()" />
-				<div v-if="!KWICresultsLoading[index]">
-					<span :style="`color: ${query.color}`">
-						{{ query.type }}: {{ query.userInput }}
-						<CorpusChip :query="query" />
-					</span>
+				<div>
+					<QueryDisplay :query="query" :loading="KWICresultsLoading[index]" />
 					<VDataTable
+						v-if="!KWICresultsLoading[index]"
 						density="compact"
 						:headers="headers"
 						item-value="docid"
@@ -141,7 +139,6 @@ const showIds = ref(false);
 						@close="selectedKWIC = null"
 					/>
 				</div>
-				<VProgressCircular v-else :color="query.color" indeterminate></VProgressCircular>
 			</div>
 		</VCardText>
 

diff --git a/src/components/DataDisplay/DataDisplayMediaSource.vue b/src/components/DataDisplay/DataDisplayMediaSource.vue
@@ -97,8 +97,7 @@ const isStacked = computed(() => chartMode.value === "stack");
 			</div>
 			<div v-for="(query, index) of queries" :key="query.id">
 				<div v-if="sourceDistributionsLoading[index]">
-					<VProgressCircular :color="query.color" indeterminate></VProgressCircular>
-					<span :style="`color: ${query.color}`">{{ query.type }}: {{ query.userInput }}</span>
+					<QueryDisplay :query="query" :loading="sourceDistributionsLoading[index]" />
 				</div>
 			</div>
 			<!-- {{ series }} -->

diff --git a/src/components/DataDisplay/DataDisplayRegionalFrequencies.vue b/src/components/DataDisplay/DataDisplayRegionalFrequencies.vue
@@ -120,19 +120,9 @@ const expand = ref(false);
 			<!-- <JsonViewer boxed :value="regionalFrequencies" :expand-depth="5"></JsonViewer> -->
 
 			<div v-for="(query, index) of queries" :key="query.id">
-				<div v-if="regionalFrequenciesLoading[index]" class="mt-1">
-					<VProgressCircular :color="query.color" indeterminate></VProgressCircular>
-					<span :style="`color: ${query.color}`">
-						{{ query.type }}: {{ query.userInput }}
-						<CorpusChip :query="query" />
-					</span>
-				</div>
-			</div>
-			<div v-for="(query, index) of queries" :key="query.id">
-				<div v-if="!regionalFrequenciesLoading[index]" class="mt-1">
-					<span :style="`color: ${query.color}`">{{ query.type }}: {{ query.userInput }}</span>
-					<CorpusChip :query="query" />
-					<ClientOnly>
+				<div class="mt-1">
+					<QueryDisplay :query="query" :loading="regionalFrequenciesLoading[index]" />
+					<ClientOnly v-if="!regionalFrequenciesLoading[index]">
 						<MapChart
 							v-if="!isCombined"
 							:query="query"

diff --git a/src/components/DataDisplay/DataDisplayWordFormFrequencies.vue b/src/components/DataDisplay/DataDisplayWordFormFrequencies.vue
@@ -73,10 +73,7 @@ const expand = ref(false);
 				<VBtn variant="outlined" value="relative">{{ t("relative") }}</VBtn>
 			</VBtnToggle>
 			<div v-for="(query, index) of queries" :key="query.id">
-				<div v-if="wordFormFrequenciesLoading[index]">
-					<VProgressCircular :color="query.color" indeterminate></VProgressCircular>
-					<span :style="`color: ${query.color}`">{{ query.type }}: {{ query.userInput }}</span>
-				</div>
+				<QueryDisplay :query="query" :loading="wordFormFrequenciesLoading[index]" />
 				<HighCharts
 					:options="{
 						chart: {

diff --git a/src/components/DataDisplay/DataDisplayYearlyFrequencies.vue b/src/components/DataDisplay/DataDisplayYearlyFrequencies.vue
@@ -96,10 +96,7 @@ const series = computed(() =>
 				<VBtn variant="outlined" value="relative">{{ t("relative") }}</VBtn>
 			</VBtnToggle>
 			<div v-for="(query, index) of queries" :key="query.id">
-				<div v-if="yearlyFrequenciesLoading[index]">
-					<VProgressCircular :color="query.color" indeterminate></VProgressCircular>
-					<span :style="`color: ${query.color}`">{{ query.type }}: {{ query.userInput }}</span>
-				</div>
+				<QueryDisplay :query="query" :loading="yearlyFrequenciesLoading[index]" />
 			</div>
 			<HighCharts
 				:options="{

diff --git a/src/components/QueryDisplay.vue b/src/components/QueryDisplay.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+defineProps<{ query: CorpusQuery; loading: { type: boolean; default: false } }>();
+</script>
+
+<template>
+	<div class="my-1">
+		<VProgressCircular
+			v-if="loading"
+			class="mr-1"
+			:color="query.color"
+			indeterminate
+		></VProgressCircular>
+		<span :style="`color: ${query.color}`">{{ query.type }}: {{ query.userInput }}</span>
+		<CorpusChip class="ml-1" :query="query" />
+	</div>
+</template>
+
+<style lang="postcss" scoped></style>