samedi 30 octobre 2021

How to convert array of object(hasMany relationship data) to array of id?

I'm getting data back from hasura like this:

{
  "data": {
    "movies": [
      {
        "id": "584db434-5caa-475e-b3ec-e98e742f0030",
        "movieid": "abc123",
        "description": "Penquins dancing in antactica",
        "photos": [
          {
            "id": "c4d2833a-4896-42b0-ae8b-0ab9fe71d1d4"
          },
          {
            "id": "e04697e3-21fe-4f0e-8012-443f26293340"
          }
        ]
      }
    ]
  }
} 

But Ember.js can't read and render the relationship data (photos). Is it the "photos" data should be like this?

"photos": [c4d2833a-4896-42b0-ae8b-0ab9fe71d1d4, e04697e3-21fe-4f0e-8012-443f26293340]

How can I convert it in Ember? or in Hasura?




malihu jquery custom scrollbar plugin error in crossdomain loading

Iam using malihu jquery custom scrollbar plugin version 3.1.5 in my tomcat application, build using ember js runing in xxx.com. While loading that xxx.com application in the iframe of another application running at yyy.com, Iam getting object.defineProperty called on non-object in the yyy.com web console. Kindly, help me as quick as possible.

error from console




jeudi 28 octobre 2021

How do I pass an object to a component?

This question was asked in the Ember Discord.

Is there a way to pass an object into a component

<SomeComponent object={color: green} />



Trying to Customize the ApolloService to enable Authorization in Ember 3.28. Any special configuration I need to plugin the apollo.js to be my config

Ember-Octane 3.28 Configured the enviroment.js file with the graphql endpoint, My apollo.js file in the service folder looks like

import ApolloService from 'ember-apollo-client/services/apollo';
import { inject as service } from '@ember/service';
import { setContext } from '@apollo/client/link/context';

export default class OverridenApollo extends ApolloService {
  @service session;

  link() {
    let httpLink = super.link();

    let authLink = setContext((request, context) => {
      return this._runAuthorize(request, context);
    });
    return authLink.concat(httpLink);
  }

  _runAuthorize() {
    if (!this.session.isAuthenticated) {
      return {};
    }
    return new Promise((success) => {
      let headers = {};
      let token = this.session.data.authenticated.token;
      headers['Authorization'] = `Bearer ${token}`;

      success({ headers });
    });
  }

  clientOptions() {
    return {
      link: this.link(),
      cache: this.cache,
    };
  }

 //...
}

Using ember-apollo-client pkg




Ember mismatch names in index.js and package.json

i have two different names in my package.json and index.js which i cannot change on both places. I am getting this error.

ember-cli: Your names in package.json and index.js should match. The addon in /Users/nrehman/Projects/copilot-seo-score currently have '@copilot/copilot-seo-score' in package.json and 'copilot-seo-score' in index.js. Until ember-cli v3.9, this error can be disabled by setting env variable EMBER_CLI_IGNORE_ADDON_NAME_MISMATCH to "true". For more information about this workaround, see: https://github.com/ember-cli/ember-cli/pull/7950.

My ember-cli version is "ember-cli": "~3.28.3"




mardi 26 octobre 2021

Connecting ember js application with react host : microfrontend

I was trying to connect different frontend tech together in a React host using microfrontend.

I managed to connect react, vue, VanillaJS application to the React host, but i am not able to wrap my head around Ember JS, since vue, Vanilla were not framekwork, it was easy to connect them using webpack ModuleFederationPlugin.

I tried searching it over internet couldn't find any help, Is it possible to connect Ember JS application to a react based host environment(using module federation) ??

If yes would like to see an example if it's available online. (github or sandbox links)




dimanche 24 octobre 2021

Building Ember app gives me error, Cannot read property 'pkg' of null

I was trying to compile a website frontend from 2015 that utilizes an old version of ember.js and node.js. The instructions state to run make build, which in turn would run ember build dist. Though when the command is ran, it gives me this error.

