Use json endpoint for showing address with Vuejs Components (WIP)

src/Bundle/ChillMainBundle/Controller/AddressController.php

@@ -7,17 +7,39 @@ use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\HttpFoundation\Exception\BadRequestException;
 use Symfony\Component\Routing\Annotation\Route;
+use Chill\MainBundle\Entity\Address;
 use Chill\MainBundle\Entity\AddressReference;
 
-
 /**
- * Class AccompanyingCourseController
+ * Class AddressController
  *
- * @package Chill\PersonBundle\Controller
+ * @package Chill\MainBundle\Controller
  */
-class AddressReferenceController extends AbstractController
+class AddressController extends AbstractController
 {
 
+
+    /**
+     * Get API Data for showing endpoint
+     *
+     * @Route(
+     *     "/{_locale}/main/api/1.0/address/{address_id}/show.{_format}",
+     *     name="chill_main_address_api_show"
+     * )
+     * @ParamConverter("address", options={"id": "address_id"})
+     */
+    public function showAddress(Address $address, $_format): Response
+    {
+        // TODO check ACL ?
+        switch ($_format) {
+            case 'json':
+                return $this->json($address);
+            default:
+                throw new BadRequestException('Unsupported format');
+        }
+    }
+
+
     /**
      * Get API Data for showing endpoint
      *
@@ -27,17 +49,9 @@ class AddressReferenceController extends AbstractController
      * )
      * @ParamConverter("addressReference", options={"id": "address_reference_id"})
      */
-    public function showAPI(AddressReference $addressReference, $_format): Response
+    public function showAddressReference(AddressReference $addressReference, $_format): Response
     {
-        // TODO check ACL on AccompanyingPeriod
+        // TODO check ACL ?
-
-        $this->dispatcher->dispatch(
-            AccompanyingPeriodPrivacyEvent::ACCOMPANYING_PERIOD_PRIVACY_EVENT,
-            new AccompanyingPeriodPrivacyEvent($addressReference, [
-            'action' => 'showApi'
-            ])
-        );
-
         switch ($_format) {
             case 'json':
                 return $this->json($addressReference);

src/Bundle/ChillPersonBundle/Resources/public/js/Address/App.vue

@@ -0,0 +1,43 @@
+<template>
+   <accompanying-course v-bind:accompanying_course="accompanying_course"/>
+   <!-- <persons-associated v-bind:persons_associated="accompanying_course.persons"/>
+   <requestor v-bind:accompanying_course="accompanying_course"/> -->
+</template>
+
+<script>
+import Address from './components/AccompanyingCourse.vue';
+// import PersonsAssociated from './components/PersonsAssociated.vue';
+// import Requestor from './components/Requestor.vue';
+
+export default {
+   name: 'App',
+   components: {
+      Address
+   },
+   data() {
+      return {
+         accompanying_course: {}
+      };
+   },
+   computed: {
+      addressId() {
+         return window.addressId;
+      }
+   },
+   methods: {
+      async getAddress() {
+         return fetch(`/fr/main/api/1.0/address/${addressId}/show.json`)
+            .then(response => response.json())
+            .then(data => {
+               this.$data.address = data;
+               console.log(data)
+            });
+      }
+   },
+   async mounted() {
+      await this.getAddress();
+   }
+};
+</script>
+
+<style scoped></style>

src/Bundle/ChillPersonBundle/Resources/public/js/Address/components/AccompanyingCourse.vue

@@ -0,0 +1,26 @@
+<template>
+   <div class="vue-component">
+      <h3>Parcours</h3>
+      <dl>
+         <dt>id</dt>
+            <dd>{{ accompanying_course.id }}</dd>
+         <dt>opening_date</dt>
+            <dd>{{ accompanying_course.opening_date }}</dd>
+         <dt>closing_date</dt>
+            <dd>{{ accompanying_course.closing_date }}</dd>
+         <dt>remark</dt>
+            <dd>{{ accompanying_course.remark }}</dd>
+         <dt>closing_motive</dt>
+            <dd>{{ accompanying_course.closing_motive }}</dd>
+      </dl>
+   </div>
+</template>
+
+<script>
+export default {
+   name: 'AccompanyingCourse',
+   props: {
+      accompanying_course: Object
+   }
+}
+</script>

src/Bundle/ChillPersonBundle/Resources/public/js/Address/components/PersonItem.vue

@@ -0,0 +1,25 @@
+<template>
+<tr>
+   <td>{{ person.firstname }}</td>
+   <td>{{ person.lastname }}</td>
+   <td>{{ person.startdate }}</td>
+   <td>{{ person.enddate }}</td>
+   <td>
+      <ul class="record_actions">
+         <li><button class="sc-button bt-show"></button></li>
+         <li><button class="sc-button bt-update"></button></li>
+         <li><button class="sc-button bt-delete" @click.prevent="$emit('remove', person)"></button></li>
+      </ul>
+   </td>
+</tr>
+</template>
+
+<script>
+export default {
+   name: 'PersonItem',
+   props: {
+      person: { type: Object, required: true }
+   },
+   emits: ['remove']
+}
+</script>

src/Bundle/ChillPersonBundle/Resources/public/js/Address/components/PersonsAssociated.vue

@@ -0,0 +1,69 @@
+<template>
+<div class="vue-component">
+   <h3>Usagers concernés</h3>
+    
+   <label>{{ counter }} usagers</label>
+   
+   <table class="rounded"> 
+      <thead>
+         <tr>
+            <th class="chill-orange">firstname</th>
+            <th class="chill-orange">lastname</th>
+            <th class="chill-orange">startdate</th>
+            <th class="chill-orange">enddate</th>
+            <th class="chill-orange">actions</th>
+         </tr>
+      </thead>
+      <tbody> 
+         <person-item 
+            v-for="person in persons_associated" 
+            v-bind:person="person" 
+            v-bind:key="person.id" 
+            @remove="removePerson" />
+      </tbody>
+   </table>
+   
+   <ul class="record_actions">
+      <li><button class="sc-button bt-create" @click="addPerson">Ajouter un usager</button></li>
+   </ul>
+   
+</div>
+</template>
+
+<script>
+import PersonItem from "./PersonItem.vue"
+
+export default {
+   name: 'PersonsAssociated',
+   components: { 
+      PersonItem 
+   },
+   props: { 
+      persons_associated: Array 
+   },
+   data() {
+      return {
+         persons: this.persons_associated
+      }
+   },
+   computed: {
+      async counter() {
+         // Pourquoi je peux pas compter un tableau avec length ???!!!
+         return this.persons_associated.length //     <= boum !
+      }
+   },
+   methods: {
+      addPerson() {
+         this.persons_associated.push({
+            "firstname": "Lisa",
+            "lastname": "Simpson",
+            "startdate": "1975-09-15",
+            "enddate": "2021-04-20"
+         })
+      },
+      removePerson(item) {
+         this.persons_associated = this.persons_associated.filter(person => person !== item)
+      }
+   }
+}
+</script>

src/Bundle/ChillPersonBundle/Resources/public/js/Address/components/Requestor.vue

@@ -0,0 +1,16 @@
+<template>
+   <div class="vue-component">
+      <h3>Demandeur</h3>
+      {{ accompanying_course.id }}
+      {{ accompanying_course.remark }}
+   </div>
+</template>
+
+<script>
+export default {
+   name: 'Requestor',
+   props: {
+      accompanying_course: Object
+   }
+}
+</script>

src/Bundle/ChillPersonBundle/Resources/public/js/Address/index.js

@@ -0,0 +1,8 @@
+import App from './App.vue';
+import { createApp } from 'vue';
+
+const app = createApp({
+   template: `<app></app>`
+})
+.component('app', App)
+.mount('#address');

src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig

@@ -61,11 +61,26 @@
                     </ul>
                 </td>
             </tr>
+
+
+            <div id="address"></div>
+
+            {{ encore_entry_script_tags('address') }}
+
+            <script type="text/javascript">
+                window.addressId = {{ address.id|e('js') }};
+            </script>
+
             {% endfor %}
             {% endif %}
         </tbody>
     </table>
 
+
+
+
+
+
         <ul class="record_actions">
             <li class="cancel">
                 <a href="{{ path('chill_person_view', { 'person_id' : person.id } ) }}" class="sc-button bt-cancel">
@@ -73,6 +88,7 @@
                     </a>
             </li>
             <li>
+
                 <a href="{{ path('chill_person_address_new', { 'person_id' : person.id } ) }}" class="sc-button bt-create">
                         {{ 'Add an address'|trans }}
                     </a>

src/Bundle/ChillPersonBundle/chill.webpack.config.js

@@ -9,4 +9,6 @@ module.exports = function(encore, entries)
     });
 
     encore.addEntry('accompanying_course', __dirname + '/Resources/public/js/AccompanyingCourse/index.js');
+    encore.addEntry('address', __dirname + '/Resources/public/js/Address/index.js');
+
 };