Support multi language filter track/session/room (#239)

* use the same ico with eventyay-talk * update base path for webapp using basePath from config file * Handle multiple language * Fix support multiple language * Code refactoring * Update the latest code --------- Co-authored-by: lcduong <[email protected]>
fossasia · Sep 29, 2024 · 21af6a9 · 21af6a9
1 parent f82ee69
commit 21af6a9
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 43 deletions.
diff --git a/webapp/src/store/schedule.js b/webapp/src/store/schedule.js
@@ -8,7 +8,8 @@ export default {
 		schedule: null,
 		errorLoading: null,
 		filter: {},
-		now: moment()
+		now: moment(),
+		currentLanguage: localStorage.getItem('userLanguage') || 'en'
 	},
 	getters: {
 		favs(state, getters, rootState) {
@@ -125,6 +126,95 @@ export default {
 		},
 		schedule(state) {
 			return state.schedule
+		},
+		getSessionType: (state, getters) => (item) => {
+			if (typeof item?.session_type === 'string') {
+				return item.session_type
+			} else if (typeof item?.session_type === 'object') {
+				const sessionTypeKeys = Object.keys(item.session_type)
+				const keyLanguage = sessionTypeKeys.find(key => key === state.currentLanguage) ||
+					sessionTypeKeys.find(key => key === 'en') ||
+					sessionTypeKeys[0]
+
+				return item.session_type[keyLanguage]
+			}
+			return null
+		},
+		getSelectedName: (state, getters) => (item) => {
+			if (typeof item?.name === 'string') {
+				return item.name
+			} else if (typeof item?.name === 'object') {
+				const keys = Object.keys(item.name)
+				const keyLanguage = keys.find(key => key === state.currentLanguage) ||
+					keys.find(key => key === 'en') ||
+					keys[0]
+
+				return item.name[keyLanguage]
+			}
+			return null
+		},
+		filterSessionTypesByLanguage: (state, getters) => (data) => {
+			const uniqueSessionTypes = new Set()
+
+			data.forEach(item => {
+				const sessionType = getters.getSessionType(item)
+				if (sessionType) {
+					uniqueSessionTypes.add(sessionType)
+				}
+			})
+
+			return Array.from(uniqueSessionTypes).map(sessionType => ({
+				value: sessionType,
+				label: sessionType
+			}))
+		},
+		filterItemsByLanguage: (state, getters) => (data) => {
+			const languageMap = new Map()
+
+			data.forEach(item => {
+				const selectedName = getters.getSelectedName(item)
+				if (selectedName) {
+					languageMap.set(item.id, selectedName)
+				}
+			})
+
+			return Array.from(languageMap).map(([id, name]) => ({ value: id, label: name }));
+		},
+		matchesSessionTypeFilter: (state) => (talk, selectedIds) => {
+			if (typeof talk?.session_type === 'string') {
+				return selectedIds.includes(talk.session_type)
+			} else if (typeof talk?.session_type === 'object') {
+				return Object.keys(talk.session_type).some(key => selectedIds.includes(talk.session_type[key]))
+			}
+			return false
+		},
+		filterTalk: (state, getter) => (refKey, selectedIds, previousResults) => {
+			const talks = state.schedule.talks
+
+			return talks
+				.filter(talk => {
+					const matchesSessionType = refKey === 'session_type' && getter.matchesSessionTypeFilter(talk, selectedIds)
+					const matchesRefKey = selectedIds.includes(talk[refKey])
+
+					return (matchesSessionType || matchesRefKey) && (!previousResults || previousResults.includes(talk.id))
+				})
+				.map(talk => talk.id) || []
+		},
+		filteredSessions: (state, getters) => (filter) => {
+			let filteredResults = null
+
+			Object.keys(filter).forEach(key => {
+				const refKey = filter[key].refKey
+				const selectedIds = filter[key].data
+					.filter(item => item.selected)
+					.map(item => item.value) || []
+
+				if (selectedIds.length) {
+					filteredResults = getters.filterTalk(refKey, selectedIds, filteredResults)
+				}
+			})
+
+			return filteredResults
 		}
 	},
 	actions: {
@@ -176,8 +266,16 @@ export default {
 			})
 			// TODO error handling
 		},
+		setCurrentLanguage({commit}, language) {
+			commit('setCurrentLanguage', language)
+		},
 		filter({ state }, filter) {
 			state.filter = filter
+		},
+	},
+	mutations: {
+		setCurrentLanguage(state, language) {
+			state.currentLanguage = language
 		}
 	}
 }
