This commit is contained in:
Smart 2023-03-13 16:55:39 +05:30
parent 17c24f685a
commit a4ee411448
8 changed files with 282 additions and 111 deletions

View File

@ -2,37 +2,44 @@
<h5 mat-dialog-title> <strong>{{action}} Users</strong>
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
><mat-icon>close</mat-icon></button></h5>
<ng-scrollbar class="scrollHV">
<div mat-dialog-content class="my-table">
<form [formGroup]="form" (ngSubmit)="submit()">
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
<input placeholder="Role" matInput formControlName="role">
<mat-error *ngIf="myError('role', 'required')">role is required</mat-error>
<mat-error *ngIf="myError('role', 'maxlength')">Limit exceed</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
<input placeholder="User Name" matInput formControlName="Username">
<mat-error *ngIf="myError('Username', 'required')">Username is required</mat-error>
<mat-error *ngIf="myError('Username', 'maxlength')">Limit exceed</mat-error>
<input placeholder="User Name" matInput formControlName="userName">
<mat-error *ngIf="myError('userName', 'required')">Username is required</mat-error>
<mat-error *ngIf="myError('userName', 'maxlength')">Limit exceed</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
<input placeholder="Password" matInput formControlName="Password">
<mat-error *ngIf="myError('Password', 'required')">Password is required</mat-error>
<mat-error *ngIf="myError('Password', 'maxlength')">Limit exceed</mat-error>
<input placeholder="Password" matInput formControlName="password">
<mat-error *ngIf="myError('password', 'required')">Password is required</mat-error>
<mat-error *ngIf="myError('password', 'maxlength')">Limit exceed</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
<!-- <mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
<input placeholder="ConfirmPassword" matInput formControlName="confirmPassword">
<mat-error *ngIf="myError('confirmPassword', 'required')">confirmPassword is required</mat-error>
<mat-error *ngIf="myError('confirmPassword', 'maxlength')">Limit exceed</mat-error>
</mat-form-field>
</mat-form-field> -->
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
<input placeholder="First Name" matInput formControlName="FirstName">
<mat-error *ngIf="myError('FirstName', 'required')">FirstName is required</mat-error>
<mat-error *ngIf="myError('FirstName', 'maxlength')">Limit exceed</mat-error>
<input placeholder="First Name" matInput formControlName="firstName">
<mat-error *ngIf="myError('firstName', 'required')">FirstName is required</mat-error>
<mat-error *ngIf="myError('firstName', 'maxlength')">Limit exceed</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
<input placeholder="Last Name" matInput formControlName="LastName">
<mat-error *ngIf="myError('LastName', 'required')">LastName is required</mat-error>
<mat-error *ngIf="myError('LastName', 'maxlength')">Limit exceed</mat-error>
<input placeholder="Last Name" matInput formControlName="lastName">
<mat-error *ngIf="myError('lastName', 'required')">LastName is required</mat-error>
<mat-error *ngIf="myError('lastName', 'maxlength')">Limit exceed</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
@ -46,6 +53,7 @@
</mat-form-field>
</form>
</div>
</ng-scrollbar>
<ng-template #elseTemplate>
Sure to delete <b>{{local_data.name}}</b>?
</ng-template><br>

View File

@ -26,8 +26,12 @@
}
::ng-deep .mat-dialog-content {
max-height: 75vh!important;
overflow: hidden!important;
overflow: unset!important;
// overflow: hidden!important;
}
::ng-deep .mat-dialog-container{
overflow: hidden!important;
}
.scrollHV {
height: calc(100vh - 190px);
}

View File

