Merge pull request #597 from fdm-monster/fix/floor-toggle-desyncs

fix: print grid - floor toggle would de-synchronize with store

RELEASE_NOTES.MD

@@ -3,6 +3,7 @@
 ## Fixes
 
 - Tile: add tooltips, fix: add pausing as paused state
+- Print grid: floor toggle would de-synchronize with store
 
 # Client 0.0.12
 

src/components/PrinterGrid/HomeToolbar.vue

@@ -76,7 +76,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { usePrinterStore } from '@/store/printer.store'
 import { useGridStore } from '@/store/grid.store'
 import { useFloorStore } from '@/store/floor.store'
@@ -89,14 +89,13 @@ const printerStateStore = usePrinterStateStore()
 const floorStore = useFloorStore()
 const gridStore = useGridStore()
 
-const selectedFloorToggleIndex = ref<number>(0)
+const selectedFloorToggleIndex = computed(() => floorStore.selectedFloorIndex)
 
 const floors = computed(() => {
   return floorStore.floors
 })
 
 function changeFloorIndex(index: any) {
   floorStore.changeSelectedFloorByIndex(index)
-  selectedFloorToggleIndex.value = index
 }
 </script>

src/store/floor.store.ts

@@ -8,15 +8,21 @@ import { IdType } from '@/utils/id.type'
 
 export interface State {
   floors: FloorDto[]
-  selectedFloor: FloorDto | null
+  selectedFloorIndex: number
 }
 
 export const useFloorStore = defineStore('Floors', {
   state: (): State => ({
     floors: [],
-    selectedFloor: null
+    selectedFloorIndex: 0
   }),
   getters: {
+    selectedFloor(state): FloorDto | null {
+      if (state.floors.length <= state.selectedFloorIndex) {
+        return null
+      }
+      return state.floors[state.selectedFloorIndex]
+    },
     sortedFloors(state) {
       return state.floors.sort((f, f2) => f.floor - f2.floor)
     },
@@ -85,8 +91,8 @@ export const useFloorStore = defineStore('Floors', {
       if (!floors?.length) return
       this.floors = floors.sort((f, f2) => f.floor - f2.floor)
       const floorId = this.selectedFloor?.id
-      const foundFloor = this.floors.find((f) => f.id === floorId)
-      this.selectedFloor = !foundFloor ? this.floors[0] : foundFloor
+      const foundFloorIndex = this.floors.findIndex((f) => f.id === floorId)
+      this.selectedFloorIndex = foundFloorIndex === -1 ? 0 : foundFloorIndex
     },
     async deleteFloor(floorId: IdType) {
       await FloorService.deleteFloor(floorId)
@@ -134,13 +140,21 @@ export const useFloorStore = defineStore('Floors', {
     },
     async changeSelectedFloorByIndex(selectedPrinterFloorIndex: number) {
       if (!this.floors?.length) return
-      if (this.floors.length <= selectedPrinterFloorIndex) return
+      if (this.floors.length <= selectedPrinterFloorIndex) {
+        console.warn('Selected floor index exceeds floors array')
+        this.selectedFloorIndex = 0
+        return
+      }
 
       const newFloor = this.floors[selectedPrinterFloorIndex]
       // TODO throw warning?
-      if (!newFloor) return
-      this.selectedFloor = newFloor
-      return newFloor
+      if (!newFloor) {
+        console.warn('Selected floor index did not exist in floors array')
+        this.selectedFloorIndex = 0
+        return
+      }
+
+      this.selectedFloorIndex = selectedPrinterFloorIndex
     },
     async deletePrinterFromFloor({
       floorId,