Affichage de la page Groupe/ajaxDisplay

app/config/config.yml

@@ -90,6 +90,9 @@ fos_js_routing:
     routes_to_expose:
         - api_legume_*
         - api_offre_*
+        - api_groupe_*
+        - api_lettre_*
+        - api_info_*
         - potage_offre_legumes_ajax_display
 
 # VichUploaderBundle Configuration

src/APIBundle/Controller/GroupeAPIController.php

@@ -44,6 +44,23 @@ class GroupeAPIController extends MasterAPIController
     }
     
     
+    /**
+     * @param $id
+     * @return \Symfony\Component\HttpFoundation\JsonResponse
+     * @throws \Doctrine\ORM\NonUniqueResultException
+     */
+    public function readOneAction($id)
+    {
+        $em = $this->getDoctrine()->getManager();
+        $groupe = $em->getRepository('PotageBundle:Groupe')->findOneForAPIRead($id);
+        if ($groupe === null)
+        {
+            return $this->api('Not found', Response::HTTP_NOT_FOUND);
+        }
+        return $this->api($groupe);
+    }
+    
+    
     /**
      * @param Request $request
      * @param $id

src/APIBundle/Resources/config/routing.yml

@@ -240,6 +240,14 @@ api_groupe_read:
         _controller: APIBundle:GroupeAPI:read
     methods: [ GET ]
 
+api_groupe_read_one:
+    path:   /groupe/{id}
+    requirements:
+        id: \d+
+    defaults:
+        _controller: APIBundle:GroupeAPI:readOne
+    methods: [ GET ]
+
 api_groupe_update:
     path:   /groupe/{id}
     requirements:

src/PotageBundle/Repository/GroupeRepository.php

@@ -17,11 +17,25 @@ class GroupeRepository extends \Doctrine\ORM\EntityRepository
     public function findAllForAPIRead()
     {
         $qb = $this->createQueryBuilder('g')
-            ->orderBy('g.nom, ASC');
+            ->orderBy('g.nom', 'ASC');
         return $qb->getQuery()->getResult();
     }
     
     
+    /**
+     * @param $id
+     * @return mixed
+     * @throws \Doctrine\ORM\NonUniqueResultException
+     */
+    public function findOneForAPIRead($id)
+    {
+        $qb = $this->createQueryBuilder('g')
+            ->where('g.id = :id')
+            ->setParameter(':id', $id);
+        return $qb->getQuery()->getOneOrNullResult();
+    }
+    
+    
     /**
      * @param $id
      * @return mixed

src/PotageBundle/Resources/views/Groupe/ajaxDisplay.html.twig

@@ -11,31 +11,217 @@
 {% endblock %}
 
 {% block headerContent %}
+    {% include '@Potage/Groupe/ajaxForm.html.twig' %}
 {% endblock %}
 
 {% block sidebarContent %}
 <div class="row">
     <aside class="col-3">
-
+        <div class="card text-white bg-dark" id="card-button-ajouter">
+            <div class="card-header">
+                <a href="javascript: void(0);" class="btn btn-dark btn-block btn-create"
+                   data-toggle="modal" data-target=".form-groupe-modal">
+                    <i class="fas fa-plus"></i>
+                    Créer une nouveau groupe
+                </a>
+            </div>
+        </div>
     </aside>
 {% endblock %}
 
 {% block sectionContent %}
     <section class="col-9">
-    {% include '@Potage/Groupe/ajaxForm.html.twig' %}
 
+        <div class="row">
+            <div class="col left hd-1">
+                <h1>{{ block('title') }}</h1>
+
+            </div>
+            <div class="col right hd-1">
+                <div style="margin-top: 0.65em;">
+                    {##}
+                    <a href="javascript: void(0);" class="btn btn-outline-dark mb-2 btn-sm btn-reload">
+                        <i class="fas fa-sync-alt"></i>
+                        Rafraîchir la liste
+                    </a>
+                </div>
+            </div>
+        </div>
+        <table id="maintab" class="table groupes table-striped">
+            <thead>
+                <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">Nom</th>
+                    <th scope="col">Description</th>
+                    <th scope="col">Dépôt</th>
+                    <th scope="col">Action</th>
+                </tr>
+            </thead>
+            <tbody>
+            </tbody>
+        </table>
 
     </section>
 </div>
 {% endblock %}
 
 {% block customJS %}
-    <script type="text/javascript" src="{{ asset('js/functions.js') }}"></script>
-    <script type="text/javascript" src="{{ asset('js/ajax_functions.js') }}"></script>
-    <script type="text/javascript">
+<script type="text/javascript" src="{{ asset('js/functions.js') }}"></script>
+<script type="text/javascript" src="{{ asset('js/ajax_functions.js') }}"></script>
+<script type="text/javascript">
+
+
+    /*
+    *   Recharge la table Groupe
+    */
+    function reloadTableGroupe()
+    {
+        tbody.innerHTML = null;
+
+        let groupeURL = Routing.generate('api_groupe_read');
+
+        AJAX('GET', groupeURL, function(request)
+        {
+            let json = JSON.parse(request.responseText);
+            for(let i = 0; i < json.length; i++ )
+            {
+                let tr = buildRowGroupe(json[i]);
+                tbody.appendChild(tr);
+            }
+        });
+    }
+
+
+    /*
+    *   Construit une rangée du tableau des groupes
+    */
+    function buildRowGroupe(jsonRow)
+    {
+        //console.log(jsonRow);
+
+        let tr = document.createElement('tr');
+
+        let td1 = document.createElement('td');
+        td1.textContent = jsonRow.id;
+        tr.appendChild(td1);
+
+        let td2 = document.createElement('td');
+        td2.textContent = jsonRow.nom;
+        tr.appendChild(td2);
+
+        let td3 = document.createElement('td');
+        td3.textContent = jsonRow.description;
+        tr.appendChild(td3);
+
+        let td4 = document.createElement('td');
+        td4.textContent = jsonRow.depot;
+        tr.appendChild(td4);
+
+        let td5 = document.createElement('td');
+        td5.appendChild(displayEditGroupe(jsonRow));
+        td5.appendChild(displayDeleteGroupe(jsonRow));
+        tr.appendChild(td5);
+
+        return tr;
+    }
+
+
+    /*
+    *   Affiche un bouton pour éditer une rangée
+    *   @param json object jsonRow
+    */
+    function displayEditGroupe(jsonRow)
+    {
+        let editBtn = buildEditBtn();
+        editBtn.dataset.target = ".form-groupe-modal";
+        editBtn.dataset.groupeId = jsonRow.id;
+        editBtn.addEventListener('click', function()
+        {
+            let groupeId = this.dataset.groupeId;
+            submitURL = Routing.generate('api_groupe_update', {'id': groupeId});
+            AJAX('GET', submitURL, function(request)
+            {
+                let json = JSON.parse(request.responseText);
+                titleForm.textContent = 'Groupe # ' + groupeId;
+                form.querySelector('#groupe_nom').value = json.nom;
+                form.querySelector('#groupe_description').value = json.description;
+                form.querySelector('#groupe_depot').value = json.depot;
+            });
+        });
+        return editBtn;
+    }
+
+
+    /*
+    *   Affiche un bouton pour supprimer une rangée
+    *   @param json object jsonRow
+    */
+    function displayDeleteGroupe(jsonRow)
+    {
+        let deleteBtn = buildDeleteBtn();
+        deleteBtn.dataset.groupeId = jsonRow.id;
+        deleteBtn.addEventListener('click', function()
+        {
+            let groupeId = this.dataset.groupeId;
+            let r = confirm('Effacer le groupe n°' + groupeId
+                + '\nCette action n\'est pas réversible. Souhaitez-vous continuer ?\n');
+            if (r === true) {
+                submitURL = Routing.generate('api_groupe_delete', {'id': groupeId});
+                AJAX('DELETE', submitURL, function()
+                {
+                    reloadTableGroupe();
+                });
+            }
+        });
+        return deleteBtn;
+    }
+
+
+    /*
+    *   =================================
+    *   Initialise l'affichage de la page
+    *   =================================
+    */
+
+    let submitURL = null;
+
+    let table = document.querySelector('table#maintab.groupes');
+    let tbody = table.querySelector('tbody');
+
+    reloadTableGroupe();
+
+    reloadButton(function() {
+        reloadTableGroupe();
+    });
+
+    let form = document.querySelector('form[name=groupe]');
+    let titleForm = document.querySelector('#form-groupe');
+
+    createButton(function() {
+        titleForm.textContent = 'Nouveau groupe';
+        form.querySelector('#groupe_nom').value = null;
+        form.querySelector('#groupe_description').value = null;
+        form.querySelector('#groupe_depot').value = null;
+        submitURL = Routing.generate('api_groupe_create');
+    });
+
 
