Part-DB-server/templates/info_providers/bulk_import/step2.html.twig
Sebastian Almberg ce2b7d11a9
Add Quick Apply and batch update to bulk info provider import (#1316)
* Add Quick Apply and Apply All buttons to bulk info provider import

Adds the ability to apply provider search results to parts directly
from the bulk import step 2 page without navigating to individual
part edit forms. Includes per-result Quick Apply buttons and an
Apply All button for batch operations.

* Add navigation buttons and completion banner to bulk import step2

Adds Back to Jobs / Back to Parts buttons at the top of the page
and a success banner when the job is completed, so users aren't
stuck on the page after applying all parts.

* Highlight top search result and remove skip reason prompt

- Highlight the recommended/top priority result row with table-success class
- Add "Top" badge to the recommended Quick Apply button
- Use outline style for non-top Quick Apply buttons to differentiate
- Remove the annoying "reason for skipping" prompt popup

* Fix 500 error when field mapping has null field or no search results

- Skip field mappings with null/empty field values in convertFieldMappingsToDto
- Return empty DTO instead of throwing when no search results found
- Remove unnecessary try/catch workaround in researchPart

* Fix PHPStan error: remove redundant null check on BulkSearchResponseDTO

* Improve bulk import UI: split active/history jobs, fix text visibility, add match highlighting

- Split manage page into Active Jobs and History sections
- Fix source keyword text color (remove text-muted for better visibility)
- Add exact match indicators: green check badge when name or MPN matches
- Add translation keys for new UI elements

* Fix spinning icon, text visibility, auto-priority, and SPN match highlighting

- Replace spinning icon with static icon on Active Jobs header
- Match highlighting now checks source keyword against name, MPN, AND provider ID (SPN)
- Show green "Match" badge in source field column when any field matches 100%
- Auto-increment priority when adding new field mapping rows
- Fix text-muted visibility issues on table-success background

* Fix broken images and improve match highlighting consistency

- Hide broken external provider images with onerror fallback
- Make source keyword text green when any match is detected
- All matched fields (name, MPN, SPN, or any source keyword) show green text

* Fix TypeError in LCSCProvider when keyword is numeric string

PHP auto-casts numeric string array keys to int. When a search keyword
is a pure number (e.g., a part number like "12345"), the foreach loop
passes an int to processSearchResponse() which expects string. Cast
keyword to string explicitly.

* Clean up stale pending jobs and add job ID to display

- Auto-delete pending jobs with 0 results (from failed searches/500 errors)
- Show job ID (#N) in manage page and step2 to distinguish identical jobs
- Move timestamp to subtitle line on manage page for cleaner layout

* Fix tests to match updated bulk search behavior (no more RuntimeException)

The bulk search service now returns empty response DTOs instead of
throwing RuntimeException when no results are found. Updated tests
to use assertFalse(hasAnyResults()) instead of catching exceptions.

* Add comprehensive test coverage for bulk import controller

Covers Quick Apply, Apply All, delete, stop, mark completed/skipped/pending,
manage page active/history split, stale job cleanup, research endpoints,
and various error paths. Increases patch coverage significantly.

* Fix duplicate test method names in bulk import tests

* Fix last duplicate test method name (testQuickApplyWithNoSearchResults)

* Fixed translation key in translation messages

* Moved table rendering logic into macro

* fixed visual glitch with button success outline

* Use native httpfoundation method to convert json to an array

* Show a more user friendly error message, when

* Allow to automatically create new manufacturers within quick apply

---------

Co-authored-by: Jan Böhmer <mail@jan-boehmer.de>
2026-05-04 21:56:18 +02:00

302 lines
20 KiB
Twig

{% extends "main_card.html.twig" %}
{% import "info_providers/providers.macro.html.twig" as providers_macro %}
{% import "helper.twig" as helper %}
{% block title %}
{% trans %}info_providers.bulk_import.step2.title{% endtrans %}
{% endblock %}
{% block card_title %}
<i class="fas fa-search"></i> {% trans %}info_providers.bulk_import.step2.title{% endtrans %}
<span class="badge bg-secondary">#{{ job.id }} - {{ job.displayNameKey|trans(job.displayNameParams) }}</span>
{% endblock %}
{% block card_content %}
<!-- Navigation -->
<div class="d-flex justify-content-between align-items-center mb-3">
<a href="{{ path('bulk_info_provider_manage') }}" class="btn btn-outline-secondary btn-sm">
<i class="fas fa-arrow-left"></i> {% trans %}info_providers.bulk_import.back_to_jobs{% endtrans %}
</a>
<a href="{{ path('parts_show_all') }}" class="btn btn-outline-primary btn-sm">
<i class="fas fa-list"></i> {% trans %}info_providers.bulk_import.back_to_parts{% endtrans %}
</a>
</div>
{% if job.isCompleted %}
<div class="alert alert-success mb-3" role="alert">
<i class="fas fa-check-circle"></i>
<strong>{% trans %}info_providers.bulk_import.job_completed{% endtrans %}</strong>
{% trans %}info_providers.bulk_import.job_completed.description{% endtrans %}
</div>
{% endif %}
<div {{ stimulus_controller('bulk-import', {
'jobId': job.id,
'researchUrl': path('bulk_info_provider_research_part', {'jobId': job.id, 'partId': '__PART_ID__'}),
'researchAllUrl': path('bulk_info_provider_research_all', {'jobId': job.id}),
'markCompletedUrl': path('bulk_info_provider_mark_completed', {'jobId': job.id, 'partId': '__PART_ID__'}),
'markSkippedUrl': path('bulk_info_provider_mark_skipped', {'jobId': job.id, 'partId': '__PART_ID__'}),
'markPendingUrl': path('bulk_info_provider_mark_pending', {'jobId': job.id, 'partId': '__PART_ID__'}),
'quickApplyUrl': path('bulk_info_provider_quick_apply', {'jobId': job.id, 'partId': '__PART_ID__'}),
'quickApplyAllUrl': path('bulk_info_provider_quick_apply_all', {'jobId': job.id})
}) }}>
<div class="d-flex justify-content-between align-items-center mb-3">
<div>
<h5 class="mb-1">#{{ job.id }} - {{ job.displayNameKey|trans(job.displayNameParams) }}</h5>
<small class="text-muted">
{{ job.partCount }} {% trans %}info_providers.bulk_import.parts{% endtrans %}
{{ job.resultCount }} {% trans %}info_providers.bulk_import.results{% endtrans %}
{% trans %}info_providers.bulk_import.created_at{% endtrans %}: {{ job.createdAt|date('Y-m-d H:i') }}
</small>
</div>
<div>
{% if job.isPending %}
<span class="badge bg-warning">{% trans %}info_providers.bulk_import.status.pending{% endtrans %}</span>
{% elseif job.isInProgress %}
<span class="badge bg-info">{% trans %}info_providers.bulk_import.status.in_progress{% endtrans %}</span>
{% elseif job.isCompleted %}
<span class="badge bg-success">{% trans %}info_providers.bulk_import.status.completed{% endtrans %}</span>
{% elseif job.isFailed %}
<span class="badge bg-danger">{% trans %}info_providers.bulk_import.status.failed{% endtrans %}</span>
{% endif %}
</div>
</div>
<!-- Progress Bar -->
<div class="card mb-3">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-2">
<h6 class="mb-0">Progress</h6>
<span data-bulk-import-target="progressText">{{ job.completedPartsCount }} / {{ job.partCount }} completed</span>
</div>
<div class="progress" style="height: 8px;">
<div data-bulk-import-target="progressBar" class="progress-bar" role="progressbar"
style="width: {{ job.progressPercentage }}%"
aria-valuenow="{{ job.progressPercentage }}" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<div class="d-flex justify-content-between mt-2">
<small class="text-muted">
<span id="completed-count">{{ job.completedPartsCount }}</span> {% trans %}info_providers.bulk_import.completed{% endtrans %}
<span id="skipped-count">{{ job.skippedPartsCount }}</span> {% trans %}info_providers.bulk_import.skipped{% endtrans %}
</small>
<small class="text-muted"><span id="progress-percentage">{{ job.progressPercentage }}%</span></small>
</div>
</div>
</div>
<!-- Tutorial/Instructions -->
<div class="alert alert-info mb-4" role="alert">
<h6 class="alert-heading">
<i class="fas fa-info-circle"></i> {% trans %}info_providers.bulk_import.step2.instructions.title{% endtrans %}
</h6>
<p class="mb-2">{% trans %}info_providers.bulk_import.step2.instructions.description{% endtrans %}</p>
<ul class="mb-0 ps-3">
<li>{% trans %}info_providers.bulk_import.step2.instructions.step1{% endtrans %}</li>
<li>{% trans %}info_providers.bulk_import.step2.instructions.step2{% endtrans %}</li>
<li>{% trans %}info_providers.bulk_import.step2.instructions.step3{% endtrans %}</li>
</ul>
</div>
<!-- Research Controls -->
<div class="card mb-3">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="mb-1">{% trans %}info_providers.bulk_import.research.title{% endtrans %}</h6>
<small class="text-muted">{% trans %}info_providers.bulk_import.research.description{% endtrans %}</small>
</div>
<div>
<button type="button" class="btn btn-outline-primary btn-sm me-2"
data-action="click->bulk-import#researchAllParts"
id="research-all-btn">
<span class="spinner-border spinner-border-sm me-1" style="display: none;" id="research-all-spinner"></span>
<i class="fas fa-search"></i> {% trans %}info_providers.bulk_import.research.all_pending{% endtrans %}
</button>
<button type="button" class="btn btn-success btn-sm"
data-action="click->bulk-import#quickApplyAll"
id="quick-apply-all-btn"
title="{% trans %}info_providers.bulk_import.quick_apply_all.tooltip{% endtrans %}">
<span class="spinner-border spinner-border-sm me-1" style="display: none;" id="quick-apply-all-spinner"></span>
<i class="fas fa-bolt"></i> {% trans %}info_providers.bulk_import.quick_apply_all{% endtrans %}
</button>
</div>
</div>
</div>
</div>
{% for part_result in search_results %}
{# @var part_result \App\Services\InfoProviderSystem\DTOs\BulkSearchPartResultsDTO #}
{% set part = part_result.part %}
{% set isCompleted = job.isPartCompleted(part.id) %}
{% set isSkipped = job.isPartSkipped(part.id) %}
<div class="card mb-3 {% if isCompleted %}border-success{% elseif isSkipped %}border-warning{% endif %}"
data-part-id="{{ part.id }}"
{% if isCompleted %}style="background-color: rgba(25, 135, 84, 0.1);"{% endif %}>
<div class="card-header d-flex justify-content-between align-items-center">
<div>
<h5 class="card-title mb-0">
<a href="{{ path('app_part_show', {'id': part.id}) }}" class="text-decoration-none">
{{ part.name }}
</a>
{% if isCompleted %}
<span class="badge bg-success">
<i class="fas fa-check"></i> {% trans %}info_providers.bulk_import.completed{% endtrans %}
</span>
{% elseif isSkipped %}
<span class="badge bg-warning">
<i class="fas fa-forward"></i> {% trans %}info_providers.bulk_import.skipped{% endtrans %}
</span>
{% endif %}
{% if part_result.errors is not empty %}
<span class="badge bg-danger">{% trans with {'%count%': part_result.errors|length} %}info_providers.bulk_import.errors{% endtrans %}</span>
{% endif %}
<span class="badge bg-info">{% trans with {'%count%': part_result.searchResults|length} %}info_providers.bulk_import.results_found{% endtrans %}</span>
</h5>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-outline-info btn-sm"
data-action="click->bulk-import#researchPart"
data-part-id="{{ part.id }}"
title="{% trans %}info_providers.bulk_import.research.part_tooltip{% endtrans %}">
<span class="spinner-border spinner-border-sm me-1" style="display: none;" data-research-spinner="{{ part.id }}"></span>
<i class="fas fa-search"></i> {% trans %}info_providers.bulk_import.research.part{% endtrans %}
</button>
{% if not isCompleted and not isSkipped %}
<button type="button" class="btn btn-success btn-sm" data-action="click->bulk-import#markCompleted" data-part-id="{{ part.id }}">
<i class="fas fa-check"></i> {% trans %}info_providers.bulk_import.mark_completed{% endtrans %}
</button>
<button type="button" class="btn btn-warning btn-sm" data-action="click->bulk-import#markSkipped" data-part-id="{{ part.id }}">
<i class="fas fa-forward"></i> {% trans %}info_providers.bulk_import.mark_skipped{% endtrans %}
</button>
{% elseif isCompleted %}
<button type="button" class="btn btn-outline-secondary btn-sm" data-action="click->bulk-import#markPending" data-part-id="{{ part.id }}">
<i class="fas fa-undo"></i> {% trans %}info_providers.bulk_import.mark_pending{% endtrans %}
</button>
{% elseif isSkipped %}
<button type="button" class="btn btn-outline-secondary btn-sm" data-action="click->bulk-import#markPending" data-part-id="{{ part.id }}">
<i class="fas fa-undo"></i> {% trans %}info_providers.bulk_import.mark_pending{% endtrans %}
</button>
{% endif %}
</div>
</div>
<div class="card-body">
{% if part_result.errors is not empty %}
{% for error in part_result.errors %}
<div class="alert alert-warning" role="alert">
<i class="fas fa-exclamation-triangle"></i>
{{ error }}
</div>
{% endfor %}
{% endif %}
{% if part_result.searchResults|length > 0 %}
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th></th>
<th>{% trans %}name.label{% endtrans %}</th>
<th>{% trans %}description.label{% endtrans %}</th>
<th>{% trans %}manufacturer.label{% endtrans %}</th>
<th>{% trans %}info_providers.table.provider.label{% endtrans %}</th>
<th>{% trans %}info_providers.bulk_import.source_field{% endtrans %}</th>
<th>{% trans %}info_providers.bulk_import.action.label{% endtrans %}</th>
</tr>
</thead>
<tbody>
{% set sortedResults = part_result.resultsSortedByPriority %}
{% for result in sortedResults %}
{# @var result \App\Services\InfoProviderSystem\DTOs\BulkSearchPartResultDTO #}
{% set dto = result.searchResult %}
{% set localPart = result.localPart %}
{% set isTopResult = loop.first %}
<tr{% if isTopResult and not isCompleted %} class="table-success"{% endif %}>
<td>
{% if dto.preview_image_url %}
<img src="{{ dto.preview_image_url }}" data-thumbnail="{{ dto.preview_image_url }}"
class="hoverpic" style="max-width: 35px;" {{ stimulus_controller('elements/hoverpic') }}
onerror="this.style.display='none'">
{% endif %}
</td>
<td>
{# Check for matches against source keyword (what was searched) #}
{% set sourceKw = result.sourceKeyword|default('')|lower %}
{% set nameMatch = sourceKw is not empty and dto.name is not null and dto.name|lower == sourceKw %}
{% set mpnMatch = sourceKw is not empty and dto.mpn is not null and dto.mpn|lower == sourceKw %}
{% set spnMatch = sourceKw is not empty and dto.provider_id is not null and dto.provider_id|lower == sourceKw %}
{% set anyMatch = nameMatch or mpnMatch or spnMatch %}
{% if dto.provider_url is not null %}
<a href="{{ dto.provider_url }}" target="_blank" rel="noopener"{% if nameMatch %} class="fw-bold"{% endif %}>{{ dto.name }}</a>
{% else %}
<span{% if nameMatch %} class="fw-bold"{% endif %}>{{ dto.name }}</span>
{% endif %}
{% if nameMatch %}
<span class="badge bg-success ms-1" title="{% trans %}info_providers.bulk_import.exact_match{% endtrans %}"><i class="fas fa-check-circle"></i></span>
{% endif %}
{% if dto.mpn is not null %}
<br><small{% if mpnMatch %} class="fw-bold text-success"{% endif %}>{{ dto.mpn }}</small>
{% if mpnMatch %}
<span class="badge bg-success ms-1" style="font-size: 0.65em;" title="{% trans %}info_providers.bulk_import.mpn_match{% endtrans %}">MPN <i class="fas fa-check-circle"></i></span>
{% endif %}
{% endif %}
</td>
<td>{{ dto.description }}</td>
<td>{{ dto.manufacturer ?? '' }}</td>
<td>
{{ info_provider_label(dto.provider_key)|default(dto.provider_key) }}
<br><small{% if spnMatch %} class="fw-bold text-success"{% endif %}>{{ dto.provider_id }}</small>
{% if spnMatch %}
<span class="badge bg-success ms-1" style="font-size: 0.65em;" title="{% trans %}info_providers.bulk_import.spn_match{% endtrans %}">SPN <i class="fas fa-check-circle"></i></span>
{% endif %}
</td>
<td>
{% if anyMatch %}
<span class="badge bg-success">{% trans %}info_providers.bulk_import.match{% endtrans %}</span>
{% else %}
<span class="badge bg-info">{{ result.sourceField ?? 'unknown' }}</span>
{% endif %}
{% if result.sourceKeyword %}
<br><small{% if anyMatch %} class="fw-bold text-success"{% endif %}>{{ result.sourceKeyword }}</small>
{% endif %}
</td>
<td>
<div class="btn-group-vertical btn-group-sm" role="group">
{% if not isCompleted %}
<button type="button" class="btn {% if not isTopResult %} btn-outline-success{% else %}btn-success{% endif %}"
data-action="click->bulk-import#quickApply"
data-part-id="{{ part.id }}"
data-provider-key="{{ dto.provider_key }}"
data-provider-id="{{ dto.provider_id }}"
title="{% trans %}info_providers.bulk_import.quick_apply.tooltip{% endtrans %}">
<i class="fas fa-bolt"></i> {% trans %}info_providers.bulk_import.quick_apply{% endtrans %}
{% if isTopResult %}<span class="badge bg-light text-success ms-1">{% trans %}info_providers.bulk_import.recommended{% endtrans %}</span>{% endif %}
</button>
{% endif %}
{% set updateHref = path('info_providers_update_part',
{'id': part.id, 'providerKey': dto.provider_key, 'providerId': dto.provider_id}) ~ '?jobId=' ~ job.id %}
<a class="btn btn-primary{% if isCompleted %} disabled{% endif %}" href="{% if not isCompleted %}{{ updateHref }}{% else %}#{% endif %}"{% if isCompleted %} aria-disabled="true"{% endif %}>
<i class="fas fa-edit"></i> {% trans %}info_providers.bulk_import.update_part{% endtrans %}
</a>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="alert alert-info" role="alert">
{% trans %}info_providers.search.no_results{% endtrans %}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% endblock %}