mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-20 22:53:49 +00:00
Merge conflicts fixed
This commit is contained in:
@@ -98,6 +98,8 @@
|
||||
v-bind:defaultz="this.defaultz"
|
||||
v-bind:entity="this.entity"
|
||||
v-bind:flag="this.flag"
|
||||
v-bind:errors="this.errors"
|
||||
v-bind:checkErrors="this.checkErrors"
|
||||
@getCities="getCities"
|
||||
@getReferenceAddresses="getReferenceAddresses">
|
||||
</edit-pane>
|
||||
@@ -123,6 +125,8 @@
|
||||
v-bind:defaultz="this.defaultz"
|
||||
v-bind:entity="this.entity"
|
||||
v-bind:flag="this.flag"
|
||||
v-bind:errors="this.errors"
|
||||
v-bind:checkErrors="this.checkErrors"
|
||||
v-bind:insideModal="false"
|
||||
@getCities="getCities"
|
||||
@getReferenceAddresses="getReferenceAddresses">
|
||||
@@ -256,8 +260,10 @@ export default {
|
||||
editPane: false,
|
||||
datePane: false,
|
||||
loading: false,
|
||||
success: false
|
||||
success: false,
|
||||
dirty: false
|
||||
},
|
||||
errors: [],
|
||||
defaultz: {
|
||||
button: {
|
||||
text: { create: 'add_an_address_title', edit: 'edit_address' },
|
||||
@@ -529,6 +535,23 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
checkErrors() {
|
||||
this.errors = [];
|
||||
if (this.flag.dirty) {
|
||||
if (this.entity.selected.country === null) {
|
||||
this.errors.push("Un pays doit être sélectionné.");
|
||||
}
|
||||
if (Object.keys(this.entity.selected.city).length === 0) {
|
||||
this.errors.push("Une ville doit être sélectionnée.");
|
||||
}
|
||||
if (!this.entity.selected.isNoAddress) {
|
||||
if (this.entity.selected.address.street === null || this.entity.selected.address.streetNumber === null) {
|
||||
this.errors.push("Une adresse doit être sélectionnée.");
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* Make form ready for new changes
|
||||
*/
|
||||
@@ -539,6 +562,7 @@ export default {
|
||||
this.entity.loaded.cities = [];
|
||||
this.entity.loaded.countries = [];
|
||||
|
||||
this.entity.selected.confidential = this.context.edit ? this.entity.address.confidential : false;
|
||||
this.entity.selected.isNoAddress = (this.context.edit && this.entity.address.text === '') ? true : false;
|
||||
|
||||
this.entity.selected.country = this.context.edit ? this.entity.address.country : {};
|
||||
@@ -570,6 +594,7 @@ export default {
|
||||
{
|
||||
console.log('apply changes');
|
||||
let newAddress = {
|
||||
'confidential': this.entity.selected.confidential,
|
||||
'isNoAddress': this.entity.selected.isNoAddress,
|
||||
'street': this.entity.selected.isNoAddress ? '' : this.entity.selected.address.street,
|
||||
'streetNumber': this.entity.selected.isNoAddress ? '' : this.entity.selected.address.streetNumber,
|
||||
|
||||
@@ -6,7 +6,6 @@
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="floor"
|
||||
maxlength=16
|
||||
:placeholder="$t('floor')"
|
||||
v-model="floor"/>
|
||||
<label for="floor">{{ $t('floor') }}</label>
|
||||
@@ -15,7 +14,6 @@
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="corridor"
|
||||
maxlength=16
|
||||
:placeholder="$t('corridor')"
|
||||
v-model="corridor"/>
|
||||
<label for="corridor">{{ $t('corridor') }}</label>
|
||||
@@ -24,7 +22,6 @@
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="steps"
|
||||
maxlength=16
|
||||
:placeholder="$t('steps')"
|
||||
v-model="steps"/>
|
||||
<label for="steps">{{ $t('steps') }}</label>
|
||||
@@ -33,7 +30,6 @@
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
name="flat"
|
||||
maxlength=16
|
||||
:placeholder="$t('flat')"
|
||||
v-model="flat"/>
|
||||
<label for="flat">{{ $t('flat') }}</label>
|
||||
|
||||
@@ -10,8 +10,10 @@
|
||||
:deselect-label="$t('create_address')"
|
||||
:selected-label="$t('multiselect.selected_label')"
|
||||
@search-change="listenInputSearch"
|
||||
:internal-search="false"
|
||||
ref="addressSelector"
|
||||
@select="selectAddress"
|
||||
@remove="remove"
|
||||
name="field"
|
||||
track-by="id"
|
||||
label="value"
|
||||
@@ -56,7 +58,7 @@ import { searchReferenceAddresses, fetchReferenceAddresses } from '../../api.js'
|
||||
export default {
|
||||
name: 'AddressSelection',
|
||||
components: { VueMultiselect },
|
||||
props: ['entity', 'context', 'updateMapCenter'],
|
||||
props: ['entity', 'context', 'updateMapCenter', 'flag', 'checkErrors'],
|
||||
data() {
|
||||
return {
|
||||
value: this.context.edit ? this.entity.address.addressReference : null,
|
||||
@@ -109,6 +111,13 @@ export default {
|
||||
this.entity.selected.address.streetNumber = value.streetNumber;
|
||||
this.entity.selected.writeNew.address = false;
|
||||
this.updateMapCenter(value.point);
|
||||
this.flag.dirty = true;
|
||||
this.checkErrors();
|
||||
},
|
||||
remove() {
|
||||
this.flag.dirty = true;
|
||||
this.entity.selected.address = {};
|
||||
this.checkErrors();
|
||||
},
|
||||
listenInputSearch(query) {
|
||||
//console.log('listenInputSearch', query, this.isAddressSelectorOpen);
|
||||
@@ -149,6 +158,8 @@ export default {
|
||||
this.entity.selected.address.street = addr.street;
|
||||
this.entity.selected.address.streetNumber = addr.number;
|
||||
this.entity.selected.writeNew.address = true;
|
||||
this.flag.dirty = true;
|
||||
this.checkErrors();
|
||||
}
|
||||
},
|
||||
splitAddress(address) {
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
@search-change="listenInputSearch"
|
||||
ref="citySelector"
|
||||
@select="selectCity"
|
||||
@remove="remove"
|
||||
name="field"
|
||||
track-by="id"
|
||||
label="value"
|
||||
@@ -17,6 +18,7 @@
|
||||
:selected-label="$t('multiselect.selected_label')"
|
||||
:taggable="true"
|
||||
:multiple="false"
|
||||
:internal-search="false"
|
||||
@tag="addPostcode"
|
||||
:tagPlaceholder="$t('create_postal_code')"
|
||||
:loading="isLoading"
|
||||
@@ -55,12 +57,12 @@ import { searchCities, fetchCities } from '../../api.js';
|
||||
export default {
|
||||
name: 'CitySelection',
|
||||
components: { VueMultiselect },
|
||||
props: ['entity', 'context', 'focusOnAddress', 'updateMapCenter'],
|
||||
props: ['entity', 'context', 'focusOnAddress', 'updateMapCenter', 'flag', 'checkErrors'],
|
||||
emits: ['getReferenceAddresses'],
|
||||
data() {
|
||||
return {
|
||||
value: this.context.edit ? this.entity.address.postcode : null,
|
||||
isLoading: false
|
||||
isLoading: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -123,6 +125,13 @@ export default {
|
||||
if (value.center) {
|
||||
this.updateMapCenter(value.center);
|
||||
}
|
||||
this.flag.dirty = true;
|
||||
this.checkErrors();
|
||||
},
|
||||
remove() {
|
||||
this.flag.dirty = true;
|
||||
this.entity.selected.city = {};
|
||||
this.checkErrors();
|
||||
},
|
||||
listenInputSearch(query) {
|
||||
if (query.length > 2) {
|
||||
|
||||
@@ -12,7 +12,9 @@
|
||||
:select-label="$t('multiselect.select_label')"
|
||||
:deselect-label="$t('multiselect.deselect_label')"
|
||||
:selected-label="$t('multiselect.selected_label')"
|
||||
@select="selectCountry">
|
||||
@select="selectCountry"
|
||||
@remove="remove"
|
||||
>
|
||||
</VueMultiselect>
|
||||
</div>
|
||||
</template>
|
||||
@@ -23,7 +25,7 @@ import VueMultiselect from 'vue-multiselect';
|
||||
export default {
|
||||
name: 'CountrySelection',
|
||||
components: { VueMultiselect },
|
||||
props: ['context', 'entity'],
|
||||
props: ['context', 'entity', 'flag', 'checkErrors'],
|
||||
emits: ['getCities'],
|
||||
data() {
|
||||
return {
|
||||
@@ -34,14 +36,13 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
sortedCountries() {
|
||||
//console.log('sorted countries');
|
||||
const countries = this.entity.loaded.countries;
|
||||
let sortedCountries = [];
|
||||
sortedCountries.push(...countries.filter(c => c.countryCode === 'FR'))
|
||||
sortedCountries.push(...countries.filter(c => c.countryCode === 'BE'))
|
||||
sortedCountries.push(...countries.filter(c => c.countryCode !== 'FR').filter(c => c.countryCode !== 'BE'))
|
||||
return sortedCountries;
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
@@ -50,6 +51,7 @@ export default {
|
||||
init() {
|
||||
if (this.value !== undefined) {
|
||||
this.selectCountry(this.value);
|
||||
this.flag.dirty = false;
|
||||
}
|
||||
},
|
||||
selectCountryByCode(countryCode) {
|
||||
@@ -62,7 +64,13 @@ export default {
|
||||
//console.log('select country', value);
|
||||
this.entity.selected.country = value;
|
||||
this.$emit('getCities', value);
|
||||
}
|
||||
this.checkErrors();
|
||||
},
|
||||
remove() {
|
||||
this.flag.dirty = true;
|
||||
this.entity.selected.country = null;
|
||||
this.checkErrors();
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
@@ -7,16 +7,32 @@
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
|
||||
<div v-if="errors.length" class="alert alert-warning" >
|
||||
<ul>
|
||||
<li v-for="(e, i) in errors" :key="i">{{ e }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h4 class="h3">{{ $t('select_an_address_title') }}</h4>
|
||||
<div class="row my-3">
|
||||
<div class="col-lg-6">
|
||||
|
||||
<div class="form-check">
|
||||
<input type="checkbox"
|
||||
class="form-check-input"
|
||||
id="isConfidential"
|
||||
v-model="isConfidential"
|
||||
:value="valueConfidential" />
|
||||
<label class="form-check-label" for="isConfidential">
|
||||
{{ $t('isConfidential') }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input type="checkbox"
|
||||
class="form-check-input"
|
||||
id="isNoAddress"
|
||||
v-model="isNoAddress"
|
||||
v-bind:value="value" />
|
||||
:value="value" />
|
||||
<label class="form-check-label" for="isNoAddress">
|
||||
{{ $t('isNoAddress') }}
|
||||
</label>
|
||||
@@ -25,6 +41,8 @@
|
||||
<country-selection
|
||||
v-bind:context="context"
|
||||
v-bind:entity="entity"
|
||||
v-bind:flag="flag"
|
||||
v-bind:checkErrors="checkErrors"
|
||||
@getCities="$emit('getCities', selected.country)">
|
||||
</country-selection>
|
||||
|
||||
@@ -33,13 +51,17 @@
|
||||
v-bind:context="context"
|
||||
v-bind:focusOnAddress="focusOnAddress"
|
||||
v-bind:updateMapCenter="updateMapCenter"
|
||||
v-bind:flag="flag"
|
||||
v-bind:checkErrors="checkErrors"
|
||||
@getReferenceAddresses="$emit('getReferenceAddresses', selected.city)">
|
||||
</city-selection>
|
||||
|
||||
<address-selection v-if="!isNoAddress"
|
||||
v-bind:entity="entity"
|
||||
v-bind:context="context"
|
||||
v-bind:updateMapCenter="updateMapCenter">
|
||||
v-bind:updateMapCenter="updateMapCenter"
|
||||
v-bind:flag="flag"
|
||||
v-bind:checkErrors="checkErrors">
|
||||
</address-selection>
|
||||
|
||||
</div>
|
||||
@@ -99,12 +121,15 @@ export default {
|
||||
'flag',
|
||||
'entity',
|
||||
'errorMsg',
|
||||
'insideModal'
|
||||
'insideModal',
|
||||
'errors',
|
||||
'checkErrors',
|
||||
],
|
||||
emits: ['getCities', 'getReferenceAddresses'],
|
||||
data() {
|
||||
return {
|
||||
value: false
|
||||
value: false,
|
||||
valueConfidential: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -120,6 +145,14 @@ export default {
|
||||
addressMap() {
|
||||
return this.entity.addressMap;
|
||||
},
|
||||
isConfidential: {
|
||||
set(value) {
|
||||
this.entity.selected.confidential = value;
|
||||
},
|
||||
get() {
|
||||
return this.entity.selected.confidential;
|
||||
}
|
||||
},
|
||||
isNoAddress: {
|
||||
set(value) {
|
||||
console.log('isNoAddress value', value);
|
||||
@@ -128,7 +161,7 @@ export default {
|
||||
get() {
|
||||
return this.entity.selected.isNoAddress;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
focusOnAddress() {
|
||||
|
||||
@@ -18,6 +18,7 @@ const addressMessages = {
|
||||
other_address: 'Autre adresse',
|
||||
create_address: 'Adresse inconnue. Cliquez ici pour créer une nouvelle adresse',
|
||||
isNoAddress: 'Pas d\'adresse complète',
|
||||
isConfidential: 'Adresse confidentielle',
|
||||
street: 'Nom de rue',
|
||||
streetNumber: 'Numéro',
|
||||
floor: 'Étage',
|
||||
|
||||
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
|
||||
<h2>{{ $t('main_title') }}</h2>
|
||||
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"
|
||||
:class="{'active': activeTab === 'MyCustoms'}"
|
||||
@click="selectTab('MyCustoms')">
|
||||
<i class="fa fa-dashboard"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"
|
||||
:class="{'active': activeTab === 'MyNotifications'}"
|
||||
@click="selectTab('MyNotifications')">
|
||||
{{ $t('my_notifications.tab') }}
|
||||
<tab-counter :count="state.notifications.count"></tab-counter>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"
|
||||
:class="{'active': activeTab === 'MyAccompanyingCourses'}"
|
||||
@click="selectTab('MyAccompanyingCourses')">
|
||||
{{ $t('my_accompanying_courses.tab') }}
|
||||
<tab-counter :count="state.accompanyingCourses.count"></tab-counter>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"
|
||||
:class="{'active': activeTab === 'MyWorks'}"
|
||||
@click="selectTab('MyWorks')">
|
||||
{{ $t('my_works.tab') }}
|
||||
<tab-counter :count="state.works.count"></tab-counter>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"
|
||||
:class="{'active': activeTab === 'MyEvaluations'}"
|
||||
@click="selectTab('MyEvaluations')">
|
||||
{{ $t('my_evaluations.tab') }}
|
||||
<tab-counter :count="state.evaluations.count"></tab-counter>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"
|
||||
:class="{'active': activeTab === 'MyTasks'}"
|
||||
@click="selectTab('MyTasks')">
|
||||
{{ $t('my_tasks.tab') }}
|
||||
<tab-counter :count="state.tasks.warning.count"></tab-counter>
|
||||
<tab-counter :count="state.tasks.alert.count"></tab-counter>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item loading ms-auto py-2" v-if="loading">
|
||||
<i class="fa fa-circle-o-notch fa-spin fa-lg text-chill-gray" :title="$t('loading')"></i>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="my-4">
|
||||
<my-customs
|
||||
v-if="activeTab === 'MyCustoms'">
|
||||
</my-customs>
|
||||
<my-works
|
||||
v-else-if="activeTab === 'MyWorks'">
|
||||
</my-works>
|
||||
<my-evaluations
|
||||
v-else-if="activeTab === 'MyEvaluations'">
|
||||
</my-evaluations>
|
||||
<my-tasks
|
||||
v-else-if="activeTab === 'MyTasks'">
|
||||
</my-tasks>
|
||||
<my-accompanying-courses
|
||||
v-else-if="activeTab === 'MyAccompanyingCourses'">
|
||||
</my-accompanying-courses>
|
||||
<my-notifications
|
||||
v-else-if="activeTab === 'MyNotifications'">
|
||||
</my-notifications>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyCustoms from './MyCustoms';
|
||||
import MyWorks from './MyWorks';
|
||||
import MyEvaluations from './MyEvaluations';
|
||||
import MyTasks from './MyTasks';
|
||||
import MyAccompanyingCourses from './MyAccompanyingCourses';
|
||||
import MyNotifications from './MyNotifications';
|
||||
import TabCounter from './TabCounter';
|
||||
import { mapState } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
MyCustoms,
|
||||
MyWorks,
|
||||
MyEvaluations,
|
||||
MyTasks,
|
||||
MyAccompanyingCourses,
|
||||
MyNotifications,
|
||||
TabCounter,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'MyCustoms'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState([
|
||||
'loading',
|
||||
]),
|
||||
// just to see all in devtool :
|
||||
...mapState({
|
||||
state: (state) => state,
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
selectTab(tab) {
|
||||
this.$store.dispatch('getByTab', { tab: tab });
|
||||
this.activeTab = tab;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
for (const m of [
|
||||
'MyNotifications',
|
||||
'MyAccompanyingCourses',
|
||||
'MyWorks',
|
||||
'MyEvaluations',
|
||||
'MyTasks',
|
||||
]) {
|
||||
this.$store.dispatch('getByTab', { tab: m, param: "countOnly=1" });
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
a.nav-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div class="alert alert-light">{{ $t('my_accompanying_courses.description') }}</div>
|
||||
<span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
|
||||
<tab-table v-else>
|
||||
<template v-slot:thead>
|
||||
<th scope="col">{{ $t('opening_date') }}</th>
|
||||
<th scope="col">{{ $t('social_issues') }}</th>
|
||||
<th scope="col">{{ $t('concerned_persons') }}</th>
|
||||
<th scope="col"></th>
|
||||
<th scope="col"></th>
|
||||
</template>
|
||||
<template v-slot:tbody>
|
||||
<tr v-for="(c, i) in accompanyingCourses.results" :key="`course-${i}`">
|
||||
<td>{{ $d(c.openingDate.datetime, 'short') }}</td>
|
||||
<td>
|
||||
<span v-for="i in c.socialIssues"
|
||||
class="chill-entity entity-social-issue">
|
||||
<span class="badge bg-chill-l-gray text-dark">
|
||||
{{ i.title.fr }}
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-for="p in c.participations" class="me-1" :key="p.person.id">
|
||||
<on-the-fly
|
||||
:type="p.person.type"
|
||||
:id="p.person.id"
|
||||
:buttonText="p.person.textAge"
|
||||
:displayBadge="'true' === 'true'"
|
||||
action="show">
|
||||
</on-the-fly>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="c.emergency" class="badge rounded-pill bg-danger">{{ $t('emergency') }}</span>
|
||||
<span v-if="c.confidential" class="badge rounded-pill bg-danger">{{ $t('confidential') }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<a class="btn btn-sm btn-show" :href="getUrl(c)">
|
||||
{{ $t('show_entity', { entity: $t('the_course') }) }}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tab-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from "vuex";
|
||||
import TabTable from "./TabTable";
|
||||
import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly';
|
||||
|
||||
export default {
|
||||
name: "MyAccompanyingCourses",
|
||||
components: {
|
||||
TabTable,
|
||||
OnTheFly,
|
||||
},
|
||||
computed: {
|
||||
...mapState([
|
||||
'accompanyingCourses',
|
||||
]),
|
||||
...mapGetters([
|
||||
'isAccompanyingCoursesLoaded',
|
||||
]),
|
||||
noResults() {
|
||||
if (!this.isAccompanyingCoursesLoaded) {
|
||||
return false;
|
||||
} else {
|
||||
return this.accompanyingCourses.count === 0;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getUrl(c) {
|
||||
return `/fr/parcours/${c.id}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<span v-if="noResults" class="chill-no-data-statement">{{ $t('no_dashboard') }}</span>
|
||||
<div v-else id="dashboards" class="row g-3" data-masonry='{"percentPosition": true }'>
|
||||
|
||||
<div class="mbloc col col-sm-6 col-lg-4">
|
||||
<div class="custom1">
|
||||
<ul class="list-unstyled">
|
||||
<li v-if="counter.notifications > 0">
|
||||
<i18n-t keypath="counter.unread_notifications" tag="span" :class="counterClass" :plural="counter.notifications">
|
||||
<template v-slot:n><span>{{ counter.notifications }}</span></template>
|
||||
</i18n-t>
|
||||
</li>
|
||||
<li v-if="counter.accompanyingCourses > 0">
|
||||
<i18n-t keypath="counter.assignated_courses" tag="span" :class="counterClass" :plural="counter.accompanyingCourses">
|
||||
<template v-slot:n><span>{{ counter.accompanyingCourses }}</span></template>
|
||||
</i18n-t>
|
||||
</li>
|
||||
<li v-if="counter.works > 0">
|
||||
<i18n-t keypath="counter.assignated_actions" tag="span" :class="counterClass" :plural="counter.works">
|
||||
<template v-slot:n><span>{{ counter.works }}</span></template>
|
||||
</i18n-t>
|
||||
</li>
|
||||
<li v-if="counter.evaluations > 0">
|
||||
<i18n-t keypath="counter.assignated_evaluations" tag="span" :class="counterClass" :plural="counter.evaluations">
|
||||
<template v-slot:n><span>{{ counter.evaluations }}</span></template>
|
||||
</i18n-t>
|
||||
</li>
|
||||
<li v-if="counter.tasksAlert > 0">
|
||||
<i18n-t keypath="counter.alert_tasks" tag="span" :class="counterClass" :plural="counter.tasksAlert">
|
||||
<template v-slot:n><span>{{ counter.tasksAlert }}</span></template>
|
||||
</i18n-t>
|
||||
</li>
|
||||
<li v-if="counter.tasksWarning > 0">
|
||||
<i18n-t keypath="counter.warning_tasks" tag="span" :class="counterClass" :plural="counter.tasksWarning">
|
||||
<template v-slot:n><span>{{ counter.tasksWarning }}</span></template>
|
||||
</i18n-t>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div class="mbloc col col-sm-6 col-lg-4">
|
||||
<div class="custom2">
|
||||
Mon dashboard personnalisé
|
||||
</div>
|
||||
</div>
|
||||
<div class="mbloc col col-sm-6 col-lg-4">
|
||||
<div class="custom3">
|
||||
Mon dashboard personnalisé
|
||||
</div>
|
||||
</div>
|
||||
<div class="mbloc col col-sm-6 col-lg-4">
|
||||
<div class="custom4">
|
||||
Mon dashboard personnalisé
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import Masonry from 'masonry-layout/masonry';
|
||||
|
||||
export default {
|
||||
name: "MyCustoms",
|
||||
data() {
|
||||
return {
|
||||
counterClass: {
|
||||
counter: true //hack to pass class 'counter' in i18n-t
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['counter']),
|
||||
noResults() {
|
||||
return false
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const elem = document.querySelector('#dashboards');
|
||||
const masonry = new Masonry(elem, {});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
div.custom4,
|
||||
div.custom3,
|
||||
div.custom2 {
|
||||
font-style: italic;
|
||||
color: var(--bs-chill-gray);
|
||||
}
|
||||
span.counter {
|
||||
& > span {
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="accompanying_course_work">
|
||||
<div class="alert alert-light">{{ $t('my_evaluations.description') }}</div>
|
||||
<span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
|
||||
<tab-table v-else>
|
||||
<template v-slot:thead>
|
||||
<th scope="col">{{ $t('max_date') }}</th>
|
||||
<th scope="col">{{ $t('evaluation') }}</th>
|
||||
<th scope="col">{{ $t('SocialAction') }}</th>
|
||||
<th scope="col"></th>
|
||||
</template>
|
||||
<template v-slot:tbody>
|
||||
<tr v-for="(e, i) in evaluations.results" :key="`evaluation-${i}`">
|
||||
<td>{{ $d(e.maxDate.datetime, 'short') }}</td>
|
||||
<td>
|
||||
{{ e.evaluation.title.fr }}
|
||||
</td>
|
||||
<td>
|
||||
<span class="chill-entity entity-social-issue">
|
||||
<span class="badge bg-chill-l-gray text-dark">
|
||||
{{ e.accompanyingPeriodWork.socialAction.issue.text }}
|
||||
</span>
|
||||
</span>
|
||||
<h4 class="badge-title">
|
||||
<span class="title_label"></span>
|
||||
<span class="title_action">
|
||||
{{ e.accompanyingPeriodWork.socialAction.text }}
|
||||
</span>
|
||||
</h4>
|
||||
<span v-for="person in e.accompanyingPeriodWork.persons" class="me-1" :key="person.id">
|
||||
<on-the-fly
|
||||
:type="person.type"
|
||||
:id="person.id"
|
||||
:buttonText="person.textAge"
|
||||
:displayBadge="'true' === 'true'"
|
||||
action="show">
|
||||
</on-the-fly>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-group-vertical" role="group" aria-label="Actions">
|
||||
<a class="btn btn-sm btn-show" :href="getUrl(e)">
|
||||
{{ $t('show_entity', { entity: $t('the_evaluation') }) }}
|
||||
</a>
|
||||
<a class="btn btn-sm btn-update" :href="getUrl(e.accompanyingPeriodWork)">
|
||||
{{ $t('show_entity', { entity: $t('the_action') }) }}
|
||||
</a>
|
||||
<a class="btn btn-sm btn-show" :href="getUrl(e.accompanyingPeriodWork.accompanyingPeriod)">
|
||||
{{ $t('show_entity', { entity: $t('the_course') }) }}
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tab-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from "vuex";
|
||||
import TabTable from "./TabTable";
|
||||
import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly';
|
||||
|
||||
export default {
|
||||
name: "MyEvaluations",
|
||||
components: {
|
||||
TabTable,
|
||||
OnTheFly,
|
||||
},
|
||||
computed: {
|
||||
...mapState([
|
||||
'evaluations',
|
||||
]),
|
||||
...mapGetters([
|
||||
'isEvaluationsLoaded',
|
||||
]),
|
||||
noResults() {
|
||||
if (!this.isEvaluationsLoaded) {
|
||||
return false;
|
||||
} else {
|
||||
return this.evaluations.count === 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUrl(e) {
|
||||
switch (e.type) {
|
||||
case 'accompanying_period_work_evaluation':
|
||||
let anchor = '#evaluations';
|
||||
return `/fr/person/accompanying-period/work/${e.accompanyingPeriodWork.id}/edit${anchor}`;
|
||||
case 'accompanying_period_work':
|
||||
return `/fr/person/accompanying-period/work/${e.id}/edit`
|
||||
case 'accompanying_period':
|
||||
return `/fr/parcours/${e.id}`
|
||||
default:
|
||||
throw 'entity type unknown';
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div class="alert alert-light">{{ $t('my_notifications.description') }}</div>
|
||||
<span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
|
||||
<tab-table v-else>
|
||||
<template v-slot:thead>
|
||||
<th scope="col">{{ $t('Date') }}</th>
|
||||
<th scope="col">{{ $t('Subject') }}</th>
|
||||
<th scope="col">{{ $t('From') }}</th>
|
||||
<th scope="col"></th>
|
||||
</template>
|
||||
<template v-slot:tbody>
|
||||
<tr v-for="(n, i) in notifications.results" :key="`notify-${i}`">
|
||||
<td>{{ $d(n.date.datetime, 'long') }}</td>
|
||||
<td>
|
||||
<span class="unread">
|
||||
<i class="fa fa-envelope-o"></i>
|
||||
<a :href="getNotificationUrl(n)">{{ n.title }}</a>
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ n.sender.text }}</td>
|
||||
<td>
|
||||
<a class="btn btn-sm btn-show"
|
||||
:href="getEntityUrl(n)">
|
||||
{{ $t('show_entity', { entity: getEntityName(n) }) }}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tab-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from "vuex";
|
||||
import TabTable from "./TabTable";
|
||||
import { appMessages } from 'ChillMainAssets/vuejs/HomepageWidget/js/i18n';
|
||||
|
||||
|
||||
export default {
|
||||
name: "MyNotifications",
|
||||
components: {
|
||||
TabTable
|
||||
},
|
||||
computed: {
|
||||
...mapState([
|
||||
'notifications',
|
||||
]),
|
||||
...mapGetters([
|
||||
'isNotificationsLoaded',
|
||||
]),
|
||||
noResults() {
|
||||
if (!this.isNotificationsLoaded) {
|
||||
return false;
|
||||
} else {
|
||||
return this.notifications.count === 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getNotificationUrl(n) {
|
||||
return `/fr/notification/${n.id}/show`
|
||||
},
|
||||
getEntityName(n) {
|
||||
switch (n.relatedEntityClass) {
|
||||
case 'Chill\\ActivityBundle\\Entity\\Activity':
|
||||
return appMessages.fr.the_activity;
|
||||
case 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod':
|
||||
return appMessages.fr.the_course;
|
||||
default:
|
||||
throw 'notification type unknown';
|
||||
}
|
||||
},
|
||||
getEntityUrl(n) {
|
||||
switch (n.relatedEntityClass) {
|
||||
case 'Chill\\ActivityBundle\\Entity\\Activity':
|
||||
return `/fr/activity/${n.relatedEntityId}/show`
|
||||
case 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod':
|
||||
return `/fr/parcours/${n.relatedEntityId}`
|
||||
default:
|
||||
throw 'notification type unknown';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
span.unread {
|
||||
font-weight: bold;
|
||||
i {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
a {
|
||||
text-decoration: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
|
||||
<div class="alert alert-light">{{ $t('my_tasks.description_warning') }}</div>
|
||||
<span v-if="noResultsAlert" class="chill-no-data-statement">{{ $t('no_data') }}</span>
|
||||
<tab-table v-else>
|
||||
<template v-slot:thead>
|
||||
<th scope="col">{{ $t('warning_date') }}</th>
|
||||
<th scope="col">{{ $t('max_date') }}</th>
|
||||
<th scope="col">{{ $t('task') }}</th>
|
||||
<th scope="col"></th>
|
||||
</template>
|
||||
<template v-slot:tbody>
|
||||
<tr v-for="(t, i) in tasks.alert.results" :key="`task-alert-${i}`">
|
||||
<td>{{ $d(t.warningDate.datetime, 'short') }}</td>
|
||||
<td>
|
||||
<span class="outdated">{{ $d(t.endDate.datetime, 'short') }}</span>
|
||||
</td>
|
||||
<td>{{ t.title }}</td>
|
||||
<td>
|
||||
<a class="btn btn-sm btn-show" :href="getUrl(t)">
|
||||
{{ $t('show_entity', { entity: $t('the_task') }) }}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tab-table>
|
||||
|
||||
<div class="alert alert-light">{{ $t('my_tasks.description_alert') }}</div>
|
||||
<span v-if="noResultsWarning" class="chill-no-data-statement">{{ $t('no_data') }}</span>
|
||||
<tab-table v-else>
|
||||
<template v-slot:thead>
|
||||
<th scope="col">{{ $t('warning_date') }}</th>
|
||||
<th scope="col">{{ $t('max_date') }}</th>
|
||||
<th scope="col">{{ $t('task') }}</th>
|
||||
<th scope="col"></th>
|
||||
</template>
|
||||
<template v-slot:tbody>
|
||||
<tr v-for="(t, i) in tasks.warning.results" :key="`task-warning-${i}`">
|
||||
<td>
|
||||
<span class="outdated">{{ $d(t.warningDate.datetime, 'short') }}</span>
|
||||
</td>
|
||||
<td>{{ $d(t.endDate.datetime, 'short') }}</td>
|
||||
<td>{{ t.title }}</td>
|
||||
<td>
|
||||
<a class="btn btn-sm btn-show" :href="getUrl(t)">
|
||||
{{ $t('show_entity', { entity: $t('the_task') }) }}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tab-table>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from "vuex";
|
||||
import TabTable from "./TabTable";
|
||||
|
||||
export default {
|
||||
name: "MyTasks",
|
||||
components: {
|
||||
TabTable
|
||||
},
|
||||
computed: {
|
||||
...mapState([
|
||||
'tasks',
|
||||
]),
|
||||
...mapGetters([
|
||||
'isTasksWarningLoaded',
|
||||
'isTasksAlertLoaded',
|
||||
]),
|
||||
noResultsAlert() {
|
||||
if (!this.isTasksAlertLoaded) {
|
||||
return false;
|
||||
} else {
|
||||
return this.tasks.alert.count === 0;
|
||||
}
|
||||
},
|
||||
noResultsWarning() {
|
||||
if (!this.isTasksWarningLoaded) {
|
||||
return false;
|
||||
} else {
|
||||
return this.tasks.warning.count === 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUrl(t) {
|
||||
return `/fr/task/single-task/${t.id}/show`
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
span.outdated {
|
||||
font-weight: bold;
|
||||
color: var(--bs-warning);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div class="accompanying_course_work">
|
||||
<div class="alert alert-light">{{ $t('my_works.description') }}</div>
|
||||
<span v-if="noResults" class="chill-no-data-statement">{{ $t('no_data') }}</span>
|
||||
<tab-table v-else>
|
||||
<template v-slot:thead>
|
||||
<th scope="col">{{ $t('StartDate') }}</th>
|
||||
<th scope="col">{{ $t('SocialAction') }}</th>
|
||||
<th scope="col">{{ $t('concerned_persons') }}</th>
|
||||
<th scope="col"></th>
|
||||
</template>
|
||||
<template v-slot:tbody>
|
||||
<tr v-for="(w, i) in works.results" :key="`works-${i}`">
|
||||
<td>{{ $d(w.startDate.datetime, 'short') }}</td>
|
||||
<td>
|
||||
<span class="chill-entity entity-social-issue">
|
||||
<span class="badge bg-chill-l-gray text-dark">
|
||||
{{ w.socialAction.issue.text }}
|
||||
</span>
|
||||
</span>
|
||||
<h4 class="badge-title">
|
||||
<span class="title_label"></span>
|
||||
<span class="title_action">
|
||||
{{ w.socialAction.text }}
|
||||
</span>
|
||||
</h4>
|
||||
</td>
|
||||
<td>
|
||||
<span v-for="person in w.persons" class="me-1" :key="person.id">
|
||||
<on-the-fly
|
||||
:type="person.type"
|
||||
:id="person.id"
|
||||
:buttonText="person.textAge"
|
||||
:displayBadge="'true' === 'true'"
|
||||
action="show">
|
||||
</on-the-fly>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-group-vertical" role="group" aria-label="Actions">
|
||||
<a class="btn btn-sm btn-update" :href="getUrl(w)">
|
||||
{{ $t('show_entity', { entity: $t('the_action') }) }}
|
||||
</a>
|
||||
<a class="btn btn-sm btn-show" :href="getUrl(w.accompanyingPeriod)">
|
||||
{{ $t('show_entity', { entity: $t('the_course') }) }}
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tab-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from "vuex";
|
||||
import TabTable from "./TabTable";
|
||||
import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly';
|
||||
|
||||
export default {
|
||||
name: "MyWorks",
|
||||
components: {
|
||||
TabTable,
|
||||
OnTheFly,
|
||||
},
|
||||
computed: {
|
||||
...mapState([
|
||||
'works',
|
||||
]),
|
||||
...mapGetters([
|
||||
'isWorksLoaded',
|
||||
]),
|
||||
noResults() {
|
||||
if (!this.isWorksLoaded) {
|
||||
return false;
|
||||
} else {
|
||||
return this.works.count === 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUrl(e) {
|
||||
switch (e.type) {
|
||||
case 'accompanying_period_work':
|
||||
return `/fr/person/accompanying-period/work/${e.id}/edit`
|
||||
case 'accompanying_period':
|
||||
return `/fr/parcours/${e.id}`
|
||||
default:
|
||||
throw 'entity type unknown';
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<span v-if="isCounterAvailable"
|
||||
class="badge rounded-pill bg-danger">
|
||||
{{ count }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TabCounter",
|
||||
props: ['count'],
|
||||
computed: {
|
||||
isCounterAvailable() {
|
||||
return (typeof this.count !== 'undefined' && this.count > 0 )
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<slot name="thead"></slot>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<slot name="tbody"></slot>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TabTable",
|
||||
props: []
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,61 @@
|
||||
const appMessages = {
|
||||
fr: {
|
||||
main_title: "Vue d'ensemble",
|
||||
my_works: {
|
||||
tab: "Mes actions",
|
||||
description: "Liste des actions d'accompagnement dont je suis référent et qui arrivent à échéance.",
|
||||
},
|
||||
my_evaluations: {
|
||||
tab: "Mes évaluations",
|
||||
description: "Liste des évaluations dont je suis référent et qui arrivent à échéance.",
|
||||
},
|
||||
my_tasks: {
|
||||
tab: "Mes tâches",
|
||||
description_alert: "Liste des tâches auxquelles je suis assigné et dont la date de rappel est dépassée.",
|
||||
description_warning: "Liste des tâches auxquelles je suis assigné et dont la date d'échéance est dépassée.",
|
||||
},
|
||||
my_accompanying_courses: {
|
||||
tab: "Mes parcours",
|
||||
description: "Liste des parcours d'accompagnement que l'on vient de m'attribuer.",
|
||||
},
|
||||
my_notifications: {
|
||||
tab: "Mes notifications",
|
||||
description: "Liste des notifications reçues et non lues.",
|
||||
},
|
||||
opening_date: "Date d'ouverture",
|
||||
social_issues: "Problématiques sociales",
|
||||
concerned_persons: "Usagers concernés",
|
||||
max_date: "Date d'échéance",
|
||||
warning_date: "Date de rappel",
|
||||
evaluation: "Évaluation",
|
||||
task: "Tâche",
|
||||
Date: "Date",
|
||||
From: "Expéditeur",
|
||||
Subject: "Objet",
|
||||
Entity: "Associé à",
|
||||
show_entity: "Voir {entity}",
|
||||
the_activity: "l'échange",
|
||||
the_course: "le parcours",
|
||||
the_action: "l'action",
|
||||
the_evaluation: "l'évaluation",
|
||||
the_task: "la tâche",
|
||||
StartDate: "Date d'ouverture",
|
||||
SocialAction: "Action d'accompagnement",
|
||||
no_data: "Aucun résultats",
|
||||
no_dashboard: "Pas de tableaux de bord",
|
||||
counter: {
|
||||
unread_notifications: "{n} notification non lue | {n} notifications non lues",
|
||||
assignated_courses: "{n} parcours récent assigné | {n} parcours récents assignés",
|
||||
assignated_actions: "{n} action assignée | {n} actions assignées",
|
||||
assignated_evaluations: "{n} évaluation assignée | {n} évaluations assignées",
|
||||
alert_tasks: "{n} tâche en rappel | {n} tâches en rappel",
|
||||
warning_tasks: "{n} tâche à échéance | {n} tâches à échéance",
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Object.assign(appMessages.fr);
|
||||
|
||||
export {
|
||||
appMessages
|
||||
};
|
||||
@@ -0,0 +1,200 @@
|
||||
import 'es6-promise/auto';
|
||||
import { createStore } from 'vuex';
|
||||
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
|
||||
import MyCustoms from "../MyCustoms";
|
||||
import MyWorks from "../MyWorks";
|
||||
import MyEvaluations from "../MyEvaluations";
|
||||
import MyTasks from "../MyTasks";
|
||||
import MyAccompanyingCourses from "../MyAccompanyingCourses";
|
||||
import MyNotifications from "../MyNotifications";
|
||||
|
||||
const debug = process.env.NODE_ENV !== 'production';
|
||||
|
||||
const isEmpty = (obj) => {
|
||||
return obj
|
||||
&& Object.keys(obj).length <= 1
|
||||
&& Object.getPrototypeOf(obj) === Object.prototype;
|
||||
};
|
||||
|
||||
const store = createStore({
|
||||
strict: debug,
|
||||
state: {
|
||||
works: {},
|
||||
evaluations: {},
|
||||
tasks: {
|
||||
warning: {},
|
||||
alert: {}
|
||||
},
|
||||
accompanyingCourses: {},
|
||||
notifications: {},
|
||||
errorMsg: [],
|
||||
loading: false
|
||||
},
|
||||
getters: {
|
||||
isWorksLoaded(state) {
|
||||
return !isEmpty(state.works);
|
||||
},
|
||||
isEvaluationsLoaded(state) {
|
||||
return !isEmpty(state.evaluations);
|
||||
},
|
||||
isTasksWarningLoaded(state) {
|
||||
return !isEmpty(state.tasks.warning);
|
||||
},
|
||||
isTasksAlertLoaded(state) {
|
||||
return !isEmpty(state.tasks.alert);
|
||||
},
|
||||
isAccompanyingCoursesLoaded(state) {
|
||||
return !isEmpty(state.accompanyingCourses);
|
||||
},
|
||||
isNotificationsLoaded(state) {
|
||||
return !isEmpty(state.notifications);
|
||||
},
|
||||
counter(state) {
|
||||
return {
|
||||
works: state.works.count,
|
||||
evaluations: state.evaluations.count,
|
||||
tasksWarning: state.tasks.warning.count,
|
||||
tasksAlert: state.tasks.alert.count,
|
||||
accompanyingCourses: state.accompanyingCourses.count,
|
||||
notifications: state.notifications.count,
|
||||
}
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
addWorks(state, works) {
|
||||
//console.log('addWorks', works);
|
||||
state.works = works;
|
||||
},
|
||||
addEvaluations(state, evaluations) {
|
||||
//console.log('addEvaluations', evaluations);
|
||||
state.evaluations = evaluations;
|
||||
},
|
||||
addTasksWarning(state, tasks) {
|
||||
//console.log('addTasksWarning', tasks);
|
||||
state.tasks.warning = tasks;
|
||||
},
|
||||
addTasksAlert(state, tasks) {
|
||||
//console.log('addTasksAlert', tasks);
|
||||
state.tasks.alert = tasks;
|
||||
},
|
||||
addCourses(state, courses) {
|
||||
//console.log('addCourses', courses);
|
||||
state.accompanyingCourses = courses;
|
||||
},
|
||||
addNotifications(state, notifications) {
|
||||
//console.log('addNotifications', notifications);
|
||||
state.notifications = notifications;
|
||||
},
|
||||
setLoading(state, bool) {
|
||||
state.loading = bool;
|
||||
},
|
||||
catchError(state, error) {
|
||||
state.errorMsg.push(error);
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
getByTab({ commit, getters }, { tab, param }) {
|
||||
switch (tab) {
|
||||
case 'MyCustoms':
|
||||
break;
|
||||
case 'MyWorks':
|
||||
if (!getters.isWorksLoaded) {
|
||||
commit('setLoading', true);
|
||||
const url = `/api/1.0/person/accompanying-period/work/my-near-end${'?'+ param}`;
|
||||
makeFetch('GET', url)
|
||||
.then((response) => {
|
||||
commit('addWorks', response);
|
||||
commit('setLoading', false);
|
||||
})
|
||||
.catch((error) => {
|
||||
commit('catchError', error);
|
||||
throw error;
|
||||
})
|
||||
;
|
||||
}
|
||||
break;
|
||||
case 'MyEvaluations':
|
||||
if (!getters.isEvaluationsLoaded) {
|
||||
commit('setLoading', true);
|
||||
const url = `/api/1.0/person/accompanying-period/work/evaluation/my-near-end${'?'+ param}`;
|
||||
makeFetch('GET', url)
|
||||
.then((response) => {
|
||||
commit('addEvaluations', response);
|
||||
commit('setLoading', false);
|
||||
})
|
||||
.catch((error) => {
|
||||
commit('catchError', error);
|
||||
throw error;
|
||||
})
|
||||
;
|
||||
}
|
||||
break;
|
||||
case 'MyTasks':
|
||||
if (!(getters.isTasksWarningLoaded && getters.isTasksAlertLoaded)) {
|
||||
commit('setLoading', true);
|
||||
const
|
||||
urlWarning = `/api/1.0/task/single-task/list/my?f[q]=&f[checkboxes][status][]=warning&f[checkboxes][states][]=new&f[checkboxes][states][]=in_progress${'&'+ param}`,
|
||||
urlAlert = `/api/1.0/task/single-task/list/my?f[q]=&f[checkboxes][status][]=alert&f[checkboxes][states][]=new&f[checkboxes][states][]=in_progress${'&'+ param}`
|
||||
;
|
||||
makeFetch('GET', urlWarning)
|
||||
.then((response) => {
|
||||
commit('addTasksWarning', response);
|
||||
commit('setLoading', false);
|
||||
})
|
||||
.catch((error) => {
|
||||
commit('catchError', error);
|
||||
throw error;
|
||||
})
|
||||
;
|
||||
makeFetch('GET', urlAlert)
|
||||
.then((response) => {
|
||||
commit('addTasksAlert', response);
|
||||
commit('setLoading', false);
|
||||
})
|
||||
.catch((error) => {
|
||||
commit('catchError', error);
|
||||
throw error;
|
||||
})
|
||||
;
|
||||
}
|
||||
break;
|
||||
case 'MyAccompanyingCourses':
|
||||
if (!getters.isAccompanyingCoursesLoaded) {
|
||||
commit('setLoading', true);
|
||||
const url = `/api/1.0/person/accompanying-course/list/by-recent-attributions${'?'+ param}`;
|
||||
makeFetch('GET', url)
|
||||
.then((response) => {
|
||||
commit('addCourses', response);
|
||||
commit('setLoading', false);
|
||||
})
|
||||
.catch((error) => {
|
||||
commit('catchError', error);
|
||||
throw error;
|
||||
})
|
||||
;
|
||||
}
|
||||
break;
|
||||
case 'MyNotifications':
|
||||
if (!getters.isNotificationsLoaded) {
|
||||
commit('setLoading', true);
|
||||
const url = `/api/1.0/main/notification/my/unread${'?'+ param}`;
|
||||
makeFetch('GET', url)
|
||||
.then((response) => {
|
||||
commit('addNotifications', response);
|
||||
commit('setLoading', false);
|
||||
})
|
||||
.catch((error) => {
|
||||
commit('catchError', error);
|
||||
throw error;
|
||||
})
|
||||
;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
throw 'tab '+ tab;
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
export { store };
|
||||
@@ -5,6 +5,7 @@
|
||||
:action="context.action"
|
||||
:buttonText="options.buttonText"
|
||||
:displayBadge="options.displayBadge === 'true'"
|
||||
:isDead="options.isDead"
|
||||
:parent="options.parent"
|
||||
@saveFormOnTheFly="saveFormOnTheFly">
|
||||
</on-the-fly>
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<template>
|
||||
|
||||
<a v-if="isDisplayBadge" @click="openModal">
|
||||
<span class="chill-entity" :class="badgeType">
|
||||
{{ buttonText }}
|
||||
</span>
|
||||
</a>
|
||||
<a v-else class="btn btn-sm" target="_blank"
|
||||
<a v-if="isDisplayBadge" @click="openModal">
|
||||
<span class="chill-entity" :class="badgeType">
|
||||
{{ buttonText }}<span v-if="isDead"> (‡)</span>
|
||||
</span>
|
||||
</a>
|
||||
<a v-else class="btn btn-sm" target="_blank"
|
||||
:class="classAction"
|
||||
:title="$t(titleAction)"
|
||||
@click="openModal">
|
||||
{{ buttonText }}
|
||||
{{ buttonText }}<span v-if="isDead"> (‡)</span>
|
||||
</a>
|
||||
|
||||
<teleport to="body">
|
||||
@@ -101,7 +101,7 @@ export default {
|
||||
OnTheFlyThirdparty,
|
||||
OnTheFlyCreate
|
||||
},
|
||||
props: ['type', 'id', 'action', 'buttonText', 'displayBadge', 'parent'],
|
||||
props: ['type', 'id', 'action', 'buttonText', 'displayBadge', 'isDead', 'parent', 'canCloseModal'],
|
||||
emits: ['saveFormOnTheFly'],
|
||||
data() {
|
||||
return {
|
||||
@@ -179,7 +179,20 @@ export default {
|
||||
return 'entity-' + this.type + ' badge-' + this.type;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
canCloseModal: {
|
||||
handler: function(val, oldVal) {
|
||||
if (val) {
|
||||
this.closeModal();
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeModal() {
|
||||
this.modal.showModal = false;
|
||||
},
|
||||
openModal() {
|
||||
// console.log('## OPEN ON THE FLY MODAL');
|
||||
// console.log('## type:', this.type, ', action:', this.action);
|
||||
@@ -237,8 +250,6 @@ export default {
|
||||
console.log('type', type, 'data', data)
|
||||
// pass datas to parent
|
||||
this.$emit('saveFormOnTheFly', { type: type, data: data });
|
||||
|
||||
this.modal.showModal = false;
|
||||
},
|
||||
buildLocation(id, type) {
|
||||
if (type === 'person') {
|
||||
|
||||
@@ -22,7 +22,8 @@ containers.forEach((container) => {
|
||||
options: {
|
||||
buttonText: container.dataset.buttonText || null,
|
||||
displayBadge: container.dataset.displayBadge || false,
|
||||
parent: JSON.parse(container.dataset.parent) || null,
|
||||
isDead: container.dataset.isDead || false,
|
||||
parent: container.dataset.parent ? JSON.parse(container.dataset.parent) : null,
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -33,4 +34,5 @@ containers.forEach((container) => {
|
||||
.mount(container);
|
||||
|
||||
//console.log('container dataset', container.dataset);
|
||||
//console.log('data-parent', container.dataset.parent);
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<ul class="list-suggest remove-items">
|
||||
<ul class="list-suggest remove-items" v-if="picked.length">
|
||||
<li v-for="p in picked" @click="removeEntity(p)" :key="p.type+p.id">
|
||||
<span class="chill_denomination">{{ p.text }}</span>
|
||||
</li>
|
||||
@@ -79,11 +79,15 @@ export default {
|
||||
);
|
||||
this.$refs.addPersons.resetSearch(); // to cast child method
|
||||
modal.showModal = false;
|
||||
console.log(this.picked)
|
||||
},
|
||||
removeEntity(entity) {
|
||||
console.log('remove entity', entity);
|
||||
this.$emit('removeEntity', entity);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.picked);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -24,6 +24,11 @@
|
||||
{{ $t('user')}}
|
||||
</span>
|
||||
|
||||
<span v-if="entity.type === 'household'" class="badge rounded-pill bg-user">
|
||||
{{ $t('household')}}
|
||||
</span>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -40,7 +45,8 @@ export default {
|
||||
company: "Personne morale",
|
||||
contact: "Personne physique",
|
||||
},
|
||||
user: 'TMS'
|
||||
user: 'TMS',
|
||||
household: 'Ménage',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,22 +1,26 @@
|
||||
<template>
|
||||
<div class="confidential" v-on:click="toggleBlur">
|
||||
<div class="confidential-content blur">
|
||||
<div :class="classes">
|
||||
<div class="confidential-content" :class="{ 'blur': isBlurred }">
|
||||
<slot name="confidential-content"></slot>
|
||||
</div>
|
||||
<i class="fa fa-eye toggle" aria-hidden="true"></i>
|
||||
<div>
|
||||
<i class="fa fa-eye toggle" aria-hidden="true" @click="toggleBlur"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Confidential",
|
||||
data() {
|
||||
return {
|
||||
isBlurred: true,
|
||||
};
|
||||
},
|
||||
methods : {
|
||||
toggleBlur: function(e){
|
||||
if(e.target.matches('.toggle')){
|
||||
e.target.previousElementSibling.classList.toggle("blur");
|
||||
e.target.classList.toggle("fa-eye");
|
||||
e.target.classList.toggle("fa-eye-slash");
|
||||
}
|
||||
toggleBlur() {
|
||||
console.log('toggle blur');
|
||||
this.isBlurred = !this.isBlurred;
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -39,4 +43,4 @@ export default {
|
||||
-moz-filter: blur(5px);
|
||||
filter: blur(5px);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,26 +1,58 @@
|
||||
<template>
|
||||
|
||||
<component :is="component" class="chill-entity entity-address my-3">
|
||||
|
||||
<component :is="component" class="address" :class="multiline">
|
||||
<div v-if="isMultiline === true">
|
||||
<p v-for="(l, i) in address.lines" :key="`line-${i}`">
|
||||
{{ l }}
|
||||
</p>
|
||||
|
||||
<div v-if="isConfidential">
|
||||
<confidential>
|
||||
<template v-slot:confidential-content>
|
||||
<div v-if="isMultiline === true">
|
||||
<p v-for="(l, i) in address.lines" :key="`line-${i}`">
|
||||
{{ l }}
|
||||
</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p v-if="address.text"
|
||||
class="street">
|
||||
{{ address.text }}
|
||||
</p>
|
||||
<p v-if="address.postcode"
|
||||
class="postcode">
|
||||
{{ address.postcode.code }} {{ address.postcode.name }}
|
||||
</p>
|
||||
<p v-if="address.country"
|
||||
class="country">
|
||||
{{ address.country.name.fr }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</confidential>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p v-if="address.text"
|
||||
class="street">
|
||||
{{ address.text }}
|
||||
</p>
|
||||
<p v-if="address.postcode"
|
||||
class="postcode">
|
||||
{{ address.postcode.code }} {{ address.postcode.name }}
|
||||
</p>
|
||||
<p v-if="address.country"
|
||||
class="country">
|
||||
{{ address.country.name.fr }}
|
||||
</p>
|
||||
|
||||
<div v-if="!isConfidential">
|
||||
<div v-if="isMultiline === true">
|
||||
<p v-for="(l, i) in address.lines" :key="`line-${i}`">
|
||||
{{ l }}
|
||||
</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p v-if="address.text"
|
||||
class="street">
|
||||
{{ address.text }}
|
||||
</p>
|
||||
<p v-if="address.postcode"
|
||||
class="postcode">
|
||||
{{ address.postcode.code }} {{ address.postcode.name }}
|
||||
</p>
|
||||
<p v-if="address.country"
|
||||
class="country">
|
||||
{{ address.country.name.fr }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</component>
|
||||
|
||||
<!-- <div v-if="isMultiline === true" class="address-more">
|
||||
@@ -78,8 +110,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
|
||||
|
||||
export default {
|
||||
name: 'AddressRenderBox',
|
||||
components: {
|
||||
Confidential
|
||||
},
|
||||
props: {
|
||||
address: {
|
||||
type: Object
|
||||
@@ -100,6 +138,9 @@ export default {
|
||||
multiline() {
|
||||
//console.log(this.isMultiline, typeof this.isMultiline);
|
||||
return this.isMultiline === true ? "multiline" : "";
|
||||
},
|
||||
isConfidential() {
|
||||
return this.address.confidential;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="d-grid gap-2 my-3">
|
||||
<button class="btn btn-misc" type="button" v-if="!subscriberFinal" @click="subscribeTo('subscribe', 'final')">
|
||||
<i class="fa fa-check fa-fw"></i>
|
||||
{{ $t('subscribe_final') }}
|
||||
</button>
|
||||
<button class="btn btn-misc" type="button" v-if="subscriberFinal" @click="subscribeTo('unsubscribe', 'final')">
|
||||
<i class="fa fa-times fa-fw"></i>
|
||||
{{ $t('unsubscribe_final') }}
|
||||
</button>
|
||||
<button class="btn btn-misc" type="button" v-if="!subscriberStep" @click="subscribeTo('subscribe', 'step')">
|
||||
<i class="fa fa-check fa-fw"></i>
|
||||
{{ $t('subscribe_all_steps') }}
|
||||
</button>
|
||||
<button class="btn btn-misc" type="button" v-if="subscriberStep" @click="subscribeTo('unsubscribe', 'step')">
|
||||
<i class="fa fa-times fa-fw"></i>
|
||||
{{ $t('unsubscribe_all_steps') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.js';
|
||||
|
||||
export default {
|
||||
name: "EntityWorkflowVueSubscriber",
|
||||
i18n: {
|
||||
messages: {
|
||||
fr: {
|
||||
subscribe_final: "Recevoir une notification à l'étape finale",
|
||||
unsubscribe_final: "Ne plus recevoir de notification à l'étape finale",
|
||||
subscribe_all_steps: "Recevoir une notification à chaque étape du suivi",
|
||||
unsubscribe_all_steps: "Ne plus recevoir de notification à chaque étape du suivi",
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
entityWorkflowId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
subscriberStep: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
subscriberFinal: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ['subscriptionUpdated'],
|
||||
methods: {
|
||||
subscribeTo(step, to) {
|
||||
let params = new URLSearchParams();
|
||||
params.set('subscribe', to);
|
||||
|
||||
const url = `/api/1.0/main/workflow/${this.entityWorkflowId}/${step}?` + params.toString();
|
||||
|
||||
makeFetch('POST', url).then(response => {
|
||||
this.$emit('subscriptionUpdated', response);
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
/*
|
||||
* ALTERNATIVES
|
||||
*
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="laststep">
|
||||
<label class="form-check-label" for="laststep">{{ $t('subscribe_final') }}</label>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="allsteps">
|
||||
<label class="form-check-label" for="allsteps">{{ $t('subscribe_all_steps') }}</label>
|
||||
</div>
|
||||
|
||||
<div class="list-group my-3">
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
{{ $t('subscribe_final') }}
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
{{ $t('subscribe_all_steps') }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="btn-group-vertical my-3" role="group">
|
||||
<button type="button" class="btn btn-outline-primary">
|
||||
<i class="fa fa-check fa-fw"></i>
|
||||
{{ $t('subscribe_final') }}
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-primary">
|
||||
<i class="fa fa-check fa-fw"></i>
|
||||
{{ $t('subscribe_all_steps') }}
|
||||
</button>
|
||||
</div>
|
||||
*/
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div class="flex-table workflow" id="workflow-list">
|
||||
<div v-for="(w, i) in workflows" :key="`workflow-${i}`"
|
||||
class="item-bloc">
|
||||
|
||||
<div>
|
||||
<div class="item-row col">
|
||||
<h2>Workflow</h2>
|
||||
<div class="flex-grow-1 ms-3 h3">
|
||||
<div class="visually-hidden">
|
||||
{{ w.relatedEntityClass }}
|
||||
{{ w.relatedEntityId }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="breadcrumb">
|
||||
<template v-for="(step, j) in w.steps" :key="`step-${j}`">
|
||||
<span class="mx-2"
|
||||
tabindex="0"
|
||||
data-bs-trigger="focus hover"
|
||||
data-bs-toggle="popover"
|
||||
data-bs-placement="bottom"
|
||||
data-bs-custom-class="workflow-transition"
|
||||
:title="getPopTitle(step)"
|
||||
:data-bs-content="getPopContent(step)">
|
||||
|
||||
<i v-if="step.currentStep.name === 'initial'"
|
||||
class="fa fa-circle me-1 text-chill-yellow">
|
||||
</i>
|
||||
<i v-if="step.isFreezed"
|
||||
class="fa fa-snowflake-o fa-sm me-1">
|
||||
</i>
|
||||
{{ step.currentStep.text }}
|
||||
</span>
|
||||
<span v-if="j !== Object.keys(w.steps).length - 1">
|
||||
→
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-row">
|
||||
<div class="item-col flex-grow-1">
|
||||
<p v-if="isUserSubscribedToStep(w)">
|
||||
<i class="fa fa-check fa-fw"></i>
|
||||
{{ $t('you_subscribed_to_all_steps') }}
|
||||
</p>
|
||||
<p v-if="isUserSubscribedToFinal(w)">
|
||||
<i class="fa fa-check fa-fw"></i>
|
||||
{{ $t('you_subscribed_to_final_step') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="item-col">
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a :href="goToUrl(w)" class="btn btn-sm btn-show" :title="$t('action.show')"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Popover from 'bootstrap/js/src/popover';
|
||||
|
||||
const i18n = {
|
||||
messages: {
|
||||
fr: {
|
||||
you_subscribed_to_all_steps: "Vous recevrez une notification à chaque étape",
|
||||
you_subscribed_to_final_step: "Vous recevrez une notification à l'étape finale",
|
||||
by: "Par",
|
||||
at: "Le"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "ListWorkflow",
|
||||
i18n: i18n,
|
||||
props: {
|
||||
workflows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goToUrl(w) {
|
||||
return `/fr/main/workflow/${w.id}/show`;
|
||||
},
|
||||
getPopTitle(step) {
|
||||
if (step.transitionPrevious != null) {
|
||||
//console.log(step.transitionPrevious.text);
|
||||
let freezed = step.isFreezed ? `<i class="fa fa-snowflake-o fa-sm me-1"></i>` : ``;
|
||||
return `${freezed}${step.transitionPrevious.text}`;
|
||||
}
|
||||
},
|
||||
getPopContent(step) {
|
||||
if (step.transitionPrevious != null) {
|
||||
return `<ul class="small_in_title">
|
||||
<li><span class="item-key">${i18n.messages.fr.by} : </span><b>${step.transitionPreviousBy.text}</b></li>
|
||||
<li><span class="item-key">${i18n.messages.fr.at} : </span><b>${this.formatDate(step.transitionPreviousAt.datetime)}</b></li>
|
||||
</ul>`
|
||||
;
|
||||
}
|
||||
},
|
||||
formatDate(datetime) {
|
||||
return datetime.split('T')[0] +' '+ datetime.split('T')[1].substring(0,5)
|
||||
},
|
||||
isUserSubscribedToStep(w) {
|
||||
// todo
|
||||
return false;
|
||||
},
|
||||
isUserSubscribedToFinal(w) {
|
||||
// todo
|
||||
return false;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const triggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
|
||||
const popoverList = triggerList.map(function (el) {
|
||||
//console.log('popover', el)
|
||||
return new Popover(el, {
|
||||
html: true,
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
|
||||
<button v-if="hasWorkflow"
|
||||
class="btn btn-primary"
|
||||
@click="openModal">
|
||||
<b>{{ countWorkflows }}</b>
|
||||
<template v-if="countWorkflows > 1">{{ $t('workflows') }}</template>
|
||||
<template v-else>{{ $t('workflow') }}</template>
|
||||
</button>
|
||||
|
||||
<pick-workflow v-else-if="allowCreate"
|
||||
:relatedEntityClass="this.relatedEntityClass"
|
||||
:relatedEntityId="this.relatedEntityId"
|
||||
:workflowsAvailables="workflowsAvailables"
|
||||
@go-to-generate-workflow="goToGenerateWorkflow"
|
||||
></pick-workflow>
|
||||
|
||||
<teleport to="body">
|
||||
<modal v-if="modal.showModal"
|
||||
:modalDialogClass="modal.modalDialogClass"
|
||||
@close="modal.showModal = false">
|
||||
|
||||
<template v-slot:header>
|
||||
<h2 class="modal-title">{{ $t('workflow_list') }}</h2>
|
||||
</template>
|
||||
|
||||
<template v-slot:body>
|
||||
<list-workflow-vue
|
||||
:workflows="workflows"
|
||||
></list-workflow-vue>
|
||||
</template>
|
||||
|
||||
<template v-slot:footer>
|
||||
<pick-workflow v-if="allowCreate"
|
||||
:relatedEntityClass="this.relatedEntityClass"
|
||||
:relatedEntityId="this.relatedEntityId"
|
||||
:workflowsAvailables="workflowsAvailables"
|
||||
:preventDefaultMoveToGenerate="this.$props.preventDefaultMoveToGenerate"
|
||||
@go-to-generate-workflow="this.goToGenerateWorkflow"
|
||||
></pick-workflow>
|
||||
</template>
|
||||
|
||||
</modal>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
|
||||
import PickWorkflow from 'ChillMainAssets/vuejs/_components/EntityWorkflow/PickWorkflow.vue';
|
||||
import ListWorkflowVue from 'ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflow.vue';
|
||||
|
||||
export default {
|
||||
name: "ListWorkflowModal",
|
||||
components: {
|
||||
Modal,
|
||||
PickWorkflow,
|
||||
ListWorkflowVue
|
||||
},
|
||||
emits: ['goToGenerateWorkflow'],
|
||||
props: {
|
||||
workflows: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
allowCreate: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
relatedEntityClass: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
relatedEntityId: {
|
||||
type: Number,
|
||||
required: false,
|
||||
},
|
||||
workflowsAvailables: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
preventDefaultMoveToGenerate: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
modal: {
|
||||
showModal: false,
|
||||
modalDialogClass: "modal-dialog-scrollable modal-xl"
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
countWorkflows() {
|
||||
return this.workflows.length;
|
||||
},
|
||||
hasWorkflow() {
|
||||
return this.countWorkflows > 0;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openModal() {
|
||||
this.modal.showModal = true;
|
||||
},
|
||||
goToGenerateWorkflow(data) {
|
||||
console.log('go to generate workflow intercepted');
|
||||
this.$emit('goToGenerateWorkflow', data);
|
||||
}
|
||||
},
|
||||
i18n: {
|
||||
messages: {
|
||||
fr: {
|
||||
workflow_list: "Liste des workflows associés",
|
||||
workflow: " workflow associé",
|
||||
workflows: " workflows associés",
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<template v-if="workflowsAvailables.length >= 1">
|
||||
<div class="dropdown d-grid gap-2">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button" id="createWorkflowButton" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Créer un workflow
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="createWorkflowButton">
|
||||
<li v-for="w in workflowsAvailables" :key="w.name">
|
||||
<a class="dropdown-item" :href="makeLink(w.name)" @click.prevent="goToGenerateWorkflow($event, w.name)">{{ w.text }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {buildLinkCreate} from 'ChillMainAssets/lib/entity-workflow/api.js';
|
||||
|
||||
export default {
|
||||
name: "PickWorkflow",
|
||||
props: {
|
||||
relatedEntityClass: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
relatedEntityId: {
|
||||
type: Number,
|
||||
required: false,
|
||||
},
|
||||
workflowsAvailables: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
preventDefaultMoveToGenerate: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['goToGenerateWorkflow'],
|
||||
methods: {
|
||||
makeLink(workflowName) {
|
||||
return buildLinkCreate(workflowName, this.relatedEntityClass, this.relatedEntityId);
|
||||
},
|
||||
goToGenerateWorkflow(event, workflowName) {
|
||||
console.log('goToGenerateWorkflow', event, workflowName);
|
||||
|
||||
if (!this.$props.preventDefaultMoveToGenerate) {
|
||||
console.log('to go generate');
|
||||
window.location.assign(this.makeLink(workflowName));
|
||||
}
|
||||
|
||||
this.$emit('goToGenerateWorkflow', {event, workflowName, link: this.makeLink(workflowName)});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -15,7 +15,7 @@
|
||||
<div class="modal-body">
|
||||
<slot name="body"></slot>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="modal-footer" v-if="!hideFooter">
|
||||
<button class="btn btn-cancel" @click="$emit('close')">{{ $t('action.close') }}</button>
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
@@ -38,7 +38,16 @@
|
||||
*/
|
||||
export default {
|
||||
name: 'Modal',
|
||||
props: ['modalDialogClass'],
|
||||
props: {
|
||||
modalDialogClass: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
hideFooter: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
emits: ['close']
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
:href="showUrl"
|
||||
:title="$t('action.show')"
|
||||
>
|
||||
<i class="fa fa-sm fa-eye"></i>
|
||||
<i class="fa fa-sm fa-comment-o"></i>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<a v-if="isOpenDocument"
|
||||
class="btn change-icon" :class="[isChangeClass ? button.changeClass : 'btn-edit']"
|
||||
@click="openModal">
|
||||
|
||||
<i class="fa me-2" :class="[isChangeIcon ? button.changeIcon : 'fa-pencil']"></i>
|
||||
|
||||
<span v-if="!noText">
|
||||
{{ $t('Update_document') }}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<teleport to="body">
|
||||
<div class="wopi-frame" v-if="isOpenDocument">
|
||||
<modal v-if="modal.showModal"
|
||||
:modalDialogClass="modal.modalDialogClass"
|
||||
:hideFooter=true
|
||||
@close="modal.showModal = false">
|
||||
|
||||
<template v-slot:header>
|
||||
<img class="logo" :src="logo" height="45"/>
|
||||
<span class="ms-auto me-3">
|
||||
{{ this.title }}
|
||||
</span>
|
||||
<a class="btn btn-outline-light">
|
||||
<i class="fa fa-save fa-fw"></i>
|
||||
{{ $t('save_and_quit') }}
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<template v-slot:body>
|
||||
<div v-if="loading" class="loading">
|
||||
<i class="fa fa-circle-o-notch fa-spin fa-3x" :title="$t('loading')"></i>
|
||||
</div>
|
||||
<iframe
|
||||
:src="this.wopiUrl"
|
||||
@load="loaded"
|
||||
></iframe>
|
||||
</template>
|
||||
|
||||
</modal>
|
||||
</div>
|
||||
<div v-else>
|
||||
<modal v-if="modal.showModal"
|
||||
modalDialogClass="modal-sm"
|
||||
@close="modal.showModal = false">
|
||||
|
||||
<template v-slot:header>
|
||||
<h3>{{ $t('invalid_title') }}</h3>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<div class="alert alert-warning">{{ $t('invalid_message') }}</div>
|
||||
</template>
|
||||
|
||||
</modal>
|
||||
</div>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
|
||||
import logo from 'ChillMainAssets/chill/img/logo-chill-sans-slogan_white.png';
|
||||
|
||||
export default {
|
||||
name: "OpenWopiLink",
|
||||
components: {
|
||||
Modal
|
||||
},
|
||||
props: {
|
||||
wopiUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
button: {
|
||||
type: Object,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
modal: {
|
||||
showModal: false,
|
||||
modalDialogClass: "modal-fullscreen" //modal-dialog-scrollable
|
||||
},
|
||||
logo: logo,
|
||||
loading: false,
|
||||
mime: [
|
||||
// TODO temporary hardcoded. to be replaced by twig extension or a collabora server query
|
||||
'application/clarisworks',
|
||||
'application/coreldraw',
|
||||
'application/macwriteii',
|
||||
'application/msword',
|
||||
'application/pdf',
|
||||
'application/vnd.lotus-1-2-3',
|
||||
'application/vnd.ms-excel',
|
||||
'application/vnd.ms-excel.sheet.binary.macroEnabled.12',
|
||||
'application/vnd.ms-excel.sheet.macroEnabled.12',
|
||||
'application/vnd.ms-excel.template.macroEnabled.12',
|
||||
'application/vnd.ms-powerpoint',
|
||||
'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
|
||||
'application/vnd.ms-powerpoint.template.macroEnabled.12',
|
||||
'application/vnd.ms-visio.drawing',
|
||||
'application/vnd.ms-word.document.macroEnabled.12',
|
||||
'application/vnd.ms-word.template.macroEnabled.12',
|
||||
'application/vnd.ms-works',
|
||||
'application/vnd.oasis.opendocument.chart',
|
||||
'application/vnd.oasis.opendocument.formula',
|
||||
'application/vnd.oasis.opendocument.graphics',
|
||||
'application/vnd.oasis.opendocument.graphics-flat-xml',
|
||||
'application/vnd.oasis.opendocument.graphics-template',
|
||||
'application/vnd.oasis.opendocument.presentation',
|
||||
'application/vnd.oasis.opendocument.presentation-flat-xml',
|
||||
'application/vnd.oasis.opendocument.presentation-template',
|
||||
'application/vnd.oasis.opendocument.spreadsheet',
|
||||
'application/vnd.oasis.opendocument.spreadsheet-flat-xml',
|
||||
'application/vnd.oasis.opendocument.spreadsheet-template',
|
||||
'application/vnd.oasis.opendocument.text',
|
||||
'application/vnd.oasis.opendocument.text-flat-xml',
|
||||
'application/vnd.oasis.opendocument.text-master',
|
||||
'application/vnd.oasis.opendocument.text-master-template',
|
||||
'application/vnd.oasis.opendocument.text-template',
|
||||
'application/vnd.oasis.opendocument.text-web',
|
||||
'application/vnd.openxmlformats-officedocument.presentationml.presentation',
|
||||
'application/vnd.openxmlformats-officedocument.presentationml.slideshow',
|
||||
'application/vnd.openxmlformats-officedocument.presentationml.template',
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.template',
|
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
|
||||
'application/vnd.sun.xml.calc',
|
||||
'application/vnd.sun.xml.calc.template',
|
||||
'application/vnd.sun.xml.chart',
|
||||
'application/vnd.sun.xml.draw',
|
||||
'application/vnd.sun.xml.draw.template',
|
||||
'application/vnd.sun.xml.impress',
|
||||
'application/vnd.sun.xml.impress.template',
|
||||
'application/vnd.sun.xml.math',
|
||||
'application/vnd.sun.xml.writer',
|
||||
'application/vnd.sun.xml.writer.global',
|
||||
'application/vnd.sun.xml.writer.template',
|
||||
'application/vnd.visio',
|
||||
'application/vnd.visio2013',
|
||||
'application/vnd.wordperfect',
|
||||
'application/x-abiword',
|
||||
'application/x-aportisdoc',
|
||||
'application/x-dbase',
|
||||
'application/x-dif-document',
|
||||
'application/x-fictionbook+xml',
|
||||
'application/x-gnumeric',
|
||||
'application/x-hwp',
|
||||
'application/x-iwork-keynote-sffkey',
|
||||
'application/x-iwork-numbers-sffnumbers',
|
||||
'application/x-iwork-pages-sffpages',
|
||||
'application/x-mspublisher',
|
||||
'application/x-mswrite',
|
||||
'application/x-pagemaker',
|
||||
'application/x-sony-bbeb',
|
||||
'application/x-t602',
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isOpenDocument() {
|
||||
if (this.mime.indexOf(this.type) !== -1) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
noText() {
|
||||
if (typeof this.button.noText !== 'undefined') {
|
||||
return this.button.noText === true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
isChangeIcon() {
|
||||
if (typeof this.button.changeIcon !== 'undefined') {
|
||||
return (!(this.button.changeIcon === null || this.button.changeIcon === ''))
|
||||
}
|
||||
return false;
|
||||
},
|
||||
isChangeClass() {
|
||||
if (typeof this.button.changeClass !== 'undefined') {
|
||||
return (!(this.button.changeClass === null || this.button.changeClass === ''))
|
||||
}
|
||||
return false;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openModal() {
|
||||
this.loading = true;
|
||||
this.modal.showModal = true;
|
||||
},
|
||||
loaded() {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
i18n: {
|
||||
messages: {
|
||||
fr: {
|
||||
Update_document: "Modifier le document",
|
||||
save_and_quit: "Enregistrer et quitter",
|
||||
loading: "Chargement de l'éditeur en ligne",
|
||||
invalid_title: "Format incompatible",
|
||||
invalid_message: "Désolé, ce format de document n'est pas éditable en ligne.",
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
div.wopi-frame {
|
||||
div.modal-header {
|
||||
border-bottom: 0;
|
||||
background-color: var(--bs-primary);
|
||||
color: white;
|
||||
}
|
||||
div.modal-body {
|
||||
padding: 0;
|
||||
overflow-y: unset !important;
|
||||
iframe {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
div.loading {
|
||||
position: absolute;
|
||||
color: var(--bs-chill-gray);
|
||||
top: calc(50% - 30px);
|
||||
left: calc(50% - 30px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -62,14 +62,15 @@ const messages = {
|
||||
woman: "Née le"
|
||||
},
|
||||
deathdate: "Date de décès",
|
||||
years_old: "ans",
|
||||
household_without_address: "Le ménage de l'usager est sans adresse",
|
||||
no_data: "Aucune information renseignée",
|
||||
type: {
|
||||
thirdparty: "Tiers",
|
||||
person: "Usager"
|
||||
},
|
||||
holder: "Titulaire"
|
||||
holder: "Titulaire",
|
||||
years_old: "an | {n} an | {n} ans",
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user