From e961797c7b5ca62a09d79be07e257f69811ab20d Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Wed, 7 Sep 2022 15:07:12 +0200
Subject: [PATCH] feat: autofocus name input when PlayerDialog is opened

---
 client/src/components/admin/PlayerDialog.vue | 13 ++++++++-----
 client/src/components/admin/PlayersTile.vue  |  2 +-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/client/src/components/admin/PlayerDialog.vue b/client/src/components/admin/PlayerDialog.vue
index 7e105c5..d1d6886 100644
--- a/client/src/components/admin/PlayerDialog.vue
+++ b/client/src/components/admin/PlayerDialog.vue
@@ -1,7 +1,7 @@
 <template>
-  <ModalDialog v-if="show" :title="title" @close="emit('close')">
+  <ModalDialog :title="title" @close="emit('close')">
     <label class="player-dialog__label">Name</label>
-    <input class="player-dialog__input" v-model="player.name" size="40" />
+    <input id="player-dialog-name" class="player-dialog__input" v-model="player.name" size="40"/>
     <label class="player-dialog__label">Score</label>
     <input class="player-dialog__input" v-model="player.score" size="40" maxlength="4" />
     <label class="player-dialog__label">Authcode</label>
@@ -22,20 +22,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { PlayerEdit } from '@/composables/engine.d'
 import type { Button } from '@/components/admin/PlayerModal'
 
 const props = defineProps<{
   title: string
-  show: boolean
   buttons: Array<Button>
   player: PlayerEdit
 }>()
 
 const emit = defineEmits(['close', 'submit'])
 const showId = ref(false)
-watch([props], () => { showId.value = false })  // reset visibility each time the dialog is shown
+onMounted(() => { 
+  window.setTimeout(() => {
+    document.getElementById('player-dialog-name')?.focus()
+  }, 0)
+})
 
 const generate = () => {
   props.player.authcode = ''
diff --git a/client/src/components/admin/PlayersTile.vue b/client/src/components/admin/PlayersTile.vue
index 67bafc3..caead85 100644
--- a/client/src/components/admin/PlayersTile.vue
+++ b/client/src/components/admin/PlayersTile.vue
@@ -21,7 +21,7 @@
         </tr>
       </table>
     </AdminTile>
-    <AdminPlayerDialog :show="showPlayerDialog" :title="playerDialogTitle" :buttons="playerDialogButtons"
+    <AdminPlayerDialog v-if="showPlayerDialog" :title="playerDialogTitle" :buttons="playerDialogButtons"
       :player="playerDialogPlayer" @close="showPlayerDialog = false" @submit="playerDialogSubmit" />
   </div>
 </template>