From 85f00fdb28bac4b2592eff9c4f96143fe065580c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Fastr=C3=A9?= Date: Mon, 16 May 2022 17:20:15 +0200 Subject: [PATCH] refactor store in calendar --- .../Resources/public/vuejs/Calendar/store.js | 253 ------------------ .../public/vuejs/Calendar/store/actions.js | 115 ++++++++ .../public/vuejs/Calendar/store/getters.js | 56 ++++ .../public/vuejs/Calendar/store/index.js | 31 +++ .../public/vuejs/Calendar/store/mutations.js | 41 +++ .../public/vuejs/Calendar/store/utils.js | 27 ++ 6 files changed, 270 insertions(+), 253 deletions(-) delete mode 100644 src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store.js create mode 100644 src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/actions.js create mode 100644 src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/getters.js create mode 100644 src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/index.js create mode 100644 src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/mutations.js create mode 100644 src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.js diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store.js deleted file mode 100644 index a752f1bfd..000000000 --- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store.js +++ /dev/null @@ -1,253 +0,0 @@ -import 'es6-promise/auto'; -import { createStore } from 'vuex'; -import { postLocation } from 'ChillActivityAssets/vuejs/Activity/api'; -import { - getLocations, getLocationTypeByDefaultFor, - getUserCurrentLocation -} from "../../../../../ChillActivityBundle/Resources/public/vuejs/Activity/api"; - -const debug = process.env.NODE_ENV !== 'production'; - -const addIdToValue = (string, id) => { - let array = string ? string.split(',') : []; - array.push(id.toString()); - let str = array.join(); - return str; -}; - -const removeIdFromValue = (string, id) => { - let array = string.split(','); - array = array.filter(el => el !== id.toString()); - let str = array.join(); - return str; -}; - -/* -* Assign missing keys for the ConcernedGroups component -*/ -const mapEntity = (entity) => { - Object.assign(entity, {thirdParties: entity.professionals, users: entity.invites}); - return entity; -}; - -const store = createStore({ - strict: debug, - state: { - activity: mapEntity(window.entity), // activity is the calendar entity actually - currentEvent: null, - availableLocations: [], - mainUser: null - }, - getters: { - suggestedEntities(state) { - if (typeof(state.activity.accompanyingPeriod) === 'undefined') { - return []; - } - const allEntities = [ - ...store.getters.suggestedPersons, - ...store.getters.suggestedRequestor, - ...store.getters.suggestedUser, - ...store.getters.suggestedResources - ]; - const uniqueIds = [...new Set(allEntities.map(i => `${i.type}-${i.id}`))]; - return Array.from(uniqueIds, id => allEntities.filter(r => `${r.type}-${r.id}` === id)[0]); - }, - suggestedPersons(state) { - const existingPersonIds = state.activity.persons.map(p => p.id); - return state.activity.accompanyingPeriod.participations - .filter(p => p.endDate === null) - .map(p => p.person) - .filter(p => !existingPersonIds.includes(p.id)) - }, - suggestedRequestor(state) { - if (state.activity.accompanyingPeriod.requestor === null) { - return []; - } - - const existingPersonIds = state.activity.persons.map(p => p.id); - const existingThirdPartyIds = state.activity.thirdParties.map(p => p.id); - return [state.activity.accompanyingPeriod.requestor] - .filter(r => - (r.type === 'person' && !existingPersonIds.includes(r.id)) || - (r.type === 'thirdparty' && !existingThirdPartyIds.includes(r.id)) - ); - }, - suggestedUser(state) { - if (null === state.activity.users) { - return []; - } - const existingUserIds = state.activity.users.map(p => p.id); - return [state.activity.accompanyingPeriod.user] - .filter( - u => u !== null && !existingUserIds.includes(u.id) - ); - }, - suggestedResources(state) { - const resources = state.activity.accompanyingPeriod.resources; - const existingPersonIds = state.activity.persons.map(p => p.id); - const existingThirdPartyIds = state.activity.thirdParties.map(p => p.id); - return state.activity.accompanyingPeriod.resources - .map(r => r.resource) - .filter(r => - (r.type === 'person' && !existingPersonIds.includes(r.id)) || - (r.type === 'thirdparty' && !existingThirdPartyIds.includes(r.id)) - ); - } - }, - mutations: { - setMainUser(state, mainUser) { - if (state.mainUser === null || state.mainUser.id != mainUser.id) { - state.mainUser = mainUser; - } - }, - - // ConcernedGroups - addPersonsInvolved(state, payload) { - //console.log('### mutation addPersonsInvolved', payload.result.type); - switch (payload.result.type) { - case 'person': - state.activity.persons.push(payload.result); - break; - case 'thirdparty': - state.activity.thirdParties.push(payload.result); - break; - case 'user': - state.activity.users.push(payload.result); - break; - }; - }, - removePersonInvolved(state, payload) { - //console.log('### mutation removePersonInvolved', payload.type); - switch (payload.type) { - case 'person': - state.activity.persons = state.activity.persons.filter(person => person !== payload); - break; - case 'thirdparty': - state.activity.thirdParties = state.activity.thirdParties.filter(thirdparty => thirdparty !== payload); - break; - case 'user': - state.activity.users = state.activity.users.filter(user => user !== payload); - break; - }; - }, - // Calendar - setEvents(state, payload) { - console.log(payload) - state.currentEvent = {start: payload.start, end: payload.end} - }, - // Location - updateLocation(state, value) { - console.log('### mutation: updateLocation', value); - state.activity.location = value; - } - }, - actions: { - addPersonsInvolved({ commit }, payload) { - console.log('### action addPersonsInvolved', payload.result.type); - switch (payload.result.type) { - case 'person': - let aPersons = document.getElementById("chill_activitybundle_activity_persons"); - aPersons.value = addIdToValue(aPersons.value, payload.result.id); - break; - case 'thirdparty': - let aThirdParties = document.getElementById("chill_activitybundle_activity_professionals"); - aThirdParties.value = addIdToValue(aThirdParties.value, payload.result.id); - break; - case 'user': - let aUsers = document.getElementById("chill_activitybundle_activity_invites"); - aUsers.value = addIdToValue(aUsers.value, payload.result.id); - break; - }; - commit('addPersonsInvolved', payload); - }, - removePersonInvolved({ commit }, payload) { - //console.log('### action removePersonInvolved', payload); - switch (payload.type) { - case 'person': - let aPersons = document.getElementById("chill_activitybundle_activity_persons"); - aPersons.value = removeIdFromValue(aPersons.value, payload.id); - break; - case 'thirdparty': - let aThirdParties = document.getElementById("chill_activitybundle_activity_professionals"); - aThirdParties.value = removeIdFromValue(aThirdParties.value, payload.id); - break; - case 'user': - let aUsers = document.getElementById("chill_activitybundle_activity_invites"); - aUsers.value = removeIdFromValue(aUsers.value, payload.id); - break; - }; - commit('removePersonInvolved', payload); - }, - - // Calendar - createEvent({ commit }, payload) { - console.log('### action createEvent', payload); - let startDateInput = document.getElementById("chill_activitybundle_activity_startDate"); - startDateInput.value = payload.startStr; - let endDateInput = document.getElementById("chill_activitybundle_activity_endDate"); - endDateInput.value = payload.endStr; - //let mainUserInput = document.getElementById("chill_activitybundle_activity_mainUser"); - //mainUserInput.value = payload.users.logged.id; - commit('setEvents', payload); - }, - updateEvent({ commit, dispatch }, payload) { - console.log('### action updateEvent', payload); - let startDateInput = document.getElementById("chill_activitybundle_activity_startDate"); - startDateInput.value = payload.event.start.toISOString(); - let endDateInput = document.getElementById("chill_activitybundle_activity_endDate"); - endDateInput.value = payload.event.end.toISOString(); - let calendarRangeInput = document.getElementById("chill_activitybundle_activity_calendarRange"); - calendarRangeInput.value = Number(payload.event.extendedProps.calendarRangeId); - - dispatch('setMainUser', payload.event.source); - //let mainUserInput = document.getElementById("chill_activitybundle_activity_mainUser"); - //mainUserInput.value = Number(payload.event.source.id); - commit('setEvents', payload); - }, - setMainUser({ commit }, mainUser) { - const event = new CustomEvent('pick-entity-type-action', {detail: { - name: "chill_activitybundle_activity_mainUser", - entity: mainUser, - action: 'add' - }}); - document.dispatchEvent(event); - commit('setMainUser', mainUser); - }, - - // Location - updateLocation({ commit }, value) { - console.log('### action: updateLocation', value); - let hiddenLocation = document.getElementById("chill_activitybundle_activity_location"); - if (value.onthefly) { - const body = { - "type": "location", - "name": value.name === '__AccompanyingCourseLocation__' ? null : value.name, - "locationType": { - "id": value.locationType.id, - "type": "location-type" - } - }; - if (value.address.id) { - Object.assign(body, { - "address": { - "id": value.address.id - }, - }) - } - postLocation(body) - .then( - location => hiddenLocation.value = location.id - ).catch( - err => { - console.log(err.message); - } - ); - } else { - hiddenLocation.value = value.id; - } - commit("updateLocation", value); - } - } -}); - -export default store; diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/actions.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/actions.js new file mode 100644 index 000000000..87debf9de --- /dev/null +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/actions.js @@ -0,0 +1,115 @@ +import {toRaw} from "vue"; +import { + addIdToValue, + removeIdFromValue, + mapEntity +} from './utils'; + +export default { + addPersonsInvolved({ commit }, payload) { + console.log('### action addPersonsInvolved', payload.result.type); + switch (payload.result.type) { + case 'person': + let aPersons = document.getElementById("chill_activitybundle_activity_persons"); + aPersons.value = addIdToValue(aPersons.value, payload.result.id); + break; + case 'thirdparty': + let aThirdParties = document.getElementById("chill_activitybundle_activity_professionals"); + aThirdParties.value = addIdToValue(aThirdParties.value, payload.result.id); + break; + case 'user': + let aUsers = document.getElementById("chill_activitybundle_activity_invites"); + aUsers.value = addIdToValue(aUsers.value, payload.result.id); + break; + }; + commit('addPersonsInvolved', payload); + }, + removePersonInvolved({ commit }, payload) { + //console.log('### action removePersonInvolved', payload); + switch (payload.type) { + case 'person': + let aPersons = document.getElementById("chill_activitybundle_activity_persons"); + aPersons.value = removeIdFromValue(aPersons.value, payload.id); + break; + case 'thirdparty': + let aThirdParties = document.getElementById("chill_activitybundle_activity_professionals"); + aThirdParties.value = removeIdFromValue(aThirdParties.value, payload.id); + break; + case 'user': + let aUsers = document.getElementById("chill_activitybundle_activity_invites"); + aUsers.value = removeIdFromValue(aUsers.value, payload.id); + break; + }; + commit('removePersonInvolved', payload); + }, + + // Calendar + createEvent({ commit }, payload) { + console.log('### action createEvent', payload); + let startDateInput = document.getElementById("chill_activitybundle_activity_startDate"); + startDateInput.value = payload.startStr; + let endDateInput = document.getElementById("chill_activitybundle_activity_endDate"); + endDateInput.value = payload.endStr; + //let mainUserInput = document.getElementById("chill_activitybundle_activity_mainUser"); + //mainUserInput.value = payload.users.logged.id; + commit('setEvents', payload); + }, + updateEvent({ commit, dispatch }, payload) { + console.log('### action updateEvent', payload); + let startDateInput = document.getElementById("chill_activitybundle_activity_startDate"); + startDateInput.value = payload.event.start.toISOString(); + let endDateInput = document.getElementById("chill_activitybundle_activity_endDate"); + endDateInput.value = payload.event.end.toISOString(); + let calendarRangeInput = document.getElementById("chill_activitybundle_activity_calendarRange"); + calendarRangeInput.value = Number(payload.event.extendedProps.calendarRangeId); + + //dispatch('setMainUser', payload.event.source); + //let mainUserInput = document.getElementById("chill_activitybundle_activity_mainUser"); + //mainUserInput.value = Number(payload.event.source.id); + commit('setEvents', payload); + }, + setMainUser({ commit }, mainUser) { + console.log('rawMainuser', toRaw(mainUser)); + const event = new CustomEvent('pick-entity-type-action', {detail: { + name: "chill_activitybundle_activity_mainUser", + entity: toRaw(mainUser), + action: 'add' + }}); + document.dispatchEvent(event); + commit('setMainUser', mainUser); + }, + + // Location + updateLocation({ commit }, value) { + console.log('### action: updateLocation', value); + let hiddenLocation = document.getElementById("chill_activitybundle_activity_location"); + if (value.onthefly) { + const body = { + "type": "location", + "name": value.name === '__AccompanyingCourseLocation__' ? null : value.name, + "locationType": { + "id": value.locationType.id, + "type": "location-type" + } + }; + if (value.address.id) { + Object.assign(body, { + "address": { + "id": value.address.id + }, + }) + } + postLocation(body) + .then( + location => hiddenLocation.value = location.id + ).catch( + err => { + console.log(err.message); + } + ); + } else { + hiddenLocation.value = value.id; + } + commit("updateLocation", value); + } +} diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/getters.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/getters.js new file mode 100644 index 000000000..c7f0e878d --- /dev/null +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/getters.js @@ -0,0 +1,56 @@ +export default { + suggestedEntities(state, getters) { + if (typeof(state.activity.accompanyingPeriod) === 'undefined') { + return []; + } + const allEntities = [ + getters.suggestedPersons, + getters.suggestedRequestor, + getters.suggestedUser, + getters.suggestedResources + ]; + const uniqueIds = [...new Set(allEntities.map(i => `${i.type}-${i.id}`))]; + return Array.from(uniqueIds, id => allEntities.filter(r => `${r.type}-${r.id}` === id)[0]); + }, + suggestedPersons(state) { + const existingPersonIds = state.activity.persons.map(p => p.id); + return state.activity.accompanyingPeriod.participations + .filter(p => p.endDate === null) + .map(p => p.person) + .filter(p => !existingPersonIds.includes(p.id)) + }, + suggestedRequestor(state) { + if (state.activity.accompanyingPeriod.requestor === null) { + return []; + } + + const existingPersonIds = state.activity.persons.map(p => p.id); + const existingThirdPartyIds = state.activity.thirdParties.map(p => p.id); + return [state.activity.accompanyingPeriod.requestor] + .filter(r => + (r.type === 'person' && !existingPersonIds.includes(r.id)) || + (r.type === 'thirdparty' && !existingThirdPartyIds.includes(r.id)) + ); + }, + suggestedUser(state) { + if (null === state.activity.users) { + return []; + } + const existingUserIds = state.activity.users.map(p => p.id); + return [state.activity.accompanyingPeriod.user] + .filter( + u => u !== null && !existingUserIds.includes(u.id) + ); + }, + suggestedResources(state) { + const resources = state.activity.accompanyingPeriod.resources; + const existingPersonIds = state.activity.persons.map(p => p.id); + const existingThirdPartyIds = state.activity.thirdParties.map(p => p.id); + return state.activity.accompanyingPeriod.resources + .map(r => r.resource) + .filter(r => + (r.type === 'person' && !existingPersonIds.includes(r.id)) || + (r.type === 'thirdparty' && !existingThirdPartyIds.includes(r.id)) + ); + } +} diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/index.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/index.js new file mode 100644 index 000000000..0011b2f3f --- /dev/null +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/index.js @@ -0,0 +1,31 @@ +import 'es6-promise/auto'; +import { createStore } from 'vuex'; +import { toRaw } from 'vue'; +import { postLocation } from 'ChillActivityAssets/vuejs/Activity/api'; +import getters from './getters'; +import actions from './actions'; +import mutations from './mutations'; +import { mapEntity } from './utils'; + +import { + getLocations, getLocationTypeByDefaultFor, + getUserCurrentLocation +} from "ChillActivityAssets/vuejs/Activity/api"; + +const debug = process.env.NODE_ENV !== 'production'; + + +const store = createStore({ + strict: debug, + state: { + activity: mapEntity(window.entity), // activity is the calendar entity actually + currentEvent: null, + availableLocations: [], + mainUser: null + }, + getters, + mutations, + actions, +}); + +export default store; diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/mutations.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/mutations.js new file mode 100644 index 000000000..6e8923f6b --- /dev/null +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/mutations.js @@ -0,0 +1,41 @@ +export default { + // ConcernedGroups + addPersonsInvolved(state, payload) { + //console.log('### mutation addPersonsInvolved', payload.result.type); + switch (payload.result.type) { + case 'person': + state.activity.persons.push(payload.result); + break; + case 'thirdparty': + state.activity.thirdParties.push(payload.result); + break; + case 'user': + state.activity.users.push(payload.result); + break; + }; + }, + removePersonInvolved(state, payload) { + //console.log('### mutation removePersonInvolved', payload.type); + switch (payload.type) { + case 'person': + state.activity.persons = state.activity.persons.filter(person => person !== payload); + break; + case 'thirdparty': + state.activity.thirdParties = state.activity.thirdParties.filter(thirdparty => thirdparty !== payload); + break; + case 'user': + state.activity.users = state.activity.users.filter(user => user !== payload); + break; + }; + }, + // Calendar + setEvents(state, payload) { + console.log(payload) + state.currentEvent = {start: payload.start, end: payload.end} + }, + // Location + updateLocation(state, value) { + console.log('### mutation: updateLocation', value); + state.activity.location = value; + } +}; diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.js new file mode 100644 index 000000000..724754bce --- /dev/null +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.js @@ -0,0 +1,27 @@ +const addIdToValue = (string, id) => { + let array = string ? string.split(',') : []; + array.push(id.toString()); + let str = array.join(); + return str; +}; + +const removeIdFromValue = (string, id) => { + let array = string.split(','); + array = array.filter(el => el !== id.toString()); + let str = array.join(); + return str; +}; + +/* +* Assign missing keys for the ConcernedGroups component +*/ +const mapEntity = (entity) => { + Object.assign(entity, {thirdParties: entity.professionals, users: entity.invites}); + return entity; +}; + +export { + addIdToValue, + removeIdFromValue, + mapEntity +};