Merge pull request #749 from derrabauke/octane-pr-20

refactor: attendances, progress-tooltip and minor fixes

app/analysis/index/controller.js

@@ -147,6 +147,12 @@ export default class AnalysisController extends Controller.extend(
   @tracked _lastPage = 0;
   @tracked selectedReportIds;
 
+  @tracked user;
+  @tracked reviewer;
+  @tracked customer;
+  @tracked project;
+  @tracked task;
+
   get billingTypes() {
     return this.store.findAll("billing-type");
   }

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/components/no-mobile-message/template.hbs

@@ -1,5 +1,5 @@
 <div class="empty">
-  {{fa-icon 'mobile'}}
+  <FaIcon @icon="mobile" />
   <h3>Sorry, this page doesn't work on mobile!</h3>
   <p>
     The data on this page is taking up too much space for your currently used

app/components/optimized-power-select/options/template.hbs

@@ -21,6 +21,7 @@
     @renderAll={{this.isTesting}}
     as |option index|
   >
+    {{!template-lint-disable  require-context-role}}
     <li
       class="ember-power-select-option"
       aria-selected="{{ember-power-select-is-selected option @select.selected}}"
@@ -33,10 +34,10 @@
         {{component
           (ensure-safe-component @extra.optionTemplate)
           option=option
-          current=(eq option this.select.highlighted)
+          current=(eq option @select.highlighted)
         }}
       {{else}}
-        {{yield option this.select}}
+        {{yield option @select}}
       {{/if}}
     </li>
   </VerticalCollection>

app/components/optimized-power-select/trigger/template.hbs

@@ -1,30 +1,36 @@
-{{#if @select.selected}}
-  {{#if @selectedItemComponent}}
+<div class={{@triggerClass}}>
+  {{#if @select.selected}}
+    {{#if @selectedItemComponent}}
+      {{component
+        @selectedItemComponent
+        option=(readonly @select.selected)
+        select=(readonly @select)
+      }}
+    {{else}}
+      <span class="ember-power-select-selected-item">
+        {{#if @extra.selectedTemplate}}
+          {{component
+            (ensure-safe-component @extra.selectedTemplate)
+            selected=@select.selected
+          }}
+        {{else}}
+          {{yield @select.selected @select}}
+        {{/if}}
+      </span>
+    {{/if}}
+    {{#if (and @allowClear (not @select.disabled))}}
+      <span
+        role="button"
+        class="ember-power-select-clear-btn"
+        {{on "mouseup" this.clear}}
+        {{on "ontouchend" this.clear}}
+      >&times;</span>
+    {{/if}}
+  {{else}}
     {{component
-      @selectedItemComponent
-      option=(readonly @select.selected)
-      select=(readonly @select)
+      (ensure-safe-component @placeholderComponent)
+      placeholder=@placeholder
     }}
-  {{else}}
-    <span class="ember-power-select-selected-item">
-      {{#if @extra.selectedTemplate}}
-        {{component (ensure-safe-component @extra.selectedTemplate) selected=@select.selected}}
-      {{else}}
-        {{yield @select.selected @select}}
-      {{/if}}
-    </span>
-  {{/if}}
-  {{#if (and @allowClear (not @select.disabled))}}
-    <span
-      class="ember-power-select-clear-btn"
-      {{on "mousedown" this.clear}}
-      {{on "ontouchstart" this.clear}}
-    >&times;</span>
   {{/if}}
-{{else}}
-  {{component
-    (ensure-safe-component @placeholderComponent)
-    placeholder=@placeholder
-  }}
-{{/if}}
-<span class="ember-power-select-status-icon"></span>
+  <span class="ember-power-select-status-icon"></span>
+</div>