marcorealacci/WASAPhoto
1
0
Fork 0
mirror of https://github.com/notherealmarco/WASAPhoto.git synced 2025-05-05 12:22:35 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add showModal function to Modal component

Browse source
This commit is contained in:
Marco Realacci 2023-01-15 14:07:33 +01:00
parent 06b93b6f40
commit 1ed38b5da1
3 changed files with 26 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

10
webui/node_modules/.vite/deps/_metadata.json generated vendored
View file

@ -1,23 +1,23 @@
{ {
"hash": "80447977", "hash": "0c3e4771",
"browserHash": "b98131b5", "browserHash": "01248067",
"optimized": { "optimized": {
"axios": { "axios": {
"src": "../../axios/index.js", "src": "../../axios/index.js",
"file": "axios.js", "file": "axios.js",
"fileHash": "6b5eae63", "fileHash": "d8d02cf0",
"needsInterop": true "needsInterop": true
}, },
"vue": { "vue": {
"src": "../../vue/dist/vue.runtime.esm-bundler.js", "src": "../../vue/dist/vue.runtime.esm-bundler.js",
"file": "vue.js", "file": "vue.js",
"fileHash": "de50261f", "fileHash": "f8034b26",
"needsInterop": false "needsInterop": false
}, },
"vue-router": { "vue-router": {
"src": "../../vue-router/dist/vue-router.mjs", "src": "../../vue-router/dist/vue-router.mjs",
"file": "vue-router.js", "file": "vue-router.js",
"fileHash": "4cad12d6", "fileHash": "b4ca170f",
"needsInterop": false "needsInterop": false
} }
}, },

11
webui/src/App.vue
View file

@ -17,11 +17,12 @@ export default {
// title: title of the modal // title: title of the modal
// message: message to show in the modal // message: message to show in the modal
showModal(title, message) { showModal(title, message) {
// Set the modal data
this.modalTitle = title this.modalTitle = title
this.modalMsg = message this.modalMsg = message
// Simulate a click on the hidden modal button to open it // Show the modal
this.$refs.openModal.click() this.$refs.errModal.showModal()
}, },
// Sets the login status to true // Sets the login status to true
@ -70,10 +71,10 @@ export default {
</script> </script>
<template> <template>
<!-- Invisible button to open the modal -->
<button ref="openModal" type="button" class="btn btn-primary" style="display: none" data-bs-toggle="modal" data-bs-target="#modal" />
<!-- Modal to show error messages --> <!-- Modal to show error messages -->
<Modal :title="modalTitle" :message="modalMsg" /> <Modal ref="errModal" id="errorModal" :title="modalTitle">
{{ modalMsg }}
</Modal>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">

19
webui/src/components/Modal.vue
View file

@ -1,25 +1,36 @@
<script> <script>
export default { export default {
props: ["message", "title"], props: ["id", "title"],
methods: {
// Visit the user's profile
showModal() {
this.$refs.openModal.click();
},
},
} }
</script> </script>
<template> <template>
<!-- This components renders a Bootstrap modal --> <!-- This components renders a Bootstrap modal -->
<!-- The modal contains a title and a message --> <!-- The modal contains a title and a message -->
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
<!-- Invisible button to open the modal -->
<button ref="openModal" type="button" class="btn btn-primary" style="display: none" data-bs-toggle="modal" data-bs-target="#errorModal" />
<!-- Modal -->
<div class="modal fade" :id="id" tabindex="-1" :aria-labelledby="id + 'Label'" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<!-- Modal title --> <!-- Modal title -->
<h5 class="modal-title" id="modalLabel">{{ title }}</h5> <h5 class="modal-title" :id="id + 'Label'">{{ title }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<!-- Modal body --> <!-- Modal body -->
<div class="modal-body"> <div class="modal-body">
{{ message }} <slot />
</div> </div>
<!-- Footer with close button --> <!-- Footer with close button -->