عرض البيانات واستخدامها في جدول

بدايةً سنقوم بإنشاء مكوّن قائمة المستخدمين تكون صفاته كالتي:

محتوى ملف الـ HTML

<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" class="full-width-table" matSort
(matSortChange)="announceSortChange($event)" aria-label="Elements">
<!-- Id Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{'TABLE.ID' | translate}}</th>
<td mat-cell *matCellDef="let row">{{row.id}}</td>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{'TABLE.NAME' | translate}}</th>
<td mat-cell *matCellDef="let row">{{row.ar_name}}</td>
</ng-container>

<!-- Actions Column -->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{'TABLE.ACTIONS' | translate}}</th>
<td mat-cell *matCellDef="let row">
<mat-icon matTooltip="تعديل" routerLink="/update-user/{{row.id}}">edit</mat-icon>
<mat-icon class="ml-2" (click)="delete(row.id)" matTooltip="حذف">delete</mat-icon>
</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<mat-paginator #paginator [length]="dataSource?.data?.length" [pageIndex]="0" [pageSize]="10"
[pageSizeOptions]="[5, 10, 20]" aria-label="Select page">
</mat-paginator>
</div>



محتوى ملف الـ ts

import { LiveAnnouncer } from '@angular/cdk/a11y';
import { HttpErrorResponse } from '@angular/common/http';
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatSort, Sort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { Router } from '@angular/router';
import { UsersService } from 'src/app/services/users.service';

@Component({
selector: 'app-users-table',
templateUrl: './users-table.component.html',
styleUrls: ['./users-table.component.scss']
})
export class UsersTableComponent implements AfterViewInit {
// @ViewChild(MatPaginator) paginator!: MatPaginator;
@ViewChild(MatSort) sort!: MatSort;


// @ViewChild(MatTable) table!: MatTable<UsersTableItem>;
dataSource: any = [];
user:any;

/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns = ['id', 'name', 'actions'];

constructor(private _liveAnnouncer: LiveAnnouncer,
public usersService: UsersService,
router: Router) {
}

ngOnInit(): void {
this.usersService.getAllUsers().subscribe((res: any) => {
this.dataSource = new MatTableDataSource(res);
this.dataSource.sort = this.sort;
console.log('response is ', res);
});
}

ngAfterViewInit(): void {
this.dataSource.sort = this.sort;
}

delete(id: number) {
this.usersService.deletUser(id).subscribe(data => {
alert("لقد تم حذف العنصر بنجاح");
},
(error: HttpErrorResponse) => {
alert("هناك مشكلة أدّت إلى عدم حذف العنصر");
}
)
}


عمليات الحذف والتعديل والإضافة:

deleteItem(id:number,item: users) {
return this.http.post(`${this.backEndURL}/users/${id}/delete`, item).subscribe(data => {
alert("لقد تم حذف العنصر بنجاح");
},
(error: HttpErrorResponse) => {
alert("هناك مشكلة أدّت إلى عدم حذف العنصر");
}
);
}
----------------------- في ملف الخدمة
//Post -- لا بد من تعريف متغير باسم user مثلاً في بداية الـ class
  deletUser(id: number): Observable<any> {
    this.getOnceUser(id).subscribe((res: any) => {
      this.user = res;
    })
    return this.http.post(`${this.backEndURL}/users/` + id +"/delete", this.user);
  }


  update(id: number) {
    this.usersService.updateUser(id, this.user).subscribe(
      data => {
        alert("لقد تم تعديل العنصر بنجاح");
      },
      (error: HttpErrorResponse) => {
        alert("هناك مشكلة أدّت إلى عدم تعديل العنصر");
      }
    )
  }
----------------------- في ملف الخدمة
  //Post
  updateUser(id: number, item: any) {
    return this.http.post(`${this.backEndURL}/users/${id}/update`, item);
  }
----------------------- HTML
        <mat-icon matTooltip="تعديل" (click)="update(row.id)">edit</mat-icon>


//Post
      this.usersService.createUser(this.user).subscribe((data: any) => {
        alert("لقد تمت إضافة العنصر الجديد بنجاح");
      },
        (error: HttpErrorResponse) => {
          alert("هناك مشكلة أدّت إلى عدم إضافة العنصر");
        }
      );
----------------------- في ملف الخدمة
    //Post
  createUser(item: any) {
    return this.http.post(`${this.backEndURL}/users`, item);
  }



التحقق من القيم قبل الإرسال:

import { HttpErrorResponse } from '@angular/common/http';
import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { UsersService } from 'src/app/services/users.service';

@Component({
  selector: 'app-create-user',
  templateUrl: './create-user.component.html',
  styleUrls: ['./create-user.component.scss']
})
export class CreateUserComponent {
  user: any = { ar_name: '', en_name: '' };
  addressForm = this.fb.group({
    arName: [null, Validators.required],
    enName: [null, Validators.required]
  });


  constructor(private fb: FormBuilder,
    public usersService: UsersService) { }

  onSubmit(): void {
    if (this.addressForm.valid) {
      this.usersService.createUser(this.user).subscribe((data: any) => {
        alert("لقد تمت إضافة العنصر الجديد بنجاح");
      },
        (error: HttpErrorResponse) => {
          alert("هناك مشكلة أدّت إلى عدم إضافة العنصر");
        }
      );
    }
  }
}


محتوى ملفات تعديل معلومات المستخدم:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { UsersService } from 'src/app/services/users.service';
import { FormBuilder, Validators } from '@angular/forms';
import { HttpErrorResponse } from '@angular/common/http';


@Component({
  selector: 'app-update-user',
  templateUrl: './update-user.component.html',
  styleUrls: ['./update-user.component.scss']
})
export class UpdateUserComponent implements OnInit {
  user: any = { ar_name: '', en_name: '' };;

