mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-12 21:34:25 +00:00
Activity: vue DisplayPerson component logic
This commit is contained in:
parent
a19fd51600
commit
622c254cc4
@ -1,29 +1,57 @@
|
||||
<template>
|
||||
|
||||
<teleport to="#add-persons">
|
||||
<add-persons
|
||||
buttonTitle="activities.add_persons"
|
||||
modalTitle="activities.add_persons"
|
||||
v-bind:key="addPersons.key"
|
||||
v-bind:options="addPersons.options"
|
||||
@addNewPersons="addNewPersons"
|
||||
ref="addPersons">
|
||||
</add-persons>
|
||||
</teleport>
|
||||
<teleport to="#add-persons">
|
||||
|
||||
<div class="flex-bloc">
|
||||
<display-persons-bloc
|
||||
v-for="bloc in personsBlocs"
|
||||
v-bind:key="bloc.key"
|
||||
v-bind:bloc="bloc">
|
||||
</display-persons-bloc>
|
||||
</div>
|
||||
|
||||
<add-persons
|
||||
buttonTitle="activity.add_persons"
|
||||
modalTitle="activity.add_persons"
|
||||
v-bind:key="addPersons.key"
|
||||
v-bind:options="addPersons.options"
|
||||
@addNewPersons="addNewPersons"
|
||||
ref="addPersons">
|
||||
</add-persons>
|
||||
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
|
||||
import DisplayPersonsBloc from './components/DisplayPersonsBloc.vue';
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
AddPersons
|
||||
AddPersons,
|
||||
DisplayPersonsBloc
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
personsBlocs: [
|
||||
{
|
||||
key: 'personsAssociated',
|
||||
title: 'activity.bloc_persons',
|
||||
},
|
||||
{
|
||||
key: 'personsNotAssociated',
|
||||
title: 'activity.bloc_persons_not_associated',
|
||||
},
|
||||
{
|
||||
key: 'thirdparty',
|
||||
title: 'activity.bloc_thirdparty',
|
||||
},
|
||||
{
|
||||
key: 'users',
|
||||
title: 'activity.bloc_users',
|
||||
},
|
||||
],
|
||||
addPersons: {
|
||||
key: 'activity',
|
||||
options: {
|
||||
@ -52,5 +80,37 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
div.flex-bloc {
|
||||
margin-top: 1em;
|
||||
div.item-bloc {
|
||||
flex-grow: 0; flex-shrink: 1; flex-basis: 25%;
|
||||
|
||||
margin: 0;
|
||||
border: 1px solid #000;
|
||||
padding: 1em;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
ul.list-content {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
li {
|
||||
a {
|
||||
color: white;
|
||||
&:hover {
|
||||
color: #ffffffab;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
select#chill_activitybundle_activity_persons,
|
||||
select#chill_activitybundle_activity_thirdParties,
|
||||
select#chill_activitybundle_activity_users {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="item-bloc">
|
||||
<div class="item-row">
|
||||
<div class="item-col">
|
||||
<h4>{{ $t(bloc.title) }}</h4>
|
||||
</div>
|
||||
<div class="item-col">
|
||||
<ul class="list-content">
|
||||
<person-badge
|
||||
v-for="person in persons"
|
||||
v-bind:key="person.key"
|
||||
v-bind:person="person"
|
||||
@close="closePerson">
|
||||
</person-badge>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PersonBadge from './PersonBadge.vue';
|
||||
export default {
|
||||
name:"DisplayPersonsBloc",
|
||||
components: {
|
||||
PersonBadge
|
||||
},
|
||||
props: ['bloc'],
|
||||
data() {
|
||||
return {
|
||||
persons: [
|
||||
{ key: 97, name: "Joseph" },
|
||||
{ key: 62, name: "Clelia" },
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
closePerson(item) {
|
||||
console.log('@@ CLICK close person: item', item);
|
||||
//this.$store.dispatch('closePerson', item);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<li>
|
||||
<span class="badge badge-primary">{{ person.name }}
|
||||
<a class="fa fa-times"
|
||||
@click.prevent="$emit('close', person)"></a>
|
||||
</span>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"PersonBadge",
|
||||
props: ['bloc', 'person'],
|
||||
emits: ['close']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
@ -2,8 +2,12 @@ import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n'
|
||||
|
||||
const appMessages = {
|
||||
fr: {
|
||||
activities: {
|
||||
add_persons: "Ajouter des personnes concernées"
|
||||
activity: {
|
||||
add_persons: "Ajouter des personnes concernées",
|
||||
bloc_persons: "Usagers du parcours",
|
||||
bloc_persons_not_associated: "Tiers non-pro.",
|
||||
bloc_thirdparty: "Tiers professionnels",
|
||||
bloc_users: "T(M)S",
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,13 +28,13 @@
|
||||
<h2 class="chill-red">Parties concernées</h2>
|
||||
|
||||
{%- if edit_form.persons is defined -%}
|
||||
{{ form_row(edit_form.persons) }}
|
||||
{{ form_widget(edit_form.persons) }}
|
||||
{% endif %}
|
||||
{%- if edit_form.thirdParties is defined -%}
|
||||
{{ form_row(edit_form.thirdParties) }}
|
||||
{{ form_widget(edit_form.thirdParties) }}
|
||||
{% endif %}
|
||||
{%- if edit_form.users is defined -%}
|
||||
{{ form_row(edit_form.users) }}
|
||||
{{ form_widget(edit_form.users) }}
|
||||
{% endif %}
|
||||
|
||||
<div id="add-persons"></div>
|
||||
|
||||
@ -7,7 +7,6 @@
|
||||
{% block content %}
|
||||
<div id="activity"></div> {# <=== vue component #}
|
||||
{% include 'ChillActivityBundle:Activity:edit.html.twig' %}
|
||||
{{ dump() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
|
||||
@ -29,13 +29,13 @@
|
||||
<h2 class="chill-red">Parties concernées</h2>
|
||||
|
||||
{%- if form.persons is defined -%}
|
||||
{{ form_row(form.persons) }}
|
||||
{{ form_widget(form.persons) }}
|
||||
{% endif %}
|
||||
{%- if form.thirdParties is defined -%}
|
||||
{{ form_row(form.thirdParties) }}
|
||||
{{ form_widget(form.thirdParties) }}
|
||||
{% endif %}
|
||||
{%- if form.users is defined -%}
|
||||
{{ form_row(form.users) }}
|
||||
{{ form_widget(form.users) }}
|
||||
{% endif %}
|
||||
|
||||
<div id="add-persons"></div>
|
||||
|
||||
@ -7,7 +7,6 @@
|
||||
{% block content %}
|
||||
<div id="activity"></div> {# <=== vue component #}
|
||||
{% include 'ChillActivityBundle:Activity:new.html.twig' %}
|
||||
{{ dump() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user