From be48244221f33db36c248bf17e01278265df57e9 Mon Sep 17 00:00:00 2001 From: Alexis <35.alexis.pele@gmail.com> Date: Sun, 10 Dec 2023 21:49:58 +0100 Subject: [PATCH 1/3] Cleaned up code for SearchMarkers comp And also cleaned a fair bit of its code --- src/components/maps/overlay/SearchMarkers.vue | 92 ++++++++++++++----- 1 file changed, 71 insertions(+), 21 deletions(-) diff --git a/src/components/maps/overlay/SearchMarkers.vue b/src/components/maps/overlay/SearchMarkers.vue index a06d4cbe..5b6b1647 100644 --- a/src/components/maps/overlay/SearchMarkers.vue +++ b/src/components/maps/overlay/SearchMarkers.vue @@ -14,16 +14,29 @@ const markers = props.markers const qInput = ref() const { focused: isFocused } = useFocus(qInput) +/** + * Available advanced search modes + * Currently only groups MapMarkerGroup and string "query" + */ + type SearchMode = "query" | MapMarkerGroup + +const currentSearchMode = ref('query') + onMounted(() => { isFocused.value = true }) -const shouldBeActive = computed(() => q.value.length > 0 || currentSearchMode.value !== "query") +const hasQuery = computed(() => q.value.length > 0) +const shouldBeActive = computed(() => hasQuery.value || currentSearchMode.value !== "query") const q = ref("") const unifier = new RegExp(/[^a-zA-Z0-9\-\'']/g) +/** + * Dropdown's markers list + * If the search doesn't have a query set, defaults to marker grouping + */ const filteredMarkers = computed(() => { if (currentSearchMode.value === "query") { return markers?.filter(m => { @@ -40,7 +53,16 @@ const filteredMarkers = computed(() => { }) }) -// Key Combos +// Limit of menu list dropdown +const currentLimit = computed(() => { + if (currentSearchMode.value === "query") return 10 + return 100 +}) + +/** + * ACCESSIBILITY + */ +// Registered key combos const keys = useMagicKeys() const shortcutKeyCombo = keys['Shift+Period'] const eraseKeyCombo = keys['Escape'] @@ -49,13 +71,13 @@ whenever(shortcutKeyCombo, () => { isFocused.value = true }) whenever(eraseKeyCombo, () => { - resetQueryValue() - setSearchMode('query') + resetAllFields() isFocused.value = true }) +// If query changes and has new value... watch(q, (n, o) => { - if (n) setSearchMode('query'); + if (n) setSearchMode('query') }) /** @@ -89,32 +111,60 @@ onUpdated(() => { }) }) -type SearchMode = "query" | MapMarkerGroup; +/** + * Advanced Search Mode + * Uses filters to show specific kinds of markers in the search results + */ -const currentSearchMode = ref('query'); - -// This should be refactored with better type checking +// TODO: This should be refactored with better type checking // It does the job for now but will be a pain if I had another feature that uses group sorting const hasGroupFilter = computed(() => { return currentSearchMode.value !== 'query' }) -const currentLimit = computed(() => { - if (currentSearchMode.value === "query") return 10 - return 100; -}) - -function setSearchMode(m: SearchMode) { - currentSearchMode.value = m; -} - function setActiveCategory(g: MapMarkerGroup) { resetQueryValue() - currentSearchMode.value = g; + + if (currentSearchMode.value !== g) { + currentSearchMode.value = g + } else { + currentSearchMode.value = "query" + } } +/** + * EVENTS + */ +// Close Button event +function onCloseQuery() { + resetAllFields("focusAfter") +} + +/** + * UTILITIES + */ +/** + * Switches current search mode + */ +function setSearchMode(m: SearchMode) { + currentSearchMode.value = m +} + +/** + * Resets active query in field + */ function resetQueryValue() { - q.value = ""; + q.value = "" +} + +/** + * Resets category and query states, default state + */ +function resetAllFields(actionAfter?: "focusAfter") { + setSearchMode('query') + resetQueryValue() + + if (actionAfter === "focusAfter") isFocused.value = true } @@ -125,7 +175,7 @@ function resetQueryValue() { - From 7b15175863eb2949a9bf83f5352c13e8015bcf82 Mon Sep 17 00:00:00 2001 From: Alexis <35.alexis.pele@gmail.com> Date: Mon, 11 Dec 2023 20:52:56 +0100 Subject: [PATCH 2/3] Fixed mobile overflow of search wrapper --- src/components/maps/overlay/SearchMarkers.vue | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/maps/overlay/SearchMarkers.vue b/src/components/maps/overlay/SearchMarkers.vue index 5b6b1647..6ca9dbde 100644 --- a/src/components/maps/overlay/SearchMarkers.vue +++ b/src/components/maps/overlay/SearchMarkers.vue @@ -269,9 +269,11 @@ function resetAllFields(actionAfter?: "focusAfter") { + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 200 + KM + 200 + KM + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Vidament + Mer Kalamys + Océan Frigalien + Océan Magorien + Merd’émeraude + Mer Téniréenne + Mer Téniréenne + Golfe deverre + Côte cendrée + Œil du Dragon + Comté desHautes-Berges + Comté deNacride + Comté desBasses-Berges + Comté deRougefer + Comté deQuillon + Comtéd’Héraldie + Comtéde Corambre + Comtéd’Émerose + Républiquede Sakâr + Terres Unies deSyaltha + Comtéde Ternâcre + Comtéde Mireloin + Comtéde Pergaré + Comtéd’Asharos + Marais Hurlants + Plaines depoussière + Difaeal’pyris + Forêt deVerglas + Bois deBorélis + L’Humeur d’Aldys + Comté deLagarde + Porgale + Boisde Kiam + Handany + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file