mohdrashid / ng2-listview-crud

This is a Angular JS 2/4 module that can be included in projects to automatically render a listview with built-in create, delete, update, read and search.

ng2-listview-crud

This is a Angular JS 2/4 module that can be included in projects to automatically render a listview with built-in create, delete, update, read and search.

Installation

To install this library, run:

$ npm install ng2-listview-crud --save

Usage

Declare this component in the declaration

```typescript
    import { NgModule } from '@angular/core';
    import {Ng2ListViewCRUD} from "ng2-listview-crud";



    @NgModule({
      imports: [
      ],
      declarations: [ Ng2ListViewCRUD ],
      providers: [  ]
    })
    export class MainWidgetModule { }
```

In the component [For simple array]

```typescript
import { Component } from '@angular/core';
import {Ng2ListViewCRUDProperty} from "ng2-listview-crud";

@Component({
  templateUrl: './main.component.html',
  selector:'widget-main'
})
export class MainWidgetComponent {

  public listView:Ng2ListViewCRUDProperty= {
    add:true,//Adding possible
    remove:true,//Removing elements possible
    edit:true,//editing possible
    dataIsObject:false,
    path:[],
    label:"CRUD ListView",
    headingBackgroundColor:"#3752ff",
    headingFontColor:"#5f6468",
    icon:"fa fa-cogs",
    onDelete:function(value){
      console.log("Deleting Value: "+JSON.stringify(value));
      return true;
    },
    onUpdate:function(value,newValue){
      console.log("Editing Value: "+JSON.stringify(value)+" New Value:"+newValue);
      return true;
    },
    onSearch:function(value){
      console.log(value)
    },
    onAdd:function(value){
      console.log("Adding Value: "+JSON.stringify(value));
      return true;
    },
    onSelect:function(value){
      console.log(JSON.stringify(value));
    },
    onSearchChange:function(value){
      console.log(value)
    }  
  };

  //In this specific example the field name.first is displayed in the list
  public listItems:Array<Object>=
  [
  "Apple","Orange"
  ];
}
```

In the component [For nested structure]

```typescript
import { Component } from '@angular/core';
import {Ng2ListViewCRUDProperty} from "ng2-listview-crud";

@Component({
  templateUrl: './main.component.html',
  selector:'widget-main'
})
export class MainWidgetComponent {

  public listView:Ng2ListViewCRUDProperty= {
    add:true,//Adding possible
    remove:true,//Removing elements possible
    edit:true,//editing possible  
    dataIsObject:true,
    path:["name","first"],
    label:"CRUD ListView",
    headingBackgroundColor:"#3752ff",
    headingFontColor:"#5f6468",
    icon:"fa fa-cogs",
    onDelete:function(value){
      console.log("Deleting Value: "+JSON.stringify(value));
      return true;
    },
    onUpdate:function(value,newValue){
      console.log("Editing Value: "+JSON.stringify(value)+" New Value:"+newValue);
      return true;
    },
    onSearch:function(value){
      console.log(value)
    },
    onAdd:function(value){
      console.log("Adding Value: "+JSON.stringify(value));
      return true;
    },
    onSelect:function(value){
      console.log(JSON.stringify(value));
    },
    onSearchChange:function(value){
      console.log(value)
    }  
  };

  //In this specific example the field name.first is displayed in the list
  public listItems:Array<Object>=
  [
  {name:{first:"Hello",last:"World"},count:2}
  {name:{first:"Hello2",last:"World"},count:2}
  ];
}
```

Place the ng2-listview-crud selector in your component's html:

   <ng2-listview-crud [properties]="listView" [data]="listItems"></ng2-listview-crud>

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

License

MIT © Mohammed Rashid

ng2-listview-crud's Issues

Two Lists in same page

As you can see in attached screenshot I have created two lists. There are few issues I have identified

1. search is not case insensitive. Neither I can disable search.
2. I cannot select two different Items from different different list. For Eg: I cant select "Kapil" from List 1 and "Mistry" from List 2. the mouse selection disappears if from "Kapil" if I select "Mistry" (am I missing something?)
3. these are two different list. see code below

` <div class="row" *ngIf="marketDataSource;" >

<listitem #l1 [listView]="listMarket" [dataSource]="marketDataSource">

<listitem #l2 [listView]="listResidualMarketGroup" [dataSource]="marketGroupDataSource" >

                </div>`

where listMarket and ListResidualMarketGroup are List view properties defined as below
`this.listMarket = {
add: false,
remove: false,
edit: false,
dataIsObject: true,
//path: ["description"],
path: ["name"],
label: "Made For Markets",
headingBackgroundColor: "#3752ff",
headingFontColor: "white",
icon: "fa fa-cogs",
onDelete: function (value) {
return true;
},
onUpdate: function (value, newValue) {
return true;
},
onSearch: function (value) {

    },
    onAdd: function (value) {           
        return true;
    },
    onSelect: function (value) {            
        console.log(JSON.stringify(value));
    },
    onSearchChange: function (value) {      
        console.log("kapil")
    }
};

 this.listResidualMarketGroup = {
    add: false,
    remove: false,
    edit: false,
    dataIsObject: true,
    //path: (this.localvariables.ApplicationCode == "P" ? ["description"] : ["r2mGroupDescription"]),
    path:["last"],
    label: "Residual Market Groups",
    headingBackgroundColor: "#3752ff",
    headingFontColor: "white",
    icon: "fa fa-cogs",
    onDelete: function (value) {
        return true;
    },
    onUpdate: function (value, newValue) {
        return true;
    },
    onSearch: function (value) {
       
    },
    onAdd: function (value) {
        return true;
    },
    onSelect: function (value) {
        console.log(JSON.stringify(value));
    },
    onSearchChange: function (value) {
        console.log("kapil")
    }
};`

where is defined as
.html page
<ng2-listview-crud [properties]="listView" [data]="dataSource"></ng2-listview-crud>

.ts page
`import { Component, Input, EventEmitter, Output, IterableDiffers } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GroupDescriptor, process, State } from '@progress/kendo-data-query';
import { ItemData } from '../common/base.component';
import { Ng2ListViewCRUD, Ng2ListViewCRUDProperty } from 'ng2-listview-crud';
import { ListViewModule } from 'ng2-list-view';

@component({
selector: 'listitem',
template: require('./listItem.component.html'),

})
export class ListItemComponent {

@Input()
public listView: Ng2ListViewCRUDProperty;

@Input()
public dataSource: Array<Object>;

}`

issue is.. if I select first item in List 1 ... the onselect event gets fired for both of the list...

see screenshot [list2

]

here in console both the records (from list1 and list2) are fired.

Am I implementing this incorrectly ??

Thanks for help..