diff --git a/webapp/src/views/preferences/index.vue b/webapp/src/views/preferences/index.vue
@@ -100,6 +100,7 @@ export default {
 			await this.$store.dispatch('updateUser', {profile: this.profile})
 			this.$store.dispatch('notifications/updateSettings', this.notificationSettings)
 			this.$store.dispatch('setAutoplay', this.autoplay)
+			this.$store.dispatch('schedule/setCurrentLanguage', this.interfaceLanguage)
 			localStorage.userLanguage = this.interfaceLanguage
 			try {
 				await this.$store.dispatch('updateUserLocale', this.interfaceLanguage)

diff --git a/webapp/src/views/schedule/index.vue b/webapp/src/views/schedule/index.vue
@@ -141,27 +141,12 @@ export default {
 	computed: {
 		...mapState(['now']),
 		...mapState('schedule', ['schedule', 'errorLoading']),
-		...mapGetters('schedule', ['days', 'rooms', 'sessions', 'favs']),
+		...mapGetters('schedule', ['days', 'rooms', 'sessions', 'favs', 'filterSessionTypesByLanguage', 'filterItemsByLanguage', 'filteredSessions']),
 		exportType() {
 			return exportTypeSet
 		},
 		filteredTracks() {
-			let results = null
-			const self = this
-			Object.keys(this.filter).forEach(key => {
-				const refKey = this.filter[key].refKey
-				const selectedIds = this.filter[key].data.filter(t => t.selected).map(t => t.value)
-				let founds = null
-				if (selectedIds.length) {
-					if (results && results.length) {
-						founds = self.schedule.talks.filter(t => selectedIds.includes(t[refKey]) && results && results.includes(t.id))?.map(i => i.id) || []
-					} else {
-						founds = self.schedule.talks.filter(t => { return selectedIds.includes(t[refKey]) })?.map(i => i.id) || []
-					}
-					results = founds
-				}
-			})
-			return results
+			return this.filteredSessions(this.filter)
 		},
 		tracksLookup() {
 			if (!this.schedule) return {}
@@ -204,9 +189,11 @@ export default {
 		},
 		filter() {
 			const filter = this.defaultFilter
-			filter.tracks.data = this.schedule.tracks.map(t => { t.value = t.id; t.label = t.name; return t })
-			filter.rooms.data = this.schedule.rooms.map(t => { t.value = t.id; t.label = t.name; return t })
-			filter.types.data = this.schedule.session_type.map(t => { t.value = t.session_type; t.label = t.session_type; return t })
+
+			filter.types.data = this.filterSessionTypesByLanguage(this?.schedule?.session_type)
+			filter.rooms.data = this.filterItemsByLanguage(this?.schedule?.rooms)
+			filter.tracks.data = this.filterItemsByLanguage(this?.schedule?.tracks)
+
 			return filter
 		}
 	},
@@ -296,7 +283,7 @@ export default {
 		},
 		resetOnlyFavs() {
 			this.onlyFavs = false
-		}
+		},
 	}
 }
 </script>

diff --git a/webapp/src/views/schedule/sessions/index.vue b/webapp/src/views/schedule/sessions/index.vue
@@ -129,27 +129,12 @@ export default {
 	computed: {
 		...mapState(['now']),
 		...mapState('schedule', ['schedule', 'errorLoading']),
-		...mapGetters('schedule', ['days', 'rooms', 'sessions', 'favs']),
+		...mapGetters('schedule', ['days', 'rooms', 'sessions', 'favs', 'filterSessionTypesByLanguage', 'filterItemsByLanguage', 'filteredSessions']),
 		exportType() {
 			return exportTypeSet
 		},
 		filteredTracks() {
-			let results = null
-			const self = this
-			Object.keys(this.filter).forEach(key => {
-				const refKey = this.filter[key].refKey
-				const selectedIds = this.filter[key].data.filter(t => t.selected).map(t => t.value)
-				let founds = null
-				if (selectedIds.length) {
-					if (results && results.length) {
-						founds = self.schedule.talks.filter(t => selectedIds.includes(t[refKey]) && results && results.includes(t.id))?.map(i => i.id) || []
-					} else {
-						founds = self.schedule.talks.filter(t => { return selectedIds.includes(t[refKey]) })?.map(i => i.id) || []
-					}
-					results = founds
-				}
-			})
-			return results
+			return this.filteredSessions(this.filter)
 		},
 		tracksLookup() {
 			if (!this.schedule) return {}
@@ -192,9 +177,10 @@ export default {
 		},
 		filter() {
 			const filter = this.defaultFilter
-			filter.tracks.data = this.schedule.tracks.map(t => { t.value = t.id; t.label = t.name; return t })
-			filter.rooms.data = this.schedule.rooms.map(t => { t.value = t.id; t.label = t.name; return t })
-			filter.types.data = this.schedule.session_type.map(t => { t.value = t.session_type; t.label = t.session_type; return t })
+
+			filter.types.data = this.filterSessionTypesByLanguage(this?.schedule?.session_type)
+			filter.rooms.data = this.filterItemsByLanguage(this?.schedule?.rooms)
+			filter.tracks.data = this.filterItemsByLanguage(this?.schedule?.tracks)
 			return filter
 		}
 	},
@@ -284,7 +270,7 @@ export default {
 		},
 		resetOnlyFavs() {
 			this.onlyFavs = false
-		}
+		},
 	}
 }
 </script>