master
drfelfel 2020-10-16 15:40:31 +03:30
parent e04f1cdb3c
commit 3047c5abce
5 changed files with 152 additions and 63 deletions

View File

@ -11,7 +11,9 @@ import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatTableModule } from '@angular/material/table';
import { MatSelectModule } from '@angular/material/select';
import { MatPaginatorModule, MatPaginatorIntl } from '@angular/material/paginator';
import {PersianMatPaginatorIntl} from './persianPage'
import { MatSortModule } from '@angular/material/sort';
const modules = [
MatCardModule,
MatInputModule,
@ -23,11 +25,14 @@ const modules = [
MatToolbarModule,
MatIconModule,
MatTableModule,
MatSelectModule
MatSelectModule,
MatSortModule,
MatPaginatorModule
]
@NgModule({
imports: modules,
exports: modules
exports: modules,
providers: [{ provide: MatPaginatorIntl, useClass: PersianMatPaginatorIntl}],
})
export class MaterialModule { }

View File

@ -0,0 +1,30 @@
import {MatPaginatorIntl} from '@angular/material/paginator';
import {Injectable} from '@angular/core';
@Injectable()
export class PersianMatPaginatorIntl extends MatPaginatorIntl {
constructor() {
super();
this.getAndInitTranslations();
}
getAndInitTranslations() {
this.itemsPerPageLabel = "تعداد در صفحه";
this.nextPageLabel = "بعدی";
this.previousPageLabel = "قبلی";
this.changes.next();
}
getRangeLabel = (page: number, pageSize: number, length: number) => {
if (length === 0 || pageSize === 0) {
return `0 / ${length}`;
}
length = Math.max(length, 0);
const startIndex = page * pageSize;
const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
return `${startIndex + 1} - ${endIndex} از ${length}`;
}
}

View File

@ -7,6 +7,23 @@
<mat-card>
<mat-toolbar>
<mat-form-field appearance="outline">
<mat-label>آموزشکده</mat-label>
<mat-select>
<mat-option value="فعلی"> فعلی </mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" >
<mat-label>جستجو بر اساس فیلد</mat-label>
<mat-select [(ngModel)]="searchBy" (selectionChange)="Get($event, 'search')">
<mat-option value="name"> نام </mat-option>
<mat-option value="lastname"> نام خانوادگی </mat-option>
<mat-option value="nationalcode"> کد ملی </mat-option>
<mat-option value="major"> رشته </mat-option>
<mat-option value="militaryserviceStatus"> نظام وظیفه </mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>جستجو داوطلب</mat-label>
<input
@ -14,22 +31,18 @@
[(ngModel)]="search"
type="text"
name="search"
(keyup)="Get($event, 'search')"
autocomplete="off"
/>
<button mat-icon-button matSuffix>
<mat-icon>search</mat-icon>
</button>
</mat-form-field>
<p style="padding-right: 10px; font-size: 14px" *ngIf="this.size > 0">
نتایج یافت شده : {{ this.size }}
</p>
<div class="flex-space"></div>
<button
mat-raised-button
color="green"
(click)="Get()"
*ngIf="this.size > 10"
>
<mat-icon>cloud_download</mat-icon>
<span>بارگیری صفحات بعدی</span>
</button>
</mat-toolbar>
<mat-progress-bar
*ngIf="loading == true"
@ -37,25 +50,33 @@
></mat-progress-bar>
<ng-container *ngIf="data != null">
<mat-divider></mat-divider>
<table mat-table [dataSource]="data">
<table matSort mat-table [dataSource]="data">
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef>نام</th>
<th mat-header-cell *matHeaderCellDef mat-sort-header="name">نام</th>
<td mat-cell *matCellDef="let element">{{ element.firstname }}</td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef>نام خانوادگی</th>
<th mat-header-cell *matHeaderCellDef mat-sort-header="lastname">نام خانوادگی</th>
<td mat-cell *matCellDef="let element">{{ element.lastname }}</td>
</ng-container>
<ng-container matColumnDef="fathername">
<th mat-header-cell *matHeaderCellDef>نام پدر</th>
<th mat-header-cell *matHeaderCellDef mat-sort-header="fathername">نام پدر</th>
<td mat-cell *matCellDef="let element">{{ element.fathername }}</td>
</ng-container>
<ng-container matColumnDef="major">
<th mat-header-cell *matHeaderCellDef mat-sort-header="major">رشته قبولی</th>
<td mat-cell *matCellDef="let element">{{ element.major }}</td>
</ng-container>
<ng-container matColumnDef="nationalcode">
<th mat-header-cell *matHeaderCellDef>کد ملی</th>
<th mat-header-cell *matHeaderCellDef mat-sort-header="nationalcode">کد ملی</th>
<td mat-cell *matCellDef="let element">{{ element.nationalcode }}</td>
</ng-container>
<ng-container matColumnDef="militaryserviceStatus">
<th mat-header-cell *matHeaderCellDef mat-sort-header="militaryserviceStatus">وضعیت نظام وظیفه</th>
<td mat-cell *matCellDef="let element">{{ element.militaryserviceStatus?element.militaryserviceStatus:'کاربر هنوز وارد این مرحله نشده است' }}</td>
</ng-container>
<ng-container matColumnDef="step">
<th mat-header-cell *matHeaderCellDef>مرحله</th>
<th mat-header-cell *matHeaderCellDef mat-sort-header="step">مرحله</th>
<td mat-cell *matCellDef="let element">{{ element.step }}</td>
</ng-container>
<ng-container matColumnDef="options">
@ -65,7 +86,7 @@
mat-icon-button
href="https://kateb.rayda.ir/register?admin=true&uid={{
element.uid
}}&token={{uuid }}"
}}&token={{ uuid }}"
target="”_blank”"
>
<mat-icon>arrow_back</mat-icon>
@ -75,5 +96,7 @@
<tr mat-header-row *matHeaderRowDef="columns"></tr>
<tr mat-row *matRowDef="let row; columns: columns"></tr>
</table>
<mat-paginator [length]="size" [pageSize]="10" [pageSizeOptions]=[10,20,30] (page)="Get($event)">
</mat-paginator>
</ng-container>
</mat-card>

