Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve html templates for admin pages #71

Merged
merged 5 commits into from
Nov 29, 2024
Merged

Improve html templates for admin pages #71

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
40bdca0
Improve progress bar on admin page
Eg0ra Nov 22, 2024
d934618
Improve admin html templates
Eg0ra Nov 25, 2024
4126e2e
Improve progress bar style
Eg0ra Nov 26, 2024
b20bfab
Update HISTORY links
Eg0ra Nov 26, 2024
596658b
Remove extra loop in result page if errors
Eg0ra Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions HISTORY.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
=======
History
=======
UNRELEASED
------------------
* Fix progress bar on changeview for ImportJob and ExportJob
* Improve celery-import-result page
* Add displaying resources for import form
* Fix autofill `Format` by file extension
* Add `Totals` section
* Fixed display of progress bar when task is waiting to run (#68)
* Improve progress bar style (#72)

1.0.1 (2024-11-08)
------------------
Expand Down
47 changes: 34 additions & 13 deletions import_export_extensions/admin/mixins/import_mixin.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@

from import_export import admin as import_export_admin
from import_export import mixins as import_export_mixins
from import_export import resources as import_export_resources

from ... import models
from ..forms import ForceImportForm
Expand Down Expand Up @@ -170,24 +171,16 @@ def celery_import_action(
)

# GET: display Import Form
resources = [
resource_class(**resource_kwargs)
for resource_class in resource_classes
]

context.update(self.admin_site.each_context(request))

context["title"] = _("Import")
context["form"] = form
context["opts"] = self.model_info.meta
context["media"] = self.media + form.media
context["fields_list"] = [
(
resource.get_display_name(),
[f.column_name for f in resource.get_user_visible_fields()],
)
for resource in resources
]
context["fields_list"] = self._get_fields_list_for_resources(
resource_classes=resource_classes,
resource_kwargs=resource_kwargs,
)

request.current_app = self.admin_site.name
return TemplateResponse(
Expand Down Expand Up @@ -282,9 +275,16 @@ def celery_import_job_results_view(
context["confirm_form"] = Form()
else:
# display import form
resource_classes = self.get_import_resource_classes(request)
resource_kwargs = self.get_import_resource_kwargs(request)

context["import_form"] = ForceImportForm(
formats=self.get_import_formats(),
resources=self.get_import_resource_classes(request),
resources=resource_classes,
)
context["fields_list"] = self._get_fields_list_for_resources(
resource_classes=resource_classes,
resource_kwargs=resource_kwargs,
)

context.update(self.admin_site.each_context(request))
Expand Down Expand Up @@ -376,6 +376,27 @@ def _redirect_to_results_page(

return HttpResponseRedirect(redirect_to=url)

def _get_fields_list_for_resources(
self,
resource_classes: list[type[import_export_resources.ModelResource]],
resource_kwargs,
) -> list[tuple[str, list[str]]]:
"""Get fields list for resource classes."""
resources = [
resource_class(**resource_kwargs)
for resource_class in resource_classes
]
return [
(
resource.get_display_name(),
[
field.column_name
for field in resource.get_user_visible_fields()
],
)
for resource in resources
]

def changelist_view(
self,
request: WSGIRequest,
Expand Down
14 changes: 4 additions & 10 deletions import_export_extensions/admin/widgets.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@

from django import forms
from django.template.loader import render_to_string


class ProgressBarWidget(forms.Widget):
Expand All @@ -9,6 +10,8 @@ class ProgressBarWidget(forms.Widget):

"""

template_name = "admin/import_export_extensions/progress_bar.html"

def __init__(self, *args, **kwargs):
"""Get ``ImportJob`` or ``ExportJob`` instance from kwargs.

Expand All @@ -28,16 +31,7 @@ def render(self, *args, **kwargs) -> str:
to send GET requests.

"""
progress_bar = f"""
<progress
value="0"
max="100"
id="progress-bar"
data-url="{self.url}">
</progress>
"""

return progress_bar
return render_to_string(self.template_name, {"job_url": self.url})

class Media:
"""Class with custom assets for widget."""
Expand Down
9 changes: 7 additions & 2 deletions import_export_extensions/static/import_export_extensions/css/widgets/progress_bar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ progress {
width: 100%;
-webkit-appearance: none;
border: none;
position:relative;
position: relative;
}
progress:before {
content: attr(data-label);
Expand All @@ -24,8 +24,13 @@ progress::-webkit-progress-bar {
background-color: var(--breadcrumbs-fg);
}
progress::-webkit-progress-value {
background-color: var(--breadcrumbs-bg);
background-color: var(--primary);
}
progress::-moz-progress-bar {
background-color: var(--breadcrumbs-bg);
}

html[data-theme="dark"]
progress::-webkit-progress-bar {
background-color: var(--darkened-bg);
}
4 changes: 2 additions & 2 deletions import_export_extensions/templates/admin/import_export_extensions/celery_export_results.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
{% endblock %}

{% block breadcrumbs_last %}
<a href="{% url opts|admin_urlname:'export' %}?{{request.GET.urlencode}}">
<a href="{% url opts|admin_urlname:'export' %}?{{ request.GET.urlencode }}">
{% trans "Export" %}
</a>
&rsaquo; {% trans "Export results" %}
Expand All @@ -40,7 +40,7 @@ <h2>
<h2>
{% trans "You can download exported data with following link" %}
</h2>
<a href="{{ export_job.data_file.url }}" id="data_file">Download export data</a>
<a href="{{ export_job.data_file.url }}" id="data_file">{% trans "Download export data" %}</a>
{% endif %}
{% endblock %}
{% endblock %}
35 changes: 5 additions & 30 deletions import_export_extensions/templates/admin/import_export_extensions/celery_export_status.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@

{% comment %}
Template to show status of export job.
Similar to job's admin page.

{% endcomment %}

{% block extrastyle %}
Expand All @@ -24,7 +22,7 @@


{% block breadcrumbs_last %}
<a href="{% url opts|admin_urlname:'export' %}?{{request.GET.urlencode}}">
<a href="{% url opts|admin_urlname:'export' %}?{{ request.GET.urlencode }}">
{% trans "Export" %}
</a>
&rsaquo;
Expand All @@ -35,37 +33,14 @@
<div>
<fieldset class="module aligned collapse">
<div class="form-row">
<label>Status</label><p id="current-job-status">{{ export_job.export_status|title }}</p>
<label>{% trans "Status" %}</label>
<p id="current-job-status">{{ export_job.export_status|title }}</p>
</div>

{% if export_job.export_status not in export_job.export_finished_statuses %}
<div class="form-row">
<label>Progress</label>
<p id="progress_bar_html">
<progress max="100" id="progress-bar" data-url="{{ export_job_url }}"></progress>
</p>
</div>
{% endif %}

{% if export_job.export_status == export_job.ExportStatus.EXPORTED %}
<div class="form-row">
<label>Totals</label>
<p>
{% for total, stat in export_job.result.totals.items %}
{{ total.title }}:&nbsp; <b>{{ stat }}</b><br>
{% endfor %}
</p>
</div>
{% endif %}

{% if export_job.export_status == export_job.ExportStatus.EXPORT_ERROR %}
<div class="form-row">
<label>Error</label>
<p><b>{{ export_job.error_message }}</b></p>
</div>
<div class="form-row">
<label>Traceback</label>
{{ export_job.traceback | linebreaks }}
<label>{% trans "Progress" %}</label>
{% include "admin/import_export_extensions/progress_bar.html" with job_url=export_job_url %}
</div>
{% endif %}
</fieldset>
Expand Down
18 changes: 16 additions & 2 deletions import_export_extensions/templates/admin/import_export_extensions/celery_import_results.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,18 @@
<script type="text/javascript" src="{% static 'admin/js/jquery.init.js' %}"></script>
<script type="text/javascript" src="{% static 'import_export_extensions/js/admin/admin.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static "import_export_extensions/css/admin/import_result_diff.css" %}"/>
<link rel="stylesheet" type="text/css" href="{% static "import_export/import.css"" %}"/>
<link rel="stylesheet" type="text/css" href="{% static "import_export/import.css" %}"/>
<script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
{% if confirm_form %}
{{ confirm_form.media }}
{% else %}
{{ import_form.media }}
{% endif %}
{% endblock %}


{% block breadcrumbs_last %}
<a href="{% url opts|admin_urlname:'import' %}?{{request.GET.urlencode}}">
<a href="{% url opts|admin_urlname:'import' %}?{{ request.GET.urlencode }}">
{% trans "Import" %}
</a>
&rsaquo; {% trans "Import results" %}
Expand Down Expand Up @@ -50,6 +56,8 @@
<form action="{% url opts|admin_urlname:"import" %}?{{ request.GET.urlencode }}" method="post" enctype="multipart/form-data">
{% csrf_token %}

{% include "admin/import_export/resource_fields_list.html" with import_or_export="import" %}

<fieldset class="module aligned">
{% for field in import_form %}
<div class="form-row">
Expand Down Expand Up @@ -155,6 +163,12 @@ <h2>{% trans "Some rows failed to validate" %}</h2>
</ul>
{% endif %}
{% if import_job.import_status in import_job.success_statuses %}
<h2>{% trans "Totals" %}</h2>
<div>
{% for total, stat in import_job.result.totals.items %}
{{ total.title }}: <b>{{ stat }}</b><br>
{% endfor %}
</div>
<h2>
{% if import_job.import_status == "PARSED" %}
{% trans "These elements will be imported successfully" %}
Expand Down
36 changes: 5 additions & 31 deletions import_export_extensions/templates/admin/import_export_extensions/celery_import_status.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@

{% comment %}
Template to show status of import job.
Similar to job's admin page.

{% endcomment %}

{% block extrastyle %}
Expand All @@ -24,7 +22,7 @@


{% block breadcrumbs_last %}
<a href="{% url opts|admin_urlname:'import' %}?{{request.GET.urlencode}}">
<a href="{% url opts|admin_urlname:'import' %}?{{ request.GET.urlencode }}">
{% trans "Import" %}
</a>
&rsaquo; {% trans "Importing..." %}
Expand All @@ -35,37 +33,13 @@

<fieldset class="module aligned collapse">
<div class="form-row">
<label>Status</label><p id="current-job-status">{{ import_job.import_status|title }}</p>
<label>{% trans "Status" %}</label><p id="current-job-status">{{ import_job.import_status|title }}</p>
</div>

{% if import_job.import_status in import_job.progress_statuses %}
<div class="form-row">
<label>Progress</label>
<p id="progress_bar_html">
<progress max="100" id="progress-bar" data-url="{{ import_job_url }}"></progress>
</p>
</div>
{% endif %}

{% if import_job.import_status in import_job.success_statuses %}
<div class="form-row">
<label>Totals</label>
<p>
{% for total, stat in import_job.result.totals.items %}
{{ total.title }}:&nbsp; <b>{{ stat }}</b><br>
{% endfor %}
</p>
</div>
{% endif %}

{% if import_job.import_status in import_job.failure_statuses %}
<div class="form-row">
<label>Error</label>
<p><b>{{ import_job.error_message }}</b></p>
</div>
{% if import_job.import_status not in import_job.results_statuses %}
<div class="form-row">
<label>Traceback</label>
{{ import_job.traceback | linebreaks }}
<label>{% trans "Progress" %}</label>
{% include "admin/import_export_extensions/progress_bar.html" with job_url=import_job_url %}
</div>
{% endif %}
</fieldset>
Expand Down
3 changes: 3 additions & 0 deletions import_export_extensions/templates/admin/import_export_extensions/progress_bar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{% load i18n %}

<progress max="100" id="progress-bar" data-url="{{ job_url }}" data-label={% trans "Waiting..." %}></progress>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<progress max="100" id="progress-bar" data-url="{{ job_url }}" data-label={% trans "Waiting..." %}></progress>
<progress max="100" id="progress-bar" data-url="{{ job_url }}" data-label={% translate "Waiting..." %}></progress>

So I guess this package will help https://github.com/adamchainz/djade in such cases

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can leave trans as it is everywhere else in the project, and then add djade later

17 changes: 9 additions & 8 deletions test_project/urls.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,6 @@
if settings.DEBUG:
import debug_toolbar

urlpatterns += static(
settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT,
)
urlpatterns += static(
settings.STATIC_URL,
document_root=settings.STATIC_ROOT,
)
urlpatterns += [
path(
"api/schema/",
Expand All @@ -49,3 +41,12 @@
),
path("__debug__/", include(debug_toolbar.urls)),
]

urlpatterns += static(
settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT,
)
urlpatterns += static(
settings.STATIC_URL,
document_root=settings.STATIC_ROOT,
)