I want to Design screen like this in AngularJS,
When i am using ngModel - then all checkboxes are getting selected
Please suggest solutions... Waiting for help desperately...
Here is my code for UserRights.htm
userrights.component.ts
- import { Component, OnInit } from '@angular/core';
- import { DataTableResource } from 'angular5-data-table';
- import { ValidateService } from 'services/validate.service';
- import { MiscService } from 'services/misc.service';
- import { UserHeaderService } from 'services/user-header.service';
- import { CommonService } from 'services/common.service';
- import { Globals } from 'Global/globals';
- import { CustomizeService } from 'services/customize.service';
- import { RightsHeaderService } from 'services/rights-header.service';
- import { NgxPaginationModule } from 'ngx-pagination';
- import { from } from 'rxjs';
- import { FORMERR } from 'dns';
- declare var $: any;
-
- @Component({
- selector: 'app-rights-header',
- templateUrl: './rights-header.component.html',
- styleUrls: ['./rights-header.component.scss']
- })
- export class RightsHeaderComponent implements OnInit {
- today: string;
- itemResource = new DataTableResource([]);
- itemResource1 = new DataTableResource([]);
- items = [];
- items1 = [];
- itemCount = 0;
- entryMode = false;
- entryMode1 = false;
- validationMessage = '';
- showValidation = false;
- isInProgress = false;
- deleting = false;
- itemToEdit =
- {
- "UserRightsID":0,
- "UserRightsName": "",
- "AuthenticationType": "",
- "Add":false,
- "Modify":false,
- "Deactivate":false,
- "View":false,
- "DefaultStore":"",
- "DefaultSubStore":"",
- "DefaultReceiptBook":"",
- "DefaultCostCentre":"",
- "Activate": true
- };
-
- itemToEditRights = {
- "UserRightsID":0,
- "UserRightsName": "",
- "AuthenticationType": "",
- "Add":false,
- "Modify":false,
- "Deactivate":false,
- "View":false,
- "DefaultStore":"",
- "DefaultSubStore":"",
- "Activate": true
- };
- selectedRows = [];
- messages: any;
- showSuccess: boolean;
- authentication: string[];
- client: string[];
- location: string[];
- employee: string[];
- doctor: string[];
- id : string;
- name : string;
-
- constructor(private validateService : ValidateService,
- private miscService: MiscService,
- private rightsService: RightsHeaderService,
- private commonService: CommonService,
- globals: Globals,
- private customizeService: CustomizeService
- ) {
- this.loadMessages();
- this.loadUser();
-
- }
-
- loadMessages(){
- this.customizeService.getMessages().subscribe(data => {
- this.messages = data;
- });
- }
-
- loadUser() {
- this.rightsService.getUser().subscribe(data => {
- this.items = data;
- this.itemResource = new DataTableResource(data);
- this.itemResource.count().then(count => this.itemCount = count);
-
- setTimeout(function(){
- this.reloadItems({});
- }.bind(this), 100);
- });
- }
-
- loadDetails() {
- this.rightsService.getDetails().subscribe(data => {
- this.items1 = data;
- this.itemResource1 = new DataTableResource(data);
- this.itemResource1.count().then(count => this.itemCount = count);
-
- setTimeout(function(){
- this.reloadItems({});
- }.bind(this), 100);
- });
- }
-
-
-
-
- saveUser(){
- this.isInProgress = true;
- this.rightsService.saveUser(this.itemToEdit).subscribe(data => {
- this.loadUser();
-
- alert(this.messages['msg_Success']);
- this.entryMode = false;
- this.isInProgress = false;
- });
- }
-
-
- getUser(id)
- {
- debugger;
-
- }
-
-
- FormChanged(){
- if(this.validationMessage != ''){
- var inValidateResult = this.validateService.validate(this.itemToEdit);
- if(inValidateResult){
- this.validationMessage = inValidateResult;
- this.showValidation = true;
- this.isInProgress = true;
- }
- else{
- this.validationMessage = '';
- this.showValidation = false;
- this.isInProgress = false;
- }
- }
- }
-
-
- AddNew(){
- this.itemToEdit =
- {
- "UserRightsID":0,
- "UserRightsName": "",
- "AuthenticationType": "",
- "Add":false,
- "Modify":false,
- "Deactivate":false,
- "View":false,
- "DefaultStore":"",
- "DefaultSubStore":"",
- "DefaultReceiptBook":"",
- "DefaultCostCentre":"",
- "Activate": true
- };
- this.entryMode = true;
- }
-
- ViewRights(id,name)
- {
- this.itemToEditRights =
- {
- "UserRightsID":id,
- "UserRightsName": name,
- "AuthenticationType": "",
- "Add":false,
- "Modify":false,
- "Deactivate":false,
- "View":false,
- "DefaultStore":"",
- "DefaultSubStore":"",
- "Activate": true
- };
- this.entryMode = true;
- }
-
-
- ViewUser(UserRightsID) {
- debugger;
- if(this.deleting){
- return;
- }
- this.rightsService.getUserById(UserRightsID).subscribe(data =>{
-
-
-
- this.itemToEdit = data;
- });
- this.entryMode = true;
- }
-
-
- Delete(item, showSuccess = false){
- this.deleting = true;
- this.showSuccess = showSuccess;
- this.DeleteById(item.UserRightsID)
- }
-
-
- DeleteById(id){
- this.rightsService.DeleteUser(id).subscribe(data => {
- if(this.showSuccess){
- this.showSuccess = false;
- alert(this.messages['msg_Delete']);
- this.loadUser();
- }
- this.deleting = false;
- });
- }
-
-
- closeEntry(){
- this.AddNew();
- this.ViewRights(this.id,this.name);
- this.entryMode = false;
- }
-
-
- selected(item, params){
- debugger;
- const myArr: any = [item.length][5];
- if(params.checked)
- {
-
- this.selectedRows.push(item.UserRightsID + params.name);
-
- var arr = this.selectedRows;
- }
- else{
- this.selectedRows = this.selectedRows.filter(ele => { return ele != item.UserRightsID });
- }
- }
-
-
- DeleteSelected(){
- if(this.selectedRows.length == 0){
- alert(this.messages['msg_DeleteSelection']);
- return;
- }
- var con = confirm(this.messages['cnfm_Delete']);
- if(con){
- for(var i = 0; i < this.selectedRows.length; i++){
- this.showSuccess = i == this.selectedRows.length - 1;
- this.DeleteById(this.selectedRows[i]);
- }
- }
- }
-
-
- reloadItems(params) {
- this.itemResource.query(params).then(items => this.items = items);
- }
-
- ngOnInit() {
-
- this.commonService.getClientList(this.client).subscribe(data =>{
- debugger;
- this.client = data as string [];
- this.itemToEdit = data;
- });
-
-
- this.commonService.getLocationList(this.location).subscribe(data =>{
- debugger;
- this.location = data as string [];
- this.itemToEdit = data;
- });
-
-
- this.miscService.getAuthenticationType().subscribe(data =>{
- this.authentication = data as string [];
- this.itemToEdit = data;
- });
-
-
- this.commonService.getEmploeeList(this.employee).subscribe(data =>{
- this.employee = data as string[];
- this.itemToEdit = data;
- });
-
-
- }
-
-
- numberOnly(event) : boolean {
- const charCode = (event.which) ? event.which : event.keyCode;
- if(charCode < 48 || charCode > 57)
- {
- return false;
- }
- return true;
- }
-
-
- alphabetOnly(event) : boolean {
- const charCode = (event.which) ? event.which : event.keyCode;
- if((charCode < 65 || charCode > 90) && (charCode < 97 || charCode > 122) && ( charCode != 32))
- {
- return false;
- }
- return true;
- }
- }
Userrights.service.ts
- import { Injectable } from '@angular/core';
- import {Router} from '@angular/router';
- import { Http, Headers } from '@angular/http';
- import { catchError, map } from 'rxjs/operators';
- import { environment } from '../environments/environment';
-
- @Injectable()
- export class RightsHeaderService {
-
- isSessionVaild = true;
- constructor(private http: Http, public router: Router) { this.isSessionVaild = true; }
-
-
- getUser(){
- debugger;
- let headers = new Headers();
- headers.append('Content-Type', 'application/json');
- headers.append('Access-Control-Allow-Origin', '*');
- headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT');
- return this.http.get(environment.apiUrl + 'Rights', { headers: headers })
- .pipe(map(data => data.json()),
- catchError((error: any) => {
- throw error;
- }));
- }
-
- redirectToRights(url)
- {
- debugger;
- var myurl = `${url}`;
- this.router.navigateByUrl(myurl).then(e => {
- if (e) {
- console.log("Navigation is successful!");
- } else {
- console.log("Navigation has failed!");
- }
- });
- }
-
-
- getDetails(){
- debugger;
- let headers = new Headers();
- headers.append('Content-Type', 'application/json');
- headers.append('Access-Control-Allow-Origin', '*');
- headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT');
- return this.http.get(environment.apiUrl + 'Demo', { headers: headers })
- .pipe(map(data => data.json()),
- catchError((error: any) => {
- throw error;
- }));
- }
-
-
-
- getUserById(id){
- debugger;
- let headers = new Headers();
- headers.append('Content-Type', 'application/json');
- headers.append('Access-Control-Allow-Origin', '*');
- headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT');
- return this.http.get(environment.apiUrl + 'Rights/'+id, { headers: headers })
- .pipe(map(data => data.json()),
- catchError((error: any) => {
- throw error;
- }));
- }
-
-
- saveUser(Rights){
- debugger;
- let headers = new Headers();
- headers.append('Content-Type', 'application/json');
- headers.append('Access-Control-Allow-Origin', '*');
- headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT');
- return this.http.post(environment.apiUrl + 'Rights', Rights, { headers: headers })
- .pipe(map(data => data.json()),
- catchError((error: any) => {
- throw error;
- }));
- }
-
-
- DeleteUser(id){
- debugger;
- let headers = new Headers();
- headers.append('Content-Type', 'application/json');
- headers.append('Access-Control-Allow-Origin', '*');
- headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
- return this.http.delete(environment.apiUrl + 'Rights/'+id, { headers: headers })
- .pipe(map(data => data.json()),
- catchError((error: any) => {
- throw error;
- }));
- }
- }