templates/app/family_member/index.html.twig line 1

  1. {% extends 'app/index.html.twig' %} {% block title %} {% trans %} Parents list
  2. {% endtrans %} {% endblock %} {% block content %} {% include
  3. "app/_partials/breadcrumb.html.twig" with { 'title': 'Parents'|trans, 'parent':
  4. 'Enfants & Parents'|trans } %}
  6. <div class="row">
  7.   <div class="col-12">
  8.     <div class="card">
  9.       <div class="card-header">
  10.         <div class="row align-items-center">
  11.           <div class="col-md-6">
  12.             <div class="mb-3">
  13.               <h5 class="card-title">
  14.                 {% trans %} Tous les parents{% endtrans %}
  15.                 <span class="text-muted fw-normal ms-2"
  16.                   >({{ family_members | length }})</span
  17.                 >
  18.               </h5>
  19.             </div>
  20.           </div>
  22.           <div class="col-md-6">
  23.             <div
  24.               class="d-flex flex-wrap align-items-center justify-content-end gap-2 mb-3"
  25.             >
  26.               <div>
  27.                 <ul class="nav nav-pills"></ul>
  28.               </div>
  29.               <div>
  30.                 <a
  31.                   href="{{ path('app_family_member_new') }}"
  32.                   class="btn btn-primary"
  33.                   data-bs-toggle="modal"
  34.                   data-bs-target="#add-modal"
  35.                 >
  36.                   <i class="bx bx-plus me-1"></i>
  37.                   {% trans %} Ajouter un nouveau {% endtrans %}
  38.                 </a>
  39.               </div>
  40.               {% include "app/family_member/add-modal.html.twig" %} {% include
  41.               "app/family_member/edit-modal.html.twig" %}
  42.             </div>
  43.           </div>
  44.         </div>
  45.       </div>
  47.       <div class="card-body">
  48.         <div class="table">
  49.           <table
  50.             id="datatable"
  51.             class="table table-bordered dt-responsive nowrap w-100"
  52.           >
  53.             <thead>
  54.               <tr>
  55.                 <th>#</th>
  56.                 <th>{% trans %} Nom Complet {% endtrans %}</th>
  57.                 <th>{% trans %} Enfants {% endtrans %}</th>
  58.                 <th>{% trans %} Email {% endtrans %}</th>
  59.                 <th>{% trans %} Téléphone / Mobile {% endtrans %}</th>
  60.                 <th>{% trans %} Emploi {% endtrans %}</th>
  61.                 <th width="220px">{% trans %} Actions {% endtrans %}</th>
  62.               </tr>
  63.             </thead>
  64.             <tbody data-controller="familymember">
  65.               {% for family_member in family_members %}
  66.               <tr>
  67.                 <th scope="row">
  68.                   {{ loop.index }}
  69.                 </th>
  70.                 <td>
  71.                   <div class="d-flex align-items-center">
  72.                     <div class="flex-shrink-0 me-3">
  73.                       <img
  74.                         class="rounded-circle avatar-md"
  75.                         src="{{ family_member.photo ? '/uploads/family_members/' ~ family_member.photo : '/front/images/family.png' }}"
  76.                         alt="{{ family_member.firstName }} {{
  77.                           family_member.lastName
  78.                         }}"
  79.                       />
  80.                     </div>
  81.                     <div class="flex-grow-1">
  82.                       <a
  83.                         href="{{
  84.                           path('app_family_member_show', {
  85.                             id: family_member.id
  86.                           })
  87.                         }}"
  88.                       >
  89.                         <h5 class="font-size-14 mb-0">
  90.                           {{ family_member.firstName }}
  91.                           {{ family_member.lastName }}
  92.                         </h5>
  93.                       </a>
  94.                     </div>
  95.                   </div>
  96.                 </td>
  97.                 <td>
  98.                   <div class="avatar-group float-start task-assigne">
  99.                     {% for child in family_member.children %}
  100.                     <div class="avatar-group-item">
  101.                       <a
  102.                         href="{{ path('app_child_show', { id: child.id }) }}"
  103.                         class="d-inline-block"
  104.                         data-bs-toggle="popover"
  105.                         data-bs-trigger="hover"
  106.                         data-placement="top"
  107.                         title=""
  108.                         data-bs-content="{{ child.firstName }} {{
  109.                           child.lastName
  110.                         }}"
  111.                       >
  112.                         <div class="avatar-sm">
  113.                           <span
  114.                             class="avatar-title rounded-circle bg-success text-white font-size-16"
  115.                           >
  116.                             {{ child.firstName|slice(0, 1)
  122.                             }}{{ child.lastName|slice(0, 1) }}
  123.                           </span>
  124.                         </div>
  125.                       </a>
  126.                     </div>
  127.                     {% endfor %}
  128.                   </div>
  129.                 </td>
  130.                 <td>
  131.                   {{ family_member.email }}
  132.                 </td>
  133.                 <td>
  134.                   {{ family_member.phone }}
  135.                   /
  136.                   {{ family_member.mobile }}
  137.                 </td>
  138.                 <td>
  139.                   {{ family_member.job }}
  140.                 </td>
  142.                 <td>
  143.                   <a
  144.                     href="{{
  145.                       path('app_family_member_show', { id: family_member.id })
  146.                     }}"
  147.                     class="btn btn-primary waves-effect waves-light me-2"
  148.                     data-toggle="tooltip"
  149.                     data-placement="top"
  150.                     title="{{ 'Profile' | trans }}"
  151.                   >
  152.                     <i class="bx bx-user font-size-16 align-middle"></i>
  153.                   </a>
  154.                   <a
  155.                     data-action="familymember#edit"
  156.                     data-familymember-id="{{ family_member.id }}"
  157.                     href="javascript:void(0)"
  158.                     class="btn btn-info waves-effect waves-light me-2"
  159.                     data-toggle="tooltip"
  160.                     data-placement="top"
  161.                     title="{{ 'Modifier' | trans }}"
  162.                   >
  163.                     <i class="bx bx-edit font-size-16 align-middle"></i>
  164.                   </a>
  165.                 </td>
  166.               </tr>
  167.               {% endfor %}
  168.             </tbody>
  169.           </table>
  170.         </div>
  171.       </div>
  172.     </div>
  173.   </div>
  174. </div>
  176. {% endblock %}