From 1011b94096ad5608cb39c4d050bcc2fb56ceda9f Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Fri, 12 Jul 2024 00:56:25 +0200
Subject: [PATCH] Improvements

---
 src/components/utilities/zoneEditor/CreateZone.vue | 9 +++++----
 src/components/utilities/zoneEditor/ZoneList.vue   | 7 ++++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/utilities/zoneEditor/CreateZone.vue b/src/components/utilities/zoneEditor/CreateZone.vue
index 1dd044a..7e62b6d 100644
--- a/src/components/utilities/zoneEditor/CreateZone.vue
+++ b/src/components/utilities/zoneEditor/CreateZone.vue
@@ -32,13 +32,13 @@
   </Modal>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
 import { useSocketStore } from '@/stores/socket'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
+import type { Zone } from '@/types'
 
-const emit = defineEmits(['submitForm'])
 const socket = useSocketStore()
 const zoneEditorStore = useZoneEditorStore()
 
@@ -47,8 +47,9 @@ const width = ref(0)
 const height = ref(0)
 
 function submit() {
-  socket.connection.emit('gm:zone_editor:zone:create', { name: name.value, width: width.value, height: height.value }, () => {})
+  socket.connection.emit('gm:zone_editor:zone:create', { name: name.value, width: width.value, height: height.value }, (response: Zone[]) => {
+    zoneEditorStore.setZoneList(response)
+  })
   zoneEditorStore.toggleCreateZoneModal()
-  emit('submitForm')
 }
 </script>
diff --git a/src/components/utilities/zoneEditor/ZoneList.vue b/src/components/utilities/zoneEditor/ZoneList.vue
index 265055a..70b354a 100644
--- a/src/components/utilities/zoneEditor/ZoneList.vue
+++ b/src/components/utilities/zoneEditor/ZoneList.vue
@@ -1,5 +1,5 @@
 <template>
-  <CreateZone @submitForm="fetchZones" v-if="zoneEditorStore.isCreateZoneModalShown" />
+  <CreateZone 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">
@@ -8,8 +8,9 @@
       </template>
       <template #modalBody>
         <div class="my-[15px] mx-auto">
-          <div class="text-center mb-4 px-2">
-            <button class="btn-cyan py-1.5 min-w-full" @click="() => zoneEditorStore.toggleCreateZoneModal()">New</button>
+          <div class="text-center mb-4 px-2 flex justify-around">
+            <button class="btn-cyan py-1.5 min-w-[48%]" @click="fetchZones">Refresh</button>
+            <button class="btn-cyan py-1.5 min-w-[48%]" @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 zoneEditorStore.zoneList" :key="zone.id">
             <div class="absolute left-0 top-0 w-full h-[1px] bg-cyan-200" v-if="index === 0"></div>