Base template and picture

apps/family/forms.py

@@ -5,7 +5,7 @@ from django import forms
 from django.forms.widgets import NumberInput
 from note_kfet.inputs import Autocomplete
 
-from .models import Challenge, FamilyMembership, User
+from .models import Challenge, FamilyMembership, User, Family
 
 
 class ChallengeUpdateForm(forms.ModelForm):
@@ -36,3 +36,9 @@ class FamilyMembershipForm(forms.ModelForm):
                     },
                 )
         }
+
+
+class FamilyUpdateForm(forms.ModelForm):
+    class Meta:
+        model = Family
+        fields = ('description', )

apps/family/migrations/0002_family_display_image.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.23 on 2025-07-17 15:28
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('family', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='family',
+            name='display_image',
+            field=models.ImageField(default='pic/default.png', max_length=255, upload_to='pic/', verbose_name='display image'),
+        ),
+    ]

apps/family/models.py

@@ -28,6 +28,15 @@ class Family(models.Model):
         verbose_name=_('rank'),
     )
 
+    display_image = models.ImageField(
+        verbose_name=_('display image'),
+        max_length=255,
+        blank=False,
+        null=False,
+        upload_to='pic/',
+        default='pic/default.png'
+    )
+
     class Meta:
         verbose_name = _('Family')
         verbose_name_plural = _('Families')

apps/family/templates/family/base.html

@@ -13,29 +13,15 @@ SPDX-License-Identifier: GPL-3.0-or-later
         {% block profile_info %}
         <div class="card bg-light" id="card-infos">
             <h4 class="card-header text-center">
-                {% if user_object %}
-                {% trans "Account #" %}{{ user_object.pk }}
-                {% elif club %}
-                Club {{ club.name }}
-                {% endif %}
+                {{ family.name }}
             </h4>
             <div class="text-center">
-                {% if user_object %}
-                <a href="{% url 'member:user_update_pic' user_object.pk  %}">
-                    <img src="{{ user_object.note.display_image.url }}" class="img-thumbnail mt-2">
+                <a href="{% url 'family:update_pic' family.pk  %}">
+                    <img src="{{ family.display_image.url }}" class="img-thumbnail mt-2">
                 </a>
-                {% elif club %}
-                <a href="{% url 'member:club_update_pic' club.pk  %}">
-                    <img src="{{ club.note.display_image.url }}" class="img-thumbnail mt-2">
-                </a>
-                {% endif %}
             </div>
             <div class="card-body" id="profile_infos">
-                {% if user_object %}
-                {% include "member/includes/profile_info.html" %}
-                {% elif club %}
-                {% include "member/includes/club_info.html" %}
-                {% endif %}
+                {% include "family/family_info.html" %}
             </div>
             <div class="card-footer">
                 {% if can_add_members %}
@@ -48,19 +34,13 @@ SPDX-License-Identifier: GPL-3.0-or-later
                     <i class="fa fa-edit"></i> {% trans 'Update Profile' %}
                 </a>
                 {% endif %}
-                {% url 'member:club_detail' club.pk as club_detail_url %}
-                {% if request.path_info != club_detail_url %}
-                <a class="btn btn-sm btn-primary" href="{{ club_detail_url }}">{% trans 'View Profile' %}</a>
-                {% endif %}
-                {% if can_lock_note %}
-                <button class="btn btn-sm btn-danger" data-toggle="modal" data-target="#lock-note-modal">
-                    <i class="fa fa-ban"></i> {% trans 'Lock note' %}
-                </button>
-                {% elif can_unlock_note %}
-                <button class="btn btn-sm btn-success" data-toggle="modal" data-target="#unlock-note-modal">
-                    <i class="fa fa-check-circle"></i> {% trans 'Unlock note' %}
-                </button>
+                {% url 'family:family_detail' family.pk as family_detail_url %}
+                {% if request.path_info != family_detail_url %}
+                <a class="btn btn-sm btn-primary" href="{{ family_detail_url }}">{% trans 'View Profile' %}</a>
                 {% endif %}
