feed filter: save the changed values to the DB, go to map if no location chosen, reload if necessary

src/components/FeedFilters.vue

@@ -6,7 +6,10 @@
       <p class="mb-4 font-bold">Show only activities that are…</p>
 
       <div class="grid grid-cols-1 gap-2">
-        <div class="flex items-center justify-between cursor-pointer">
+        <div
+          class="flex items-center justify-between cursor-pointer"
+          @click="toggleContacts()"
+        >
           <!-- label -->
           <div>From my contacts</div>
           <!-- toggle -->
@@ -14,7 +17,7 @@
             <!-- input -->
             <input
               type="checkbox"
-              v-model="isFromMyContacts"
+              v-model="isInMyContacts"
               name="toggleFilterFromMyContacts"
               class="sr-only"
             />
@@ -27,11 +30,18 @@
           </div>
         </div>
 
-        <div class="flex items-center justify-between cursor-pointer">
+        <div
+          class="flex items-center justify-between cursor-pointer"
+          @click="
+            hasSearchBox
+              ? toggleNearby()
+              : $router.push({ name: 'search-area' })
+          "
+        >
           <!-- label -->
           <div>Nearby</div>
           <!-- toggle -->
-          <div class="relative ml-2">
+          <div v-if="hasSearchBox" class="relative ml-2">
             <!-- input -->
             <input
               type="checkbox"
@@ -46,26 +56,32 @@
               class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
             ></div>
           </div>
+          <div v-else class="relative ml-2">
+            <button class="ml-2 px-4 py-2 rounded-md bg-blue-200 text-blue-500">
+              Select Location
+            </button>
+          </div>
         </div>
       </div>
 
-      <button
-        class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mt-4"
-        @click="confirm"
-      >
-        Apply
-      </button>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-2">
+      <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 mt-4">
         <button
           class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+          @click="setAll()"
+        >
+          Set All
+        </button>
+        <button
+          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+          @click="clearAll()"
         >
           Clear All
         </button>
         <button
           class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
-          @click="cancel"
+          @click="done()"
         >
-          Cancel
+          Done
         </button>
       </div>
     </div>
@@ -81,6 +97,9 @@ import {
   LTileLayer,
 } from "@vue-leaflet/vue-leaflet";
 
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { db } from "@/db/index";
+
 @Component({
   components: {
     LRectangle,
@@ -90,20 +109,80 @@ import {
   },
 })
 export default class FeedFilters extends Vue {
-  visible = false;
-  isFromMyContacts = false;
+  callOnCloseIfChanged = () => {};
+  hasSearchBox = false;
+  isInMyContacts = false;
   isNearby = false;
+  settingChanged = false;
+  visible = false;
 
-  async open() {
+  async open(callOnCloseIfChanged: () => void) {
+    this.callOnCloseIfChanged = callOnCloseIfChanged;
+
+    await db.open();
+    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+    this.isInMyContacts = !!settings?.filterFeedContacts;
+    this.isNearby = !!settings?.filterFeedNearby;
+    if (settings?.searchBoxes && settings.searchBoxes.length > 0) {
+      this.hasSearchBox = true;
+    }
+
+    this.settingChanged = false;
     this.visible = true;
   }
 
+  toggleContacts() {
+    this.settingChanged = true;
+    this.isInMyContacts = !this.isInMyContacts;
+    db.settings.update(MASTER_SETTINGS_KEY, {
+      filterFeedContacts: this.isInMyContacts,
+    });
+  }
+
+  toggleNearby() {
+    this.settingChanged = true;
+    this.isNearby = !this.isNearby;
+    db.settings.update(MASTER_SETTINGS_KEY, {
+      filterFeedNearby: this.isNearby,
+    });
+  }
+
+  async clearAll() {
+    if (this.isInMyContacts || this.isNearby) {
+      this.settingChanged = true;
+    }
+
+    db.settings.update(MASTER_SETTINGS_KEY, {
+      filterFeedNearby: false,
+      filterFeedContacts: false,
+    });
+
+    this.isInMyContacts = false;
+    this.isNearby = false;
+  }
+
+  async setAll() {
+    if (!this.isInMyContacts || !this.isNearby) {
+      this.settingChanged = true;
+    }
+
+    db.settings.update(MASTER_SETTINGS_KEY, {
+      filterFeedNearby: true,
+      filterFeedContacts: true,
+    });
+
+    this.isInMyContacts = true;
+    this.isNearby = true;
+  }
+
   close() {
-    // close the dialog but don't change values (just in case some actions are added later)
+    if (this.settingChanged) {
+      this.callOnCloseIfChanged();
+    }
     this.visible = false;
   }
 
-  cancel() {
+  done() {
     this.close();
   }
 }