Merge pull request #301 from headwaymaps/mkirk/no-search-results

"No search results" instead of blank text
headwaymaps · Jan 12, 2024 · 03b363f · 03b363f
2 parents 403ed4e + ac4b1c2
commit 03b363f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/services/frontend/www-app/src/i18n/en-US/index.ts b/services/frontend/www-app/src/i18n/en-US/index.ts
@@ -76,4 +76,7 @@ export default {
   opening_hours_is_closed_until_tomorrow_$time: 'Closed until {time} tomorrow',
   opening_hours_show_more_times: 'Show hours',
   opening_hours_hide_more_times: 'Hide hours',
+  search_results_not_found_header: 'No results found. 😢',
+  search_results_not_found_subheader:
+    'Something missing? Consider adding it to {osmLink} so it can eventually appear here.',
 };
diff --git a/services/frontend/www-app/src/pages/SearchPage.vue b/services/frontend/www-app/src/pages/SearchPage.vue
@@ -32,6 +32,25 @@
         v-on:mouseleave="didHoverSearchListItem(undefined)"
         v-on:click="didClickSearchListItem(place)"
       />
+      <q-item
+        class="list-item"
+        v-if="searchResults?.places.length === 0 && !isLoading"
+      >
+        <q-item-section>
+          <q-item-label>
+            {{ $t('search_results_not_found_header') }}
+          </q-item-label>
+          <q-item-label
+            class="text-weight-light"
+            v-html="
+              $t('search_results_not_found_subheader', {
+                osmLink:
+                  '<a href=https://www.openstreetmap.org>OpenStreetMap</a>',
+              })
+            "
+          />
+        </q-item-section>
+      </q-item>
     </q-list>
   </div>
 </template>
@@ -197,7 +216,9 @@ export default defineComponent({
           this.isLoading = false;
         });
 
-        if (!results.bbox) {
+        if (results.features.length == 0) {
+          // no results
+        } else if (!results.bbox) {
           console.error('search results missing bounding box');
         } else if (results.bbox.length != 4) {
           console.error('unexpected bbox dimensions');