  addressForm = this.fb.group({
    arName: [null, Validators.required],
    enName: [null, Validators.required]
  });

  constructor(private fb: FormBuilder,
    private route: ActivatedRoute,
    private location: Location,
    public usersService: UsersService
  ) { }

  ngOnInit(): void {
    this.getUser();
  }

  getUser(): void {
    const id = this.route.snapshot.paramMap.get('id');
    this.usersService.getOnceUser(id as unknown as number)
      .subscribe(user => this.user = user);
  }

  goBack(): void {
    this.location.back();
  }

  onSubmit(): void {
    if (this.addressForm.valid) {
      this.usersService.updateUser(this.user.id, this.user).subscribe((data: any) => {
        alert("لقد تمت إضافة العنصر الجديد بنجاح");
      },
        (error: HttpErrorResponse) => {
          alert("هناك مشكلة أدّت إلى عدم إضافة العنصر");
        }
      );
    }
     else {
alert('يرجى الالتزام بتعبئة الحقول الإجبارية')
}
  }

}


.full-width {
    width: 100%;
  }
 
  .shipping-card {
    min-width: 120px;
    margin: 20px auto;
  }
 
  .mat-radio-button {
    display: block;
    margin: 5px 0;
  }
 
  .row {
    display: flex;
    flex-direction: row;
  }
 
  .col {
    flex: 1;
    margin-right: 20px;
  }
 
  .col:last-child {
    margin-right: 0;
  }
 

<form [formGroup]="addressForm" novalidate *ngIf="addressForm" (ngSubmit)="onSubmit()">
<mat-card class="shipping-card">
<mat-card-header>
<mat-icon class="ml-2" (click)="goBack()" matTooltip="العودة إلى قائمة المستخدمين">arrow_forward</mat-icon>

<mat-card-title>Shipping Information</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="الاسم بالعربي" [(ngModel)]="user.ar_name" formControlName="arName">
<mat-error *ngIf="addressForm.controls['arName'].hasError('required')">
First name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="الاسم بالإنجليزي" [(ngModel)]="user.en_name" formControlName="enName">
<mat-error *ngIf="addressForm.controls['enName'].hasError('required')">
Last name is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit">Submit</button>
</mat-card-actions>
</mat-card>
</form>

هكذا سنضيف المسار في ملف التوجيه:
  { path: 'update-user/:id', component: UpdateUserComponent }


مثال ممتاز لدرس اليوم اضغط هنا للتصفح

المشروعان اللذان عملنا عليهما في هذه الدورة:








تعليقات

إرسال تعليق

المشاركات الشائعة من هذه المدونة

ngx-extended-pdf-viewer

https://www.npmjs.com/package/ngx-extended-pdf-viewer https://pdfviewer.net/extended-pdf-viewer/simple المكتبة: https://github.com/vadimdez/ng2-pdf-viewer  To view a PDF file using a lightbox in Angular, you can use the ngx-extended-pdf-viewer library for displaying the PDF and ng-gallery for the lightbox functionality. Here’s a step-by-step guide: Step 1: Install the Required Packages Install ngx-extended-pdf-viewer : This library provides an efficient way to display PDFs in Angular. Install ng-gallery : This library provides a customizable lightbox gallery. Run the following commands: bash نسخ الكود npm install ngx-extended-pdf-viewer npm install ng-gallery Step 2: Import Modules in Your Angular Module In your main Angular module (e.g., app.module.ts ), import both NgxExtendedPdfViewerModule and GalleryModule . typescript نسخ الكود import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer' ; import { GalleryModule } from 'ng-gallery' ; @NgModule ({...
قراءة المزيد

how to getting access token for https://fcm.googleapis.com/v1/projects/al-ayahya-co/messages:send for angular and backend nestjs

صورة
  Getting Access Token for FCM in Angular and NestJS To send messages using the Firebase Cloud Messaging (FCM) HTTP v1 API, you need to obtain an access token that authorizes your requests. Below are the steps to achieve this using Angular for the frontend and NestJS for the backend. Step 1: Set Up Firebase Project Create a Firebase Project : Go to the  Firebase Console  and create a new project if you haven't already. Enable FCM : In your Firebase project, navigate to the Cloud Messaging section and enable it. Step 2: Service Account Key Generate a Service Account Key : In the Firebase Console, go to  Project Settings  >  Service accounts . Click on  Generate new private key . This will download a JSON file containing your service account credentials. Step 3: Backend (NestJS) Implementation Install Required Packages : You need to install the  google-auth-library  to handle authentication: bash npm install google-auth-library Create a Serv...
قراءة المزيد

طريقة تفعيل زر Inline Keyboard في Telegram Bot

https://g.co/bard/share/85e904a02dd1 https://g.co/bard/share/99e480e0dca7  there are two main approaches to achieve this functionality in your Telegram bot: 1. Inline Keyboard with URL Button: This approach uses an inline keyboard with a button linked to the desired website URL. Here's how: Create an inline keyboard: Use the InlineKeyboardMarkup object provided by your chosen bot development library (e.g., Telegraf for Python). Define a list of lists where each sublist represents a row of buttons. Add a URL button: In each sublist, add an InlineKeyboardButton object with the button text and the url parameter set to the website URL. Send the message with the keyboard: Use the sendMessage method with the inline_keyboard parameter set to your created inline keyboard object. Example (Python with Telegraf): Python from telegraf.ext import Updater, CommandHandler, MessageHandler, Filters def open_website(update, context):   keyboard = InlineKeyboardMarkup([     [InlineKeyb...
قراءة المزيد