Skip to content

Commit

Permalink
Add a review step before submitting a feed item
Browse files Browse the repository at this point in the history
  • Loading branch information
@Xpirix
Xpirix committed Oct 19, 2023
1 parent 05ea922 commit e865bfb
Show file tree
Hide file tree
Showing 5 changed files with 198 additions and 21 deletions.
133 changes: 120 additions & 13 deletions qgisfeedproject/static/js/feed_item_form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,140 @@
var titleField = document.getElementById("id_title");
var contentField = document.getElementById("id_content");
var imageField = document.getElementById("id_image");
var urlField = document.getElementById("id_url");
var stickyField = document.getElementById("id_sticky");
var sortingField = document.getElementById("id_sorting");
var languageField = document.getElementById("id_language_filter");
var spatialFilterField = document.getElementById("id_spatial_filter");
var publishFromField = document.getElementById("id_publish_from");
var publishToField = document.getElementById("id_publish_to");

var contentPreview = document.getElementById("contentPreview");
var titlePreview = document.getElementById("titlePreview");
var contentPreview = document.getElementsByName("contentPreview");
var titlePreview = document.getElementsByName("titlePreview");
var imagePreview = document.getElementsByName("imagePreview");
var urlPreview = document.getElementById("urlPreview");
var stickyPreview = document.getElementById("stickyPreview");
var sortingPreview = document.getElementById("sortingPreview");
var languagePreview = document.getElementById("languagePreview");
var spatialFilterPreview = document.getElementById("spatialFilterPreview");
var publishFromPreview = document.getElementById("publishFromPreview");
var publishToPreview = document.getElementById("publishToPreview");
var imagePreview = document.getElementById("imagePreview");

var imageFileName = document.getElementById("imageFileName");

// Update title in preview when input change
titleField.addEventListener("input", function () {
var fieldValue = titleField.value;
titlePreview.innerText = fieldValue;
titlePreview.forEach((item) => {
item.innerText = fieldValue;
});
});

// Update content in preview when input change
contentField.addEventListener("input", function () {
var fieldValue = contentField.value;
contentPreview.innerHTML = fieldValue;
contentPreview.forEach((item) => {
item.innerHTML = fieldValue;
});
});

