huanld/speckle-server
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(frontend): filters from url query

Browse Source
This commit is contained in:
Dimitrie Stefanescu
2022-01-20 18:55:14 +00:00
parent 5008560f7e
commit e2cfbfbb18
4 changed files with 100 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/cleanup/components/viewer/FilterNumericActive.vue
+12 -2
View File
@@ -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],
packages/frontend/src/cleanup/components/viewer/Filters.vue
+17 -3
View File
@@ -43,7 +43,7 @@
<filter-category-active :filter="activeFilter" />
</div>
<div v-if="activeFilter && activeFilter.data.type === 'number'">
<filter-numeric-active :filter="activeFilter" />
<filter-numeric-active :filter="activeFilter" :prevent-first-set="preventFirstSet"/>
</div>
<div v-show="activeFilter === null">
<div v-if="topFilters.length !== 0">
@@ -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() {
packages/frontend/src/cleanup/pages/stream/CommitObjectViewer.vue
+21 -8
View File
@@ -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
packages/frontend/src/store/index.js
+50
View File
@@ -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 = []