Skip to content

B
beasy-front-angular
Commit d1f497cc by zadi francice
Options

etablissement

parent a49d17d0
Showing with 1710 additions and 468 deletions
src/app/etablissement/charges/charge-dialog/charge-dialog.component.html
<p>charge-dialog works!</p>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-subtitle style="text-align: center; font-weight: bolder">
<h4 style="margin: 3.5rem">{{ title }}</h4>
</mat-card-subtitle>
<mat-card-content>
<form [formGroup]="myForm" (ngSubmit)="onSubmit()" class="form-container">
<div class="form-field">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Charge</mat-label>
<input
type="text"
matInput
placeholder="Charge"
formControlName="charge"
required />
<mat-error
*ngIf="
myForm.controls['charge'].invalid &&
myForm.controls['charge'].touched
">
Le nom de la charge est obligatoire
</mat-error>
</mat-form-field>
</div>
<div class="form-field">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Montant</mat-label>
<input
type="number"
matInput
placeholder="Montant"
formControlName="montant"
required />
<mat-error
*ngIf="
myForm.controls['montant'].invalid &&
myForm.controls['montant'].touched
">
Le montant de la charge est obligatoire
</mat-error>
</mat-form-field>
</div>
<div class="form-field">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Description</mat-label>
<textarea
matInput
placeholder="Description"
formControlName="description"></textarea>
</mat-form-field>
</div>
<div class="form-field">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Cursus</mat-label>
<mat-select formControlName="cursus" required>
<mat-option *ngFor="let cursus of cycles" [value]="cursus.value">
{{ cursus.viewValue }}
</mat-option>
</mat-select>
<mat-error
*ngIf="
myForm.controls['cursus'].invalid &&
myForm.controls['cursus'].touched
">
Le cursus est obligatoire
</mat-error>
</mat-form-field>
</div>
<div class="form-field" hidden>
<mat-form-field appearance="outline" class="full-width">
<mat-label>Classe</mat-label>
<mat-select formControlName="cursus" required>
<mat-option *ngFor="let cursus of cycles" [value]="cursus.value">
{{ cursus.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="form-field">
<mat-slide-toggle [(ngModel)]="isChecked" labelPosition="before"
>Status</mat-slide-toggle
>
</div>
<mat-card-actions class="d-flex justify-content-between m-4">
<button
mat-button
type="button"
class="btn btn-danger"
(click)="onCancel()">
Annuler <mat-icon>cancel</mat-icon>
</button>
<!-- <button mat-menu-item>
<mat-icon>all_inclusive</mat-icon>
<span>Associer</span>
</button> -->
<button mat-button type="submit" class="btn btn-primary" hidden>
Associer <mat-icon>all_inclusive</mat-icon>
</button>
<button
mat-button
type="submit"
class="btn btn-success"
[disabled]="myForm.invalid">
Enregistrer <mat-icon>save</mat-icon>
</button>
</mat-card-actions>
</form>
</mat-card-content>
src/app/etablissement/charges/charge-dialog/charge-dialog.component.scss
.form-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 700px !important;
width: 600px !important;
}
.form-field {
width: 80%;
margin-bottom: 1rem;
}
mat-card-content {
display: flex;
flex-direction: column;
align-items: center;
}
mat-card-actions {
width: 80%;
display: flex;
justify-content: space-between;
}
.full-width {
width: 100%;
}
src/app/etablissement/charges/charge-dialog/charge-dialog.component.ts
/* eslint-disable @typescript-eslint/no-explicit-any */
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
FormBuilder,
FormGroup,
FormsModule,
ReactiveFormsModule,
Validators,
} from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogRef } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import {
MatSlideToggleModule,
_MatSlideToggleRequiredValidatorModule,
} from '@angular/material/slide-toggle';
@Component({
selector: 'bgui-charge-dialog',
standalone: true,
imports: [],
imports: [
CommonModule,
ReactiveFormsModule,
MatInputModule,
MatFormFieldModule,
MatDatepickerModule,
MatButtonModule,
MatIconModule,
MatCardModule,
MatSelectModule,
MatSlideToggleModule,
FormsModule,
_MatSlideToggleRequiredValidatorModule,
],
templateUrl: './charge-dialog.component.html',
styleUrl: './charge-dialog.component.scss'
styleUrl: './charge-dialog.component.scss',
})
export class ChargeDialogComponent {
myForm!: FormGroup;
showAlert: any;
title: string = 'Ajouter une charge';
isChecked = true;
cycles = [
{ value: 'cycle1', viewValue: 'Cycle 1' },
{ value: 'cycle2', viewValue: 'Cycle 2' },
{ value: 'cycle3', viewValue: 'Cycle 3' },
];
constructor(
private fb: FormBuilder,
private dialogRef: MatDialogRef<ChargeDialogComponent>
) {}
ngOnInit(): void {
this.myForm = this.fb.group({
charge: ['', Validators.required],
montant: ['', Validators.required],
description: [''],
cursus: [''],
status: [''],
});
}
onSubmit(): void {
if (this.myForm.valid) {
this.onSave();
}
}
onSave(): void {
if (this.myForm.valid) {
console.log(this.myForm.value);
this.dialogRef.close(this.myForm.value);
}
}
onCancel(): void {
this.dialogRef.close();
}
}
src/app/etablissement/charges/charges.component.html
<p>charges works!</p>
<!-- <div class="container d-flex justify-content-between w-80">
<div class="col-md-6">
<mat-card
class="m-3 cursor"
(click)="getSelectedId('9c48edb1-e98c-419a-9d54-dcb810d5c455')">
<mat-card-content>
<h3 class="h5 text-dark-blue">test</h3>
<div
matTooltip="Cette charge est utilisée dans 1 niveaux"
matTooltipPosition="right"
class="custom-fee-badge d-flex align-items-center justify-content-center bg-light">
<mat-icon class="small-icon">class</mat-icon> 1
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-md-6">
<mat-card class="m-3 cursor">
<mat-card-content>
<h3 class="h5 text-dark-blue">test</h3>
<div
matTooltip="Cette charge est utilisée dans 1 niveaux"
matTooltipPosition="right"
class="custom-fee-badge d-flex align-items-center justify-content-center gap-2 bg-light">
<mat-icon class="small-icon">class</mat-icon> 1
</div>
</mat-card-content>
</mat-card>
</div>
</div> -->
<div class="content sm-gutter">
<div class="row">
<div>
<div class="container-fluid">
<div class="span12">
<div class="grid simple">
<div class="card-title"></div>
<div class="content sm-gutter">
<div class="mb-4">
<h4>Charges {{ dataSource.data[0].description }}</h4>
</div>
<div class="col-md-2"></div>
</div>
<div class="page-title d-flex justify-content-between">
<button class="btn btn-sl btn-success m-5" (click)="openDialog()">
<mat-icon>create</mat-icon>
Creer une charge
</button>
</div>
<div
class="example-container mat-elevation-z8"
style="margin-top: 40px; overflow-x: hidden">
<div
class="d-flex justify-content-between bg-light align-items-center">
<mat-form-field appearance="outline">
<mat-label>Filter</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. ium"
#input />
</mat-form-field>
<div class="col-m-5 text-right">
<button class="btn bg-white m-2">
Exporter <i class="fa fa-download m-1"></i>
</button>
</div>
</div>
<table
mat-table
[dataSource]="dataSource"
matSort
class="mat-elevation-z8"
style="width: 100%">
<!-- Charges Column -->
<ng-container matColumnDef="charges">
<mat-header-cell *matHeaderCellDef class="bold-text">
Charges
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.charges
}}</mat-cell>
</ng-container>
<!-- Description Column -->
<ng-container matColumnDef="description">
<mat-header-cell *matHeaderCellDef class="bold-text">
Description
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.description
}}</mat-cell>
</ng-container>
<!-- Montant Column -->
<ng-container matColumnDef="montant">
<mat-header-cell *matHeaderCellDef class="bold-text">
Montant
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.montant
}}</mat-cell>
</ng-container>
<!-- Date Column -->
<ng-container matColumnDef="date">
<mat-header-cell *matHeaderCellDef class="bold-text">
Date
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.date
}}</mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef class="bold-text">
Status
</mat-header-cell>
<mat-cell *matCellDef="let element"
><mat-chip color="primary" selected>{{
element.status
}}</mat-chip></mat-cell
>
</ng-container>
<!-- Actions Column -->
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef class="bold-text">
</mat-header-cell>
<mat-cell *matCellDef="let element">
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="openDialog()">
<mat-icon>all_inclusive</mat-icon>
<span>Associées à une classe</span>
</button>
<button mat-menu-item (click)="openDialog()">
<!-- [routerLink]="['/etablissement/classes/edit-classe']"> -->
<mat-icon>update</mat-icon>
<span>Modifier</span>
</button>
<!-- <button mat-menu-item (click)="deleteItem(element)">
<mat-icon></mat-icon>
<span>Supprimer</span>
</button> -->
</mat-menu>
</mat-cell>
</ng-container>
<mat-header-row
*matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row
*matRowDef="let row; columns: displayedColumns"></mat-row>
</table>
<mat-paginator
[pageSizeOptions]="[5, 10, 50, 100, 200]"
showFirstLastButtons></mat-paginator>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
src/app/etablissement/charges/charges.component.scss
.cursor {
cursor: pointer;
}
.text-dark-blue {
color: #003366; /* Replace with your desired color */
}
.custom-fee-badge {
background-color: #f5f5f5; /* Replace with your desired background color */
border-radius: 4px;
width: 75px !important;
padding: 4px 8px;
}
.small-icon {
font-size: 1.5rem; /* Adjust size as needed */
}
.m-3 {
margin: 2rem;
}
src/app/etablissement/charges/charges.component.ts
import { Component } from '@angular/core';
/* eslint-disable @typescript-eslint/no-unused-vars */
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatSort, MatSortModule } from '@angular/material/sort';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { RouterLink, RouterOutlet } from '@angular/router';
import { MatChipsModule } from '@angular/material/chips';
import { ChargeDialogComponent } from './charge-dialog/charge-dialog.component';
import { MatDialog } from '@angular/material/dialog';
export interface Element {
description: string;
montant: string;
charges: string;
date: string;
status: string;
}
const ELEMENT_DATA: Element[] = [
{
description: 'Barnoin test',
montant: '100 000 XOF',
charges: 'test',
date: '2023-01-01',
status: 'Active',
},
{
description: 'Another description',
montant: '50 000 XOF',
charges: 'Example charges',
date: '2024-06-15',
status: 'Inactive',
},
{
description: 'Barnoin test',
montant: '100 000 XOF',
charges: 'test',
date: '2023-01-01',
status: 'Active',
},
{
description: 'Another description',
montant: '50 000 XOF',
charges: 'Example charges',
date: '2024-06-15',
status: 'Inactive',
},
{
description: 'Barnoin test',
montant: '100 000 XOF',
charges: 'test',
date: '2023-01-01',
status: 'Active',
},
{
description: 'Another description',
montant: '50 000 XOF',
charges: 'Example charges',
date: '2024-06-15',
status: 'Active',
},
{
description: 'Barnoin test',
montant: '100 000 XOF',
charges: 'test',
date: '2023-01-01',
status: 'Active',
},
{
description: 'Another description',
montant: '50 000 XOF',
charges: 'Example charges',
date: '2024-06-15',
status: 'Inactive',
},
{
description: 'Barnoin test',
montant: '100 000 XOF',
charges: 'test',
date: '2023-01-01',
status: 'Active',
},
{
description: 'Another description',
montant: '50 000 XOF',
charges: 'Example charges',
date: '2024-06-15',
status: 'Inactive',
},
{
description: 'Barnoin test',
montant: '100 000 XOF',
charges: 'test',
date: '2023-01-01',
status: 'Active',
},
{
description: 'Another description',
montant: '50 000 XOF',
charges: 'Example charges',
date: '2024-06-15',
status: 'Active',
},
];
@Component({
selector: 'bgui-charges',
standalone: true,
imports: [],
imports: [
RouterLink,
MatCardModule,
CommonModule,
MatButtonModule,
MatIconModule,
MatTabsModule,
MatTableModule,
MatPaginatorModule,
MatInputModule,
MatMenuModule,
MatSortModule,
RouterOutlet,
MatChipsModule,
],
templateUrl: './charges.component.html',
styleUrl: './charges.component.scss'
styleUrl: './charges.component.scss',
})
export class ChargesComponent {
displayedColumns: string[] = [
'charges',
'montant',
'description',
'date',
'status',
'actions',
];
dataSource = new MatTableDataSource(ELEMENT_DATA);
ngOnInit() {
console.log(this.dataSource);
}
constructor(private dialog: MatDialog) {}
@ViewChild(MatPaginator) paginator!: MatPaginator;
@ViewChild(MatSort) sort!: MatSort;
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
editItem(element: Element) {
// Implémentez la logique pour éditer un élément
console.log('Editing item', element);
}
deleteItem(element: Element) {
// Implémentez la logique pour supprimer un élément
console.log('Deleting item', element);
}
inviteCollaborator(element: Element) {
// Implémentez la logique pour inviter un collaborateur
console.log('Inviting collaborator for', element);
}
public openDialog() {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const dialogRef = this.dialog.open(ChargeDialogComponent, {
width: '800px',
height: '1000px',
});
}
}
src/app/etablissement/classes/classe-dialog/classe-dialog.component.html 0 → 100644
<div mat-card-avatar class="example-header-image"></div>
<mat-card-subtitle style="text-align: center; font-weight: bolder">
<h4 style="margin-bottom: 3.5rem">Créer une classe</h4>
</mat-card-subtitle>
<mat-card-content>
<form [formGroup]="myForm" (ngSubmit)="onSubmit()" class="form-container">
<div class="form-field">
<mat-form-field appearance="outline" class="full-width w-100">
<mat-label>Cycle</mat-label>
<mat-select formControlName="cycle" required>
<mat-option *ngFor="let cycle of cycles" [value]="cycle.value">
{{ cycle.viewValue }}
</mat-option>
</mat-select>
<mat-error
*ngIf="
myForm.controls['cycle'].invalid && myForm.controls['cycle'].touched
">
Le cycle est obligatoire
</mat-error>
</mat-form-field>
</div>
<div class="form-field">
<mat-form-field appearance="outline" class="full-width w-100">
<mat-label>Classe</mat-label>
<input
matInput
placeholder="Classe"
formControlName="classe"
required />
<mat-error
*ngIf="
myForm.controls['classe'].invalid &&
myForm.controls['classe'].touched
">
La classe est obligatoire
</mat-error>
</mat-form-field>
</div>
<div class="form-field">
<mat-form-field appearance="outline" class="full-width w-100">
<mat-label>Description</mat-label>
<textarea
matInput
placeholder="Description"
formControlName="description"></textarea>
</mat-form-field>
</div>
<mat-card-actions class="d-flex justify-content-between m-4">
<button
mat-button
type="button"
class="btn btn-danger"
(click)="onCancel()">
Annuler <mat-icon>cancel</mat-icon>
</button>
<button
mat-button
type="submit"
class="btn btn-success"
[disabled]="myForm.invalid">
Enregistrer <mat-icon>save</mat-icon>
</button>
</mat-card-actions>
</form>
</mat-card-content>
src/app/etablissement/classes/classe-dialog/classe-dialog.component.scss 0 → 100644
.form-container {
width: 600px;
height: 400px;
margin: auto; /* Center the form horizontally */
}
.form-field {
width: 100% !important; /* Fields occupy 80% of the form's width */
margin: 0 auto; /* Center the fields horizontally */
}
.mat-card {
max-width: 400px; /* Ensure the card does not exceed 400px */
margin: 0 auto; /* Center the card horizontally */
}
src/app/etablissement/classes/classe-dialog/classe-dialog.component.spec.ts 0 → 100644
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ClasseDialogComponent } from './classe-dialog.component';
describe('ClasseDialogComponent', () => {
let component: ClasseDialogComponent;
let fixture: ComponentFixture<ClasseDialogComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [ClasseDialogComponent]
})
.compileComponents();
fixture = TestBed.createComponent(ClasseDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/etablissement/classes/classe-dialog/classe-dialog.component.ts 0 → 100644
/* eslint-disable @typescript-eslint/no-explicit-any */
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
FormBuilder,
FormGroup,
ReactiveFormsModule,
Validators,
} from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogRef } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
@Component({
selector: 'bgui-classe-dialog',
standalone: true,
imports: [
CommonModule,
ReactiveFormsModule,
MatInputModule,
MatFormFieldModule,
MatDatepickerModule,
MatButtonModule,
MatIconModule,
MatCardModule,
MatSelectModule,
],
templateUrl: './classe-dialog.component.html',
styleUrl: './classe-dialog.component.scss',
})
export class ClasseDialogComponent {
myForm!: FormGroup;
showAlert: any;
cycles = [
{ value: 'cycle1', viewValue: 'Cycle 1' },
{ value: 'cycle2', viewValue: 'Cycle 2' },
{ value: 'cycle3', viewValue: 'Cycle 3' },
];
constructor(
private fb: FormBuilder,
private dialogRef: MatDialogRef<ClasseDialogComponent>
) {}
ngOnInit(): void {
this.myForm = this.fb.group({
cycle: ['', Validators.required],
classe: ['', Validators.required],
description: [''],
});
}
onSubmit(): void {
if (this.myForm.valid) {
this.onSave();
}
}
onSave(): void {
if (this.myForm.valid) {
console.log(this.myForm.value);
this.dialogRef.close(this.myForm.value);
}
}
onCancel(): void {
this.dialogRef.close();
}
}
src/app/etablissement/classes/classes.component.html
......@@ -71,13 +71,13 @@
</div>
<div class="page-title d-flex justify-content-between">
<div class="col-m-5 text-right">
<!-- <div class="col-m-5 text-right">
<button
class="btn btn-secondary m-5"
style="border-radius: 15px">
Exporter <i class="fa fa-download m-1"></i>
</button>
</div>
</div> -->
<button
(click)="openDialog()"
class="btn btn-sl btn-success m-5">
......@@ -88,14 +88,30 @@
<div
class="example-container mat-elevation-z8"
style="margin-top: 40px; overflow-x: hidden">
<mat-form-field appearance="outline">
<!-- <mat-form-field appearance="outline">
<mat-label>Filter</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. ium"
#input />
</mat-form-field>
</mat-form-field> -->
<div
class="d-flex justify-content-between bg-light align-items-center">
<mat-form-field appearance="outline">
<mat-label>Filter</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. ium"
#input />
</mat-form-field>
<div class="col-m-5 text-right">
<button class="btn bg-white m-2">
Exporter <i class="fa fa-download m-1"></i>
</button>
</div>
</div>
<table
mat-table
[dataSource]="dataSource"
......@@ -167,12 +183,20 @@
</button>
<mat-menu #menu="matMenu">
<button
[routerLink]="[
'/etablissement/classes/consult-classe'
]"
mat-menu-item
(click)="inviteCollaborator(element)">
<mat-icon>visibility</mat-icon>
<span>Consulter</span>
</button>
<button mat-menu-item (click)="editItem(element)">
<button
mat-menu-item
(click)="editItem(element)"
[routerLink]="[
'/etablissement/classes/edit-classe'
]">
<mat-icon>edit</mat-icon>
<span>Modifier</span>
</button>
......@@ -209,23 +233,40 @@
<div class="span12">
<div class="grid simple">
<div class="page-title d-flex justify-content-between">
<div class="col-m-5 text-right">
<!-- <div class="col-m-5 text-right">
<button class="btn btn-secondary m-5">
Exporter <i class="fa fa-download m-1"></i>
</button>
</div>
</div> -->
</div>
<div
class="example-container mat-elevation-z8"
style="margin-top: 40px">
<mat-form-field appearance="outline">
<!-- <mat-form-field appearance="outline">
<mat-label>Filtrer</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. John Doe"
#input />
</mat-form-field>
</mat-form-field> -->
<div
class="d-flex justify-content-between bg-light align-items-center">
<mat-form-field appearance="outline">
<mat-label>Filter</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. ium"
#input />
</mat-form-field>
<div class="col-m-5 text-right">
<button class="btn bg-white m-2">
Exporter <i class="fa fa-download m-1"></i>
</button>
</div>
</div>
<table
mat-table
......
src/app/etablissement/classes/classes.component.ts
......@@ -2,7 +2,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
......@@ -11,8 +11,10 @@ import { MatMenuModule } from '@angular/material/menu';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { RouterLink } from '@angular/router';
import { RouterLink, RouterOutlet } from '@angular/router';
import { CreateTpeComponent } from 'src/app/tpe/create-tpe/create-tpe.component';
import { ClasseDialogComponent } from './classe-dialog/classe-dialog.component';
import { MatDialog } from '@angular/material/dialog';
export interface Element {
classes: string;
......@@ -134,24 +136,29 @@ const ELEMENT_DATAS: ElementData[] = [
MatPaginatorModule,
MatInputModule,
MatMenuModule,
RouterOutlet,
ReactiveFormsModule,
],
templateUrl: './classes.component.html',
styleUrl: './classes.component.scss',
})
export class ClassesComponent {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
deleteItem(_t101: any) {
throw new Error('Method not implemented.');
constructor(private dialog: MatDialog) {}
inviteCollaborator(element: any) {
// Implémentez la logique pour inviter un collaborateur
console.log('Inviting collaborator for', element);
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
editItem(_t101: any) {
throw new Error('Method not implemented.');
editItem(element: any) {
// Implémentez la logique pour éditer un élément
console.log('Editing item', element);
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
inviteCollaborator(_t101: any) {
throw new Error('Method not implemented.');
deleteItem(element: any) {
// Implémentez la logique pour supprimer un élément
console.log('Deleting item', element);
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
setDefault(_t101: any) {
throw new Error('Method not implemented.');
}
......@@ -171,7 +178,6 @@ export class ClassesComponent {
@ViewChild(MatPaginator) paginator!: MatPaginator;
element: any;
elements: any;
dialog: any;
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
const filterValues = (event.target as HTMLInputElement).value;
......@@ -186,7 +192,7 @@ export class ClassesComponent {
public openDialog() {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const dialogRef = this.dialog.open(CreateTpeComponent, {
const dialogRef = this.dialog.open(ClasseDialogComponent, {
width: '800px',
height: '1000px',
});
......
src/app/etablissement/classes/consult-classe/consult-classe.component.html 0 → 100644
<div class="content sm-gutter">
<div class="row">
<div>
<div class="container-fluid">
<div class="span12">
<div class="grid simple">
<div class="card-title"></div>
<div class="content sm-gutter">
<div class="mb-4">
<h4>Classe {{ dataSource.data[0].description }}</h4>
</div>
<div class="col-md-2"></div>
</div>
<div class="page-title d-flex justify-content-between">
<!-- <div class="col-m-5 text-right">
<button
class="btn btn-secondary m-5"
style="border-radius: 15px">
Exporter <i class="fa fa-download m-1"></i>
</button>
</div> -->
<button class="btn btn-sl btn-success m-5" (click)="openDialog()">
<mat-icon>add</mat-icon>
Ajouter une charge à cette classe
</button>
</div>
<div
class="example-container mat-elevation-z8"
style="margin-top: 40px; overflow-x: hidden">
<!-- <mat-form-field appearance="outline">
<mat-label>Filter</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. ium"
#input />
</mat-form-field> -->
<div
class="d-flex justify-content-between bg-light align-items-center">
<mat-form-field appearance="outline">
<mat-label>Filter</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. ium"
#input />
</mat-form-field>
<div class="col-m-5 text-right">
<button class="btn bg-white m-2">
Exporter <i class="fa fa-download m-1"></i>
</button>
</div>
</div>
<table
mat-table
[dataSource]="dataSource"
matSort
class="mat-elevation-z8"
style="width: 100%">
<!-- Charges Column -->
<ng-container matColumnDef="charges">
<mat-header-cell *matHeaderCellDef class="bold-text">
Charges
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.charges
}}</mat-cell>
</ng-container>
<!-- Description Column -->
<ng-container matColumnDef="description">
<mat-header-cell *matHeaderCellDef class="bold-text">
Description
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.description
}}</mat-cell>
</ng-container>
<!-- Montant Column -->
<ng-container matColumnDef="montant">
<mat-header-cell *matHeaderCellDef class="bold-text">
Montant
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.montant
}}</mat-cell>
</ng-container>
<!-- Date Column -->
<ng-container matColumnDef="date">
<mat-header-cell *matHeaderCellDef class="bold-text">
Date
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.date
}}</mat-cell>
</ng-container>
<!-- Actions Column -->
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef class="bold-text">
</mat-header-cell>
<mat-cell *matCellDef="let element">
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<!-- <button
[routerLink]="['/etablissement/classes/consult-classe']"
mat-menu-item
(click)="inviteCollaborator(element)">
<mat-icon>visibility</mat-icon>
<span>Consulter</span>
</button> -->
<button mat-menu-item (click)="openDialog()">
<mat-icon>edit</mat-icon>
<span>Modifier</span>
</button>
<button mat-menu-item (click)="deleteItem(element)">
<mat-icon>delete</mat-icon>
<span>Supprimer</span>
</button>
</mat-menu>
</mat-cell>
</ng-container>
<mat-header-row
*matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row
*matRowDef="let row; columns: displayedColumns"></mat-row>
</table>
<mat-paginator
[pageSizeOptions]="[5, 10, 50, 100, 200]"
showFirstLastButtons></mat-paginator>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
src/app/etablissement/classes/consult-classe/consult-classe.component.spec.ts 0 → 100644
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ConsultClasseComponent } from './consult-classe.component';
describe('ConsultClasseComponent', () => {
let component: ConsultClasseComponent;
let fixture: ComponentFixture<ConsultClasseComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [ConsultClasseComponent]
})
.compileComponents();
fixture = TestBed.createComponent(ConsultClasseComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/etablissement/classes/consult-classe/consult-classe.component.ts 0 → 100644
import { CommonModule } from '@angular/common';
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatDialog } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatSort, MatSortModule } from '@angular/material/sort';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { RouterLink, RouterOutlet } from '@angular/router';
import { ChargeDialogComponent } from '../../charges/charge-dialog/charge-dialog.component';
export interface Element {
description: string;
montant: string;
charges: string;
date: string;
}
const ELEMENT_DATA: Element[] = [
{
description: 'Barnoin test',
montant: '100 000 XOF',
charges: 'test',
date: '2023-01-01',
},
];
@Component({
selector: 'bgui-consult-classe',
standalone: true,
imports: [
RouterLink,
MatCardModule,
CommonModule,
MatButtonModule,
MatIconModule,
MatTabsModule,
MatTableModule,
MatPaginatorModule,
MatInputModule,
MatMenuModule,
MatSortModule,
RouterOutlet,
],
templateUrl: './consult-classe.component.html',
styleUrls: ['./consult-classe.component.scss'],
})
export class ConsultClasseComponent implements AfterViewInit {
displayedColumns: string[] = [
'charges',
'description',
'montant',
'date',
'actions',
];
constructor(private dialog: MatDialog) {}
dataSource = new MatTableDataSource(ELEMENT_DATA);
ngOnInit() {
console.log(this.dataSource);
}
@ViewChild(MatPaginator) paginator!: MatPaginator;
@ViewChild(MatSort) sort!: MatSort;
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
editItem(element: Element) {
// Implémentez la logique pour éditer un élément
console.log('Editing item', element);
}
deleteItem(element: Element) {
// Implémentez la logique pour supprimer un élément
console.log('Deleting item', element);
}
inviteCollaborator(element: Element) {
// Implémentez la logique pour inviter un collaborateur
console.log('Inviting collaborator for', element);
}
public openDialog() {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const dialogRef = this.dialog.open(ChargeDialogComponent, {
width: '800px',
height: '1000px',
});
}
}
src/app/etablissement/classes/edit-classe/edit-classe.component.spec.ts 0 → 100644
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { EditClasseComponent } from './edit-classe.component';
describe('EditClasseComponent', () => {
let component: EditClasseComponent;
let fixture: ComponentFixture<EditClasseComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [EditClasseComponent]
})
.compileComponents();
fixture = TestBed.createComponent(EditClasseComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/etablissement/classes/edit-classe/edit-classe.component.ts 0 → 100644
import { Component } from '@angular/core';
@Component({
selector: 'bgui-edit-classe',
standalone: true,
imports: [],
templateUrl: './edit-classe.component.html',
styleUrl: './edit-classe.component.scss',
})
export class EditClasseComponent {}
src/app/etablissement/etablissement.component.html
<mat-card class="w-100">
<mat-card-content>
<router-outlet></router-outlet>
</mat-card-content>
</mat-card>
<mat-card-content>
<router-outlet></router-outlet>
</mat-card-content>
src/app/etablissement/etablissement.routes.ts
......@@ -3,16 +3,22 @@ import { Routes } from '@angular/router';
import { ViewEtablissementComponent } from './view-etablissement/view-etablissement.component';
import { EtablissementComponent } from './etablissement.component';
import { ChargesComponent } from './charges/charges.component';
import { ClassesComponent } from './classes/classes.component';
import { MatricesComponent } from './matrices/matrices.component';
import { TransactionsComponent } from './transactions/transactions.component';
import { ClassesComponent } from './classes/classes.component';
import { ConsultClasseComponent } from './classes/consult-classe/consult-classe.component';
import { EditClasseComponent } from './classes/edit-classe/edit-classe.component';
export const etablissementRoutes: Routes = [
{
path: '',
component: EtablissementComponent,
children: [
{ path: '', redirectTo: 'view-etablissement', pathMatch: 'full' },
{
path: '',
redirectTo: 'view-etablissement',
pathMatch: 'full',
},
{
path: 'view-etablissement',
......@@ -26,6 +32,16 @@ export const etablissementRoutes: Routes = [
path: 'classes',
component: ClassesComponent,
},
{
path: 'classes/edit-classe',
component: EditClasseComponent,
},
{
path: 'classes/consult-classe',
component: ConsultClasseComponent,
},
{
path: 'transactions',
component: TransactionsComponent,
......
src/app/etablissement/preferences/preferences.component.html
<div class="card-body mb-4">
<div class="row">
<div class="col-md-2"></div>
<div
class="d-flex justify-content-between align-items-center"
style="color: white">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#" [routerLink]="['/etablissement']">Etablissement</a>
</li>
<li class="breadcrumb-item">
<a href="#" [routerLink]="['/etablissement/preferences']"
>Préférences</a
>
</li>
</ol>
</nav>
</div>
</div>
</div>
<div
class="container d-flex justify-content-center"
id="id-container-etablissement">
<mat-card class="preference-card">
<mat-card-content>
<form [formGroup]="etablishmentForm" (ngSubmit)="onSubmit()">
<div class="row">
<div class="mb-4">
<label for="logo">Logo de l'établissement</label>
<div class="text-center">
<img
src="https://schoolfees.cinetpay.com/assets/images/schools/school-logo.svg"
alt="Aperçu du logo de l'établissement"
class="img-fluid my-3 mx-auto"
style="width: 100px"
id="preview-image" />
</div>
<button
mat-raised-button
color="primary"
class="d-flex justify-content-center align-items-center gap-2 btn fw-bold w-80 btn-input"
type="button"
(click)="fileInput.click()"
id="btn-input">
<div
id="spinner"
class="d-none spinner-border text-sm text-white"
role="status">
<span class="visually-hidden">Loading...</span>
</div>
<span id="btn-text" class="d-flex align-items-center gap-1">
<mat-icon>add</mat-icon> Modifier
</span>
</button>
<mat-tab-group class="mb-4 border-2">
<mat-tab label="Classes">
<div class="content sm-gutter">
<div class="row">
<div class="col-md-12 col-vlg-12 m-b-10">
<div class="row-fluid">
<div class="span12">
<div class="grid simple">
<div class="page-title d-flex justify-content-between">
<div class="col-m-5 text-right">
<button class="btn btn-secondary m-5">
Exporter <i class="fa fa-download m-1"></i>
</button>
</div>
<button
(click)="openDialog()"
class="btn btn-sl btn-success m-5">
<mat-icon>add</mat-icon>
Ajouter une classe
</button>
</div>
<div
class="example-container mat-elevation-z8"
style="margin-top: 40px">
<mat-form-field appearance="outline">
<mat-label>Filtrer</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. John Doe"
#input />
</mat-form-field>
<input
type="file"
class="form-control d-none"
id="logo"
name="logo"
#fileInput
(change)="onFileSelected($event)" />
</div>
</div>
<table
mat-table
[dataSource]="dataSource"
matSort
class="mat-elevation-z8">
<!-- Groupe Column -->
<ng-container matColumnDef="classes">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text">
Classes
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.classes
}}</mat-cell>
</ng-container>
<div class="row">
<div class="col-12">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Name</mat-label>
<input
matInput
placeholder="Name"
formControlName="name"
required />
<mat-error
*ngIf="
etablishmentForm.controls['name'].invalid &&
etablishmentForm.controls['name'].touched
">
Name is required
</mat-error>
</mat-form-field>
</div>
</div>
<!-- Nom Column -->
<ng-container matColumnDef="cycles">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text">
Cycles
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.cycles
}}</mat-cell>
</ng-container>
<div class="row">
<div class="col-12">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Website</mat-label>
<input matInput placeholder="Website" formControlName="website" />
</mat-form-field>
</div>
</div>
<!-- Service Column -->
<ng-container matColumnDef="charges">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text">
Charges associées
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.charges
}}</mat-cell>
</ng-container>
<div class="row">
<div class="col-12">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Phone</mat-label>
<input
matInput
placeholder="Phone"
formControlName="phone"
required />
<mat-error
*ngIf="
etablishmentForm.controls['phone'].invalid &&
etablishmentForm.controls['phone'].touched
">
Phone is required
</mat-error>
</mat-form-field>
</div>
</div>
<!-- Solde Column -->
<ng-container matColumnDef="date">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text">
Date
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.date
}}</mat-cell>
</ng-container>
<div class="row">
<div class="col-12">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Country</mat-label>
<input
matInput
placeholder="Country"
formControlName="country"
required />
<mat-error
*ngIf="
etablishmentForm.controls['country'].invalid &&
etablishmentForm.controls['country'].touched
">
Country is required
</mat-error>
</mat-form-field>
</div>
</div>
<ng-container matColumnDef="actions">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text">
<!-- Actions -->
</mat-header-cell>
<mat-cell *matCellDef="let element">
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<!-- <button mat-menu-item (click)="setDefault(element)">
<mat-icon>star</mat-icon>
<span>Définir par défaut</span>
</button> -->
<button
mat-menu-item
(click)="inviteCollaborator(element)">
<mat-icon>visibility</mat-icon>
<span>Consulter</span>
</button>
<button mat-menu-item (click)="editItem(element)">
<mat-icon>edit</mat-icon>
<span>Modifier</span>
</button>
<button mat-menu-item (click)="deleteItem(element)">
<mat-icon>delete</mat-icon>
<span>Supprimer</span>
</button>
</mat-menu>
</mat-cell>
</ng-container>
<div class="row">
<div class="col-12">
<mat-form-field appearance="outline" class="full-width">
<mat-label>City</mat-label>
<input
matInput
placeholder="City"
formControlName="city"
required />
<mat-error
*ngIf="
etablishmentForm.controls['city'].invalid &&
etablishmentForm.controls['city'].touched
">
City is required
</mat-error>
</mat-form-field>
</div>
</div>
<mat-header-row
*matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row
*matRowDef="let row; columns: displayedColumns"></mat-row>
</table>
<mat-paginator
[pageSizeOptions]="[5, 10, 50, 100, 200]"
showFirstLastButtons></mat-paginator>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Address</mat-label>
<input
matInput
placeholder="Address"
formControlName="address"
required />
<mat-error
*ngIf="
etablishmentForm.controls['address'].invalid &&
etablishmentForm.controls['address'].touched
">
Address is required
</mat-error>
</mat-form-field>
</div>
</div>
</div>
</div>
</mat-tab>
<mat-tab label="Cycles">
<div class="content sm-gutter">
<div class="row">
<div class="col-md-12 col-vlg-12 m-b-10">
<div class="row-fluid">
<div class="span12">
<div class="grid simple">
<div class="page-title d-flex justify-content-between">
<div class="col-m-5 text-right">
<button class="btn btn-secondary m-5">
Exporter <i class="fa fa-download m-1"></i>
</button>
</div>
<button
(click)="openDialog()"
class="btn btn-sl btn-success m-5">
<mat-icon>add</mat-icon>
Ajouter une classe
</button>
</div>
<div
class="example-container mat-elevation-z8"
style="margin-top: 40px">
<mat-form-field appearance="outline">
<mat-label>Filtrer</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. John Doe"
#input />
</mat-form-field>
<table
mat-table
[dataSource]="dataSource"
matSort
class="mat-elevation-z8">
<!-- Groupe Column -->
<ng-container matColumnDef="classes">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text">
Classes
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.classes
}}</mat-cell>
</ng-container>
<div class="row">
<div class="col-12">
<mat-slide-toggle
color="primary"
formControlName="business"
labelPosition="before">
Associer un business
</mat-slide-toggle>
</div>
</div>
<!-- Nom Column -->
<ng-container matColumnDef="cycles">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text">
Cycles
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.cycles
}}</mat-cell>
</ng-container>
<div class="row">
<div class="col-120" style="margin-bottom: 2px !important">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Business</mat-label>
<mat-select formControlName="business" required>
<mat-option
*ngFor="let business of business"
[value]="business.value">
{{ business.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<!-- Service Column -->
<ng-container matColumnDef="charges">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text">
Charges associées
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.charges
}}</mat-cell>
</ng-container>
<mat-card-actions
class="d-flex justify-content-between m-2"
id="card-actions-button">
<button
mat-button
type="submit"
class="btn btn-success"
[disabled]="etablishmentForm.invalid">
Modifier les informations de l'établissement
<mat-icon style="margin: -1px">edit</mat-icon>
</button>
</mat-card-actions>
</form>
</mat-card-content>
</mat-card>
<!-- -->
<!-- Solde Column -->
<ng-container matColumnDef="date">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text">
Date
</mat-header-cell>
<mat-cell *matCellDef="let element">{{
element.date
}}</mat-cell>
</ng-container>
<div>
<!-- <mat-card class="preference-card" id="container-etablissement">
<mat-card-header class="preference-card-header">
<h4>Lien de paiement</h4>
</mat-card-header>
<mat-card-content>
<form [formGroup]="etablishmentForm" (ngSubmit)="onSubmit()">
<div class="row">
<div class="col-12">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Lien de paiement</mat-label>
<input
matInput
placeholder="Lien de paiement"
formControlName="name"
required />
<mat-error
*ngIf="
etablishmentForm.controls['name'].invalid &&
etablishmentForm.controls['name'].touched
">
Name is required
</mat-error>
</mat-form-field>
</div>
</div>
<ng-container matColumnDef="actions">
<mat-header-cell
*matHeaderCellDef
mat-sort-header
class="bold-text">
<!-- Actions -->
</mat-header-cell>
<mat-cell *matCellDef="let element">
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<!-- <button mat-menu-item (click)="setDefault(element)">
<mat-icon>star</mat-icon>
<span>Définir par défaut</span>
</button> -->
<button
mat-menu-item
(click)="inviteCollaborator(element)">
<mat-icon>visibility</mat-icon>
<span>Consulter</span>
</button>
<button mat-menu-item (click)="editItem(element)">
<mat-icon>edit</mat-icon>
<span>Modifier</span>
</button>
<button mat-menu-item (click)="deleteItem(element)">
<mat-icon>delete</mat-icon>
<span>Supprimer</span>
</button>
</mat-menu>
</mat-cell>
</ng-container>
<mat-card-actions
class="d-flex justify-content-between"
id="card-actions-button">
<button mat-button type="submit" class="btn btn-success">
<span class="material-icons-round" style="color: white"
>copy</span
>
Copier le lien
</button>
<button mat-button type="submit" class="btn btn-success">
<span class="material-icons-round" style="color: white"
>share</span
>
Partager le lien
</button>
</mat-card-actions>
</form>
</mat-card-content>
</mat-card> -->
<mat-header-row
*matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row
*matRowDef="let row; columns: displayedColumns"></mat-row>
</table>
<mat-paginator
[pageSizeOptions]="[5, 10, 50, 100, 200]"
showFirstLastButtons></mat-paginator>
</div>
</div>
<mat-card class="preference-card" id="container-etablissement">
<mat-card-header class="preference-card-header">
<h4>Lien de paiement</h4>
</mat-card-header>
<mat-card-content>
<form [formGroup]="etablishmentForm" (ngSubmit)="onSubmit()">
<div class="row">
<div class="col-12">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Lien de paiement</mat-label>
<input
matInput
placeholder="Lien de paiement"
formControlName="paymentLink"
required />
<mat-error
*ngIf="
lienForm.controls['paymentLink'].invalid &&
lienForm.controls['paymentLink'].touched
">
Le lien de paiement est requis
</mat-error>
</mat-form-field>
</div>
</div>
</div>
</div>
</div>
</mat-tab>
</mat-tab-group>
<mat-card-actions
class="d-flex justify-content-between"
id="card-actions-button">
<button
mat-button
type="button"
class="btn btn-success"
(click)="copyLink()">
<span class="material-icons-round" style="color: white"
>copy</span
>
Copier le lien
</button>
<button
mat-button
type="button"
class="btn btn-success"
(click)="shareLink()">
<span class="material-icons-round" style="color: white"
>share</span
>
Partager le lien
</button>
</mat-card-actions>
</form>
</mat-card-content>
</mat-card>
<mat-card class="preference-card" id="container-etablissement">
<mat-card-header class="preference-card-header">
<h4>Etablissement par defaut</h4>
</mat-card-header>
<mat-card-content>
<form [formGroup]="etablishmentForm" (ngSubmit)="onSubmit()">
<div class="row">
<div class="col-12" id="defaultcard">
<img
class="img-fluid"
src="https://schoolfees.cinetpay.com/assets/images/schools/school-logo.svg"
alt="Logo école"
style="width: 70px" />
{{ etablissement }}
</div>
</div>
<mat-card-actions
class="d-flex justify-content-between"
id="card-actions-button">
<button
mat-button
type="submit"
class="btn btn-success m-4"
[disabled]="etablishmentForm.invalid">
Definir comme établissement par defaut
</button>
</mat-card-actions>
</form>
</mat-card-content>
</mat-card>
</div>
</div>
src/app/etablissement/preferences/preferences.component.scss
.full-width{
width: 100% !important;
// margin: 10px;
margin-bottom: 10px;
}
.d-flex{
justify-content: space-between;
margin-left: 80px !important;
margin-right: 150px !important;
}
button{
border-radius:0px !important
}
#statusId{
margin-left: 3.5rem !important;
}
#rowStatus, #card-actions-button{
padding-bottom: 30px !important;
}
.preference-card {
max-width: 600px;
// max-height: 1500px !important;
margin:20px !important;
}
.preference-card-header{
justify-content: center;
text-align: center !important;
padding: auto;
margin-bottom: 20px !important;
}
#container-etablissement{
max-height:250px !important;
}
#defaultcard{
max-width: 80% !important;
height: 70px !important;
margin: auto !important;
background-color: rgb(181, 184, 185);
}
.d-flex[_ngcontent-ng-c4117379772] {
justify-content: space-between;
margin-left: 80px !important;
margin-right: 150px !important;
}
src/app/etablissement/preferences/preferences.component.ts
import { Component, ViewChild } from '@angular/core';
import { RouterLink } from '@angular/router';
/* eslint-disable @typescript-eslint/no-explicit-any */
import { Component } from '@angular/core';
import { Router, RouterLink } from '@angular/router';
import { MatTabsModule } from '@angular/material/tabs';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import {
FormBuilder,
FormGroup,
FormsModule,
ReactiveFormsModule,
Validators,
} from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { CreateTpeComponent } from 'src/app/tpe/create-tpe/create-tpe.component';
export interface Element {
classes: string;
cycles: string;
charges: string;
date: string;
actions: string;
}
const ELEMENT_DATA: Element[] = [
{
classes: 'Classe 1',
cycles: 'Cycle 1',
charges: 'Charge 1',
date: '2023-01-01',
actions: 'Action 1',
},
{
classes: 'Classe 2',
cycles: 'Cycle 2',
charges: 'Charge 2',
date: '2023-02-01',
actions: 'Action 2',
},
{
classes: 'Classe 3',
cycles: 'Cycle 3',
charges: 'Charge 3',
date: '2023-03-01',
actions: 'Action 3',
},
{
classes: 'Classe 4',
cycles: 'Cycle 4',
charges: 'Charge 4',
date: '2023-04-01',
actions: 'Action 4',
},
{
classes: 'Classe 5',
cycles: 'Cycle 5',
charges: 'Charge 5',
date: '2023-05-01',
actions: 'Action 5',
},
{
classes: 'Classe 6',
cycles: 'Cycle 6',
charges: 'Charge 6',
date: '2023-06-01',
actions: 'Action 6',
},
{
classes: 'Classe 7',
cycles: 'Cycle 7',
charges: 'Charge 7',
date: '2023-07-01',
actions: 'Action 7',
},
{
classes: 'Classe 8',
cycles: 'Cycle 8',
charges: 'Charge 8',
date: '2023-08-01',
actions: 'Action 8',
},
{
classes: 'Classe 9',
cycles: 'Cycle 9',
charges: 'Charge 9',
date: '2023-09-01',
actions: 'Action 9',
},
{
classes: 'Classe 10',
cycles: 'Cycle 10',
charges: 'Charge 10',
date: '2023-10-01',
actions: 'Action 10',
},
];
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatTableModule } from '@angular/material/table';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatDialogRef } from '@angular/material/dialog';
import { AuthService } from 'src/app/_helpers/services/auth.service';
import { DialogEtablissementComponent } from '../view-etablissement/dialog-etablissement/dialog-etablissement.component';
@Component({
selector: 'bgui-preferences',
standalone: true,
imports: [
RouterLink,
MatTabsModule,
MatCardModule,
CommonModule,
MatButtonModule,
MatIconModule,
MatTabsModule,
MatTableModule,
MatInputModule,
RouterLink,
FormsModule,
MatCardModule,
MatPaginatorModule,
MatInputModule,
MatMenuModule,
ReactiveFormsModule,
MatFormFieldModule,
MatSelectModule,
MatDatepickerModule,
MatCheckboxModule,
MatSlideToggleModule,
],
templateUrl: './preferences.component.html',
styleUrl: './preferences.component.scss',
})
export class PreferencesComponent {
deleteItem(_t101: any) {
throw new Error('Method not implemented.');
copyLink() {
const paymentLink = this.lienForm.get('paymentLink')!.value;
if (paymentLink) {
navigator.clipboard.writeText(paymentLink).then(() => {
alert('Lien copié dans le presse-papiers');
});
}
}
shareLink() {
const paymentLink = this.lienForm.get('paymentLink')!.value;
if (paymentLink) {
if (navigator.share) {
navigator
.share({
title: 'Lien de paiement',
text: 'Voici le lien de paiement:',
url: paymentLink,
})
.catch(error => {
console.error('Error sharing', error);
});
} else {
alert("Le partage n'est pas pris en charge par votre navigateur.");
}
}
}
editItem(_t101: any) {
onFileSelected($event: Event) {
throw new Error('Method not implemented.');
}
inviteCollaborator(_t101: any) {
etablissement: string = 'Barnoin';
onSubmit() {
throw new Error('Method not implemented.');
}
setDefault(_t101: any) {
onCancel() {
throw new Error('Method not implemented.');
}
displayedColumns: string[] = [
'classes',
'cycles',
'charges',
'date',
'actions',
etablishmentForm: FormGroup;
lienForm: FormGroup;
countries = [
{ value: 'CI', viewValue: "Cote d'ivoire" },
{ value: 'SN', viewValue: 'Senegal' },
{ value: 'ML', viewValue: 'Mali' },
{ value: 'GN', viewValue: 'Guinée' },
{ value: 'BF', viewValue: 'Burkina Faso' },
{ value: 'NE', viewValue: 'Niger' },
{ value: 'TG', viewValue: 'Togo' },
{ value: 'BJ', viewValue: 'Bénin' },
{ value: 'CM', viewValue: 'Cameroun' },
{ value: 'CD', viewValue: 'Congo RDC CDF' },
{ value: 'KM', viewValue: 'Comores' },
{ value: 'FR', viewValue: 'France' },
];
dataSource = new MatTableDataSource(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator!: MatPaginator;
element: any;
dialog: any;
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
}
business = [
{ value: 'CI', viewValue: "Cote d'ivoire" },
{ value: 'SN', viewValue: 'Senegal' },
{ value: 'ML', viewValue: 'Mali' },
{ value: 'GN', viewValue: 'Guinée' },
{ value: 'BF', viewValue: 'Burkina Faso' },
{ value: 'NE', viewValue: 'Niger' },
{ value: 'TG', viewValue: 'Togo' },
{ value: 'BJ', viewValue: 'Bénin' },
{ value: 'CM', viewValue: 'Cameroun' },
{ value: 'CD', viewValue: 'Congo RDC CDF' },
{ value: 'KM', viewValue: 'Comores' },
{ value: 'FR', viewValue: 'France' },
];
hide = true;
public myForm!: FormGroup;
activites: any;
fonctions: any;
services: any;
groupes: any;
isChecked!: boolean;
country: any;
constructor(
private fb: FormBuilder,
private authservice: AuthService
// private dialogRef: MatDialogRef<DialogEtablissementComponent>,
// private router: Router
) {
this.etablishmentForm = this.fb.group({
name: ['', Validators.required],
website: [''],
logo: [''],
phone: [''],
country: ['', Validators.required],
city: [''],
address: ['', Validators.required],
business: [false],
businessSelect: [''],
schoolLevels: this.fb.group({
maternelle: this.fb.array([]),
primaire: this.fb.array([]),
college: this.fb.array([]),
lycee: this.fb.array([]),
}),
});
public openDialog() {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const dialogRef = this.dialog.open(CreateTpeComponent, {
width: '800px',
height: '1000px',
this.lienForm = this.fb.group({
paymentLink: ['', Validators.required],
});
}
}
src/app/etablissement/view-etablissement/dialog-etablissement/dialog-etablissement.component.html
......@@ -160,3 +160,5 @@
</mat-card-actions>
</form>
</mat-card-content>
<!-- -->
src/app/etablissement/view-etablissement/dialog-etablissement/dialog-etablissement.component.ts
/* eslint-disable @typescript-eslint/no-explicit-any */
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
......
src/app/etablissement/view-etablissement/view-etablissement.component.html
<div class="card-body mb-4">
<div class="row">
<div class="col-md-2"></div>
......@@ -22,11 +21,11 @@
<div class="span12">
<div class="grid simple">
<div class="page-title d-flex justify-content-between">
<div class="col-m-5 text-right">
<!-- <div class="col-m-5 text-right">
<button class="btn btn-secondary m-5">
Exporter <i class="fa fa-download m-1"></i>
</button>
</div>
</div> -->
<button (click)="openDialog()" class="btn btn-sl btn-success m-5">
<mat-icon>add</mat-icon>
Ajouter un Etablissement
......@@ -35,14 +34,30 @@
<div
class="example-container mat-elevation-z8"
style="margin-top: 40px">
<mat-form-field appearance="outline">
<!-- <mat-form-field appearance="outline">
<mat-label>Filtrer</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. John Doe"
#input />
</mat-form-field>
</mat-form-field> -->
<div
class="d-flex justify-content-between bg-light align-items-center">
<mat-form-field appearance="outline">
<mat-label>Filter</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. ium"
#input />
</mat-form-field>
<div class="col-m-5 text-right">
<button class="btn bg-white m-2">
Exporter <i class="fa fa-download m-1"></i>
</button>
</div>
</div>
<table
mat-table
......@@ -112,9 +127,7 @@
<a
mat-button
class="d-flex justify-content-center align-items-center gap-2 text-primary fw-semibold"
[href]="
'https://schoolfees.cinetpay.com/establishment/switch-school/'
">
[routerLink]="['/etablissement/preferences']">
<mat-icon>arrow_circle_right</mat-icon>
Passer sur cet établissement
</a>
......
src/app/tpe/groupe-tpe/groupe-tpe.component.html
......@@ -19,6 +19,7 @@
(click)="openDialog()"
style="border-radius: 15px"
class="btn btn-sl btn-success m-5">
<mat-icon>add</mat-icon>
Ajouter un groupe
</button>
</div>
......
src/app/utilisateurs/utilisateurs.component.html
<div class="card-body mb-4" style="background-color: #3f51b5; height: 70px">
<div class="card-body mb-4">
<div class="row">
<div class="col-md-2"></div>
<div
class="d-flex justify-content-between align-items-center"
style="color: white">
<h5 class="m-4" style="color: white">Utilisateur</h5>
<span style="font-weight: bold">{{
date | date: 'dd/MM/yyyy HH:mm:ss'
}}</span>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Utilisateurs</a>
</li>
</ol>
</nav>
</div>
</div>
</div>
......
src/app/utilisateurs/utilisateurs.component.scss
.bold-text {
color:blue;
font-weight: bold;
font-size: 16px; /* Ajustez la taille de la police selon vos besoins */
}
src/app/utilisateurs/view-user/view-user.component.html
......@@ -24,6 +24,7 @@
style="border-radius: 15px"
[routerLink]="['/utilisateurs/create-users']"
class="btn btn-sl btn-success m-5">
<mat-icon>add</mat-icon>
Ajouter
</button>
</div>
......@@ -96,7 +97,6 @@
<mat-cell *matCellDef="let user">{{ user.email }}</mat-cell>
</ng-container>
<ng-container matColumnDef="role">
<mat-header-cell
*matHeaderCellDef
......@@ -131,7 +131,6 @@
>Actions</mat-header-cell
>
<mat-cell *matCellDef="let user" style="text-align: right">
<a
href="#"
class="m-2"
......@@ -159,4 +158,3 @@
</div>
</div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment