Dra 1331 new summarys for categories and channels

src/api/api-client.ts

@@ -44,7 +44,7 @@ export class APIServiceClient {
 						response.config.url?.includes('mlt') ||
 						response.config.url?.includes('thumbnails');
 					if (!noDelayRequest) {
-						await sleep(2000);
+						await sleep(250);
 					}
 				}
 				return response;

src/components/common/CustomExpander.vue

@@ -10,6 +10,7 @@
 			:item-array="itemArray"
 			:pass-update="passAlongUpdate"
 			:filter-cuttof="filterNameCutoff"
+			:use-translation="useHeadlineTranslation"
 		></TimelineHeadline>
 		<div
 			ref="expandContainer"
@@ -75,20 +76,34 @@ export default defineComponent({
 				return [] as SelectorData[];
 			},
 		},
+		facetType: {
+			type: String as PropType<string>,
+			required: false,
+			default() {
+				return '';
+			},
+		},
 		updateEntity: {
 			type: Function,
 			default() {
 				return null;
 			},
 		},
+		useHeadlineTranslation: {
+			type: Boolean,
+			required: false,
+			default() {
+				return true;
+			},
+		},
 	},
 
 	setup(props) {
 		const expanderOpen = ref(false);
 		const expandContainer = ref<HTMLElement | null>(null);
 		const headlineRef = ref();
 		const passAlongUpdate = (parent: SelectorData[], index: number, val: boolean) => {
-			props.updateEntity(parent, index, val);
+			props.updateEntity(parent, index, val, props.facetType);
 		};
 
 		const toggleExpander = () => {

src/components/common/MainCategories.vue

@@ -84,14 +84,27 @@ export default defineComponent({
 		};
 
 		onMounted(() => {
-			if (searchResultStore.firstBackendFetchExecuted) {
+			if (searchResultStore.firstBackendFetchExecuted && Object.keys(searchResultStore.initFacets).length !== 0) {
 				constructGenre();
 			} else {
 				watch(
 					() => searchResultStore.firstBackendFetchExecuted,
 					(newVal: boolean) => {
-						if (newVal) {
+						if (newVal && Object.keys(searchResultStore.initFacets).length !== 0) {
 							constructGenre();
+						} else {
+							/* TODO: NEEDS TRANSLATIONS AND EXPLANATION */
+							const customEvent = new CustomEvent('notify-user', {
+								detail: {
+									title: 'Backend svarer ikke.',
+									message:
+										'De bagvedliggende applikationer svarer ikke, så det er ikke muligt at søge pt. \n \n Prøv igen senere.',
+									key: false,
+									severity: 'low',
+									userClose: true,
+								},
+							});
+							window.dispatchEvent(customEvent);
 						}
 					},
 				);

src/components/common/SimpleCheckbox.vue

@@ -36,23 +36,17 @@
 				:disabled="amount === '0' && !checked"
 				:checked="checked"
 				:data-testid="addTestDataEnrichment('input', 'simple-checkbox', title, number)"
-				@change="check(fqkey, title)"
+				@change="updateSelection(!checked, title, fqkey)"
 			/>
 		</label>
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import {
-	addChannelOrCategoryFilter,
-	removeChannelOrCategoryFilter,
-	channelFilterExists,
-	createFilter,
-} from '@/utils/filter-utils';
-import { useSearchResultStore } from '@/store/searchResultStore';
+import { defineComponent, PropType } from 'vue';
+import { SelectorData } from '@/types/TimeSearchTypes';
 import { addTestDataEnrichment } from '@/utils/test-enrichments';
+import { useSearchResultStore } from '@/store/searchResultStore';
 
 export default defineComponent({
 	name: 'SimpleCheckbox',
@@ -82,45 +76,33 @@ export default defineComponent({
 			type: Number,
 			required: true,
 		},
-		timeSearchActive: {
-			type: Boolean,
-			required: false,
+		checked: { type: Boolean, required: false },
+		loading: { type: Boolean, required: true },
+		update: {
+			type: Function,
 			default() {
-				return false;
+				return null;
+			},
+		},
+		parentArray: {
+			type: Array as PropType<SelectorData[]>,
+			default() {
+				return [] as SelectorData[];
 			},
 		},
-		checked: { type: Boolean, required: false },
-		loading: { type: Boolean, required: true },
 	},
 	setup(props) {
-		const router = useRouter();
-		const route = useRoute();
 		const searchResultStore = useSearchResultStore();
-		const check = (key: string | undefined, title: string | undefined) => {
-			if (title && key) {
-				const routeQueries = channelFilterExists(key, title, searchResultStore.channelFilters)
-					? removeChannelOrCategoryFilter(
-							route,
-							createFilter(title, 'creator_affiliation_facet'),
-							props.timeSearchActive,
-							'creator_affiliation_facet',
-					  )
-					: addChannelOrCategoryFilter(
-							route,
-							createFilter(title, 'creator_affiliation_facet'),
-							props.timeSearchActive,
-							'creator_affiliation_facet',
-					  );
-				routeQueries.start = 0;
-				router.push({ query: routeQueries });
-			}
-		};
 
 		const displayAmount = (value: string | undefined) => {
 			return value ? `(${value})` : '';
 		};
 
-		return { check, displayAmount, addTestDataEnrichment };
+		const updateSelection = (checked: boolean, title: string | undefined, key: string | undefined) => {
+			props.update(props.parentArray, props.number, checked, title, key, searchResultStore.channelFilters);
+		};
+
+		return { displayAmount, addTestDataEnrichment, updateSelection };
 	},
 });
 </script>
@@ -222,6 +204,8 @@ export default defineComponent({
 
 .loading.tag-number {
 	height: 25px;
+	overflow: hidden;
+	position: relative;
 }
 
 .checkbox-container.disabled .loading.tag-number .text {

src/components/common/TimelineHeadline.vue

@@ -20,11 +20,23 @@
 			<button
 				v-for="(item, index) in selectedItems"
 				:key="`${index}-${item.name}`"
+				:title="item.name"
 				class="selected-entity"
 				:data-testid="addTestDataEnrichment('button', 'timeline-headline', `${headline}-small-status-toggle`, 0)"
 				@click="handleTimeFacetRemoval(item.index, $event)"
 			>
-				<span class="entity-name">{{ formatStringForTime(t(item.name).substring(0, filterCuttof)) }}</span>
+				<span
+					v-if="useTranslation"
+					class="entity-name"
+				>
+					{{ formatStringForTime(t(item.name).substring(0, filterCuttof)) }}
+				</span>
+				<span
+					v-else
+					class="entity-name"
+				>
+					{{ formatStringForTime(item.name.substring(0, filterCuttof)) }}
+				</span>
 				<span class="close">×</span>
 			</button>
 		</div>
@@ -82,6 +94,13 @@ export default defineComponent({
 				return 3;
 			},
 		},
+		useTranslation: {
+			type: Boolean as PropType<boolean>,
+			required: false,
+			default() {
+				return true;
+			},
+		},
 	},
 
 	setup(props) {

src/components/common/timeSearch/DatePicker.vue

@@ -16,6 +16,7 @@
 			prevent-min-max-navigation
 			:year-range="[startYear.getFullYear(), endYear.getFullYear()]"
 			@update:model-value="readyForNewSearch()"
+			@update-month-year="startHandleMonthYear"
 		></VueDatePicker>
 		<VueDatePicker
 			ref="endDatePicker"
@@ -33,6 +34,7 @@
 			prevent-min-max-navigation
 			:year-range="[startYear.getFullYear(), endYear.getFullYear()]"
 			@update:model-value="readyForNewSearch()"
+			@update-month-year="endHandleMonthYear"
 		></VueDatePicker>
 		<div class="from-to-display">
 			<div class="container">
@@ -52,16 +54,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref, onMounted } from 'vue';
+import { defineComponent, computed, ref, onMounted, watch } from 'vue';
 import VueDatePicker from '@vuepic/vue-datepicker';
 import type { DatePickerInstance } from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
 import '@/components/common/timeSearch/custom-datepicker.css';
 import { addDays } from 'date-fns/addDays';
 import { startDate, endDate, startYear, endYear } from '@/components/common/timeSearch/TimeSearchInitValues';
 import { useTimeSearchStore } from '@/store/timeSearchStore';
-import { normalizeFq, cloneRouteQuery } from '@/utils/filter-utils';
-import { useRoute } from 'vue-router';
 
 interface Highlight {
 	dates: Date[];
@@ -72,6 +72,12 @@ interface Highlight {
 	options: { highlightDisabled: boolean };
 }
 
+interface MonthYearEvent {
+	instance: number;
+	month: number;
+	year: number;
+}
+
 export default defineComponent({
 	name: 'DatePicker',
 	components: {
@@ -82,33 +88,21 @@ export default defineComponent({
 		const startDatePicker = ref<DatePickerInstance>();
 		const endDatePicker = ref<DatePickerInstance>();
 		const timeSearchStore = useTimeSearchStore();
-		const route = useRoute();
 
 		onMounted(() => {
-			const routeQueries = cloneRouteQuery(route);
-			const fq = normalizeFq(routeQueries.fq);
-			const startTimeFilter = fq.find((fq: string) => fq.includes('startTime'));
-			if (startTimeFilter) {
-				const timestamps = decodeURIComponent(startTimeFilter)
-					.replace('startTime:', '')
-					.replace(' OR ', '')
-					.replace('[', '')
-					.replace(']', '')
-					.split(' TO ');
-				setDateFromISOString(timestamps[0], startDate.value);
-				setDateFromISOString(timestamps[1], endDate.value);
-			} else {
-				startDate.value.setTime(startYear.value.getTime());
-				endDate.value.setTime(endYear.value.getTime());
-			}
 			startDatePicker.value ? startDatePicker.value.updateInternalModelValue(startDate.value) : null;
 			endDatePicker.value ? endDatePicker.value.updateInternalModelValue(endDate.value) : null;
 		});
 
-		const setDateFromISOString = (isoDate: string, date: Date) => {
-			const existingDate = new Date(isoDate);
-			date.setTime(existingDate.getTime());
-		};
+		watch(
+			() => timeSearchStore.timeFacetsOpen,
+			(newVal: boolean) => {
+				if (!newVal) {
+					startDatePicker.value ? startDatePicker.value.updateInternalModelValue(startDate.value) : null;
+					endDatePicker.value ? endDatePicker.value.updateInternalModelValue(endDate.value) : null;
+				}
+			},
+		);
 
 		const format = (date: Date) => {
 			const day = date.getDate();
@@ -118,6 +112,37 @@ export default defineComponent({
 			return `${day} / ${month} / ${year}`;
 		};
 
+		/* This way might seem weird to update the endDate,
+		 *  However, this is the only way to force an reactive update to the variable,
+		 * so we also get an update in the template. Weird, but this is the way.
+		 */
+		const endHandleMonthYear = ({ month, year }: MonthYearEvent) => {
+			const holder = new Date(endDate.value.getTime());
+			holder.setDate(1);
+			holder.setMonth(month);
+			holder.setFullYear(year);
+			endDate.value = holder;
+			if (endDate.value.getTime() !== endYear.value.getTime()) {
+				timeSearchStore.setNewSearchReqMet(true);
+			} else {
+				timeSearchStore.setNewSearchReqMet(false);
+			}
+			//endDatePicker.value ? endDatePicker.value.updateInternalModelValue(endDate.value) : null;
+		};
+
+		const startHandleMonthYear = ({ month, year }: MonthYearEvent) => {
+			const holder = new Date(startDate.value.getTime());
+			holder.setDate(1);
+			holder.setMonth(month);
+			holder.setFullYear(year);
+			startDate.value = holder;
+			if (startDate.value.getTime() !== startYear.value.getTime()) {
+				timeSearchStore.setNewSearchReqMet(true);
+			} else {
+				timeSearchStore.setNewSearchReqMet(false);
+			}
+			//startDatePicker.value ? startDatePicker.value.updateInternalModelValue(startDate.value) : null;
+		};
 		const newSearch = () => {
 			emit('spanUpdated');
 		};
@@ -155,6 +180,8 @@ export default defineComponent({
 			readyForNewSearch,
 			startDatePicker,
 			endDatePicker,
+			endHandleMonthYear,
+			startHandleMonthYear,
 		};
 	},
 });