feature-9081: Show sidebar filter option for languages (#9116)

* feature-9081: Show sidebar filter option for languages

* feature-9081: Show sidebar filter option for languages

* feature-9081: Show sidebar filter option for languages

Author: Hieu Lam - TMA

app/components/public/schedule-menu-filter.js

@@ -4,6 +4,7 @@ import { action, computed } from '@ember/object';
 import Component from '@ember/component';
 import { tracked } from '@glimmer/tracking';
 import { levels } from 'open-event-frontend/utils/dictionary/levels';
+import { languages } from 'open-event-frontend/utils/dictionary/languages';
 
 @classic
 export default class ScheduleMenuFilter extends Component {
@@ -16,8 +17,11 @@ export default class ScheduleMenuFilter extends Component {
 
     @tracked activeTrack = this.router.currentRoute.queryParams.track ? this.router.currentRoute.queryParams.track.split(',') : [];
 
+    @tracked activeLanguage = this.router.currentRoute.queryParams.language ? this.router.currentRoute.queryParams.language.split(',') : [];
+
     @tracked levels = orderBy(levels, 'position');
 
+    @tracked languageList = [];
 
     @action
     removeActiveSession() {
@@ -29,6 +33,11 @@ export default class ScheduleMenuFilter extends Component {
       this.activeSessionLevel = [];
     }
 
+    @action
+    removeActiveLanguage() {
+      this.activeLanguage = [];
+    }
+
     @action
     removeActiveRoom() {
       this.activeRoom = [];
@@ -90,12 +99,26 @@ export default class ScheduleMenuFilter extends Component {
       this.router.transitionTo('public.sessions', { queryParams: { 'track': this.activeTrack } });
     }
 
+    @action
+    languageFilter(name) {
+      this.activeLanguage = this.router.currentRoute.queryParams.language ? this.router.currentRoute.queryParams.language.split(',') : [];
+      if (this.activeLanguage.includes(name)) {
+        this.activeLanguage = this.activeLanguage.filter(language => language !== name);
+      } else {
+        this.activeLanguage = [...this.activeLanguage, name];
+      }
+      this.router.transitionTo('public.sessions', { queryParams: { 'language': this.activeLanguage } });
+    }
+
     @action
     applyFilter(value, filterType) {
       const params = this.router.currentRoute.queryParams;
       if (!params.track) {
         this.activeTrack = [];
       }
+      if (!params.language) {
+        this.activeLanguage = [];
+      }
       if (!params.room) {
         this.activeRoom = [];
       }
@@ -134,4 +157,22 @@ export default class ScheduleMenuFilter extends Component {
     get sessionTypeList() {
       return orderBy(this.event.sessionTypes.toArray(), ['position']);
     }
+
+    async didInsertElement() {
+      const response = await this.loader.load(`/events/${this.event.id}/sessions/languages`);
+      const languageList = [];
+      languages.forEach(language => {
+        response.forEach(item => {
+          if (item === language.name) {
+            languageList.push(language);
+          }
+        });
+      });
+      this.set('languageList', languageList);
+    }
+
+    @computed('languageList.@each')
+    get languageFilterList() {
+      return orderBy(this.languageList.toArray(), ['name']);
+    }
 }

app/routes/public/sessions.js

@@ -16,6 +16,9 @@ export default class SessionsRoute extends Route {
     track: {
       refreshModel: true
     },
+    language: {
+      refreshModel: true
+    },
     room: {
       refreshModel: true
     },
@@ -105,6 +108,35 @@ export default class SessionsRoute extends Route {
       });
     }
 
+    if (params.language) {
+      const conditionOr = [];
+      params.language.split(',').map(val => {
+        val = val.trim();
+        conditionOr.push({
+          name : 'language',
+          op   : 'eq',
+          val
+        });
+      });
+      if (conditionOr.length > 0) {
+        filterOptions.push(
+          {
+            and: [
+              {
+                or: conditionOr
+              }
+            ]
+          }
+        );
+      } else {
+        filterOptions.push({
+          name : 'language',
+          op   : 'eq',
+          val  : params.language
+        });
+      }
+    }
+
     if (params.sessionType) {
       const sessions = params.sessionType.split(',');
       filterOptions.push({