gitea
/
Koha-clms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bug 39320: VueJS framework: Add option to have a component in dialog 

Sponsored-by: UKHSA (UK Health Security Agency)

Signed-off-by: Jeremy Evans <Jeremy.Evans@ukhsa.gov.uk>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
This commit is contained in:
Pedro Amorim 2025-10-07 08:57:01 +00:00 committed by Lucas Gass
parent 3e5ce26d5e
commit f417b4ca0c
No known key found for this signature in database
GPG Key ID: 60B447398B0D36CA
2 changed files with 62 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue
View File

@ -95,6 +95,40 @@
</div>
</div>
</div>
<div
class="component modal"
role="dialog"
v-if="componentDialog"
id="component"
>
<div class="modal-dialog">
<div class="modal-content modal-lg">
<div class="modal-header alert-warning component">
<h1 v-html="componentDialog.title"></h1>
</div>
<div class="modal-body">
<component
v-if="requiredComponent"
:is="requiredComponent"
v-bind="componentDialog.componentProps"
v-on="componentDialog.componentListeners"
/>
</div>
<div class="modal-footer">
<button
id="close_modal"
class="btn btn-default deny cancel"
type="button"
data-bs-dismiss="modal"
@click="removeConfirmationMessages"
>
<i class="fa fa-fw fa-remove"></i>
<span v-html="componentDialog.cancel_label"></span>
</button>
</div>
</div>
</div>
</div>
<div class="modal_centered" v-if="is_submitting">
<div class="spinner alert alert-warning">
@ -115,9 +149,11 @@ import {
reactive,
computed,
useTemplateRef,
defineAsyncComponent,
} from "vue";
import { storeToRefs } from "pinia";
import FormElement from "./FormElement.vue";
import { loadComponent } from "@koha-vue/loaders/componentResolver";
export default {
setup() {
@ -127,6 +163,7 @@ export default {
error,
warning,
confirmation,
componentDialog,
accept_callback,
is_submitting,
is_loading,
@ -192,11 +229,29 @@ export default {
});
});
watch(componentDialog, newComponentDialog => {
if (!newComponentDialog) {
$("#component.modal").modal("hide");
return;
}
nextTick(() => {
$("#component.modal").modal("show");
});
});
const requiredComponent = computed(() => {
if (!componentDialog.value?.componentPath) return null;
return defineAsyncComponent(
loadComponent(componentDialog.value.componentPath)
);
});
return {
message,
error,
warning,
confirmation,
componentDialog,
accept_callback,
is_submitting,
is_loading,
@ -205,6 +260,7 @@ export default {
fp_config,
submit,
inputFields,
requiredComponent,
};
},
components: {

6
koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
View File

@ -10,6 +10,7 @@ export const useMainStore = defineStore("main", () => {
accept_callback: null,
previousMessage: null,
previousError: null,
componentDialog: null,
displayed_already: false,
is_submitting: false,
is_loading: false,
@ -66,6 +67,11 @@ export const useMainStore = defineStore("main", () => {
this.displayed_already =
displayed; /* Is displayed on the current view */
},
setComponentDialog(componentDialog, displayed = true) {
this.componentDialog = componentDialog;
this.displayed_already =
displayed; /* Is displayed on the current view */
},
removeMessages() {
if (this.displayed_already) {
this.error = null;