Untitled
unknown
plain_text
3 years ago
7.4 kB
7
Indexable
//manage-category.compo.html <mat-card> <b><span>Manage Category</span></b> <button mat-flat-button color="primary" class="float-right" (click)="handleAddAction()">Add Category</button> </mat-card> <hr> <mat-card> <mat-form-field appearance="fill"> <mat-label>Filter</mat-label> <input matInput (keyup)="applyFilter($event)" #input> </mat-form-field> </mat-card> <hr> <div class="responsive_table"> <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name</th> <td mat-cell *matCellDef="let element">{{element.name}}</td> </ng-container> <ng-container matColumnDef="edit"> <th mat-header-cell *matHeaderCellDef> Action</th> <td mat-cell *matCellDef="let element" class="action-link"> <button mat-icon-button color="primary" matTooltip="Edit" (click)="handleEditAction(element)"> <mat-icon>edit</mat-icon> </button> </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></tr> <tr mat-row *matRowDef="let row;columns:displayedColumns"></tr> </table> </div> //manage-category.compo.scss import { Component, OnInit } from '@angular/core'; import { NgxUiLoaderService } from 'ngx-ui-loader'; import { CategoryService } from 'src/app/services/category.service'; import { GlobalConstants } from 'src/app/shared/global-constants'; import { SnackbarService } from 'src/app/services/snackbar.service'; import { Router } from '@angular/router'; import { MatDialog, MatDialogConfig } from '@angular/material/dialog'; import { MatTableDataSource } from '@angular/material/table'; import { CategoryComponent } from '../dialog/category/category.component'; @Component({ selector: 'app-manage-category', templateUrl: './manage-category.component.html', styleUrls: ['./manage-category.component.scss'] }) export class ManageCategoryComponent implements OnInit { displayedColumns:string[] = ['name','edit']; dataSource:any; responseMessage:any; constructor(private categoryService:CategoryService, private ngxService:NgxUiLoaderService, private dialog:MatDialog, private snackbarService:SnackbarService, private router:Router) {} ngOnInit(): void { this.ngxService.start(); this.tableData(); } tableData(){ this.categoryService.getCategorys().subscribe((response:any)=>{ this.ngxService.stop(); this.dataSource=new MatTableDataSource(response); },(error:any)=>{ this.ngxService.stop(); if(error.error?.message){ this.responseMessage= error.error?.message; } else{ this.responseMessage = GlobalConstants.genericError; } this.snackbarService.openSnackBar(this.responseMessage,GlobalConstants.error); }) } applyFilter(event:Event){ const filterValue = (event.target as HTMLInputElement).value; this.dataSource.filter = filterValue.trim().toLowerCase(); } handleAddAction(){ const dialogConfig = new MatDialogConfig(); dialogConfig.data = { action :'Add' } dialogConfig.width = "850px"; const dialogRef= this.dialog.open(CategoryComponent,dialogConfig); this.router.events.subscribe(()=>{ dialogRef.close(); }); const sub = dialogRef.componentInstance.onAddCategory.subscribe( (response)=>{ this.tableData(); } ) } handleEditAction(values:any){ const dialogConfig = new MatDialogConfig(); dialogConfig.data = { action :'Edit', data:values } dialogConfig.width = "850px"; const dialogRef= this.dialog.open(CategoryComponent,dialogConfig); this.router.events.subscribe(()=>{ dialogRef.close(); }); const sub = dialogRef.componentInstance.onEditCategory.subscribe( (response)=>{ this.tableData(); } ) } } //category.service.ts import { HttpClient, HttpHeaders } from '@angular/common/http'; import { analyzeAndValidateNgModules } from '@angular/compiler'; import { Injectable } from '@angular/core'; import { environment } from 'src/environments/environment'; @Injectable({ providedIn: 'root' }) export class CategoryService { url = environment.apiUrl; constructor(private httpClient:HttpClient) { } add(data:any){ return this.httpClient.post(this.url + "/category/add/",data,{ headers: new HttpHeaders().set('Content-Type',"application/json") }) } update(data:any){ return this.httpClient.patch(this.url + "/category/update/",data,{ headers: new HttpHeaders().set('Content-Type',"application/json") }) } getCategorys(){ return this.httpClient.get(this.url+"/category/get/"); } } //change-password.component.html <mat-toolbar color="primary"> <mat-toolbar-row fxLayout="row"> <span class="title-center">Change Password</span> </mat-toolbar-row> </mat-toolbar> <mat-dialog-content> <form [formGroup]="changePasswordForm"> <div fxFlex fxLayout="column"> <mat-form-field appearance="fill" fxFlex> <mat-label>Old Password</mat-label> <input matInput formControlName="oldPasssword" type="password" required> <mat-error *ngIf="changePasswordForm.controls.oldPassword.touched && changePasswordForm.controls.oldPassword.invalid"> <span *ngIf="changePasswordForm.controls.oldPassword.errors.required">This field is mandatory.</span> </mat-error> </mat-form-field> <mat-form-field appearance="fill" fxFlex> <mat-label>New Password</mat-label> <input matInput formControlName="newPasssword" type="password" required> <mat-error *ngIf="changePasswordForm.controls.newPassword.touched && changePasswordForm.controls.newPassword.invalid"> <span *ngIf="changePasswordForm.controls.newPassword.errors.required">This field is mandatory.</span> </mat-error> </mat-form-field> <mat-form-field appearance="fill" fxFlex> <mat-label>Confirm Password</mat-label> <input matInput formControlName="confirmPasssword" type="password" required> <mat-error *ngIf="changePasswordForm.controls.confirmPassword.touched && changePasswordForm.controls.confirmPasssword.invalid"> <span *ngIf="changePasswordForm.controls.confirmPassword.errors.required">This field is mandatory.</span> </mat-error> <mat-hint *ngIf="validateSubmit() && !(changePasswordForm.controls.confirmPasssword.invalid)"> <span> New Password & Confirm Password does not match.</span> </mat-hint> </mat-form-field> </div> </form> </mat-dialog-content> <mat-dialog-actions align="center"> <button mat-raised-button color="primary" type="submit" (click)="handleChangePasswordSubmit()" [disabled]="validateSubmit() || !(changePasswordForm.valid && changePasswordForm.dirty)">Update</button> <button mat-raised-button color="primary" mat-dialog-close>Close</button> </mat-dialog-actions> //manage-category.compo.scss .float-right{ float:right; } mat-card{ padding: 20px; } table{ width: 100%; }
Editor is loading...