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 <[email protected]>

Author: Hieu Lam - TMA

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

@@ -175,12 +175,22 @@ export default Component.extend(EventWizardMixin, FormMixin, {
     };
   },
 
-  tracks: computed('[email protected]', function() {
-    return this.data.tracks.filterBy('isDeleted', false);
+  tracks: computed('[email protected]', '[email protected]', function() {
+    const sortedRooms = this.data.event.tracks.sortBy('position').filterBy('isDeleted', false);
+    sortedRooms.forEach((room, idx) => {
+      room.set('position', idx);
+    });
+
+    return sortedRooms;
   }),
 
-  sessionTypes: computed('[email protected]', function() {
-    return this.data.sessionTypes.filterBy('isDeleted', false);
+  sessionTypes: computed('[email protected]', '[email protected]', function() {
+    const sortedRooms = this.data.event.sessionTypes.sortBy('position').filterBy('isDeleted', false);
+    sortedRooms.forEach((room, idx) => {
+      room.set('position', idx);
+    });
+
+    return sortedRooms;
   }),
 
   hasCallForSpeaker: computed('data.event.isCfsEnabled', function() {
@@ -229,16 +239,6 @@ export default Component.extend(EventWizardMixin, FormMixin, {
   },
 
   actions: {
-    addItem(type) {
-      switch (type) {
-        case 'sessionType':
-          this.data.sessionTypes.addObject(this.store.createRecord('session-type'));
-          break;
-        case 'track':
-          this.data.tracks.addObject(this.store.createRecord('track'));
-          break;
-      }
-    },
     addCustomField() {
       this.data.customForms.addObject(this.store.createRecord('customForm', {
         event     : this.data.event,
@@ -260,24 +260,65 @@ export default Component.extend(EventWizardMixin, FormMixin, {
     removeField(field) {
       this.data.customForms.removeObject(field);
     },
-    addRoom(index) {
-      this.microlocations.forEach(room => {
-        const pos = room.get('position');
-        pos > index && room.set('position', pos + 1);
-      });
-      this.data.event.microlocations.addObject(this.store.createRecord('microlocation', { position: index + 1 }));
+    addRoom(type, index) {
+      switch (type) {
+        case 'microlocation':
+          this.microlocations.forEach(room => {
+            const pos = room.get('position');
+            pos > index && room.set('position', pos + 1);
+          });
+          this.data.event.microlocations.addObject(this.store.createRecord('microlocation', { position: index + 1 }));
+          break;
+        case 'sessionType':
+          this.sessionTypes.forEach(room => {
+            const pos = room.get('position');
+            pos > index && room.set('position', pos + 1);
+          });
+          this.data.event.sessionTypes.addObject(this.store.createRecord('session-type', { position: index + 1 }));
+          break;
+        case 'track':
+          this.tracks.forEach(room => {
+            const pos = room.get('position');
+            pos > index && room.set('position', pos + 1);
+          });
+          this.data.event.tracks.addObject(this.store.createRecord('track', { position: index + 1 }));
+          break;
+      }
     },
-    removeRoom(room, index) {
+    removeRoom(room, type, index) {
       room.deleteRecord();
-      this.microlocations.forEach(item => {
-        const pos = item.get('position');
-        pos > index && item.set('position', pos - 1);
-      });
+      switch (type) {
+        case 'microlocation':
+          this.microlocations.forEach(item => {
+            const pos = item.get('position');
+            pos > index && item.set('position', pos - 1);
+          });
+          break;
+        case 'sessionType':
+          this.sessionTypes.forEach(item => {
+            const pos = item.get('position');
+            pos > index && item.set('position', pos - 1);
+          });
+          break;
+        case 'track':
+          this.tracks.forEach(item => {
+            const pos = item.get('position');
+            pos > index && item.set('position', pos - 1);
+          });
+          break;
+      }
     },
-    moveRoom(item, direction) {
+    moveRoom(item, type, direction) {
       const idx = item.get('position');
       const otherIdx = direction === 'up' ? (idx - 1) : (idx + 1);
-      const other = this.microlocations.find(item => item.get('position') === otherIdx);
+      let other;
+      if (type === 'microlocation') {
+        other = this.microlocations.find(item => item.get('position') === otherIdx);
+      } else if (type === 'sessionType') {
+        other = this.sessionTypes.find(item => item.get('position') === otherIdx);
+      } else if (type === 'track') {
+        other = this.tracks.find(item => item.get('position') === otherIdx);
+      }
       other.set('position', idx);
       item.set('position', otherIdx);
     },

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

@@ -1,6 +1,6 @@
 import classic from 'ember-classic-decorator';
 import { orderBy } from 'lodash-es';
-import { action } from '@ember/object';
+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';
@@ -119,4 +119,19 @@ export default class ScheduleMenuFilter extends Component {
         this.router.transitionTo('public.sessions', { queryParams: { 'track': this.activeTrack } });
       }
     }
+
+    @computed('event.tracks')
+    get trackList() {
+      return orderBy(this.event.tracks.toArray(), ['position']);
+    }
+
+    @computed('event.microlocations')
+    get microlocationList() {
+      return orderBy(this.event.microlocations.toArray(), ['position']);
+    }
+
+    @computed('event.sessionTypes')
+    get sessionTypeList() {
+      return orderBy(this.event.sessionTypes.toArray(), ['position']);
+    }
 }

app/models/session-type.js

@@ -3,8 +3,9 @@ import ModelBase from 'open-event-frontend/models/base';
 import { hasMany, belongsTo } from 'ember-data/relationships';
 
 export default ModelBase.extend({
-  name   : attr('string'),
-  length : attr('string', { defaultValue: '00:30' }),
+  name     : attr('string'),
+  length   : attr('string', { defaultValue: '00:30' }),
+  position : attr('number', { defaultValue: 0 }),
 
   event    : belongsTo('event'),
   sessions : hasMany('session')

app/models/track.js

@@ -8,7 +8,7 @@ export default ModelBase.extend({
   color       : attr('string', { defaultValue: () => getRandomColor() }),
   description : attr('string'),
   fontColor   : attr('string'),
-
-  sessions : hasMany('session'),
-  event    : belongsTo('event')
+  position    : attr('number', { defaultValue: 0 }),
+  sessions    : hasMany('session'),
+  event       : belongsTo('event')
 });

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

@@ -38,19 +38,19 @@
     </h3>
     <div class="field">
       <label class="required">Tracks</label>
-      {{#each this.tracks as |track|}}
+      {{#each this.tracks as |track index|}}
         <div class="{{if this.device.isMobile 'grouped'}} fields">
           <div class="{{unless this.device.isMobile 'three wide'}} field">
             <Input @type="text" @name="track" @value={{track.name}} placeholder={{t "Name"}} />
           </div>
           <div class="{{unless this.device.isMobile 'four wide'}} field">
             <Widgets::Forms::ColorPicker @value={{track.color}} @fontColor={{track.fontColor}}>
               {{#if (gt this.tracks.length 1)}}
-                <button class="ui icon red button" type="button" {{action 'removeItem' track}}>
+                <button class="ui icon red button" type="button" {{action 'removeRoom' track 'track' index}}>
                   <i class="minus icon"></i>
                 </button>
               {{/if}}
-              <button class="ui icon primary button" type="button" {{action 'addItem' 'track'}}>
+              <button class="ui icon primary button" type="button" {{action 'addRoom' 'track' index}}>
                 <i class="plus icon"></i>
               </button>
             </Widgets::Forms::ColorPicker>
@@ -62,6 +62,18 @@
                    readonly
                    style={{css background-color=track.color color=(text-color track.color)}}>
           </div>
+          <div class="ui icon buttons {{if this.device.isLargeMonitor 'right floated'}}">
+            {{#if (not-eq index 0)}}
+              <button type="button" class="ui button" {{action "moveRoom" track 'track' "up"}} data-content="Move room up">
+                <i class="up arrow icon"></i>
+              </button>
+            {{/if}}
+            {{#if (not-eq track.position (dec this.tracks.length))}}
+              <button type="button" class="ui button" {{action "moveRoom" track 'track' "down"}} data-content="Move room down">
+                <i class="down arrow icon"></i>
+              </button>
+            {{/if}}
+          </div>
         </div>
       {{/each}}
     </div>
@@ -77,11 +89,11 @@
             <div class="ui action input fluid">
               <Input @type="number" @value={{microlocation.floor}} placeholder={{t "Floor"}} />
               {{#if (gt this.microlocations.length 1)}}
-                <button class="ui icon red button" type="button" {{action 'removeRoom' microlocation index}}>
+                <button class="ui icon red button" type="button" {{action 'removeRoom' microlocation 'microlocation' index}}>
                   <i class="minus icon"></i>
                 </button>
               {{/if}}
-              <button class="ui icon primary button" type="button" {{action 'addRoom' index}}>
+              <button class="ui icon primary button" type="button" {{action 'addRoom' 'microlocation' index}}>
                 <i class="plus icon"></i>
               </button>
             </div>
@@ -94,12 +106,12 @@
           </div>
           <div class="ui icon buttons {{if this.device.isLargeMonitor 'right floated'}}">
             {{#if (not-eq index 0)}}
-              <button type="button" class="ui button" {{action "moveRoom" microlocation "up"}} data-content="Move room up">
+              <button type="button" class="ui button" {{action "moveRoom" microlocation 'microlocation' "up"}} data-content="Move room up">
                 <i class="up arrow icon"></i>
               </button>
             {{/if}}
             {{#if (not-eq microlocation.position (dec this.microlocations.length))}}
-              <button type="button" class="ui button" {{action "moveRoom" microlocation "down"}} data-content="Move room down">
+              <button type="button" class="ui button" {{action "moveRoom" microlocation 'microlocation' "down"}} data-content="Move room down">
                 <i class="down arrow icon"></i>
               </button>
             {{/if}}
@@ -109,7 +121,7 @@
     </div>
     <div class="field">
       <label class="required">{{t 'Session Types'}}</label>
-      {{#each this.sessionTypes as |sessionType|}}
+      {{#each this.sessionTypes as |sessionType index|}}
         <div class="{{if this.device.isMobile 'grouped'}} fields">
           <div class="{{unless this.device.isMobile 'three wide'}} field">
             <Input @type="text" @name="session" @value={{sessionType.name}} placeholder={{t "Name"}} />
@@ -118,15 +130,27 @@
             <div class="ui action input fluid">
               <Widgets::Forms::TimePicker @value={{sessionType.length}} @placeholder="HH:MM" @icon={{false}} />
               {{#if (gt this.sessionTypes.length 1)}}
-                <button class="ui icon red button" type="button" {{action 'removeItem' sessionType}}>
+                <button class="ui icon red button" type="button" {{action 'removeRoom' sessionType 'sessionType' index}}>
                   <i class="minus icon"></i>
                 </button>
               {{/if}}
-              <button class="ui icon primary button" type="button" {{action 'addItem' 'sessionType'}}>
+              <button class="ui icon primary button" type="button" {{action 'addRoom' 'sessionType' index}}>
                 <i class="plus icon"></i>
               </button>
             </div>
           </div>
+          <div class="ui icon buttons {{if this.device.isLargeMonitor 'right floated'}}">
+            {{#if (not-eq index 0)}}
+              <button type="button" class="ui button" {{action "moveRoom" sessionType 'sessionType' "up"}} data-content="Move room up">
+                <i class="up arrow icon"></i>
+              </button>
+            {{/if}}
+            {{#if (not-eq sessionType.position (dec this.sessionTypes.length))}}
+              <button type="button" class="ui button" {{action "moveRoom" sessionType 'sessionType' "down"}} data-content="Move room down">
+                <i class="down arrow icon"></i>
+              </button>
+            {{/if}}
+          </div>
         </div>
       {{/each}}
     </div>

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

@@ -6,7 +6,7 @@
         </div>
         <i class="dropdown icon"></i>
         <div class="menu">
-            {{#each this.event.tracks as |track|}}
+            {{#each this.trackList as |track|}}
             <UiCheckbox @class="item" @label={{track.name}} @checked={{if (includes this.activeTrack
                 track.name) " active"}} @onChange={{action trackFilter track.name }} />
             {{/each}}
@@ -18,7 +18,7 @@
         </div>
         <i class="dropdown icon"></i>
         <div class="menu">
-            {{#each this.event.microlocations as |room|}}
+            {{#each this.microlocationList as |room|}}
             {{#if (not room.hiddenInScheduler)}}
             <UiCheckbox @class="item" @label={{room.name}} @checked={{if (includes this.activeRoom room.name) " active"
                 }} @onChange={{action roomFilter room.name }} />
@@ -32,7 +32,7 @@
         </div>
         <i class="dropdown icon"></i>
         <div class="menu">
-            {{#each this.event.sessionTypes as |sessionType|}}
+            {{#each this.sessionTypeList as |sessionType|}}
             <UiCheckbox @class="item" @label={{sessionType.name}} @checked={{if (includes this.activeSession
                 sessionType.name) " active" }} @onChange={{action this.sessionFilter sessionType.name}} />
             {{/each}}
@@ -121,7 +121,7 @@
             <Icons::ClearFilter />
         </LinkTo>
     </h4>
-    {{#each this.event.tracks as |track|}}
+    {{#each this.trackList as |track|}}
     <p role="button" class="track p-1 mb-1 link-item {{if (includes-filter this.activeTrack track.name) " active"}}"
         {{action 'applyFilter' track.name 'track' }}>
         <i class="circle icon" style={{css color=track.color}}></i>
@@ -135,7 +135,7 @@
             <Icons::ClearFilter />
         </LinkTo>
     </h4>
-    {{#each this.event.microlocations as |room|}}
+    {{#each this.microlocationList as |room|}}
     {{#if (not room.hiddenInScheduler)}}
     <p class="room p-1 mb-1 link-item {{if (includes-filter this.activeRoom room.name) " active"}}" role="button"
         {{action 'applyFilter' room.name 'room' }}>
@@ -163,7 +163,7 @@
         </div>
         <i class="dropdown icon"></i>
         <div class="menu">
-            {{#each this.event.sessionTypes as |sessionType|}}
+            {{#each this.sessionTypeList as |sessionType|}}
             <UiCheckbox @class="item" @label={{sessionType.name}} @checked={{if (includes this.activeSession
                 sessionType.name) "active" }} @onChange={{action this.sessionFilter sessionType.name}} />
             {{/each}}