Skip to content

Commit

Permalink
Revert "Feature/mf 1.2.3 modif search list user"" (#208)
Browse files Browse the repository at this point in the history 
* Revert "Revert "Feature/mf 1.2.3 modif search list user" (#207)"

This reverts commit 1ebff81.

* mf 1.2.3

modif html.

* MF 1.2.3 

modif css padding et interval
  • Loading branch information
@MarcF06110
MarcF06110 authored Apr 16, 2020
1 parent 1ebff81 commit 161c70f
Show file tree
Hide file tree
Showing 2 changed files with 131 additions and 124 deletions.
158 changes: 79 additions & 79 deletions skillful_network_client/src/app/home/users-list/users-list.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,79 @@

<div class ="user-list" class = "mat-elevation-z8">
<mat-card>

<mat-card-header id="title">
<div fxLayout="row" fxLayout.xs="column">
<div fxFlex="70%">
<mat-card-title id="title_police" layout-align="start center">Liste des utilisateurs</mat-card-title>
</div>
<div fxFlex="30%">
<div class="recherche" *ngIf="!isLoading">

<form [formGroup]="search" (ngSubmit)=" onSearchByFirstNameOrLastName() "
class="form-group">
<mat-form-field appearance="legacy">
<mat-label>Recherche par Nom ou Prénom</mat-label>
<mat-icon matSuffix>search</mat-icon>
<input formControlName="keyword" type="textarea" matInput
placeholder="Recherche" >
<mat-hint>Appuyez sur Entrée après saisie</mat-hint>
</mat-form-field>
</form>
</div>
</div>
</div>
<hr>
</mat-card-header>



<mat-card-content *ngIf="!isLoading">
<div fxLayoutAlign="center center">
<div class="mat-elevation-z3 table-container">
<table mat-table [dataSource]="dataSource" (matSortChange)="change($event)" matSort>

<!-- Name Column -->

<ng-container matColumnDef="firstName">
<mat-header-cell *matHeaderCellDef mat-sort-header> Prénom </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.firstName}} </mat-cell>
</ng-container>

<ng-container matColumnDef="lastName">
<mat-header-cell *matHeaderCellDef mat-sort-header> Nom </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.lastName}} </mat-cell>
</ng-container>

<ng-container matColumnDef="birthDate">
<mat-header-cell *matHeaderCellDef mat-sort-header> Date de naissance </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.birthDate | date: "dd/MM/yyyy"}}</mat-cell>
</ng-container>

<ng-container matColumnDef="details">

<mat-header-cell *matHeaderCellDef> Details </mat-header-cell>
<mat-cell *matCellDef="let user"> <a [routerLink]="['/home/user/'+user.id]" ><mat-icon >visibility</mat-icon> </a></mat-cell>

</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</table>
<mat-paginator
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(page)="change($event)"
[hidePageSize]="hidePageSize"
[showFirstLastButtons]="showFirstLastButtons"
[length]="length"
class="mat-paginator-container">
</mat-paginator>
</div>
</div>
</mat-card-content>
</mat-card>

</div>
<div class="progressBarDiv" *ngIf="isLoading" ><mat-progress-spinner class="is-loading" mode="indeterminate"></mat-progress-spinner></div>

<div class ="user-list" class = "mat-elevation-z8">
<mat-card>

<mat-card-header id="title">
<div fxLayout="row" fxLayout.xs="column">
<div fxFlex="70%">
<mat-card-title id="title_police" layout-align="start center">Liste des utilisateurs</mat-card-title>
</div>
<div fxFlex="30%">
<div class="recherche" *ngIf="!isLoading">

<form [formGroup]="search" (ngSubmit)=" onSearchByFirstNameOrLastName() "
class="form-group">
<mat-form-field appearance="legacy">
<mat-label>Recherche par Nom ou Prénom</mat-label>
<mat-icon matSuffix>search</mat-icon>
<input formControlName="keyword" type="textarea" matInput
placeholder="Recherche" >
<mat-hint>Appuyez sur Entrée après saisie</mat-hint>
</mat-form-field>
</form>
</div>
</div>
</div>
<hr>
</mat-card-header>



<mat-card-content *ngIf="!isLoading">
<div fxLayoutAlign="center center">
<div class="mat-elevation-z3 table-container">
<table mat-table [dataSource]="dataSource" (matSortChange)="change($event)" matSort>

<!-- Name Column -->

<ng-container matColumnDef="firstName">
<mat-header-cell *matHeaderCellDef mat-sort-header> Prénom </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.firstName}} </mat-cell>
</ng-container>

<ng-container matColumnDef="lastName">
<mat-header-cell *matHeaderCellDef mat-sort-header> Nom </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.lastName}} </mat-cell>
</ng-container>

<ng-container matColumnDef="birthDate">
<mat-header-cell *matHeaderCellDef mat-sort-header> Date de naissance </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.birthDate | date: "dd/MM/yyyy"}}</mat-cell>
</ng-container>

<ng-container matColumnDef="details">

<mat-header-cell *matHeaderCellDef> Details </mat-header-cell>
<mat-cell *matCellDef="let user"> <a [routerLink]="['/home/user/'+user.id]" ><mat-icon >visibility</mat-icon> </a></mat-cell>

</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</table>
<mat-paginator
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(page)="change($event)"
[hidePageSize]="hidePageSize"
[showFirstLastButtons]="showFirstLastButtons"
[length]="length"
class="mat-paginator-container">
</mat-paginator>
</div>
</div>
</mat-card-content>
</mat-card>

</div>
<div class="progressBarDiv" *ngIf="isLoading" ><mat-progress-spinner class="is-loading" mode="indeterminate"></mat-progress-spinner></div>

97 changes: 52 additions & 45 deletions skillful_network_client/src/app/home/users-list/users-list.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,64 @@
.user-list{
width: 85%;
margin: auto;
padding-top: 60px;
h1 {
text-align: center;
}
h1{
text-align: center;
}

table {
width: 100%;
margin: auto;
text-align: center;
}

mat-header-cell, mat-cell {
justify-content: center;
}

a {
color:black;
}
table {
width: 100%;
text-align: center;
}

mat-header-cell, mat-cell {
justify-content: center;
}

a {
color: black;
}

.mat-card-header {
display: block;
}

.mat-card-title {
text-align: center;
margin-left: 30%;
margin-top: 1rem;
}

.mat-form-field {
font-size: 14px;
padding: 10px;
width: 400px;
width: 300px;
}

td, th {
width: 20%;
}

.btnIcon {
color: black;
margin-top: 7px;
}

.table-container {
width: 80%;
}

td, th {
width: 20%;
}
.btnIcon {
color:black;
margin-top: 7px;
}

.table-container {
width: 80%;
}

.cursor {
cursor: pointer;
}
cursor: pointer;
}

.boutonSearch {
display: none;
}

.progressBarDiv {
margin-top: 12%;
}

.is-loading {
margin: 0 auto;
}

.boutonSearch{
display: none;
}
.progressBarDiv {
margin-top: 12%;
}
.is-loading{
margin:0 auto;
}
@media screen and (max-width: 640px) {

.mat-form-field {
Expand Down

0 comments on commit 161c70f

Please sign in to comment.