klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-07-10 11:59:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use select2 for user picture identification

Browse Source
This commit is contained in:
thomas girod
2024-08-01 19:02:29 +02:00
parent b0d7bbbb79
commit 48f605dbe0
12 changed files with 235 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
sas/templates/sas/picture.jinja
View File

@ -4,6 +4,10 @@
<link rel="stylesheet" href="{{ scss('sas/css/picture.scss') }}">
{%- endblock -%}
{%- block additional_js -%}
<script src="{{ static("sas/js/relation.js") }}"></script>
{%- endblock -%}
{% block title %}
{% trans %}SAS{% endtrans %}
{% endblock %}
@ -51,7 +55,7 @@
</div>
{% endif %}
<div class="container">
<div class="container" id="pict">
<div class="main">
<div class="photo">
@ -101,41 +105,46 @@
</div>
<div class="subsection">
<div class="navigation">
<div class="navigation" x-data>
<div id="prev">
{% if previous_pict %}
<a href="{{ url( 'sas:picture', picture_id=previous_pict.id) }}#pict">
<a
href="{{ url( 'sas:picture', picture_id=previous_pict.id) }}#pict"
@keyup.left.window="$el.click()"
>
<div style="background-image: url('{{ previous_pict.get_download_thumb_url() }}');"></div>
</a>
{% endif %}
</div>
<div id="next">
{% if next_pict %}
<a href="{{ url( 'sas:picture', picture_id=next_pict.id) }}#pict">
<a
href="{{ url( 'sas:picture', picture_id=next_pict.id) }}#pict"
@keyup.right.window="$el.click()"
>
<div style="background-image: url('{{ next_pict.get_download_thumb_url() }}');"></div>
</a>
{% endif %}
</div>
</div>
<div class="tags">
<div class="tags" x-data="user_identification" x-cloak>
<h5>{% trans %}People{% endtrans %}</h5>
{% if user.was_subscribed %}
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p() }}
<input type="submit" value="{% trans %}Go{% endtrans %}" />
</form>
{% endif %}
<ul x-data="user_identification">
<template x-for="item in items" :key="item.id">
<form @submit.prevent="submit_identification" >
{% csrf_token %}
<select x-ref="search" multiple="multiple"></select>
<input type="submit" value="{% trans %}Go{% endtrans %}"/>
</form>{% endif %}
<ul>
<template x-for="identification in identifications" :key="identification.id">
<li>
<a class="user" :href="item.user.url">
<img class="profile-pic" :src="item.user.picture" alt="image de profil"/>
<span x-text="item.user.name"></span>
<a class="user" :href="identification.user.profile_url">
<img class="profile-pic" :src="identification.user.profile_pict" alt="image de profil"/>
<span x-text="identification.user.display_name"></span>
</a>
<template x-if="can_be_removed(item)">
<a class="delete clickable" @click="remove(item)">❌</a>
<template x-if="can_be_removed(identification)">
<a class="delete clickable" @click="remove(identification)">❌</a>
</template>
</li>
</template>
@ -148,53 +157,8 @@
{% block script %}
{{ super() }}
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("user_identification", () => ({
items: [
{%- for r in picture.people.select_related("user", "user__profile_pict") -%}
{
id: {{ r.id }},
user: {
id: {{ r.user.id }},
name: "{{ r.user.get_short_name()|safe }}",
url: "{{ r.user.get_absolute_url() }}",
{% if r.user.profile_pict %}
picture: "{{ r.user.profile_pict.get_download_url() }}",
{% else %}
picture: "{{ static('core/img/unknown.jpg') }}",
{% endif %}
},
},
{%- endfor -%}
],
can_be_removed(item) {
{# If user is root or sas admin, he has the right, at "compile" time.
If not, he can delete only its own identification. #}
{% if user.is_root or user.is_in_group(pk=settings.SITH_GROUP_SAS_ADMIN_ID) %}
return true;
{% else %}
return item.user.id === {{ user.id }};
{% endif %}
},
async remove(item) {
const res = await fetch(`/api/sas/relation/${item.id}`, {method: "DELETE"});
if (res.ok) {
this.items = this.items.filter((i) => i.id !== item.id)
}
},
}))
});
$(() => {
$(document).keydown((e) => {
switch (e.keyCode) {
case 37:
$('#prev a')[0].click();
break;
case 39:
$('#next a')[0].click();
break;
}
});
});
const picture_id = {{ picture.id }};
const user_id = {{ user.id }};
const user_is_sas_admin = {{ (user.is_root or user.is_in_group(pk = settings.SITH_GROUP_SAS_ADMIN_ID))|tojson }}
</script>
{% endblock %}