135 lines
5.0 KiB
Twig
135 lines
5.0 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
|
|
|
|
{%block body%}
|
|
<h2>Projets</h2>
|
|
<ul id="tabProjects" class="nav nav-tabs">
|
|
<li class="me-5">
|
|
<a href="{{ path('app_user_project_submit') }}" class="btn btn-success">Ajouter</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" aria-current="page" href="#" data-status="A Voter"">A Voter</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" data-status="Brouillon">Brouillon</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" data-status="Voté">Voté</a>
|
|
</li>
|
|
<li class="nav-item ms-auto">
|
|
<a class="nav-link" href="#" data-status="Archivé">Archivé</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link text-success nav-tome" href="#">Mes Projets</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div id="containerdraft" data-status="Brouillon" class='containerStatus d-flex flex-wrap mt-3' style='justify-content: left'>
|
|
<h3 style="width:100%">Brouillon</h3>
|
|
</div>
|
|
<div id="containervoted" data-status="A Voter" class='containerStatus d-flex flex-wrap mt-3' style='justify-content: left'>
|
|
<h3 style="width:100%">A Voter</h3>
|
|
</div>
|
|
<div id="containertovote" data-status="Voté" class='containerStatus d-flex flex-wrap mt-3' style='justify-content: left'>
|
|
<h3 style="width:100%">Voté</h3>
|
|
</div>
|
|
<div id="containerarchived" data-status="Archivé" class='containerStatus d-flex flex-wrap mt-3' style='justify-content: left'>
|
|
<h3 style="width:100%">Archivé</h3>
|
|
</div>
|
|
|
|
<div style="display:none">
|
|
{% for project in projects %}
|
|
{% if is_granted('VIEW', project) %}
|
|
<div class='card cardProject' data-status="{{project.status}}" data-tome="{{is_granted('TOME', project)}}" style='width:300px; margin-right:10px;'>
|
|
<div class='card-header d-flex justify-content-between align-items-center'>
|
|
<h5>{{project.title}}</h5>
|
|
|
|
<div>
|
|
<a href="{{ path("app_user_project_view",{id:project.id}) }}" class="btn btn-secondary btn-sm"><i class="fas fa-eye"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class='card-body'>
|
|
{{project.summary|nl2br}}
|
|
</div>
|
|
<div class='card-footer' style="line-height:14px">
|
|
<small><em>
|
|
{% if project.dueDate %}
|
|
<b>A Voter pour le</b> = {{ project.dueDate|date("d/m/Y") }}<br>
|
|
{% endif %}
|
|
<b>Nature</b> = {{ project.nature }}<br>
|
|
<b>Propriétaires</b> =
|
|
{%for user in project.users%}
|
|
{{loop.first ? user.username : ' - '~user.username}}
|
|
{%endfor%}
|
|
</em></small>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
{%endblock%}
|
|
|
|
{% block localscript %}
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Cacher tous les containers sauf celui actif au chargement
|
|
let initialStatus = $('.nav-link.active').data('status');
|
|
$('.containerStatus').removeClass("d-flex");
|
|
$('.containerStatus').hide();
|
|
|
|
$('.cardProject').each(function () {
|
|
const $card = $(this);
|
|
const status = $card.data('status');
|
|
const $container = $('.containerStatus[data-status="' + status + '"]')
|
|
|
|
if ($container.length) {
|
|
$container.append($card);
|
|
}
|
|
});
|
|
|
|
console.log(initialStatus);
|
|
$('.containerStatus[data-status="' + initialStatus + '"]').addClass("d-flex");
|
|
|
|
$('#tabProjects .nav-link').on('click', function (e) {
|
|
e.preventDefault();
|
|
|
|
// Gère les onglets actifs
|
|
$('.nav-link').removeClass('active');
|
|
$(this).addClass('active');
|
|
|
|
if ($(this).hasClass('nav-tome')) {
|
|
// On masque tt les cardProject
|
|
$(".cardProject").hide();
|
|
|
|
// On affiche que les cardProject avec tome
|
|
$(".cardProject[data-tome='1']").show();
|
|
|
|
$('.containerStatus').each(function () {
|
|
const $container = $(this);
|
|
const hasTome = $container.find('.cardProject[data-tome="1"]').length > 0;
|
|
|
|
if (hasTome) {
|
|
$container.addClass('d-flex').show();
|
|
} else {
|
|
$container.removeClass('d-flex').hide();
|
|
}
|
|
});
|
|
}
|
|
else {
|
|
// On affiche tt les cardProject
|
|
$(".cardProject").show();
|
|
|
|
// Récupère le data-status sélectionné
|
|
let status = $(this).data('status');
|
|
|
|
// Cache tous les containers, puis affiche celui correspondant au data-status
|
|
$('.containerStatus').removeClass('d-flex').hide();
|
|
$('.containerStatus[data-status="' + status + '"]').addClass("d-flex").show();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|