templates/employee/show.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}{{ title }}{% endblock %}
  3. {% set SalaryTypeHOURLY = enum('\\App\\Enum\\EmployeeHistory\\SalaryType::HOURLY') %}
  4. {% block body %}
  5.     <div class="card mb-5 mb-xl-10">
  6.         <div class="card-body pt-9 pb-0">
  7.             <!--begin::Details-->
  8.             <div class="d-flex flex-wrap flex-sm-nowrap mb-3">
  9.                 <!--begin: Pic-->
  10.                 <div class="me-7 mb-4">
  11.                     <div class="symbol symbol-100px symbol-lg-160px symbol-fixed position-relative">
  12.                         <img src="{{ employee | avatar }}" alt="image"/>
  13.                         <div class="position-absolute translate-middle bottom-0 start-100 mb-6 bg-{% if employee.activeEmployee %}success{% else %}danger{% endif %} rounded-circle border border-4 border-white h-20px w-20px"></div>
  14.                     </div>
  15.                 </div>
  16.                 <!--end::Pic-->
  17.                 <!--begin::Info-->
  18.                 <div class="flex-grow-1">
  19.                     <!--begin::Title-->
  20.                     <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
  21.                         <!--begin::User-->
  22.                         <div class="d-flex flex-column">
  23.                             <!--begin::Name-->
  24.                             <div class="d-flex align-items-center mb-2">
  25.                                 <a href="#"
  26.                                    class="text-gray-900 text-hover-primary fs-2 fw-bolder me-1">{{ employee.fullName }}</a>
  27.                                 <span class="btn btn-sm btn-light-{% if employee.activeEmployee %}success{% else %}danger{% endif %} fw-bolder ms-2 fs-8 py-1 px-3">{% if employee.activeEmployee %}Active{% else %}Inactive{% endif %}</span>
  28.                             </div>
  29.                             <!--end::Name-->
  30.                             {% if employee.hasHistory %}
  31.                                 <!--begin::Info-->
  32.                                 <div class="d-flex flex-wrap fw-bold fs-6 mb-4 pe-2">
  33.                                     <div class="col min-w-125px me-7">
  34.                                         <div class="text-gray-600 mt-5">Département</div>
  35.                                         <div class="fw-bolder">{{ employee.lastHistoryOrNull.department.name }}</div>
  36.                                         <div class="text-gray-600 mt-5">Poste</div>
  37.                                         <div class="fw-bolder">{{ employee.lastHistoryOrNull.position.name }}</div>
  38.                                     </div>
  39.                                     <div class="col min-w-125px me-7">
  40.                                         <div class="text-gray-600 mt-5">Date de Début</div>
  41.                                         <div class="fw-bolder">{{ employee.lastHistoryOrNull.startDate.format('d/m/Y') }}</div>
  42.                                         <div class="text-gray-600 mt-5">Date de fin</div>
  43.                                         <div class="fw-bolder">{% if employee.lastHistoryOrNull.endDate is not null %}{{ employee.lastHistoryOrNull.endDate.format('d/m/Y') }}{% else %}-{% endif %}</div>
  44.                                     </div>
  45.                                     <div class="col min-w-125px me-7">
  46.                                         <div class="text-gray-600 mt-5">Type de Salaire</div>
  47.                                         <div class="fw-bolder">{{ employee.lastHistoryOrNull.salaryType.title }}</div>
  48.                                         <div class="text-gray-600 mt-5">Montant</div>
  49.                                         {% if is_granted('ROLE_ADMIN') or employee.lastHistoryOrNull.salaryType == SalaryTypeHOURLY %}
  50.                                             <div class="fw-bolder">{{ employee.lastHistoryOrNull.price }}</div>
  51.                                         {% else %}
  52.                                             <div class="fw-bolder">******</div>
  53.                                         {% endif %}
  54.                                     </div>
  55.                                 </div>
  56.                                 <!--end::Info-->
  57.                             {% endif %}
  58.                         </div>
  59.                         <!--end::User-->
  60.                         <!--begin::Actions-->
  61.                         <!--end::Actions-->
  62.                     </div>
  63.                     <!--end::Title-->
  64.                     <!--begin::Stats-->
  65.                     <!--end::Stats-->
  66.                 </div>
  67.                 <!--end::Info-->
  68.             </div>
  69.             <!--end::Details-->
  70.             <!--begin::Navs-->
  71.             <ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder">
  72.                 <li class="nav-item mt-2">
  73.                     <a class="nav-link text-active-primary ms-0 me-10 py-5 active" data-bs-toggle="tab"
  74.                        href="#overview_tab">Tableau de bord</a>
  75.                 </li>
  76.                 <li class="nav-item mt-2">
  77.                     <a class="nav-link text-active-primary ms-0 me-10 py-5" data-bs-toggle="tab" href="#history_tab">Historique</a>
  78.                 </li>
  79.                 <li class="nav-item mt-2">
  80.                     <a class="nav-link text-active-primary ms-0 me-10 py-5" data-bs-toggle="tab" href="#log_hour_tab">Pointages</a>
  81.                 </li>
  82.             </ul>
  83.             <!--begin::Navs-->
  84.         </div>
  85.     </div>
  86.     <!--begin:::Tab content-->
  87.     <div class="tab-content" id="myTabContent">
  88.         <!--begin:::Tab pane-->
  89.         <div class="tab-pane fade show active" id="overview_tab" role="tabpanel">
  90.             <!--begin::Card-->
  91.             <div class="card card-flush mb-6 mb-xl-9">
  92.                 <!--begin::Card header-->
  93.                 <div class="card-header cursor-pointer">
  94.                     <!--begin::Card title-->
  95.                     <div class="card-title m-0">
  96.                         <h3 class="fw-bolder m-0">Détails</h3>
  97.                     </div>
  98.                     <!--end::Card title-->
  99.                     <!--begin::Action-->
  100.                     <a href="{{ path('employee_edit', {'id': employee.id}) }}"
  101.                        class="btn btn-primary align-self-center">Editer</a>
  102.                     <!--end::Action-->
  103.                 </div>
  104.                 <!--begin::Card header-->
  105.                 <!--begin::Card body-->
  106.                 <div class="card-body p-9">
  107.                     {% include 'employee/_employee_fields.html.twig' with{employee: employee, form: form, readonly: true} %}
  108.                 </div>
  109.                 <!--end::Card body-->
  110.             </div>
  111.             <!--end::Card-->
  112.         </div>
  113.         <!--end:::Tab pane-->
  114.         <!--begin:::Tab pane-->
  115.         <div class="tab-pane fade show" id="history_tab" role="tabpanel">
  116.             <!--begin::Card-->
  117.             <div class="card pt-4 mb-6 mb-xl-9">
  118.                 <!--begin::Card header-->
  119.                 <div class="card-header border-0">
  120.                     <!--begin::Card title-->
  121.                     <div class="card-title">
  122.                         <h2>Périodes de travail</h2>
  123.                     </div>
  124.                     <!--end::Card title-->
  125.                     {% if employee.activeEmployee %}
  126.                         <div class="notice d-flex bg-light-primary rounded border-primary border border-dashed rounded-3 p-6">
  127.                             <div class="d-flex flex-stack flex-grow-1">
  128.                                 <div class="fw-semibold">
  129.                                     <h4 class="text-gray-900 fw-bold">Notice</h4>
  130.                                     <div class="fs-6 text-gray-700">Afin d'ajouter une période il faut clôturer la
  131.                                         dernière période travaillé
  132.                                     </div>
  133.                                 </div>
  134.                             </div>
  135.                         </div>
  136.                     {% else %}
  137.                         <!--begin::Card toolbar-->
  138.                         <div class="card-toolbar">
  139.                             <!--begin::Filter-->
  140.                             <a href="{{ path('employee_history_new', {'employee_id': employee.id}) }}" type="button"
  141.                                class="btn btn-sm btn-flex btn-light-primary">
  142.                                 <!--begin::Svg Icon | path: icons/duotune/general/gen035.svg-->
  143.                                 <span class="svg-icon svg-icon-3">
  144.                                                                 <svg xmlns="http://www.w3.org/2000/svg" width="24"
  145.                                                                      height="24" viewBox="0 0 24 24" fill="none">
  146.                                                                     <rect opacity="0.3" x="2" y="2" width="20"
  147.                                                                           height="20" rx="5" fill="black"/>
  148.                                                                     <rect x="10.8891" y="17.8033" width="12" height="2"
  149.                                                                           rx="1" transform="rotate(-90 10.8891 17.8033)"
  150.                                                                           fill="black"/>
  151.                                                                     <rect x="6.01041" y="10.9247" width="12" height="2"
  152.                                                                           rx="1" fill="black"/>
  153.                                                                 </svg>
  154.                                                             </span>
  155.                                 <!--end::Svg Icon-->Ajouter
  156.                             </a>
  157.                             <!--end::Filter-->
  158.                         </div>
  159.                         <!--end::Card toolbar-->
  160.                     {% endif %}
  161.                 </div>
  162.                 <!--end::Card header-->
  163.                 <!--begin::Card body-->
  164.                 <div class="card-body pt-0 pb-5">
  165.                     <table class="table align-middle table-row-dashed gy-5" id="kt_table_employee_history">
  166.                         <thead class="border-bottom border-gray-200 fs-7 fw-bolder">
  167.                         <tr class="text-start text-muted text-uppercase gs-0">
  168.                             <th class="min-w-100px">Département</th>
  169.                             <th class="min-w-100px">Poste</th>
  170.                             <th class="min-w-100px">Date de départ</th>
  171.                             <th class="min-w-100px">Date de fin</th>
  172.                             <th class="min-w-100px">Type de salaire</th>
  173.                             <th>Montant</th>
  174.                             <th class="min-w-100px">Commentaire</th>
  175.                             <th>#</th>
  176.                         </tr>
  177.                         </thead>
  178.                         <tbody class="fs-6 fw-bold text-gray-600">
  179.                         {% for employeeHistory in employee.employeeHistories %}
  180.                             <tr {% if loop.last %}class="table-active" {% endif %}>
  181.                                 <td>{{ employeeHistory.department.name }}</td>
  182.                                 <td>{{ employeeHistory.position.name }}</td>
  183.                                 <td>{{ employeeHistory.startDate.format('d/m/Y') }}</td>
  184.                                 <td>{% if employeeHistory.endDate is not null %}{{ employeeHistory.endDate.format('d/m/Y') }}{% endif %}</td>
  185.                                 <td>{{ employeeHistory.salaryType.title }}</td>
  186.                                 {% if is_granted('ROLE_ADMIN') or employeeHistory.salaryType == SalaryTypeHOURLY %}
  187.                                     <td>{{ employeeHistory.price }}</td>
  188.                                 {% else %}
  189.                                     <td>******</td>
  190.                                 {% endif %}
  191.                                 <td>{{ employeeHistory.reason }}</td>
  192.                                 <td>
  193.                                     {% if employeeHistory is same as employee.lastHistoryOrNull %}
  194.                                         <a href="{{ path('employee_history_edit', {'id': employeeHistory.id}) }}">Editer</a>
  195.                                     {% endif %}
  196.                                 </td>
  197.                             </tr>
  198.                         {% endfor %}
  199.                         </tbody>
  200.                     </table>
  201.                 </div>
  202.                 <!--end::Card body-->
  203.             </div>
  204.             <!--end::Card-->
  205.         </div>
  206.         <!--end:::Tab pane-->
  207.         <!--begin:::Tab pane-->
  208.         <div class="tab-pane fade show" id="log_hour_tab" role="tabpanel">
  209.             <!--begin::Card-->
  210.             <div class="card pt-4 mb-6 mb-xl-9">
  211.                 <!--begin::Card header-->
  212.                 <div class="card-header border-0">
  213.                     <!--begin::Card title-->
  214.                     <div class="card-title">
  215.                         <h2>Pointages</h2>
  216.                     </div>
  217.                     <!--end::Card title-->
  218.                 </div>
  219.                 <!--end::Card header-->
  220.                 <!--begin::Card body-->
  221.                 <div class="card-body pt-0 pb-5">
  222.                     <table class="table align-middle table-row-dashed gy-5" id="kt_table_employee_log_hour">
  223.                         <thead class="border-bottom border-gray-200 fs-7 fw-bolder">
  224.                         <tr class="text-start text-muted text-uppercase gs-0">
  225.                             <th class="min-w-100px">Date</th>
  226.                             <th class="min-w-100px">Type</th>
  227.                             <th class="min-w-100px">Heure</th>
  228.                         </tr>
  229.                         </thead>
  230.                         <tbody class="fs-6 fw-bold text-gray-600">
  231.                         {% for log_hour in employee.employeeHourLogs %}
  232.                             <tr>
  233.                                 {#                                <td>{{ log_hour.date | format_datetime('full', 'none', locale='fr') }}</td> #}
  234.                                 <td>{{ log_hour.date.format('d/m/Y') }}</td>
  235.                                 <td>{{ log_hour.inOut.title }}</td>
  236.                                 <td>{{ log_hour.date.format('H:i') }}</td>
  237.                             </tr>
  238.                         {% endfor %}
  239.                         </tbody>
  240.                     </table>
  241.                 </div>
  242.                 <!--end::Card body-->
  243.             </div>
  244.             <!--end::Card-->
  245.         </div>
  246.         <!--end:::Tab pane-->
  247.     </div>
  248.     <!--end:::Tab content-->
  249. {% endblock %}
  250. {% block javascripts %}
  251.     <script src="//cdn.datatables.net/plug-ins/1.10.11/sorting/date-eu.js"></script>
  252.     <script>
  253.         var groupColumn = 0;
  254.         var table = $("#kt_table_employee_log_hour").DataTable({
  255.             columnDefs: [
  256.                 {
  257.                     targets: groupColumn,
  258.                     visible: false,
  259.                     type: "date-eu"
  260.                 },
  261.                 {
  262.                     targets: [0, 1, 2],
  263.                     orderable: false
  264.                 }
  265.             ],
  266.             order: [
  267.                 [
  268.                     groupColumn, "DESC"
  269.                 ]
  270.             ],
  271.             displayLength: 500,
  272.             drawCallback: function (settings) {
  273.                 var api = this.api();
  274.                 var rows = api.rows({
  275.                     page: "current"
  276.                 }).nodes();
  277.                 var last = null;
  278.                 api.column(groupColumn, {
  279.                     page: "current"
  280.                 }).data().each(function (group, i) {
  281.                     if (last !== group) {
  282.                         $(rows).eq(i).before(
  283.                             "<tr class=\"group fs-5 fw-bolder\"><td colspan=\"5\">" + group + "</td></tr>"
  284.                         );
  285.                         last = group;
  286.                     }
  287.                 });
  288.             }
  289.         });
  290.         $("#kt_table_employee_log_hour tbody").on("click", "tr.group", function () {
  291.             var currentOrder = table.order()[0];
  292.             if (currentOrder[0] === groupColumn && currentOrder[1] === "asc") {
  293.                 table.order([groupColumn, "desc"]).draw();
  294.             } else {
  295.                 table.order([groupColumn, "asc"]).draw();
  296.             }
  297.         });
  298.     </script>
  299. {% endblock %}