@ -3,7 +3,7 @@ import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Router } from '@angular/router';
export interface UsersData {
name: string;
userName: string;
id: number;
}
@Component({
@ -29,14 +29,7 @@ export class UserDialogBoxComponent implements OnInit {
get f(){
return this.form.controls;
}
doAction(){
let tmp = this.form.value
tmp.id = this.local_data.id
tmp.confirmPassword = this.local_data.confirmPassword
this.dialogRef.close({event:this.action,data:tmp});
console.log(this.form.value);
console.log(this.action,this.local_data)
}
closeDialog(){
this.dialogRef.close({event:'Cancel'});
@ -55,21 +48,31 @@ export class UserDialogBoxComponent implements OnInit {
}
ngOnInit() {
this.form = new FormGroup({
Username: new FormControl('', [Validators.required, Validators.maxLength(20)]),
FirstName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
LastName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
role: new FormControl('', [Validators.required, Validators.maxLength(20)]),
userName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
firstName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
lastName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
'[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
),]),
Password: new FormControl('', [Validators.required, Validators.minLength(6)]),
confirmPassword: new FormControl('', [Validators.required, Validators.minLength(6)]),
password: new FormControl('', [Validators.required, Validators.minLength(6)]),
// confirmPassword: new FormControl('', [Validators.required, Validators.minLength(6)]),
});
this.form.patchValue(this.local_data)
}
public myError = (controlName: string, errorName: string) =>{
return this.form.controls[controlName].hasError(errorName);
}
doAction(){
let tmp = this.form.value
tmp.id = this.local_data.id
// tmp.confirmPassword = this.local_data.confirmPassword
this.dialogRef.close({event:this.action,data:tmp});
console.log(this.form.value);
console.log(this.action,this.local_data)
}
submit(){
console.log(this.form.value);
}
}

View File

@ -20,13 +20,18 @@
<mat-expansion-panel>
<mat-expansion-panel-header >
<div class="example-container ">
<table mat-table [dataSource]="dataSource" #mytable class="my-table mat-elevation-z8 len-table">
<table mat-table [dataSource]="usersList" #mytable class="my-table mat-elevation-z8 len-table">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef class="font-color"> S.No</th>
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.id}} </td>
</ng-container>
<ng-container matColumnDef="role">
<th mat-header-cell *matHeaderCellDef class="font-color"> Role </th>
<td mat-cell *matCellDef="let element"> {{element.role}} </td>
</ng-container>
<ng-container matColumnDef="logo">
<th mat-header-cell *matHeaderCellDef class="font-color"> Logo </th>
<td mat-cell *matCellDef="let element"> <img [src]="element.logo" /> </td>
@ -34,27 +39,27 @@
<ng-container matColumnDef="Username">
<th mat-header-cell *matHeaderCellDef class="font-color"> User Name </th>
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.Username}} </td>
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.userName}} </td>
</ng-container>
<ng-container matColumnDef="Password">
<th mat-header-cell *matHeaderCellDef class="font-color"> Password </th>
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.Password}} </td>
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.password}} </td>
</ng-container>
<ng-container matColumnDef="name">
<!-- <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef class="font-color"> Username </th>
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.Username}} </td>
</ng-container>
</ng-container> -->
<ng-container matColumnDef="FirstName">
<th mat-header-cell *matHeaderCellDef class="font-color"> First Name </th>
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.FirstName}} </td>
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.firstName}} </td>
</ng-container>
<ng-container matColumnDef="LastName">
<th mat-header-cell *matHeaderCellDef class="font-color"> Last Name </th>
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.LastName}} </td>
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.lastName}} </td>
</ng-container>
<ng-container matColumnDef="email">
@ -62,10 +67,6 @@
<td mat-cell *matCellDef="let element"> {{element.email}} </td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef class="font-color"> State </th>
<td mat-cell *matCellDef="let element"> {{element.state}} </td>
</ng-container>
<ng-container matColumnDef="city">
<th mat-header-cell *matHeaderCellDef class="font-color"> City </th>

View File