Cannot read property 'pkg' of null
TypeError: Cannot read property 'pkg' of null
    at Function.Addon.resolvePath (/home/pyah/pyah/client/node_modules/ember-cli/lib/models/addon.js:347:18)
    at Function.Addon.lookup (/home/pyah/pyah/client/node_modules/ember-cli/lib/models/addon.js:362:22)
    at /home/pyah/pyah/client/node_modules/ember-cli/lib/models/project.js:222:34
    at visit (/home/pyah/pyah/client/node_modules/ember-cli/lib/utilities/DAG.js:23:3)
    at DAG.topsort (/home/pyah/pyah/client/node_modules/ember-cli/lib/utilities/DAG.js:82:7)
    at Project.initializeAddons (/home/pyah/pyah/client/node_modules/ember-cli/lib/models/project.js:220:9)
    at Project.eachAddonCommand (/home/pyah/pyah/client/node_modules/ember-cli/lib/models/project.js:249:10)
    at module.exports (/home/pyah/pyah/client/node_modules/ember-cli/lib/cli/lookup-command.js:53:13)
    at CLI.<anonymous> (/home/pyah/pyah/client/node_modules/ember-cli/lib/cli/cli.js:36:26)
    at $$$internal$$tryCatch (/home/pyah/pyah/client/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:490:16)

This error is shown even if just ember is ran in terminal.

Node.js version: v6.12.0

npm version: 6.14.15




solution for selecting frameworks and tools for managing photo with zoom and selection

I want to develop a software in which I need to maneuver on the photos, Features such as Drag and zoom and ..., for example photos related to the rocks of a mine (like the image below) where the depth of each rock is known and users can see rocks related to any depth of see this mine There is an example of this website: https://portal.imago.live/

enter image description here

A general guide from this website: https://support.imago.live/hc/en-us/articles/360032890432-Explore-the-Imago-Web-Portal-Overview

The question is, do you have the tools to do this? This site has used the Ember.js framework. Does this framework help to implement this software?




vendredi 22 octobre 2021

Ember test launch in CI/dev environment

I have this in my testem.js

launch_in_ci: ['Chromium'],
launch_in_dev: ['Chrome'],

Is there any way to run ember test and specify CI/dev environment?

I know I can use this solution but this looks like not the right way since I have configuration file.




jeudi 21 octobre 2021

Ember: Selecting the object form array using index in #each loop

Trying to use the index value in a loop in EmberJs

Consider the following scenario,


<Component1 @prop= @prop2= />

I wish to send the object from the second array using the index value from first array. I cannot find any references to this. Any References i found use the first array alone and and didn't use the index in another variable. Thanks in advance for your time and effort.




Ember not population model even after successful API call

My route.js

export default Route.extend(ResetScrollMixin, {

  model(params, { queryParams }) {
    return hash({
      ruleSetVersions: this.store.queryRecord('rule-set-versions', {
        rule_set_id: params.rule_set_id,
        is_archived: false,
        page: queryParams.page || 1
      }),
      ruleSet: this.store.findRecord('rule-set', params.rule_set_id)
    })
  },

  actions: {
    reload() {
      location.reload()
    }
  }
});

Models

rule-set-versions.js

export default DS.Model.extend({
    rule_set_versions: DS.belongsTo('paginated-versions')
})

paginated-versions.js

export default DS.Model.extend({
    rule_set_versions: DS.hasMany('rule-set-version'),
    pagination: DS.belongsTo('pagination'),
})

pagination.js

export default DS.Model.extend({
    page_number: DS.attr('number'),
    page_size: DS.attr('number'),
    total_pages: DS.attr('number'),
    total_rows: DS.attr('number')
})

rule-set-versions.js this is a serializer for rule-set-versions model

var underscore = Ember.String.underscore;
export default DS.RESTSerializer.extend(DS.EmbeddedRecordsMixin, {
    attrs: {
      rule_set_versions: {
        serialize: "id",
      },
      pagination: {
        serialize: "id",
      },
    },
    keyForRelationship: function (rawKey) {
      console.log("here")
      return underscore(rawKey) + "_id";
    }
})

My API Response which truncated.

