mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-20 22:53:49 +00:00
export SocialWorkTypeFilter: create dynamic Form Action-goal-result
- initiate new Vue component - cleaning buildForm in Filter - add HiddenType with ModelTransformer - use ObjectToIdTransformer in HiddenType fields - setting mount() and teleport - list fetch url in api.js - html/bootstrap form structure - add Multiselect actionType - i18n import - add multiselect for goals and results - add and remove options in multiselect (wip) - fix basic vue add/remove element from data store - vue cleaning - add ids in value hiddenFields - adapt Filter in AlterQuery (wip) - improve code lisibility
This commit is contained in:
@@ -0,0 +1,295 @@
|
||||
<template>
|
||||
<teleport to="#export_filters_social_work_type_filter_form">
|
||||
|
||||
<fieldset class="mb-3" id="actionType">
|
||||
<div class="row">
|
||||
<legend class="col-sm-4 col-form-label">{{ $t('action.label')}}</legend>
|
||||
<div class="col-sm-8">
|
||||
|
||||
<VueMultiselect
|
||||
name="actionType"
|
||||
v-model="action"
|
||||
:options="actions.options"
|
||||
@select="selectAction"
|
||||
@remove="unselectAction"
|
||||
:multiple="true"
|
||||
:close-on-select="false"
|
||||
:placeholder="$t('action.placeholder')"
|
||||
label="text"
|
||||
track-by="id"
|
||||
:searchable="true"
|
||||
></VueMultiselect>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="mb-3" id="goal">
|
||||
<div class="row">
|
||||
<legend class="col-sm-4 col-form-label">{{ $t('goal.label')}}</legend>
|
||||
<div class="col-sm-8">
|
||||
|
||||
<VueMultiselect
|
||||
name="goal"
|
||||
v-model="goal"
|
||||
:options="goals.options"
|
||||
@select="selectGoal"
|
||||
@remove="unselectGoal"
|
||||
:multiple="true"
|
||||
:close-on-select="false"
|
||||
:placeholder="$t('goal.placeholder')"
|
||||
label="title"
|
||||
:custom-label="transTitle"
|
||||
track-by="id"
|
||||
:searchable="true"
|
||||
></VueMultiselect>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="mb-3" id="result">
|
||||
<div class="row">
|
||||
<legend class="col-sm-4 col-form-label">{{ $t('result.label')}}</legend>
|
||||
<div class="col-sm-8">
|
||||
|
||||
<VueMultiselect
|
||||
name="result"
|
||||
v-model="result"
|
||||
:options="results.options"
|
||||
:multiple="true"
|
||||
:close-on-select="false"
|
||||
:placeholder="$t('result.placeholder')"
|
||||
label="title"
|
||||
:custom-label="transTitle"
|
||||
track-by="id"
|
||||
:searchable="true"
|
||||
></VueMultiselect>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueMultiselect from 'vue-multiselect';
|
||||
import { getSocialActions, getGoalByAction, getResultByAction, getResultByGoal } from './api';
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
VueMultiselect
|
||||
},
|
||||
i18n: {
|
||||
messages: {
|
||||
fr: {
|
||||
action: {
|
||||
label: 'Types d\'actions',
|
||||
placeholder: 'Choisissez une ou plusieurs actions',
|
||||
},
|
||||
goal: {
|
||||
label: 'Objectifs',
|
||||
placeholder: 'Choisissez un ou plusieurs objectifs',
|
||||
},
|
||||
result: {
|
||||
label: 'Résultats',
|
||||
placeholder: 'Choisissez un ou plusieurs résultats',
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
actions: {
|
||||
options: [], // array with multiselect options
|
||||
value: [], // array with selected values
|
||||
hiddenField: document.getElementById(
|
||||
'export_filters_social_work_type_filter_form_actionType'),
|
||||
},
|
||||
goals: {
|
||||
options: [],
|
||||
value: [],
|
||||
hiddenField: document.getElementById(
|
||||
'export_filters_social_work_type_filter_form_goal'),
|
||||
},
|
||||
results: {
|
||||
options: [],
|
||||
value: [],
|
||||
hiddenField: document.getElementById(
|
||||
'export_filters_social_work_type_filter_form_result'),
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
action: {
|
||||
get() {
|
||||
return this.actions.value;
|
||||
},
|
||||
set(value) {
|
||||
this.actions.value = value;
|
||||
this.rebuildHiddenFieldValues('actions');
|
||||
}
|
||||
},
|
||||
goal: {
|
||||
get() {
|
||||
return this.goals.value;
|
||||
},
|
||||
set(value) {
|
||||
this.goals.value = value;
|
||||
this.rebuildHiddenFieldValues('goals');
|
||||
}
|
||||
},
|
||||
result: {
|
||||
get() {
|
||||
return this.results.value;
|
||||
},
|
||||
set(value) {
|
||||
this.results.value = value;
|
||||
this.rebuildHiddenFieldValues('results');
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getSocialActionsList();
|
||||
|
||||
this.actions.hiddenField.value = '';
|
||||
this.goals.hiddenField.value = '';
|
||||
this.results.hiddenField.value = '';
|
||||
},
|
||||
methods: {
|
||||
async getSocialActionsList() {
|
||||
this.actions.options = await getSocialActions();
|
||||
},
|
||||
|
||||
/**
|
||||
* Select/unselect in Action Multiselect
|
||||
* @param value
|
||||
*/
|
||||
selectAction(value) {
|
||||
console.log('selectAction', value);
|
||||
getGoalByAction(value.id).then(response => new Promise((resolve, reject) => {
|
||||
//console.log('fetch Goals', response);
|
||||
this.addElementInData('goals', response.results);
|
||||
resolve();
|
||||
})).catch;
|
||||
getResultByAction(value.id).then(response => new Promise((resolve, reject) => {
|
||||
//console.log('fetch Results', response);
|
||||
this.addElementInData('results', response.results);
|
||||
resolve();
|
||||
})).catch;
|
||||
},
|
||||
|
||||
unselectAction(value) {
|
||||
console.log('unselectAction', value);
|
||||
getGoalByAction(value.id).then(response => new Promise((resolve, reject) => {
|
||||
//console.log('fetch Goals', response);
|
||||
this.goals.options = this.removeElementInData('goals', response.results);
|
||||
resolve();
|
||||
})).catch;
|
||||
getResultByAction(value.id).then(response => new Promise((resolve, reject) => {
|
||||
//console.log('fetch Results', response);
|
||||
this.results.options = this.removeElementInData('results', response.results);
|
||||
resolve();
|
||||
})).catch;
|
||||
},
|
||||
|
||||
/**
|
||||
* Select/unselect in Goal Multiselect
|
||||
* @param value
|
||||
*/
|
||||
selectGoal(value) {
|
||||
console.log('selectGoal', value);
|
||||
getResultByGoal(value.id).then(response => new Promise((resolve, reject) => {
|
||||
//console.log('fetch Results', response);
|
||||
this.addElementInData('results', response.results);
|
||||
resolve();
|
||||
})).catch;
|
||||
},
|
||||
|
||||
unselectGoal(value) {
|
||||
console.log('unselectGoal', value);
|
||||
getResultByGoal(value.id).then(response => new Promise((resolve, reject) => {
|
||||
//console.log('fetch Results', response);
|
||||
this.results.options = this.removeElementInData('results', response.results);
|
||||
resolve();
|
||||
})).catch;
|
||||
},
|
||||
|
||||
/**
|
||||
* Add response elements in data target
|
||||
* @param target string -> 'actions', 'goals' or 'results'
|
||||
* @param response array of objects with fetch results
|
||||
*/
|
||||
addElementInData(target, response) {
|
||||
let data = this[target];
|
||||
response.forEach(elem => {
|
||||
let found = data.options.some(e => e.id === elem.id);
|
||||
if (!found) {
|
||||
console.log('push elem in', target, elem.id);
|
||||
data.options.push(elem);
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove response elements from data target
|
||||
* @param target string -> 'actions', 'goals' or 'results'
|
||||
* @param response array of objects with fetch results
|
||||
* @returns data.<target>.options
|
||||
*/
|
||||
removeElementInData(target, response) {
|
||||
let data = this[target];
|
||||
response.forEach(elem => {
|
||||
let found = data.options.some(e => e.id === elem.id);
|
||||
if (found) {
|
||||
console.log('remove elem from', target, elem.id);
|
||||
data.options = data.options.filter(e => e.id !== elem.id);
|
||||
|
||||
/// remove too from selected and from hiddenField
|
||||
let selected = data.value.some(e => e.id === elem.id);
|
||||
if (selected) {
|
||||
// remove from selected
|
||||
data.value = data.value.filter(e => e.id !== elem.id);
|
||||
// remove from hiddenField
|
||||
this.rebuildHiddenFieldValues(target);
|
||||
// remove should be recursive; here it works but is not fine
|
||||
if (target === 'goals') { // <==== TODO improve loop
|
||||
this.unselectGoal(elem);
|
||||
}
|
||||
}
|
||||
///
|
||||
}
|
||||
})
|
||||
return data.options;
|
||||
},
|
||||
|
||||
/**
|
||||
* Rebuild values serie (string) in target HiddenField
|
||||
* @param target
|
||||
*/
|
||||
rebuildHiddenFieldValues(target) {
|
||||
let data = this[target];
|
||||
data.hiddenField.value = ''; // reset
|
||||
data.value.forEach(elem => {
|
||||
data.hiddenField.value = this.addIdToValue(data.hiddenField.value, elem.id);
|
||||
})
|
||||
},
|
||||
|
||||
addIdToValue(string, id) {
|
||||
let array = string ? string.split(',') : [];
|
||||
array.push(id.toString());
|
||||
let str = array.join();
|
||||
return str;
|
||||
},
|
||||
|
||||
transTitle ({ title }) {
|
||||
return title.fr //TODO multilang
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,41 @@
|
||||
import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods';
|
||||
|
||||
const getSocialActions = () => fetchResults(
|
||||
'/api/1.0/person/social/social-action.json', {
|
||||
item_per_page: 200
|
||||
}
|
||||
);
|
||||
|
||||
const getGoalByAction = (id) => {
|
||||
let url = `/api/1.0/person/social-work/goal/by-social-action/${id}.json`;
|
||||
return fetch(url)
|
||||
.then(response => {
|
||||
if (response.ok) { return response.json(); }
|
||||
throw Error('Error with request resource response');
|
||||
});
|
||||
};
|
||||
|
||||
const getResultByAction = (id) => {
|
||||
let url = `/api/1.0/person/social-work/result/by-social-action/${id}.json`;
|
||||
return fetch(url)
|
||||
.then(response => {
|
||||
if (response.ok) { return response.json(); }
|
||||
throw Error('Error with request resource response');
|
||||
});
|
||||
};
|
||||
|
||||
const getResultByGoal = (id) => {
|
||||
let url = `/api/1.0/person/social-work/result/by-goal/${id}.json`;
|
||||
return fetch(url)
|
||||
.then(response => {
|
||||
if (response.ok) { return response.json(); }
|
||||
throw Error('Error with request resource response');
|
||||
});
|
||||
};
|
||||
|
||||
export {
|
||||
getSocialActions,
|
||||
getGoalByAction,
|
||||
getResultByAction,
|
||||
getResultByGoal,
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { createApp } from "vue";
|
||||
import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
|
||||
import App from './App.vue';
|
||||
|
||||
const i18n = _createI18n({});
|
||||
|
||||
const app = createApp({
|
||||
template: `<app></app>`,
|
||||
})
|
||||
.use(i18n)
|
||||
.component('app', App)
|
||||
.mount('#export_export')
|
||||
;
|
||||
Reference in New Issue
Block a user