marcorealacci/WASAPhoto
1
0
Fork 0
mirror of https://github.com/notherealmarco/WASAPhoto.git synced 2025-05-06 20:59:36 +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

11
webui/src/App.vue
View file

@ -17,11 +17,12 @@ export default {
// title: title of the modal
// message: message to show in the modal
showModal(title, message) {
// Set the modal data
this.modalTitle = title
this.modalMsg = message
// Simulate a click on the hidden modal button to open it
this.$refs.openModal.click()
// Show the modal
this.$refs.errModal.showModal()
},
// Sets the login status to true
@ -70,10 +71,10 @@ export default {
</script>
<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 :title="modalTitle" :message="modalMsg" />
<Modal ref="errModal" id="errorModal" :title="modalTitle">
{{ modalMsg }}
</Modal>
<div class="container-fluid">
<div class="row">

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

@ -1,25 +1,36 @@
<script>
export default {
props: ["message", "title"],
props: ["id", "title"],
methods: {
// Visit the user's profile
showModal() {
this.$refs.openModal.click();
},
},
}
</script>
<template>
<!-- This components renders a Bootstrap modal -->
<!-- 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-content">
<div class="modal-header">
<!-- 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>
</div>
<!-- Modal body -->
<div class="modal-body">
{{ message }}
<slot />
</div>
<!-- Footer with close button -->