From 30e393ef6e1bc79c113dc7ce4b1f5abcbe3d697e Mon Sep 17 00:00:00 2001 From: Pedro Amorim <pedro.amorim@ptfs-europe.com> Date: Tue, 31 Dec 2024 15:27:18 +0000 Subject: [PATCH] Bug 35604: (QA follow-up): Cosmetic improvements These are improvements to the confirm auto backend stage screen on the Staff UI. Result of a chat with Tomas about this development. --- .../prog/en/modules/ill/ill-requests.tt | 4 +- .../intranet-tmpl/prog/js/ill-autobackend.js | 61 +++++++++++-------- 2 files changed, 39 insertions(+), 26 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/ill/ill-requests.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/ill/ill-requests.tt index 47728a7c7cd..85cf2aeba6f 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/ill/ill-requests.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/ill/ill-requests.tt @@ -1014,8 +1014,8 @@ <div id="results" class="page-section"> <form method="post" id="confirmautoill-form"> <fieldset class="rows"> - <h3>Confirm backend:</h3> - <p id="autoillbackends"></p> + <ul class="list-group" id="autoillbackends"> + </ul> <p id="autoillbackend-message" class="text-info"></p> </fieldset> <fieldset class="action"> diff --git a/koha-tmpl/intranet-tmpl/prog/js/ill-autobackend.js b/koha-tmpl/intranet-tmpl/prog/js/ill-autobackend.js index b06557b47fc..75ed10221d9 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/ill-autobackend.js +++ b/koha-tmpl/intranet-tmpl/prog/js/ill-autobackend.js @@ -86,45 +86,46 @@ $(document).ready(function () { function _addSuccessMessage(auto_backend_name, data) { _removeVerifyingMessage(auto_backend_name); - $(auto_ill_el + " > #backend-" + auto_backend_name).append( - '<span class="text-success"><i class="fa-solid fa-check"></i> ' + - __("Available.").format(auto_backend_name) + " " + data.success + - "</span>" + $(auto_ill_el + " > #backend-" + auto_backend_name + " #backendcol").append( + '<div class="text-success mb-2"><i class="fa-solid fa-check"></i> ' + + "<strong>" + __("Available.") + "</strong><br>" + data.success + + "</div>" ); } function _addErrorMessage(auto_backend_name, message) { _removeVerifyingMessage(auto_backend_name); - $(auto_ill_el + " > #backend-" + auto_backend_name).append( - '<span class="text-danger"> <i class="fa-solid fa-xmark"></i> ' + - __("Not readily available:").format(auto_backend_name) + - " " + + $(auto_ill_el + " > #backend-" + auto_backend_name + " #backendcol").append( + '<div class="text-danger mb-2"> <i class="fa-solid fa-xmark"></i> ' + + "<strong>" + __("Not readily available:") + "</strong><br>" + message + - "</span>" + "</div>" ); $(auto_ill_el + " > #backend-" + auto_backend_name + " input[type=\"radio\"]").prop("disabled", true); } function _addBackendOption(auto_backend_name) { $(auto_ill_el + " > #backend-" + auto_backend_name).append( - ' <input type="radio" id="' + - auto_backend_name + - '" name="backend" value="' + - auto_backend_name + - '">' + - ' <label for="' + - auto_backend_name + - '" class="radio">' + - auto_backend_name + - "</label> " + `<label style="text-align:left; width:100%;font-weight:normal;" for="${auto_backend_name}"> + <li class="list-group-item"> + <div class="row"> + <div class="col-sm-auto"> + <input id="${auto_backend_name}" type="radio" name="backend" value="${auto_backend_name}" aria-label="${auto_backend_name}"> + </div> + <div id="backendcol" class="col"> + <div class="mb-2 fs-3"><strong>${auto_backend_name}</strong></div> + </div> + </div> + </li> + </label>` ); } function _addVerifyingMessage(auto_backend_name) { - $(auto_ill_el + " > #backend-" + auto_backend_name).append( - '<span id="verifying-availabilty" class="text-info"><i id="issues-table-load-delay-spinner" class="fa fa-spinner fa-pulse fa-fw"></i> ' + - __("Verifying availability...").format(auto_backend_name) + - "</span>" + $(auto_ill_el + " > #backend-" + auto_backend_name + " #backendcol").append( + '<div id="verifying-availabilty" class="text-info mb-2"><i id="issues-table-load-delay-spinner" class="fa fa-spinner fa-pulse fa-fw"></i> ' + + __("Verifying availability...") + + "</div>" ); } function _removeVerifyingMessage(auto_backend_name) { @@ -141,7 +142,7 @@ $(document).ready(function () { '#confirmautoill-form #autoillbackends input[id="' + auto_backend_name + '"]' - ).prop("checked", true); + ).prop("checked", true).trigger('change'); $(auto_ill_message_el).html( __( "The recommended backend for your request is <strong>%s</strong>." @@ -161,4 +162,16 @@ $(document).ready(function () { ); $(auto_ill_message_el).html(__("Fetching backends availability...")); } + + $('#confirmautoill-form').on('change', 'input[name="backend"]', function() { + $('input[name="backend"]').closest('.list-group-item').removeClass('bg-success').css({ + 'background-color': '', + 'border': '' + }); + $(this).closest('.list-group-item').css({ + 'background-color': 'rgba(0, 128, 0, 0.1)', + 'border': '1px solid rgba(0, 128, 0, 0.7)' + }); + }); + }); -- 2.39.5