cleanup q vs query

since `q` is the url parameter of the search string, it's better to not have local variables called `q` which represent the whole query.

also, where possible, make local variables of the search string be "searchStr/searchAll" instead of "q/all" to make the difference b/t variables and current query parameters more obvious

Author: ionous

cal/src/CalSearch.vue

@@ -35,12 +35,17 @@ export default {
     };
   },
   computed: {
-    q() {
+    searchStr() {
       return this.$route.query.q;  
     },
     offset() {
       return this.$route.query.offset || 0;
     },
+    searchAll() {
+      // return undefined if the 'all' parameter doesnt exist 
+      // so we don't wind up with all=false in the browser bar.
+      return this.$route.query.all || undefined;
+    },
     itemCount() {
       return this.events.length;
     },
@@ -55,9 +60,12 @@ export default {
     }
   },
   methods: {
+    // expects the query object as a parameter.
     // emits the 'pageLoaded' event when done.
-    updateSearch({q, offset, all: searchAll}) {
-      return fetchSearch(q, parseInt(offset || 0), searchAll).then((page) => {
+    updateSearch(urlQuery) {
+      // unpack the desired query parameter:
+      const {q: searchStr, offset, all: searchAll} = urlQuery;
+      return fetchSearch(searchStr, parseInt(offset || 0), searchAll).then((page) => {
         this.events = page.data.events;
         this.pageNum = page.data.pageNum;
         this.fullCount = page.data.fullCount; 
@@ -73,7 +81,7 @@ export default {
 </script>
 <template> 
   <h3 class="c-divder c-divder--center">
-    <div>Found {{fullCount}} {{pluralized}} containing "{{q}}"</div>
+    <div>Found {{fullCount}} {{pluralized}} containing "{{searchStr}}"</div>
     <div v-if="totalPages > 1">Showing page {{pageNum}} of {{totalPages}}</div>
   </h3>
   <EventSummary 

cal/src/EventDetails.vue

@@ -55,9 +55,9 @@ export default {
           // record the event data
           // and remember the calendar start
           if (from.name === 'events') {
-            const q = from.query;
-            if (q.start) {
-              vm.calStart = q.start;
+            const { start } = from.query;
+            if (start) {
+              vm.calStart = start;
             }
           }
           // done loading.

cal/src/Menu.vue

@@ -23,22 +23,21 @@ export default {
   },
   computed: {
     activeMenu() {
-      const q = this.$route.query;
-      return q.menu;  
+      return this.$route.query.menu;
     },
     activeKids() {
       return this.menu[this.activeMenu].kids;
     }
   },
   methods: {
     activate(name) {
-      const q = { ...this.$route.query };
-      if (q.menu === name) {
-        delete q.menu;
+      const query = { ...this.$route.query };
+      if (query.menu === name) {
+        delete query.menu;
       } else {
-        q.menu = name;
+        query.menu = name;
       }
-      this.$router.replace({query: q});
+      this.$router.replace({query});
     },
     caretFor(name) {
       const icon = name === this.activeMenu ? 'caretDown' : 'caretRight';

cal/src/Toolbar.vue

@@ -24,9 +24,9 @@ export default {
         const next = this.returnLink || {name: "events"};
         return this.$router.push(next);
       } else {
-        const q = { ...this.$route.query };
-        q.expanded = this.expanded != name ? name : undefined;
-        return this.$router.replace({query: q})
+        const query = { ...this.$route.query };
+        query.expanded = this.expanded != name ? name : undefined;
+        return this.$router.replace({query});
       }
     },
     icon(key) {

cal/src/calList.js

@@ -45,10 +45,10 @@ function buildPage(start, end, days) {
 // ( given calList.updateRange: if today is a monday
 // we see monday-sunday; and then shift to the next/previous monday. )
 function shiftRange(router, start, dir) {
-  const q = { ...router.currentRoute.query }; // *copy* the query object.
+  const query = { ...router.currentRoute.query }; // *copy* the query object.
   const next = start.add(dir, 'week');
-  q.start = next.format("YYYY-MM-DD"); // add/replace the start.
-  router.push({query: q});
+  query.start = next.format("YYYY-MM-DD"); // add/replace the start.
+  router.push({query});
 }
 
 // ---------------------------------------------------------------------

cal/src/calSearch.js

@@ -5,15 +5,15 @@ import dayjs from 'dayjs'
 import dataPool from './support/dataPool.js'
 import siteConfig from './siteConfig.js'
 
-export async function fetchSearch(q, offset, searchAll) {
-  const result = await dataPool.getSearch(q, offset, searchAll);
-  return buildPage(q, offset, result);
+export async function fetchSearch(searchStr, offset, searchAll) {
+  const result = await dataPool.getSearch(searchStr, offset, searchAll);
+  return buildPage(searchStr, offset, result);
 }
 
 // ---------------------------------------------------------------------
 // internal functions
 // ---------------------------------------------------------------------
-function buildPage(q, offset, res) {
+function buildPage(searchStr, offset, res) {
   //
   const { events } = res;
   const { limit, fullcount } = res.pagination;
@@ -22,8 +22,8 @@ function buildPage(q, offset, res) {
   return {
     page: {
       title: multiplePages ? 
-              `${q} - Page ${pageNum} - searching ${siteConfig.title}` : 
-              `${q} - searching ${siteConfig.title}`,
+              `${searchStr} - Page ${pageNum} - searching ${siteConfig.title}` : 
+              `${searchStr} - searching ${siteConfig.title}`,
       banner: siteConfig.defaultListBanner,
     },
     data: {

cal/src/support/dataPool.js

@@ -72,8 +72,8 @@ export default {
     return data;
   },
   // searching
-  async getSearch(q, offset, searchAll) {
-    const url = buildUrl(API_SEARCH_URL, { q, o: offset, all: searchAll });
+  async getSearch(searchStr, offset, searchAll) {
+    const url = buildUrl(API_SEARCH_URL, { q: searchStr, o: offset, all: searchAll });
     console.log(`fetching ${url}`);
     const resp = await fetch(url); 
     const data = await resp.json(); // data => { events: [], pagination: {} }

cal/src/tools/InputText.vue

@@ -11,7 +11,7 @@ export default {
     label: String,
     attrs: Object,
     model: Object,  // containing "inputText"
-    selectText: Boolean
+    shouldSelect: Boolean
   },
   computed: {
     id() {
@@ -22,7 +22,7 @@ export default {
   mounted() {
     // console.log("mounted", this.$refs.inputItem);
     this.$refs.inputItem.focus();
-    if (this.selectText) {
+    if (this.shouldSelect) {
       this.$refs.inputItem.select();
     }
   },

cal/src/tools/SearchTool.vue

@@ -11,10 +11,13 @@ export default {
         placeholder: "Search event titles...",
       },
       model: {
+        // the text in the input box should be filled with the query search string.
         inputText: this.$route.query.q,
       },
-      selectText: !!this.$route.query.q,
-      all: this.$route.query.all,
+      // if there is an existing inputText, select it.
+      shouldSelect: !!this.$route.query.q,
+      // the v-model attribute (below) keeps this in sync with the checkbox state
+      searchAll: this.$route.query.all,
     }
   },
   methods: {
@@ -24,7 +27,9 @@ export default {
         console.log(`searching for ${inputText}`);
         this.$emit("changeRoute", { name: 'search', query: { 
           q: inputText,
-          all: this.all || undefined,
+          // if the checkbox is 'false' report 'undefined'
+          // that makes the url query string be blank instead of "all=false"
+          all: this.searchAll || undefined,
         }});
       }
     },
@@ -35,10 +40,10 @@ export default {
 <form class="c-search" method="dialog">
   <!--  -->
   <div class="c-search__controls">
-    <InputText name="search" label="Search" :attrs :model :selectText/>
+    <InputText name="search" label="Search" :attrs :model :shouldSelect/>
     <span class="c-search__past">
       <label for="all">Include past events </label>
-      <input type="checkbox" id="all" v-model="all"/>
+      <input type="checkbox" id="all" v-model="searchAll"/>
     </span>
   </div>
   <!--