Skip to content
Snippets Groups Projects

Modal to directly navigate to an element

Closed Valentin Rigal requested to merge elt-quick-access into master
1 unresolved thread
1 file
+ 37
3
Compare changes
  • Side-by-side
  • Inline
+ 37
3
@@ -45,6 +45,22 @@
/>
</transition-group>
</div>
<Modal v-model="gotoModal" title="Navigate to element">
    • If you used a dedicated component for that, you may be able to set the focus in mounted ?

      WDYT @erwanrouchet

      • It would probably be cleaner to have all of this in a separate component, but a modal may still be hidden when it is mounted, since it's only when the v-model becomes true that it actually is opened.

        The focus can be done by setting a Vue ref on the input with <input ref="gotoInput" …>, then calling this.$refs.gotoInput.focus() when the modal is opened (when this.gotoModal becomes true). This is how we do it in other components like the filter bar.

      • Author Maintainer

        @erwanrouchet I tried exactly that, but it did not work in that case.
        Maybe it is because of the search input that is triggered by ctrl + g. I'll look further.

        Edited by Valentin Rigal
      • Please register or sign in to reply
Please register or sign in to reply
<form id="goto-form" v-on:submit.prevent="goto">
<div class="control">
<input
v-model="targetElt"
class="input"
type="text"
placeholder="Element ID"
/>
</div>
<p class="help is-danger">{{ gotoError }}</p>
</form>
<template v-slot:footer="">
<button type="submit" class="button" form="goto-form">Go</button>
</template>
</Modal>
</template>
<script>
@@ -53,11 +69,13 @@ import {
mapGetters as mapVuexGetters
} from 'vuex'
import { mapState, mapActions } from 'pinia'
import Mousetrap from 'mousetrap'
import { useDisplayStore, useNotificationStore } from '@/stores'
import { VERSION, BANNER_MESSAGE, BANNER_STYLE } from '@/config'
import { VERSION, BANNER_MESSAGE, BANNER_STYLE, UUID_REGEX } from '@/config'
import Navbar from '@/components/Navbar'
import Modal from '@/components/Modal.vue'
import Notification from '@/components/Notification'
import DoorBell from '@/components/DoorBell'
@@ -65,18 +83,26 @@ export default {
components: {
Navbar,
Notification,
Modal,
DoorBell
},
data: () => ({
VERSION,
loggingWarning: false,
emailWarning: false
emailWarning: false,
gotoModal: false,
targetElt: null,
gotoError: ''
}),
mounted () {
this.setScreenSize()
if (BANNER_MESSAGE) {
this.notify({ type: BANNER_STYLE, text: BANNER_MESSAGE, timeout: 0, markdown: true })
}
Mousetrap.bind('ctrl+g', () => {
this.gotoError = ''
this.gotoModal = true
})
},
computed: {
...mapVuexState('auth', ['user']),
@@ -93,7 +119,15 @@ export default {
},
methods: {
...mapActions(useDisplayStore, ['setScreenSize']),
...mapActions(useNotificationStore, ['notify'])
...mapActions(useNotificationStore, ['notify']),
goto () {
if (!UUID_REGEX.test(this.targetElt)) {
this.gotoError = 'This value must be a valid UUID'
return
}
this.gotoModal = false
this.$router.push({ name: 'element-details', params: { id: this.targetElt } })
}
},
watch: {
isLoggedOn: {
Loading