Dra filters release branch

src/App.vue

@@ -25,6 +25,8 @@
 		id="main-content"
 		class="content"
 	>
+		<Facets v-if="route.name === 'Search'"></Facets>
+		<Underlay></Underlay>
 		<router-view v-slot="{ Component }">
 			<transition
 				:name="transitionName || 'fade'"
@@ -47,15 +49,18 @@ import Spinner from '@/components/global/spinner/Spinner.vue';
 import { LocalStorageWrapper } from '@/utils/local-storage-wrapper';
 import Footer from '@/components/global/nav/Footer.vue';
 import Header from '@/components/search/Header.vue';
+import Facets from '@/components/search/Facets.vue';
 import { useAuthStore } from '@/store/authStore';
 import { APIService } from '@/api/api-service';
 import { APIAuthMessagesType, APISearchResponseType } from '@/types/APIResponseTypes';
 import { useSearchResultStore } from '@/store/searchResultStore';
 import { ErrorManagerType } from '@/types/ErrorManagerType';
 import { Priority, Severity } from '@/types/NotificationType';
+import Underlay from './components/search/Underlay.vue';
 import '@/assets/styles/font-styles.css';
 import '@/assets/styles/elements.css';
 import '@/assets/styles/base.css';
+import { startYear, endYear, startDate, endDate } from './components/common/timeSearch/TimeSearchInitValues.js';
 
 export default defineComponent({
 	name: 'App',
@@ -64,6 +69,8 @@ export default defineComponent({
 		Spinner,
 		Footer,
 		Header,
+		Facets,
+		Underlay,
 	},
 	setup() {
 		const td = ref(0.4);
@@ -126,6 +133,16 @@ export default defineComponent({
 					if (newVal) {
 						// ask for facets
 						const facetAPICall = APIService.getFullResultWithFacets();
+						APIService.getTVFacets().then((response) => {
+							searchResultStore.TVFacets = response.data.facet_counts.facet_fields.creator_affiliation_facet.filter(
+								(entry) => typeof entry === 'string',
+							);
+						});
+						APIService.getRadioFacets().then((response) => {
+							searchResultStore.RadioFacets = response.data.facet_counts.facet_fields.creator_affiliation_facet.filter(
+								(entry) => typeof entry === 'string',
+							);
+						});
 						let facetAPiCallFurfilled = false;
 						// timeout promise for long responsetimes. (7 seconds pt.)
 						const maximumWaitTime = new Promise<void>((resolve) => {
@@ -148,9 +165,28 @@ export default defineComponent({
 						Promise.race([facetAPICall, maximumWaitTime])
 							.then((response) => {
 								if (response) {
+									const isTimeFiltersSet =
+										startDate.value.getTime() !== startYear.value.getTime() ||
+										endDate.value.getTime() !== endYear.value.getTime();
+
 									//if api comes back first, we get the results and set our boolean to true.
 									const typedResponse = response as APISearchResponseType;
 									searchResultStore.initFacets = typedResponse.data.facet_counts;
+									const years = searchResultStore.initFacets.facet_fields.temporal_start_year;
+
+									startYear.value = new Date(startYear.value);
+									startYear.value.setFullYear(Number(years[0]));
+
+									endYear.value = new Date(endYear.value);
+									endYear.value.setFullYear(Number(years[years.length - 2]));
+
+									if (!isTimeFiltersSet) {
+										const startHolder = new Date(startYear.value.getTime());
+										const endHolder = new Date(endYear.value.getTime());
+										startDate.value = startHolder;
+										endDate.value = endHolder;
+									}
+
 									searchResultStore.firstBackendFetchExecuted = true;
 									facetAPiCallFurfilled = true;
 								}
@@ -161,8 +197,26 @@ export default defineComponent({
 								// if the timeout was first, we still want the api promise returned here
 								// unless it the results were already back - then we ignore this.
 								if (!facetAPiCallFurfilled) {
+									const isTimeFiltersSet =
+										startDate.value.getTime() !== startYear.value.getTime() ||
+										endDate.value.getTime() !== endYear.value.getTime();
 									const typedResponse = response as APISearchResponseType;
 									searchResultStore.initFacets = typedResponse.data.facet_counts;
+									const years = searchResultStore.initFacets.facet_fields.temporal_start_year;
+
+									startYear.value = new Date(startYear.value);
+									startYear.value.setFullYear(Number(years[0]));
+
+									endYear.value = new Date(endYear.value);
+									endYear.value.setFullYear(Number(years[years.length - 2]));
+
+									if (!isTimeFiltersSet) {
+										const startHolder = new Date(startYear.value.getTime());
+										const endHolder = new Date(endYear.value.getTime());
+										startDate.value = startHolder;
+										endDate.value = endHolder;
+									}
+
 									searchResultStore.firstBackendFetchExecuted = true;
 									facetAPiCallFurfilled = true;
 								}

src/api/api-client.ts

@@ -149,6 +149,14 @@ export class APIServiceClient {
 		return await this.httpClient.get(`bff/v1/proxy/search/?q=*&facet=true&facet.limit=-1&rows=0`);
 	}
 
+	async getRadioFacets(): Promise<APISearchResponseType> {
+		return await this.httpClient.get(`bff/v1/proxy/search/?q=*&facet=true&facet.limit=-1&rows=0&fq=origin:"ds.radio"`);
+	}
+
+	async getTVFacets(): Promise<APISearchResponseType> {
+		return await this.httpClient.get(`bff/v1/proxy/search/?q=*&facet=true&facet.limit=-1&rows=0&fq=origin:"ds.tv"`);
+	}
+
 	async getSearchResults(
 		query: string,
 		filters: string,

src/assets/styles/base.css

@@ -45,32 +45,32 @@ a{
 }
 
 /*Labels*/
-.label-small{
+.label-small {
     font-size: var(--fs-meta);
     line-height: var(--lh-large);
     font-weight: var(--fw-regular);
 }
-.label-small-bold{
+.label-small-bold {
     font-size: var(--fs-meta);
     line-height: var(--lh-large);
     font-weight: var(--fw-bold);
 }
-.label-regular{
+.label-regular {
     font-size: var(--fs-base);
     line-height: var(--lh-large);
     font-weight: var(--fw-regular);
 }
-.label-medium{
+.label-medium {
     font-size: var(--fs-lead);
     line-height: var(--lh-large-tight);
     font-weight: var(--fw-regular);
 }
-.label-medium-bold{
+.label-medium-bold {
     font-size: var(--fs-lead);
     line-height: var(--lh-large-tight);
     font-weight: var(--fw-bold);
 }
-.label-big{
+.label-big {
     font-size: var(--fs-md);
     line-height: var(--lh-medium-tight);
     font-weight: var(--fw-regular);

src/assets/styles/elements.css

@@ -9,12 +9,17 @@
     --bg-default: #ffff;
     --bg-transparent: transparent;
     --bg-golden:#e0b500;
+    --bg-default-gray: #ccc;
+    --bg-secondary-light: #caf0fe;
+    --bg-secondary-light-20: #F0FBFF;
 
     /*colors*/
     --color-main:#002e70;
     --color-default:#ffff;
     --color-disabled:#969696;
     --color-disabled-sort:#d5d5d5;
+    --color-disabled-font: #757575;
+    --color-alert-red: rgb(184, 0, 0);
 
     /*borders*/
     --color-border-active: #002e70;
@@ -23,10 +28,12 @@
     --color-border-success:#49DA87;
     --color-border-disabled:#757575;
     --color-border-transparent: transparent;
+    --color-border-light-focused: #96E2FD;
+    --color-borders-light: #96E2FD;
 
     /*rounded*/
     --rounded-small: var(--scale-50);
-    --rounded-medium: var(--scale-150);
+    --rounded-medium: var(--scale-100);
     --rounded-large: var(--scale-800);
 
     /*padding*/