Emberjs upgrade (#526)

* Upgrade ember to 3.18.0

* Upgrade ember to 3.19.0

* Upgrade ember to 3.20.0

* Upgrade ember to 3.21.0

* Upgrade ember to 3.22.0

* Upgrade ember to 3.23.0

* Remove ember-fetch

* Upgrade ember to 3.24.0

* Upgrade ember-cli-string-helpers

* Upgrade nodejs version to 14.19.0

* Upgrade ember-qunit

* Upgrade ember to 3.28.0, ember-auto-import, ember-bootstrap, ember-source and add qunit

* Upgrade ember to 3.28.6, add custom ember-cli-icon-rating, set bootstrap version to 3 and update ember-bootstrap, ember-basic-dropdown and ember-power-select-with-create

* Upgrade ember-cli-sass to 10.0.1, bootstrap-sass to 3.4.1, ember-moment to 9.0.1 and add node-sass to dependencies

* Upgrade ember-cli-babel to 7.26.11

* Upgrade ember-data to 3.28.13

* Upgrade ember-cli-htmlbars to 5.7.2

* Upgrade rollup to 1.12.0

* Update browser list

* Update ember-modifier, ember-power-select-with-create and add @ember/string

* Update multiple dependencies (@ember/render-modifiers, ember-intl, ember-validated-form, ember-changeset-validations, ember-cli-app-version, ember-collapsible-panel, ember-confirm-dialog, ember-keyboard, ember-notify, ember-simple-auth, ember-toggle)

* Upgrade ember-bootstrap and use bootstrap 4

* Upgrade @ember/optional-features and remove unused config

* Upgrade ember-route-action-helper

* Use qunit for test method and not ember-qunit

* Fix not running frontend tests

* Update yarn.lock and fix dependency alert

* Add qunit setup to ember test helpers

* Add @service annotation for this.store

* Set jquery-integration to false

* Make submit button blue

* Downgrade ember-keyboard to 6.0.4

* Fix jquery bug

* Regenerate yarn.lock file

* Make eslint happy

* Upgrade jquery

* Replace this.$() with $()

* Change ember version in rails.yml

* Add allowed versions to dependency-lint.js

* Upgrade qunit-dom

* Fix testing errors with qunit-dom

* Fix locale error in tests

* Remove import from $ jquery in tests

* Replace jquery with querySelector in person-cv-export-test

* Try fixing test problems with document queryselector

* Replace document with this.element

* Revert document querySelector to assert.dom

* Set locale in new-people-skills-show-test

* Add ember-fetch

* Fix failing tests, remove $.text() and replace this.render with await render

* Replace $ with document.querySelector

* Remove dependency lint error

* Update yarn.lock

* Remove person form tests because they will be new in feature #351

* Add @initiallyOpened={{false}} and @renderInPlace={{true}} to Ember Power Selects

* Fix daterange-edit-tests with this.$ error

* Remove css bug with header menu over drop down

* Remove bug with not possible to delete person

* Remove bug with overlay from people search on person delete

* Fix tests in frontend

* Remove unused eslint disable

* Move button styling to custom.scss

* Adjust readme with specific ember cli version

* Fix tests in frontend

* Resolve bug with setting something on deleted record

* Adjust eslint disabling

* Fix pipeline bug with calling set on destroyed record

* Remove outcommented rootElement = "ember-testing"

* Revert changes in skill-search-test.js

* Implement feedback from pr

* Fix bug with 2 times clicking on new skill in skill set

* Fix pipeline bug with calling set on destroyed record

* Fix failing text

* Remove bug with multiple selection of ui slider

* Fix bug with first point of ui slider always dark blue marked

* Resolve pr review

* Fix bug when editing people skills

* Remove outcommented code

* Fix failing test people skill edit

* Resolve pr feedback

* Fix bug with resetting people skill and broken slider bubbles

* Replace sleep with setTimeout

* Remove bubbles bug when editing all people skills

* Resolve pr feedback

.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'
 
     - 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
       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/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,27 +14,48 @@ export default class DeleteWithConfirmation extends Component {
 
   @action
   openConfirmation() {
+    if (!this.get("router.currentURL").includes("skills")) {
+      this.removeZIndex("z-index-thousand");
+      this.addZIndex("z-index-one");
+    }
     this.set("showConfirmation", true);
   }
 
   @action
   cancel() {
+    if (!this.get("router.currentURL").includes("skills")) {
+      this.removeZIndex("z-index-thousand");
+      this.addZIndex("z-index-one");
+    }
     this.set("showConfirmation", false);
   }
 
   @action
   delete(entry, transitionTo) {
+    if (!this.get("router.currentURL").includes("skills")) {
+      this.removeZIndex("z-index-one");
+      this.addZIndex("z-index-thousand");
+    }
+
     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);
       }
       this.get("notify").success(message);
       if (this.didDelete) this.didDelete();
     });
   }
+
+  removeZIndex(index) {
+    document.getElementById("people-search-header").classList.remove(index);
+  }
+
+  addZIndex(index) {
+    document.getElementById("people-search-header").classList.add(index);
+  }
 }

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

