crowd-funder-from-jason/src/components/FeedFilters.vue

<template>
  <div v-if="visible" id="dialogFeedFilters" class="dialog-overlay">
    <div class="dialog">
      <h1 class="text-xl font-bold text-center mb-4">Feed Filters</h1>

      <p class="mb-4 font-bold">Show only activities that…</p>

      <div class="grid grid-cols-1 gap-2">
        <div
          class="flex items-center justify-between cursor-pointer"
          @click="toggleHasVisibleDid()"
        >
          <!-- label -->
          <div>Include someone visible to me</div>
          <!-- toggle -->
          <div class="relative ml-2">
            <!-- input -->
            <input
              type="checkbox"
              v-model="hasVisibleDid"
              name="toggleFilterFromMyContacts"
              class="sr-only"
            />
            <!-- line -->
            <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
            <!-- dot -->
            <div
              class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
            ></div>
          </div>
        </div>

        <em>or</em>

        <div
          class="flex items-center justify-between cursor-pointer"
          @click="
            hasSearchBox
              ? toggleNearby()
              : $router.push({ name: 'search-area' })
          "
        >
          <!-- label -->
          <div>Are nearby</div>
          <!-- toggle -->
          <div v-if="hasSearchBox" class="relative ml-2">
            <!-- input -->
            <input
              type="checkbox"
              v-model="isNearby"
              name="toggleFilterNearby"
              class="sr-only"
            />
            <!-- line -->
            <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
            <!-- dot -->
            <div
              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>

      <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="done()"
        >
          Done
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-facing-decorator";
import {
  LMap,
  LMarker,
  LRectangle,
  LTileLayer,
} from "@vue-leaflet/vue-leaflet";

import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
import { db } from "@/db/index";

@Component({
  components: {
    LRectangle,
    LMap,
    LMarker,
    LTileLayer,
  },
})
export default class FeedFilters extends Vue {
  onCloseIfChanged = () => {};
  hasSearchBox = false;
  hasVisibleDid = false;
  isNearby = false;
  settingChanged = false;
  visible = false;

  async open(onCloseIfChanged: () => void) {
    this.onCloseIfChanged = onCloseIfChanged;

    await db.open();
    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
    this.hasVisibleDid = !!settings?.filterFeedByVisible;
    this.isNearby = !!settings?.filterFeedByNearby;
    if (settings?.searchBoxes && settings.searchBoxes.length > 0) {
      this.hasSearchBox = true;
    }

    this.settingChanged = false;
    this.visible = true;
  }

  toggleHasVisibleDid() {
    this.settingChanged = true;
    this.hasVisibleDid = !this.hasVisibleDid;
    db.settings.update(MASTER_SETTINGS_KEY, {
      filterFeedByVisible: this.hasVisibleDid,
    });
  }

  toggleNearby() {
    this.settingChanged = true;
    this.isNearby = !this.isNearby;
    db.settings.update(MASTER_SETTINGS_KEY, {
      filterFeedByNearby: this.isNearby,
    });
  }

  async clearAll() {
    if (this.hasVisibleDid || this.isNearby) {
      this.settingChanged = true;
    }

    db.settings.update(MASTER_SETTINGS_KEY, {
      filterFeedByNearby: false,
      filterFeedByVisible: false,
    });

    this.hasVisibleDid = false;
    this.isNearby = false;
  }

  async setAll() {
    if (!this.hasVisibleDid || !this.isNearby) {
      this.settingChanged = true;
    }

    db.settings.update(MASTER_SETTINGS_KEY, {
      filterFeedByNearby: true,
      filterFeedByVisible: true,
    });

    this.hasVisibleDid = true;
    this.isNearby = true;
  }

  close() {
    if (this.settingChanged) {
      this.onCloseIfChanged();
    }
    this.visible = false;
  }

  done() {
    this.close();
  }
}
</script>

<style>
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
}

#dialogFeedFilters.dialog-overlay {
  z-index: 99999;
  overflow: scroll;
}

.dialog {
  background-color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  width: 100%;
  max-width: 500px;
}
</style>