Implement filtering by event categories

Filter events in display and search suggestions.
Make server queries allow specification of multiple categories.
Make settings modal avoid disabling all categories.

3 files changed, 23 insertions, 7 deletions

diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index 65d2496..96d23bd 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, computed, onMounted, onUnmounted, PropType} from 'vue';
+import {ref, computed, onMounted, PropType} from 'vue';
 import SearchIcon from './icon/SearchIcon.vue';
 import InfoIcon from './icon/InfoIcon.vue';
 import {HistEvent, queryServer, EventInfoJson, jsonToEventInfo, SuggResponseJson} from '../lib';
@@ -93,6 +93,11 @@ async function onInput(){
 		input: input.value,
 		limit: String(store.searchSuggLimit),
 	});
+	// Check if any event categories are disabled
+	if (Object.values(store.ctgs).some((b: boolean) => !b)){
+		let visibleCtgs = Object.entries(store.ctgs).filter(([, enabled]) => enabled).map(([ctg, ]) => ctg);
+		urlParams.append('ctgs', visibleCtgs.join('.'));
+	}
 	// Code for querying server
 	pendingReqParams.value = urlParams;
 	pendingReqInput.value = input.value;
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 1ccea2a..21ac7b8 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -9,18 +9,18 @@
 			<h2 class="font-bold md:text-xl text-center pt-1 md:pt-2 md:pb-1">Categories</h2>
 			<ul class="px-2 grid grid-cols-3">
 				<!-- Row 1 -->
-				<li> <label> <input type="checkbox" v-model="store.ctgs.event"
+				<li> <label> <input type="checkbox" v-model="store.ctgs.event" :disabled="lastCtg == 'event'"
 					@change="onSettingChg('ctgs.event')"/> Event </label> </li>
-				<li> <label> <input type="checkbox" v-model="store.ctgs.person"
+				<li> <label> <input type="checkbox" v-model="store.ctgs.person" :disabled="lastCtg == 'person'"
 					@change="onSettingChg('ctgs.person')"/> Person </label> </li>
-				<li> <label> <input type="checkbox" v-model="store.ctgs.work"
+				<li> <label> <input type="checkbox" v-model="store.ctgs.work" :disabled="lastCtg == 'work'"
 					@change="onSettingChg('ctgs.work')"/> Work </label> </li>
 				<!-- Row 2 -->
-				<li> <label> <input type="checkbox" v-model="store.ctgs.place"
+				<li> <label> <input type="checkbox" v-model="store.ctgs.place" :disabled="lastCtg == 'place'"
 					@change="onSettingChg('ctgs.place')"/> Place </label> </li>
-				<li> <label> <input type="checkbox" v-model="store.ctgs.organism"
+				<li> <label> <input type="checkbox" v-model="store.ctgs.organism" :disabled="lastCtg == 'organism'"
 					@change="onSettingChg('ctgs.organism')"/> Organism </label> </li>
-				<li> <label> <input type="checkbox" v-model="store.ctgs.discovery"
+				<li> <label> <input type="checkbox" v-model="store.ctgs.discovery" :disabled="lastCtg == 'discovery'"
 					@change="onSettingChg('ctgs.discovery')"/> Discovery </label> </li>
 			</ul>
 		</div>
@@ -88,6 +88,14 @@ const emit = defineEmits(['close']);
 
 // Settings change handling
 const saved = ref(false); // Set to true after a setting is saved
+const lastCtg = computed(() => { // When all but one category is disabled, names the remaining category
+	let enabledCtgs = Object.entries(store.ctgs).filter(([, enabled]) => enabled).map(([ctg, ]) => ctg);
+	if (enabledCtgs.length == 1){
+		return enabledCtgs[0];
+	} else {
+		return null;
+	}
+});
 function onSettingChg(option: string){ 
 	store.save(option);
 	// Make 'Saved' indicator appear/animate
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 13589d2..1583aef 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -444,6 +444,9 @@ const idToEvent = computed(() => { // Maps visible event IDs to HistEvents
 		if (!event.start.isEarlier(lastDate.value)){
 			break;
 		}
+		if ((store.ctgs as {[ctg: string]: boolean})[event.ctg] == false){
+			continue;
+		}
 		map.set(event.id, event);
 	}
 	return map;