{
    "rule_set_versions": {
        "id": 100,
        "pagination": {
            "id": 100,
            "page_number": 1,
            "page_size": 5,
            "total_pages": 1,
            "total_rows": 3
        },
        "rule_set_versions": [{
            "id": 934,
          ....
        }]
    }
}

I am getting null when I do this.get("model.ruleSetVersions"). I tried and followed the documentation as well but I couldn't come up with the solution.




mercredi 20 octobre 2021

Ember 1.13.x and newer version relation with jquery

  1. Does Ember require jquery to be imported in older or newer versions ?

  2. if yes, will older ember support if newer version of jquery.js file is included ? any docs to refer ?

  3. what does Ember.$ mean ? does ember have inbuilt jquery ?




lundi 18 octobre 2021

Frontend framework change

We are a small company, using emberjs as the main frontend framework for our projects. The frontend architect sticks to it like liquid glue sticks to paper, because he doesn't know any other frameworks. The main reason that is forced is the slogan: 'convention over configuration'. And there are reasons like emberjs is faster in larger scale applications. Anyone can reason pro-contra for emberjs, angular, react etc.. (hopefully someone who knows all of them, at least emberjs, and another)? We are having meeting sessions about this, where junior frontend devs try to convince the architect about the other frameworks. In my opinion this should not be a technical issue, all of the frameworks are capable of developing 'larger scale' applications. The real reason should be the recruiting, we would find react/angular devs more easily. Thanks




jeudi 14 octobre 2021

Ember Octane - Display contents of a Tracked Array from Controller in Template?

I am trying to render access the contents of an array stored in the controller from within the template. The array starts empty but objects are added to it using a method in the controller:

import Controller from '@ember/controller';
import {action} from '@ember/object';
import {tracked} from '@glimmer/tracking';

export default class ControllerName extends Controller {

  @tracked
  displayedArray = new Array();

  @action
  async setUpArray(){
    let object1 = {Key1:[1,2], Key2: [3,4]};
    let object2 = {Key1:[5,6], Key2: [7,8]};
    this.displayedArray.push(object1);
    this.displayedArray.push(object2);
  }
}

I am able to call setUpArray() from the template and have confirmed it is running as expected and producing setting the tracked variable to an array of the two objects.

However I do not seem to be able to display anything relating to displayedArray in the template. I have tried the following:

//Returns blank - I expected [object,object]


//Returns blank


//Returns 0 before and after the *setUpArray()* function is called

As far as I can tell the issue only happens with arrays or at least arrays containing objects. I am able to display strings or other tracked variables set up in the controller just fine.

Does anyone know why Ember is failing to display this?




lundi 11 octobre 2021

How do I customize the ember-bootstrap form.element so that the input uses a specific column size?

I'm using ember-bootstrap and the following element:

<form.element @controlType="text" @label="First Name:" @property="firstName" />

which produces the following HTML

<div class="form-group row">
  <label class="col-sm-4 col-form-label" for="ember198-field">First Name</label>

  <div class="col-sm-10">
    <input id="ember198-field" class="form-control" type="text">
  </div>
</div>

How do I go about customizing the col-sm-10 in the enclosing <div> for the input element?




Slick Slider Not Work When Array Update In Ember js

When first render component slick slider work well but when i update array data by action then break slick slider view.Please Help me.I am using Ember Cli version 3.12.Here Is My Component Code:

slickCarousel(){
$(`.${this.className}`).slick({
  slidesToShow: this.slideShow,
  responsive: [
    { breakpoint: 992, settings: { slidesToShow: 4 } },
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
        arrows: false,
        dots: true,
      },
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
        arrows: false,
        dots: true,
      },
    },
  ],
  arrows: true,
  prevArrow:
    "<button type='button' class='slick-prev'><i class='fa fa-angle-left' aria-hidden='true'></i></button>",
  nextArrow:
    "<button type='button' class='slick-next'><i class='fa fa-angle-right' aria-hidden='true'></i></button>",
});
},

