Skip to content

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

formulaires etablissement-classe

parent 6769f14e
Showing with 264 additions and 336 deletions
src/app/etablissement/classes/classes.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/classes']">Classes</a>
</li>
</ol>
</nav>
</div>
</div>
</div>
<!-- <mat-card appearance="outlined">
<mat-card-content>Simple card</mat-card-content>
</mat-card> -->
<!-- <div class="row">
<div class="col-md-3">
<mat-card
class="card rounded-2 border-0 border-bottom border-blue border-3">
<mat-card-content>
<div class="d-flex justify-content-between align-items-center">
<div>
<span class="fs-3 d-block">10</span>
<span class="fs-6 text-widget-light-gray">CLASSES</span>
</div>
<mat-icon class="text-widget" style="font-size: 25px"
>school</mat-icon
>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-md-3">
<mat-card
class="card rounded-2 border-0 border-bottom border-blue border-3">
<mat-card-content>
<div class="d-flex justify-content-between align-items-center">
<div>
<span class="fs-3 d-block">10</span>
<span class="fs-6 text-widget-light-gray">CYCLES</span>
</div>
<mat-icon class="text-widget" style="font-size: 25px"
>hiking</mat-icon
>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-md-3">
<mat-card
class="card rounded-2 border-0 border-bottom border-blue border-3">
<mat-card-content>
<div class="d-flex justify-content-between align-items-center">
<div>
<span class="fs-3 d-block">10</span>
<span class="fs-6 text-widget-light-gray">CHARGES ASSOCIÉES</span>
</div>
<mat-icon class="text-widget" style="font-size: 25px">spoke</mat-icon>
</div>
</mat-card-content>
</mat-card>
</div>
</div> -->
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<div class="row"> <div class="row">
<div class="col-md-3"> <div class="col-md-3">
...@@ -127,18 +52,29 @@ ...@@ -127,18 +52,29 @@
</div> </div>
</div> </div>
</div> </div>
<!-- -->
<mat-tab-group class="mb-4 border-2"> <mat-tab-group>
<mat-tab label="Classes"> <mat-tab label="Classes">
<div class="content sm-gutter"> <div class="content sm-gutter">
<div class="row"> <div class="row">
<div class="col-md-12 col-vlg-12 m-b-10"> <div>
<div class="row-fluid"> <div class="container-fluid">
<div class="span12"> <div class="span12">
<div class="grid simple"> <div class="grid simple">
<div class="card-title"></div>
<div class="content sm-gutter">
<div class="mb-4">
<!-- <h4>Liste des utilisateurs</h4> -->
</div>
<div class="col-md-2"></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 class="btn btn-secondary m-5"> <button
class="btn btn-secondary m-5"
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>
...@@ -151,21 +87,21 @@ ...@@ -151,21 +87,21 @@
</div> </div>
<div <div
class="example-container mat-elevation-z8" class="example-container mat-elevation-z8"
style="margin-top: 40px"> style="margin-top: 40px; overflow-x: hidden">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label>Filtrer</mat-label> <mat-label>Filter</mat-label>
<input <input
matInput matInput
(keyup)="applyFilter($event)" (keyup)="applyFilter($event)"
placeholder="Ex. John Doe" placeholder="Ex. ium"
#input /> #input />
</mat-form-field> </mat-form-field>
<table <table
mat-table mat-table
[dataSource]="dataSource" [dataSource]="dataSource"
matSort matSort
class="mat-elevation-z8"> class="mat-elevation-z8"
style="width: 100%">
<!-- Groupe Column --> <!-- Groupe Column -->
<ng-container matColumnDef="classes"> <ng-container matColumnDef="classes">
<mat-header-cell <mat-header-cell
...@@ -230,10 +166,6 @@ ...@@ -230,10 +166,6 @@
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
<mat-menu #menu="matMenu"> <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 <button
mat-menu-item mat-menu-item
(click)="inviteCollaborator(element)"> (click)="inviteCollaborator(element)">
...@@ -259,7 +191,8 @@ ...@@ -259,7 +191,8 @@
</table> </table>
<mat-paginator <mat-paginator
[pageSizeOptions]="[5, 10, 50, 100, 200]" [pageSizeOptions]="[5, 10, 50, 100, 200]"
showFirstLastButtons></mat-paginator> showFirstLastButtons>
</mat-paginator>
</div> </div>
</div> </div>
</div> </div>
......
src/app/etablissement/etablissement.component.html
<!-- <mat-card appearance="outlined"> <mat-card class="w-100">
<mat-card-content>Simple card</mat-card-content> <mat-card-content>
</mat-card> --> <router-outlet></router-outlet>
</mat-card-content>
<!-- <div class="card-body mb-4"> </mat-card>
<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/view-etablissement']"
>Etablissement</a
>
</li>
</ol>
</nav>
</div>
</div>
</div> -->
<router-outlet></router-outlet>
src/app/etablissement/etablissement.component.scss
.card {
border-radius:0 !important;
background-color: #ffffff61;
}
.text {
color:black;
font-weight: bold;
font-size: 16px; /* Ajustez la taille de la police selon vos besoins */
}
.bold-text {
color:rgb(0, 0, 0);
font-weight: bold;
font-size: 16px; /* Ajustez la taille de la police selon vos besoins */
}
.col-md-2 {
flex: 0 0 auto;
width: 33% !important;
}
button ,a {
border-radius: 0px !important;
}
.example-form {
width: 500%;
max-width: 1000px;
margin: auto;
}
.example-full-width {
width: 100%;
}
.form-group-width {
max-width: 800px;
}
.group-width{
max-width: 400px;
}
.card-body{
background-color: #edeff7;
height: 50px;
align-content: center;
margin-right: 10px !important;
}
\ No newline at end of file
src/app/etablissement/view-etablissement/dialog-etablissement/dialog-etablissement.component.ts
...@@ -5,6 +5,7 @@ import { ...@@ -5,6 +5,7 @@ import {
FormGroup, FormGroup,
FormsModule, FormsModule,
ReactiveFormsModule, ReactiveFormsModule,
Validators,
} from '@angular/forms'; } 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';
...@@ -49,12 +50,42 @@ import { AuthService } from 'src/app/_helpers/services/auth.service'; ...@@ -49,12 +50,42 @@ import { AuthService } from 'src/app/_helpers/services/auth.service';
styleUrl: './dialog-etablissement.component.scss', styleUrl: './dialog-etablissement.component.scss',
}) })
export class DialogEtablissementComponent { export class DialogEtablissementComponent {
form: FormGroup; onSubmit() {
throw new Error('Method not implemented.');
}
onCancel() {
throw new Error('Method not implemented.');
}
establishmentForm: FormGroup;
countries = [ countries = [
{ value: 'CI', viewValue: "Cote d'ivoire" }, { value: 'CI', viewValue: "Cote d'ivoire" },
{ value: 'SN', viewValue: 'Senegal' }, { value: 'SN', viewValue: 'Senegal' },
// Ajoutez les autres pays ici { 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' },
];
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; hide = true;
...@@ -64,7 +95,7 @@ export class DialogEtablissementComponent { ...@@ -64,7 +95,7 @@ export class DialogEtablissementComponent {
fonctions: any; fonctions: any;
services: any; services: any;
groupes: any; groupes: any;
isChecked: any; isChecked!: boolean;
country: any; country: any;
constructor( constructor(
...@@ -73,24 +104,22 @@ export class DialogEtablissementComponent { ...@@ -73,24 +104,22 @@ export class DialogEtablissementComponent {
private dialogRef: MatDialogRef<DialogEtablissementComponent>, private dialogRef: MatDialogRef<DialogEtablissementComponent>,
private router: Router private router: Router
) { ) {
this.form = this.fb.group({ this.establishmentForm = this.fb.group({
nom: [''], name: ['', Validators.required],
website: [''], website: [''],
logo: [''], logo: [''],
phone: [''], phone: [''],
country: [''], country: ['', Validators.required],
city: [''], city: [''],
address: [''], address: ['', Validators.required],
business: [false], business: [false],
businessSelect: [''], businessSelect: [''],
schoolLevels: this.fb.group({
maternelle: this.fb.array([]),
primaire: this.fb.array([]),
college: this.fb.array([]),
lycee: this.fb.array([]),
}),
}); });
} }
onSubmit() {
throw new Error('Method not implemented.');
}
businessOptions: any;
onCancel() {
throw new Error('Method not implemented.');
}
} }
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>
......
src/app/etablissement/view-etablissement/view-etablissement.component.scss
.card {
border-radius:0 !important;
background-color: #ffffff61;
}
.text {
color:black;
font-weight: bold;
font-size: 16px; /* Ajustez la taille de la police selon vos besoins */
}
.bold-text { .bold-text {
color:rgb(0, 0, 0); color:rgb(0, 0, 0);
font-weight: bold; font-weight: bold;
font-size: 16px; /* Ajustez la taille de la police selon vos besoins */ font-size: 16px; /* Ajustez la taille de la police selon vos besoins */
} }
.col-md-2 {
flex: 0 0 auto;
width: 33% !important;
}
button ,a {
border-radius: 0px !important;
}
.example-form {
width: 500%;
max-width: 1000px;
margin: auto;
}
.example-full-width {
width: 100%;
}
.form-group-width {
max-width: 800px;
}
.group-width{
max-width: 400px;
}
src/app/etablissement/view-etablissement/view-etablissement.component.ts
...@@ -163,7 +163,7 @@ export class ViewEtablissementComponent { ...@@ -163,7 +163,7 @@ export class ViewEtablissementComponent {
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(DialogEtablissementComponent, { const dialogRef = this.dialog.open(DialogEtablissementComponent, {
width: '800px', width: '1000px',
height: '1000px', height: '1000px',
}); });
} }
......
src/app/tpe/ajout-tpe/ajout-tpe.component.scss
...@@ -14,10 +14,3 @@ ...@@ -14,10 +14,3 @@
button{ button{
border-radius:0px !important border-radius:0px !important
} }
// .mat-mdc-dialog-container .mdc-dialog__surface {
// width: 0px !important;
// height: 0px !important;
// }
//div.
\ No newline at end of file
src/app/tpe/create-tpe/create-tpe.component.html
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<mat-card-content> <mat-card-content>
<form [formGroup]="myForm" (ngSubmit)="onSubmit()"> <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<div class="row"> <div class="row">
<div class="col-md-6 form-field"> <div class="col-12">
<mat-form-field appearance="outline" class="full-width"> <mat-form-field appearance="outline" class="full-width">
<mat-label>Groupe</mat-label> <mat-label>Groupe</mat-label>
<mat-select formControlName="groupe" required> <mat-select formControlName="groupe" required>
...@@ -24,7 +24,10 @@ ...@@ -24,7 +24,10 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-md-6 form-field"> </div>
<div class="row">
<div class="col-12">
<mat-form-field appearance="outline" class="full-width"> <mat-form-field appearance="outline" class="full-width">
<mat-label>Service</mat-label> <mat-label>Service</mat-label>
<mat-select formControlName="service" required> <mat-select formControlName="service" required>
...@@ -44,7 +47,7 @@ ...@@ -44,7 +47,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6 form-field"> <div class="col-12">
<mat-form-field appearance="outline" class="full-width"> <mat-form-field appearance="outline" class="full-width">
<mat-label>Nom</mat-label> <mat-label>Nom</mat-label>
<input matInput placeholder="Nom" formControlName="nom" required /> <input matInput placeholder="Nom" formControlName="nom" required />
...@@ -56,7 +59,10 @@ ...@@ -56,7 +59,10 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-md-6 form-field"> </div>
<div class="row">
<div class="col-12">
<mat-form-field appearance="outline" class="full-width"> <mat-form-field appearance="outline" class="full-width">
<mat-label>Fonction</mat-label> <mat-label>Fonction</mat-label>
<mat-select formControlName="fonction" required> <mat-select formControlName="fonction" required>
...@@ -76,7 +82,7 @@ ...@@ -76,7 +82,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6 form-field"> <div class="col-12 ">
<mat-form-field appearance="outline" class="full-width"> <mat-form-field appearance="outline" class="full-width">
<mat-label>Activite</mat-label> <mat-label>Activite</mat-label>
<mat-select formControlName="activite" required> <mat-select formControlName="activite" required>
...@@ -93,7 +99,10 @@ ...@@ -93,7 +99,10 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-md-6 form-field"> </div>
<div class="row">
<div class="col-12">
<mat-form-field appearance="outline" class="full-width"> <mat-form-field appearance="outline" class="full-width">
<mat-label>Solde</mat-label> <mat-label>Solde</mat-label>
<input <input
...@@ -113,13 +122,13 @@ ...@@ -113,13 +122,13 @@
</div> </div>
<div class="row" id="rowStatus"> <div class="row" id="rowStatus">
<div class="col-md-6 form-field" id="statusId"> <div class="col-12" id="statusId">
<mat-slide-toggle <mat-slide-toggle
color="primary" color="primary"
[(ngModel)]="isChecked" [(ngModel)]="isChecked"
labelPosition="before"> labelPosition="before">
Statut</mat-slide-toggle Statut
> </mat-slide-toggle>
</div> </div>
</div> </div>
......
src/app/tpe/create-tpe/create-tpe.component.ts
...@@ -70,7 +70,7 @@ export class CreateTpeComponent { ...@@ -70,7 +70,7 @@ export class CreateTpeComponent {
} }
hide = true; hide = true;
public myForm!: FormGroup; public myForm!: FormGroup;
constructor( constructor(
private fb: FormBuilder, private fb: FormBuilder,
......
src/app/tpe/gerer-mes-tpe/gerer-mes-tpe.component.html
...@@ -71,8 +71,10 @@ ...@@ -71,8 +71,10 @@
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">
Ajouter <mat-icon>add</mat-icon>
Ajouter un TPE
</button> </button>
</div> </div>
<div <div
......
src/app/utilisateurs/view-user/view-user.component.html
...@@ -96,14 +96,6 @@ ...@@ -96,14 +96,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="reference">
<mat-header-cell *matHeaderCellDef mat-sort-header class="bold-text"
>Réference</mat-header-cell
>
<mat-cell *matCellDef="let transaction">{{
transaction.reference
}}</mat-cell>
</ng-container> -->
<ng-container matColumnDef="role"> <ng-container matColumnDef="role">
<mat-header-cell <mat-header-cell
...@@ -139,11 +131,7 @@ ...@@ -139,11 +131,7 @@
>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 href="#" class="m-2" [routerLink]="['view-user']"
><mat-icon style="color: blue" title="Voir"
>remove_red_eye</mat-icon
></a
> -->
<a <a
href="#" href="#"
class="m-2" class="m-2"
...@@ -171,4 +159,4 @@ ...@@ -171,4 +159,4 @@
</div> </div>
</div> </div>
</div> </div>
<!-- </div> -->
src/styles.scss
...@@ -441,8 +441,10 @@ tr.mat-mdc-row { ...@@ -441,8 +441,10 @@ tr.mat-mdc-row {
border-radius: 0px !important; border-radius: 0px !important;
width: auto !important; width: auto !important;
height: auto !important; height: auto !important;
margin-top: -500px !important; margin: auto !important; // koffi sayni
margin-left: -300px !important; position: absolute !important;
// margin-top: 50px !important;
// margin-left: -300px !important;
} }
...@@ -749,4 +751,7 @@ bgui-loader[bgui-loader] { ...@@ -749,4 +751,7 @@ bgui-loader[bgui-loader] {
mat-row:hover { mat-row:hover {
background-color: #f5f5f5 !important; /* Couleur de fond lors du survol */ background-color: #f5f5f5 !important; /* Couleur de fond lors du survol */
cursor: pointer !important; /* Changer le curseur pour indiquer que la ligne est interactable */ cursor: pointer !important; /* Changer le curseur pour indiquer que la ligne est interactable */
} }
\ No newline at end of file
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