User Permission - Handling multiple Checkboxes in single row

Question

Hi guyz,

I am designing USER PERMISSION component in AngularJS 6 and ASP.NET MVC 5

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

<div class="card">
<div class="card-header">
<h4 class="card-title">User Rights Header</h4>
</div>
<div class="card-body">
<button class="btn btn-default" (click)="AddNew()" >Add New</button>
<div style="overflow: hidden;" *ngIf="!entryMode" class="table-responsive">
<data-table name="user-rights-grid"
headerTitle="UserRightsHeader"
[items]="items"
[itemCount]="itemCount"
(reload)="reloadItems($event)"
>
<data-table-column>
<ng-template #dataTableHeader let-item="item">
<i><button class="btn btn-sm btn-danger" (click)="DeleteSelected()">Delete Selected</button></i>
</ng-template>
<ng-template #dataTableCell let-item="item">
<input type="checkbox" (change)="selected(item, $event)">
</ng-template>
</data-table-column>
<data-table-column
[property]="'UserRightsName'"
[header]="'Name'"
[sortable]="true"
[resizable]="true">
</data-table-column>
<data-table-column
[property]="'AuthenticationType'"
[header]="'Authentication'"
>
</data-table-column>
<data-table-column header="View">
<ng-template #dataTableHeader let-item="item">
<i>View</i>
</ng-template>
<ng-template #dataTableCell let-item="item">
<button (click)="ViewUser(item.UserRightsID)" class="btn btn-sm btn-primary">View</button>
</ng-template>
</data-table-column>
<data-table-column header="Detele">
<ng-template #dataTableHeader let-item="item">
<i>Delete</i>
</ng-template>
<ng-template #dataTableCell let-item="item">
<button (click)="Delete(item, true)" class="btn btn-sm btn-danger">Delete</button>
</ng-template>
</data-table-column>
<data-table-column header="EditRights" >
<ng-template #dataTableCell let-item="item" data-visible="true">
<button (click)="ViewRights(item.UserRightsID,item.UserRightsName)" class="btn btn-sm btn-info">Edit Rights</button>
</ng-template>
</data-table-column>
</data-table>
</div>
<!-- This form is for Rights Header -->
<div *ngIf="entryMode">
<div class="modal-header">
<h4 class="modal-title pull-left">Edit User Rights Header Information</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="closeEntry()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form name="EditUserRights" (change)="FormChanged()" role="form" (submit)="saveUser()">
<table class="editForm table-responsive" id="editForm">
<tr class="tr">
<td style="padding-left: 0px" colspan="2">
<table>
<tr class="tr">
<th class="editForm">
User Rights Name
</th>
<td style="padding-left: 10px">
<input type="text" name="rightsname" id="rightsname" class="form-control" [(ngModel)]="itemToEdit.UserRightsName" placeholder="User Rights Name" required="required">
</td>
<th style="padding-left: 8px" class="editForm">
Default Store
</th>
<td>
<input type="text" name="defaultstore" id="defaultstore" (keypress)="alphabetOnly($event)" autocomplete="off" class="form-control" [(ngModel)]="itemToEdit.DefaultStore" placeholder="Enter Default Store" required="required">
</td>
<th style="padding-left: 8px" class="editForm">
Default Sub Store
</th>
<td>
<input type="text" name="defaultsubstore" id="defaultsubstore" (keypress)="alphabetOnly($event)" autocomplete="off" class="form-control" [(ngModel)]="itemToEdit.DefaultSubStore" placeholder="Default Sub Store" required="required">
</td>
</tr>
<br>
<tr class="tr">
<th style="padding-left: 8px" class="editForm">
Default Receipt Book
</th>
<td>
<input type="text" name="defaultreceiptbook" id="defaultreceiptbook" autocomplete="off" class="form-control" [(ngModel)]="itemToEdit.DefaultReceiptBook" placeholder="Enter Receipt Book" required="required">
</td>
<th style="padding-left: 8px" class="editForm">
Default Cost Centre
</th>
<td>
<input type="text" name="defaultcostcentre" id="defaultcostcentre" autocomplete="off" class="form-control" [(ngModel)]="itemToEdit.DefaultCostCentre" placeholder="Enter Default Store" required="required">
</td>
<th>Active:</th>
<td style="float : left;">
<label><input name="options" ng-control="options" type="radio" [value]="true" [(ngModel)]="itemToEdit.Activate"> Yes</label><br/>
<label><input name="options" ng-control="options" type="radio" [value]="false" [(ngModel)]="itemToEdit.Activate" > No</label><br/>
</td>
</tr>
<tr class="tr">
<th>Authentication</th>
<td style="padding-left: 10px">
<div>
<input type="checkbox" id="Addition" name="Addition" [(ngModel)]="itemToEdit.Add"> Add<br>
<input type="checkbox" id="Modification" name="Modification" [(ngModel)]="itemToEdit.Modify"> Modify<br>
<input type="checkbox" id="Deletion" name="Deletion" [(ngModel)]="itemToEdit.Deactivate"> Deactivate<br>
<input type="checkbox" id="View" name="View" [(ngModel)]="itemToEdit.View"> View
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<div class="row" *ngIf="showValidation">
<div class="small-12 columns error">
<div class="alert alert-danger" [innerHTML]="validationMessage"></div>
</div>
</div>
<div class="row">
<div class="small-12 columns error">
</div>
</div>
</td>
</tr>
<tr>
<td>
<button type="submit" [disabled] = "isInProgress" class="btn btn-primary block full-width m-b">Save</button>
</td>
<td>
<button type="button" class="btn btn-default block full-width m-b" (click)="closeEntry()">
Cancel
</button>
</td>
</tr>
</table>
</form>
</div>
</div>
<!-- This form is for Rights Details -->
<div *ngIf="entryMode1">
<div class="modal-header">
<h4 class="modal-title pull-left">Edit User Rights Details</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="closeEntry()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form name="EditUserRights" (change)="FormChanged()" role="form" (submit)="saveUser()">
<table class="editForm table-responsive" id="editForm">
<tr class="tr">
<td style="padding-left: 0px" colspan="2">
<table>
<tr class="tr">
<th class="editForm">
User Rights Name
</th>
<td style="padding-left: 10px">
<input type="text" name="rightsname" id="rightsname" class="form-control" [(ngModel)]="itemToEdit.UserRightsName" placeholder="User Rights Name" required="required">
</td>
<th style="padding-left: 8px" class="editForm">
Default Store
</th>
<td>
<input type="text" name="defaultstore" id="defaultstore" (keypress)="alphabetOnly($event)" autocomplete="off" class="form-control" [(ngModel)]="itemToEdit.DefaultStore" placeholder="Enter Default Store" required="required">
</td>
<th style="padding-left: 8px" class="editForm">
Default Sub Store
</th>
<td>
<input type="text" name="defaultsubstore" id="defaultsubstore" (keypress)="alphabetOnly($event)" autocomplete="off" class="form-control" [(ngModel)]="itemToEdit.DefaultSubStore" placeholder="Default Sub Store" required="required">
</td>
</tr>
<br>
<tr class="tr">
<th>Active:</th>
<td style="float : left;">
<label><input name="options" ng-control="options" type="radio" [value]="true" [(ngModel)]="itemToEdit.Activate"> Yes</label><br/>
<label><input name="options" ng-control="options" type="radio" [value]="false" [(ngModel)]="itemToEdit.Activate" > No</label><br/>
</td>
</tr>
<tr class="tr">
<th>Authentication</th>
<td style="padding-left: 10px">
<div>
<input type="checkbox" id="Addition" name="Addition" [(ngModel)]="itemToEdit.Add"> Add<br>
<input type="checkbox" id="Modification" name="Modification" [(ngModel)]="itemToEdit.Modify"> Modify<br>
<input type="checkbox" id="Deletion" name="Deletion" [(ngModel)]="itemToEdit.Deactivate"> Deactivate<br>
<input type="checkbox" id="View" name="View" [(ngModel)]="itemToEdit.View"> View
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<div class="row" *ngIf="showValidation">
<div class="small-12 columns error">
<div class="alert alert-danger" [innerHTML]="validationMessage"></div>
</div>
</div>
<div class="row">
<div class="small-12 columns error">
</div>
</div>
</td>
</tr>
<tr>
<td>
<button type="submit" [disabled] = "isInProgress" class="btn btn-primary block full-width m-b">Save</button>
</td>
<td>
<button type="button" class="btn btn-default block full-width m-b" (click)="closeEntry()">
Cancel
</button>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>

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();
 //this.loadDetails();
 }

 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);
 });
 }



 //Saving User data
 saveUser(){
 this.isInProgress = true;
 this.rightsService.saveUser(this.itemToEdit).subscribe(data => {
 this.loadUser();
 //this.loadDetails();
 alert(this.messages['msg_Success']);
 this.entryMode = false;
 this.isInProgress = false;
 });
 }

 //getUsers() get called on click of edit rights button
 getUser(id)
 {
 debugger;

 }

 // validates the form when user enter some values.
 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;
 }
 }
 }

 // used to open new form.
 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;
 }

 // used to get customer w.r.t id.
 ViewUser(UserRightsID) {
 debugger;
 if(this.deleting){
 return;
 }
 this.rightsService.getUserById(UserRightsID).subscribe(data =>{
 // var datePipe = new DatePipe('en-US');

 // data.DOB = datePipe.transform(data.DOB, 'yyyy-MM-dd');
 this.itemToEdit = data;
 });
 this.entryMode = true;
 }

 // Deletes customer.
 Delete(item, showSuccess = false){
 this.deleting = true;
 this.showSuccess = showSuccess;
 this.DeleteById(item.UserRightsID)
 }

 // Deletes customer on the basis of id.
 DeleteById(id){
 this.rightsService.DeleteUser(id).subscribe(data => {
 if(this.showSuccess){
 this.showSuccess = false;
 alert(this.messages['msg_Delete']);
 this.loadUser();
 }
 this.deleting = false;
 });
 }

 // used to close entry mode.
 closeEntry(){
 this.AddNew();
 this.ViewRights(this.id,this.name);
 this.entryMode = false;
 }

