Skip to content

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

etablissement

parent a49d17d0
Showing with 1391 additions and 178 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 { 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({ @Component({
selector: 'bgui-charge-dialog', selector: 'bgui-charge-dialog',
standalone: true, standalone: true,
imports: [], imports: [
CommonModule,
ReactiveFormsModule,
MatInputModule,
MatFormFieldModule,
MatDatepickerModule,
MatButtonModule,
MatIconModule,
MatCardModule,
MatSelectModule,
MatSlideToggleModule,
FormsModule,
_MatSlideToggleRequiredValidatorModule,
],
templateUrl: './charge-dialog.component.html', templateUrl: './charge-dialog.component.html',
styleUrl: './charge-dialog.component.scss' styleUrl: './charge-dialog.component.scss',
}) })
export class ChargeDialogComponent { 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({ @Component({
selector: 'bgui-charges', selector: 'bgui-charges',
standalone: true, standalone: true,
imports: [], imports: [
RouterLink,
MatCardModule,
CommonModule,
MatButtonModule,
MatIconModule,
MatTabsModule,
MatTableModule,
MatPaginatorModule,
MatInputModule,
MatMenuModule,
MatSortModule,
RouterOutlet,
MatChipsModule,
],
templateUrl: './charges.component.html', templateUrl: './charges.component.html',
styleUrl: './charges.component.scss' styleUrl: './charges.component.scss',
}) })
export class ChargesComponent { 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 @@ ...@@ -71,13 +71,13 @@
</div> </div>
<div class="page-title d-flex justify-content-between"> <div class="page-title d-flex justify-content-between">
<div class="col-m-5 text-right"> <!-- <div class="col-m-5 text-right">
<button <button
class="btn btn-secondary m-5" class="btn btn-secondary m-5"
style="border-radius: 15px"> style="border-radius: 15px">
Exporter <i class="fa fa-download m-1"></i> Exporter <i class="fa fa-download m-1"></i>
</button> </button>
</div> </div> -->
<button <button
(click)="openDialog()" (click)="openDialog()"
class="btn btn-sl btn-success m-5"> class="btn btn-sl btn-success m-5">
...@@ -88,6 +88,16 @@ ...@@ -88,6 +88,16 @@
<div <div
class="example-container mat-elevation-z8" class="example-container mat-elevation-z8"
style="margin-top: 40px; overflow-x: hidden"> 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-form-field appearance="outline">
<mat-label>Filter</mat-label> <mat-label>Filter</mat-label>
<input <input
...@@ -96,6 +106,12 @@ ...@@ -96,6 +106,12 @@
placeholder="Ex. ium" placeholder="Ex. ium"
#input /> #input />
</mat-form-field> </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 <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"
...@@ -167,12 +183,20 @@ ...@@ -167,12 +183,20 @@
</button> </button>
<mat-menu #menu="matMenu"> <mat-menu #menu="matMenu">
<button <button
[routerLink]="[
'/etablissement/classes/consult-classe'
]"
mat-menu-item mat-menu-item
(click)="inviteCollaborator(element)"> (click)="inviteCollaborator(element)">
<mat-icon>visibility</mat-icon> <mat-icon>visibility</mat-icon>
<span>Consulter</span> <span>Consulter</span>
</button> </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> <mat-icon>edit</mat-icon>
<span>Modifier</span> <span>Modifier</span>
</button> </button>
...@@ -209,23 +233,40 @@ ...@@ -209,23 +233,40 @@
<div class="span12"> <div class="span12">
<div class="grid simple"> <div class="grid simple">
<div class="page-title d-flex justify-content-between"> <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"> <button class="btn btn-secondary m-5">
Exporter <i class="fa fa-download m-1"></i> Exporter <i class="fa fa-download m-1"></i>
</button> </button>
</div> </div> -->
</div> </div>
<div <div
class="example-container mat-elevation-z8" class="example-container mat-elevation-z8"
style="margin-top: 40px"> style="margin-top: 40px">
<mat-form-field appearance="outline"> <!-- <mat-form-field appearance="outline">
<mat-label>Filtrer</mat-label> <mat-label>Filtrer</mat-label>
<input <input
matInput matInput
(keyup)="applyFilter($event)" (keyup)="applyFilter($event)"
placeholder="Ex. John Doe" placeholder="Ex. John Doe"
#input /> #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> </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 <table
mat-table mat-table
......
src/app/etablissement/classes/classes.component.ts
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-explicit-any */
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core'; import { Component, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card'; import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
...@@ -11,8 +11,10 @@ import { MatMenuModule } from '@angular/material/menu'; ...@@ -11,8 +11,10 @@ import { MatMenuModule } from '@angular/material/menu';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator'; import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatTableDataSource, MatTableModule } from '@angular/material/table'; import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs'; 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 { 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 { export interface Element {
classes: string; classes: string;
...@@ -134,24 +136,29 @@ const ELEMENT_DATAS: ElementData[] = [ ...@@ -134,24 +136,29 @@ const ELEMENT_DATAS: ElementData[] = [
MatPaginatorModule, MatPaginatorModule,
MatInputModule, MatInputModule,
MatMenuModule, MatMenuModule,
RouterOutlet,
ReactiveFormsModule,
], ],
templateUrl: './classes.component.html', templateUrl: './classes.component.html',
styleUrl: './classes.component.scss', styleUrl: './classes.component.scss',
}) })
export class ClassesComponent { export class ClassesComponent {
// eslint-disable-next-line @typescript-eslint/no-unused-vars constructor(private dialog: MatDialog) {}
deleteItem(_t101: any) { inviteCollaborator(element: any) {
throw new Error('Method not implemented.'); // 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) { editItem(element: any) {
throw new Error('Method not implemented.'); // 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) { deleteItem(element: any) {
throw new Error('Method not implemented.'); // 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) { setDefault(_t101: any) {
throw new Error('Method not implemented.'); throw new Error('Method not implemented.');
} }
...@@ -171,7 +178,6 @@ export class ClassesComponent { ...@@ -171,7 +178,6 @@ export class ClassesComponent {
@ViewChild(MatPaginator) paginator!: MatPaginator; @ViewChild(MatPaginator) paginator!: MatPaginator;
element: any; element: any;
elements: any; elements: any;
dialog: any;
applyFilter(event: Event) { applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value; const filterValue = (event.target as HTMLInputElement).value;
const filterValues = (event.target as HTMLInputElement).value; const filterValues = (event.target as HTMLInputElement).value;
...@@ -186,7 +192,7 @@ export class ClassesComponent { ...@@ -186,7 +192,7 @@ export class ClassesComponent {
public openDialog() { public openDialog() {
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
const dialogRef = this.dialog.open(CreateTpeComponent, { const dialogRef = this.dialog.open(ClasseDialogComponent, {
width: '800px', width: '800px',
height: '1000px', 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>
<mat-card-content>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</mat-card-content> </mat-card-content>
</mat-card>
src/app/etablissement/etablissement.routes.ts
...@@ -3,16 +3,22 @@ import { Routes } from '@angular/router'; ...@@ -3,16 +3,22 @@ import { Routes } from '@angular/router';
import { ViewEtablissementComponent } from './view-etablissement/view-etablissement.component'; import { ViewEtablissementComponent } from './view-etablissement/view-etablissement.component';
import { EtablissementComponent } from './etablissement.component'; import { EtablissementComponent } from './etablissement.component';
import { ChargesComponent } from './charges/charges.component'; import { ChargesComponent } from './charges/charges.component';
import { ClassesComponent } from './classes/classes.component';
import { MatricesComponent } from './matrices/matrices.component'; import { MatricesComponent } from './matrices/matrices.component';
import { TransactionsComponent } from './transactions/transactions.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 = [ export const etablissementRoutes: Routes = [
{ {
path: '', path: '',
component: EtablissementComponent, component: EtablissementComponent,
children: [ children: [
{ path: '', redirectTo: 'view-etablissement', pathMatch: 'full' }, {
path: '',
redirectTo: 'view-etablissement',
pathMatch: 'full',
},
{ {
path: 'view-etablissement', path: 'view-etablissement',
...@@ -26,6 +32,16 @@ export const etablissementRoutes: Routes = [ ...@@ -26,6 +32,16 @@ export const etablissementRoutes: Routes = [
path: 'classes', path: 'classes',
component: ClassesComponent, component: ClassesComponent,
}, },
{
path: 'classes/edit-classe',
component: EditClasseComponent,
},
{
path: 'classes/consult-classe',
component: ConsultClasseComponent,
},
{ {
path: 'transactions', path: 'transactions',
component: TransactionsComponent, component: TransactionsComponent,
......
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'; /* eslint-disable @typescript-eslint/no-explicit-any */
import { RouterLink } from '@angular/router'; import { Component } from '@angular/core';
import { Router, RouterLink } from '@angular/router';
import { MatTabsModule } from '@angular/material/tabs'; import { MatTabsModule } from '@angular/material/tabs';
import { CommonModule } from '@angular/common'; 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 { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card'; import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu'; import { MatPaginatorModule } from '@angular/material/paginator';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator'; import { MatTableModule } from '@angular/material/table';
import { MatTableDataSource, MatTableModule } from '@angular/material/table'; import { MatCheckboxModule } from '@angular/material/checkbox';
import { CreateTpeComponent } from 'src/app/tpe/create-tpe/create-tpe.component'; import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
export interface Element { import { MatSlideToggleModule } from '@angular/material/slide-toggle';
classes: string; import { MatDialogRef } from '@angular/material/dialog';
cycles: string; import { AuthService } from 'src/app/_helpers/services/auth.service';
charges: string; import { DialogEtablissementComponent } from '../view-etablissement/dialog-etablissement/dialog-etablissement.component';
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',
},
];
@Component({ @Component({
selector: 'bgui-preferences', selector: 'bgui-preferences',
standalone: true, standalone: true,
imports: [ imports: [
RouterLink,
MatTabsModule,
MatCardModule,
CommonModule, CommonModule,
MatButtonModule, MatButtonModule,
MatIconModule, MatIconModule,
MatTabsModule,
MatTableModule, MatTableModule,
MatInputModule,
RouterLink,
FormsModule, FormsModule,
MatCardModule,
MatPaginatorModule, MatPaginatorModule,
MatInputModule, ReactiveFormsModule,
MatMenuModule, MatFormFieldModule,
MatSelectModule,
MatDatepickerModule,
MatCheckboxModule,
MatSlideToggleModule,
], ],
templateUrl: './preferences.component.html', templateUrl: './preferences.component.html',
styleUrl: './preferences.component.scss', styleUrl: './preferences.component.scss',
}) })
export class PreferencesComponent { export class PreferencesComponent {
deleteItem(_t101: any) { copyLink() {
throw new Error('Method not implemented.'); 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.'); throw new Error('Method not implemented.');
} }
inviteCollaborator(_t101: any) { etablissement: string = 'Barnoin';
onSubmit() {
throw new Error('Method not implemented.'); throw new Error('Method not implemented.');
} }
setDefault(_t101: any) { onCancel() {
throw new Error('Method not implemented.'); throw new Error('Method not implemented.');
} }
displayedColumns: string[] = [
'classes', etablishmentForm: FormGroup;
'cycles', lienForm: FormGroup;
'charges',
'date', countries = [
'actions', { 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() { business = [
this.dataSource.paginator = this.paginator; { 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() { this.lienForm = this.fb.group({
// eslint-disable-next-line @typescript-eslint/no-unused-vars paymentLink: ['', Validators.required],
const dialogRef = this.dialog.open(CreateTpeComponent, {
width: '800px',
height: '1000px',
}); });
} }
} }
src/app/etablissement/view-etablissement/dialog-etablissement/dialog-etablissement.component.html
...@@ -160,3 +160,5 @@ ...@@ -160,3 +160,5 @@
</mat-card-actions> </mat-card-actions>
</form> </form>
</mat-card-content> </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 { CommonModule } from '@angular/common';
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { import {
......
src/app/etablissement/view-etablissement/view-etablissement.component.html
<div class="card-body mb-4"> <div class="card-body mb-4">
<div class="row"> <div class="row">
<div class="col-md-2"></div> <div class="col-md-2"></div>
...@@ -22,11 +21,11 @@ ...@@ -22,11 +21,11 @@
<div class="span12"> <div class="span12">
<div class="grid simple"> <div class="grid simple">
<div class="page-title d-flex justify-content-between"> <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"> <button class="btn btn-secondary m-5">
Exporter <i class="fa fa-download m-1"></i> Exporter <i class="fa fa-download m-1"></i>
</button> </button>
</div> </div> -->
<button (click)="openDialog()" class="btn btn-sl btn-success m-5"> <button (click)="openDialog()" class="btn btn-sl btn-success m-5">
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
Ajouter un Etablissement Ajouter un Etablissement
...@@ -35,14 +34,30 @@ ...@@ -35,14 +34,30 @@
<div <div
class="example-container mat-elevation-z8" class="example-container mat-elevation-z8"
style="margin-top: 40px"> style="margin-top: 40px">
<mat-form-field appearance="outline"> <!-- <mat-form-field appearance="outline">
<mat-label>Filtrer</mat-label> <mat-label>Filtrer</mat-label>
<input <input
matInput matInput
(keyup)="applyFilter($event)" (keyup)="applyFilter($event)"
placeholder="Ex. John Doe" placeholder="Ex. John Doe"
#input /> #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> </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 <table
mat-table mat-table
...@@ -112,9 +127,7 @@ ...@@ -112,9 +127,7 @@
<a <a
mat-button mat-button
class="d-flex justify-content-center align-items-center gap-2 text-primary fw-semibold" class="d-flex justify-content-center align-items-center gap-2 text-primary fw-semibold"
[href]=" [routerLink]="['/etablissement/preferences']">
'https://schoolfees.cinetpay.com/establishment/switch-school/'
">
<mat-icon>arrow_circle_right</mat-icon> <mat-icon>arrow_circle_right</mat-icon>
Passer sur cet établissement Passer sur cet établissement
</a> </a>
......
src/app/tpe/groupe-tpe/groupe-tpe.component.html
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
(click)="openDialog()" (click)="openDialog()"
style="border-radius: 15px" style="border-radius: 15px"
class="btn btn-sl btn-success m-5"> class="btn btn-sl btn-success m-5">
<mat-icon>add</mat-icon>
Ajouter un groupe Ajouter un groupe
</button> </button>
</div> </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="row">
<div class="col-md-2"></div> <div class="col-md-2"></div>
<div <div
class="d-flex justify-content-between align-items-center" class="d-flex justify-content-between align-items-center"
style="color: white"> style="color: white">
<h5 class="m-4" style="color: white">Utilisateur</h5> <nav aria-label="breadcrumb">
<span style="font-weight: bold">{{ <ol class="breadcrumb">
date | date: 'dd/MM/yyyy HH:mm:ss' <li class="breadcrumb-item">
}}</span> <a href="#">Utilisateurs</a>
</li>
</ol>
</nav>
</div> </div>
</div> </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 @@ ...@@ -24,6 +24,7 @@
style="border-radius: 15px" style="border-radius: 15px"
[routerLink]="['/utilisateurs/create-users']" [routerLink]="['/utilisateurs/create-users']"
class="btn btn-sl btn-success m-5"> class="btn btn-sl btn-success m-5">
<mat-icon>add</mat-icon>
Ajouter Ajouter
</button> </button>
</div> </div>
...@@ -96,7 +97,6 @@ ...@@ -96,7 +97,6 @@
<mat-cell *matCellDef="let user">{{ user.email }}</mat-cell> <mat-cell *matCellDef="let user">{{ user.email }}</mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="role"> <ng-container matColumnDef="role">
<mat-header-cell <mat-header-cell
*matHeaderCellDef *matHeaderCellDef
...@@ -131,7 +131,6 @@ ...@@ -131,7 +131,6 @@
>Actions</mat-header-cell >Actions</mat-header-cell
> >
<mat-cell *matCellDef="let user" style="text-align: right"> <mat-cell *matCellDef="let user" style="text-align: right">
<a <a
href="#" href="#"
class="m-2" class="m-2"
...@@ -159,4 +158,3 @@ ...@@ -159,4 +158,3 @@
</div> </div>
</div> </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