refactor(attendance-slider): octanify and fix tests

app/components/attendance-slider/component.js

@@ -1,16 +1,16 @@
-import Component from "@ember/component";
-import { computed } from "@ember/object";
 /**
  * @module timed
  * @submodule timed-components
  * @public
  */
+
+import Component from "@glimmer/component";
 import { htmlSafe } from "@ember/string";
-import classic from "ember-classic-decorator";
-import { task } from "ember-concurrency";
 import { padStartTpl } from "ember-pad/utils/pad";
 import moment from "moment";
 import formatDuration from "timed/utils/format-duration";
+import { tracked } from "@glimmer/tracking";
+import { dropTask } from "ember-concurrency";
 
 const padTpl2 = padStartTpl(2);
 
@@ -42,27 +42,27 @@ const Formatter = {
  * @extends Ember.Component
  * @public
  */
-@classic
 export default class AttendanceSlider extends Component {
   /**
    * The attendance
    *
    * @property {Attendance} attendance
    * @public
    */
-  attendance = null;
+  @tracked values;
+  @tracked tooltips;
 
   /**
    * Initialize the component
    *
    * @method init
    * @public
    */
-  init(...args) {
-    super.init(...args);
+  constructor(...args) {
+    super(...args);
 
-    this.set("tooltips", [Formatter, Formatter]);
-    this.set("values", this.start);
+    this.tooltips = [Formatter, Formatter];
+    this.values = this.start;
   }
 
   /**
@@ -71,15 +71,14 @@ export default class AttendanceSlider extends Component {
    * @property {Number[]} start
    * @public
    */
-  @computed("attendance.{from,to}")
   get start() {
     return [
-      this.get("attendance.from").hour() * 60 +
-        this.get("attendance.from").minute(),
+      this.args.attendance.from.hour() * 60 +
+        this.args.attendance.from.minute(),
       // If the end time is 00:00 we need to clarify that this would be 00:00
       // of the next day
-      this.get("attendance.to").hour() * 60 +
-        this.get("attendance.to").minute() || 24 * 60,
+      this.args.attendance.to.hour() * 60 + this.args.attendance.to.minute() ||
+        24 * 60,
     ];
   }
 
@@ -89,7 +88,6 @@ export default class AttendanceSlider extends Component {
    * @property {String} duration
    * @public
    */
-  @computed("values")
   get duration() {
     const from = moment({ hour: 0 }).minute(this.values[0]);
     const to = moment({ hour: 0 }).minute(this.values[1]);
@@ -103,7 +101,6 @@ export default class AttendanceSlider extends Component {
    * @property {String[]} labels
    * @public
    */
-  @computed
   get labels() {
     const labels = [];
 
@@ -130,27 +127,27 @@ export default class AttendanceSlider extends Component {
    * @param {Number[]} values The time in minutes
    * @public
    */
-  @(task(function* ([fromMin, toMin]) {
-    const attendance = this.attendance;
+  @dropTask
+  *save([fromMin, toMin]) {
+    const attendance = this.args.attendance;
 
     attendance.set(
       "from",
       moment(attendance.get("from")).hour(0).minute(fromMin)
     );
     attendance.set("to", moment(attendance.get("to")).hour(0).minute(toMin));
 
-    yield this["on-save"](attendance);
-  }).drop())
-  save;
+    yield this.args.onSave(attendance);
+  }
 
   /**
    * Delete the attendance
    *
    * @method delete
    * @public
    */
-  @(task(function* () {
-    yield this["on-delete"](this.attendance);
-  }).drop())
-  delete;
+  @dropTask
+  *delete() {
+    yield this.args.onDelete(this.args.attendance);
+  }
 }

app/components/attendance-slider/template.hbs

@@ -1,15 +1,36 @@
-<RangeSlider @start={{this.start}} @step={{15}} @min={{0}} @max={{1440}} @connect={{true}} @animate={{true}} @behaviour="drag" @tooltips={{this.tooltips}} @on-slide={{action (mut this.values)}} @on-change={{action (perform this.save)}} />
+<div class="attendance-slider" ...attributes>
+  <RangeSlider
+    @start={{this.start}}
+    @step={{15}}
+    @min={{0}}
+    @max={{1440}}
+    @connect={{true}}
+    @animate={{true}}
+    @behaviour="drag"
+    @tooltips={{this.tooltips}}
+    @on-slide={{fn (mut this.values)}}
+    @on-change={{perform this.save}}
+  />
 
-<div class="slider-labels">
-  {{#each this.labels as |label|}}
-    <div style={{label.style}} class="slider-label slider-label--{{label.size}}">
-      <div class="slider-label-text">
-        {{label.value}}
+  <div class="slider-labels">
+    {{#each this.labels as |label|}}
+      <div
+        style={{label.style}}
+        class="slider-label slider-label--{{label.size}}"
+      >
+        <div class="slider-label-text">
+          {{label.value}}
+        </div>
       </div>
-    </div>
-  {{/each}}
-</div>
+    {{/each}}
+  </div>
 
-<div class="slider-title">
-  <span>{{this.duration}}</span> {{fa-icon 'trash' data-test-delete-attendance=true click=(perform this.delete)}}
+  <div class="slider-title">
+    <span>{{this.duration}}</span>
+    <FaIcon
+      @icon="trash"
+      data-test-delete-attendance="true"
+      {{on "click" (perform this.delete)}}
+    />
+  </div>
 </div>

app/index/attendances/template.hbs

@@ -1,38 +1,59 @@
 <div class="btn-toolbar btn-toolbar--right form-group">
-  <button type="button" class="btn btn-success" data-test-add-attendance {{action 'addAttendance'}}>Add attendance</button>
+  <button
+    type="button"
+    class="btn btn-success"
+    data-test-add-attendance
+    {{on "click" (route-action "addAttendance")}}
+  >Add attendance</button>
 </div>
 <div class="attendances">
   {{#if this.attendances}}
-    {{#if (or (media 'isXl') (media 'isLg') (media 'isMd'))}}
+    {{#if (or (media "isXl") (media "isLg") (media "isMd"))}}
       {{#each this.attendances as |attendance|}}
-        {{attendance-slider
-          data-test-attendance-slider=true
-          data-test-attendance-slider-id=attendance.id
-          attendance = (changeset attendance this.AttendanceValidator)
-          on-save    = (route-action 'saveAttendance')
-          on-delete  = (route-action 'deleteAttendance')
-        }}
+        <AttendanceSlider
+          data-test-attendance-slider
+          data-test-attendance-slider-id={{attendance.id}}
+          @attendance={{(changeset attendance this.AttendanceValidator)}}
+          @onSave={{(route-action "saveAttendance")}}
+          @onDelete={{(route-action "deleteAttendance")}}
+        />
       {{/each}}
     {{else}}
       <table class="table table--striped table--attendances">
         <tbody>
           {{#each this.attendances as |attendance|}}
-            {{#with (changeset attendance this.AttendanceValidator) as |model|}}
+            {{#let (changeset attendance this.AttendanceValidator) as |model|}}
               <tr
                 data-test-attendance-slider
-                data-test-attendance-slider-id={{attendance.id}}>
+                data-test-attendance-slider-id={{attendance.id}}
+              >
                 <td>
-                  {{sy-timepicker value=model.from onChange=(action (mut model.from))}}
+                  <SyTimepicker
+                    @value={{model.from}}
+                    @onChange={{fn (mut model.from)}}
+                  />
                 </td>
                 <td>
-                  {{sy-timepicker value=model.to onChange=(action (mut model.to))}}
+                  <SyTimepicker
+                    @value={{model.to}}
+                    @onChange={{fn (mut model.to)}}
+                  />
                 </td>
                 <td>
-                  <button type="button" class="btn btn-danger" {{action 'deleteAttendance' model}}>{{fa-icon 'trash'}}</button>
-                  <button type="submit" class="btn btn-primary" disabled={{not (and model.isDirty model.isValid)}} {{action 'saveAttendance' model}}>{{fa-icon 'save'}}</button>
+                  <button
+                    type="button"
+                    class="btn btn-danger"
+                    {{on "click" (route-action "deleteAttendance" model)}}
+                  ><FaIcon @icon="trash" /></button>
+                  <button
+                    type="submit"
+                    class="btn btn-primary"
+                    disabled={{not (and model.isDirty model.isValid)}}
+                    {{on "click" (route-action "saveAttendance" model)}}
+                  ><FaIcon @icon="save" /></button>
                 </td>
               </tr>
-            {{/with}}
+            {{/let}}
           {{/each}}
         </tbody>
       </table>
@@ -41,6 +62,6 @@
     <div class="text-center"><em>No attendances yet</em></div>
   {{/if}}
   <div class="text-center">
-    <br>
+    <br />
   </div>
 </div>

app/styles/app.scss

@@ -31,6 +31,7 @@
 @import "components/tracking-bar";
 @import "components/sy-calendar";
 @import "components/sy-datepicker";
+@import "components/attendance-slider";
 
 html {
   hyphens: auto;