npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jade-integration-utils

v4.19.6

Published

A tool made for any type of http requisitions and to manage localstorage. This package works into Angular and Ionic projects (maybe you can run this in ReactNative, MAYBE!).

Downloads

159

Readme

JadeIntegrationUtils

A tool made for any type of http requisitions and to manage localstorage. This package works into Angular and Ionic projects (maybe you can run this in ReactNative, MAYBE!).

Setup

Installation

npm install jade-integration-utils --save

then...

RESTful api Setup

  1. Declare DataService on your model: Example:
export class Model{  
  constructor() {
    this.resource = new DataService<Model>("http://your.api.service","your.endpoint");
  }
  //You must implement the integration source with property name "resource". 
  //If you didn't, the DataService object will break when call every get method.
  public resource: DataService<Model>;
  public id: number;
  public name: string;
  /** another things here  */
}
  1. In your component,you can implement like this example:
(...)
@Component({
  selector: 'app-model',
  templateUrl: '
  <input type="text" name="id" [(ngModel)]="filter.id" (keydown.enter)="search()">
  <button (click)="search()">Procurar</button>
  <div *ngIf="this.model.resource.loading">
    Carregando...
  </div>
  <div *ngIf="!this.model.resource.loading" style="display:block; max-width: 100%;">
    <div *ngFor="let OBJECT of model.resource.results.MY-LIST-OBJECT" style="text-align: center; width:100px;">
      ...
    </div>
  </div>
  ',
  styleUrls: ['./model.page.scss'],
})
export class ModelPage implements OnInit {
  public model: Model;
  public filter: Model;

  constructor(
    /** Import Here */
  ) { 
    this.model = new Model();
    this.filter = new Model();
  }

  ngOnInit() {
    this.search();
  }

  public search():void {
    /** call get to send "get" */
    this.model.resource.get(this.filter);
  }
}

OPTIONAL - Pagination in 4.x.x version!

You could use pagination with the framework as optional way to implement. Note: In this case, I use *ngFor="let your_model_object of model.resource.results.element_list" to get list of response, but it is necessary implements "objects" to your get method to return this info.

@Component({
  selector: 'app-model',
  templateUrl: '
  <input type="text" name="name" [(ngModel)]="filter.name" (keydown.enter)="search()">
  <button (click)="search()">Procurar</button>
  <div *ngIf="this.model.resource.loading">
    Carregando...
  </div>
  <div *ngIf="!this.model.resource.loading" style="display:block; max-width: 100%;">
    <div *ngFor="let your_model_object of model.resource.results.element_list" style="text-align: center; width:100px;">
      ...
    </div>
    ...
    <div *ngIf="model.resource.page_array.lenght > 2 ">
      <button (click)="model.resource.previous()">Previous</button>
      <div *ngFor="let indexPage of model.resource.page_array">
        <button (click)="to_page(indexPage)">{{indexPage}}</button>
      </div>
      <button (click)="model.resource.next()">Next</button>
    </div>
  </div>
  ',
  styleUrls: ['./model.page.scss'],
})
export class ModelPage implements OnInit {
  public model: Model;
  public filter: Model;

  constructor(
    /** Import Here */
  ) { 
    this.model = new Model();
    this.filter = new Model();
  }

  ngOnInit() {
    this.search();
  }

  public search():void {
    /** call get with second paramater like true to use PagedResults */
    this.model.resource.get(this.filter,true);
  }
  
  public to_page(indexPage): void{
    this.model.resource.page = indexPage;
    
    this.search();
  }
}

For that example, your Back-End service must accept page, fetch and itemsCount as queryParameters to filter. Here is a single example of backend service required returns to this feature:

{
    "itemsCount": 50,
    "page": 2,
    "fetch": 10,
    "objects": [
      ...
    ],
    "target": {"your_object":null}
}

To use Post and Put, you can pass your own object to this.model.resource.create(object), and send a body with these configuration. Api's return you can retrive with this.model.resource.results.

  public save(): void{
    this.model.resource.create(your_own_object,(results)=>{ /** callback function if i need */},"Message if you want");
  }
  /** In put method you can't send a body in method, in this case, use this.model.target */
  public update(): void{
    this.model.resource.update(your_own_object,(results)=>{ /** callback function if i need */ redirect... }),"Message if you want";
  }

You could use this.model.resource.loading to set up html blocks until httpRequest finish. Example:

  <div *if="model.resource.loading">
    Loading ...
  </div>
  <div *if="!model.resource.loading">
    <div *ngFor="let model of model.resource.results; let index = i">
      <!-- Anything here -->
    </div>
  </div>

Okay, but I don't want to implement on models! What should I do?

Simple setup

A simple way to implement Http Requisitions:

export clas AnotherClassComponent 
  constructor(
    generic_service: GenericService
  ) { 
    generic_service.configureHttp("http://my.provider.here");
  }

Every methods on GenericService return a Promise, having this in mind, the implementation of methods would like that:

  public methods(): void{
    this._genericService.getById<any>(id,"endpoint")
    .then((result)=>{ /** a function to do next */})
    .catch((error)=>{})
    
    this._genericService.get<any>("endpoint","query parameters without ?")
    .then((result)=>{ /** a function to do next */})
    .catch((error)=>{})

    this._genericService.post<any,any>("body","endpoint")
    .then((result)=>{ /** a function to do next */})
    .catch((error)=>{})
    
    this._genericService.put<any, any>("body","endpoint")
    .then((result)=>{ /** a function to do next */})
    .catch((error)=>{})

    this._genericService.delete<any>("id","endpoint")
    .then((result)=>{ /** a function to do next */})
    .catch((error)=>{})
  }

Local Storage

To use localstorage it's simple, inside a any function use: To Insert:

  public setFoo():void{
    StorageService.set("index",object);
    // or
    StorageService.setTemp(object);
    // or
    StorageService.setSession("index",object);
  }

To Get:

  public getFoo():void{
    let index = StorageService.get("index");
    // or
    let indexTemp = StorageService.getTemp();
    // or
    let indexSession = StorageService.getSession("index");
  }

To Clear:

  public setFoo():void{
    StorageService.clearTemp();
    // or
    StorageService.clear(); // To clear all
  }

Like it and Share! Enjoy!