Collection

Update: Collection is the library for work with crud against an Angular 12 app.

• Collection class contain all method for work with list of items (load, create, update, delete, deleteMany).
• Item class contain all method for work with single item (load, create, update, delete).

Installation

npm i collection

API

import { Collection } from 'collection'

Collection Methods

import { Item } from 'collection'

Item Methods

import { CrudService } from 'collection'

CrudService Methods

Usage

@Component({
selector: 'app-component',
templateUrl: ['./app.component.html'],
styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(private _crud: CrudService) {
      // Set your backend api url
    this._crud.apiUrl = 'apiUrl';
  }
}

1. Use the Collection in your component.

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { AppService } from './app.service';
import { 
  CollectionModel, 
  CrudService, 
  Collection 
} from 'collection';

@Component({
  selector: 'projects-list',
  templateUrl: ['./projects-list.component.html'],
  styleUrls: ['./projects-list.component.css']
})
export class ProjectsListComponent implements OnInit {

  collection: CollectionModel;
  
  getAll() {
    this.collection.reload().subscribe( res => {
      // Send GET request into path '/projects' with default query params 
      // per_page, page, search_query
    })
    
    /*
    For set query params use collection.setParams(key, value),
    
    this.collection
      .setParams('page', 2)
      .setParams('search_query', '1234')
      .search();
    
     */
  }
  
  create(data) {
    this.collection.createItem({ data }).subscribe( res => {
      // Send POST request into path '/projects' with data
      this.collection.search();
    })
  }

  update(data) {
    this.collection.updateItem({ id: data.id, data }).subscribe( res => {
      // Send PUT request into path '/projects/:id' with data
      this.collection.search();
    })
  }

  delete(id) {
    this.collection.deleteItem({ id }).subscribe( res => {
      // Send DELETE request into path '/projects/:id'
      this.collection.search();
    })
  }

  deleteMany(idsArray) {
    this.collection.deleteMany({ ids: idsArray }).subscribe( res => {
      // Send DELETE request into path '/projects' with body data ids: [...idsArray]
      this.collection.search();
    })
  }

  ngOnInit() {
    this.collection.search();
  }

  constructor(private _crud: CrudService) {
    this.collection = new Collection({
      api: this._crud.createEntity({ name: 'projects' }),
      params: {
        page: 1,
        per_page: 15,
        search_quesry: 'Project Name'
      }
    });
  }
}

// projects-list.component.html

<section class="projects-wrapper">
  <ng-container *ngFor="let project of collection.items$ | async">
    <div class="project-item">
      {{ project?.name }}
    </div>
  </ng-container>
  
  <ng-container *ngIf="collection.loading$ | async">
    <span>...Loading</span>
  </ng-container>
</section>