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

wb-generic-crud

v0.0.9

Published

Permet de faciliter les appels à une API pour les opérations basiques (CRUD)

Downloads

2

Readme

WbGenericCrud

Permet de faciliter les appels à une API pour les opérations basiques (CRUD).

Concept

Chaque appel à l'api de votre backend permet d'effectuer une action. Des messages génériques sont disponibles pour permettre de simplifier les échanges.

  • WbBaseResponseMessage : Les données de bases lors du retour de l'api (Message + Statut d'erreur). Implémenté sur tous les autres messages
  • WbCreateResourceResponseMessage : Retour lors d'une création de ressource
  • WbDeleteResourceByIdResponseMessage : Retour lors d'une suppression de ressource via identifiant unique
  • WbGetAllResourcesResponseMessage : Retour lors d'une demande de toutes les ressources
  • WbGetResourceResponseMessage : Retour lors d'une demande de ressource
  • WbUpdateResourceResponseMessage : Retour lors d'une mise à jour de ressource

Installation

npm install wb-generic-crud

Utilisation

Cas d'une utilisation simple

Le service de CRUD générique doit être dérivé pour pouvoir fonctionné. Il vous suffit d'étendre votre service concerné pour lui donner toute la logique du CRUD générique.

export class MyCustomService extends AWbGenericCrudService
{
  protected _apiUrl: string = 'https://localhost:5000/api';
  
  protected _endpoint: string = 'contact';

  public constructor(
    protected _httpClient: HttpClient
  )
  {
    super(_httpClient);
  }
}

Pour fonctionner, vous devrez implémenter deux propriétés.

  • _apiUrl : Url de votre api
  • _endpoint : Nom de votre contrôleur

Vous pourrez ensuite utiliser les différentes méthodes du service.

Cas d'une utilisation en ajoutant du comportement

Il vous est tout à fait possible d'ajouter du comportement au service de CRUD générique.

export class MyCustomService extends AWbGenericCrudService
{
  protected _apiUrl: string = 'https://localhost:5000/api';

  protected _endpoint: string = 'contact';

  public constructor(
    protected _httpClient: HttpClient
  )
  {
    super(_httpClient);
  }

  public myCustomCallToApi(): void
  {
    // ...
  }
}

Exemple

Définition des entités et des messages.

export class ContactModel
{
  id: number;
  name: string;
}

export class CreateContactRequestMessage
{
  name: string;
}

export class UpdateContactRequestMessage extends CreateContactRequestMessage
{ }

Valorisation des entités et des messages.

const contactModel: ContactModel = {
  id: 1,
  name: 'John'
};

const createContactRequestMessage: CreateContactRequestMessage = {
  name: 'John'
};

const updateContactRequestMessage: UpdateContactRequestMessage = {
  name: 'John Doe'
}

Utilisation des différentes méthodes.

this._myCustomService
  .create<ContactModel, CreateContactRequestMessage>(createContactRequestMessage)
  .subscribe((response: WbCreateResourceResponseMessage<ContactModel>) =>
  {
    if (!response.onError)
    {
      console.log(response.ressource);
    }
  });

this._myCustomService
  .deleteById(contactModel.id)
  .subscribe((response: WbDeleteResourceByIdResponseMessage) =>
  {
    if (!response.onError)
    {
      // Ressource supprimée
    }
  });

this._myCustomService
  .getAll<ContactModel>()
  .subscribe((response: WbGetAllResourcesResponseMessage<ContactModel>) =>
  {
    if (!response.onError)
    {
      console.log(response.ressources);
    }
  });

this._myCustomService
  .getById<ContactModel>(1)
  .subscribe((response: WbGetResourceResponseMessage<ContactModel>) =>
  {
    if (!response.onError)
    {
      console.log(response.ressource);
    }
  });

this._myCustomService
  .update<ContactModel, UpdateContactRequestMessage>(1, updateContactRequestMessage)
  .subscribe((response: WbUpdateResourceResponseMessage<ContactModel>) =>
  {
    if (!response.onError)
    {
      console.log(response.ressource);
    }
  });

Note: Le service de CRUD générique est basé sur une une interface IWbGenericCrudService. Vous pouvez implémenter cette interface sur votre propre service pour définir votre propre comportement.