destroyCarousel() {
if ($(`.${this.className}`).hasClass('slick-initialized')) {
  this.$(`.${this.className}`).slick('destroy');
}       
},

didInsertElement() {
this._super(...arguments);
this.destroyCarousel();
this.slickCarousel();
},



caniuse-lite is outdated will not go away after updating browserlist

I'm working on fixing build warnings in my Ember.js application currently, and one I get is this

[Babel: @ember/test-helpers > applyPatches]Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

However running that command provides this output:

npx: installed 6 in 2.566s
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Latest version:     1.0.30001265
Installed version:  none
Removing old caniuse-lite from lock file
Installing new caniuse-lite version
$ yarn add -W caniuse-lite
Cleaning package.json dependencies from caniuse-lite
$ yarn remove -W caniuse-lite
caniuse-lite has been successfully updated
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating

And the warning never goes away. I have tried about every applicable solution in this thread. This seemed to be the main one to help, but has not for me

npm --depth 20 update --save caniuse-lite browserslist 

I am not using Visual Studio and have tried blowing away all node modules and still nothing. Is there any known issue around this or way to fix it?




vendredi 8 octobre 2021

How to install ember-cli version 1.13.11 without global?

I just install nvm software and I will run nvm install 4.0.0 . Node will download and npm also download and install it automatically.next i will run nvm use 4.0.0 set-up will set it.now I see my node version using node - v it show v4.0.0 all are correct all comments under admin only and I will create one folder and change to that path and I will run npm install ember-cli@4.0.0 it will install it successfully but after that I use ember -v it show ember is not recognised?




How can I use ember-concurrency with a callback function?

I'd like to use ember-concurrency to handle batch validation of a collection of addresses. The address validation is done by a third party API that calls a server-side function that then 'calls back' to the client when the server has completed its work.

It seems like this would be a place to use the ember-concurrency add-on, but i can't figure out how to use it correctly. I think the challenge is that the api call to server returns immediately after the server side process is kicked off. How do i make ember-concurrency aware of the connection between the call to the server and the callback function so that the 'task' waits for the callback to be completed as a sign that the task has been completed? The way i have the code working now, 'results' is (understandably) always null.

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { task } from 'ember-concurrency';

export default class BatchAddressInputComponent extends Component {
    @service api;
    addressList = "";

    //addressList populated from a TextArea
    @task *DoAddressValidation ()
    {
        let results = yield this.api.BatchQueryAddresses(this.addressList);
        alert(results); //not surprisingly, 'results' is always null
    }
}
    
    
import Service from '@ember/service';

export default class ApiService extends Service {
  _api;

  //API *should* be available as a global object, imported as a <script> on
  // application start-up.
  constructor() {
    super(...arguments);
    this._api = API;
  }

  BatchQueryAddresses(addressList) {
    this._api.BatchQueryAddress(addressList, 2, this._queryAddressCallback, null, 2000);
  }

  _queryAddressCallback(result, error) {
    if (error) {
        alert("Error: " + result);
        return;
    }
    var j = JSON.stringify(result, null, ' ');
    return(j);
  }
}



How to install ember-cli version 1.13.11 in windows 10

I am trying to install ember-cli version 1.13.11 using node version is 4.0.0 and npm version is 2.14.2 . i will run all comments in admin. first i will install npm install -g ember-cli@1.13.11 and ember version is created next i will run ember new demoproject .but my laptop has 4 gb ram and windows 10 so it will take almost 1 hour to run after it will not create project it showing error it shown in that picture but i will clean all npm cache and computer temp also but problem is not solved and npm install -g ember-cli-windows comments also installed but it will not work please share me solution install ember-cli@1.13.11




How to use tabulator with ember?

I want to use http://tabulator.info/ with ember. I don't understand the documentation nor can I find any guides on configuration for ember. How can I start by creating a simple table?




How do I access ENV from config/environment in an addon?

This is a question that was asked by @dbendaou over on the Ember Discord


What is the best way to access ENV from config/envirnoment in an addon?

I was thinking about getOwner(this).lookup('config:environment') but it doesn't work neither does import ENV from '../config/environment'; 😅