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

Bug 37795: Adjust job-progress.inc for Bootstrap 5 changes 

Four main changes:

The color classes progress-bar-success and progress-bar-danger are now named
bg-success and bg-danger.

The aria attributes have moved from the progress-bar to the progress wrapper.
Having them on the progress-bar is still supported for BS5, but won't be in
BS6, so we might as well move them now rather than forgetting to move them
later.

Having the percentage number in a span, the % symbol in text, and the label
for "Not started" "Started" "Finished" "Failed" in another span no longer
works because the progress-bar content is in a column flexbox. Just setting
all of it at once in the content of the progress-bar works fine.

Before, overflow from the label being longer than the progress-bar happened
by wrapping the "%" and "Started" invisibly down below the progress-bar.
Now it is cropped off by overflow: hidden, so we have to deal with showing
"2% Star" rather than showing "2%" and dropping the whole "Started" like
we did before. The best solution seems to be making the background of the
progress div, which is what shows to the right of the filled part of the
progress-bar, a little darker grey so white text is readable if you squint.

Test plan:
 1. You need enough records to import so that you can at least see a bit of
    progress before it finishes. Ideally, you would have a file of 10K or
    so bibs, but with ktd, you can have 400-odd: Cataloging - Export catalog
    data, change the Output format to XML and the filename to koha.marcxml
    and export.
 2. Cataloging - Stage records for import, Browse to your file, Upload file.
    Since you named it koha.marcxml, it's recognized as MARCXML and you can
    just click Stage for import
 3. Without the patch, at this point you get an orange full-width bar, with
    a white "%" in the middle, which doesn't change even after the "View
    batch" link appears signalling it's done. With the patch, you start with
    an orange bar labelled "0% Not started" which changes to a green "0.00%
    Started" that animates too quickly to read to "100% Finished". Right
    click the bar, Inspect, double-click the "width: 100%" to edit it, click
    past the 100 and delete the 00 and press Enter to see a static 1%. You
    should be able to read the "100% Finished" even spread across the green
    and dark gray, at least by selecting the text if no other way.

Sponsored-by: Chetco Community Public Library
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
This commit is contained in:
Phil Ringnalda 2024-10-11 15:54:50 -07:00 committed by Katrin Fischer
parent f82d8dae0f
commit b0031977e1
No known key found for this signature in database
GPG Key ID: 0EF6E2C03357A834
3 changed files with 16 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
koha-tmpl/intranet-tmpl/prog/en/includes/job_progress.inc
View File

@ -1,5 +1,4 @@
<div class="progress">
<div id="progress-bar-[% job_id | html %]" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<span id="job-percent-[% job_id | html %]">0</span>% <span id="job-status-[% job_id | html %]"></span>
<div class="progress bg-dark-subtle" id="progress-[% job_id | html %]" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar overflow-visible" id="progress-bar-[% job_id | html %]">
</div>
</div>

1
koha-tmpl/intranet-tmpl/prog/en/includes/str/job_progress.inc
View File

@ -4,4 +4,5 @@
var JOB_PROGRESS_STARTED = _("Started");
var JOB_PROGRESS_FINISHED = _("Finished");
var JOB_PROGRESS_FAILED = _("Failed");
var JOB_PROGRESS_PERCENT = _("%");
</script>

27
koha-tmpl/intranet-tmpl/prog/js/job_progress.js
View File

@ -3,30 +3,29 @@ function updateProgress(job_id, callbacks) {
let recheck = true;
if ( job.status == "new" ) {
$('#job-percent-' + job_id).text(0);
$('#job-status-' + job_id).text(JOB_PROGRESS_NOT_STARTED);
$('#progress-bar-' + job_id).attr('aria-valuenow', 0).css("width", "100%");
$('#progress-' + job_id).attr('aria-valuenow', 0);
$('#progress-bar-' + job_id).width("100%");
$('#progress-bar-' + job_id).text("0" + JOB_PROGRESS_PERCENT + " " + JOB_PROGRESS_NOT_STARTED);
} else if ( job.status == "started" ) {
const progress = job["progress"];
const size = job["size"];
const percent = progress > 0 ? ( progress / size ) * 100 : 0;
$('#job-percent-' + job_id).text(percent.toFixed(2));
$('#job-status-' + job_id).text(JOB_PROGRESS_STARTED);
$('#progress-bar-' + job_id).attr('aria-valuenow', percent);
$('#progress-' + job_id).attr('aria-valuenow', percent);
$('#progress-bar-' + job_id).width(Math.floor(percent) +"%");
$('#progress-bar-' + job_id).text(percent.toFixed(2) + JOB_PROGRESS_PERCENT + " " + JOB_PROGRESS_STARTED);
typeof callbacks.progress_callback === 'function' && callbacks.progress_callback();
} else if ( job.status == "finished" ) {
$('#job-percent-' + job_id).text(100);
$('#job-status-' + job_id).text(JOB_PROGRESS_FINISHED);
$('#progress-bar-' + job_id).addClass("progress-bar-success");
$('#progress-bar-' + job_id).attr('aria-valuenow', 100).css("width", "100%");
$('#progress-bar-' + job_id).addClass("bg-success");
$('#progress-' + job_id).attr('aria-valuenow', 100);
$('#progress-bar-' + job_id).css("width", "100%");
$('#progress-bar-' + job_id).text("100" + JOB_PROGRESS_PERCENT + " " + JOB_PROGRESS_FINISHED);
recheck = false;
typeof callbacks.finish_callback === 'function' && callbacks.finish_callback();
} else if ( job.status == "failed" ) {
$('#job-percent-' + job_id).text(0);
$('#job-status-' + job_id).text(JOB_PROGRESS_FAILED);
$('#progress-bar-' + job_id).addClass("progress-bar-danger");
$('#progress-bar-' + job_id).attr('aria-valuenow', 0).css("width", "100%");
$('#progress-bar-' + job_id).addClass("bg-danger");
$('#progress' + job_id).attr('aria-valuenow', 0);
$('#progress-bar-' + job_id).css("width", "100%");
$('#progress-bar-' + job_id).text("0" + JOB_PROGRESS_PERCENT + " " + JOB_PROGRESS_FAILED);
recheck = false;
}