Browse Source

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

pull/113/head
Trent Larson 7 months ago
parent
commit
8e1daf7015
  1. 1
      project.task.yaml
  2. 115
      src/components/FeedFilters.vue
  3. 4
      src/db/tables/settings.ts
  4. 28
      src/views/HomeView.vue
  5. 5
      src/views/SearchAreaView.vue

1
project.task.yaml

@ -19,6 +19,7 @@ tasks :
- .2 don't show a warning on a totally new project when the authorized agent is set
- .2 anchor hash into BTC
- .2 list the "show more" contacts alphabetically
- .5 add back the explicit wait for browser subscription timing problems?
- .5 make Time Safari a share_target for images

115
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(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;
}
async open() {
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();
}
}

4
src/db/tables/settings.ts

@ -16,6 +16,10 @@ export type Settings = {
activeDid?: string; // Active Decentralized ID
apiServer?: string; // API server URL
filterFeedNearby?: string; // filter by nearby
filterFeedContacts?: string; // filter by user contacts
firstName?: string; // User's first name
isRegistered?: boolean;
lastName?: string; // deprecated - put all names in firstName

28
src/views/HomeView.vue

@ -180,9 +180,9 @@
<h2 class="text-xl font-bold">Latest Activity</h2>
<button
@click="openFeedFilters()"
class="block text-center text-sm 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-3 py-1.5 ml-auto rounded-md"
class="block text-center text-sm 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-3 py-1.5 ml-auto rounded-md"
>
Filter
{{ resultsAreFiltered() ? "Filtered" : "Unfiltered" }}
</button>
</div>
<InfiniteScroll @reached-bottom="loadMoreGives">
@ -311,6 +311,8 @@ export default class HomeView extends Vue {
feedPreviousOldestId?: string;
feedLastViewedClaimId?: string;
isCreatingIdentifier = false;
isFeedFilteredByContacts = false;
isFeedFilteredByNearby = false;
isFeedLoading = true;
isRegistered = false;
showShortcutBvc = false;
@ -335,7 +337,7 @@ export default class HomeView extends Vue {
return headers;
}
async created() {
async mounted() {
try {
await accountsDB.open();
const allAccounts = await accountsDB.accounts.toArray();
@ -347,6 +349,8 @@ export default class HomeView extends Vue {
this.activeDid = settings?.activeDid || "";
this.allContacts = await db.contacts.toArray();
this.feedLastViewedClaimId = settings?.lastViewedClaimId;
this.isFeedFilteredByContacts = !!settings?.filterFeedContacts;
this.isFeedFilteredByNearby = !!settings?.filterFeedNearby;
this.isRegistered = !!settings?.isRegistered;
this.showShortcutBvc = !!settings?.showShortcutBvc;
@ -378,6 +382,10 @@ export default class HomeView extends Vue {
}
}
resultsAreFiltered() {
return this.isFeedFilteredByContacts || this.isFeedFilteredByNearby;
}
notificationsSupported() {
return "Notification" in window;
}
@ -408,6 +416,18 @@ export default class HomeView extends Vue {
return headers;
}
// only called when a setting was changed
async reloadFeedOnChange() {
await db.open();
const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
this.isFeedFilteredByContacts = !!settings?.filterFeedContacts;
this.isFeedFilteredByNearby = !!settings?.filterFeedNearby;
this.feedData = [];
this.feedPreviousOldestId = undefined;
this.updateAllFeed();
}
/**
* Data loader used by infinite scroller
* @param payload is the flag from the InfiniteScroll indicating if it should load
@ -587,7 +607,7 @@ export default class HomeView extends Vue {
}
openFeedFilters() {
(this.$refs.feedFilters as FeedFilters).open();
(this.$refs.feedFilters as FeedFilters).open(this.reloadFeedOnChange);
}
}
</script>

5
src/views/SearchAreaView.vue

@ -208,9 +208,9 @@ export default class DiscoverView extends Vue {
group: "alert",
type: "success",
title: "Saved",
text: "That has been saved in your preferences.",
text: "That has been saved in your preferences. You can now filter by it on your home screen feed.",
},
-1,
7000,
);
this.$router.back();
} catch (err) {
@ -246,6 +246,7 @@ export default class DiscoverView extends Vue {
await db.open();
db.settings.update(MASTER_SETTINGS_KEY, {
searchBoxes: [],
filterFeedNearby: false,
});
this.searchBox = null;
this.localCenterLat = 0;

Loading…
Cancel
Save