Koha-community/Koha
13
7
Fork 0
Code Issues Releases Wiki Activity

Bug 37812: Adjust modals from the Preservation module - bootstrap5

Browse source 
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
This commit is contained in:
Jonathan Druart 2024-09-10 16:06:35 +02:00 committed by Martin Renvoize
parent d785fb1c1e
commit a2782f9146
Signed by: martin.renvoize
GPG key ID: 422B469130441A0F
2 changed files with 188 additions and 153 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

96
koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/TrainsShow.vue
View file

@ -1,15 +1,35 @@
<template> <template>
<transition name="modal"> <div
<div v-if="show_modal" class="modal"> id="copy_item_to_train"
<h2>{{ $__("Copy item to the following train") }}</h2> class="modal"
<form @submit="copyItem($event)"> role="dialog"
<div class="page-section"> aria-labelledby="copy_item_to_train_label"
<fieldset class="rows"> aria-hidden="true"
<ol> >
<li> <div class="modal-dialog modal-lg">
<label class="required" for="train_list" <div class="modal-content modal-lg">
>{{ $__("Select a train") }}:</label <form @submit="copyItem($event)">
> <div class="modal-header">
<h1 class="modal-title" id="copy_item_to_train_label">
{{ $__("Copy item to the following train") }}
</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<fieldset>
<ol>
<li class="form-group form-row">
<label
class="required col-form-label"
for="train_list"
>{{ $__("Select a train") }}:</label
>
</li>
<v-select <v-select
v-model="train_id_selected_for_copy" v-model="train_id_selected_for_copy"
label="name" label="name"
@ -30,21 +50,26 @@
<span class="required">{{ <span class="required">{{
$__("Required") $__("Required")
}}</span> }}</span>
</li> </ol>
</ol> </fieldset>
</fieldset> </div>
<fieldset class="action"> <div class="modal-footer">
<input type="submit" value="Copy" /> <button class="btn btn-default approve" type="submit">
<input <i class="fa fa-check"></i> Save
</button>
<button
class="btn btn-default deny cancel"
type="button" type="button"
@click="show_modal = false" data-bs-dismiss="modal"
:value="$__('Close')" >
/> <i class="fa fa-times"></i> Cancel
</fieldset> </button>
</div> </div>
</form> </form>
</div>
</div> </div>
</transition> </div>
<div v-if="!initialized">{{ $__("Loading") }}</div> <div v-if="!initialized">{{ $__("Loading") }}</div>
<div v-else id="trains_show"> <div v-else id="trains_show">
<Toolbar> <Toolbar>
@ -294,7 +319,6 @@ export default {
description: "", description: "",
}, },
initialized: false, initialized: false,
show_modal: false,
item_table: { item_table: {
display: false, display: false,
data: [], data: [],
@ -498,7 +522,7 @@ export default {
) )
}, },
selectTrainForCopy(train_item_id) { selectTrainForCopy(train_item_id) {
this.show_modal = true $("#copy_item_to_train").show()
this.train_item_id_to_copy = train_item_id this.train_item_id_to_copy = train_item_id
}, },
copyItem(event) { copyItem(event) {
@ -513,7 +537,7 @@ export default {
.then( .then(
success => { success => {
this.setMessage(this.$__("Item copied successfully.")) this.setMessage(this.$__("Item copied successfully."))
this.show_modal = false $("#copy_item_to_train").hide()
}, },
error => { error => {
this.setWarning( this.setWarning(
@ -721,24 +745,6 @@ export default {
.attribute_value { .attribute_value {
display: block; display: block;
} }
.modal {
position: fixed;
z-index: 9998;
overflow-y: inherit !important;
top: 0;
left: 0;
width: 35%;
height: 30%;
background-color: rgba(0, 0, 0, 0.5);
display: table;
transition: opacity 0.3s ease;
margin: auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
}
input[type="checkbox"] { input[type="checkbox"] {
float: left; float: left;
} }

245
koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/WaitingList.vue
View file

@ -1,93 +1,136 @@
<template> <template>
<transition name="modal_add_to_waiting_list"> <div
<div v-if="show_modal_add_to_waiting_list" class="modal"> id="add_to_waiting_list"
<h2>{{ $__("Add items to waiting list") }}</h2> class="modal"
<form @submit="addItemsToWaitingList($event)"> role="dialog"
<div class="page-section"> aria-labelledby="add_to_waiting_list_label"
<fieldset class="rows"> aria-hidden="true"
<ol> >
<li> <div class="modal-dialog modal-lg">
<label class="required" for="barcode_list" <div class="modal-content modal-lg">
>{{ $__("Barcode list") }}:</label <form @submit="addItemsToWaitingList($event)">
> <div class="modal-header">
<textarea <h1 class="modal-title" id="add_to_waiting_list_label">
id="barcode_list" {{ $__("Add items to waiting list") }}
v-model="barcode_list" </h1>
:placeholder="$__('Barcodes')" <button
rows="10"
cols="50"
required
/>
</li>
</ol>
</fieldset>
<fieldset class="action">
<input
type="submit"
class="btn btn-primary"
:value="$__('Submit')"
/>
<input
type="button" type="button"
@click="show_modal_add_to_waiting_list = false" class="btn-close"
:value="$__('Close')" data-bs-dismiss="modal"
/> aria-label="Close"
</fieldset> ></button>
</div> </div>
</form> <div class="modal-body">
</div> <fieldset>
</transition> <ol>
<transition name="modal_add_to_train"> <li class="form-group form-row">
<div v-if="show_modal_add_to_train" class="modal"> <label
<h2>{{ $__("Add items to a train") }}</h2> class="required col-form-label"
<form @submit="addItemsToTrain($event)"> for="barcode_list"
<div class="page-section"> >{{ $__("Barcode list") }}:</label
<fieldset class="rows"> >
<ol> <textarea
<li> id="barcode_list"
<label class="required" for="train_list" v-model="barcode_list"
>{{ $__("Select a train") }}:</label :placeholder="$__('Barcodes')"
> rows="10"
<v-select cols="50"
id="train_id" required
v-model="train_id_selected_for_add" />
label="name" </li>
:options="train_list" </ol>
:reduce="t => t.train_id" </fieldset>
> </div>
<template #search="{ attributes, events }"> <div class="modal-footer">
<input <button class="btn btn-default approve" type="submit">
:required=" <i class="fa fa-check"></i> Save
!train_id_selected_for_add </button>
" <button
class="vs__search" class="btn btn-default deny cancel"
v-bind="attributes"
v-on="events"
/>
</template>
</v-select>
<span class="required">{{
$__("Required")
}}</span>
</li>
</ol>
</fieldset>
<fieldset class="action">
<input
type="submit"
class="btn btn-primary"
:value="$__('Submit')"
/>
<input
type="button" type="button"
@click="show_modal_add_to_train = false" data-bs-dismiss="modal"
:value="$__('Close')" >
/> <i class="fa fa-times"></i> Cancel
</fieldset> </button>
</div> </div>
</form> </form>
</div>
</div> </div>
</transition> </div>
<div
id="add_to_train"
class="modal"
role="dialog"
aria-labelledby="add_to_train_label"
aria-hidden="true"
>
<div class="modal-dialog modal-lg">
<div class="modal-content modal-lg">
<form @submit="addItemsToTrain($event)">
<div class="modal-header">
<h1 class="modal-title" id="add_to_train_label">
{{ $__("Add items to a train") }}
</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<fieldset>
<ol>
<li class="form-group form-row">
<label
class="required col-form-label"
for="train_id"
>{{ $__("Select a train") }}:</label
>
<v-select
id="train_id"
v-model="train_id_selected_for_add"
label="name"
:options="train_list"
:reduce="t => t.train_id"
>
<template
#search="{ attributes, events }"
>
<input
:required="
!train_id_selected_for_add
"
class="vs__search"
v-bind="attributes"
v-on="events"
/>
</template>
</v-select>
<span class="required">{{
$__("Required")
}}</span>
</li>
</ol>
</fieldset>
</div>
<div class="modal-footer">
<button class="btn btn-default approve" type="submit">
<i class="fa fa-check"></i> Save
</button>
<button
class="btn btn-default deny cancel"
type="button"
data-bs-dismiss="modal"
>
<i class="fa fa-times"></i> Cancel
</button>
</div>
</form>
</div>
</div>
</div>
<div v-if="!initialized">{{ $__("Loading") }}</div> <div v-if="!initialized">{{ $__("Loading") }}</div>
<div <div
v-else-if="!config.settings.not_for_loan_waiting_list_in" v-else-if="!config.settings.not_for_loan_waiting_list_in"
@ -98,15 +141,19 @@
<div v-else id="waiting-list"> <div v-else id="waiting-list">
<Toolbar> <Toolbar>
<a <a
href="#add_to_waiting_list"
class="btn btn-default" class="btn btn-default"
@click="show_modal_add_to_waiting_list = true" role="button"
data-bs-toggle="modal"
><font-awesome-icon icon="plus" /> ><font-awesome-icon icon="plus" />
{{ $__("Add to waiting list") }}</a {{ $__("Add to waiting list") }}</a
> >
<a <a
v-if="last_items.length > 0" v-if="last_items.length > 0"
href="#add_to_train"
class="btn btn-default" class="btn btn-default"
@click="show_modal_add_to_train = true" role="button"
data-bs-toggle="modal"
><font-awesome-icon icon="plus" /> ><font-awesome-icon icon="plus" />
{{ {{
$__("Add last %s items to a train").format( $__("Add last %s items to a train").format(
@ -167,8 +214,6 @@ export default {
count_waiting_list_items: 0, count_waiting_list_items: 0,
barcode_list: "", barcode_list: "",
initialized: false, initialized: false,
show_modal_add_to_waiting_list: false,
show_modal_add_to_train: false,
tableOptions: { tableOptions: {
columns: this.getTableColumns(), columns: this.getTableColumns(),
url: "/api/v1/preservation/waiting-list/items", url: "/api/v1/preservation/waiting-list/items",
@ -207,6 +252,7 @@ export default {
}, },
addItemsToTrain: function (e) { addItemsToTrain: function (e) {
e.preventDefault() e.preventDefault()
$("#add_to_train").modal("hide")
let item_ids = this.last_items.map(i => i.item_id) let item_ids = this.last_items.map(i => i.item_id)
this.$router.push({ this.$router.push({
name: "TrainsFormAddItems", name: "TrainsFormAddItems",
@ -218,7 +264,7 @@ export default {
}, },
addItemsToWaitingList: function (e) { addItemsToWaitingList: function (e) {
e.preventDefault() e.preventDefault()
this.show_modal_add_to_waiting_list = false $("#add_to_waiting_list").modal("hide")
let items = [] let items = []
this.barcode_list this.barcode_list
.split("\n") .split("\n")
@ -334,21 +380,4 @@ export default {
#waiting_list { #waiting_list {
display: table; display: table;
} }
.modal {
position: fixed;
z-index: 9990;
top: 0;
left: 0;
width: 35%;
height: 30%;
background-color: rgba(0, 0, 0, 0.5);
display: table;
transition: opacity 0.3s ease;
margin: auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
}
</style> </style>