feat: Make rooms sortable (#5743)

Co-authored-by: hb <[email protected]>

Author: codepool867

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

@@ -139,8 +139,13 @@ export default Component.extend(EventWizardMixin, FormMixin, {
     return grouped;
   }),
 
-  microlocations: computed('[email protected]', function() {
-    return this.data.event.microlocations.filterBy('isDeleted', false);
+  microlocations: computed('[email protected]', '[email protected]', function() {
+    const sortedRooms = this.data.event.microlocations.sortBy('position').filterBy('isDeleted', false);
+    sortedRooms.forEach((room, idx) => {
+      room.set('position', idx);
+    });
+
+    return sortedRooms;
   }),
 
   complexCustomForms: computed('[email protected]', function() {
@@ -183,9 +188,6 @@ export default Component.extend(EventWizardMixin, FormMixin, {
         case 'track':
           this.data.tracks.addObject(this.store.createRecord('track'));
           break;
-        case 'microlocation':
-          this.data.microlocations.addObject(this.store.createRecord('microlocation'));
-          break;
       }
     },
     addCustomField() {
@@ -197,6 +199,27 @@ 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 }));
+    },
+    removeRoom(room, index) {
+      room.deleteRecord();
+      this.microlocations.forEach(item => {
+        const pos = item.get('position');
+        pos > index && item.set('position', pos - 1);
+      });
+    },
+    moveRoom(item, direction) {
+      const idx = item.get('position');
+      const otherIdx = direction === 'up' ? (idx - 1) : (idx + 1);
+      const other = this.microlocations.find(item => item.get('position') === otherIdx);
+      other.set('position', idx);
+      item.set('position', otherIdx);
+    },
     resetCFS() {
       this.set('data.speakersCall.announcement', null);
     },

app/controllers/events/view/scheduler.js

@@ -18,6 +18,11 @@ export default class extends Controller {
     return false;
   }
 
+  @computed('model.microlocations')
+  get microlocations() {
+    return this.model.microlocations.sortBy('position');
+  }
+
   @computed('model.unscheduled', 'filter')
   get unscheduledSessions() {
     if (!this.filter || !this.model.unscheduled) {return this.model.unscheduled}

app/models/microlocation.ts

@@ -7,6 +7,7 @@ export default class Microlocation extends ModelBase.extend({
   floor     : attr('number'),
   latitude  : attr('number'),
   longitude : attr('number'),
+  position  : attr('number', { defaultValue: 0 }),
 
   sessions    : hasMany('session'),
   event       : belongsTo('event'),

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

@@ -58,7 +58,7 @@
 
     <div class="field">
       <label class="required">{{t 'Microlocations or Virtual Online Rooms'}}</label>
-      {{#each this.microlocations as |microlocation|}}
+      {{#each this.microlocations as |microlocation index|}}
         <div class="{{if this.device.isMobile 'grouped'}} fields">
           <div class="{{unless this.device.isMobile 'three wide'}} field">
             <Input @type="text" @value={{microlocation.name}} placeholder="Name" />
@@ -67,15 +67,27 @@
             <div class="ui action input fluid">
               <Input @type="number" @value={{microlocation.floor}} placeholder="Floor" />
               {{#if (gt this.microlocations.length 1)}}
-                <button class="ui icon red button" type="button" {{action 'removeItem' microlocation}}>
+                <button class="ui icon red button" type="button" {{action 'removeRoom' microlocation index}}>
                   <i class="minus icon"></i>
                 </button>
               {{/if}}
-              <button class="ui icon primary button" type="button" {{action 'addItem' 'microlocation'}}>
+              <button class="ui icon primary button" type="button" {{action 'addRoom' 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" 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">
+                <i class="down arrow icon"></i>
+              </button>
+            {{/if}}
+          </div>
         </div>
       {{/each}}
     </div>

app/templates/events/view/scheduler.hbs

@@ -26,7 +26,7 @@
       <Schedule
         @event={{this.model.event}}
         @sessions={{this.model.scheduled}}
-        @rooms={{this.model.microlocations}}
+        @rooms={{this.microlocations}}
         @editable={{true}}
         @droppable={{true}}
         @defaultTimedEventDuration={{this.model.defaultDuration}}