backoffice: render data sources index using a template (#46011)

wcs/admin/data_sources.py

@@ -273,27 +273,10 @@ class NamedDataSourcesDirectory(Directory):
         return super(NamedDataSourcesDirectory, self)._q_traverse(path)
 
     def _q_index(self):
-        get_response().add_javascript(['jquery.js', 'jquery-ui.js', 'biglist.js',
-            'qommon.wysiwyg.js'])
-        html_top('datasources', title = _('Data Sources'))
-        r = TemplateIO(html=True)
-
-        r += htmltext('<div id="appbar">')
-        r += htmltext('<h2>%s</h2>') % _('Data Sources')
-        r += htmltext('<span class="actions">')
-        r += htmltext('<a href="import" rel="popup">%s</a>') % _('Import')
-        r += htmltext('<a class="new-item" href="new">%s</a>') % _('New Data Source')
-        r += htmltext('</span>')
-        r += htmltext('</div>')
-        r += htmltext('<ul class="biglist" id="datasource-list">')
-        datasources = NamedDataSource.select(order_by='name')
-        for datasource in datasources:
-            r += htmltext('<li class="biglistitem" id="itemId_%s">') % datasource.id
-            r += htmltext('<strong class="label"><a href="%s/">%s (%s)</a></strong>') % (
-                            datasource.id, datasource.name, datasource.slug)
-            r += htmltext('</li>')
-        r += htmltext('</ul>')
-        return r.getvalue()
+        html_top('datasources', title=_('Data Sources'))
+        return template.QommonTemplateResponse(
+                templates=['wcs/backoffice/data-sources.html'],
+                context={'data_sources': NamedDataSource.select(order_by='name')})
 
     def new(self):
         get_response().breadcrumb.append( ('new', _('New')) )

wcs/templates/wcs/backoffice/data-sources.html

@@ -0,0 +1,23 @@
+{% extends "wcs/backoffice/base.html" %}
+{% load i18n %}
+
+{% block appbar-title %}{% trans "Data Sources" %}{% endblock %}
+
+{% block appbar-actions %}
+<a data-popup href="import">{% trans "Import" %}</a>
+<a href="new">{% trans "New Data Source" %}</a>
+{% endblock %}
+
+{% block content %}
+{% if data_sources %}
+<ul class="objects-list single-links">
+  {% for data_source in data_sources %}
+  <li><a href="{{ data_source.id }}/">{{ data_source.name }} ({{ data_source.slug }})</a></li>
+  {% endfor %}
+</ul>
+{% else %}
+<div class="infonotice">
+{% trans "There are no data sources defined." %}
+</div>
+{% endif %}
+{% endblock %}