+                <a class="btn btn-sm btn-primary" href="{% url "family:family_list" %}">
+                    {% trans "Return to the family list" %}
+                  </a>
             </div>
         </div>
         {% endblock %}

apps/family/templates/family/family_detail.html

@@ -3,4 +3,14 @@
 Copyright (C) 2018-2025 by BDE ENS Paris-Saclay
 SPDX-License-Identifier: GPL-3.0-or-later
 {% endcomment %}
+{% load render_table from django_tables2 %}
+{% load i18n perms %}
 
+{% block profile_content %}
+<div class="card">
+    <div class="card-header position-relative" id="clubListHeading">
+        <i class="fa fa-users"></i> {% trans "Family members" %}
+    </div>
+    {% render_table member_list %}
+</div>
+{% endblock %}

apps/family/templates/family/family_info.html

@@ -0,0 +1,15 @@
+{% load i18n pretty_money perms %}
+
+<dl class="row">
+    <dt class="col-xl-6">{% trans 'name'|capfirst %}</dt>
+    <dd class="col-xl-6">{{ family.name }}</dd>
+
+    <dt class="col-xl-6">{% trans 'description'|capfirst %}</dt>
+    <dd class="col-xl-6">{{ family.description }}</dd>
+
+    <dt class="col-xl-6">{% trans 'score'|capfirst %}</dt>
+    <dd class="col-xl-6">{{ family.score }}</dd>
+
+    <dt class="col-xl-6">{% trans 'rank'|capfirst %}</dt>
+    <dd class="col-xl-6">{{ family.rank }}</dd>
+</dl>

apps/family/templates/family/family_update.html

@@ -0,0 +1,21 @@
+{% extends "base.html" %}
+{% comment %}
+Copyright (C) 2018-2025 by BDE ENS Paris-Saclay
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
+{% load i18n crispy_forms_tags %}
+
+{% block content %}
+<div class="card bg-white mb-3">
+  <h3 class="card-header text-center">
+    {{ title }}
+  </h3>
+  <div class="card-body" id="form">
+    <form method="post">
+      {% csrf_token %}
+      {{ form | crispy }}
+      <button class="btn btn-primary" type="submit">{% trans "Submit"%}</button>
+    </form>
+  </div>
+</div>
+{% endblock %}

apps/family/templates/family/picture_update.html