// Update image in preview when input change
imageField.addEventListener("change", function () {
var selectedImage = imageField.files[0];
if (selectedImage) {
var imageURL = URL.createObjectURL(selectedImage);
imagePreview.innerHTML =
'<img src="' + imageURL + '" style="border-radius:20px;">';
imageFileName.innerHTML = selectedImage.name;
} else {
imagePreview.innerHTML = "";
imageFileName.innerHTML =
"<i>No image choosed. Click here to add an image.</i>";
imagePreview.forEach((item) => {
if (selectedImage) {
var imageURL = URL.createObjectURL(selectedImage);
item.innerHTML =
'<img src="' + imageURL + '" style="border-radius:20px;">';
imageFileName.innerHTML = selectedImage.name;
} else {
item.innerHTML = "";
imageFileName.innerHTML =
"<i>No image choosed. Click here to add an image.</i>";
}
});
});

document.addEventListener("DOMContentLoaded", () => {
// Functions to open and close the review modal
function openModal($el) {
$el.classList.add("is-active");
}

function closeModal($el) {
$el.classList.remove("is-active");
}

function closeAllModals() {
(document.querySelectorAll(".modal") || []).forEach(($modal) => {
closeModal($modal);
});
}

// Add a click event on buttons to open the modal
(document.querySelectorAll(".js-modal-trigger") || []).forEach(($trigger) => {
const modal = $trigger.dataset.target;
const $target = document.getElementById(modal);

$trigger.addEventListener("click", () => {
openModal($target);

// Update all data in the review modal table
urlPreview.innerHTML = urlField.value
? '<a href="' +
urlField.value +
'" target="_blank">' +
urlField.value +
"</a>"
: "<i>-</i>";

stickyPreview.innerHTML = stickyField.checked
? '<span class="icon has-text-success">' +
'<i class="fa-solid fa-circle-check"></i>' +
"</span>"
: '<span class="icon has-text-danger">' +
'<i class="fa-solid fa-circle-xmark"></i>' +
"</span>";

spatialFilterPreview.classList.add(
spatialFilterField.value ? "is-success" : "is-danger"
);
spatialFilterPreview.innerHTML = spatialFilterField.value
? "Spatial filter defined."
: "Spatial filter not defined.";

sortingPreview.innerText = sortingField.value ? sortingField.value : "-";
languagePreview.innerText = languageField.value
? languageField.options[languageField.selectedIndex].text
: "-";
publishFromPreview.innerText = publishFromField.value
? new Date(publishFromField.value).toString()
: "-";
publishToPreview.innerText = publishToField.value
? new Date(publishToField.value).toString()
: "-";

});
});

// Add a click event on various child elements to close the parent modal
(
document.querySelectorAll(
".modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button"
) || []
).forEach(($close) => {
const $target = $close.closest(".modal");

$close.addEventListener("click", () => {
closeModal($target);
});
});

// Add a keyboard event to close all modals
document.addEventListener("keydown", (event) => {
if (event.code === "Escape") {
closeAllModals();
}
});
});
65 changes: 65 additions & 0 deletions qgisfeedproject/templates/feeds/feed_item_confirmation.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<div id="form-review-modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card" style="width:60% !important">
<header class="modal-card-head">
<p class="modal-card-title">Review your changes</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
{% include 'feeds/feed_item_preview.html' %}

<table class="table is-fullwidth">
<tbody>
<tr>
<th>Url:</th>
<td id="urlPreview">
</td>
</tr>
<tr>
<th>Sticky:</th>
<td id="stickyPreview">
</td>
</tr>
<tr>
<th>Sorting order:</th>
<td id="sortingPreview">
</td>
</tr>
<tr>
<th>Language filter:</th>
<td id="languagePreview">
</td>
</tr>
<tr>
<th>Spatial filter:</th>
<td id="spatialFilterPreview" class="notification is-light"></td>
</tr>
<tr>
<th>Publication start:</th>
<td id="publishFromPreview">
</td>
</tr>
<tr>
<th>Publication end:</th>
<td id="publishToPreview">
</td>
</tr>
</tbody>
</table>
</section>
<footer class="modal-card-foot is-justify-content-flex-end">
<button class="button">
<span class="icon">
<i class="fa fa-pen-to-square" aria-hidden="true"></i>
</span>
<span>Back to edition</span>
</button>
<button class="button is-success" type="submit" form="feedItemForm">
<span class="icon">
<i class="fa fa-floppy-disk" aria-hidden="true"></i>
</span>
<span>Submit changes</span>
</button>
</footer>
</div>
</div>
9 changes: 9 additions & 0 deletions qgisfeedproject/templates/feeds/feed_item_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,22 @@
<div class="columns">
<div class="column is-6">
{% include 'feeds/feed_item_form_widgets.html' %}
<button class="button is-block is-success js-modal-trigger mt-5" data-target="form-review-modal">
<span class="icon">
<i class="fa fa-floppy-disk" aria-hidden="true"></i>
</span>
<span>Review and save changes</span>
</button>
</div>
<div class="column is-6">
<h5 class="title is-5 has-text-centered">Preview</h5>
{% include 'feeds/feed_item_preview.html' %}
</div>
</div>
</section>

{% include 'feeds/feed_item_confirmation.html' %}

{% endblock content %}
<!-- Specific JS goes HERE -->
{% block javascripts %}
Expand Down
5 changes: 1 addition & 4 deletions qgisfeedproject/templates/feeds/feed_item_form_widgets.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@

<form method="POST" enctype="multipart/form-data">
<form method="POST" enctype="multipart/form-data" id="feedItemForm">
{% csrf_token %}
<div class="box has-background-light p-3 box-container has-text-dark">
<div class="field">
Expand Down Expand Up @@ -110,7 +110,4 @@
</div>
</div>
</div>
<button class="button is-block is-success" type="submit" value="submit" id="submit-button">
Save <i class="fa fa-floppy-disk" aria-hidden="true"></i>
</button>
</form>
7 changes: 3 additions & 4 deletions qgisfeedproject/templates/feeds/feed_item_preview.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
<h5 class="title is-5 has-text-centered">Preview</h5>
<div class="form-preview columns has-background-light p-2 box-container has-text-dark m-5">
<div class="column is-4" id="imagePreview">
<div class="column is-4" name="imagePreview">
{% if form.image.value %}
<img src="{{ form.image.value.url }}" style="border-radius:20px;">
{% else %}
{% endif %}
</div>
<div class="column is-8">
<h5 id="titlePreview" class="title is-5">
<h5 name="titlePreview" class="title is-5">
{{form.title.value | default:""}}
</h5>
<div id="contentPreview">
<div name="contentPreview">
{{form.content.value | default:"" | safe }}
</div>
</div>
Expand Down

0 comments on commit e865bfb

Please sign in to comment.