Skip to content

Commit e4dfd06

Browse files
Hieu Lam - TMAkhangon
Hieu Lam - TMA
and
khangon
authored
feature-9049: Make tracks and session types sortable similar to microlocations (#9068)
* feature-9049: Make tracks and session types sortable similar to microlocations * feature-9049: Make tracks and session types sortable similar to microlocations --------- Co-authored-by: Khang On - TMA <135116292+khangon@users.noreply.github.com>
1 parent a3f6d5a commit e4dfd06

File tree

6 files changed

+130
-49
lines changed

6 files changed

+130
-49
lines changed

‎app/components/forms/wizard/sessions-speakers-step.js‎

Lines changed: 68 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -175,12 +175,22 @@ export default Component.extend(EventWizardMixin, FormMixin, {
175175
};
176176
},
177177

178-
tracks: computed('data.tracks.@each.isDeleted', function() {
179-
return this.data.tracks.filterBy('isDeleted', false);
178+
tracks: computed('data.tracks.@each.isDeleted', 'data.tracks.@each.position', function() {
179+
const sortedRooms = this.data.event.tracks.sortBy('position').filterBy('isDeleted', false);
180+
sortedRooms.forEach((room, idx) => {
181+
room.set('position', idx);
182+
});
183+
184+
return sortedRooms;
180185
}),
181186

182-
sessionTypes: computed('data.sessionTypes.@each.isDeleted', function() {
183-
return this.data.sessionTypes.filterBy('isDeleted', false);
187+
sessionTypes: computed('data.sessionTypes.@each.isDeleted', 'data.sessionTypes.@each.position', function() {
188+
const sortedRooms = this.data.event.sessionTypes.sortBy('position').filterBy('isDeleted', false);
189+
sortedRooms.forEach((room, idx) => {
190+
room.set('position', idx);
191+
});
192+
193+
return sortedRooms;
184194
}),
185195

186196
hasCallForSpeaker: computed('data.event.isCfsEnabled', function() {
@@ -229,16 +239,6 @@ export default Component.extend(EventWizardMixin, FormMixin, {
229239
},
230240

231241
actions: {
232-
addItem(type) {
233-
switch (type) {
234-
case 'sessionType':
235-
this.data.sessionTypes.addObject(this.store.createRecord('session-type'));
236-
break;
237-
case 'track':
238-
this.data.tracks.addObject(this.store.createRecord('track'));
239-
break;
240-
}
241-
},
242242
addCustomField() {
243243
this.data.customForms.addObject(this.store.createRecord('customForm', {
244244
event : this.data.event,
@@ -260,24 +260,65 @@ export default Component.extend(EventWizardMixin, FormMixin, {
260260
removeField(field) {
261261
this.data.customForms.removeObject(field);
262262
},
263-
addRoom(index) {
264-
this.microlocations.forEach(room => {
265-
const pos = room.get('position');
266-
pos > index && room.set('position', pos + 1);
267-
});
268-
this.data.event.microlocations.addObject(this.store.createRecord('microlocation', { position: index + 1 }));
263+
addRoom(type, index) {
264+
switch (type) {
265+
case 'microlocation':
266+
this.microlocations.forEach(room => {
267+
const pos = room.get('position');
268+
pos > index && room.set('position', pos + 1);
269+
});
270+
this.data.event.microlocations.addObject(this.store.createRecord('microlocation', { position: index + 1 }));
271+
break;
272+
case 'sessionType':
273+
this.sessionTypes.forEach(room => {
274+
const pos = room.get('position');
275+
pos > index && room.set('position', pos + 1);
276+
});
277+
this.data.event.sessionTypes.addObject(this.store.createRecord('session-type', { position: index + 1 }));
278+
break;
279+
case 'track':
280+
this.tracks.forEach(room => {
281+
const pos = room.get('position');
282+
pos > index && room.set('position', pos + 1);
283+
});
284+
this.data.event.tracks.addObject(this.store.createRecord('track', { position: index + 1 }));
285+
break;
286+
}
269287
},
270-
removeRoom(room, index) {
288+
removeRoom(room, type, index) {
271289
room.deleteRecord();
272-
this.microlocations.forEach(item => {
273-
const pos = item.get('position');
274-
pos > index && item.set('position', pos - 1);
275-
});
290+
switch (type) {
291+
case 'microlocation':
292+
this.microlocations.forEach(item => {
293+
const pos = item.get('position');
294+
pos > index && item.set('position', pos - 1);
295+
});
296+
break;
297+
case 'sessionType':
298+
this.sessionTypes.forEach(item => {
299+
const pos = item.get('position');
300+
pos > index && item.set('position', pos - 1);
301+
});
302+
break;
303+
case 'track':
304+
this.tracks.forEach(item => {
305+
const pos = item.get('position');
306+
pos > index && item.set('position', pos - 1);
307+
});
308+
break;
309+
}
276310
},
277-
moveRoom(item, direction) {
311+
moveRoom(item, type, direction) {
278312
const idx = item.get('position');
279313
const otherIdx = direction === 'up' ? (idx - 1) : (idx + 1);
280-
const other = this.microlocations.find(item => item.get('position') === otherIdx);
314+
let other;
315+
if (type === 'microlocation') {
316+
other = this.microlocations.find(item => item.get('position') === otherIdx);
317+
} else if (type === 'sessionType') {
318+
other = this.sessionTypes.find(item => item.get('position') === otherIdx);
319+
} else if (type === 'track') {
320+
other = this.tracks.find(item => item.get('position') === otherIdx);
321+
}
281322
other.set('position', idx);
282323
item.set('position', otherIdx);
283324
},

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

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import classic from 'ember-classic-decorator';
22
import { orderBy } from 'lodash-es';
3-
import { action } from '@ember/object';
3+
import { action, computed } from '@ember/object';
44
import Component from '@ember/component';
55
import { tracked } from '@glimmer/tracking';
66
import { levels } from 'open-event-frontend/utils/dictionary/levels';
@@ -119,4 +119,19 @@ export default class ScheduleMenuFilter extends Component {
119119
this.router.transitionTo('public.sessions', { queryParams: { 'track': this.activeTrack } });
120120
}
121121
}
122+
123+
@computed('event.tracks')
124+
get trackList() {
125+
return orderBy(this.event.tracks.toArray(), ['position']);
126+
}
127+
128+
@computed('event.microlocations')
129+
get microlocationList() {
130+
return orderBy(this.event.microlocations.toArray(), ['position']);
131+
}
132+
133+
@computed('event.sessionTypes')
134+
get sessionTypeList() {
135+
return orderBy(this.event.sessionTypes.toArray(), ['position']);
136+
}
122137
}

‎app/models/session-type.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import ModelBase from 'open-event-frontend/models/base';
33
import { hasMany, belongsTo } from 'ember-data/relationships';
44

55
export default ModelBase.extend({
6-
name : attr('string'),
7-
length : attr('string', { defaultValue: '00:30' }),
6+
name : attr('string'),
7+
length : attr('string', { defaultValue: '00:30' }),
8+
position : attr('number', { defaultValue: 0 }),
89

910
event : belongsTo('event'),
1011
sessions : hasMany('session')

‎app/models/track.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default ModelBase.extend({
88
color : attr('string', { defaultValue: () => getRandomColor() }),
99
description : attr('string'),
1010
fontColor : attr('string'),
11-
12-
sessions : hasMany('session'),
13-
event : belongsTo('event')
11+
position : attr('number', { defaultValue: 0 }),
12+
sessions : hasMany('session'),
13+
event : belongsTo('event')
1414
});

‎app/templates/components/forms/wizard/sessions-speakers-step.hbs‎

Lines changed: 34 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -38,19 +38,19 @@
3838
</h3>
3939
<div class="field">
4040
<label class="required">Tracks</label>
41-
{{#each this.tracks as |track|}}
41+
{{#each this.tracks as |track index|}}
4242
<div class="{{if this.device.isMobile 'grouped'}} fields">
4343
<div class="{{unless this.device.isMobile 'three wide'}} field">
4444
<Input @type="text" @name="track" @value={{track.name}} placeholder={{t "Name"}} />
4545
</div>
4646
<div class="{{unless this.device.isMobile 'four wide'}} field">
4747
<Widgets::Forms::ColorPicker @value={{track.color}} @fontColor={{track.fontColor}}>
4848
{{#if (gt this.tracks.length 1)}}
49-
<button class="ui icon red button" type="button" {{action 'removeItem' track}}>
49+
<button class="ui icon red button" type="button" {{action 'removeRoom' track 'track' index}}>
5050
<i class="minus icon"></i>
5151
</button>
5252
{{/if}}
53-
<button class="ui icon primary button" type="button" {{action 'addItem' 'track'}}>
53+
<button class="ui icon primary button" type="button" {{action 'addRoom' 'track' index}}>
5454
<i class="plus icon"></i>
5555
</button>
5656
</Widgets::Forms::ColorPicker>
@@ -62,6 +62,18 @@
6262
readonly
6363
style={{css background-color=track.color color=(text-color track.color)}}>
6464
</div>
65+
<div class="ui icon buttons {{if this.device.isLargeMonitor 'right floated'}}">
66+
{{#if (not-eq index 0)}}
67+
<button type="button" class="ui button" {{action "moveRoom" track 'track' "up"}} data-content="Move room up">
68+
<i class="up arrow icon"></i>
69+
</button>
70+
{{/if}}
71+
{{#if (not-eq track.position (dec this.tracks.length))}}
72+
<button type="button" class="ui button" {{action "moveRoom" track 'track' "down"}} data-content="Move room down">
73+
<i class="down arrow icon"></i>
74+
</button>
75+
{{/if}}
76+
</div>
6577
</div>
6678
{{/each}}
6779
</div>
@@ -77,11 +89,11 @@
7789
<div class="ui action input fluid">
7890
<Input @type="number" @value={{microlocation.floor}} placeholder={{t "Floor"}} />
7991
{{#if (gt this.microlocations.length 1)}}
80-
<button class="ui icon red button" type="button" {{action 'removeRoom' microlocation index}}>
92+
<button class="ui icon red button" type="button" {{action 'removeRoom' microlocation 'microlocation' index}}>
8193
<i class="minus icon"></i>
8294
</button>
8395
{{/if}}
84-
<button class="ui icon primary button" type="button" {{action 'addRoom' index}}>
96+
<button class="ui icon primary button" type="button" {{action 'addRoom' 'microlocation' index}}>
8597
<i class="plus icon"></i>
8698
</button>
8799
</div>
@@ -94,12 +106,12 @@
94106
</div>
95107
<div class="ui icon buttons {{if this.device.isLargeMonitor 'right floated'}}">
96108
{{#if (not-eq index 0)}}
97-
<button type="button" class="ui button" {{action "moveRoom" microlocation "up"}} data-content="Move room up">
109+
<button type="button" class="ui button" {{action "moveRoom" microlocation 'microlocation' "up"}} data-content="Move room up">
98110
<i class="up arrow icon"></i>
99111
</button>
100112
{{/if}}
101113
{{#if (not-eq microlocation.position (dec this.microlocations.length))}}
102-
<button type="button" class="ui button" {{action "moveRoom" microlocation "down"}} data-content="Move room down">
114+
<button type="button" class="ui button" {{action "moveRoom" microlocation 'microlocation' "down"}} data-content="Move room down">
103115
<i class="down arrow icon"></i>
104116
</button>
105117
{{/if}}
@@ -109,7 +121,7 @@
109121
</div>
110122
<div class="field">
111123
<label class="required">{{t 'Session Types'}}</label>
112-
{{#each this.sessionTypes as |sessionType|}}
124+
{{#each this.sessionTypes as |sessionType index|}}
113125
<div class="{{if this.device.isMobile 'grouped'}} fields">
114126
<div class="{{unless this.device.isMobile 'three wide'}} field">
115127
<Input @type="text" @name="session" @value={{sessionType.name}} placeholder={{t "Name"}} />
@@ -118,15 +130,27 @@
118130
<div class="ui action input fluid">
119131
<Widgets::Forms::TimePicker @value={{sessionType.length}} @placeholder="HH:MM" @icon={{false}} />
120132
{{#if (gt this.sessionTypes.length 1)}}
121-
<button class="ui icon red button" type="button" {{action 'removeItem' sessionType}}>
133+
<button class="ui icon red button" type="button" {{action 'removeRoom' sessionType 'sessionType' index}}>
122134
<i class="minus icon"></i>
123135
</button>
124136
{{/if}}
125-
<button class="ui icon primary button" type="button" {{action 'addItem' 'sessionType'}}>
137+
<button class="ui icon primary button" type="button" {{action 'addRoom' 'sessionType' index}}>
126138
<i class="plus icon"></i>
127139
</button>
128140
</div>
129141
</div>
142+
<div class="ui icon buttons {{if this.device.isLargeMonitor 'right floated'}}">
143+
{{#if (not-eq index 0)}}
144+
<button type="button" class="ui button" {{action "moveRoom" sessionType 'sessionType' "up"}} data-content="Move room up">
145+
<i class="up arrow icon"></i>
146+
</button>
147+
{{/if}}
148+
{{#if (not-eq sessionType.position (dec this.sessionTypes.length))}}
149+
<button type="button" class="ui button" {{action "moveRoom" sessionType 'sessionType' "down"}} data-content="Move room down">
150+
<i class="down arrow icon"></i>
151+
</button>
152+
{{/if}}
153+
</div>
130154
</div>
131155
{{/each}}
132156
</div>

‎app/templates/components/public/schedule-menu-filter.hbs‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
</div>
77
<i class="dropdown icon"></i>
88
<div class="menu">
9-
{{#each this.event.tracks as |track|}}
9+
{{#each this.trackList as |track|}}
1010
<UiCheckbox @class="item" @label={{track.name}} @checked={{if (includes this.activeTrack
1111
track.name) " active"}} @onChange={{action trackFilter track.name }} />
1212
{{/each}}
@@ -18,7 +18,7 @@
1818
</div>
1919
<i class="dropdown icon"></i>
2020
<div class="menu">
21-
{{#each this.event.microlocations as |room|}}
21+
{{#each this.microlocationList as |room|}}
2222
{{#if (not room.hiddenInScheduler)}}
2323
<UiCheckbox @class="item" @label={{room.name}} @checked={{if (includes this.activeRoom room.name) " active"
2424
}} @onChange={{action roomFilter room.name }} />
@@ -32,7 +32,7 @@
3232
</div>
3333
<i class="dropdown icon"></i>
3434
<div class="menu">
35-
{{#each this.event.sessionTypes as |sessionType|}}
35+
{{#each this.sessionTypeList as |sessionType|}}
3636
<UiCheckbox @class="item" @label={{sessionType.name}} @checked={{if (includes this.activeSession
3737
sessionType.name) " active" }} @onChange={{action this.sessionFilter sessionType.name}} />
3838
{{/each}}
@@ -121,7 +121,7 @@
121121
<Icons::ClearFilter />
122122
</LinkTo>
123123
</h4>
124-
{{#each this.event.tracks as |track|}}
124+
{{#each this.trackList as |track|}}
125125
<p role="button" class="track p-1 mb-1 link-item {{if (includes-filter this.activeTrack track.name) " active"}}"
126126
{{action 'applyFilter' track.name 'track' }}>
127127
<i class="circle icon" style={{css color=track.color}}></i>
@@ -135,7 +135,7 @@
135135
<Icons::ClearFilter />
136136
</LinkTo>
137137
</h4>
138-
{{#each this.event.microlocations as |room|}}
138+
{{#each this.microlocationList as |room|}}
139139
{{#if (not room.hiddenInScheduler)}}
140140
<p class="room p-1 mb-1 link-item {{if (includes-filter this.activeRoom room.name) " active"}}" role="button"
141141
{{action 'applyFilter' room.name 'room' }}>
@@ -163,7 +163,7 @@
163163
</div>
164164
<i class="dropdown icon"></i>
165165
<div class="menu">
166-
{{#each this.event.sessionTypes as |sessionType|}}
166+
{{#each this.sessionTypeList as |sessionType|}}
167167
<UiCheckbox @class="item" @label={{sessionType.name}} @checked={{if (includes this.activeSession
168168
sessionType.name) "active" }} @onChange={{action this.sessionFilter sessionType.name}} />
169169
{{/each}}

0 commit comments

Comments
 (0)