diff --git a/package.json b/package.json index 6de5beb..8d02d3a 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,8 @@ "vue": "^3.2.37", "vue-github-button": "^3.0.3", "vue-gtag": "^2.0.1", - "vue-loading-overlay": "^5.0.3" + "vue-loading-overlay": "^5.0.3", + "vue-router": "4" }, "devDependencies": { "@babel/core": "^7.12.16", diff --git a/src/App.vue b/src/App.vue index 3ff2fbb..051aaea 100644 --- a/src/App.vue +++ b/src/App.vue @@ -11,7 +11,7 @@ export default { data() { return { ascending: this.ascending, - filter: "", + filter: window.location.href.split("filter=")[1] || "", isLoading: false, sortColumn: this.sortColumn, topics: [], @@ -23,16 +23,24 @@ export default { localStorage.getItem("ascending") === "false" ? false : true; this.isLoading = true; this.fetchDeals(); - Mousetrap.bind("/", this.focusSearch, "keyup"); + Mousetrap.bind("/", this.focusFilter, "keyup"); Mousetrap.bind("r", this.fetchDeals); - Mousetrap.bind("escape", this.blurSearch); + Mousetrap.bind("escape", this.blurFilter); }, methods: { - focusSearch() { - this.$refs.search.focus(); + focusFilter() { + this.$refs.filter.focus(); }, - blurSearch() { - this.$refs.search.blur(); + blurFilter() { + this.$refs.filter.blur(); + }, + createFilterRoute(params) { + this.$refs.filter.blur(); + history.pushState( + {}, + null, + `${window.location.origin}#/filter=${encodeURIComponent(params)}` + ); }, fetchDeals() { this.isLoading = true; @@ -79,14 +87,13 @@ export default { } }, }, - props: ["date"], computed: { formatDate() { return (v) => { return moment(String(v)).format("hh:mm A z (MM/DD)"); }; }, - columns: function columns() { + columns() { return { Deal: "deal", Score: "score", @@ -102,9 +109,8 @@ export default { row.Offer.dealer_name + "]" ).toLowerCase(); - const searchTerm = this.filter.toLowerCase(); - - return titles.includes(searchTerm); + const filterTerm = this.filter.toLowerCase(); + return titles.includes(filterTerm); }); }, highlightMatches() { @@ -131,10 +137,11 @@ export default {