DEV: Convert to native class syntax (#88)

Author: davidtaylorhq

assets/javascripts/components/teambuild-choice.js

@@ -1,19 +1,21 @@
 import Component from "@ember/component";
-import { computed } from "@ember/object";
+import { action, computed } from "@ember/object";
+import { tagName } from "@ember-decorators/component";
 
-export default Component.extend({
-  tagName: "",
-
-  completed: computed("progress.completed.[]", function () {
+@tagName("")
+export default class TeambuildChoice extends Component {
+  @computed("progress.completed.[]")
+  get completed() {
     return this.progress.isComplete(this.target, this.userId);
-  }),
+  }
+
+  @action
+  complete() {
+    this.progress.complete(this.target, this.userId);
+  }
 
-  actions: {
-    complete() {
-      this.progress.complete(this.target, this.userId);
-    },
-    undo() {
-      this.progress.undo(this.target, this.userId);
-    },
-  },
-});
+  @action
+  undo() {
+    this.progress.undo(this.target, this.userId);
+  }
+}

assets/javascripts/discourse/controllers/team-build-manage.js

@@ -1,38 +1,39 @@
 import Controller from "@ember/controller";
+import { action } from "@ember/object";
 import { sort } from "@ember/object/computed";
 import { Types } from "discourse/plugins/discourse-teambuild/discourse/models/teambuild-target";
 
-export default Controller.extend({
-  targets: null,
+export default class TeamBuildManageController extends Controller {
+  targets = null;
+  targetSort = ["position"];
 
-  targetSort: ["position"],
+  @sort("targets", "targetSort") sortedTargets;
 
-  sortedTargets: sort("targets", "targetSort"),
+  @action
+  move(idx, direction) {
+    let item = this.sortedTargets[idx];
+    let other = this.sortedTargets[idx + direction];
+    if (item && other) {
+      item.swapPosition(other);
+    }
+  }
 
-  actions: {
-    move(idx, direction) {
-      let item = this.sortedTargets[idx];
-      let other = this.sortedTargets[idx + direction];
-      if (item && other) {
-        item.swapPosition(other);
-      }
-    },
+  @action
+  newTarget() {
+    let maxPosition = 0;
+    if (this.targets.length > 0) {
+      maxPosition = Math.max(...this.targets.map((t) => t.position));
+    }
+    this.targets.pushObject(
+      this.store.createRecord("teambuild-target", {
+        target_type_id: Types.REGULAR,
+        position: maxPosition + 1,
+      })
+    );
+  }
 
-    newTarget() {
-      let maxPosition = 0;
-      if (this.targets.length > 0) {
-        maxPosition = Math.max(...this.targets.map((t) => t.position));
-      }
-      this.targets.pushObject(
-        this.store.createRecord("teambuild-target", {
-          target_type_id: Types.REGULAR,
-          position: maxPosition + 1,
-        })
-      );
-    },
-
-    removeTarget(t) {
-      this.targets.removeObject(t);
-    },
-  },
-});
+  @action
+  removeTarget(t) {
+    this.targets.removeObject(t);
+  }
+}

assets/javascripts/discourse/controllers/team-build-progress.js

@@ -1,6 +1,6 @@
 import Controller from "@ember/controller";
 import { propertyNotEqual } from "discourse/lib/computed";
 
-export default Controller.extend({
-  readOnly: propertyNotEqual("currentUser.id", "progress.user.id"),
-});
+export default class TeamBuildProgressController extends Controller {
+  @propertyNotEqual("currentUser.id", "progress.user.id") readOnly;
+}

assets/javascripts/discourse/models/teambuild-progress.js

@@ -5,10 +5,10 @@ function choiceKey(target, userId) {
   return `${target.id}:${userId}`;
 }
 
-export default RestModel.extend({
+export default class TeambuildProgress extends RestModel {
   isComplete(target, userId) {
     return this.completed.includes(choiceKey(target, userId));
-  },
+  }
 
   complete(target, userId) {
     target
@@ -17,7 +17,7 @@ export default RestModel.extend({
         this.completed.addObject(choiceKey(target, userId));
       })
       .catch(popupAjaxError);
-  },
+  }
 
   undo(target, userId) {
     target
@@ -26,5 +26,5 @@ export default RestModel.extend({
         this.completed.removeObject(choiceKey(target, userId));
       })
       .catch(popupAjaxError);
-  },
-});
+  }
+}

assets/javascripts/discourse/models/teambuild-target.js

@@ -6,7 +6,7 @@ export const Types = {
   USER_GROUP: 2,
 };
 
-export default RestModel.extend({
+export default class TeambuildTarget extends RestModel {
   swapPosition(other) {
     let tmp = this.position;
     this.set("position", other.position);
@@ -16,17 +16,17 @@ export default RestModel.extend({
       method: "PUT",
       data: { other_id: other.id },
     });
-  },
+  }
 
   complete(userId) {
     return ajax(`/team-build/complete/${this.id}/${userId}`, {
       method: "PUT",
     });
-  },
+  }
 
   undo(userId) {
     return ajax(`/team-build/undo/${this.id}/${userId}`, {
       method: "DELETE",
     });
-  },
-});
+  }
+}

assets/javascripts/discourse/routes/team-build-index.js

@@ -1,12 +1,12 @@
 import Route from "@ember/routing/route";
 import { ajax } from "discourse/lib/ajax";
 
-export default Route.extend({
+export default class TeamBuildIndexRoute extends Route {
   model() {
     return ajax("/team-build/scores.json");
-  },
+  }
 
   setupController(controller, model) {
     controller.set("scores", model.scores);
-  },
-});
+  }
+}

assets/javascripts/discourse/routes/team-build-manage.js

@@ -1,11 +1,11 @@
 import Route from "@ember/routing/route";
 
-export default Route.extend({
+export default class TeamBuildManageRoute extends Route {
   model() {
     return this.store.findAll("teambuild-target");
-  },
+  }
 
   setupController(controller, targets) {
     controller.setProperties({ targets, groups: targets.extras.groups });
-  },
-});
+  }
+}

assets/javascripts/discourse/routes/team-build-progress.js

@@ -1,11 +1,11 @@
 import Route from "@ember/routing/route";
 
-export default Route.extend({
+export default class TeamBuildProgressRoute extends Route {
   model() {
     return this.store.find("teambuild-progress", this.currentUser.username);
-  },
+  }
 
   setupController(controller, progress) {
     controller.setProperties({ progress });
-  },
-});
+  }
+}

assets/javascripts/discourse/routes/team-build-show.js

@@ -1,15 +1,15 @@
 import Route from "@ember/routing/route";
 
-export default Route.extend({
+export default class TeamBuildShowRoute extends Route {
   model(params) {
     return this.store.find("teambuild-progress", params.username);
-  },
+  }
 
   setupController(controller, progress) {
     this.controllerFor("teamBuild.progress").setProperties({ progress });
-  },
+  }
 
   renderTemplate() {
     this.render("teamBuild.progress");
-  },
-});
+  }
+}