dimanche 28 novembre 2021

Find-by with multiple attribute in Ember.js Octane

I have a route with RSVP that load several models (categories with items, treatments, prices) which return in JsON API Forrmat and want to show them in a table:

Item Name Treatment Name 1 Treatment Name N
Category 1
Item 1 in Cat 1 Price item 1 in Cat 1 for Treatment 1 Setup Price
Item 2 in Cat 1 Setup Price Price item 2 in Cat 1 for Treatment N
Category 2
Item 1 in Cat 2 Price item 1 in Cat 2 for Treatment 1 Price item 1 in Cat 2 for Treatment N

Setup Price only show if there isn't any price found, so the user can setup the price for the item in that treatment

I already can iterate the categories, items and treatment; but still do not know how to configure to show the correct price.

How can I find the correct prices by 2 attributes? I tried using find-by helper in the template:


  

, but it seems it only support 1 attributes.

Well, if in SQL it would be something like:

select * from prices where item.id = [currentItemId] and treatment.id = [currentTreatmentId]

but I want it to search in the already loaded price model...

Any help ? thank you...




jeudi 25 novembre 2021

Ember Upgrade from 3.23 to 3.24 failing at build

Was planning to migrate ember application from 3.23 to 3.24. During ember serve the following error is coming:

I have tried upgrading broccoli and babels libs to the latest version. Still the issue persists.

ERROR Summary:

  - broccoliBuilderErrorStack: TypeError: /home/abc/dev/sample-ui/ngcoreui/@ember/test-helpers/-internal/debug-info.js: path.isStaticBlock is not a function
    at PluginPass.ClassBody (/home/abc/dev/sample-ui/node_modules/@babel/plugin-proposal-class-static-block/lib/index.js:56:21)
    at newFn (/home/abc/dev/sample-ui/node_modules/@babel/traverse/lib/visitors.js:177:21)
    at NodePath._call (/home/abc/dev/sample-ui/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/home/abc/dev/sample-ui/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/home/abc/dev/sample-ui/node_modules/@babel/traverse/lib/path/context.js:100:31)
    at TraversalContext.visitQueue (/home/abc/dev/sample-ui/node_modules/@babel/traverse/lib/context.js:103:16)
    at TraversalContext.visitSingle (/home/abc/dev/sample-ui/node_modules/@babel/traverse/lib/context.js:77:19)
    at TraversalContext.visit (/home/abc/dev/sample-ui/node_modules/@babel/traverse/lib/context.js:131:19)
    at Function.traverse.node (/home/abc/dev/sample-ui/node_modules/@babel/traverse/lib/index.js:82:17)
    at NodePath.visit (/home/abc/dev/sample-ui/node_modules/@babel/traverse/lib/path/context.js:108:18)
  - code: [undefined]
  - codeFrame: /home/abc/dev/sample-ui/ngcoreui/@ember/test-helpers/-internal/debug-info.js: path.isStaticBlock is not a function
  - errorMessage: @ember/test-helpers/-internal/debug-info.js: /home/abc/dev/sample-ui/ngcoreui/@ember/test-helpers/-internal/debug-info.js: path.isStaticBlock is not a function
        in /home/abc/dev/sample-ui/node_modules/@ember/test-helpers/addon-test-support
        at broccoli-persistent-filter:Babel > [Babel: @ember/test-helpers] (Babel: @ember/test-helpers)
  - errorType: Build Error
  - location:
    - column: [undefined]
    - file: @ember/test-helpers/-internal/debug-info.js
    - line: [undefined]
    - treeDir: /home/abc/dev/sample-ui/node_modules/@ember/test-helpers/addon-test-support
  - message: @ember/test-helpers/-internal/debug-info.js: /home/abc/dev/sample-ui/ngcoreui/@ember/test-helpers/-internal/debug-info.js: path.isStaticBlock is not a function
        in /home/abc/dev/sample-ui/node_modules/@ember/test-helpers/addon-test-support
        at broccoli-persistent-filter:Babel > [Babel: @ember/test-helpers] (Babel: @ember/test-helpers)
  - name: Error
  - nodeAnnotation: Babel: @ember/test-helpers
  - nodeName: broccoli-persistent-filter:Babel > [Babel: @ember/test-helpers]
  - originalErrorMessage: /home/abc/dev/sample-ui/ngcoreui/@ember/test-helpers/-internal/debug-info.js: path.isStaticBlock is not a function
  - stack: TypeError: /home/abc/dev/sample-ui/ngcoreui/@ember/test-helpers/-internal/debug-info.js: path.isStaticBlock is not a function
    at PluginPass.ClassBody (/home/abc/dev/sample-ui/node_modules/@babel/plugin-proposal-class-static-block/lib/index.js:56:21)
    at newFn (/home/abc/dev/sample-ui/node_modules/@babel/traverse/lib/visitors.js:177:21)
    at NodePath._call (/home/abc/dev/sample-ui/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/home/abc/dev/sample-ui/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/home/abc/dev/sample-ui/node_modules/@babel/traverse/lib/path/context.js:100:31)
    at TraversalContext.visitQueue (/home/abc/dev/sample-ui/node_modules/@babel/traverse/lib/context.js:103:16)
    at TraversalContext.visitSingle (/home/abc/dev/sample-ui/node_modules/@babel/traverse/lib/context.js:77:19)
    at TraversalContext.visit (/home/abc/dev/sample-ui/node_modules/@babel/traverse/lib/context.js:131:19)
    at Function.traverse.node (/home/abc/dev/sample-ui/node_modules/@babel/traverse/lib/index.js:82:17)
    at NodePath.visit (/home/abc/dev/sample-ui/node_modules/@babel/traverse/lib/path/context.js:108:18)