+    /*
+    *   Soumission du formulaire
+    */
+    form.addEventListener('submit', function(e)
+    {
+        let form = this;
+        e.preventDefault();
+        AJAX('POST', submitURL, function()
+        {
+            reloadTableGroupe();
+            $('.form-groupe-modal').modal('hide'); // en jquery
+        },
+        form);
+    });
 
-    </script>
+</script>
 {% endblock %}
 
 {#

src/PotageBundle/Resources/views/Groupe/ajaxForm.html.twig

-{{ form(formGroupe) }}
\ No newline at end of file
+<div class="modal fade form-groupe-modal" tabindex="-1" role="dialog" aria-labelledby="FormGroupeModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+
+            <div class="modal-header">
+                <h2 class="modal-title" id="form-groupe"></h2>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+
+            {{ form_start(formGroupe) }}
+            <div class="modal-body">
+
+                {{ form_errors(formGroupe) }}
+
+                <div class="form-group row">
+                    <div class="col-sm-4">
+                        {{ form_label(formGroupe.nom) }}
+                    </div>
+                    <div class="col-sm-8">
+                        {{ form_widget(formGroupe.nom) }}
+                        {{ form_errors(formGroupe.nom) }}
+                    </div>
+                </div>
+
+                <div class="form-group row">
+                    <div class="col-sm-4">
+                        {{ form_label(formGroupe.description) }}
+                    </div>
+                    <div class="col-sm-8">
+                        {{ form_widget(formGroupe.description) }}
+                        {{ form_errors(formGroupe.description) }}
+                    </div>
+                </div>
+
+                <div class="form-group row">
+                    <div class="col-sm-4">
+                        {{ form_label(formGroupe.depot) }}
+                    </div>
+                    <div class="col-sm-8">
+                        {{ form_widget(formGroupe.depot) }}
+                        {{ form_errors(formGroupe.depot) }}
+                    </div>
+                </div>
+
+
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-outline-secondary mb-2" data-dismiss="modal">Fermer</button>
+                {{ form_label(formGroupe.sauver) }}
+                {{ form_widget(formGroupe.sauver) }}
+            </div>
+
+            {{ form_rest(formGroupe) }}
+            {{ form_end(formGroupe) }}
+
+        </div>
+    </div>
+</div>
+
+

web/js/ajax_functions.js

@@ -156,7 +156,7 @@ function removePagination()
 }
 
 /*
-*   Interrupteur de tri par colonne
+*   Bascule le tri d'une colonne
 */
 function sortToggleByColumn(paginate, callback)
 {