AlexandreRuiz
/
Collaborateur_Epa_Front
2
1
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity

changement des collaborateurs avec des classes BootStrap. Responsive. A valider.

Browse Source
pull/9/head
Clement FERRERE 3 years ago
parent 4e2297a9e3
commit ea72dbc48b
3 changed files with 102 additions and 57 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 130
      src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html
  2. 3
      src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.html
  3. 26
      src/app/components/collaborateur/collaborateur.component.html

130
src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html
Unescape View File

@ -1,54 +1,92 @@
<div *ngIf="collaborateur" style="overflow-x:auto;" class="mb-3">
<table class="mb-3">
<tr>
<th>Name</th>
<th>First Name</th>
<th>Birth Date</th>
<th>Gender</th>
<th>Status</th>
<th>Children Number</th>
<th>Address</th>
<th>Telephone</th>
<th>Personal Mail</th>
<th>Apside Mail</th>
<th>Resignation Date</th>
</tr>
<tr>
<td><input id="collaborateur-name" [(ngModel)]="collaborateur.name" placeholder="name"></td>
<td><input id="collaborateur-firstName" [(ngModel)]="collaborateur.firstName" placeholder="firstname"></td>
<td><input id="collaborateur-birthDate" [(ngModel)]="collaborateur.birthDate" placeholder="birthDate"></td>
<td><input id="collaborateur-gender" [(ngModel)]="collaborateur.gender" placeholder="gender"></td>
<td><input id="collaborateur-status" [(ngModel)]="collaborateur.status" placeholder="status"></td>
<td><input id="collaborateur-childrenNumber" [(ngModel)]="collaborateur.childrenNumber" placeholder="childrenNumber"></td>
<td><input id="collaborateur-address" [(ngModel)]="collaborateur.address" placeholder="address"></td>
<td><input id="collaborateur-telephone" [(ngModel)]="collaborateur.telephone" placeholder="telephone"></td>
<td><input id="collaborateur-personalMail" [(ngModel)]="collaborateur.personalMail" placeholder="personalMail"></td>
<td><input id="collaborateur-apsideMail" [(ngModel)]="collaborateur.apsideMail" placeholder="apsideMail"></td>
<td><input id="collaborateur-resignationDate" [(ngModel)]="collaborateur.resignationDate" placeholder="resignationDate"></td>
</tr>
</table>
<select name="referrer" id="referrer-select" [(ngModel)]="collaborateur.referrerId">
<option value="">-- Choisissez un référent pour le nouveau collaborateur --</option>
<option *ngFor="let collaborateur of collaborateurs" [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
</select>
<select name="businessunit" id="businessunit-select" [(ngModel)]="collaborateur.businessUnitId">
<option value="">-- Choisissez la Business Unit pour le nouveau collaborateur --</option>
<option *ngFor="let businessunit of businessunits" [ngValue]="businessunit.id">{{businessunit.name}} </option>
</select>
<br/>
<span>
*Tous les champs sont obligatoires
</span>
<div *ngIf="collaborateur" class="mb-3">
<div class="row mb-2">
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
<label for="collaborateur-name" class="form-label">Name</label>
<input class="form-control" id="collaborateur-name" [(ngModel)]="collaborateur.name" placeholder="name">
</div>
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
<label for="collaborateur-firstName" class="form-label">First Name</label>
<input class="form-control" id="collaborateur-firstName" [(ngModel)]="collaborateur.firstName" placeholder="firstname">
</div>
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
<label for="collaborateur-birthDate" class="form-label">Birth Date</label>
<input class="form-control" id="collaborateur-birthDate" [(ngModel)]="collaborateur.birthDate" placeholder="birthDate">
</div>
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
<label for="collaborateur-gender" class="form-label">Gender</label>
<input class="form-control" id="collaborateur-gender" [(ngModel)]="collaborateur.gender" placeholder="gender">
</div>
</div>
<div class="row mb-2">
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
<label for="collaborateur-status" class="form-label">Status</label>
<input class="form-control" id="collaborateur-status" [(ngModel)]="collaborateur.status" placeholder="status">
</div>
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
<label for="collaborateur-childrenNumber" class="form-label">Children Number</label>
<input class="form-control" id="collaborateur-childrenNumber" [(ngModel)]="collaborateur.childrenNumber" placeholder="childrenNumber">
</div>
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
<label for="collaborateur-address" class="form-label">Address</label>
<input class="form-control" id="collaborateur-address" [(ngModel)]="collaborateur.address" placeholder="address">
</div>
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
<label for="collaborateur-telephone" class="form-label">Telephone</label>
<input class="form-control" id="collaborateur-telephone" [(ngModel)]="collaborateur.telephone" placeholder="telephone">
</div>
</div>
<div class="row mb-4">
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
<label for="collaborateur-personalMail" class="form-label">Personal Mail</label>
<input class="form-control" id="collaborateur-personalMail" [(ngModel)]="collaborateur.personalMail" placeholder="personalMail">
</div>
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
<label for="collaborateur-apsideMail" class="form-label">Apside Mail</label>
<input class="form-control" id="collaborateur-apsideMail" [(ngModel)]="collaborateur.apsideMail" placeholder="apsideMail">
</div>
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
<label for="collaborateur-resignationDate" class="form-label">Resignation Date</label>
<input class="form-control" id="collaborateur-resignationDate" [(ngModel)]="collaborateur.resignationDate" placeholder="resignationDate">
</div>
</div>
<div class="row">
<div class="form-group col-12 col-md-6">
<label class="form-label">Referrer</label>
<select class="form-select" name="referrer" id="referrer-select" [(ngModel)]="collaborateur.referrerId">
<option value="" disabled selected>Choisissez un référent pour le nouveau collaborateur</option>
<option *ngFor="let collaborateur of collaborateurs" [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
</select>
</div>
<div class="form-group col-12 col-md-6">
<label class="form-label">Business Unit</label>
<select class="form-select" name="businessunit" id="businessunit-select" [(ngModel)]="collaborateur.businessUnitId">
<option value="" disabled selected>Choisissez la Business Unit pour le nouveau collaborateur</option>
<option *ngFor="let businessunit of businessunits" [ngValue]="businessunit.id">{{businessunit.name}} </option>
</select>
</div>
</div>
<br/>
<span>
*Tous les champs sont obligatoires
</span>
</div>

3
src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.html
Unescape View File

@ -2,7 +2,8 @@
<div *ngIf="collaborateur">
<h2>{{collaborateur.name | uppercase}} {{collaborateur.firstName | uppercase}} </h2>
<div><span>id : </span>{{collaborateur.id}}</div>
<div><label class="form-label">id : </label>{{collaborateur.id}}</div>
<app-collaborateur-detail [collaborateur]="collaborateur"></app-collaborateur-detail>

26
src/app/components/collaborateur/collaborateur.component.html
Unescape View File

@ -2,19 +2,25 @@
<h2 class = mb-4>Collaborateurs</h2>
<div style="overflow-x:auto;" class="mb-5">
<table >
<tr>
<th class="spaced">Name</th>
<th class="spaced">First Name</th>
<th class="spaced">Apside Mail</th>
</tr>
<table class="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">First Name</th>
<th scope="col">Apside Mail</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let collaborateur of collaborateurs">
<td class="spaced"> {{collaborateur.name}} </td>
<td class="spaced"> {{collaborateur.firstName}} </td>
<td class="spaced"> {{collaborateur.apsideMail}} </td>
<td class="spaced"> <a routerLink="{{collaborateur.id}}"> Modifier </a></td>
<th scope="row">{{collaborateur.id}}</th>
<td> {{collaborateur.name}} </td>
<td> {{collaborateur.firstName}} </td>
<td> {{collaborateur.apsideMail}} </td>
<td> <a routerLink="{{collaborateur.id}}"> Modifier </a></td>
</tr>
</tbody>
</table>
</div>

Write Preview
Loading…
Cancel
Save