@@ -3,30 +3,53 @@ import { observes } from "@ember-decorators/object";
 import { action, computed } from "@ember/object";
 import Component from "@ember/component";
 import { isBlank } from "@ember/utils";
+import { inject as service } from "@ember/service";
+import config from "../config/environment";
 
 @classic
 export default class PeopleSkillEdit extends Component {
+  @service router;
+
   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  */
+    }
+  }
+
+  @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  */
+    if (
+      config.environment !== "test" &&
+      (document.querySelector("#peopleSkillsHeader").contains(element) ||
+        document.querySelector("#new-people-skills-show").contains(element))
+    ) {
+      if (
+        document.querySelector("#peopleSkillsHeader").contains(element) &&
+        this.get("peopleSkill.level") !== 0
+      )
+        return;
+
       $(".slider-handle").ready(() => {
-        this.sliderHandle = this.$(".slider-handle:first");
-        if (!this.sliderHandle) return;
-        this.sliderHandle.removeClass("slider-handle");
-        this.$(".in-selection").removeClass("in-selection");
+        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");
+        element.addEventListener("mouseup", () => {
+          this.sliderHandle.classList.add("slider-handle");
           this.notifyPropertyChange("levelValue");
         });
-        /* eslint-enable ember/no-global-jquery, no-undef, ember/jquery-ember-run  */
       });
     }
+    /* eslint-enable ember/no-global-jquery, no-undef, ember/jquery-ember-run  */
   }
 
   @computed("peopleSkill.level")

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

@@ -13,17 +13,26 @@ export default class PeopleSkillShow extends Component {
     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");
-        /* eslint-enable ember/no-global-jquery, no-undef, ember/jquery-ember-run  */
-      });
     }
   }
 
+  @action
+  sliderLoading(element) {
+    /* eslint-disable ember/no-global-jquery, no-undef, ember/jquery-ember-run  */
+    $(".slider-handle").ready(() => {
+      if (this.get("peopleSkill.level") === 0) {
+        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");
+      }
+    });
+    /* eslint-enable ember/no-global-jquery, no-undef, ember/jquery-ember-run  */
+  }
+
   didRender() {
     const currentURL = this.get("router.currentURL");
     const skillClass = currentURL == "/skills" ? "skillset" : "member-skillset";
@@ -60,9 +69,13 @@ export default class PeopleSkillShow extends Component {
   @action
   adjustSliderStylingOnReset() {
     if (!this.get("peopleSkill.level")) {
-      this.sliderHandle = this.$(".slider-handle:first");
-      this.sliderHandle.removeClass("slider-handle");
-      this.$(".in-selection").removeClass("in-selection");
+      this.sliderHandleFirstChild = this.element.querySelector(
+        ".slider-tick-container"
+      ).children[0];
+      this.sliderHandleFirstChild.classList.remove("in-selection");
+      this.element
+        .querySelector(".slider-handle")
+        .classList.remove("slider-handle");
     }
   }
 }

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

@@ -118,7 +118,7 @@ export default Component.extend({
         .then(() => this.set("peopleSkillsEditing", false))
         .then(() => this.get("notify").success("Successfully saved!"))
         .then(() =>
-          this.$("#peopleSkillsHeader")[0].scrollIntoView({
+          document.querySelectorAll("#peopleSkillsHeader")[0].scrollIntoView({
             behavior: "smooth"
           })
         )
@@ -158,7 +158,9 @@ export default Component.extend({
         }
       });
       this.set("peopleSkillsEditing", false);
-      this.$("#peopleSkillsHeader")[0].scrollIntoView({ behavior: "smooth" });
+      document
+        .querySelectorAll("#peopleSkillsHeader")[0]
+        .scrollIntoView({ behavior: "smooth" });
     },
 
     toggleSkillShow(skill) {

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,

frontend/app/routes/skill-search.js

@@ -1,5 +1,6 @@
 import classic from "ember-classic-decorator";
 import Route from "@ember/routing/route";
+import { inject as service } from "@ember/service";
 
 @classic
 export default class SkillSearchRoute extends Route {
@@ -18,6 +19,8 @@ export default class SkillSearchRoute extends Route {
     }
   };
 
+  @service store;
+
   model({ skill_id, level, interest }) {
     if (skill_id) {
       return this.store.query("peopleSkill", {

frontend/app/routes/skills/index.js

@@ -1,6 +1,7 @@
 import classic from "ember-classic-decorator";
 import Route from "@ember/routing/route";
 import KeycloakAuthenticatedRouteMixin from "ember-keycloak-auth/mixins/keycloak-authenticated-route";
+import { inject as service } from "@ember/service";
 
 @classic
 export default class IndexRoute extends Route.extend(
@@ -22,6 +23,7 @@ export default class IndexRoute extends Route.extend(
       replace: true
     }
   };
+  @service store;
 
   model({ defaultSet, category, title }) {
     return this.store.query("skill", { defaultSet, category, title });