@ -5,30 +5,32 @@ import { MatSort } from '@angular/material/sort';
import { MatTable, MatTableDataSource } from '@angular/material/table';
import Swal from 'sweetalert2/dist/sweetalert2.js';
import { UserDialogBoxComponent } from '../user-dialog-box/user-dialog-box.component';
import { UserService } from '../user-service/user.service';
export interface UsersData {
id: number;
// logo: string;
Username: string;
Password: string;
userName: string;
password: string;
confirmPassword: string;
FirstName: string;
LastName: string;
firstName: string;
lastName: string;
email: string;
role: string;
}
const ELEMENT_DATA: UsersData[] = [
{id: 1, Username: 'school management system ',Password: '!@Lotus3033', confirmPassword: '!@Lotus3033', FirstName: 'kamali' , LastName: 'sample' , email: 'management@gmail.com'},
{id: 2, Username: 'school management ',Password: '!@Lotus3033', confirmPassword: '!@Lotus3033', FirstName: 'kamali' , LastName: 'sample' , email: 'management@gmail.com'},
{id: 3, Username: 'school management system ',Password: '!@Lotus3033', confirmPassword: '!@Lotus3033', FirstName: 'kamali' , LastName: 'sample' , email: 'management@gmail.com'},
{id: 4, Username: 'school management ',Password: '!@Lotus3033', confirmPassword: '!@Lotus3033', FirstName: 'kamali' , LastName: 'sample' , email: 'management@gmail.com'},
{id: 5, Username: 'school management system ',Password: '!@Lotus3033', confirmPassword: '!@Lotus3033', FirstName: 'kamali' , LastName: 'sample' , email: 'management@gmail.com'},
{id: 6, Username: 'school management ',Password: '!@Lotus3033', confirmPassword: '!@Lotus3033', FirstName: 'kamali' , LastName: 'sample' , email: 'management@gmail.com'},
{id: 7, Username: 'school management system ',Password: '!@Lotus3033', confirmPassword: '!@Lotus3033', FirstName: 'kamali' , LastName: 'sample' , email: 'management@gmail.com'},
{id: 8, Username: 'school management ',Password: '!@Lotus3033', confirmPassword: '!@Lotus3033', FirstName: 'kamali' , LastName: 'sample' , email: 'management@gmail.com'},
{id: 9, Username: 'school management system ',Password: '!@Lotus3033', confirmPassword: '!@Lotus3033', FirstName: 'kamali' , LastName: 'sample' , email: 'management@gmail.com'},
{id: 10, Username: 'school management ',Password: '!@Lotus3033', confirmPassword: '!@Lotus3033', FirstName: 'kamali' , LastName: 'sample' , email: 'management@gmail.com'},
{id: 11, Username: 'school management system ',Password: '!@Lotus3033', confirmPassword: '!@Lotus3033', FirstName: 'kamali' , LastName: 'sample' , email: 'management@gmail.com'},
{id: 1, role: 'ADMIN', userName: 'school management system ',password: '!@Lotus3033', confirmPassword: '!@Lotus3033', firstName: 'kamali' , lastName: 'sample' , email: 'management@gmail.com'},
{id: 2, role: 'ADMIN', userName: 'school management ',password: '!@Lotus3033', confirmPassword: '!@Lotus3033', firstName: 'kamali' , lastName: 'sample' , email: 'management@gmail.com'},
{id: 3, role: 'ADMIN', userName: 'school management system ',password: '!@Lotus3033', confirmPassword: '!@Lotus3033', firstName: 'kamali' , lastName: 'sample' , email: 'management@gmail.com'},
{id: 4, role: 'ADMIN', userName: 'school management ',password: '!@Lotus3033', confirmPassword: '!@Lotus3033', firstName: 'kamali' , lastName: 'sample' , email: 'management@gmail.com'},
{id: 5, role: 'ADMIN', userName: 'school management system ',password: '!@Lotus3033', confirmPassword: '!@Lotus3033', firstName: 'kamali' , lastName: 'sample' , email: 'management@gmail.com'},
{id: 6, role: 'ADMIN', userName: 'school management ',password: '!@Lotus3033', confirmPassword: '!@Lotus3033', firstName: 'kamali' , lastName: 'sample' , email: 'management@gmail.com'},
{id: 7, role: 'ADMIN', userName: 'school management system ',password: '!@Lotus3033', confirmPassword: '!@Lotus3033', firstName: 'kamali' , lastName: 'sample' , email: 'management@gmail.com'},
{id: 8, role: 'ADMIN', userName: 'school management ',password: '!@Lotus3033', confirmPassword: '!@Lotus3033', firstName: 'kamali' , lastName: 'sample' , email: 'management@gmail.com'},
{id: 9, role: 'ADMIN', userName: 'school management system ',password: '!@Lotus3033', confirmPassword: '!@Lotus3033', firstName: 'kamali' , lastName: 'sample' , email: 'management@gmail.com'},
{id: 10, role: 'ADMIN',userName: 'school management ',password: '!@Lotus3033', confirmPassword: '!@Lotus3033', firstName: 'kamali' , lastName: 'sample' , email: 'management@gmail.com'},
{id: 11, role: 'ADMIN', userName: 'school management system ',password: '!@Lotus3033', confirmPassword: '!@Lotus3033', firstName: 'kamali' , lastName: 'sample' , email: 'management@gmail.com'},
];
@ -39,23 +41,61 @@ const ELEMENT_DATA: UsersData[] = [
})
export class UserListComponent implements OnInit {
push: any;
displayedColumns: string[] = ['id', 'Username', 'Password', 'FirstName', 'LastName', 'email', 'action'];
displayedColumns: string[] = ['id', 'role', 'Username', 'Password', 'FirstName', 'LastName', 'email', 'action'];
dataSource: any;
addFormData: any;
public usersList:any = new MatTableDataSource();
@ViewChild(MatTable,{static:true}) table: MatTable<any>;
@ViewChild(MatPaginator) paginator: MatPaginator;
constructor(public dialog: MatDialog, public _use:UserService) { }
ngOnInit(): void {
// this.dataSource = new MatTableDataSource(ELEMENT_DATA)
this.getUsersList()
}
getUsersList() {
//this._pd.getTabStatusPdDetails(this.tabStatus)
this._use.getUsersListDetails().subscribe(res => {
if (res.status == 200) {
this.usersList = res.data;
// console.log(this.usersList)
// this.dataSource = res.data.length;
// console.log(this.dataSource)
// this.dataSource.data = this.usersList;
// console.log(this.dataSource.data)
// this.recordStatus=false;
}
else{
// this.usersList=[];
// this.dataSource = null;
// this.recordStatus=true;
}
}
,error => {
// this.errorMessage.push(error);
// this.notifier.notify('error', 'Something Went Wrong Try Again.! \t\"' + (error.error_type == 2 ? error.error_status + ' ( ' + error.error_text + ' ) ' : ' ( ' + error.error_text + ' ) ') +'\" Error Occur.!');
// alert(error.html_format);
});
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.usersList.paginator = this.paginator;
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
this.usersList.filter = filterValue.trim().toLowerCase();
if (this.usersList.paginator) {
this.usersList.paginator.firstPage();
}
}
constructor(public dialog: MatDialog) { }
pageChange(e) {
console.log(e);
}
confirmBox(name,element){
console.log(name,element)
Swal.fire({
@ -67,7 +107,8 @@ export class UserListComponent implements OnInit {
cancelButtonText: 'No, keep it'
}).then((result) => {
if (result.value) {
this.deleteRowData(element);
// this.deleteRowData(element);
this.formAddUpdateAndDelete(name,element)
Swal.fire(
'Deleted!',
'Your imaginary file has been deleted.',
@ -94,54 +135,116 @@ export class UserListComponent implements OnInit {
data:obj
});
dialogRef.afterClosed().subscribe(result => {
console.log(result)
if(result.event == 'Add'){
this.addRowData(result.data);
}else if(result.event == 'Update'){
this.updateRowData(result.data);
}else if(result.event == 'Delete'){
this.deleteRowData(result.data);
}
if(result != undefined){
console.log(result)
this.formAddUpdateAndDelete(result,result.data)
}
// console.log(result)
// if(result.event == 'Add'){
// this.addRowData(result.data);
// }else if(result.event == 'Update'){
// this.updateRowData(result.data);
// }else if(result.event == 'Delete'){
// this.deleteRowData(result.data);
// }
});
}
addRowData(row_obj){
var d = this.dataSource.data.length+1
console.log(this.dataSource)
this.dataSource.data.push
({
id: d,
// logo: row_obj.logo,
Username: row_obj.Username,
Password: row_obj.Password,
FirstName: row_obj.FirstName,
LastName: row_obj.LastName,
email: row_obj.email,
});
this.table.renderRows();
}
updateRowData(row_obj){
console.log(row_obj)
this.dataSource = this.dataSource.data.filter((value,key)=>{
if(value.id == row_obj.id){
// value.logo = row_obj.logo;
value.Username = row_obj.Username;
value.Password = row_obj.Password;
value.FirstName = row_obj.FirstName;
value.LastName = row_obj.LastName;
value.email = row_obj.email;
}
return true;
});
}
deleteRowData(row_obj){
console.log(this.dataSource.data,row_obj)
this.dataSource.data = this.dataSource.data.filter((value,key)=>{
return value.id != row_obj.id
});
console.log(this.dataSource)
}
ngOnInit(): void {
this.dataSource = new MatTableDataSource(ELEMENT_DATA)
}
formAddUpdateAndDelete(result,row_obj){
console.log(result,row_obj)
let formValue = []
if(result.event == 'Add'){
console.log('add')
let addFormData = {
// logo: row_obj.logo,
id: row_obj.id,
userName: row_obj.userName,
password: row_obj.password,
firstName: row_obj.firstName,
lastName: row_obj.lastName,
email: row_obj.email,
role: row_obj.role,
};
formValue.push(addFormData);
}else if(result.event == 'Update'){
console.log('Update')
let updatevalue = {
id: row_obj.id,
userName: row_obj.userName,
password: row_obj.password,
firstName: row_obj.firstName,
lastName: row_obj.lastName,
email: row_obj.email,
role: row_obj.role,
}
formValue.push(updatevalue);
}
else if(result == 'Delete'){
console.log('delete')
let val = {
isActive:0,
id: row_obj.id
}
formValue.push(val);
}
// var d = this.usersList.length+1
console.log(formValue[0])
this._use.addFormDetails(formValue[0]).subscribe(res => {
if (res.status == 200) {
// this.usersList = res.data;
this.getUsersList()
}
else{
// this.usersList=[];
// this.dataSource = null;
// this.recordStatus=true;
}
}
// , error => {this.errorMessage = <any> error});
,error => {
// this.errorMessage.push(error);
// this.notifier.notify('error', 'Something Went Wrong Try Again.! \t\"' + (error.error_type == 2 ? error.error_status + ' ( ' + error.error_text + ' ) ' : ' ( ' + error.error_text + ' ) ') +'\" Error Occur.!');
// alert(error.html_format);
});
}
// addRowData(row_obj){
// var d = this.dataSource.data.length+1
// console.log(this.dataSource)
// this.dataSource.data.push
// ({
// id: d,
// // logo: row_obj.logo,
// Username: row_obj.Username,
// Password: row_obj.Password,
// FirstName: row_obj.FirstName,
// LastName: row_obj.LastName,
// email: row_obj.email,
// });
// this.table.renderRows();
// }
// updateRowData(row_obj){
// console.log(row_obj)
// this.dataSource = this.dataSource.data.filter((value,key)=>{
// if(value.id == row_obj.id){
// // value.logo = row_obj.logo;
// value.Username = row_obj.Username;
// value.Password = row_obj.Password;
// value.FirstName = row_obj.FirstName;
// value.LastName = row_obj.LastName;
// value.email = row_obj.email;
// }
// return true;
// });
// }
// deleteRowData(row_obj){
// console.log(this.dataSource.data,row_obj)
// this.dataSource.data = this.dataSource.data.filter((value,key)=>{
// return value.id != row_obj.id
// });
// console.log(this.dataSource)
// }
}

View File

@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';
import { UserService } from './user.service';
describe('UserService', () => {
let service: UserService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(UserService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});

View File

@ -0,0 +1,34 @@
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'environments/environment';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class UserService {
private apiUrl = environment.apiEndpoint;
constructor(private _http: HttpClient) { }
getUsersListDetails(): Observable<any> {
console.log('IN')
return this._http.get<any[]>(this.apiUrl + "getusers")
// .pipe(
// catchError(this.handleError('role', []))
// )
}
addFormDetails(addParams): Observable<any> {
return this._http.post(this.apiUrl + 'createUsers', addParams)
// .pipe(
// catchError(this.handleError('role', []))
// )
}
handleError(arg0: string, arg1: undefined[]): (err: any, caught: Observable<any>) => import("rxjs").ObservableInput<any> {
throw new Error('Method not implemented.');
}
}

View File

@ -7,6 +7,7 @@ import { MatSidenavModule } from '@angular/material/sidenav';
import { MatFormFieldModule } from '@angular/material/form-field';
import { UserDialogBoxComponent } from './user-dialog-box/user-dialog-box.component';
import { DemoMaterialModule } from 'app/shared/demo.module';
import { NgScrollbarModule } from 'ngx-scrollbar';
@ -21,7 +22,8 @@ import { DemoMaterialModule } from 'app/shared/demo.module';
CommonModule,
UserRoutingModule,
MatSidenavModule,
MatFormFieldModule
MatFormFieldModule,
NgScrollbarModule
]
})
export class UserModule { }