Skip to content

Commit

Permalink
New material settings
Browse files Browse the repository at this point in the history
  • Loading branch information
fabianlinkflink committed Jan 15, 2025
1 parent 80e01ae commit 6a8e96e
Show file tree
Hide file tree
Showing 12 changed files with 261 additions and 279 deletions.
44 changes: 8 additions & 36 deletions src/components/Mapping/MaterialMappingModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
<div class="relative mt-1 flex-1 px-4 sm:px-6">
<SearchBar
:data="combinedMaterials"
:filterParam="productFilterParams"
:filterParam="filterParameters"
:sortingParam="sortingParameters"
@update:data="handleFilteredData"
/>
Expand Down Expand Up @@ -96,13 +96,15 @@ import {
import { useProjectStore } from '@/stores/main'
import { useNavigationStore } from '@/stores/navigation'
import { useMaterialStore } from '@/stores/material'
import { useSettingsStore } from '@/stores/settings'
import MappingCard from '@/components/Mapping/MaterialMappingCard.vue'
import MaterialTable from '@/components/Mapping/MaterialTable.vue'
import SearchBar from '@/components/Misc/SearchBar.vue'
import type { NestedGroup } from '@/models/filters'
import type { Product, Assembly } from '@/models/material'
import { useMaterialStore } from '@/stores/material'
export default defineComponent({
name: 'MaterialMappingModal',
Expand All @@ -119,6 +121,7 @@ export default defineComponent({
const navStore = useNavigationStore()
const projectStore = useProjectStore()
const materialStore = useMaterialStore()
const settingsStore = useSettingsStore()
const materials = storeToRefs(materialStore).materials
const assemblies = storeToRefs(materialStore).assemblies
Expand All @@ -128,39 +131,8 @@ export default defineComponent({
const { selectedGroup } = storeToRefs(projectStore)
const { mappingModalOpen} = storeToRefs(navStore)
// TODO: Make these a part of the settings
const productFilterParams = [
{
paramName: 'metaData.Collection',
displayName: 'Revalu Collection',
},
{
paramName: 'source',
displayName: 'Source',
},
{
paramName: 'metaData.materialType',
displayName: 'Material Type',
},
{
paramName: 'isAssembly',
displayName: 'Assembly',
},
]
const sortingParameters = [
{
filterName: 'name',
displayName: 'Name',
},
{
filterName: 'unit',
displayName: 'Unit',
},
{
filterName: 'emission.gwp.a1a3',
displayName: 'Emission',
},
]
const filterParameters = settingsStore.materialSettings.filterParams
const sortingParameters = settingsStore.materialSettings.sortingParams
const searchQuery = ref('')
// If no data selected or available show this instead, mostly for debug
Expand Down Expand Up @@ -192,7 +164,7 @@ export default defineComponent({
materials,
combinedMaterials,
filteredMaterial,
productFilterParams,
filterParameters,
sortingParameters,
handleFilteredData,
closeModal,
Expand Down
154 changes: 154 additions & 0 deletions src/components/Misc/Settings/SettingsMaterial.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
<template>
<div>
<h2 class="text-base/7 font-semibold text-gray-900">Material Settings</h2>
<p class="mt-1 text-sm/6 text-gray-500">Material and assembly settings, sources and filterings.</p>

<dl class="mt-6 space-y-6 divide-y divide-gray-100 border-t border-gray-200 text-sm/6">
<div class="pt-6 sm:flex">
<dt class="font-medium text-gray-900 sm:w-64 sm:flex-none sm:pr-6">Data source</dt>
<dd class="mt-1 flex justify-between gap-x-6 sm:mt-0 sm:flex-auto">
<Dropdown
:items="materialSources"
name="codes"
:dropdownName="Source[selectedSource]"
@selectedItem="handleSelectedItem"
/>
<UpdateButton @click="updateMaterial" />
</dd>
</div>
<div class="pt-6 sm:flex">
<dt class="font-medium text-gray-900 sm:w-64 sm:flex-none sm:pr-6">Include Collections</dt>
<dd class="mt-1 flex justify-between gap-x-6 sm:mt-0 sm:flex-auto">
<input
type="checkbox"
class="h-4 w-4 rounded border-gray-300 text-green-600 focus:ring-green-500"
v-model="settingsStore.materialSettings.includeCollections"
/>
<UpdateButton @click="updateMaterial" />
</dd>
</div>
<div class="pt-6 sm:flex">
<dt class="font-medium text-gray-900 sm:w-64 sm:flex-none sm:pr-6">Filter parameters</dt>
<dd class="mt-1 flex justify-between gap-x-6 sm:mt-0 sm:flex-auto">
<DropdownMulti
filterName="Filter parameters"
displayName="Filter parameters"
:options="filterOptions"
@update:options="(options) => updateFilterOptions(options)"
/>
<UpdateButton @click="updateMaterial" />
</dd>
</div>
<div class="pt-6 sm:flex">
<dt class="font-medium text-gray-900 sm:w-64 sm:flex-none sm:pr-6">Sorting parameters</dt>
<dd class="mt-1 flex justify-between gap-x-6 sm:mt-0 sm:flex-auto">
<DropdownMulti
filterName="Sorting parameters"
displayName="Sorting parameters"
:options="sortingOptions"
@update:options="(options) => updateSortingOptions(options)"
/>
<UpdateButton @click="updateMaterial" />
</dd>
</div>
</dl>
</div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useSettingsStore } from '@/stores/settings'
import type { dropdownItem } from '@/components/Misc/Dropdown.vue'
import type { DropdownOption } from '@/models/pageLogic'
import { Source } from '@/models/material'
import Dropdown from '../Dropdown.vue'
import UpdateButton from './UpdateButton.vue'
import DropdownMulti from '../DropdownMulti.vue'
export default defineComponent({
name: 'SettingsMaterial',
components: {
Dropdown,
DropdownMulti,
UpdateButton
},
setup() {
const settingsStore = useSettingsStore()
const { filterParams, sortingParams } = settingsStore.materialSettings
// Add sources for dropdown
const materialSources: dropdownItem[] = []
for (const source in Source) {
if (isNaN(Number(source)))
materialSources.push({ name: source })
}
const selectedSource = ref(settingsStore.materialSettings.Source)
const selectedFilters = ref(settingsStore.materialSettings.filterParams)
const selectedSortings = ref(settingsStore.materialSettings.sortingParams)
const filterOptions = filterParams.map((param) => {
return {
value: param.paramName,
label: param.displayName,
selected: param.selected
}
})
const sortingOptions = sortingParams.map((param) => {
return {
value: param.filterName,
label: param.displayName,
selected: param.selected
}
})
const handleSelectedItem = (selectedItem: dropdownItem) => {
selectedSource.value = Source[selectedItem.name as keyof typeof Source]
}
// Update filter options when DropdownMulti emits 'update:options'
const updateFilterOptions = (options: DropdownOption[]) => {
selectedFilters.value.map((filter) => {
return options.map((option) => {
if (option.value === filter.paramName)
filter.selected = option.selected
})
})
}
const updateSortingOptions = (options: DropdownOption[]) => {
selectedSortings.value.map((filter) => {
return options.map((option) => {
if (option.value === filter.filterName)
filter.selected = option.selected
})
})
}
const updateMaterial = () => {
settingsStore.updateEPDSource(selectedSource.value)
}
return {
materialSources,
selectedSource,
Source,
settingsStore,
filterParams,
filterOptions,
sortingOptions,
sortingParams,
handleSelectedItem,
updateMaterial,
updateFilterOptions,
updateSortingOptions
}
},
})
</script>
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ import { useSettingsStore } from '@/stores/settings'
import UpdateButton from '@/components/Misc/Settings/UpdateButton.vue'
export default defineComponent({
name: 'SettingsMaterials',
name: 'SettingsMaterialKeys',
components: {
UpdateButton
},
Expand Down
49 changes: 9 additions & 40 deletions src/components/Modals/AssemblyModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
> NEW ASSEMBLY </button>
<SearchBar
:data="assemblyData"
:filterParam="assemblyFilterParams"
:filterParam="filterParameters"
:sortingParam="sortingParameters"
@update:data="handleFilteredAssemblyData"
/>
Expand Down Expand Up @@ -154,7 +154,7 @@
<div class="relative mt-1 flex-1 px-4 sm:px-6">
<SearchBar
:data="productData"
:filterParam="productFilterParams"
:filterParam="filterParameters"
:sortingParam="sortingParameters"
@update:data="handleFilteredData"
/>
Expand Down Expand Up @@ -193,6 +193,7 @@ import { useNavigationStore } from '@/stores/navigation'
import { useMaterialStore } from '@/stores/material'
import { useFirebaseStore } from '@/stores/firebase'
import { useProjectStore } from '@/stores/main'
import { useSettingsStore } from '@/stores/settings'
import MaterialTable from '@/components/Mapping/MaterialTable.vue'
import AssemblyTable from '@/components/Mapping/AssemblyTable.vue'
Expand Down Expand Up @@ -234,6 +235,8 @@ export default defineComponent({
const materialStore = useMaterialStore()
const firebaseStore = useFirebaseStore()
const projectStore = useProjectStore()
const settingsStore = useSettingsStore()
const { assemblyModalOpen, assemblyTableShow } = storeToRefs(navStore)
const { currentAssemby } = storeToRefs(materialStore)
Expand All @@ -246,42 +249,9 @@ export default defineComponent({
//const filteredProducts = ref<Product[] | Assembly[]>([])
const productFilterParams = [
{
paramName: 'metaData.materialType',
displayName: 'Material Type',
},
{
paramName: 'unit',
displayName: 'Unit',
},
]
const assemblyFilterParams = [
{
paramName: 'category',
displayName: 'Category',
},
{
paramName: 'metaData.materialType',
displayName: 'Material Type',
},
]
const sortingParameters = [
{
filterName: 'name',
displayName: 'Name',
},
{
filterName: 'unit',
displayName: 'Unit',
},
{
filterName: 'emission.gwp.a1a3',
displayName: 'Emission',
},
]
const filterParameters = settingsStore.materialSettings.filterParams
const sortingParameters = settingsStore.materialSettings.sortingParams
const filteredProducts = ref<Product[]>([])
const filteredAssemblies = ref<Assembly[]>([])
const productData = materialStore.materials
Expand Down Expand Up @@ -406,8 +376,7 @@ export default defineComponent({
assemblyTableShow,
assemblyName,
assemblyDescription,
productFilterParams,
assemblyFilterParams,
filterParameters,
sortingParameters,
filteredProducts,
filteredAssemblies,
Expand Down
13 changes: 9 additions & 4 deletions src/components/Modals/SettingsModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -62,22 +62,24 @@ import {
TransitionChild,
TransitionRoot,
} from '@headlessui/vue'
import { UserCircleIcon, FingerPrintIcon, CalculatorIcon } from '@heroicons/vue/20/solid'
import { UserCircleIcon, FingerPrintIcon, CalculatorIcon, CubeTransparentIcon } from '@heroicons/vue/20/solid'
import { useNavigationStore } from '@/stores/navigation'
import SettingsSidebar from '@/components/Misc/Settings/SettingsSidebar.vue'
import SettingsGeneral from '@/components/Misc/Settings/SettingsGeneral.vue'
import SettingsMaterial from '@/components/Misc/Settings/SettingsMaterial.vue'
import SettingsCalculationCategory from '@/components/Misc/Settings/SettingsCalculationCategory.vue'
import SettingsImpactCategory from '@/components/Misc/Settings/SettingsImpactCategory.vue'
import SettingsLifecycleStages from '@/components/Misc/Settings/SettingsLifecycleStages.vue'
import SettingsBuildingCodes from '@/components/Misc/Settings/SettingsBuildingCodes.vue'
import SettingsFirebase from '@/components/Misc/Settings/SettingsFirebase.vue'
import SettingsSpeckle from '@/components/Misc/Settings/SettingsSpeckle.vue'
import SettingsMaterials from '@/components/Misc/Settings/SettingsMaterials.vue'
import SettingsMaterialKeys from '@/components/Misc/Settings/SettingsMaterialKeys.vue'
import SettingsGithub from '@/components/Misc/Settings/SettingsGithub.vue'
import type { SettingView } from '@/models/settings'
Expand All @@ -95,7 +97,8 @@ export default defineComponent({
SettingsSidebar,
SettingsFirebase,
SettingsSpeckle,
SettingsMaterials,
SettingsMaterialKeys,
SettingsMaterial,
SettingsGithub,
SettingsLifecycleStages,
SettingsCalculationCategory,
Expand All @@ -108,14 +111,16 @@ export default defineComponent({
const settingViews = reactive<SettingView[]>([
{ name: 'General', icon: UserCircleIcon, current: true },
{ name: 'Materials', icon: CubeTransparentIcon, current: false },
{ name: 'Calculation', icon: CalculatorIcon, current: false },
{ name: 'Keys', icon: FingerPrintIcon, current: false },
])
const viewComponents = {
'General': [SettingsGeneral],
'Materials': [SettingsMaterial],
'Calculation': [SettingsCalculationCategory, SettingsImpactCategory, SettingsLifecycleStages, SettingsBuildingCodes],
'Keys': [SettingsFirebase, SettingsSpeckle, SettingsMaterials, SettingsGithub],
'Keys': [SettingsFirebase, SettingsSpeckle, SettingsMaterialKeys, SettingsGithub],
}
const currentViewComponents = computed(() => viewComponents[currentSettingView.value])
Expand Down
Loading

0 comments on commit 6a8e96e

Please sign in to comment.