Skip to content

Commit d42db26

Browse files
khangoncweitat
khangon
and
cweitat
authored
feature-8751: Improve mobile display of schedule (#8809)
* feature-8751: Improve mobile display of schedule * feature-8751: Improve mobile display of schedule * feature-8751 translation for schedule filter * feature-8751 fix css: UI broken when have multiple filter * feature-8751: add translate * feature-8751 css setting for filter box * feature-8751 fix issue clear all filter * feature-8751 fix issue clear all filter not working * feature-8751 remove unsed code * feature-8751 fix pylint: remove unused import * feature-8751: Improve mobile display of schedule change filter label * feature-8751 add translation --------- Co-authored-by: cweitat <[email protected]>
1 parent 5534a09 commit d42db26

File tree

27 files changed

+1645
-169
lines changed

27 files changed

+1645
-169
lines changed

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

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import classic from 'ember-classic-decorator';
2+
import { orderBy } from 'lodash-es';
3+
import { action } from '@ember/object';
4+
import Component from '@ember/component';
5+
import { tracked } from '@glimmer/tracking';
6+
import { levels } from 'open-event-frontend/utils/dictionary/levels';
7+
8+
@classic
9+
export default class ScheduleMenuFilter extends Component {
10+
11+
@tracked activeSession = this.router.currentRoute.queryParams.sessionType ? this.router.currentRoute.queryParams.sessionType.split(',') : [];
12+
13+
@tracked activeSessionLevel = this.router.currentRoute.queryParams.level ? this.router.currentRoute.queryParams.level.split(',') : [];
14+
15+
@tracked activeRoom = this.router.currentRoute.queryParams.room ? this.router.currentRoute.queryParams.room.split(',') : [];
16+
17+
@tracked activeTrack = this.router.currentRoute.queryParams.track ? this.router.currentRoute.queryParams.track.split(',') : [];
18+
19+
@tracked levels = orderBy(levels, 'position');
20+
21+
22+
@action
23+
removeActiveSession() {
24+
this.activeSession = [];
25+
}
26+
27+
@action
28+
removeActiveSessionLevel() {
29+
this.activeSessionLevel = [];
30+
}
31+
32+
@action
33+
removeActiveRoom() {
34+
this.activeRoom = [];
35+
}
36+
37+
@action
38+
removeActiveTrack() {
39+
this.activeTrack = [];
40+
}
41+
42+
removeActiveClass(name) {
43+
const activeEls = document.querySelectorAll(`.${name}.link-item.active`);
44+
activeEls.forEach(el => {
45+
el.classList.remove('active');
46+
});
47+
}
48+
49+
@action
50+
sessionFilter(name) {
51+
this.activeSession = this.router.currentRoute.queryParams.sessionType ? this.router.currentRoute.queryParams.sessionType.split(',') : [];
52+
if (this.activeSession.includes(name)) {
53+
this.activeSession = this.activeSession.filter(session => session !== name);
54+
} else {
55+
this.activeSession = [...this.activeSession, name];
56+
}
57+
this.router.transitionTo('public.sessions', { queryParams: { 'sessionType': this.activeSession } });
58+
}
59+
60+
@action
61+
sessionLevelFilter(level) {
62+
this.activeSessionLevel = this.router.currentRoute.queryParams.level ? this.router.currentRoute.queryParams.level.split(',') : [];
63+
if (this.activeSessionLevel.includes(level)) {
64+
this.activeSessionLevel = this.activeSessionLevel.filter(val => val !== level);
65+
} else {
66+
this.activeSessionLevel = [...this.activeSessionLevel, level];
67+
}
68+
this.router.transitionTo('public.sessions', { queryParams: { 'level': this.activeSessionLevel } });
69+
}
70+
71+
@action
72+
roomFilter(name) {
73+
this.activeRoom = this.router.currentRoute.queryParams.room ? this.router.currentRoute.queryParams.room.split(',') : [];
74+
if (this.activeRoom.includes(name)) {
75+
this.activeRoom = this.activeRoom.filter(room => room !== name);
76+
} else {
77+
this.activeRoom = [...this.activeRoom, name];
78+
}
79+
this.router.transitionTo('public.sessions', { queryParams: { 'room': this.activeRoom } });
80+
}
81+
82+
@action
83+
trackFilter(name) {
84+
this.activeTrack = this.router.currentRoute.queryParams.track ? this.router.currentRoute.queryParams.track.split(',') : [];
85+
if (this.activeTrack.includes(name)) {
86+
this.activeTrack = this.activeTrack.filter(track => track !== name);
87+
} else {
88+
this.activeTrack = [...this.activeTrack, name];
89+
}
90+
this.router.transitionTo('public.sessions', { queryParams: { 'track': this.activeTrack } });
91+
}
92+
93+
@action
94+
applyFilter(value, filterType) {
95+
const params = this.router.currentRoute.queryParams;
96+
if (!params.track) {
97+
this.activeTrack = [];
98+
}
99+
if (!params.room) {
100+
this.activeRoom = [];
101+
}
102+
if (!params.sessionType) {
103+
this.activeSession = [];
104+
}
105+
value = value + ':';
106+
if (filterType === 'room') {
107+
if (this.activeRoom.includes(value)) {
108+
this.activeRoom = this.activeRoom.filter(room => room !== value);
109+
} else {
110+
this.activeRoom = [...this.activeRoom, value];
111+
}
112+
this.router.transitionTo('public.sessions', { queryParams: { 'room': this.activeRoom } });
113+
} else {
114+
if (this.activeTrack.includes(value)) {
115+
this.activeTrack = this.activeTrack.filter(track => track !== value);
116+
} else {
117+
this.activeTrack = [...this.activeTrack, value];
118+
}
119+
this.router.transitionTo('public.sessions', { queryParams: { 'track': this.activeTrack } });
120+
}
121+
}
122+
}

‎app/controllers/public.js

Lines changed: 0 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import classic from 'ember-classic-decorator';
2-
import { orderBy } from 'lodash-es';
32
import { computed, action } from '@ember/object';
43
import Controller from '@ember/controller';
54
import moment from 'moment-timezone';
65
import { tracked } from '@glimmer/tracking';
76
import { inject as service } from '@ember/service';
8-
import { levels } from 'open-event-frontend/utils/dictionary/levels';
97

108
@classic
119
export default class PublicController extends Controller {
@@ -17,18 +15,9 @@ export default class PublicController extends Controller {
1715
side_panel = null;
1816
video_dialog = null;
1917

20-
@tracked activeSession = this.router.currentRoute.queryParams.sessionType ? this.router.currentRoute.queryParams.sessionType.split(',') : [];
21-
22-
@tracked activeSessionLevel = this.router.currentRoute.queryParams.level ? this.router.currentRoute.queryParams.level.split(',') : [];
23-
24-
@tracked activeRoom = this.router.currentRoute.queryParams.room ? this.router.currentRoute.queryParams.room.split(',') : [];
25-
26-
@tracked activeTrack = this.router.currentRoute.queryParams.track ? this.router.currentRoute.queryParams.track.split(',') : [];
27-
2818
@tracked hasStreams = null;
2919
@tracked canAccess = null;
3020

31-
@tracked levels = orderBy(levels, 'position');
3221
@tracked shown = false;
3322

3423
@computed('model.socialLinks')
@@ -162,73 +151,6 @@ export default class PublicController extends Controller {
162151
}
163152
}
164153

165-
@action
166-
removeActiveSession() {
167-
this.activeSession = [];
168-
}
169-
170-
@action
171-
removeActiveSessionLevel() {
172-
this.activeSessionLevel = [];
173-
}
174-
175-
removeActiveClass(name) {
176-
const activeEls = document.querySelectorAll(`.${name}.link-item.active`);
177-
activeEls.forEach(el => {
178-
el.classList.remove('active');
179-
});
180-
}
181-
182-
@action
183-
sessionFilter(name) {
184-
if (this.activeSession.includes(name)) {
185-
this.activeSession = this.activeSession.filter(session => session !== name);
186-
} else {
187-
this.activeSession = [...this.activeSession, name];
188-
}
189-
this.router.transitionTo('public.sessions', { queryParams: { 'sessionType': this.activeSession } });
190-
}
191-
192-
@action
193-
sessionLevelFilter(level) {
194-
if (this.activeSessionLevel.includes(level)) {
195-
this.activeSessionLevel = this.activeSessionLevel.filter(val => val !== level);
196-
} else {
197-
this.activeSessionLevel = [...this.activeSessionLevel, level];
198-
}
199-
this.router.transitionTo('public.sessions', { queryParams: { 'level': this.activeSessionLevel } });
200-
}
201-
202-
@action
203-
applyFilter(value, filterType) {
204-
const params = this.router.currentRoute.queryParams;
205-
if (!params.track) {
206-
this.activeTrack = [];
207-
}
208-
if (!params.room) {
209-
this.activeRoom = [];
210-
}
211-
if (!params.sessionType) {
212-
this.activeSession = [];
213-
}
214-
value = value + ':';
215-
if (filterType === 'room') {
216-
if (this.activeRoom.includes(value)) {
217-
this.activeRoom = this.activeRoom.filter(room => room !== value);
218-
} else {
219-
this.activeRoom = [...this.activeRoom, value];
220-
}
221-
this.router.transitionTo('public.sessions', { queryParams: { 'room': this.activeRoom } });
222-
} else {
223-
if (this.activeTrack.includes(value)) {
224-
this.activeTrack = this.activeTrack.filter(track => track !== value);
225-
} else {
226-
this.activeTrack = [...this.activeTrack, value];
227-
}
228-
this.router.transitionTo('public.sessions', { queryParams: { 'track': this.activeTrack } });
229-
}
230-
}
231-
232154
@action
233155
async showSidePanel() {
234156
await this.set('side_panel', null);

‎app/controllers/public/sessions.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,8 @@ export default class SessionsController extends Controller {
6969
activeEls.forEach(el => {
7070
el.classList.remove('active');
7171
});
72+
document.querySelectorAll('input[type="checkbox"]')
73+
.forEach(el => el.checked = false);
7274
}
7375

7476
async loadDates() {

0 commit comments

Comments
 (0)