Bugzilla – Attachment 171702 Details for
Bug 37812
Adjust Vue modals for Bootstrap 5
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 37812: Adjust modals from the Preservation module - bootstrap5
Bug-37812-Adjust-modals-from-the-Preservation-modu.patch (text/plain), 18.35 KB, created by
Martin Renvoize (ashimema)
on 2024-09-19 06:40:27 UTC
(
hide
)
Description:
Bug 37812: Adjust modals from the Preservation module - bootstrap5
Filename:
MIME Type:
Creator:
Martin Renvoize (ashimema)
Created:
2024-09-19 06:40:27 UTC
Size:
18.35 KB
patch
obsolete
>From 518577c503cafac173f234641033f58a7f3fe3b8 Mon Sep 17 00:00:00 2001 >From: Jonathan Druart <jonathan.druart@bugs.koha-community.org> >Date: Tue, 10 Sep 2024 16:06:35 +0200 >Subject: [PATCH] Bug 37812: Adjust modals from the Preservation module - > bootstrap5 > >Signed-off-by: David Nind <david@davidnind.com> >Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com> >--- > .../components/Preservation/TrainsShow.vue | 96 +++---- > .../components/Preservation/WaitingList.vue | 243 ++++++++++-------- > 2 files changed, 187 insertions(+), 152 deletions(-) > >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/TrainsShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/TrainsShow.vue >index 5c7bc5c9dd5..8f73b54c162 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/TrainsShow.vue >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/TrainsShow.vue >@@ -1,15 +1,35 @@ > <template> >- <transition name="modal"> >- <div v-if="show_modal" class="modal"> >- <h2>{{ $__("Copy item to the following train") }}</h2> >- <form @submit="copyItem($event)"> >- <div class="page-section"> >- <fieldset class="rows"> >- <ol> >- <li> >- <label class="required" for="train_list" >- >{{ $__("Select a train") }}:</label >- > >+ <div >+ id="copy_item_to_train" >+ class="modal" >+ role="dialog" >+ aria-labelledby="copy_item_to_train_label" >+ aria-hidden="true" >+ > >+ <div class="modal-dialog modal-lg"> >+ <div class="modal-content modal-lg"> >+ <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-model="train_id_selected_for_copy" > label="name" >@@ -30,21 +50,26 @@ > <span class="required">{{ > $__("Required") > }}</span> >- </li> >- </ol> >- </fieldset> >- <fieldset class="action"> >- <input type="submit" value="Copy" /> >- <input >+ </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" >- @click="show_modal = false" >- :value="$__('Close')" >- /> >- </fieldset> >- </div> >- </form> >+ data-bs-dismiss="modal" >+ > >+ <i class="fa fa-times"></i> Cancel >+ </button> >+ </div> >+ </form> >+ </div> > </div> >- </transition> >+ </div> >+ > <div v-if="!initialized">{{ $__("Loading") }}</div> > <div v-else id="trains_show"> > <Toolbar> >@@ -294,7 +319,6 @@ export default { > description: "", > }, > initialized: false, >- show_modal: false, > item_table: { > display: false, > data: [], >@@ -498,7 +522,7 @@ export default { > ) > }, > selectTrainForCopy(train_item_id) { >- this.show_modal = true >+ $("#copy_item_to_train").show() > this.train_item_id_to_copy = train_item_id > }, > copyItem(event) { >@@ -513,7 +537,7 @@ export default { > .then( > success => { > this.setMessage(this.$__("Item copied successfully.")) >- this.show_modal = false >+ $("#copy_item_to_train").hide() > }, > error => { > this.setWarning( >@@ -721,24 +745,6 @@ export default { > .attribute_value { > 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"] { > float: left; > } >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/WaitingList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/WaitingList.vue >index 2798bbc3862..94563a7b62c 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/WaitingList.vue >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/WaitingList.vue >@@ -1,93 +1,136 @@ > <template> >- <transition name="modal_add_to_waiting_list"> >- <div v-if="show_modal_add_to_waiting_list" class="modal"> >- <h2>{{ $__("Add items to waiting list") }}</h2> >- <form @submit="addItemsToWaitingList($event)"> >- <div class="page-section"> >- <fieldset class="rows"> >- <ol> >- <li> >- <label class="required" for="barcode_list" >- >{{ $__("Barcode list") }}:</label >- > >- <textarea >- id="barcode_list" >- v-model="barcode_list" >- :placeholder="$__('Barcodes')" >- rows="10" >- cols="50" >- required >- /> >- </li> >- </ol> >- </fieldset> >- <fieldset class="action"> >- <input >- type="submit" >- class="btn btn-primary" >- :value="$__('Submit')" >- /> >- <input >+ <div >+ id="add_to_waiting_list" >+ class="modal" >+ role="dialog" >+ aria-labelledby="add_to_waiting_list_label" >+ aria-hidden="true" >+ > >+ <div class="modal-dialog modal-lg"> >+ <div class="modal-content modal-lg"> >+ <form @submit="addItemsToWaitingList($event)"> >+ <div class="modal-header"> >+ <h1 class="modal-title" id="add_to_waiting_list_label"> >+ {{ $__("Add items to waiting list") }} >+ </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="barcode_list" >+ >{{ $__("Barcode list") }}:</label >+ > >+ <textarea >+ id="barcode_list" >+ v-model="barcode_list" >+ :placeholder="$__('Barcodes')" >+ rows="10" >+ cols="50" >+ required >+ /> >+ </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" >- @click="show_modal_add_to_waiting_list = false" >- :value="$__('Close')" >- /> >- </fieldset> >- </div> >- </form> >+ data-bs-dismiss="modal" >+ > >+ <i class="fa fa-times"></i> Cancel >+ </button> >+ </div> >+ </form> >+ </div> > </div> >- </transition> >- <transition name="modal_add_to_train"> >- <div v-if="show_modal_add_to_train" class="modal"> >- <h2>{{ $__("Add items to a train") }}</h2> >- <form @submit="addItemsToTrain($event)"> >- <div class="page-section"> >- <fieldset class="rows"> >- <ol> >- <li> >- <label class="required" for="train_list" >- >{{ $__("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> >- <fieldset class="action"> >- <input >- type="submit" >- class="btn btn-primary" >- :value="$__('Submit')" >- /> >- <input >+ </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" >- @click="show_modal_add_to_train = false" >- :value="$__('Close')" >- /> >- </fieldset> >- </div> >- </form> >+ 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> >- </transition> >+ </div> >+ > <div v-if="!initialized">{{ $__("Loading") }}</div> > <div > v-else-if="!config.settings.not_for_loan_waiting_list_in" >@@ -98,15 +141,19 @@ > <div v-else id="waiting-list"> > <Toolbar> > <a >+ href="#add_to_waiting_list" > class="btn btn-default" >- @click="show_modal_add_to_waiting_list = true" >+ role="button" >+ data-bs-toggle="modal" > ><font-awesome-icon icon="plus" /> > {{ $__("Add to waiting list") }}</a > > > <a > v-if="last_items.length > 0" >+ href="#add_to_train" > class="btn btn-default" >- @click="show_modal_add_to_train = true" >+ role="button" >+ data-bs-toggle="modal" > ><font-awesome-icon icon="plus" /> > {{ > $__("Add last %s items to a train").format( >@@ -167,8 +214,6 @@ export default { > count_waiting_list_items: 0, > barcode_list: "", > initialized: false, >- show_modal_add_to_waiting_list: false, >- show_modal_add_to_train: false, > tableOptions: { > columns: this.getTableColumns(), > url: "/api/v1/preservation/waiting-list/items", >@@ -207,6 +252,7 @@ export default { > }, > addItemsToTrain: function (e) { > e.preventDefault() >+ $("#add_to_train").modal("hide") > let item_ids = this.last_items.map(i => i.item_id) > this.$router.push({ > name: "TrainsFormAddItems", >@@ -218,7 +264,7 @@ export default { > }, > addItemsToWaitingList: function (e) { > e.preventDefault() >- this.show_modal_add_to_waiting_list = false >+ $("#add_to_waiting_list").modal("hide") > let items = [] > this.barcode_list > .split("\n") >@@ -334,21 +380,4 @@ export default { > #waiting_list { > 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> >-- >2.46.0
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 37812
:
170956
|
171252
|
171253
|
171604
|
171605
|
171625
|
171641
|
171651
|
171690
|
171691
|
171692
|
171693
|
171694
|
171695
|
171696
|
171697
| 171702 |
171703
|
171704
|
171705
|
171706
|
171707
|
171708
|
171758
|
171780
|
171781
|
171786