How to add swipe event in ember JS 3.27

I want some actions to be done when the screen is swiped down and I'm using ember version 3.27. Is this possible?




mardi 23 novembre 2021

How to do polling in Ember js component?

In ember js 3.24 LTS, I can create a component that receive data from an API call inside a route. The data from the API is an activity logs. The complexity arrives when I try to keep updating the logs with the latest logs, I need to keep polling the API every few seconds and I need to keep updating the data that being displayed inside the component.

  • How do I keep reloading the API call every few seconds and then update the display of the component?
  • I can use the ember later to keep looping/requery the API ever 2 seconds or 2000 ms, but then how do I tell my component to update the display?

This component gets data from an API call which is in the routes.

// addon/routes/single-scan/index.js 
import { later } from '@ember/runloop';
...
  async model() {
    let phaseActivityLog = await this.pollTestActivity(testId);
    return { phaseActivityLog };
  }

  async pollTestActivity(testId) {
    later(
      this,
      function () {
        this.pollTestActivity(testId);
      },
      2000
    );
    let phaseActivityLog = await this.store.query('phase-activity-log', testId, { reload: true }); // poll this
    return phaseActivityLog;
  }

And my component hbs

// components/single-scan/phase-activity-log.hbs


   -  - 




lundi 22 novembre 2021

Open one component instance at a time in Ember Octane

Let's say we have component answer that has isOpen property. By default isOpen is false and when the user is clicking on the answer we are changing the isOpen to true.

We are showing the list of answers. How can we close the first answer when the user clicks on second answer?

I was thinking about creating a service answersSync with globalIsOpen = false.




samedi 20 novembre 2021

DEPRECATION: Versions of modifier manager capabilities prior to 3.22 have been deprecated. You must update to the 3.22 capabilities

I got this warning on my Ember App :

DEPRECATION: Versions of modifier manager capabilities prior to 3.22 have been deprecated. You must update to the 3.22 capabilities. [deprecation id: manager-capabilities.modifiers-3-13] See https://deprecations.emberjs.com/v3.x#toc_manager-capabilities-modifiers-3-13 for more details. at logDeprecationStackTrace (http://localhost:4200/assets/vendor.js:36552:21) at HANDLERS. (http://localhost:4200/assets/vendor.js:36685:9) at raiseOnDeprecation (http://localhost:4200/assets/vendor.js:36579:9) at HANDLERS. (http://localhost:4200/assets/vendor.js:36685:9) at invoke (http://localhost:4200/assets/vendor.js:36697:9) at deprecate (http://localhost:4200/assets/vendor.js:36653:28) at modifierCapabilities$1 (http://localhost:4200/assets/vendor.js:11678:62) at http://localhost:4200/assets/vendor.js:99939:46 at CustomModifierManager.getDelegateFor (http://localhost:4200/assets/vendor.js:44817:20)

