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="row">
<div class="col-md-3">
......@@ -127,18 +52,29 @@
</div>
</div>
</div>
<!-- -->
<mat-tab-group class="mb-4 border-2">
<mat-tab-group>
<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>
<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>Liste des utilisateurs</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">
<button
class="btn btn-secondary m-5"
style="border-radius: 15px">
Exporter <i class="fa fa-download m-1"></i>
</button>
</div>
......@@ -151,21 +87,21 @@
</div>
<div
class="example-container mat-elevation-z8"
style="margin-top: 40px">
style="margin-top: 40px; overflow-x: hidden">
<mat-form-field appearance="outline">
<mat-label>Filtrer</mat-label>
<mat-label>Filter</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. John Doe"
placeholder="Ex. ium"
#input />
</mat-form-field>
<table
mat-table
[dataSource]="dataSource"
matSort
class="mat-elevation-z8">
class="mat-elevation-z8"
style="width: 100%">
<!-- Groupe Column -->
<ng-container matColumnDef="classes">
<mat-header-cell
......@@ -230,10 +166,6 @@
<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)">
......@@ -259,7 +191,8 @@
</table>
<mat-paginator
[pageSizeOptions]="[5, 10, 50, 100, 200]"
showFirstLastButtons></mat-paginator>
showFirstLastButtons>
</mat-paginator>
</div>
</div>
</div>
......
src/app/etablissement/etablissement.component.html
<!-- <mat-card appearance="outlined">
<mat-card-content>Simple card</mat-card-content>
</mat-card> -->
<!-- <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/view-etablissement']"
>Etablissement</a
>
</li>
</ol>
</nav>
</div>
</div>
</div> -->
<router-outlet></router-outlet>
<mat-card class="w-100">
<mat-card-content>
<router-outlet></router-outlet>
</mat-card-content>
</mat-card>
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.html
<!-- <mat-card-content>
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<mat-card-subtitle style="text-align: center; font-weight: bolder">
<h3 style="padding: 10px; margin-bottom: 20px">Ajouter un établissement</h3>
</mat-card-subtitle>
<mat-card-content>
<form [formGroup]="establishmentForm" (ngSubmit)="onSubmit()">
<div class="row">
<div class="col-md-6 form-field">
<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="
myForm.controls['name'].invalid && myForm.controls['name'].touched
establishmentForm.controls['name'].invalid &&
establishmentForm.controls['name'].touched
">
Name is required
</mat-error>
</mat-form-field>
</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-label>Website</mat-label>
<input matInput placeholder="Website" formControlName="website" />
......@@ -22,13 +30,16 @@
</div>
<div class="row">
<div class="col-md-6 form-field">
<div class="col-12">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Logo</mat-label>
<input matInput placeholder="Logo" formControlName="logo" />
</mat-form-field>
</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-label>Phone</mat-label>
<input
......@@ -38,8 +49,8 @@
required />
<mat-error
*ngIf="
myForm.controls['phone'].invalid &&
myForm.controls['phone'].touched
establishmentForm.controls['phone'].invalid &&
establishmentForm.controls['phone'].touched
">
Phone is required
</mat-error>
......@@ -48,7 +59,7 @@
</div>
<div class="row">
<div class="col-md-6 form-field">
<div class="col-12">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Country</mat-label>
<input
......@@ -58,20 +69,24 @@
required />
<mat-error
*ngIf="
myForm.controls['country'].invalid &&
myForm.controls['country'].touched
establishmentForm.controls['country'].invalid &&
establishmentForm.controls['country'].touched
">
Country is required
</mat-error>
</mat-form-field>
</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-label>City</mat-label>
<input matInput placeholder="City" formControlName="city" required />
<mat-error
*ngIf="
myForm.controls['city'].invalid && myForm.controls['city'].touched
establishmentForm.controls['city'].invalid &&
establishmentForm.controls['city'].touched
">
City is required
</mat-error>
......@@ -80,7 +95,7 @@
</div>
<div class="row">
<div class="col-md-12 form-field">
<div class="col-12">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Address</mat-label>
<input
......@@ -90,8 +105,8 @@
required />
<mat-error
*ngIf="
myForm.controls['address'].invalid &&
myForm.controls['address'].touched
establishmentForm.controls['address'].invalid &&
establishmentForm.controls['address'].touched
">
Address is required
</mat-error>
......@@ -100,171 +115,31 @@
</div>
<div class="row">
<div class="col-md-6 form-field">
<div class="col-12">
<mat-slide-toggle
color="primary"
formControlName="business"
labelPosition="before">
Business
Associer un business
</mat-slide-toggle>
</div>
<div class="col-md-6 form-field">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Business Select</mat-label>
<mat-select formControlName="businessSelect">
<mat-option
*ngFor="let option of businessOptions"
[value]="option"
>{{ option }}</mat-option
>
</mat-select>
</mat-form-field>
</div>
</div>
<mat-card-actions
class="d-flex justify-content-between"
id="card-actions-button">
<button
mat-button
type="button"
class="btn btn-danger"
(click)="onCancel()">
Cancel <mat-icon>cancel</mat-icon>
</button>
<button
mat-button
type="submit"
class="btn btn-success"
[disabled]="myForm.invalid">
Save <mat-icon>save</mat-icon>
</button>
</mat-card-actions>
</form>
</mat-card-content> -->
<div mat-card-avatar class="example-header-image"></div>
<mat-card-subtitle style="text-align: center; font-weight: bolder">
<h3 style="padding: 10px; margin-bottom: 20px">Ajouter un TPE</h3>
</mat-card-subtitle>
<mat-card-content>
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<div class="row">
<div class="col-md-6 form-field">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Nom de l'établissement</mat-label>
<input matInput placeholder="Nom" formControlName="nom" required />
<mat-error
*ngIf="
myForm.controls['nom'].invalid && myForm.controls['nom'].touched
">
Nom de l'établissement est obligatoire
</mat-error>
</mat-form-field>
</div>
<div class="col-md-6 form-field">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Site internet</mat-label>
<input
matInput
placeholder="Site web"
formControlName="website"
required />
<mat-error
*ngIf="
myForm.controls['website'].invalid &&
myForm.controls['website'].touched
">
Site internet est obligatoire
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col-md-6 form-field">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Numéro de téléphone</mat-label>
<input
matInput
placeholder="Phone"
formControlName="phone"
required />
<mat-error
*ngIf="
myForm.controls['phone'].invalid &&
myForm.controls['phone'].touched
">
Numéro de téléphone est obligatoire
</mat-error>
</mat-form-field>
</div>
<div class="col-md-6 form-field">
<div class="col-12">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Pays</mat-label>
<mat-select formControlName="country" required>
<mat-option *ngFor="let count of country" [value]="country">{{
country
}}</mat-option>
<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-error
*ngIf="
myForm.controls['pays'].invalid && myForm.controls['pays'].touched
">
Pays est obligatoire
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col-md-6 form-field">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Ville</mat-label>
<input matInput placeholder="Ville" formControlName="city" required />
<mat-error
*ngIf="
myForm.controls['city'].invalid && myForm.controls['city'].touched
">
Ville est obligatoire
</mat-error>
</mat-form-field>
</div>
<div class="col-md-6 form-field">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Localisation</mat-label>
<input
matInput
placeholder="Address"
formControlName="address"
required />
<mat-error
*ngIf="
myForm.controls['address'].invalid &&
myForm.controls['address'].touched
">
Localisation obligatoire
</mat-error>
</mat-form-field>
</div>
</div>
<div class="row" id="rowStatus">
<div class="col-md-6 form-field" id="statusId">
<mat-slide-toggle
color="primary"
[(ngModel)]="isChecked"
labelPosition="before">
Statut</mat-slide-toggle
>
</div>
</div>
<mat-card-actions
class="d-flex justify-content-between"
id="card-actions-button">
......@@ -273,14 +148,14 @@
type="button"
class="btn btn-danger"
(click)="onCancel()">
Annuler <mat-icon>cancel</mat-icon>
Cancel <mat-icon>cancel</mat-icon>
</button>
<button
mat-button
type="submit"
class="btn btn-success"
[disabled]="myForm.invalid">
Enregistrer <mat-icon>save</mat-icon>
[disabled]="establishmentForm.invalid">
Save <mat-icon>save</mat-icon>
</button>
</mat-card-actions>
</form>
......
src/app/etablissement/view-etablissement/dialog-etablissement/dialog-etablissement.component.ts
......@@ -5,6 +5,7 @@ import {
FormGroup,
FormsModule,
ReactiveFormsModule,
Validators,
} from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
......@@ -49,12 +50,42 @@ import { AuthService } from 'src/app/_helpers/services/auth.service';
styleUrl: './dialog-etablissement.component.scss',
})
export class DialogEtablissementComponent {
form: FormGroup;
onSubmit() {
throw new Error('Method not implemented.');
}
onCancel() {
throw new Error('Method not implemented.');
}
establishmentForm: FormGroup;
countries = [
{ value: 'CI', viewValue: "Cote d'ivoire" },
{ 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;
......@@ -64,7 +95,7 @@ export class DialogEtablissementComponent {
fonctions: any;
services: any;
groupes: any;
isChecked: any;
isChecked!: boolean;
country: any;
constructor(
......@@ -73,24 +104,22 @@ export class DialogEtablissementComponent {
private dialogRef: MatDialogRef<DialogEtablissementComponent>,
private router: Router
) {
this.form = this.fb.group({
nom: [''],
this.establishmentForm = this.fb.group({
name: ['', Validators.required],
website: [''],
logo: [''],
phone: [''],
country: [''],
country: ['', Validators.required],
city: [''],
address: [''],
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([]),
}),
});
}
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="row">
<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 {
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;
}
src/app/etablissement/view-etablissement/view-etablissement.component.ts
......@@ -163,7 +163,7 @@ export class ViewEtablissementComponent {
public openDialog() {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const dialogRef = this.dialog.open(DialogEtablissementComponent, {
width: '800px',
width: '1000px',
height: '1000px',
});
}
......
src/app/tpe/ajout-tpe/ajout-tpe.component.scss
......@@ -14,10 +14,3 @@
button{
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 @@
<mat-card-content>
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<div class="row">
<div class="col-md-6 form-field">
<div class="col-12">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Groupe</mat-label>
<mat-select formControlName="groupe" required>
......@@ -24,7 +24,10 @@
</mat-error>
</mat-form-field>
</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-label>Service</mat-label>
<mat-select formControlName="service" required>
......@@ -44,7 +47,7 @@
</div>
<div class="row">
<div class="col-md-6 form-field">
<div class="col-12">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Nom</mat-label>
<input matInput placeholder="Nom" formControlName="nom" required />
......@@ -56,7 +59,10 @@
</mat-error>
</mat-form-field>
</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-label>Fonction</mat-label>
<mat-select formControlName="fonction" required>
......@@ -76,7 +82,7 @@
</div>
<div class="row">
<div class="col-md-6 form-field">
<div class="col-12 ">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Activite</mat-label>
<mat-select formControlName="activite" required>
......@@ -93,7 +99,10 @@
</mat-error>
</mat-form-field>
</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-label>Solde</mat-label>
<input
......@@ -113,13 +122,13 @@
</div>
<div class="row" id="rowStatus">
<div class="col-md-6 form-field" id="statusId">
<div class="col-12" id="statusId">
<mat-slide-toggle
color="primary"
[(ngModel)]="isChecked"
labelPosition="before">
Statut</mat-slide-toggle
>
Statut
</mat-slide-toggle>
</div>
</div>
......
src/app/tpe/create-tpe/create-tpe.component.ts
......@@ -70,7 +70,7 @@ export class CreateTpeComponent {
}
hide = true;
public myForm!: FormGroup;
public myForm!: FormGroup;
constructor(
private fb: FormBuilder,
......
src/app/tpe/gerer-mes-tpe/gerer-mes-tpe.component.html
......@@ -71,8 +71,10 @@
Exporter <i class="fa fa-download m-1"></i>
</button>
</div>
<button (click)="openDialog()" class="btn btn-sl btn-success m-5">
Ajouter
<mat-icon>add</mat-icon>
Ajouter un TPE
</button>
</div>
<div
......
src/app/utilisateurs/view-user/view-user.component.html
......@@ -96,14 +96,6 @@
<mat-cell *matCellDef="let user">{{ user.email }}</mat-cell>
</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">
<mat-header-cell
......@@ -139,11 +131,7 @@
>Actions</mat-header-cell
>
<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
href="#"
class="m-2"
......@@ -171,4 +159,4 @@
</div>
</div>
</div>
<!-- </div> -->
src/styles.scss
......@@ -441,8 +441,10 @@ tr.mat-mdc-row {
border-radius: 0px !important;
width: auto !important;
height: auto !important;
margin-top: -500px !important;
margin-left: -300px !important;
margin: auto !important; // koffi sayni
position: absolute !important;
// margin-top: 50px !important;
// margin-left: -300px !important;
}
......@@ -749,4 +751,7 @@ bgui-loader[bgui-loader] {
mat-row:hover {
background-color: #f5f5f5 !important; /* Couleur de fond lors du survol */
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