Skip to content

Commit

Permalink
Vision
Browse files Browse the repository at this point in the history 
More realistic alternative to `current`

Add custom elements scaffold

looks right, doesn't open

found a way to use import, but not have icons modal texts displayed before script is loaded

fix usage of custom elements prototype before it was loaded

make it open the modal

dont know

some progess with native dialogs

make it look somewhat like bootstrap

progress?

make animations work

implement confirmation logic

ough, now the slots inherit values from the .card-header bar

Use `:defined` instead of `.loaded` class

more modals and fix blocktrans

Allow putting extra stuff under `confirmation-modal`

more modals

format

more modals
  • Loading branch information
@niklasmohrin
niklasmohrin committed Nov 13, 2023
1 parent 23c3757 commit a219e47
Show file tree
Hide file tree
Showing 14 changed files with 386 additions and 212 deletions.
31 changes: 12 additions & 19 deletions evap/contributor/templates/contributor_evaluation_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,9 +90,18 @@ <h5 class="card-title me-auto">{% trans 'Evaluation data' %}</h5>
{% if editable %}
<button name="operation" value="preview" type="submit" class="btn btn-light">{% trans 'Preview' %}</button>
<button name="operation" value="save" type="submit" class="btn btn-primary">{% trans 'Save' %}</button>
{# webtest does not allow submission with value "approve" if no such button exists #}
<button style="display: none" name="operation" value="approve" type="submit"></button>
<button type="button" onclick="approveEvaluationModalShow(0, '');" class="btn btn-success">{% trans 'Save and approve' %}</button>

<confirmation-modal type="submit" name="operation" value="approve">
<span slot="title">{% trans 'Approve evaluation' %}</span>
<span slot="action-text">{% trans 'Approve evaluation' %}</span>
<span slot="question">
{% blocktrans %}
Do you want to approve this evaluation? This will allow the evaluation team to proceed with the preparation, but you won't be able to make any further changes.
{% endblocktrans %}
</span>

<button slot="show-button" type="button" class="btn btn-success">{% trans 'Save and approve' %}</button>
</confirmation-modal>
{% endif %}
<a href="{% url 'contributor:index' %}" class="btn btn-light">{% if edit %}{% trans 'Cancel' %}{% else %}{% trans 'Back' %}{% endif %}</a>
</div>
Expand Down Expand Up @@ -121,22 +130,6 @@ <h5 class="modal-title" id="previewModalLabel">{% trans 'Preview' %}</h5>

{% block modals %}
{{ block.super }}
{% trans 'Approve evaluation' as title %}
{% blocktrans asvar question%}Do you want to approve this evaluation? This will allow the evaluation team to proceed with the preparation, but you won't be able to make any further changes.{% endblocktrans %}
{% trans 'Approve evaluation' as action_text %}
{% include 'confirmation_modal.html' with modal_id='approveEvaluationModal' title=title question=question action_text=action_text btn_type='primary' %}
<script type="text/javascript">
function approveEvaluationModalAction(dataId) {
const input = document.createElement("input");
input.type = "hidden";
input.name = "operation";
input.value = "approve";

const form = document.getElementById("evaluation-form");
form.appendChild(input);
form.requestSubmit();
};
</script>

{% blocktrans asvar title with evaluation_name=evaluation.full_name %}Request account creation for {{ evaluation_name }}{% endblocktrans %}
{% trans 'Please tell us which new account we should create. We need the name and email for all new accounts.' as teaser %}
Expand Down
73 changes: 18 additions & 55 deletions evap/contributor/templates/contributor_index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,12 +157,22 @@
<span class="fas fa-pencil"></span>
</a>
{% if not evaluation|has_nonresponsible_editor %}
<a href="#" class="btn btn-sm btn-dark" data-bs-toggle="tooltip"
data-bs-placement="top" title="{% trans 'Delegate preparation' %}"
onclick="delegateSelectionModalShow(`{{ evaluation.full_name }}`, `{% url 'contributor:evaluation_direct_delegation' evaluation.id %}`);return false;"
>
<span class="fas fa-hand-point-left"></span>
</a>
<confirmation-modal data-evaluation-direct-delegation-url="{% url 'contributor:evaluation_direct_delegation' evaluation.id %}">
<span slot="title">{% trans 'Delegate preparation' %}</span>
<span slot="action-text">{% trans 'Delegate preparation' %}</span>
<span slot="question">
{% blocktrans with evaluation_name=evaluation.full_name %}
Do you really want to delegate the preparation of the evaluation {{ evaluation_name }}?
{% endblocktrans %}
<div class="my-4">
{% include 'bootstrap_form.html' with form=delegate_selection_form wide=True %}
</div>
</span>

<a slot="show-button" href="#" class="btn btn-sm btn-dark" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Delegate preparation' %}">
<span class="fas fa-hand-point-left"></span>
</a>
</confirmation-modal>
{% endif %}
{% elif evaluation.state == evaluation.State.EDITOR_APPROVED or evaluation.state == evaluation.State.APPROVED %}
<a href="{% url 'contributor:evaluation_view' evaluation.id %}" class="btn btn-sm btn-light"
Expand Down Expand Up @@ -191,57 +201,10 @@
{% endfor %}
</tbody>
</table>

<!-- TODO: javascript to submit it above -->
</div>
</div>
{% endif %}
{% endfor %}
{% endblock %}

{% block modals %}
{{ block.super }}

{% with modal_id='delegateSelectionModal' %}
<div class="modal fade" id="{{ modal_id }}" role="dialog" aria-labelledby="{{ modal_id }}Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form method="POST">
{% csrf_token %}
<div class="modal-header">
<h5 class="modal-title" id="{{ modal_id }}Label">{% trans 'Delegate preparation' %}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
{% trans 'Do you really want to delegate the preparation of the evaluation <strong data-label=""></strong>?' %}
<div class="my-4">
{% include 'bootstrap_form.html' with form=delegate_selection_form wide=True %}
</div>
<div class="modal-submit-group">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
<button type="submit" id="btn-action" class="btn btn-primary ms-2">{% trans 'Delegate preparation' %}</button>
</div>
</div>

</form>
</div>
</div>
</div>

<script type="text/javascript">
function {{ modal_id }}Show(evaluationName, action) {
const modal = document.getElementById("{{ modal_id }}");
// set form's action location
modal.querySelectorAll("form").forEach(form => form.action = action);

// put the correct evaluation name in the modal
modal.querySelectorAll('[data-label=""]').forEach(el => el.innerText = evaluationName);

// unselect any previously selected options in the modal
modal.querySelectorAll("select").forEach(select => select.tomselect.clear());

// show modal
var {{ modal_id }} = new bootstrap.Modal(document.getElementById('{{ modal_id }}'));
{{ modal_id }}.show();
}
</script>
{% endwith %}
{% endblock %}
2 changes: 2 additions & 0 deletions evap/evaluation/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@
<body>
<script type="text/javascript" src="{% static 'bootstrap/dist/js/bootstrap.bundle.min.js' %}"></script>

{% include "custom_elements.html" %}

{% block modals %}
{% if user.is_authenticated %}
{% trans 'Feedback' as title %}
Expand Down
33 changes: 33 additions & 0 deletions evap/evaluation/templates/confirmation_modal_template.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{% load static %}

<template id="confirmation-modal-template">
<link rel="stylesheet" href="{% static 'css/evap.css' %}" />

<dialog class="evap-modal-dialog">
<form method="dialog">
<div class="evap-modal-container">
<header>
<h5><slot name="title"></slot></h5>
<button class="btn-close"></button>
</header>
<section class="question-area">
<slot name="question"></slot>
<slot name="extra-inputs"></slot>
</section>
<section class="button-area">
<button class="btn btn-light">{% trans 'Cancel' %}</button>
<slot name="submit-group">
<button class="btn ms-2" data-event-type="confirm">
<slot name="action-text"></slot>
</button>
</slot>
</section>
</div>
</form>
</dialog>

<slot name="show-button"></slot>

{# All children without the "slot" attribute go into this unnamed slot #}
<slot></slot>
</template>
9 changes: 9 additions & 0 deletions evap/evaluation/templates/custom_elements.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{% load static %}

{% include "confirmation_modal_template.html" %}

<script type="module">
import { ConfirmationModal } from "{% static 'js/confirmation-modal.js' %}";

customElements.define("confirmation-modal", ConfirmationModal);
</script>
59 changes: 36 additions & 23 deletions evap/grades/templates/grades_course_view.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{% extends 'grades_course_base.html' %}
{% load static %}

{% block content %}
{{ block.super }}
Expand Down Expand Up @@ -30,13 +31,45 @@ <h3 class="mb-3">{{ course.name }} ({{ semester.name }})</h3>
<a href="{% url 'grades:download_grades' grade_document.id %}" class="btn btn-sm btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Download' %}"><span class="fas fa-download"></span></a>
{% if user.is_grade_publisher %}
<a href="{% url 'grades:edit_grades' grade_document.id %}" class="btn btn-sm btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Edit' %}"><span class="fas fa-pencil"></span></a>
<button type="button" onclick="deleteGradedocumentModalShow({{ grade_document.id }}, '{{ grade_document.description|escapejs }}');" class="btn btn-sm btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Delete' %}">
<span class="fas fa-trash"></span>
</button>
<confirmation-modal confirm-button-class="btn-danger" data-delete-document="{{ grade_document.id }}">
<span slot="title">{% trans 'Delete grade document' %}</span>
<span slot="action-text">{% trans 'Delete grade document' %}</span>
<span slot="question">
{% blocktrans with description=grade_document.description %}
Do you really want to delete the grade document <strong>{{ description }}</strong>?
{% endblocktrans %}
</span>

<button slot="show-button" type="button" {{ disable_if_archived }} class="btn btn-sm btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Delete' %}">
<span class="fas fa-trash"></span>
</button>
</confirmation-modal>
{% endif %}
</td>
</tr>
{% endfor %}

<script type="module">
import { CSRF_HEADERS } from "{% static 'js/csrf-utils.js' %}";

document.querySelectorAll("confirmation-modal[data-delete-document]").forEach(modal => {
modal.addEventListener("confirmed", async () => {
const response = await fetch("{% url 'grades:delete_grades' %}", {
body: new URLSearchParams({grade_document_id: modal.dataset.deleteDocument}),
headers: CSRF_HEADERS,
method: "POST",
});

if (response.ok) {
const row = modal.closest("tr");
// TODO: animate
row.remove();
} else {
window.alert("{% trans 'The server is not responding.' %}");
}
});
});
</script>
</tbody>
</table>
{% else %}
Expand All @@ -49,23 +82,3 @@ <h3 class="mb-3">{{ course.name }} ({{ semester.name }})</h3>
<a href="{% url 'grades:upload_grades' course.id %}?final=true" class="btn btn-dark">{% trans 'Upload new final grades' %}</a>
{% endif %}
{% endblock %}

{% block modals %}
{{ block.super }}
{% trans 'Delete grade document' as title %}
{% trans 'Do you really want to delete the grade document <strong data-label=""></strong>?' as question %}
{% trans 'Delete grade document' as action_text %}
{% include 'confirmation_modal.html' with modal_id='deleteGradedocumentModal' title=title question=question action_text=action_text btn_type='danger' %}
<script type="text/javascript">
function deleteGradedocumentModalAction(dataId) {
fetch("{% url 'grades:delete_grades' %}", {
body: new URLSearchParams({grade_document_id: dataId}),
headers: CSRF_HEADERS,
method: "POST",
}).then(response => {
assert(response.ok);
fadeOutThenRemove(document.getElementById('grade_document-row-'+dataId));
}).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
};
</script>
{% endblock %}
Loading

0 comments on commit a219e47

Please sign in to comment.