I visited the link https://deprecations.emberjs.com/ recommended for updating, I didn't really understand how to make this update, any help please .




mercredi 17 novembre 2021

Dynamically determine existence of template only Ember glimmer component?

I know that to dynamically determine the existence of a component on Ember we can use the solutions explained here or here.

We have a helper that uses .hasRegistration('component:${component}')

This also works for Glimmer components as long as there is a .js file defined, but it doesn't work for template-only Glimmer components. The component doesn't seem to be registered in that case.

Does anyone know a solution that would work for template-only glimmer components too?




mardi 16 novembre 2021

Where is this "Redirecting to //www....." page coming from?

I have an Ember app (with service worker) that is being served by Fastboot on an AWS Beanstalk server (Nodejs+NGINX).

My Beanstalk Nginx setup has a 301 http-to-https redirect rule, which works just fine as you can see in the screenshot.

The Ember app has the route path "/" mapped to "events/map" in the router.js file.

When I navigate to https://www.gigshq.com, it is supposed to redirect to https://www.gigshq.com/events/map. Sometimes it does it automatically, but sometimes it shows the following basic HTML page:

Screenshot of unknown "Redirecting to"

I'm trying to prevent this from showing and redirecting automatically, however I don't even know where to start because I'm not quite sure where this basic HTML page is coming from, whether it is Nginx, Fastboot, or Ember. Any help would be appreciated!




Ember.j - How to update chat when a message is created in database? (firebase as database)

I'm new to ember.js and firebase. At the moment I can post messages and see them displayed in a list like this:

//templates/show-messages.hbs



<div class="container">
    <div class="chat-container">
        
        <div class="bubble">
            <h3></h3>
            <p></p>
        </div>
        
    </div>
    <ChatInput class="Input" @username="" @text=""></ChatInput>
</div>


//routes/show-messages.js

import Route from '@ember/routing/route';

export default class ShowMessagesRoute extends Route {
  model() {
    return this.store.findAll('chat-message');
  }
}

The problem is that when viewing chat in another browser, the chat window doesnt update when I post a message. Hence, the chat doesnt really update like it should.

How do I solve this? Thanks.




lundi 15 novembre 2021

How to put void link like Html in Ember using

I would like to know if it's possible to make a temporary void link in Ember <LinkTo @route=""> like HTML <a href="#">, thanks for helping.




mercredi 10 novembre 2021

Making a API Request in ember js

I am trying to learn ember JS, and I want to make a API request watched and read soo many videos and blogs also not clear enough how to call a API and store that data in the official docs.

const response = await fetch('/api/users.json');
const {data} = await response.json();
console.log(data)

This is what I tried ,but there is nothing in console I have created a folder in public directory and created a folder called API in it and saved my user.json file in it. My directory path

Hope, someone can explain how to make a API request in ember, if u can refer some blog or tutorial also will help me. Thanks in advance




mardi 9 novembre 2021

Ember JS FindAll returns undefined data

iam currently developing a contact management system web app using ember js for the front end .Iam using ember store for fetching the data from the api , while fetching json data using store.findAll() , iam getting the json array with the length of data as expected but when i try to access the data at a specific position in the json array it gives undefined value , it is not giving the model value.I have checked everything like json format , naming conventions with respect to my serializer but cant able to find what is going wrong , can anyone help me with solving this ?

Application adapter :

import RESTAdapter from '@ember-data/adapter/rest';

export default class ApplicationAdapter extends RESTAdapter {
    buildURL(...args) {
      return "http://localhost:8082/ContactManagementSystem1/api/contact/5";
    }
    headers = {
        'Accept': '*/*',
      };
}

Json response from api :

