Fix zone list refresh after creating a zone

src/components/utilities/zoneEditor/CreateZone.vue

@@ -38,7 +38,7 @@ import Modal from '@/components/utilities/Modal.vue'
 import { useSocketStore } from '@/stores/socket'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 
-const emit = defineEmits(['submit'])
+const emit = defineEmits(['submitForm'])
 const socket = useSocketStore()
 const zoneEditorStore = useZoneEditorStore()
 
@@ -46,10 +46,9 @@ const name = ref('')
 const width = ref(0)
 const height = ref(0)
 
-const submit = () => {
+function submit() {
   socket.connection.emit('gm:zone_editor:zone:create', { name: name.value, width: width.value, height: height.value }, () => {})
-
   zoneEditorStore.toggleCreateZoneModal()
-  emit('submit')
+  emit('submitForm')
 }
 </script>

src/components/utilities/zoneEditor/ZoneList.vue

@@ -1,5 +1,5 @@
 <template>
-  <CreateZone @submit="fetchZones" v-if="zoneEditorStore.isCreateZoneModalShown" />
+  <CreateZone @submitForm="fetchZones" v-if="zoneEditorStore.isCreateZoneModalShown" />
 
   <Teleport to="body">
     <Modal @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :is-modal-open="true" :modal-width="300" :modal-height="360">
@@ -11,7 +11,7 @@
           <div class="text-center mb-4 px-2">
             <button class="btn-cyan py-1.5 min-w-full" @click="() => zoneEditorStore.toggleCreateZoneModal()">New</button>
           </div>
-          <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(zone, index) in zones" :key="zone.id">
+          <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(zone, index) in zoneEditorStore.zoneList" :key="zone.id">
             <div class="absolute left-0 top-0 w-full h-[1px] bg-cyan-200" v-if="index === 0"></div>
             <div class="flex gap-3 items-center w-full">
               <span @click="() => loadZone(zone.id)">{{ zone.name }}</span>
@@ -37,7 +37,6 @@ import CreateZone from '@/components/utilities/zoneEditor/CreateZone.vue'
 
 const socket = useSocketStore()
 const zoneEditorStore = useZoneEditorStore()
-const zones = ref([] as Zone[])
 
 onMounted(async () => {
   fetchZones()
@@ -45,7 +44,7 @@ onMounted(async () => {
 
 function fetchZones() {
   socket.connection.emit('gm:zone_editor:zone:list', {}, (response: Zone[]) => {
-    zones.value = response
+    zoneEditorStore.setZoneList(response)
   })
 }
 

src/stores/zoneEditor.ts

@@ -7,6 +7,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     zone: null as Zone | null,
     tool: 'move',
     drawMode: 'tile',
+    zoneList: [] as Zone[],
     tileList: [] as Tile[],
     objectList: [] as Object[],
     selectedTile: null as Tile | null,
@@ -44,6 +45,9 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     setDrawMode(mode: string) {
       this.drawMode = mode
     },
+    setZoneList(zones: Zone[]) {
+      this.zoneList = zones
+    },
     setTileList(tiles: Tile[]) {
       this.tileList = tiles
     },
@@ -70,6 +74,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       this.isCreateZoneModalShown = !this.isCreateZoneModalShown
     },
     reset() {
+      this.zoneList = []
       this.tileList = []
       this.objectList = []
       this.tool = 'move'