bgui-beasy documentation
  1. Components
  2. ReversementComponent

File

src/app/reversements/reversement/reversement/reversement.component.ts

Metadata

selector bgui-reversement
standalone true
imports MatFormFieldModule MatInputModule MatTableModule CommonModule MatPaginator MatTableModule MatFormFieldModule MatInputModule CarouselComponent MatFormFieldModule MatCardModule MatCardTitle ReactiveFormsModule MatInputModule MatInputModule MatButtonModule MatIconModule MatCheckboxModule MatTableModule MatPaginatorModule RouterLink FormsModule
templateUrl ./reversement.component.html
styleUrl ./reversement.component.scss

Index

Properties
Methods

Methods

applyFilter
applyFilter(event: Event)
Defined in src/app/reversements/reversement/reversement/reversement.component.ts:155
Parameters :
Name Type Optional
event Event No
Returns : void
ngAfterViewInit
ngAfterViewInit()
Defined in src/app/reversements/reversement/reversement/reversement.component.ts:150
Returns : void

Properties

dataSource
Default value : new MatTableDataSource(ELEMENT_DATA)
Defined in src/app/reversements/reversement/reversement/reversement.component.ts:146
displayedColumns
Type : string[]
Default value : [ 'numReversement', 'montant', 'typeReversement', 'status', 'dateDemande', 'dateReversement', ]
Defined in src/app/reversements/reversement/reversement/reversement.component.ts:138
paginator
Type : MatPaginator | undefined
Decorators :
@ViewChild(MatPaginator)
Defined in src/app/reversements/reversement/reversement/reversement.component.ts:148
 
import { Component, ViewChild } from '@angular/core';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule, MatCardTitle } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { RouterLink } from '@angular/router';
import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';

export interface Element {
  montant: number;
  numReversement: number;
  typeReversement: string;
  status: string;
  dateDemande: string;
  dateReversement: string;
}

const ELEMENT_DATA: Element[] = [
  {
    numReversement: 1,
    montant: 2000,
    typeReversement: 'virement',
    status: 'valide',
    dateDemande: '10-04-2024',
    dateReversement: '10-04-2024',
  },
  {
    numReversement: 2,
    montant: 5000,
    typeReversement: 'virement',
    status: 'valide',
    dateDemande: '10-04-2024',
    dateReversement: '10-04-2024',
  },
  {
    numReversement: 3,
    montant: 7000,
    typeReversement: 'Mobile Money',
    status: 'valide',
    dateDemande: '10-04-2024',
    dateReversement: '10-04-2024',
  },
  {
    numReversement: 4,
    montant: 775000,
    typeReversement: 'Type',
    status: 'valide',
    dateDemande: '10-04-2024',
    dateReversement: '10-04-2024',
  },
  {
    numReversement: 5,
    montant: 210000,
    typeReversement: 'Mobile Money',
    status: 'valide',
    dateDemande: '10-04-2024',
    dateReversement: '10-04-2024',
  },
  {
    numReversement: 6,
    montant: 890000,
    typeReversement: 'virement',
    status: 'valide',
    dateDemande: '10-04-2024',
    dateReversement: '10-04-2024',
  },
  {
    numReversement: 7,
    montant: 55000,
    typeReversement: 'cheque',
    status: 'valide',
    dateDemande: '10-04-2024',
    dateReversement: '10-04-2024',
  },
  {
    numReversement: 8,
    montant: 7820000,
    typeReversement: 'cheque',
    status: 'valide',
    dateDemande: '10-04-2024',
    dateReversement: '10-04-2024',
  },
  {
    numReversement: 9,
    montant: 1125000,
    typeReversement: 'Mobile Money',
    status: 'valide',
    dateDemande: '10-04-2024',
    dateReversement: '10-04-2024',
  },
  {
    numReversement: 10,
    montant: 4725000,
    typeReversement: 'Verement',
    status: 'valide',
    dateDemande: '10-04-2024',
    dateReversement: '10-04-2024',
  },
];

@Component({
  selector: 'bgui-reversement',
  standalone: true,
  imports: [
    MatFormFieldModule,
    MatInputModule,
    MatTableModule,
    CommonModule,
    MatPaginator,
    MatTableModule,
    MatFormFieldModule,
    MatInputModule,
    CarouselComponent,
    MatFormFieldModule,
    MatCardModule,
    MatCardTitle,
    ReactiveFormsModule,
    MatInputModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule,
    MatCheckboxModule,
    MatTableModule,
    MatPaginatorModule,
    RouterLink,
    FormsModule,
  ],
  templateUrl: './reversement.component.html',
  styleUrl: './reversement.component.scss',
})
export class ReversementComponent {
  displayedColumns: string[] = [
    'numReversement',
    'montant',
    'typeReversement',
    'status',
    'dateDemande',
    'dateReversement',
  ];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  @ViewChild(MatPaginator) paginator!: MatPaginator | undefined;

  ngAfterViewInit() {
    if (this.paginator) {
      this.dataSource.paginator = this.paginator;
    }
  }
  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

<!-- eslint-disable @angular-eslint/template/label-has-associated-control -->
<div class="page-title">
  <h3>Reversements</h3>
</div>
<div class="row" style="margin-top: 40px">
  <div class="col-md-3">
    <label for="debut">De</label>
    <input
      type="date"
      value="2024-04-16"
      required=""
      name="debut"
      class="form-control form-control-sm" />
  </div>
  <div class="col-md-3">
    <label for="fin">À</label>
    <input
      type="date"
      value="2024-04-16"
      required=""
      name="fin"
      class="form-control form-control-sm" />
  </div>
  <div class="col-md-2">
    <label style="visibility: hidden">Recherche</label>
    <div class="card-title">
      <button class="btn btn-primary btn-sm">
        Recherche <i class="fa fa-search"></i>
      </button>
    </div>
  </div>
</div>
<div class="example-container mat-elevation-z8" style="margin-top: 40px">
  <mat-form-field>
    <mat-label>Filter</mat-label>
    <input
      matInput
      (keyup)="applyFilter($event)"
      placeholder="Ex. ium"
      #input />
  </mat-form-field>
  <mat-table #table [dataSource]="dataSource">
    <ng-container matColumnDef="numReversement">
      <mat-header-cell *matHeaderCellDef> N°REVERSEMENT </mat-header-cell>
      <mat-cell *matCellDef="let element">
        {{ element.numReversement }}
      </mat-cell>
    </ng-container>

    <!-- Position Column -->
    <ng-container matColumnDef="montant">
      <mat-header-cell *matHeaderCellDef> MONTANT </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{ element.montant }} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="typeReversement">
      <mat-header-cell *matHeaderCellDef> TYPE REVERSEMENTS </mat-header-cell>
      <mat-cell *matCellDef="let element">
        {{ element.typeReversement }}
      </mat-cell>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="status">
      <mat-header-cell *matHeaderCellDef> STATUS </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{ element.status }} </mat-cell>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="dateDemande">
      <mat-header-cell *matHeaderCellDef> DATE DEMANDE </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{ element.dateDemande }} </mat-cell>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="dateReversement">
      <mat-header-cell *matHeaderCellDef> DATE REVERSEMENT </mat-header-cell>
      <mat-cell *matCellDef="let element">
        {{ element.dateReversement }}
      </mat-cell>
    </ng-container>

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

  <mat-paginator
    #paginator
    [pageSize]="5"
    [pageSizeOptions]="[5, 10, 20]"
    [showFirstLastButtons]="true">
  </mat-paginator>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""