Emberjs upgrade

.github/workflows/rails.yml

@@ -25,10 +25,10 @@ jobs:
         bundler-cache: true # runs 'bundle install' and caches installed gems automatically
     - uses: actions/setup-node@v2
       with:
-        node-version: '12' # TODO version should not be specified
+        node-version: '14' # TODO version should not be specified
 
     - name: Install Ember-Cli with NPM
-      run: npm install -g ember-cli@3.17  # TODO version should not be specified
+      run: npm install -g ember-cli@3.28.6  # TODO version should not be specified
       working-directory: frontend
 
     - name: Install dependencies Yarn

config/application.rb

@@ -28,6 +28,8 @@ class Application < Rails::Application
     config.autoload_paths += %W( #{config.root}/app/uploaders) #
     config.i18n.default_locale = :de
 
+    config.active_record.verify_foreign_keys_for_fixtures = false
+
     # Bullet tries to add finish_at to insert statement, which does not exist anymore
     config.active_record.partial_inserts = true
 

frontend/README.md

@@ -9,6 +9,45 @@
 This is the Frontend part of the PuzzleSkills setup documentation  
 The Frontend is built with [Ember.js](https://emberjs.com/)
 
+## Prerequisites
+
+You will need the following things properly installed on your computer.
+
+* [Git](https://git-scm.com/)
+* [Node.js](https://nodejs.org/) (with NPM)
+* [Ember CLI](https://ember-cli.com/)
+* [NVM](https://github.com/creationix/nvm)
+
+## Installation Guide
+
+Install node version 14 with the Node Version Manager
+```shell
+nvm install 14
+```
+Install Ember-Cli version 3.28.6 with NPM
+```shell
+npm install -g ember-cli@3.28.6
+```
+Go into the frontend folder of the project
+```shell
+cd frontend
+```
+There, run yarn install which will install all the packages
+```shell
+yarn install
+```
+
+## Running / Development
+
+With the rails backend server running you can start the frontend, directing it at the rails server on port 3000
+
+```shell
+ember server --proxy=http://localhost:3000
+```
+Congratulations the PuzzleSkills Application is now online, you can visit it at
+
+##### <code> [http://localhost:4200](http://localhost:4200) </code>
+
 ## Documentation
 
 ### Code Generators

frontend/app/components/core-competences-show.js

@@ -40,7 +40,9 @@ export default class CoreCompetencesShow extends Component {
           .filter(s => s !== undefined);
         if (skills.length) hash[category.get("title")] = skills;
       });
-      this.set("coreCompetencesObj", hash);
+      if (!this.get("isDestroyed")) {
+        this.set("coreCompetencesObj", hash);
+      }
     });
   }
 

frontend/app/components/delete-with-confirmation.js

@@ -14,22 +14,47 @@ export default class DeleteWithConfirmation extends Component {
 
   @action
   openConfirmation() {
+    if (!this.get("router.currentURL").includes("skills")) {
+      document
+        .getElementById("people-search-header")
+        .classList.remove("zIndexThousand");
+      document
+        .getElementById("people-search-header")
+        .classList.add("zIndexOne");
+    }
     this.set("showConfirmation", true);
   }
 
   @action
   cancel() {
+    if (!this.get("router.currentURL").includes("skills")) {
+      document
+        .getElementById("people-search-header")
+        .classList.remove("zIndexThousand");
+      document
+        .getElementById("people-search-header")
+        .classList.add("zIndexOne");
+    }
     this.set("showConfirmation", false);
   }
 
   @action
   delete(entry, transitionTo) {
+    if (!this.get("router.currentURL").includes("skills")) {
+      document
+        .getElementById("people-search-header")
+        .classList.remove("zIndexOne");
+      document
+        .getElementById("people-search-header")
+        .classList.add("zIndexThousand");
+    }
+
     const message = this.intl.t("delete-confirmation.success", {
       name: entry.instanceToString
     });
 
+    this.set("showConfirmation", false);
     entry.destroyRecord().then(() => {
-      this.set("showConfirmation", false);
       if (isPresent(transitionTo)) {
         this.get("router").transitionTo(transitionTo);
       }

frontend/app/components/new-people-skills-show.js

@@ -22,7 +22,9 @@ export default Component.extend({
   },
 
   refreshNewPeopleSkills(skills) {
-    this.set("isLoading", true);
+    if (!this.get("isDestroyed")) {
+      this.set("isLoading", false);
+    }
     let loadBegin = Date.now();
     this.get("ajax")
       .request("/skills/unrated_by_person", {
@@ -37,7 +39,9 @@ export default Component.extend({
           loadEnd - loadBegin > this.get("minimumLoadTime") ||
           ENV.environment == "test"
         ) {
-          this.set("isLoading", false);
+          if (!this.get("isDestroyed")) {
+            this.set("isLoading", false);
+          }
         } else {
           setTimeout(() => {
             this.set("isLoading", false);
@@ -58,7 +62,9 @@ export default Component.extend({
           if (a.get("skill.title") < b.get("skill.title")) return -1;
           return 0;
         });
-        this.set("newPeopleSkills", peopleSkills);
+        if (!this.get("isDestroyed")) {
+          this.set("newPeopleSkills", peopleSkills);
+        }
       });
   },
 

frontend/app/components/people-search.js

@@ -16,7 +16,6 @@ export default class PeopleSearch extends Component {
     return currentId ? this.store.peekRecord("person", currentId) : undefined;
   }
 
-  @computed("this.args.people")
   get peopleToSelect() {
     return this.args.people.toArray().sort((a, b) => {
       if (a.get("name") < b.get("name")) return -1;

frontend/app/components/people-skill-edit.js

@@ -8,25 +8,32 @@ import { isBlank } from "@ember/utils";
 export default class PeopleSkillEdit extends Component {
   init() {
     super.init(...arguments);
-    this.set("interestLevelOptions", [0, 1, 2, 3, 4, 5]);
     this.set("levelValue", this.get("peopleSkill.level"));
 
     if (!this.get("peopleSkill.level")) {
       this.set("levelValue", 1);
-      /* eslint-disable ember/no-global-jquery, no-undef, ember/jquery-ember-run  */
-      $(".slider-handle").ready(() => {
-        this.sliderHandle = this.$(".slider-handle:first");
-        if (!this.sliderHandle) return;
-        this.sliderHandle.removeClass("slider-handle");
-        this.$(".in-selection").removeClass("in-selection");
+    }
+  }
+
+  @action
+  sliderLoading(element) {
+    // Sorry for doing this like that, but we couldn't make it work with element.querySelector().ready().
+    /* eslint-disable ember/no-global-jquery, no-undef, ember/jquery-ember-run  */
+    $(".slider-handle").ready(() => {
+      this.sliderTickContainer = element.querySelector(
+        ".slider-tick-container"
+      ).children[0];
+      this.sliderTickContainer.classList.remove("in-selection");
+
+      this.sliderHandle = element.querySelector(".slider-handle");
+      this.sliderHandle.classList.remove("slider-handle");
 
-        this.$(".slider").on("mouseup", () => {
-          this.sliderHandle.addClass("slider-handle");
-          this.notifyPropertyChange("levelValue");
-        });
-        /* eslint-enable ember/no-global-jquery, no-undef, ember/jquery-ember-run  */
+      element.addEventListener("mouseup", () => {
+        this.sliderHandle.classList.add("slider-handle");
+        this.notifyPropertyChange("levelValue");
       });
-    }
+    });
+    /* eslint-enable ember/no-global-jquery, no-undef, ember/jquery-ember-run  */
   }
 
   @computed("peopleSkill.level")

frontend/app/components/people-skill-show.js

@@ -6,20 +6,20 @@ import Component from "@ember/component";
 
 @classic
 export default class PeopleSkillShow extends Component {
+  /* eslint-disable ember/no-global-jquery, no-undef, ember/jquery-ember-run  */
+
   @service router;
 
   init() {
     super.init(...arguments);
     this.set("levelValue", this.get("peopleSkill.level"));
     if (!this.get("peopleSkill.level")) {
       this.set("levelValue", 1);
-      /* eslint-disable ember/no-global-jquery, no-undef, ember/jquery-ember-run  */
       $(".slider-handle").ready(() => {
-        this.sliderHandle = this.$(".slider-handle:first");
+        this.sliderHandle = $(".slider-handle:first");
         if (!this.sliderHandle) return;
         this.sliderHandle.removeClass("slider-handle");
-        this.$(".in-selection").removeClass("in-selection");
-        /* eslint-enable ember/no-global-jquery, no-undef, ember/jquery-ember-run  */
+        $(".in-selection").removeClass("in-selection");
       });
     }
   }
@@ -60,9 +60,11 @@ export default class PeopleSkillShow extends Component {
   @action
   adjustSliderStylingOnReset() {
     if (!this.get("peopleSkill.level")) {
-      this.sliderHandle = this.$(".slider-handle:first");
+      this.sliderHandle = $(".slider-handle:first");
       this.sliderHandle.removeClass("slider-handle");
-      this.$(".in-selection").removeClass("in-selection");
+      $(".in-selection").removeClass("in-selection");
     }
   }
+
+  /* eslint-enable ember/no-global-jquery, no-undef, ember/jquery-ember-run  */
 }

frontend/app/components/people-skills-show.js

@@ -100,6 +100,8 @@ export default Component.extend({
     return hash;
   },
 
+  /* eslint-disable ember/no-global-jquery, no-undef, ember/jquery-ember-run  */
+
   actions: {
     submit(person) {
       person
@@ -118,7 +120,7 @@ export default Component.extend({
         .then(() => this.set("peopleSkillsEditing", false))
         .then(() => this.get("notify").success("Successfully saved!"))
         .then(() =>
-          this.$("#peopleSkillsHeader")[0].scrollIntoView({
+          $("#peopleSkillsHeader")[0].scrollIntoView({
             behavior: "smooth"
           })
         )
@@ -158,11 +160,13 @@ export default Component.extend({
         }
       });
       this.set("peopleSkillsEditing", false);
-      this.$("#peopleSkillsHeader")[0].scrollIntoView({ behavior: "smooth" });
+      $("#peopleSkillsHeader")[0].scrollIntoView({ behavior: "smooth" });
     },
 
     toggleSkillShow(skill) {
       this.set("currentSkill", skill);
     }
   }
+
+  /* eslint-enable ember/no-global-jquery, no-undef, ember/jquery-ember-run  */
 });

frontend/app/components/person-actions.js

@@ -3,10 +3,6 @@ import { observes } from "@ember-decorators/object";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import Component from "@ember/component";
-/* eslint-disable ember/new-module-imports  */
-import Ember from "ember";
-const { $ } = Ember;
-/* eslint-enable ember/new-module-imports  */
 
 @classic
 export default class PersonActions extends Component {
@@ -25,6 +21,7 @@ export default class PersonActions extends Component {
 
   @observes("person.peopleSkills.@each.id")
   peopleSkillsChanged() {
+    if (!this.get("person.id")) return;
     this.refreshUnratedSkillsAmount();
   }
 
@@ -36,10 +33,13 @@ export default class PersonActions extends Component {
         }
       })
       .then(response => {
-        this.set("unratedSkillsAmount", response.data.length);
+        if (!this.get("isDestroyed")) {
+          this.set("unratedSkillsAmount", response.data.length);
+        }
       });
   }
 
+  /* eslint-disable ember/no-global-jquery, no-undef, ember/jquery-ember-run  */
   didRender() {
     const currentURL = this.get("router.currentURL");
     if (currentURL.includes("skills")) {
@@ -61,6 +61,7 @@ export default class PersonActions extends Component {
       $("#person-cv-export").modal("toggle");
     }
   }
+  /* eslint-enable ember/no-global-jquery, no-undef, ember/jquery-ember-run  */
 
   @action
   exportDevFws(personId, e) {

frontend/app/components/picture-edit.js

@@ -51,8 +51,10 @@ export default class PictureEdit extends Component {
     this.set("response", ObjectPromiseProxy.create({ promise: res }));
   }
 
+  /* eslint-disable ember/no-global-jquery, no-undef, ember/jquery-ember-run  */
+
   didInsertElement() {
-    this.$(".img-input").on("change", e => {
+    $(".img-input").on("change", e => {
       if (e.target.files.length) {
         this.uploadImage(e.target.files[0]);
         e.target.value = null;
@@ -62,6 +64,8 @@ export default class PictureEdit extends Component {
 
   @action
   changePicture() {
-    this.$(".img-input").click();
+    $(".img-input").click();
   }
+
+  /* eslint-enable ember/no-global-jquery, no-undef, ember/jquery-ember-run  */
 }

frontend/app/routes/people.js

@@ -11,6 +11,9 @@ export default class PeopleRoute extends Route.extend(
   @service
   ajax;
 
+  @service
+  store;
+
   @service
   selectedPerson;
 

frontend/app/routes/people/new.js

@@ -1,9 +1,12 @@
 import classic from "ember-classic-decorator";
 import { action } from "@ember/object";
 import Route from "@ember/routing/route";
+import { inject as service } from "@ember/service";
 
 @classic
 export default class NewRoute extends Route {
+  @service store;
+
   model() {
     return this.store.createRecord("person");
   }

frontend/app/routes/person.js

@@ -8,6 +8,9 @@ export default class PersonRoute extends Route {
   @service
   selectedPerson;
 
+  @service
+  store;
+
   model(params) {
     return this.store.findRecord("person", params.person_id);
   }

frontend/app/routes/person/skills.js

@@ -15,6 +15,9 @@ export default class SkillsRoute extends Route.extend(
   @service
   router;
 
+  @service
+  store;
+
   queryParams = {
     rated: {
       refreshModel: true,