@@ -0,0 +1,118 @@
+{% extends "family/base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
+{% load i18n crispy_forms_tags %}
+
+{% block profile_content %}
+<div class="card bg-light">
+  <h3 class="card-header text-center">
+    {{ title }}
+  </h3>
+  <div class="card-body">
+    <div class="text-center">
+      <form method="post" enctype="multipart/form-data" id="formUpload">
+        {% csrf_token %}
+        {{ form |crispy }}
+        {% if user.note.display_image != "pic/default.png" %}
+          <input type="submit" class="btn btn-primary" value="{% trans "Remove" %}">
+        {% endif %}
+      </form>
+    </div>
+    <!-- MODAL TO CROP THE IMAGE -->
+    <div class="modal fade" id="modalCrop" data-backdrop="static">
+      <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-body-wrapper" style="width: 500px; height: 500px; padding: 16px;">
+              <div class="modal-body" style="width: 100%; height: 100%; padding: 0">
+                <img src="" id="modal-image" style="display: block; max-width: 100%;">
+              </div>
+            </div>
+          <div class="modal-footer">
+            <div class="btn-group pull-left" role="group">
+              <button type="button" class="btn btn-default" id="js-zoom-in">
+                <span class="glyphicon glyphicon-zoom-in"></span>
+              </button>
+              <button type="button" class="btn btn-default js-zoom-out">
+                <span class="glyphicon glyphicon-zoom-out"></span>
+              </button>
+            </div>
+            <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Nevermind" %}</button>
+            <button type="button" class="btn btn-primary js-crop-and-upload">{% trans "Crop and upload" %}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block extracss %}
+<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.min.css" rel="stylesheet">
+{% endblock %}
+
+{% block extrajavascript%}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/jquery-cropper@1.0.1/dist/jquery-cropper.min.js"></script>
+<script>
+  $(function () {
+
+    /* SCRIPT TO OPEN THE MODAL WITH THE PREVIEW */
+    $("#id_image").change(function (e) {
+      if (this.files && this.files[0]) {
+        // Check the image size
+        if (this.files[0].size > 2*1024*1024) {
+          alert("Ce fichier est trop volumineux.")
+	} else {
+          // Read the selected image file
+          var reader = new FileReader();
+          reader.onload = function (e) {
+            $("#modal-image").attr("src", e.target.result);
+            $("#modalCrop").modal("show");
+          }
+          reader.readAsDataURL(this.files[0]);
+        }
+      }
+    });
+
+    /* SCRIPTS TO HANDLE THE CROPPER BOX */
+    var $image = $("#modal-image");
+    var cropBoxData;
+    var canvasData;
+    $("#modalCrop").on("shown.bs.modal", function () {
+      $image.cropper({
+        viewMode: 1,
+        aspectRatio: 1 / 1,
+        minCropBoxWidth: 200,
+        minCropBoxHeight: 200,
+        ready: function () {
+          $image.cropper("setCanvasData", canvasData);
+          $image.cropper("setCropBoxData", cropBoxData);
+        }
+      });
+    }).on("hidden.bs.modal", function () {
+      cropBoxData = $image.cropper("getCropBoxData");
+      canvasData = $image.cropper("getCanvasData");
+      $image.cropper("destroy");
+    });
+
+    $(".js-zoom-in").click(function () {
+      $image.cropper("zoom", 0.1);
+    });
+
+    $(".js-zoom-out").click(function () {
+      $image.cropper("zoom", -0.1);
+    });
+
+    /* SCRIPT TO COLLECT THE DATA AND POST TO THE SERVER */
+    $(".js-crop-and-upload").click(function () {
+      var cropData = $image.cropper("getData");
+      $("#id_x").val(cropData["x"]);
+      $("#id_y").val(cropData["y"]);
+      $("#id_height").val(cropData["height"]);
+      $("#id_width").val(cropData["width"]);
+      $("#formUpload").submit();
+    });
+  });
+</script>
+{% endblock %}

apps/family/urls.py

@@ -3,14 +3,15 @@
 
 from django.urls import path
 
-from .views import FamilyListView, FamilyDetailView, FamilyUpdateView, FamilyAddMemberView, ChallengeListView, ChallengeDetailView, ChallengeUpdateView
+from .views import FamilyListView, FamilyDetailView, FamilyUpdateView, FamilyPictureUpdateView, FamilyAddMemberView, ChallengeListView, ChallengeDetailView, ChallengeUpdateView
 
 app_name = 'family'
 urlpatterns = [
     path('list/', FamilyListView.as_view(), name="family_list"),
     path('detail/<int:pk>/', FamilyDetailView.as_view(), name="family_detail"),
     path('update/<int:pk>/', FamilyUpdateView.as_view(), name="family_update"),
-    path('<int:family_pk>/add_member', FamilyAddMemberView.as_view(), name="family_add_member"),
+    path('update_pic/<int:pk>/', FamilyPictureUpdateView.as_view(), name="update_pic"),
+    path('add_member/<int:family_pk>/', FamilyAddMemberView.as_view(), name="family_add_member"),
     path('challenge/list/', ChallengeListView.as_view(), name="challenge_list"),
     path('challenge/detail/<int:pk>/', ChallengeDetailView.as_view(), name="challenge_detail"),
     path('challenge/update/<int:pk>/', ChallengeUpdateView.as_view(), name="challenge_update"),

apps/family/views.py

@@ -3,7 +3,9 @@
 
 from datetime import date
 
+from django.conf import settings
 from django.contrib.auth.mixins import LoginRequiredMixin
+from django.db import transaction
 from django.views.generic import DetailView, UpdateView
 from django.utils.translation import gettext_lazy as _
 from django_tables2 import SingleTableView
@@ -13,7 +15,9 @@ from django.urls import reverse_lazy
 
 from .models import Family, Challenge, FamilyMembership, User
 from .tables import FamilyTable, ChallengeTable, FamilyMembershipTable
-from .forms import ChallengeUpdateForm, FamilyMembershipForm
+from .forms import ChallengeUpdateForm, FamilyMembershipForm, FamilyUpdateForm
+from member.forms import ImageForm
+from member.views import PictureUpdateView
 
 
 class FamilyCreateView(ProtectQuerysetMixin, ProtectedCreateView):
@@ -62,9 +66,12 @@ class FamilyDetailView(ProtectQuerysetMixin, LoginRequiredMixin, DetailView):
             family=family,
             year=date.today().year,
         ).filter(PermissionBackend.filter_queryset(self.request, FamilyMembership, "view"))\
