From e2cfbfbb181c927f8e71a364989b51669dcb6c1d Mon Sep 17 00:00:00 2001 From: Dimitrie Stefanescu Date: Thu, 20 Jan 2022 18:55:14 +0000 Subject: [PATCH] feat(frontend): filters from url query --- .../components/viewer/FilterNumericActive.vue | 14 +++++- .../src/cleanup/components/viewer/Filters.vue | 20 ++++++-- .../pages/stream/CommitObjectViewer.vue | 29 ++++++++--- packages/frontend/src/store/index.js | 50 +++++++++++++++++++ 4 files changed, 100 insertions(+), 13 deletions(-) diff --git a/packages/frontend/src/cleanup/components/viewer/FilterNumericActive.vue b/packages/frontend/src/cleanup/components/viewer/FilterNumericActive.vue index 310b685b8..8b9bdf2c5 100644 --- a/packages/frontend/src/cleanup/components/viewer/FilterNumericActive.vue +++ b/packages/frontend/src/cleanup/components/viewer/FilterNumericActive.vue @@ -73,13 +73,15 @@ export default { type: Object, default: () => null }, - active: { type: Boolean, default: false } + active: { type: Boolean, default: false }, + preventFirstSet: { type: Boolean, default: false } }, data() { return { range: [0, 1], colorBy: true, - width: 300 + width: 300, + preventFirstSetInternal: this.preventFirstSet } }, watch: { @@ -105,6 +107,10 @@ export default { }, methods: { async setFilterHistogram(e) { + if (this.preventFirstSetInternal) { + this.preventFirstSetInternal = false + return + } this.$store.commit('setNumericFilter', { filterKey: this.filter.targetKey, minValue: e.from, @@ -112,6 +118,10 @@ export default { }) }, async setFilter() { + if (this.preventFirstSetInternal) { + this.preventFirstSetInternal = false + return + } this.$store.commit('setNumericFilter', { filterKey: this.filter.targetKey, minValue: this.range[0], diff --git a/packages/frontend/src/cleanup/components/viewer/Filters.vue b/packages/frontend/src/cleanup/components/viewer/Filters.vue index d12c53358..b75038aa6 100644 --- a/packages/frontend/src/cleanup/components/viewer/Filters.vue +++ b/packages/frontend/src/cleanup/components/viewer/Filters.vue @@ -43,7 +43,7 @@
- +
@@ -99,7 +99,9 @@ export default { revitFilters: ['type', 'family', 'level'], allFilters: [], activeFilter: null, - filterSearch: null + filterSearch: null, + trySetPresetFilter: false, + preventFirstSet: false } }, computed: { @@ -129,7 +131,19 @@ export default { }, watch: { props(newVal) { - if (newVal) this.parseAndSetFilters() + if (newVal) { + this.parseAndSetFilters() + } + }, + '$store.state.appliedFilter'(val) { + if (this.trySetPresetFilter) return + if (this.$store.state.appliedFilter && this.$store.state.appliedFilter.filterBy) { + let key = Object.keys(this.$store.state.appliedFilter.filterBy)[0] + let presetFilter = this.allFilters.find((f) => f.targetKey === key) + if (presetFilter) this.activeFilter = presetFilter + this.trySetPresetFilter = true + this.preventFirstSet = true + } } }, mounted() { diff --git a/packages/frontend/src/cleanup/pages/stream/CommitObjectViewer.vue b/packages/frontend/src/cleanup/pages/stream/CommitObjectViewer.vue index e923b5257..cda61f1d0 100644 --- a/packages/frontend/src/cleanup/pages/stream/CommitObjectViewer.vue +++ b/packages/frontend/src/cleanup/pages/stream/CommitObjectViewer.vue @@ -242,10 +242,12 @@ export default { } let fullQuery = { ...this.$route.query } delete fullQuery.filter - this.$router.replace({ - path: this.$route.path, - query: { ...fullQuery, filter: encodeURIComponent(JSON.stringify(val)) } - }) + this.$router + .replace({ + path: this.$route.path, + query: { ...fullQuery, filter: encodeURIComponent(JSON.stringify(val)) } + }) + .catch(() => {}) } }, async mounted() { @@ -285,14 +287,18 @@ export default { ) return } - console.log('mounted') + this.$eventHub.$emit('page-load', false) this.firstCallToCam = true this.camToSet = null + this.filterToSet = null if (this.$route.query && this.$route.query.c) { - let posArr = JSON.parse(decodeURIComponent(this.$route.query.c)) - this.camToSet = posArr + this.camToSet = JSON.parse(decodeURIComponent(this.$route.query.c)) + } + + if (this.$route.query && this.$route.query.filter) { + this.filterToSet = JSON.parse(decodeURIComponent(this.$route.query.filter)) } setTimeout(() => { @@ -321,6 +327,14 @@ export default { this.camToSet = null }, 200) } + + if (!val && this.filterToSet) { + setTimeout(() => { + this.$store.commit('setFilterDirect', { filter: this.filterToSet }) + // window.__viewer.applyFilter(this.filterToSet) + this.filterToSet = null + }, 200) + } }) window.__viewer.cameraHandler.controls.addEventListener( @@ -344,7 +358,6 @@ export default { window.__viewer.cameraHandler.activeCam.name === 'ortho' ? 1 : 0, controls._zoom ] - console.log(c) let fullQuery = { ...this.$route.query } delete fullQuery.c this.$router diff --git a/packages/frontend/src/store/index.js b/packages/frontend/src/store/index.js index bda8f1815..9d9b66b68 100644 --- a/packages/frontend/src/store/index.js +++ b/packages/frontend/src/store/index.js @@ -174,6 +174,56 @@ const store = new Vuex.Store({ } window.__viewer.applyFilter(state.appliedFilter) }, + async setFilterDirect(state, { filter }) { + let filterBy = filter.filterBy + if (filterBy && filterBy.__parents) { + if (filterBy.__parents.includes) { + this.commit('isolateObjects', { + filterKey: '__parents', + filterValues: filterBy.__parents.includes + }) + return + } + if (filterBy.__parents.excludes) { + this.commit('hideObjects', { + filterKey: '__parents', + filterValues: filterBy.__parents.excludes + }) + return + } + } else if (filter.ghostOthers) { + // means it's isolate by category or numeric filter + if (filter.colorBy && filter.colorBy.type === 'gradient') { + this.commit('setNumericFilter', { + filterKey: Object.keys(filter.filterBy)[0], + minValue: filter.filterBy[Object.keys(filter.filterBy)[0]].gte, + maxValue: filter.filterBy[Object.keys(filter.filterBy)[0]].lte + }) + } else { + let values = filterBy[Object.keys(filter.filterBy)[0]] + for (const val of values) { + let f = { + filterKey: Object.keys(filter.filterBy)[0], + filterValue: val, + allValues: [], + colorBy: filter.colorBy + } + this.commit('isolateCategoryToggle', f) + } + } + } else { + let values = filterBy[Object.keys(filter.filterBy)[0]].not + for (const val of values) { + let f = { + filterKey: Object.keys(filter.filterBy)[0], + filterValue: val, + allValues: [], + colorBy: filter.colorBy + } + this.commit('hideCategoryToggle', f) + } + } + }, resetInternalHideIsolateObjectState(state) { state.isolateKey = null state.isolateValues = []