Skip to content

Commit

Permalink
Material sorting updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabianlinkflink
fabianlinkflink committed Apr 4, 2024
1 parent 7082d2d commit 364e56e
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 62 deletions.
51 changes: 16 additions & 35 deletions src/components/Mapping/MaterialSearch.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,22 +84,21 @@
<PopoverGroup class="hidden sm:flex sm:items-baseline sm:space-x-8">
<Popover
as="div"
v-for="(param, paramId) in filters"
:key="param.name"
v-for="(param, paramId) in filterParameters"
:key="param.filterName"
:id="`desktop-menu-${paramId}`"
class="relative inline-block text-left"
>
<button @click="ShowDB">ShowDB</button>
<div>
<PopoverButton
class="group inline-flex items-center justify-center text-sm font-medium text-gray-700 hover:text-gray-900"
>
<span>{{ param.name }}</span>
<span>{{ param.displayName }}</span>
<span
class="ml-1.5 rounded bg-gray-200 px-1.5 py-0.5 text-xs font-semibold tabular-nums text-gray-700"
>
{{ paramFilters[param.id].filter((option) => option.selected).length == 0 ?
'All' : paramFilters[param.id].filter((option) => option.selected).length }}
{{ paramFilters[param.paramName].filter((option) => option.selected).length == 0 ?
'All' : paramFilters[param.paramName].filter((option) => option.selected).length }}
</span>
<ChevronDownIcon
class="-mr-1 m</PopoverButton>l-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
Expand All @@ -121,18 +120,18 @@
>
<form class="space-y-4">
<div
v-for="(option, optionIdx) in paramFilters[param.id]"
v-for="(option, optionIdx) in paramFilters[param.paramName]"
:key="option"
class="flex items-center"
>
<input
:id="`filter-${param.id}-${optionIdx}`"
:name="`${param.id}[]`"
:id="`filter-${param.paramName}-${optionIdx}`"
:name="`${param.paramName}[]`"
:value="option.name"
type="checkbox"
class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
:checked="option.selected"
@change="toggleSelection(param.id, optionIdx)"
@change="toggleSelection(param.paramName, optionIdx)"
/>
<label class="pl-2">
{{ option.name }}
Expand All @@ -149,7 +148,7 @@
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { computed, defineComponent, ref, watch } from 'vue'
import { useMaterialStore } from '@/stores/material'
import { storeToRefs } from 'pinia'
Expand Down Expand Up @@ -205,6 +204,10 @@ export default defineComponent({
}
})
const filterParameters = computed(() => {
return sortingParameters.value.filter(param => param.paramName !== null)
})
//Set sorting in material store
const setSortOption = (parameterName: string) => {
let dir = "asc"
Expand All @@ -215,7 +218,6 @@ export default defineComponent({
materialStore.setSorting(parameterName, dir)
}
watch(() => materialStore.paramFilters,
() => {
materialStore.triggerParamSort()
Expand All @@ -224,41 +226,20 @@ export default defineComponent({
)
const toggleSelection = (sectionId, idx) => {
materialStore[sectionId][idx].selected = !materialStore[sectionId][idx].selected
}
const ShowDB = () => {
console.log(materialStore.materials)
materialStore.paramFilters[sectionId][idx].selected = !materialStore.paramFilters[sectionId][idx].selected
}
const filters = [
{
id: 'matParams',
name: 'Material Type',
},
{
id: 'subParam',
name: 'EPD Type',
},
{
id: 'unitParams',
name: 'Units',
},
]
return {
searchQuery,
filters,
open,
sortingParameters,
filterParameters,
sorting,
paramFilters,
matRef,
toggleSelection,
ShowDB,
setSortOption,
}
},
})
</script>
8 changes: 2 additions & 6 deletions src/components/Sidebar/GroupList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,12 +148,8 @@
name: 'testFiltering',
callStack: [
{
name: 'groupByFilter',
field: 'category'
},
{
name: 'groupByFilter',
field: 'family'
name: 'groupBy',
field: 'speckle_type'
}
]
}
Expand Down
64 changes: 44 additions & 20 deletions src/stores/material.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { EPD } from 'lcax'
import type { EPD, SubType } from 'lcax'
import type { Assembly, SortingOption, FilterParam } from '@/models/project'
import { defineStore } from 'pinia'
import materialList from '@/tests/objects/materialList.json'
Expand All @@ -15,22 +15,26 @@ export const useMaterialStore = defineStore({
assemblyList: [] as Assembly[],
//Filters this could be dynamic?
paramFilters: {
matParams: [] as FilterParam[],
matParam: [] as FilterParam[],
subParam: [] as FilterParam[],
unitParams: [] as FilterParam[],
unitParam: [] as FilterParam[],
},
sortingParameters: [
{ "filterName": 'name',
"displayName": "Name"
"displayName": "Name",
"paramName": null
},
{ "filterName": 'subType',
"displayName": "EPD Type"
"displayName": "EPD Type",
"paramName": "subParam"
},
{ "filterName": 'materialType',
"displayName": "Material Type"
"displayName": "Material Type",
"paramName": "matParam"
},
{ "filterName": 'declared_unit',
"displayName": "Declared Unit"
"displayName": "Declared Unit",
"paramName": "unitParam"
}
],
}),
Expand Down Expand Up @@ -93,7 +97,13 @@ export const useMaterialStore = defineStore({
*/
async materialsFromJson() {
try {
this.materials = materialList as any
this.materials = materialList.map((material: any) => ({
...material,
"meta_data": {
"materialType": material["materialType"]
}
})) as any

this.EPDList = this.materials
this.updateParameters()
} catch (error) {
Expand All @@ -105,13 +115,19 @@ export const useMaterialStore = defineStore({
* Update filterable parameters from material list
*/
updateParameters() {
const uniqueMaterialTypes = Array.from(new Set(this.materials.map((mat) => mat.meta_data?.materialType))).filter(Boolean);
const uniqueSubtypes = Array.from(new Set(this.materials.map((mat) => mat.subtype))).filter(Boolean);
const uniqueDeclaredUnits = Array.from(new Set(this.materials.map((mat) => mat.declared_unit))).filter(Boolean);
const uniqueMaterialTypes = Array.from(
new Set(this.materials.map((mat) => mat.meta_data?.materialType))
).filter(Boolean)
const uniqueSubtypes = Array.from(
new Set(this.materials.map((mat) => mat.subType as SubType))
).filter(Boolean)
const uniqueDeclaredUnits = Array.from(
new Set(this.materials.map((mat) => mat.declared_unit))
).filter(Boolean)

this.paramFilters.matParams = uniqueMaterialTypes.map((name) => ({ name, selected: false }));
this.paramFilters.subParam = uniqueSubtypes.map((name) => ({ name, selected: false }));
this.paramFilters.unitParams = uniqueDeclaredUnits.map((name) => ({ name, selected: false }));
this.paramFilters.matParam = uniqueMaterialTypes.map((name) => ({ name, selected: false }))
this.paramFilters.subParam = uniqueSubtypes.map((name) => ({ name, selected: false }))
this.paramFilters.unitParam = uniqueDeclaredUnits.map((name) => ({ name, selected: false }))
},

/**
Expand All @@ -128,28 +144,36 @@ export const useMaterialStore = defineStore({
*/
triggerParamSort() {
if(this.EPDMode === true) {
// Reset EPDList to all EPDs
this.EPDList = this.materials
this.sortList()
// Go through each paramFilters and check if any are selected
for (const key in this.paramFilters) {
// If none of the filters are selected then take all EPDs
if (!this.paramFilters[key].some((param) => param.selected)) {
continue
} else {
// Include all EPDs that have the selected filter
this.EPDList = this.EPDList.filter(
const EPDkeys = this.sortingParameters.map(param => param.filterName)

const tempList = this.EPDList.filter(
(epd) => {
return this[key]
.filter((param) => param.selected)
.map((param) => param.name)
.includes(epd[key])
return EPDkeys.some((EPDkey) => {
return this.paramFilters[key]
.filter((param) => param.selected)
.map((param) => param.name)
.includes(epd[EPDkey])
})
}
)
this.EPDList = tempList
}
}
} else {
// Go through each assembly and check if the selected filter is in the assembly
this.assemblyList = this.assemblyList.filter(
(assembly) => {
return this.paramFilters.matParams
return this.paramFilters.matParam
.filter((param) => param.selected)
.map((param) => param.name)
.includes(assembly.materials[0].EPD.meta_data?.materialType)
Expand Down
2 changes: 1 addition & 1 deletion src/utils/projectUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ export function createStandardFilters(registry: FilterRegistry) {
/**
* Groupby filter using only field
*/
registry.addFilter('groupByFilter', (inGroup, field) => {
registry.addFilter('groupBy', (inGroup, field) => {
const groupObj: { [field: string]: Group } = {}
for (const grp of inGroup) {
for (const obj of grp.elements) {
Expand Down

0 comments on commit 364e56e

Please sign in to comment.