From the Tabulator focus is not moving to the table footer editable fields

1. I am using tabulator api to display table data.
2. I am using "tab" key to navigate on the cells.
3. When it is last row and last cell, focus should move to the table footer which is having paging selectable field(attached the screenshot.)

1. To know the which is the last row and last cell I am getting selected rowid.
2. To know which is the last cell on the last row getting the cell value form cellEdited fucntion.

Code to execute on the tab function:

if(e.keyCode === 9){
                console.log("tabbing function called");                
                    var selectedRows = [];                
                    var selectedRowId = 0;
                    selectedRows = self.get('table').getSelectedRows();
                    if (selectedRows.length > 0) {
                        selectedRowId = selectedRows[0]._row.data.id;
                    }                    
                    if (self.get("rowIdMax") === selectedRowId && self.get("activeCell") === self.get('table').getColumns()[3].getField()) {                    
                        var pageSizeElement = document.getElementsByClassName("tabulator-page-size")[0];
                        pageSizeElement.focus();
                    }

When I click on the tab key from the last and last cell(image : 2222), the cursor should move to the "Page Size" editable field.

Thank you in advance.

I need recomendations about emberjs nature

I'm working with emberjs during some time and now I want to redefine my understanding of ember's nature.

Question 1. Am I right that the route's model() hook is the best place to write asynchronous code (to get all needed data)? Should I try to place all my network requests (or at least most of them) inside routes' models?

Question 2. The component hooks have synchronous nature. Does that mean it's a bad desition to write async code inside hooks?

Say, I have async init() hook where some data is calculated and didRender() hook where I expect to use that data. When ember calls init() it returns Promise, so it's moved from a stack to a special queue and ember doesn't wait until event loop returns that code back to a stack. So ember runs next hooks, and when didRender() is being executed the init() hook may not be fulfilled and the expected data may not exist. Is it right?

Question 3. Services hooks should also be synchronous. Because when a service is injected inside a component and is used ember also doesn't wait until the async hook is fulfilled.

Say, I have a shopping cart service with products property. The products ids are stored in localstorage and I want to get those products from a server to set them into products property.

import Service from '@ember/service';
import { A } from '@ember/array';
import { inject as service } from '@ember/service';

export default Service.extend({
    store: service(),

    init(...args) {
        this._super(args);
        this.set('products', A());
    },

    async loadProducts() {
        const cartProducts = A();
        const savedCartProducts = localStorage.getItem('cartProducts');
        if (savedCartProducts) {
            const parsedSavedCartProducts = JSON.parse(savedCartProducts);
            const ids = Object.keys(parsedSavedCartProducts);
            if (ids.length > 0) {
                const products = await this.store.query('product', {id: Object.keys(parsedSavedCartProducts)});
                products.forEach(p => {
                    p.set('cartQuantity', Number(parsedSavedCartProducts[p.id].qty));
                    cartProducts.pushObject(p);
                });
            }
        }
        this.products.pushObjects(cartProducts);
    },
  ...
});

If I call loadProducts() from service's init() I can't use this.cart.products in controllers/application.js, for example. Because service is ready, but async init() is still executed. So, should I call it in routes/application.js model() hook?

Question 4. If there is some general component that doesn't refer to any route, but this component needs some data from a server. Where should I make async requests? Or computed properties and observers are the only solutions?

Thanks a lot.

Texts in handlebar file not updating after change

I'm creating a CRUD application using Ember.js as frontend, Node.js as backend and MongoDB as database. I'm new in Emberjs. After changing an HTML tag in my handlebar file, the browser is not showing the changes.

I have edited the "quote.hbs" file. Updated h1 html tag "Quotes!" to "Quotations". Then I have restarted the servers using these commands:

To start the node server:

node server

To start the ember server and bind to node:

ember serve --proxy=http://localhost:8081 --live-reload false

My handlebar template file is given below:

<div class="container">  
    <div class="row">
        <div class="col-md-4">
            <h1>Quotes!</h1>
            
                
                    Book: 
                <br/>
                    Author: <br/><br/>
            

        </div>
        
            
    </div>
</div>

The servers are running without any errors and texts are also being displayed. I expected that the web page will show updated texts in h1 tag. But it is showing the texts before it was updated.

Google window.gapi.client.init not resolving nor rejecting promise

I'm trying to set up an Ember project in a Chrome extension. The project works perfectly fine in the browser with my Web Application OAuth 2.0 client ID. However when I use my Chrome App OAuth 2.0 client ID and load my Ember app into Chrome, the window.gapi.client.init call never resolves nor rejects. Neither client.init... then... is logged nor error! is logged (see code). Any ideas why this call would hang in a Chrome extension but be ok in the browser?

My code:

window.gapi.load('client:auth2', () => this.initClient());

which calls:

  initClient() {
    console.log('initClient');
    window.gapi.client.init({
      apiKey: API_KEY,
      clientId: CLIENT_ID,
      discoveryDocs: DISCOVERY_DOCS,
      scope: SCOPES
    }).then(() => {
      console.log('client.init... then...')
      // Listen for sign-in state changes.
      window.gapi.auth2.getAuthInstance().isSignedIn.listen((isSignedIn) => this.updateSigninStatus(isSignedIn));

      // Handle the initial sign-in state.
      this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
      this.authorizeButton.onclick = this.handleAuthClick;
      this.signoutButton.onclick = this.handleSignoutClick;
    }, (error) => {
      // debugger
      console.log('error!');
      console.log(error);
      this.appendPre(JSON.stringify(error, null, 2));
    });

My manifest.json:

  "description": "Build an Ember Chrome Extension!",
  "permissions": ["identity", "storage", "activeTab", "geolocation"],
  "oauth2": {
    "client_id": "my-chrome-app-client-id.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/calendar.readonly",
      "https://www.googleapis.com/auth/calendar.events.readonly"
    ]
  }
  ...

Only initClient is logged to the dev console, nothing else. I tried looking at this but it didn't help.

Ember.js: How can I test Express server mock?

I have a simple express server running in my Ember app for development purpose. I created it with the command ember g http-mock.

So in my app I have this directory:

my-app
  server
    mocks
      posts.js

How can I make a unit test that runs posts.js mock?.

How to access validation on model that belongs to current model?

I have Models as follows: "recommendedProduct" belongsTo "recommendation" belongsTo "recommendedAdjustment" belongsTo "report". I am trying to access the validation on recommendedProduct in report template with ember-cp-validations but I'm not getting anything on screen?

Tried all sorts of variations of: model.recommendedAdjustment.recommendation.recommendedProduct.recommendedProductSuppliers No one is helping on Discord. Docs don't have enough information to solve the issue

  
   <div class="col-sm-4">Sole supplier required</div>
    
  
  
   <div class="col-sm-4">Sole supplier not required</div>
    
  

I expect one div to show depending on if the recommendedProductSuppliers validation in the recommendedProduct Model is valid or not.

Ember.js moment.js update or use alternative?

We have been using moment for the past few year in our software via ember-moment. After some time with production version frozen we are now updating. First step was to move up to 2.16 when we got the perception that we should not use shim any more, and so we don't know how to do regarding the moment dependency.