history: use table layout for form snapshots (#67112)

This commit is contained in:
Agate 2022-07-07 13:49:57 +02:00 committed by Agate Berriot
parent 5f0eb3aaf7
commit 33dda899e4
3 changed files with 60 additions and 41 deletions

View File

@ -345,7 +345,7 @@ def test_form_snapshot_history(pub, formdef_with_history):
app = login(get_app(pub))
resp = app.get('/backoffice/forms/%s/' % formdef_with_history.id)
resp = resp.click('History')
assert [x.attrib['class'] for x in resp.pyquery.find('ul.snapshots-list li')] == [
assert [x.attrib['class'] for x in resp.pyquery.find('.snapshots-list tr')] == [
'new-day',
'collapsed',
'collapsed',
@ -930,7 +930,7 @@ def test_form_snapshot_save(pub, formdef_with_history):
formdef.store()
resp = app.get('/backoffice/forms/%s/history/' % formdef_with_history.id)
assert [x.attrib['class'] for x in resp.pyquery.find('ul.snapshots-list li')] == [
assert [x.attrib['class'] for x in resp.pyquery.find('.snapshots-list tr')] == [
'new-day',
'collapsed',
'collapsed',
@ -991,10 +991,7 @@ def test_snaphost_workflow_status_item_comments(pub):
resp = resp.form.submit('submit')
resp = app.get('/backoffice/workflows/%s/history/' % workflow.id)
comments = [
x.text[18 : x.text.find('\n')]
for x in resp.html.find('ul', {'class': 'snapshots-list'}).find_all('span', {'class': 'label'})
]
comments = [x.text.strip() for x in resp.html.find_all('td', {'class': 'label'})]
assert comments == [
'Change in action "History Message" in global action "Action"',
'Deletion of action "Webservice (foo)" in status "baz"',

View File

@ -2128,12 +2128,12 @@ div.mail-body {
font-weight: bold;
}
ul.snapshots-list .collapsed {
display: none;
.snapshots-table {
table-layout: fixed;
}
ul.snapshots-list .new-day, ul.snapshots-list .has-label {
display: block;
.snapshots-list .collapsed {
display: none;
}
p.snapshots-navigation {
@ -2499,4 +2499,4 @@ div#main-content > h3.field-edit--subtitle {
#workflow-fullscreen-schema {
height: 95vh;
width: 100%;
}
}

View File

@ -14,33 +14,55 @@
{% if snapshots|length > 1 %}
<p><button>{% trans "Show differences" %}</button></p>
{% endif %}
<table class="main snapshots-table">
<thead>
<th>{% trans "Identifier" %}</th>
<th>{% trans "Compare" %}</th>
<th colspan="2">{% trans 'Date' %}</th>
<th colspan="3">{% trans "Description" %}</th>
<th>{% trans 'User' %}</th>
<th colspan="2">{% trans 'Actions' %}</th>
</thead>
<tbody class="snapshots-list">
{% for snapshot in snapshots %}
<tr data-day="{{ snapshot.timestamp|date:"Y-m-d" }}" class="{% if snapshot.new_day %}new-day{% elif snapshot.label %}has-label{% else %}collapsed{% endif %}">
<td>
<span class="counter">#{{ snapshot.id }}</span>
</td>
<td>
{% if snapshots|length > 1 %}
{% if not forloop.last %}<input type="radio" name="version1" value="{{ snapshot.id }}" {% if forloop.first %}checked="checked"{% endif %} />{% else %}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{% endif %}
{% if not forloop.first %}<input type="radio" name="version2" value="{{ snapshot.id }}" {% if forloop.counter == 2 %}checked="checked"{% endif %}/>{% else %}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{% endif %}
{% endif %}
</td>
<td colspan="2">
{{ snapshot.timestamp }}
{% if snapshot.new_day and snapshot.day_other_count %} — <a class="reveal"
href="#day-{{ snapshot.timestamp|date:"Y-m-d"}}">
{% if snapshot.day_other_count >= 50 %}<strong>{% endif %}
{% blocktrans trimmed count counter=snapshot.day_other_count %}
1 other this day
{% plural %}
{{ counter }} others
{% endblocktrans %}
{% endif %}
</td>
<td class="label" colspan="3">
{% if snapshot.label %}<strong>{{ snapshot.label }}</strong>{% elif snapshot.comment %}{{ snapshot.comment }}{% endif %}
</td>
<td>{% if snapshot.user_id %}{{ snapshot.user }}{% endif %}</td>
<td colspan="2">
<a href="{{snapshot.id}}/view/">{% trans "View" %}</a>
<a data-popup href="{{snapshot.id}}/restore">{% trans "Restore" %}</a>
<a href="{{snapshot.id}}/export">{% trans "Export" %}</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<ul class="objects-list snapshots-list">
{% for snapshot in snapshots %}
<li data-day="{{ snapshot.timestamp|date:"Y-m-d" }}" class="{% if snapshot.new_day %}new-day{% elif snapshot.label %}has-label{% else %}collapsed{% endif %}">
<span class="counter">#{{ snapshot.id }}</span>
{% if snapshots|length > 1 %}
{% if not forloop.last %}<input type="radio" name="version1" value="{{ snapshot.id }}" {% if forloop.first %}checked="checked"{% endif %} />{% else %}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{% endif %}
{% if not forloop.first %}<input type="radio" name="version2" value="{{ snapshot.id }}" {% if forloop.counter == 2 %}checked="checked"{% endif %}/>{% else %}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{% endif %}
{% endif %}
<span class="label">{{ snapshot.timestamp }}{% if snapshot.label %} <strong>{{ snapshot.label }}</strong>{% elif snapshot.comment %}, {{ snapshot.comment }}{% endif %}
{% if snapshot.user_id %}({{ snapshot.user }}){% endif %}</span>
{% if snapshot.new_day and snapshot.day_other_count %}(<a class="reveal"
href="#day-{{ snapshot.timestamp|date:"Y-m-d"}}">
{% if snapshot.day_other_count >= 50 %}<strong>{% endif %}
{% blocktrans trimmed count counter=snapshot.day_other_count %}
1 other this day
{% plural %}
{{ counter }} others this day{% endblocktrans %}
</a>){% endif %}
{% if snapshot.day_other_count >= 50 %}</strong>{% endif %}
<a href="{{snapshot.id}}/view/">{% trans "View" %}</a>
<a data-popup href="{{snapshot.id}}/restore">{% trans "Restore" %}</a>
<a href="{{snapshot.id}}/export">{% trans "Export" %}</a>
</li>
{% endfor %}
</ul>
</form>
</div>
@ -52,13 +74,13 @@
<script>
$(function() {
$('li.new-day a.reveal').on('click', function() {
var day = $(this).parents('li.new-day').data('day');
$('.snapshots-list li[data-day="' + day + '"]').toggleClass('collapsed');
$('tr.new-day a.reveal').on('click', function() {
var day = $(this).parents('tr.new-day').data('day');
$('.snapshots-list tr[data-day="' + day + '"]:not(.new-day)').toggleClass('collapsed');
return false;
});
$('input[name="version1"]').on('click', function() {
var next = $(this).parent('li').next();
var next = $(this).parent('tr').next();
$('input[name="version2"]', next).prop('checked', true);
});
});