forked from enviPath/enviPy
[Feature] Modern UI roll out (#236)
This PR moves all the collection pages into the new UI in a rough push. I did not put the same amount of care into these as into search, index, and predict. ## Major changes - All modals are now migrated to a state based alpine.js implementation. - jQuery is no longer present in the base layout; ajax is replace by native fetch api - most of the pps.js is now obsolte (as I understand it; the code is not referenced any more @jebus please double check) - in-memory pagination for large result lists (set to 50; we can make that configurable later; performance degrades at around 1k) stukk a bit rough tracked in #235 ## Minor things - Sarch and index also use alpine now - The loading spinner is now CSS animated (not sure if it currently gets correctly called) ## Not done - Ihave not even cheked the admin pages. Not sure If these need migrations - The temporary migration pages still use the old template. Not sure what is supposed to happen with those? @jebus ## What I did to test - opend all pages in browse, and user ; plus all pages reachable from there. - Interacted and tested the functionality of each modal superfically with exception of the API key modal (no functional test). --- This PR is massive sorry for that; just did not want to push half-brokenn state. @jebus @liambrydon I would be glad if you could click around and try to break it :) Finally closes #133 Co-authored-by: Tim Lorsbach <tim@lorsba.ch> Reviewed-on: enviPath/enviPy#236 Co-authored-by: Tobias O <tobias.olenyi@envipath.com> Co-committed-by: Tobias O <tobias.olenyi@envipath.com>
This commit is contained in:
@ -1,213 +1,173 @@
|
||||
{% load static %}
|
||||
|
||||
<style>
|
||||
.alias-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 4px 6px;
|
||||
cursor: text;
|
||||
min-height: 38px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.alias {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background-color: #5bc0de;
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
margin: 3px 3px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.alias .remove {
|
||||
margin-left: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.alias-input {
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
border: none;
|
||||
outline: none;
|
||||
margin: 3px 3px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-control.alias-container {
|
||||
height: auto;
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div
|
||||
class="modal fade bs-modal-lg"
|
||||
<dialog
|
||||
id="set_aliases_modal"
|
||||
tabindex="-1"
|
||||
aria-labelledby="set_aliases_modal"
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
>
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button
|
||||
type="button"
|
||||
class="close"
|
||||
data-dismiss="modal"
|
||||
aria-label="Close"
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">
|
||||
Set Aliases for {{ current_object.name|safe }}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form
|
||||
id="set_aliases_modal_form"
|
||||
accept-charset="UTF-8"
|
||||
action="{{ current_object.url }}"
|
||||
data-remote="true"
|
||||
method="post"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<label for="alias-input">Aliases:</label>
|
||||
<div class="form-control alias-container" id="alias-box">
|
||||
{% for alias in current_object.aliases %}
|
||||
<span class="alias"
|
||||
>{{ alias|escape }}<span class="remove">×</span></span
|
||||
>
|
||||
{% endfor %}
|
||||
<input
|
||||
type="text"
|
||||
id="alias-input"
|
||||
class="alias-input"
|
||||
placeholder="Add Alias..."
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
<div
|
||||
id="add-alias-error-message"
|
||||
class="alert alert-danger"
|
||||
role="alert"
|
||||
style="display: none"
|
||||
></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary pull-left"
|
||||
data-dismiss="modal"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
id="set_aliases_modal_form_submit"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
function addAlias(aliasText) {
|
||||
aliasText = aliasText.trim();
|
||||
if (aliasText === "") return;
|
||||
class="modal"
|
||||
x-data="{
|
||||
isSubmitting: false,
|
||||
aliases: [{% for alias in current_object.aliases %}'{{ alias|escapejs }}'{% if not forloop.last %},{% endif %}{% endfor %}],
|
||||
newAlias: '',
|
||||
errorMessage: '',
|
||||
|
||||
// Avoid duplicate aliass
|
||||
var exists = false;
|
||||
$("#alias-box .alias").each(function () {
|
||||
if (
|
||||
$(this).text().replace("×", "").trim().toLowerCase() ===
|
||||
aliasText.toLowerCase()
|
||||
) {
|
||||
exists = true;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
reset() {
|
||||
this.isSubmitting = false;
|
||||
this.errorMessage = '';
|
||||
},
|
||||
|
||||
addAlias() {
|
||||
const aliasText = this.newAlias.trim();
|
||||
if (aliasText === '') return;
|
||||
|
||||
// Check for duplicates (case-insensitive)
|
||||
const exists = this.aliases.some(
|
||||
a => a.toLowerCase() === aliasText.toLowerCase()
|
||||
);
|
||||
|
||||
if (!exists) {
|
||||
var aliasHtml =
|
||||
'<span class="alias">' +
|
||||
$("<div>").text(aliasText).html() +
|
||||
'<span class="remove">×</span></span>';
|
||||
$(aliasHtml).insertBefore("#alias-input");
|
||||
this.aliases.push(aliasText);
|
||||
}
|
||||
|
||||
$("#alias-input").val("");
|
||||
}
|
||||
this.newAlias = '';
|
||||
},
|
||||
|
||||
// Add alias when Enter is pressed
|
||||
$("#alias-input").on("keypress", function (e) {
|
||||
if (e.which === 13) {
|
||||
removeAlias(index) {
|
||||
this.aliases.splice(index, 1);
|
||||
},
|
||||
|
||||
handleKeypress(e) {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
addAlias($(this).val());
|
||||
this.addAlias();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// Add alias when input loses focus
|
||||
$("#alias-input").on("blur", function () {
|
||||
var val = $(this).val();
|
||||
if (val.trim() !== "") {
|
||||
addAlias(val);
|
||||
handleBlur() {
|
||||
if (this.newAlias.trim() !== '') {
|
||||
this.addAlias();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// Remove alias when clicking ×
|
||||
$("#alias-box").on("click", ".remove", function () {
|
||||
$(this).closest(".alias").remove();
|
||||
});
|
||||
async submit() {
|
||||
this.isSubmitting = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
// Focus input when clicking the container
|
||||
$("#alias-box").on("click", function () {
|
||||
$("#alias-input").focus();
|
||||
});
|
||||
|
||||
$("#set_aliases_modal_form_submit").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
let aliases = [];
|
||||
$("#alias-box .alias").each(function () {
|
||||
aliases.push($(this).text().replace("×", "").trim());
|
||||
});
|
||||
|
||||
if (aliases.length === 0) {
|
||||
// Set empty string for deletion of all aliases
|
||||
// If empty list is sent, its gets removed entirely from post data
|
||||
aliases = [""];
|
||||
const formData = new URLSearchParams();
|
||||
if (this.aliases.length === 0) {
|
||||
formData.append('aliases', '');
|
||||
} else {
|
||||
this.aliases.forEach(alias => {
|
||||
formData.append('aliases', alias);
|
||||
});
|
||||
}
|
||||
|
||||
formData = {
|
||||
aliases: aliases,
|
||||
};
|
||||
try {
|
||||
const response = await fetch('{{ current_object.url }}', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: formData
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
type: "post",
|
||||
data: formData,
|
||||
url: "{{ current_object.url }}",
|
||||
traditional: true,
|
||||
success: function (data, textStatus) {
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
window.location.href = data.success;
|
||||
},
|
||||
error: function (jqXHR, textStatus, errorThrown) {
|
||||
$("#add-alias-error-message").append(
|
||||
"<p>Setting aliases failed!</p>",
|
||||
);
|
||||
$("#add-alias-error-message").show();
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
} else {
|
||||
this.errorMessage = 'Setting aliases failed!';
|
||||
}
|
||||
} catch (error) {
|
||||
this.errorMessage = 'Setting aliases failed!';
|
||||
} finally {
|
||||
this.isSubmitting = false;
|
||||
}
|
||||
}
|
||||
}"
|
||||
@close="reset()"
|
||||
>
|
||||
<div class="modal-box max-w-4xl">
|
||||
<!-- Header -->
|
||||
<h3 class="text-lg font-bold">
|
||||
Set Aliases for {{ current_object.name|safe }}
|
||||
</h3>
|
||||
|
||||
<!-- Close button (X) -->
|
||||
<form method="dialog">
|
||||
<button
|
||||
class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="py-4">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Aliases:</span>
|
||||
</label>
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-1 p-2 border border-base-300 rounded-lg bg-base-100 min-h-[38px] cursor-text"
|
||||
@click="$refs.aliasInput.focus()"
|
||||
>
|
||||
<template x-for="(alias, index) in aliases" :key="index">
|
||||
<span class="badge badge-info gap-1 py-3">
|
||||
<span x-text="alias"></span>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs p-0 h-auto min-h-0"
|
||||
@click.stop="removeAlias(index)"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</span>
|
||||
</template>
|
||||
<input
|
||||
type="text"
|
||||
x-ref="aliasInput"
|
||||
x-model="newAlias"
|
||||
class="flex-1 min-w-[120px] border-none outline-none bg-transparent text-sm"
|
||||
placeholder="Add Alias..."
|
||||
@keypress="handleKeypress($event)"
|
||||
@blur="handleBlur()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div x-show="errorMessage" x-cloak class="alert alert-error mt-4">
|
||||
<span x-text="errorMessage"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="modal-action">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
onclick="this.closest('dialog').close()"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
@click="submit()"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
<span x-show="!isSubmitting">Submit</span>
|
||||
<span
|
||||
x-show="isSubmitting"
|
||||
class="loading loading-spinner loading-sm"
|
||||
></span>
|
||||
<span x-show="isSubmitting">Submitting...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Backdrop -->
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button :disabled="isSubmitting">close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
Reference in New Issue
Block a user