//Selected Users
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 });
 }
}

// this will be used to delete multiple customers.
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]);
 }
 }
}

// This method would be used to get latest set of records when added, updated or deleted.
reloadItems(params) {
 this.itemResource.query(params).then(items => this.items = items);
}

 ngOnInit() {
 // Getting Client from Common Service.
 this.commonService.getClientList(this.client).subscribe(data =>{
 debugger;
 this.client = data as string [];
 this.itemToEdit = data;
 });

 // Getting Location from Service.
 this.commonService.getLocationList(this.location).subscribe(data =>{
 debugger;
 this.location = data as string [];
 this.itemToEdit = data;
 });

 // Getting Authentication type from Misc.
 this.miscService.getAuthenticationType().subscribe(data =>{
 this.authentication = data as string [];
 this.itemToEdit = data;
 });

 //Getting Employee from Common
 this.commonService.getEmploeeList(this.employee).subscribe(data =>{
 this.employee = data as string[];
 this.itemToEdit = data;
 });


 }

 //Allow to enter only Number
 numberOnly(event) : boolean {
 const charCode = (event.which) ? event.which : event.keyCode;
 if(charCode < 48 || charCode > 57)
 {
 return false;
 }
 return true;
 }

 //Allow to enter only Aplhabets
 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; }

 // Loads all User
 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!");
 }
 });
 }

 // Loads all Details of Component and Authentication
 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;
 }));
 }

 // Loads User on the basis of id.

 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;
 }));
 }

 // Saves/updates User.
 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;
 }));
 }

 // Deletes Doctor on the basis of id.
 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;
 }));
 }
}