[
    {
        "firstName": "Example",
        "lastName": "K",
        "deletedAt": "",
        "mobileNumberHome": "7827382738",
        "companyName": "Example",
        "dateOfBirth": "2000-04-12",
        "id": 21,
        "userId": 4,
        "mobileNumberWork": "2738273788",
        "email": "rath@gmail.com"
    },
    {
        "firstName": "nameexample2",
        "lastName": "p",
        "deletedAt": "",
        "mobileNumberHome": "8989898996",
        "companyName": "Business ",
        "imageURL": "actress1.jfif",
        "dateOfBirth": "2021-10-05",
        "id": 51,
        "userId": 4,
        "mobileNumberWork": "8667889896",
        "email": "nameexample2h@gmail.com"
    }
]

Serializer :

import DS from 'ember-data';

export default DS.RESTSerializer.extend({
    normalizeResponse(store, primaryModelClass,payload,id,requestType){
        arguments[2] = {
            "contacts" : payload
        }
        return this._super(...arguments);
    }
});

Since my json response is different from the RestSerializer format i have written some code in the serializer for normalising the response.

Route where i fetch data using store.findAll()

import Route from '@ember/routing/route';
import {inject as Service } from '@ember/service';
export default class UserContactRoute extends Route {
  @Service store;
  async model() {
    return this.store.findAll('contact');
  }
}

These are codes which i have used , i have also checked in the inspect's console no error is been thrown , the problem is model array object were undefined.




jeudi 4 novembre 2021

How to resolve "Unable to download node 14.18.0" when deploying an Ember.js app to Heroku?

I encountered the error mentioned in the Title.

I have referred to a few relevant Heroku articles and tried their suggested changes including specifying the exact version of Node.js, Yarn, or npm that I'm using locally , but that still didn't work.

Here's the relevant sections extracted from my package.json:

  "engines": {
    "node": "14.18.0",
    "npm": "6.14.15",
    "yarn": "1.19.1"
  },
  "ember": {
    "edition": "octane"
  }

Here's the deployment log:

Enumerating objects: 1134, done.
Counting objects: 100% (1134/1134), done.
Delta compression using up to 4 threads
Compressing objects: 100% (1027/1027), done.
Writing objects: 100% (1134/1134), 309.32 KiB | 2.64 MiB/s, done.
Total 1134 (delta 581), reused 0 (delta 0), pack-reused 0
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Building on the Heroku-20 stack
remote: -----> Using buildpack: https://codon-buildpacks.s3.amazonaws.com/buildpacks/heroku/emberjs.tgz
remote: -----> emberjs app detected
remote: -----> Setting NPM_CONFIG_PRODUCTION to false to install ember-cli toolchain
remote: -----> Fetching buildpack heroku/nodejs-v98
remote: -----> Node.js detected
remote:
remote: -----> Creating runtime environment
remote:
remote:        NPM_CONFIG_PRODUCTION=false
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote:        engines.node (package.json):  14.18.0
remote:        engines.npm (package.json):   6.14.15
remote:
remote:        Downloading and installing node 14.18.0...
remote:        Unable to download node 14.18.0; does it exist?
remote:
remote: -----> Build failed
remote:
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote:        If you're stuck, please submit a ticket so we can help:
remote:        https://help.heroku.com/
remote:
remote:        Love,
remote:        Heroku
remote:
remote: -----> Failed trying to compile heroku/nodejs-v98
remote:  !     Push rejected, failed to compile emberjs app.
remote:
remote:  !     Push failed
remote:  !
remote:  ! ## Warning - The same version of this code has already been built: d70a7009920574c3b615eb11c570a054b8348453
remote:  !
remote:  ! We have detected that you have triggered a build from source code with version d70a7009920574c3b615eb11c570a054b8348453
remote:  ! at least twice. One common cause of this behavior is attempting to deploy code from a different branch.
remote:  !
remote:  ! If you are developing on a branch and deploying via git you must run:
remote:  !
remote:  !     git push heroku <branchname>:main
remote:  !
remote:  ! This article goes into details on the behavior:
remote:  !   https://devcenter.heroku.com/articles/duplicate-build-version
remote:
remote: Verifying deploy...
remote:
remote: !   Push rejected to rarweo.
remote:
To https://git.heroku.com/rarweo.git
 ! [remote rejected] main -> main (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/rarweo.git'