From 3dbfc5d67731ba28c7118502bd2d2ab242c3ec0e Mon Sep 17 00:00:00 2001
From: David Zwart <davidzwa@gmail.com>
Date: Sat, 7 Dec 2024 14:03:01 +0100
Subject: [PATCH] fix: print grid - floor toggle would de-synchronize with
 store

---
 RELEASE_NOTES.MD                           |  1 +
 src/components/PrinterGrid/HomeToolbar.vue |  5 ++--
 src/store/floor.store.ts                   | 30 ++++++++++++++++------
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/RELEASE_NOTES.MD b/RELEASE_NOTES.MD
index 584e9dbf..c6045f2d 100644
--- a/RELEASE_NOTES.MD
+++ b/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
 
diff --git a/src/components/PrinterGrid/HomeToolbar.vue b/src/components/PrinterGrid/HomeToolbar.vue
index 7f32e66e..968d9b36 100644
--- a/src/components/PrinterGrid/HomeToolbar.vue
+++ b/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,7 +89,7 @@ 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
@@ -97,6 +97,5 @@ const floors = computed(() => {
 
 function changeFloorIndex(index: any) {
   floorStore.changeSelectedFloorByIndex(index)
-  selectedFloorToggleIndex.value = index
 }
 </script>
diff --git a/src/store/floor.store.ts b/src/store/floor.store.ts
index 72f53925..ad56194f 100644
--- a/src/store/floor.store.ts
+++ b/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,