mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
Use json endpoint for showing address with Vuejs Components (WIP)
This commit is contained in:
nobohan
parent
1587c762f8
commit
ce859697b5
@ -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
|
||||
|
||||
$this->dispatcher->dispatch(
|
||||
AccompanyingPeriodPrivacyEvent::ACCOMPANYING_PERIOD_PRIVACY_EVENT,
|
||||
new AccompanyingPeriodPrivacyEvent($addressReference, [
|
||||
'action' => 'showApi'
|
||||
])
|
||||
);
|
||||
|
||||
// TODO check ACL ?
|
||||
switch ($_format) {
|
||||
case 'json':
|
||||
return $this->json($addressReference);
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -0,0 +1,8 @@
|
||||
import App from './App.vue';
|
||||
import { createApp } from 'vue';
|
||||
|
||||
const app = createApp({
|
||||
template: `<app></app>`
|
||||
})
|
||||
.component('app', App)
|
||||
.mount('#address');
|
||||
@ -23,9 +23,9 @@
|
||||
{% block title %}{{ 'Addresses\'history for %name%'|trans({ '%name%': person.firstName ~ ' ' ~ person.lastName } ) }}{% endblock %}
|
||||
|
||||
{% block personcontent %}
|
||||
|
||||
|
||||
<h1>{{ 'Addresses\'history for %name%'|trans({ '%name%': person.firstName ~ ' ' ~ person.lastName } ) }}</h1>
|
||||
|
||||
|
||||
<table class="records_list">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -48,11 +48,11 @@
|
||||
{% for address in person.addresses %}
|
||||
<tr>
|
||||
<td><strong>{{ 'Since %date%'|trans( { '%date%' : address.validFrom|format_date('long') } ) }}</strong></td>
|
||||
|
||||
|
||||
<td>
|
||||
{{ address_macros._render(address, { 'with_valid_from' : false, 'has_no_address': true } ) }}
|
||||
</td>
|
||||
|
||||
|
||||
<td>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
@ -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,10 +88,11 @@
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<a href="{{ path('chill_person_address_new', { 'person_id' : person.id } ) }}" class="sc-button bt-create">
|
||||
{{ 'Add an address'|trans }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{% endblock personcontent %}
|
||||
|
||||
{% endblock personcontent %}
|
||||
|
||||
@ -7,6 +7,8 @@ module.exports = function(encore, entries)
|
||||
encore.addAliases({
|
||||
ChillPersonAssets: __dirname + '/Resources/public'
|
||||
});
|
||||
|
||||
|
||||
encore.addEntry('accompanying_course', __dirname + '/Resources/public/js/AccompanyingCourse/index.js');
|
||||
encore.addEntry('address', __dirname + '/Resources/public/js/Address/index.js');
|
||||
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user