Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

[vue][suggested users] add suggested users in vue component and write create/remove logic

Browse Source
This commit is contained in:
Julie Lenaerts 2023-02-24 17:25:28 +01:00
parent 1198133a7f
commit 5319991a6f
2 changed files with 64 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/Bundle/ChillMainBundle/Resources/public/module/pick-entity/index.js
View File

@ -23,8 +23,11 @@ function loadDynamicPicker(element) {
(input.value === '[]' || input.value === '') ? (input.value === '[]' || input.value === '') ?
null : [ JSON.parse(input.value) ] null : [ JSON.parse(input.value) ]
) )
suggested = null !== JSON.parse(el.dataset.suggested) ? JSON.parse(el.dataset.suggested) : null
; ;
console.log('suggested', suggested)
if (!isMultiple) { if (!isMultiple) {
if (input.value === '[]'){ if (input.value === '[]'){
input.value = null; input.value = null;
@ -37,6 +40,7 @@ function loadDynamicPicker(element) {
':types="types" ' + ':types="types" ' +
':picked="picked" ' + ':picked="picked" ' +
':uniqid="uniqid" ' + ':uniqid="uniqid" ' +
':suggested="suggested" ' +
'@addNewEntity="addNewEntity" ' + '@addNewEntity="addNewEntity" ' +
'@removeEntity="removeEntity"></pick-entity>', '@removeEntity="removeEntity"></pick-entity>',
components: { components: {
@ -48,6 +52,7 @@ function loadDynamicPicker(element) {
types: JSON.parse(el.dataset.types), types: JSON.parse(el.dataset.types),
picked: picked === null ? [] : picked, picked: picked === null ? [] : picked,
uniqid: el.dataset.uniqid, uniqid: el.dataset.uniqid,
suggested: suggested
} }
}, },
methods: { methods: {

105
src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue
View File

@ -17,6 +17,9 @@
</add-persons> </add-persons>
</li> </li>
</ul> </ul>
<ul v-if="suggested !== null" class="list-suggest add-items inline">
<li v-for="s in suggested" :key="s.id" @click="addNewSuggested(s)"><span>{{ s.text }}</span></li>
</ul>
</template> </template>
<script> <script>
@ -49,6 +52,10 @@ export default {
// display picked entities. // display picked entities.
type: Boolean, type: Boolean,
default: true, default: true,
},
suggested: {
type: Array,
default: null
} }
}, },
emits: ['addNewEntity', 'removeEntity'], emits: ['addNewEntity', 'removeEntity'],
@ -61,55 +68,61 @@ export default {
}; };
}, },
computed: { computed: {
addPersonsOptions() { addPersonsOptions() {
return { return {
uniq: !this.multiple, uniq: !this.multiple,
type: this.types, type: this.types,
priority: null, priority: null,
button: { button: {
size: 'btn-sm', size: 'btn-sm',
class: 'btn-submit', class: 'btn-submit',
}, },
}; };
}, },
translatedListOfTypes() { translatedListOfTypes() {
let trans = []; let trans = [];
this.types.forEach(t => { this.types.forEach(t => {
if (this.$props.multiple) { if (this.$props.multiple) {
trans.push(appMessages.fr.pick_entity[t].toLowerCase()); trans.push(appMessages.fr.pick_entity[t].toLowerCase());
} else { } else {
trans.push(appMessages.fr.pick_entity[t + '_one'].toLowerCase()); trans.push(appMessages.fr.pick_entity[t + '_one'].toLowerCase());
} }
}) })
if (this.$props.multiple) { if (this.$props.multiple) {
return appMessages.fr.pick_entity.modal_title + trans.join(', '); return appMessages.fr.pick_entity.modal_title + trans.join(', ');
} else { } else {
return appMessages.fr.pick_entity.modal_title_one + trans.join(', '); return appMessages.fr.pick_entity.modal_title_one + trans.join(', ');
} }
}, },
listClasses() { listClasses() {
return { return {
'list-suggest': true, 'list-suggest': true,
'remove-items': this.$props.removableIfSet, 'remove-items': this.$props.removableIfSet,
}; };
}, },
}, },
methods: { methods: {
addNewEntity({ selected, modal }) { addNewSuggested(entity) {
selected.forEach((item) => { this.$emit('addNewEntity', entity);
this.$emit('addNewEntity', item.result); const indexToRemove = this.suggested.findIndex(e => e.id === entity.id)
}, this this.suggested.splice(indexToRemove, 1);
); },
this.$refs.addPersons.resetSearch(); // to cast child method addNewEntity({ selected, modal }) {
modal.showModal = false; selected.forEach((item) => {
}, this.$emit('addNewEntity', item.result);
removeEntity(entity) { }, this
if (!this.$props.removableIfSet) { );
return; this.$refs.addPersons.resetSearch(); // to cast child method
} modal.showModal = false;
this.$emit('removeEntity', entity); },
} removeEntity(entity) {
if (!this.$props.removableIfSet) {
return;
}
this.$emit('removeEntity', entity);
this.suggested.push(entity);
}
}, },
} }
</script> </script>