View File

@ -3,6 +3,7 @@ table {
}
mat-card {
mat-toolbar {
margin-top: -16px;
margin-right: -16px;
@ -16,6 +17,7 @@ mat-card {
mat-form-field {
font-size: 0.8rem;
margin: 2px;
}
button[color="green"] {

View File

@ -1,5 +1,6 @@
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { type } from 'os';
import { Excel } from '../../../../services/excel/excel.service';
import { Rayconnect } from '../../../../services/rayconnect/rayconnect.service';
@ -10,16 +11,52 @@ import { Rayconnect } from '../../../../services/rayconnect/rayconnect.service';
})
export class TableComponent implements OnInit {
public columns: string[] = ['firstname', 'lastname', 'fathername', 'nationalcode', 'step', 'options'];
public columns: string[] = ['firstname', 'lastname', 'fathername', 'major', 'nationalcode', 'militaryserviceStatus', 'step', 'options'];
public data: MatTableDataSource<object> = new MatTableDataSource<object>();
public loading: boolean = false;
public search: string = '';
public size = 0;
public searchBy = "nationalcode";
public page = 0;
public uuid = "";
public filters = {
university: ""
}
limit: number = 0;
constructor(private excel: Excel, private rayconnect: Rayconnect, private cdr: ChangeDetectorRef) { }
ngOnInit(): void {
this.rayconnect.Query({
scope: "kateb",
address: "volunteers/live",
method: "LIVE",
}, (res => {
let list: object[] = res.data['list'];
let rendered = []
if (res.data['size']) {
this.size = res.data['size'];
}
for (let i in list) {
const user = list[i]['information']
user.step = list[i]['step']
user.options = true
user.uid = list[i]['uid']
user.major = list[i]["educationalInformation"]["major"]
rendered.push(user)
}
this.data.connect().next(rendered)
}));
this.subscribe();
this.UUID()
}
@ -63,33 +100,7 @@ export class TableComponent implements OnInit {
}
}
}).then(res => {
if (res['data']['status'] == true)
this.rayconnect.Query({
scope: "kateb",
address: "volunteers/live",
method: "LIVE",
}, (res => {
let list: object[] = res.data['list'];
let rendered = []
if (res.data['size']) {
this.size = res.data['size'];
}
for (let i in list) {
const user = list[i]['information']
user.step = list[i]['step']
user.options = true
user.uid = list[i]['uid']
rendered.push(user)
}
if (rendered.length > 0) {
this.data.connect().next(rendered)
}
}));
if (res['data']['status'] == true) { }
})
}
@ -97,22 +108,40 @@ export class TableComponent implements OnInit {
this.data.data.unshift(data);
}
Get() {
if (this.size > (this.page + 1) * 10) {
this.page++;
this.rayconnect.RequestBack({
scope: 'kateb',
uniqueID: 'profile',
TokenID: '*',
address: 'volunteers/subscribe',
info: {
method: 'SUB',
data: {
page: this.page,
limit: 10
}
}
})
Get(e, x = "no") {
let Query = {}
if (e.pageIndex) {
this.page = (e.pageIndex + 1)
this.limit = e.pageSize
}
Query = {
page: this.page,
limit: this.limit
}
if (x == 'search') {
Query['search'] = this.search
Query['searchBy'] = this.searchBy
}
console.log(Query)
this.rayconnect.RequestBack({
scope: 'kateb',
uniqueID: 'profile',
TokenID: '*',
address: 'volunteers/subscribe',
info: {
method: 'SUB',
data: Query
}
})
}
}