-            .order_by("user__username").distinct("user__username")
+            .order_by("user__username")
+        family_member = family_member.distinct("user__username")\
+            if settings.DATABASES["default"]["ENGINE"] == 'django.db.backends.postgresql' else family_member
 
-        membership_table = FamilyMembershipTable(data=family_member)
+        membership_table = FamilyMembershipTable(data=family_member, prefix="membership-")
+        membership_table.paginate(per_page=5, page=self.request.GET.get('membership-page', 1))
         context['member_list'] = membership_table
 
         # Check if the user has the right to create a membership, to display the button.
@@ -85,8 +92,43 @@ class FamilyUpdateView(ProtectQuerysetMixin, LoginRequiredMixin, UpdateView):
     """
     model = Family
     context_object_name = "family"
+    form_class = FamilyUpdateForm
+    template_name = 'family/family_update.html'
     extra_context = {"title": _('Update family')}
 
+    def get_success_url(self):
+        return reverse_lazy('family:family_detail', kwargs={'pk': self.object.pk})
+
+
+class FamilyPictureUpdateView(PictureUpdateView):
+    """
+    Update profile picture of the family
+    """
+    model = Family
+    extra_context = {"title": _("Update family picture")}
+    template_name = 'family/picture_update.html'
+
+    def get_success_url(self):
+        """Redirect to family page after upload"""
+        return reverse_lazy('family:family_detail', kwargs={'pk': self.object.id})
+
+    @transaction.atomic
+    def form_valid(self, form):
+        """
+        Save the image
+        """
+        image = form.cleaned_data['image']
+
+        if image is None:
+            image = "pic/default.png"
+        else:
+            # Rename as PNG or GIF
+            extension = image.name.split(".")[-1]
+            if extension == "gif":
+                image.name = "{}_pic.gif".format(self.object.pk)
+            else:
+                image.name = "{}_pic.png".format(self.object.pk)
+
 
 class FamilyAddMemberView(ProtectQuerysetMixin, ProtectedCreateView):
     """
@@ -108,6 +150,29 @@ class FamilyAddMemberView(ProtectQuerysetMixin, ProtectedCreateView):
             year=date.today().year,
         )
 
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        form = context['form']
+
+        family = Family.objects.filter(PermissionBackend.filter_queryset(self.request, Family, "view"))\
+            .get(pk=self.kwargs['family_pk'])
+        
+        context['family'] = family
+
+        return context
+
+    @transaction.atomic
+    def form_valid(self, form):
+        """
+        Create family membership, check that everythinf is good
+        """
+        family = Family.objects.filter(PermissionBackend.filter_queryset(self.request, Family, "view")) \
+                .get(pk=self.kwargs["family_pk"])
+
+        form.instance.family = family
+
+        return super().form_valid(form)
+
     def get_success_url(self):
         return reverse_lazy('family:family_detail', kwargs={'pk': self.object.family.id})