Can not open exported excel file in ExcelJS

I have used ExcelJS libary in my JS project. It works fine with English letters. But if I change my application language in to French and export the content as a excel sheet. Then the below mentioned error is coming. Anyone know what cause this issue and a solution for this?

Cannot set img width/height in SetDragImage()

I was trying to customize drag image. What I did was

dragStart(event) {
    event.dataTransfer.setData('type', event.target.getAttribute('data-type'));
    event.dataTransfer.setData('id', event.target.id);

    let img = document.createElement('img');
    img.setAttribute('src', event.target.src);
    img.style.width = '50px';
    img.style.height = '50px';
    event.dataTransfer.setDragImage(img, 0, 0);
  } 

I tried various ways but the drag image is still the same size as my src. Screenshot

Thanks.

Uncaught type error: Cannot read property 'ajax' of undefined

I'm new to ember.js and this is my first application. I want to build a login form in which if the user has passed in the right email and password, he should be transitioned to the home page. I am not sure whether I should use Ember Data for the login part but I read somewhere that Ember Data is not suitable for this specific login task so I should make ajax request (Is this assumption right ?). However, when I made the request I received the following error :

Uncaught type error: Cannot read property 'ajax' of undefined at LoginComponent.logUser

I have made the http request in a login component class but I am not sure whether I should use a controller for this part as in all the examples I have seen the request was handled in controllers. However, I do not know how to use the login controller on a click on the login button.

So I have a few more questions apart from how to handle the error that I have:

1. Should I use Ember Data (if yes how) for the login task or should I use the ajax method?
2. What is the difference between a controller and component(the class) and when I should use each of them user clicks on handling data or making request as in this case?

Thank you in advance for your help!

Here is my code

login.hbs - template:

<h1 id="pageTitle">Log In</h1>
<Login/>

login.hbs - component:

<form  id="login">
    <label class='formElement labelLogin'>Email :</label><br>
    <Input class='formElement input' @value=/><br>
    <label class='formElement labelLogin'>Password :</label><br>
    <Input class='formElement input' @value=/><br>
    <button id="loginButton" class='button formElement' type="submit">Log In</button> 
</form>

login.js - component class

import Component from '@ember/component';
import { action } from "@ember/object";
import { tracked } from "@glimmer/tracking";

export default class LoginComponent extends Component{
  @tracked email;
  @tracked password;

  @action
  logUser(){
        let userData = JSON.stringify({
            'email' : this.email,
            'password' : this.password
        });
        Ember.$.ajax({
            url : 'https://gara6.bg/auto-api/users/login',
            type : 'POST',
            dataType: 'json',
            data : userData,
        }).then(() => {
            alert('Logged In');
            this.transitionToRoute('home');
        }).catch(function(error){
            alert(`Error: ${error}`);
        });
    }
}

routes.js:

import EmberRouter from '@ember/routing/router';
import config from 'gara6/config/environment';

export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}

Router.map(function () {
  this.route('login');
  this.route('home');
});
  

Autogenerate import for Ember

Im using Ember with VS Code.

What I need is to generate import string on a fly when I encounter dependency. For example I write someting like:

@tracked isLarge = false;

But I don’t have “@tracked” imported yet. So the otion could be to set the coursor on @tracked, press something like “Action + .” and pick “generate import”. It should generate import string:

import { tracked } from '@ember/tracking';

But it doesn’t work out of the box. How can I do that?

Ember - Pass Event and Other Parameter to Action Handler

In my Ember component, I have a list of strings, and a function that update the string at certain index of the list.

animals: computed(function() {
    return ["dog", "cat"];
}),

updateAnimal(value, index) {
    this.animals[index] = value;
},

In my hbs, I render the list of strings into text fields, within a #each loop. When I focus-out the text field, I want to update the string at the certain index.

    <textarea
        value=
        
    />

But how can I pass in the index to the handler as well? In other words, how can I pass the event and some extra parameter at the same time? Thanks a lot for answering my question!!

ember willTransition is called in parent route even after the transition is aborted using transition.abort in child route

Can we prevent calling parent's willTransition() hook if we abort the transition in child route's willTransition() hook using transition.abort()? I can't find correct documentation in Ember official blog.

How to reload hasMany relationship in ember-data with ember octane?

After upgrading to Ember 3.21.2 from 3.9, reloading hasMany relationships is not working properly anymore. For example the following model hook to fetch editable contents for a user does not update the user model anymore.

model(params) {
    const { user } = this.modelFor('application')

    const requestParams = this.mapParams(params)

    return RSVP.hash({
      user,
      results: user.hasMany('editableContents').reload({
        adapterOptions: requestParams
      })
    })
  },

It still triggers requests, but it loads the same contents with every request, even after the request params have changed. Initially the request is sent to /users/:user_id/editable-contents?filter=......

After changing the adapter options it sends a request for each content to /contents/:content_id

We believe the .reload() function is to blame. Is there a new best practice for updating the editableContents relationship on the user model that came with Octane?

We are using:

"ember-cli": "~3.21.2",
"ember-data": "~3.21.0"

Any help is appreciated. Thanks!