Création des maquettes du document EPS

master
Yanaël GRETTE 4 years ago
parent 182a7ea0b5
commit 9a7aa4f234
  1. 7
      angular.json
  2. 29
      package-lock.json
  3. 3
      package.json
  4. 53
      src/app/angular-material.module.ts
  5. 534
      src/app/app.component.html
  6. 2
      src/app/app.component.ts
  7. 24
      src/app/app.module.ts
  8. 16
      src/app/collaborateur/apside/apside.css
  9. 141
      src/app/collaborateur/apside/apside.html
  10. 16
      src/app/collaborateur/apside/apside.ts
  11. 9
      src/app/collaborateur/collaborateur.html
  12. 15
      src/app/collaborateur/collaborateur.ts
  13. 22
      src/app/collaborateur/competences/competence-dialog.html
  14. 32
      src/app/collaborateur/competences/competences.css
  15. 185
      src/app/collaborateur/competences/competences.html
  16. 64
      src/app/collaborateur/competences/competences.ts
  17. 6
      src/app/collaborateur/index.ts
  18. 17
      src/app/collaborateur/mission/mission.css
  19. 183
      src/app/collaborateur/mission/mission.html
  20. 16
      src/app/collaborateur/mission/mission.ts
  21. 15
      src/app/collaborateur/objectifs-prec/objectifs-prec.css
  22. 61
      src/app/collaborateur/objectifs-prec/objectifs-prec.html
  23. 16
      src/app/collaborateur/objectifs-prec/objectifs-prec.ts
  24. 12
      src/app/collaborateur/objectifs/objectifs.css
  25. 22
      src/app/collaborateur/objectifs/objectifs.html
  26. 16
      src/app/collaborateur/objectifs/objectifs.ts
  27. 3
      src/app/referent/apside/apside.css
  28. 23
      src/app/referent/apside/apside.html
  29. 32
      src/app/referent/apside/apside.ts
  30. 0
      src/app/referent/commentaire/commentaire.css
  31. 0
      src/app/referent/commentaire/commentaire.html
  32. 16
      src/app/referent/commentaire/commentaire.ts
  33. 15
      src/app/referent/competences/competences.css
  34. 41
      src/app/referent/competences/competences.html
  35. 53
      src/app/referent/competences/competences.ts
  36. 32
      src/app/referent/engagement/engagement-dialog.html
  37. 3
      src/app/referent/engagement/engagement.css
  38. 34
      src/app/referent/engagement/engagement.html
  39. 57
      src/app/referent/engagement/engagement.ts
  40. 19
      src/app/referent/formation/formation-dialog.html
  41. 7
      src/app/referent/formation/formation.css
  42. 24
      src/app/referent/formation/formation.html
  43. 54
      src/app/referent/formation/formation.ts
  44. 9
      src/app/referent/index.ts
  45. 20
      src/app/referent/mission/mission.css
  46. 61
      src/app/referent/mission/mission.html
  47. 32
      src/app/referent/mission/mission.ts
  48. 9
      src/app/referent/objectifs-prec/objectifs-prec.css
  49. 28
      src/app/referent/objectifs-prec/objectifs-prec.html
  50. 30
      src/app/referent/objectifs-prec/objectifs-prec.ts
  51. 21
      src/app/referent/objectifs/objectifs.css
  52. 32
      src/app/referent/objectifs/objectifs.html
  53. 16
      src/app/referent/objectifs/objectifs.ts
  54. 11
      src/app/referent/referent.html
  55. 15
      src/app/referent/referent.ts
  56. 8
      src/app/referent/salaire/salaire.css
  57. 14
      src/app/referent/salaire/salaire.html
  58. 14
      src/app/referent/salaire/salaire.ts
  59. 2
      src/index.html
  60. 3
      src/styles.css

@ -24,6 +24,7 @@
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css"
],
"scripts": []
@ -88,6 +89,7 @@
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css"
],
"scripts": []
@ -119,6 +121,7 @@
}
}
}
}},
}
},
"defaultProject": "DocumentEPS"
}
}

29
package-lock.json generated

@ -200,11 +200,35 @@
}
}
},
"@angular-material-components/datetime-picker": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/@angular-material-components/datetime-picker/-/datetime-picker-2.0.4.tgz",
"integrity": "sha512-3nXGFz7GXbFYeBI2/72rcmPFTWtcC1ERlgdkaY+65dFHXPIc8hKGv6o+JbtCoYPg7xmVCCy4xhmOgfd/CFGyOw==",
"requires": {
"tslib": "^1.9.0"
}
},
"@angular/animations": {
"version": "9.1.12",
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.1.12.tgz",
"integrity": "sha512-tphpf9QHnOPoL2Jl7KpR+R5aHNW3oifLEmRUTajJYJGvo1uzdUDE82+V9OGOinxJsYseCth9gYJhN24aYTB9NA=="
},
"@angular/cdk": {
"version": "9.2.4",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-9.2.4.tgz",
"integrity": "sha512-iw2+qHMXHYVC6K/fttHeNHIieSKiTEodVutZoOEcBu9rmRTGbLB26V/CRsfIRmA1RBk+uFYWc6UQZnMC3RdnJQ==",
"requires": {
"parse5": "^5.0.0"
},
"dependencies": {
"parse5": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
"integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
"optional": true
}
}
},
"@angular/cli": {
"version": "9.1.12",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.12.tgz",
@ -449,6 +473,11 @@
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-9.1.12.tgz",
"integrity": "sha512-LhjnZlC4WEsEsAJfOZLte+Lks3WBAFVeRv2lzoQNFVr/IMzBNDVfjEaaSqKF1cei3cjY39Df2nYDMJM7HfqbJA=="
},
"@angular/material": {
"version": "9.2.4",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-9.2.4.tgz",
"integrity": "sha512-LkoTXE6B0slvMhvfZDdPWaz4yaYLkaAp5VSPunI9pxGsPxzqEV9e210wC1/sjG/76Nk8Ep7/2z9XKac8Q9bMwA=="
},
"@angular/platform-browser": {
"version": "9.1.12",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-9.1.12.tgz",

@ -11,11 +11,14 @@
},
"private": true,
"dependencies": {
"@angular-material-components/datetime-picker": "^2.0.4",
"@angular/animations": "~9.1.9",
"@angular/cdk": "^9.2.4",
"@angular/common": "~9.1.9",
"@angular/compiler": "~9.1.9",
"@angular/core": "~9.1.9",
"@angular/forms": "~9.1.9",
"@angular/material": "^9.2.4",
"@angular/platform-browser": "~9.1.9",
"@angular/platform-browser-dynamic": "~9.1.9",
"@angular/router": "~9.1.9",

@ -0,0 +1,53 @@
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import {MatCardModule} from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import {MatInputModule} from '@angular/material/input';
import {MatIconModule} from '@angular/material/icon';
import {MatMenuModule} from '@angular/material/menu';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatTableModule} from '@angular/material/table';
import {MatSortModule} from '@angular/material/sort';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatTabsModule} from '@angular/material/tabs';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatNativeDateModule} from '@angular/material/core';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatSelectModule} from '@angular/material/select';
import {MatListModule} from '@angular/material/list';
import {MatDialogModule} from '@angular/material/dialog';
import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateModule } from '@angular-material-components/datetime-picker';
/**
* Module qui va faire l'import et l'export de tous les componsants material design qui seront utilisés dans l'application.
*/
@NgModule({
imports : [MatCardModule,
MatButtonModule, MatMenuModule,
MatIconModule, MatPaginatorModule,
MatSortModule, MatTableModule,
MatInputModule, MatProgressSpinnerModule,
MatTabsModule, MatFormFieldModule,
NgxMatDatetimePickerModule, MatDatepickerModule,
NgxMatNativeDateModule, MatNativeDateModule,
MatCheckboxModule, MatSelectModule,
MatListModule, MatDialogModule
],
exports : [MatCardModule,
MatButtonModule, MatMenuModule,
MatIconModule, MatPaginatorModule,
MatSortModule, MatTableModule,
MatInputModule, MatProgressSpinnerModule,
MatTabsModule, MatFormFieldModule,
NgxMatDatetimePickerModule, MatDatepickerModule,
NgxMatNativeDateModule, MatNativeDateModule,
MatCheckboxModule, MatSelectModule,
MatListModule, MatDialogModule
]
})
export class MaterialModule {}

@ -1,532 +1,2 @@
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<style>
:host {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
color: #333;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 8px 0;
}
p {
margin: 0;
}
.spacer {
flex: 1;
}
.toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
display: flex;
align-items: center;
background-color: #1976d2;
color: white;
font-weight: 600;
}
.toolbar img {
margin: 0 16px;
}
.toolbar #twitter-logo {
height: 40px;
margin: 0 16px;
}
.toolbar #twitter-logo:hover {
opacity: 0.8;
}
.content {
display: flex;
margin: 82px auto 32px;
padding: 0 16px;
max-width: 960px;
flex-direction: column;
align-items: center;
}
svg.material-icons {
height: 24px;
width: auto;
}
svg.material-icons:not(:last-child) {
margin-right: 8px;
}
.card svg.material-icons path {
fill: #888;
}
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 16px;
}
.card {
border-radius: 4px;
border: 1px solid #eee;
background-color: #fafafa;
height: 40px;
width: 200px;
margin: 0 8px 16px;
padding: 16px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
transition: all 0.2s ease-in-out;
line-height: 24px;
}
.card-container .card:not(:last-child) {
margin-right: 0;
}
.card.card-small {
height: 16px;
width: 168px;
}
.card-container .card:not(.highlight-card) {
cursor: pointer;
}
.card-container .card:not(.highlight-card):hover {
transform: translateY(-3px);
box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
}
.card-container .card:not(.highlight-card):hover .material-icons path {
fill: rgb(105, 103, 103);
}
.card.highlight-card {
background-color: #1976d2;
color: white;
font-weight: 600;
border: none;
width: auto;
min-width: 30%;
position: relative;
}
.card.card.highlight-card span {
margin-left: 60px;
}
svg#rocket {
width: 80px;
position: absolute;
left: -10px;
top: -24px;
}
svg#rocket-smoke {
height: calc(100vh - 95px);
position: absolute;
top: 10px;
right: 180px;
z-index: -10;
}
a,
a:visited,
a:hover {
color: #1976d2;
text-decoration: none;
}
a:hover {
color: #125699;
}
.terminal {
position: relative;
width: 80%;
max-width: 600px;
border-radius: 6px;
padding-top: 45px;
margin-top: 8px;
overflow: hidden;
background-color: rgb(15, 15, 16);
}
.terminal::before {
content: "\2022 \2022 \2022";
position: absolute;
top: 0;
left: 0;
height: 4px;
background: rgb(58, 58, 58);
color: #c2c3c4;
width: 100%;
font-size: 2rem;
line-height: 0;
padding: 14px 0;
text-indent: 4px;
}
.terminal pre {
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
color: white;
padding: 0 1rem 1rem;
margin: 0;
}
.circle-link {
height: 40px;
width: 40px;
border-radius: 40px;
margin: 8px;
background-color: white;
border: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: 1s ease-out;
}
.circle-link:hover {
transform: translateY(-0.25rem);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}
footer {
margin-top: 8px;
display: flex;
align-items: center;
line-height: 20px;
}
footer a {
display: flex;
align-items: center;
}
.github-star-badge {
color: #24292e;
display: flex;
align-items: center;
font-size: 12px;
padding: 3px 10px;
border: 1px solid rgba(27,31,35,.2);
border-radius: 3px;
background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
margin-left: 4px;
font-weight: 600;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}
.github-star-badge:hover {
background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
border-color: rgba(27,31,35,.35);
background-position: -.5em;
}
.github-star-badge .material-icons {
height: 16px;
width: 16px;
margin-right: 4px;
}
svg#clouds {
position: fixed;
bottom: -160px;
left: -230px;
z-index: -10;
width: 1920px;
}
/* Responsive Styles */
@media screen and (max-width: 767px) {
.card-container > *:not(.circle-link) ,
.terminal {
width: 100%;
}
.card:not(.highlight-card) {
height: 16px;
margin: 8px 0;
}
.card.highlight-card span {
margin-left: 72px;
}
svg#rocket-smoke {
right: 120px;
transform: rotate(-5deg);
}
}
@media screen and (max-width: 575px) {
svg#rocket-smoke {
display: none;
visibility: hidden;
}
}
</style>
<!-- Toolbar -->
<div class="toolbar" role="banner">
<img
width="40"
alt="Angular Logo"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
/>
<span>Welcome</span>
<div class="spacer"></div>
<a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
<svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<rect width="400" height="400" fill="none"/>
<path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
</svg>
</a>
</div>
<div class="content" role="main">
<!-- Highlight Card -->
<div class="card highlight-card card-small">
<svg id="rocket" alt="Rocket Ship" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
<g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
<circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)" fill="#dd0031"/>
<g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
<path id="Path_33" data-name="Path 33" d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" transform="translate(0.371 3.363)" fill="#fff"/>
<path id="Path_34" data-name="Path 34" d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" transform="translate(0 0.005)" fill="#fff"/>
</g>
</g>
</svg>
<span>{{ title }} app is running!</span>
<svg id="rocket-smoke" alt="Rocket Ship Smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
<path id="Path_40" data-name="Path 40" d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z" transform="translate(-147.025 -140.939)" fill="#f5f5f5"/>
</svg>
</div>
<!-- Resources -->
<h2>Resources</h2>
<p>Here are some links to help you get started:</p>
<div class="card-container">
<a class="card" target="_blank" rel="noopener" href="https://angular.io/tutorial">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
<span>Learn Angular</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg> </a>
<a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
<span>CLI Documentation</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
</a>
<a class="card" target="_blank" rel="noopener" href="https://blog.angular.io/">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>
<span>Angular Blog</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
</a>
</div>
<!-- Next Steps -->
<h2>Next Steps</h2>
<p>What do you want to do next with your app?</p>
<input type="hidden" #selection>
<div class="card-container">
<div class="card card-small" (click)="selection.value = 'component'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>New Component</span>
</div>
<div class="card card-small" (click)="selection.value = 'material'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Angular Material</span>
</div>
<div class="card card-small" (click)="selection.value = 'pwa'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Add PWA Support</span>
</div>
<div class="card card-small" (click)="selection.value = 'dependency'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Add Dependency</span>
</div>
<div class="card card-small" (click)="selection.value = 'test'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Run and Watch Tests</span>
</div>
<div class="card card-small" (click)="selection.value = 'build'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Build for Production</span>
</div>
</div>
<!-- Terminal -->
<div class="terminal" [ngSwitch]="selection.value">
<pre *ngSwitchDefault>ng generate component xyz</pre>
<pre *ngSwitchCase="'material'">ng add @angular/material</pre>
<pre *ngSwitchCase="'pwa'">ng add @angular/pwa</pre>
<pre *ngSwitchCase="'dependency'">ng add _____</pre>
<pre *ngSwitchCase="'test'">ng test</pre>
<pre *ngSwitchCase="'build'">ng build --prod</pre>
</div>
<!-- Links -->
<div class="card-container">
<a class="circle-link" title="Animations" href="https://angular.io/guide/animations" target="_blank" rel="noopener">
<svg id="Group_20" data-name="Group 20" xmlns="http://www.w3.org/2000/svg" width="21.813" height="23.453" viewBox="0 0 21.813 23.453">
<path id="Path_15" data-name="Path 15" d="M4099.584,972.736h0l-10.882,3.9,1.637,14.4,9.245,5.153,9.245-5.153,1.686-14.4Z" transform="translate(-4088.702 -972.736)" fill="#ffa726"/>
<path id="Path_16" data-name="Path 16" d="M4181.516,972.736v23.453l9.245-5.153,1.686-14.4Z" transform="translate(-4170.633 -972.736)" fill="#fb8c00"/>
<path id="Path_17" data-name="Path 17" d="M4137.529,1076.127l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1058.315)" fill="#ffe0b2"/>
<path id="Path_18" data-name="Path 18" d="M4137.529,1051.705l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1036.757)" fill="#fff3e0"/>
<path id="Path_19" data-name="Path 19" d="M4137.529,1027.283l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1015.199)" fill="#fff"/>
</svg>
</a>
<a class="circle-link" title="CLI" href="https://cli.angular.io/" target="_blank" rel="noopener">
<svg alt="Angular CLI Logo" xmlns="http://www.w3.org/2000/svg" width="21.762" height="23.447" viewBox="0 0 21.762 23.447">
<g id="Group_21" data-name="Group 21" transform="translate(0)">
<path id="Path_20" data-name="Path 20" d="M2660.313,313.618h0l-10.833,3.9,1.637,14.4,9.2,5.152,9.244-5.152,1.685-14.4Z" transform="translate(-2649.48 -313.618)" fill="#37474f"/>
<path id="Path_21" data-name="Path 21" d="M2741.883,313.618v23.447l9.244-5.152,1.685-14.4Z" transform="translate(-2731.05 -313.618)" fill="#263238"/>
<path id="Path_22" data-name="Path 22" d="M2692.293,379.169h11.724V368.618h-11.724Zm11.159-.6h-10.608v-9.345h10.621v9.345Z" transform="translate(-2687.274 -362.17)" fill="#fff"/>
<path id="Path_23" data-name="Path 23" d="M2709.331,393.688l.4.416,2.265-2.28-2.294-2.294-.4.4,1.893,1.893Z" transform="translate(-2702.289 -380.631)" fill="#fff"/>
<rect id="Rectangle_12" data-name="Rectangle 12" width="3.517" height="0.469" transform="translate(9.709 13.744)" fill="#fff"/>
</g>
</svg>
</a>
<a class="circle-link" title="Augury" href="https://augury.rangle.io/" target="_blank" rel="noopener">
<svg alt="Angular Augury Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21.81" height="23.447" viewBox="0 0 21.81 23.447">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_13" data-name="Rectangle 13" width="10.338" height="10.27" fill="none"/>
</clipPath>
</defs>
<g id="Group_25" data-name="Group 25" transform="translate(0)">
<path id="Path_24" data-name="Path 24" d="M3780.155,311.417h0l-10.881,3.9,1.637,14.4,9.244,5.152,9.244-5.152,1.685-14.4Z" transform="translate(-3769.274 -311.417)" fill="#4a3493"/>
<path id="Path_25" data-name="Path 25" d="M3862.088,311.417v23.447l9.244-5.152,1.685-14.4Z" transform="translate(-3851.207 -311.417)" fill="#311b92"/>
<g id="Group_24" data-name="Group 24" transform="translate(6.194 6.73)" opacity="0.5">
<g id="Group_23" data-name="Group 23" transform="translate(0 0)">
<g id="Group_22" data-name="Group 22" clip-path="url(#clip-path)">
<path id="Path_26" data-name="Path 26" d="M3832.4,373.252a5.168,5.168,0,1,1-5.828-4.383,5.216,5.216,0,0,1,2.574.3,3.017,3.017,0,1,0,3.252,4.086Z" transform="translate(-3822.107 -368.821)" fill="#fff"/>
</g>
</g>
</g>
<path id="Path_27" data-name="Path 27" d="M3830.582,370.848a5.162,5.162,0,1,1-3.254-4.086,3.017,3.017,0,1,0,3.252,4.086Z" transform="translate(-3814.311 -359.969)" fill="#fff"/>
</g>
</svg>
</a>
<a class="circle-link" title="Protractor" href="https://www.protractortest.org/" target="_blank" rel="noopener">
<svg alt="Angular Protractor Logo" xmlns="http://www.w3.org/2000/svg" width="21.81" height="23.447" viewBox="0 0 21.81 23.447">
<g id="Group_26" data-name="Group 26" transform="translate(0)">
<path id="Path_28" data-name="Path 28" d="M4620.155,311.417h0l-10.881,3.9,1.637,14.4,9.244,5.152,9.244-5.152,1.685-14.4Z" transform="translate(-4609.274 -311.417)" fill="#e13439"/>
<path id="Path_29" data-name="Path 29" d="M4702.088,311.417v23.447l9.244-5.152,1.685-14.4Z" transform="translate(-4691.207 -311.417)" fill="#b52f32"/>
<path id="Path_30" data-name="Path 30" d="M4651.044,369.58v-.421h1.483a7.6,7.6,0,0,0-2.106-5.052l-1.123,1.123-.3-.3,1.122-1.121a7.588,7.588,0,0,0-4.946-2.055v1.482h-.421v-1.485a7.589,7.589,0,0,0-5.051,2.058l1.122,1.121-.3.3-1.123-1.123a7.591,7.591,0,0,0-2.106,5.052h1.482v.421h-1.489v1.734h15.241V369.58Zm-10.966-.263a4.835,4.835,0,0,1,9.67,0Z" transform="translate(-4634.008 -355.852)" fill="#fff"/>
</g>
</svg>
</a>
<a class="circle-link" title="Find a Local Meetup" href="https://www.meetup.com/find/?keywords=angular" target="_blank" rel="noopener">
<svg alt="Meetup Logo" xmlns="http://www.w3.org/2000/svg" width="24.607" height="23.447" viewBox="0 0 24.607 23.447">
<path id="logo--mSwarm" d="M21.221,14.95A4.393,4.393,0,0,1,17.6,19.281a4.452,4.452,0,0,1-.8.069c-.09,0-.125.035-.154.117a2.939,2.939,0,0,1-2.506,2.091,2.868,2.868,0,0,1-2.248-.624.168.168,0,0,0-.245-.005,3.926,3.926,0,0,1-2.589.741,4.015,4.015,0,0,1-3.7-3.347,2.7,2.7,0,0,1-.043-.38c0-.106-.042-.146-.143-.166a3.524,3.524,0,0,1-1.516-.69A3.623,3.623,0,0,1,2.23,14.557a3.66,3.66,0,0,1,1.077-3.085.138.138,0,0,0,.026-.2,3.348,3.348,0,0,1-.451-1.821,3.46,3.46,0,0,1,2.749-3.28.44.44,0,0,0,.355-.281,5.072,5.072,0,0,1,3.863-3,5.028,5.028,0,0,1,3.555.666.31.31,0,0,0,.271.03A4.5,4.5,0,0,1,18.3,4.7a4.4,4.4,0,0,1,1.334,2.751,3.658,3.658,0,0,1,.022.706.131.131,0,0,0,.1.157,2.432,2.432,0,0,1,1.574,1.645,2.464,2.464,0,0,1-.7,2.616c-.065.064-.051.1-.014.166A4.321,4.321,0,0,1,21.221,14.95ZM13.4,14.607a2.09,2.09,0,0,0,1.409,1.982,4.7,4.7,0,0,0,1.275.221,1.807,1.807,0,0,0,.9-.151.542.542,0,0,0,.321-.545.558.558,0,0,0-.359-.534,1.2,1.2,0,0,0-.254-.078c-.262-.047-.526-.086-.787-.138a.674.674,0,0,1-.617-.75,3.394,3.394,0,0,1,.218-1.109c.217-.658.509-1.286.79-1.918a15.609,15.609,0,0,0,.745-1.86,1.95,1.95,0,0,0,.06-1.073,1.286,1.286,0,0,0-1.051-1.033,1.977,1.977,0,0,0-1.521.2.339.339,0,0,1-.446-.042c-.1-.092-.2-.189-.307-.284a1.214,1.214,0,0,0-1.643-.061,7.563,7.563,0,0,1-.614.512A.588.588,0,0,1,10.883,8c-.215-.115-.437-.215-.659-.316a2.153,2.153,0,0,0-.695-.248A2.091,2.091,0,0,0,7.541,8.562a9.915,9.915,0,0,0-.405.986c-.559,1.545-1.015,3.123-1.487,4.7a1.528,1.528,0,0,0,.634,1.777,1.755,1.755,0,0,0,1.5.211,1.35,1.35,0,0,0,.824-.858c.543-1.281,1.032-2.584,1.55-3.875.142-.355.28-.712.432-1.064a.548.548,0,0,1,.851-.24.622.622,0,0,1,.185.539,2.161,2.161,0,0,1-.181.621c-.337.852-.68,1.7-1.018,2.552a2.564,2.564,0,0,0-.173.528.624.624,0,0,0,.333.71,1.073,1.073,0,0,0,.814.034,1.22,1.22,0,0,0,.657-.655q.758-1.488,1.511-2.978.35-.687.709-1.37a1.073,1.073,0,0,1,.357-.434.43.43,0,0,1,.463-.016.373.373,0,0,1,.153.387.7.7,0,0,1-.057.236c-.065.157-.127.316-.2.469-.42.883-.846,1.763-1.262,2.648A2.463,2.463,0,0,0,13.4,14.607Zm5.888,6.508a1.09,1.09,0,0,0-2.179.006,1.09,1.09,0,0,0,2.179-.006ZM1.028,12.139a1.038,1.038,0,1,0,.01-2.075,1.038,1.038,0,0,0-.01,2.075ZM13.782.528a1.027,1.027,0,1,0-.011,2.055A1.027,1.027,0,0,0,13.782.528ZM22.21,6.95a.882.882,0,0,0-1.763.011A.882.882,0,0,0,22.21,6.95ZM4.153,4.439a.785.785,0,1,0,.787-.78A.766.766,0,0,0,4.153,4.439Zm8.221,18.22a.676.676,0,1,0-.677.666A.671.671,0,0,0,12.374,22.658ZM22.872,12.2a.674.674,0,0,0-.665.665.656.656,0,0,0,.655.643.634.634,0,0,0,.655-.644A.654.654,0,0,0,22.872,12.2ZM7.171-.123A.546.546,0,0,0,6.613.43a.553.553,0,1,0,1.106,0A.539.539,0,0,0,7.171-.123ZM24.119,9.234a.507.507,0,0,0-.493.488.494.494,0,0,0,.494.494.48.48,0,0,0,.487-.483A.491.491,0,0,0,24.119,9.234Zm-19.454,9.7a.5.5,0,0,0-.488-.488.491.491,0,0,0-.487.5.483.483,0,0,0,.491.479A.49.49,0,0,0,4.665,18.936Z" transform="translate(0 0.123)" fill="#f64060"/>
</svg>
</a>
<a class="circle-link" title="Join the Conversation on Gitter" href="https://gitter.im/angular/angular" target="_blank" rel="noopener">
<svg alt="Gitter Logo" xmlns="http://www.w3.org/2000/svg" width="19.447" height="19.447" viewBox="0 0 19.447 19.447">
<g id="Group_40" data-name="Group 40" transform="translate(-1612 -405)">
<rect id="Rectangle_19" data-name="Rectangle 19" width="19.447" height="19.447" transform="translate(1612 405)" fill="#e60257"/>
<g id="gitter" transform="translate(1617.795 408.636)">
<g id="Group_33" data-name="Group 33" transform="translate(0 0)">
<rect id="Rectangle_15" data-name="Rectangle 15" width="1.04" height="9.601" transform="translate(2.304 2.324)" fill="#fff"/>
<rect id="Rectangle_16" data-name="Rectangle 16" width="1.04" height="9.601" transform="translate(4.607 2.324)" fill="#fff"/>
<rect id="Rectangle_17" data-name="Rectangle 17" width="1.04" height="4.648" transform="translate(6.91 2.324)" fill="#fff"/>
<rect id="Rectangle_18" data-name="Rectangle 18" width="1.04" height="6.971" transform="translate(0 0)" fill="#fff"/>
</g>
</g>
</g>
</svg>
</a>
</div>
<!-- Footer -->
<footer>
Love Angular?&nbsp;
<a href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star.
<div class="github-star-badge">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
Star
</div>
</a>
<a href="https://github.com/angular/angular" target="_blank" rel="noopener">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</a>
</footer>
<svg id="clouds" alt="Gray Clouds Background" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
<path id="Path_39" data-name="Path 39" d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" transform="translate(142.69 -634.312)" fill="#eee"/>
</svg>
</div>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<collaborateur *ngIf="collaborateur"></collaborateur>
<referent *ngIf="referent"></referent>

@ -7,4 +7,6 @@ import { Component } from '@angular/core';
})
export class AppComponent {
title = 'DocumentEPS';
collaborateur = true;
referent = !this.collaborateur;
}

@ -2,13 +2,33 @@ import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CollaborateurComponent, ApsideComponent, CompetencesComponent, MissionComponent,
ObjectifsComponent, ObjectifsPrecComponent, CompetenceDialog } from './collaborateur';
import { ReferentComponent, ApsideRefComponent, CompetencesRefComponent,
MissionRefComponent, ObjectifsRefComponent, ObjectifsPrecRefComponent,
EngagementDialog, EngagementComponent, SalaireComponent, FormationDialog,
FormationComponent} from './referent';
import { MaterialModule } from './angular-material.module';
@NgModule({
declarations: [
AppComponent
AppComponent, CollaborateurComponent, ReferentComponent,
ApsideComponent, CompetencesComponent, MissionComponent,
ObjectifsComponent, ObjectifsPrecComponent, ApsideRefComponent,
CompetencesRefComponent, MissionRefComponent, ObjectifsRefComponent,
ObjectifsPrecRefComponent, CompetenceDialog, EngagementComponent,
EngagementDialog, SalaireComponent, FormationDialog, FormationComponent
],
imports: [
BrowserModule
BrowserModule,
BrowserAnimationsModule,
MaterialModule
],
providers: [],
bootstrap: [AppComponent]

@ -0,0 +1,16 @@
.zone {
margin-top: 1%;
}
.moveright {
margin-left: 2%;
}
.commentaire {
width: 40%
}
form {
margin-left: 1%;
}

@ -0,0 +1,141 @@
<form>
<div class="zone">
<mat-label>Relation avec la structure</mat-label>
<mat-form-field class="moveright input">
<mat-label>Note de 0 à 5</mat-label>
<mat-select>
<mat-option value="0">0</mat-option>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
<mat-option value="5">5</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-form-field class="commentaire" appearance="fill">
<textarea matInput placeholder="Commentaire"></textarea>
</mat-form-field>
</div>
<div class="zone">
<mat-label>Sentiment d’écoute</mat-label>
<mat-form-field class="moveright input">
<mat-label>Note de 0 à 5</mat-label>
<mat-select>
<mat-option value="0">0</mat-option>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
<mat-option value="5">5</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-form-field class="commentaire" appearance="fill">
<textarea matInput placeholder="Commentaire"></textarea>
</mat-form-field>
</div>
<div class="zone">
<mat-label>Perception de la stratégie de développement</mat-label>
<mat-form-field class="moveright input">
<mat-label>Note de 0 à 5</mat-label>
<mat-select>
<mat-option value="0">0</mat-option>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
<mat-option value="5">5</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-form-field class="commentaire" appearance="fill">
<textarea matInput placeholder="Commentaire"></textarea>
</mat-form-field>
</div>
<div class="zone">
<mat-label>Esprit d’entreprise</mat-label>
<mat-form-field class="moveright input">
<mat-label>Note de 0 à 5</mat-label>
<mat-select>
<mat-option value="0">0</mat-option>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
<mat-option value="5">5</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-form-field class="commentaire" appearance="fill">
<textarea matInput placeholder="Commentaire"></textarea>
</mat-form-field>
</div>
<div class="zone">
<mat-label>Transparence de l’information</mat-label>
<mat-form-field class="moveright input">
<mat-label>Note de 0 à 5</mat-label>
<mat-select>
<mat-option value="0">0</mat-option>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
<mat-option value="5">5</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-form-field class="commentaire" appearance="fill">
<textarea matInput placeholder="Commentaire"></textarea>
</mat-form-field>
</div>
<div class="zone">
<mat-label>Politique de formation</mat-label>
<mat-form-field class="moveright input">
<mat-label>Note de 0 à 5</mat-label>
<mat-select>
<mat-option value="0">0</mat-option>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
<mat-option value="5">5</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-form-field class="commentaire" appearance="fill">
<textarea matInput placeholder="Commentaire"></textarea>
</mat-form-field>
</div>
<div class="zone">
<mat-label>Satisfaction Apisde</mat-label>
<mat-form-field class="moveright input">
<mat-label>Note de 0 à 5</mat-label>
<mat-select>
<mat-option value="0">0</mat-option>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
<mat-option value="5">5</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-form-field class="commentaire" appearance="fill">
<textarea matInput placeholder="Commentaire"></textarea>
</mat-form-field>
</div>
</form>

@ -0,0 +1,16 @@
import { Component, OnInit } from '@angular/core';
/**
*/
@Component({
selector: 'apside',
templateUrl: './apside.html',
styleUrls: ['./apside.css']
})
export class ApsideComponent implements OnInit {
constructor() {}
ngOnInit() {
}
}

@ -0,0 +1,9 @@
<h3>Saisie EPS collaborateur</h3>
<mat-tab-group mat-align-tabs="start">
<mat-tab label="Objectifs de l'EP précédent"><objectifs-prec></objectifs-prec></mat-tab>
<mat-tab label="Mission/Projet"><mission></mission></mat-tab>
<mat-tab label="Compétences"><competences></competences></mat-tab>
<mat-tab label="Apside"><apside></apside></mat-tab>
<mat-tab label="Objectifs"><objectifs></objectifs></mat-tab>
</mat-tab-group>

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
/**
*/
@Component({
selector: 'collaborateur',
templateUrl: './collaborateur.html'
})
export class CollaborateurComponent implements OnInit {
constructor() {}
ngOnInit() {
}
}

@ -0,0 +1,22 @@
<form>
<div>
<mat-form-field class="input">
<mat-label>Nouvelle compétence</mat-label>
<input matInput>
</mat-form-field>
</div>
<div>
<mat-form-field class="moveright">
<mat-label>Note de 1 à 4</mat-label>
<mat-select>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
</mat-select>
</mat-form-field>
</div>
<button mat-raised-button>Ajouter</button>
<button mat-raised-button class="moverightbutton">Annuler</button>
</form>

@ -0,0 +1,32 @@
mat-tab-group {
margin-top: 1%;
}
.moveright {
margin-left: 1%;
}
span {
font-size: smaller;
display: block;
}
.add_button {
font-size: 40px;
}
.movebottom {
margin-top: 1%;
}
mat-icon {
margin-top: 1%;
}
.input {
width: 100%;
}
.moverightbutton {
margin-left: 10%;
}

@ -0,0 +1,185 @@
<mat-tab-group mat-align-tabs="start">
<mat-tab label="Compétences Générales">
<span>Evaluation des compétences utilisées durant la mission/le projet</span>
<br>
<span>1 : ne maîtrise pas suffisamment, 2 : satisfaisant, 3 : maîtrise, 4 : expert </span>
<form>
<div>
<mat-label>Motivation</mat-label>
<mat-form-field class="moveright">
<mat-label>Note de 1 à 4</mat-label>
<mat-select>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-label>Adaptabilité</mat-label>
<mat-form-field class="moveright">
<mat-label>Note de 1 à 4</mat-label>
<mat-select>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-label>Force de proposition</mat-label>
<mat-form-field class="moveright">
<mat-label>Note de 1 à 4</mat-label>
<mat-select>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-label>Leadership</mat-label>
<mat-form-field class="moveright">
<mat-label>Note de 1 à 4</mat-label>
<mat-select>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-label>Ecoute</mat-label>
<mat-form-field class="moveright">
<mat-label>Note de 1 à 4</mat-label>
<mat-select>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-label>Prise de recul</mat-label>
<mat-form-field class="moveright">
<mat-label>Note de 1 à 4</mat-label>
<mat-select>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-label>Sens du service</mat-label>
<mat-form-field class="moveright">
<mat-label>Note de 1 à 4</mat-label>
<mat-select>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-label>Communication</mat-label>
<mat-form-field class="moveright">
<mat-label>Note de 1 à 4</mat-label>
<mat-select>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-label>Rigueur</mat-label>
<mat-form-field class="moveright">
<mat-label>Note de 1 à 4</mat-label>
<mat-select>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-label>Organisation</mat-label>
<mat-form-field class="moveright">
<mat-label>Note de 1 à 4</mat-label>
<mat-select>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
</mat-select>
</mat-form-field>
</div>
</form>
</mat-tab>
<mat-tab label="Compétences Techniques">
<span class="movebottom">Evaluation des compétences utilisées durant la mission/le projet (langage, métier, méthodes, outil, …)</span>
<br>
<span>1 : ne maîtrise pas suffisamment, 2 : satisfaisant, 3 : maîtrise, 4 : expert </span>
<mat-label>
Ajouter une compétence
<mat-icon aria-hidden="false" aria-label="Ajouter une autre compétence" class="add_button" on-click="openDialog()">add_circle_outline</mat-icon>
</mat-label>
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="competence">
<mat-header-cell *matHeaderCellDef>Objectifs</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.competence}} </mat-cell>
</ng-container>
<ng-container matColumnDef="note">
<mat-header-cell *matHeaderCellDef>Résultat</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.note}} </mat-cell>
</ng-container>
<ng-container matColumnDef="supprimer">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let row"> <mat-icon aria-hidden="false" aria-label="Supprimer la compétence">clear</mat-icon> </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</mat-tab>
</mat-tab-group>

@ -0,0 +1,64 @@
import { Component, OnInit } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
interface Competence {
competence:string;
note:number
}
@Component({
selector: 'competence-dialog',
templateUrl: 'competence-dialog.html',
styleUrls: ['./competences.css']
})
export class CompetenceDialog {
constructor(private dialogRef: MatDialogRef<CompetencesComponent>) {}
close() {
this.dialogRef.close();
}
}
const competencesTechniques : Competence[] = [
{ competence:"Angular 9", note:2},
{ competence:"ASP.Net Core", note:2},
{ competence:"Entity FrameWork Core", note:2},
{ competence:"Open API/SwaggerHub", note:3}/*,
{ competence:"Méthode Agile", note:2},
{ competence:"Git/Gitea", note:2},
{ competence:"Visual Code/ATOM/Visual Studio", note:3},
{ competence:"json-server", note:2},
{ competence:"Overleaf/LaTeX", note:2}*/
];
@Component({
selector: 'competences',
templateUrl: './competences.html',
styleUrls: ['./competences.css']
})
export class CompetencesComponent implements OnInit {
displayedColumns: string[] = ["competence","note", "supprimer"];
dataSource = competencesTechniques;
constructor( private dialog: MatDialog) {}
ngOnInit() {
}
openDialog(): void {
const dialogRef = this.dialog.open(CompetenceDialog, {
width: 'auto'
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
}

@ -0,0 +1,6 @@
export * from './apside/apside';
export * from './competences/competences';
export * from './mission/mission';
export * from './objectifs/objectifs';
export * from './objectifs-prec/objectifs-prec';
export * from './collaborateur';

@ -0,0 +1,17 @@
.moveright {
margin-left: 1%;
}
.input1 {
margin-top: 1%;
width: 40%;
}
.commentaire {
width: 40%;
}
form {
margin-left: 1%;
}

@ -0,0 +1,183 @@
<form>
<!--<mat-tab-group mat-align-tabs="start">
<mat-tab label="Avis">
</mat-tab>
<mat-tab label="Resseni">
</mat-tab>
</mat-tab-group>-->
<div>
<mat-form-field class="input1" appearance="fill">
<mat-label>Impression générale</mat-label>
<textarea matInput></textarea>
</mat-form-field>
</div>
<div>
<mat-form-field class="input1" appearance="fill">
<mat-label>Faits Marquants</mat-label>
<textarea matInput></textarea>
</mat-form-field>
</div>
<div>
<mat-form-field class="input1" appearance="fill">
<mat-label>Succès</mat-label>
<textarea matInput></textarea>
</mat-form-field>
</div>
<div>
<mat-form-field class="input1" appearance="fill">
<mat-label>Retours client/chef de projet</mat-label>
<textarea matInput></textarea>
</mat-form-field>
</div>
<div>
<mat-label>Difficultés</mat-label>
<mat-form-field class="moveright input">
<mat-label>Note de 0 à 5</mat-label>
<mat-select>
<mat-option value="0">0</mat-option>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
<mat-option value="5">5</mat-option>
</mat-select>
</mat-form-field>
<div>
<mat-form-field class="commentaire" appearance="fill">
<mat-label>Commentaire</mat-label>
<textarea matInput></textarea>
</mat-form-field>
</div>
</div>
<div>
<mat-label>Relation Client/Chef de projet </mat-label>
<mat-form-field class="moveright input">
<mat-label>Note de 0 à 5</mat-label>
<mat-select>
<mat-option value="0">0</mat-option>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
<mat-option value="5">5</mat-option>
</mat-select>
</mat-form-field>
<div>
<mat-form-field class="commentaire" appearance="fill">
<mat-label>Commentaire</mat-label>
<textarea matInput></textarea>
</mat-form-field>
</div>
</div>
<div>
<mat-label>Relation équipe </mat-label>
<mat-form-field class="moveright input">
<mat-label>Note de 0 à 5</mat-label>
<mat-select>
<mat-option value="0">0</mat-option>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
<mat-option value="5">5</mat-option>
</mat-select>
</mat-form-field>
<div>
<mat-form-field class="commentaire" appearance="fill">
<mat-label>Commentaire</mat-label>
<textarea matInput></textarea>
</mat-form-field>
</div>
</div>
<div>
<mat-label>Ambiance de travail </mat-label>
<mat-form-field class="moveright input">
<mat-label>Note de 0 à 5</mat-label>
<mat-select>
<mat-option value="0">0</mat-option>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
<mat-option value="5">5</mat-option>
</mat-select>
</mat-form-field>
<div>
<mat-form-field class="commentaire" appearance="fill">
<mat-label>Commentaire</mat-label>
<textarea matInput></textarea>
</mat-form-field>
</div>
</div>
<div>
<mat-label>Intérêt technique</mat-label>
<mat-form-field class="moveright input">
<mat-label>Note de 0 à 5</mat-label>
<mat-select>
<mat-option value="0">0</mat-option>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
<mat-option value="5">5</mat-option>
</mat-select>
</mat-form-field>
<div>
<mat-form-field class="commentaire" appearance="fill">
<mat-label>Commentaire</mat-label>
<textarea matInput></textarea>
</mat-form-field>
</div>
</div>
<div>
<mat-label>Intérêt fonctionnel</mat-label>
<mat-form-field class="moveright input">
<mat-label>Note de 0 à 5</mat-label>
<mat-select>
<mat-option value="0">0</mat-option>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
<mat-option value="5">5</mat-option>
</mat-select>
</mat-form-field>
<div>
<mat-form-field class="commentaire" appearance="fill">
<mat-label>Commentaire</mat-label>
<textarea matInput></textarea>
</mat-form-field>
</div>
</div>
<div>
<mat-label>Site géographique </mat-label>
<mat-form-field class="moveright input">
<mat-label>Note de 0 à 5</mat-label>
<mat-select>
<mat-option value="0">0</mat-option>
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
<mat-option value="3">3</mat-option>
<mat-option value="4">4</mat-option>
<mat-option value="5">5</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-form-field class="commentaire" appearance="fill">
<mat-label>Commentaire</mat-label>
<textarea matInput></textarea>
</mat-form-field>
</div>
</form>

@ -0,0 +1,16 @@
import { Component, OnInit } from '@angular/core';
/**
*/
@Component({
selector: 'mission',
templateUrl: './mission.html',
styleUrls: ['./mission.css']
})
export class MissionComponent implements OnInit {
constructor() {}
ngOnInit() {
}
}

@ -0,0 +1,15 @@
.moveright {
margin-left: 1%;
}
.commentaire {
width: 50%;
}
.objectif {
margin-top: 1%
}
form {
margin-left: 1%;
}

@ -0,0 +1,61 @@
<form>
<div class="objectif">
<div>
<mat-label>Devenir expert avec le framework Angular</mat-label>
<mat-form-field class="list-item moveright">
<mat-label>Résultat</mat-label>
<mat-select>
<mat-option value="Atteint">Atteint</mat-option>
<mat-option value="Partiellement atteint">Partiellement atteint</mat-option>
<mat-option value="Non tteint">Non atteint</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-form-field class="commentaire" appearance="fill">
<mat-label>Commentaire</mat-label>
<textarea matInput></textarea>
</mat-form-field>
</div>
</div>
<div class="objectif">
<div>
<mat-label>Communique efficacement avec l'ensemble des participants du projet</mat-label>
<mat-form-field class="list-item moveright">
<mat-label>Résultat</mat-label>
<mat-select>
<mat-option value="Atteint">Atteint</mat-option>
<mat-option value="Partiellement atteint">Partiellement atteint</mat-option>
<mat-option value="Non tteint">Non atteint</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-form-field class="commentaire" appearance="fill">
<mat-label>Commentaire</mat-label>
<textarea matInput></textarea>
</mat-form-field>
</div>
</div>
<div class="objectif">
<div>
<mat-label>Développer des connaissances de leadership</mat-label>
<mat-form-field class="list-item moveright">
<mat-label>Résultat</mat-label>
<mat-select>
<mat-option value="Atteint">Atteint</mat-option>
<mat-option value="Partiellement atteint">Partiellement atteint</mat-option>
<mat-option value="Non tteint">Non atteint</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-form-field class="commentaire" appearance="fill">
<mat-label>Commentaire</mat-label>
<textarea matInput></textarea>
</mat-form-field>
</div>
</div>
</form>

@ -0,0 +1,16 @@
import { Component, OnInit } from '@angular/core';
/**
*/
@Component({
selector: 'objectifs-prec',
templateUrl: './objectifs-prec.html',
styleUrls: ['objectifs-prec.css']
})
export class ObjectifsPrecComponent implements OnInit {
constructor() {}
ngOnInit() {
}
}

@ -0,0 +1,12 @@
.moveright {
margin-left: 1%;
}
.commentaire {
width: 50%;
margin-top: 2%
}
form {
margin-left: 1%;
}

@ -0,0 +1,22 @@
<form>
<div>
<mat-form-field class="commentaire" appearance="fill">
<mat-label>Nouvel objectif 1</mat-label>
<textarea matInput></textarea>
</mat-form-field>
</div>
<div>
<mat-form-field class="commentaire" appearance="fill">
<mat-label>Nouvel objectif 2</mat-label>
<textarea matInput></textarea>
</mat-form-field>
</div>
<div>
<mat-form-field class="commentaire" appearance="fill">
<mat-label>Nouvel objectif 3</mat-label>
<textarea matInput></textarea>
</mat-form-field>
</div>
</form>

@ -0,0 +1,16 @@
import { Component, OnInit } from '@angular/core';
/**
*/
@Component({
selector: 'objectifs',
templateUrl: './objectifs.html',
styleUrls: ['objectifs.css']
})
export class ObjectifsComponent implements OnInit {
constructor() {}
ngOnInit() {
}
}

@ -0,0 +1,3 @@
mat-table {
margin-top: 2%;
}

@ -0,0 +1,23 @@
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="objectif">
<mat-header-cell *matHeaderCellDef>Objectifs</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.objectif}} </mat-cell>
<mat-footer-cell *matFooterCellDef>Moyenne globale</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="resultat">
<mat-header-cell *matHeaderCellDef>Résultat</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.res}} </mat-cell>
<mat-footer-cell *matFooterCellDef>4</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="commentaire">
<mat-header-cell *matHeaderCellDef>Commentaire</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.comm}} </mat-cell>
<mat-footer-cell *matFooterCellDef></mat-footer-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
<mat-footer-row *matFooterRowDef="displayedColumns;"></mat-footer-row>
</mat-table>

@ -0,0 +1,32 @@
import { Component, OnInit } from '@angular/core';
interface ApsideNote {
objectif:string;
res:number;
comm:string;
}
const data: ApsideNote[] = [
{objectif:"Relation avec la structure" , res:4, comm:"Bonne entente avec la structure"},
{objectif:"Sentiment d’écoute" , res:5, comm:"Je trouve toujours les bonnes personnes pour répondre à mes questions et à mes besoins"},
{objectif:"Perception de la stratégie de développement" , res:5, comm:"C'est très bien"},
{objectif:"Esprit d’entreprise" , res:4, comm:"Bon esprit d'entreprise au sein d'Apside TOP"},
{objectif:"Transparence de l’information" , res:4, comm:"C'est bien"},
{objectif:"Politique de formation" , res:5, comm:"Oui"},
{objectif:"Satisfaction Apisde" , res:4, comm:"Satisfait globalement d'Apside"}
];
@Component({
selector: 'apside-ref',
templateUrl: './apside.html',
styleUrls: ['./apside.css']
})
export class ApsideRefComponent implements OnInit {
displayedColumns: string[] = ["objectif","resultat","commentaire"];
dataSource = data;
constructor() {}
ngOnInit() {
}
}

@ -0,0 +1,16 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'commentaire',
templateUrl: './commentaire.html',
styleUrls: ['./commentaire.css']
})
export class CommentaireComponent implements OnInit {
constructor() {}
ngOnInit() {
}
}

@ -0,0 +1,15 @@
mat-table {
margin-bottom: 3%;
}
mat-tab-group {
margin-top: 1%;
}
.moveright {
margin-left: 1%;
}
span {
font-size: smaller;
}

@ -0,0 +1,41 @@
<mat-tab-group mat-align-tabs="start">
<mat-tab label="Compétences Générales">
<span>Evaluation des compétences utilisées durant la mission/le projet</span>
<br>
<span>1 : ne maîtrise pas suffisamment, 2 : satisfaisant, 3 : maîtrise, 4 : expert </span>
<mat-table [dataSource]="dataSource1">
<ng-container matColumnDef="competence">
<mat-header-cell *matHeaderCellDef>Objectifs</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.competence}} </mat-cell>
</ng-container>
<ng-container matColumnDef="note">
<mat-header-cell *matHeaderCellDef>Résultat</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.note}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</mat-tab>
<mat-tab label="Compétences Techniques">
<span class="movebottom">Evaluation des compétences utilisées durant la mission/le projet (langage, métier, méthodes, outil, …)</span>
<br>
<span class="movebottom">1 : ne maîtrise pas suffisamment, 2 : satisfaisant, 3 : maîtrise, 4 : expert </span>
<mat-table [dataSource]="dataSource2">
<ng-container matColumnDef="competence">
<mat-header-cell *matHeaderCellDef>Objectifs</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.competence}} </mat-cell>
</ng-container>
<ng-container matColumnDef="note">
<mat-header-cell *matHeaderCellDef>Résultat</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.note}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</mat-tab>
</mat-tab-group>

@ -0,0 +1,53 @@
import { Component, OnInit } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
interface Competence {
competence:string;
note:number
}
const competencesGenerales : Competence[] = [
{ competence:"Motivation", note:3},
{ competence:"Adaptabilité", note:2},
{ competence:"Force de proposition", note:2},
{ competence:"Leadership", note:1},
{ competence:"Ecoute", note:3},
{ competence:"Prise de recul", note:2},
{ competence:"Sens du service", note:2},
{ competence:"Communication", note:3},
{ competence:"Rigueur", note:2},
{ competence:"Organisation", note:2}
];
const competencesTechniques : Competence[] = [
{ competence:"Angular 9", note:2},
{ competence:"ASP.Net Core", note:2},
{ competence:"Entity FrameWork Core", note:2},
{ competence:"Open API/SwaggerHub", note:3},
{ competence:"Méthode Agile", note:2},
{ competence:"Git/Gitea", note:2},
{ competence:"Visual Code/ATOM/Visual Studio", note:3},
{ competence:"json-server", note:2},
{ competence:"Overleaf/LaTeX", note:2}
];
/**
*/
@Component({
selector: 'competences-ref',
templateUrl: './competences.html',
styleUrls: ['./competences.css']
})
export class CompetencesRefComponent implements OnInit {
displayedColumns: string[] = ["competence","note"];
dataSource1 = competencesGenerales;
dataSource2 = competencesTechniques;
constructor() {}
ngOnInit() {
}
}

@ -0,0 +1,32 @@
<form>
<div>
<mat-form-field class="input">
<mat-label>Action</mat-label>
<input matInput>
</mat-form-field>
</div>
<div>
<mat-form-field class="input">
<mat-label>Dispositif</mat-label>
<input matInput>
</mat-form-field>
</div>
<div>
<mat-form-field class="moveright">
<mat-label>modalité</mat-label>
<mat-select>
<mat-option value="Hors-temps">Hors-temps</mat-option>
<mat-option value="Sur le temps de travail">Sur le temps de travail</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-form-field>
<input matInput [matDatepicker]="datefin" placeholder="Date prévisionnelle">
<mat-datepicker-toggle matSuffix [for]="datefin"> </mat-datepicker-toggle>
<mat-datepicker #datefin></mat-datepicker>
</mat-form-field>
</div>
<button mat-raised-button>Ajouter</button>
<button mat-raised-button class="moverightbutton">Annuler</button>
</form>

@ -0,0 +1,3 @@
.moverightbutton {
margin-left: 10%;
}

@ -0,0 +1,34 @@
<mat-label>
Ajouter un engagement
<mat-icon aria-hidden="false" aria-label="Ajouter une autre compétence" class="add_button" on-click="openDialog()">add_circle_outline</mat-icon>
</mat-label>
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef>Action</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.action}} </mat-cell>
</ng-container>
<ng-container matColumnDef="dispositif">
<mat-header-cell *matHeaderCellDef>Dispositif</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.dispositif}} </mat-cell>
</ng-container>
<ng-container matColumnDef="modalite">
<mat-header-cell *matHeaderCellDef>Modalité</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.modalite}} </mat-cell>
</ng-container>
<ng-container matColumnDef="date">
<mat-header-cell *matHeaderCellDef>Date prévisionnelle</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.date | date:'dd/MM/yyyy'}} </mat-cell>
</ng-container>
<ng-container matColumnDef="supprimer">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let row"> <mat-icon aria-hidden="false" aria-label="Supprimer la compétence">clear</mat-icon> </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

@ -0,0 +1,57 @@
import { Component, OnInit } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
interface Engagement {
action:string;
dispositif:string;
modalite: string;
date: Date;
}
@Component({
selector: 'engagement-dialog',
templateUrl: 'engagement-dialog.html',
styleUrls: ['./engagement.css']
})
export class EngagementDialog {
constructor(private dialogRef: MatDialogRef<EngagementComponent>) {}
close() {
this.dialogRef.close();
}
}
const engagements : Engagement[] = [
{action:"Action A", dispositif:"Dispositif A", modalite:"Hors-temps", date:new Date("2020/11/08")},
{action:"Action B", dispositif:"Dispositif B", modalite:"Hors-temps", date:new Date("2020/09/30")},
{action:"Action C", dispositif:"Dispositif C", modalite:"Sur temps de travail", date:new Date("2021/01/15")},
];
@Component({
selector: 'engagement',
templateUrl: './engagement.html',
styleUrls: ['./engagement.css']
})
export class EngagementComponent implements OnInit {
displayedColumns: string[] = ["action","dispositif", "modalite", "date", "supprimer"];
dataSource = engagements;
constructor( private dialog: MatDialog) {}
ngOnInit() {
}
openDialog(): void {
const dialogRef = this.dialog.open(EngagementDialog, {
width: 'auto'
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
}

@ -0,0 +1,19 @@
<form>
<div>
<mat-label>Thème</mat-label>
<mat-form-field class="moverightbutton">
<mat-select>
<mat-option value="Développement">Développement</mat-option>
<mat-option value="Management">Management</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-form-field appearance="fill">
<mat-label>Description</mat-label>
<textarea matInput class="input"></textarea>
</mat-form-field>
</div>
<button mat-raised-button>Ajouter</button>
<button mat-raised-button class="moverightbutton">Annuler</button>
</form>

@ -0,0 +1,7 @@
.moverightbutton {
margin-left: 10%;
}
.input {
width: 100%;
}

@ -0,0 +1,24 @@
<mat-label>
Ajouter une demande de formation
<mat-icon aria-hidden="false" aria-label="Ajouter une autre compétence" class="add_button" on-click="openDialog()">add_circle_outline</mat-icon>
</mat-label>
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="theme">
<mat-header-cell *matHeaderCellDef>Thème</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.theme}} </mat-cell>
</ng-container>
<ng-container matColumnDef="description">
<mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
</ng-container>
<ng-container matColumnDef="supprimer">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let row"> <mat-icon aria-hidden="false" aria-label="Supprimer la compétence">clear</mat-icon> </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

@ -0,0 +1,54 @@
import { Component, OnInit } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
interface Formation {
theme: string;
description:string;
}
@Component({
selector: 'formation-dialog',
templateUrl: 'formation-dialog.html',
styleUrls: ['./formation.css']
})
export class FormationDialog {
constructor(private dialogRef: MatDialogRef<FormationComponent>) {}
close() {
this.dialogRef.close();
}
}
const formations : Formation[] = [
{theme:"Management", description:"Formation sur la gestion d'une équipe de projet"},
{theme:"Développement", description:"Formation Angular"}
];
@Component({
selector: 'formation',
templateUrl: './formation.html',
styleUrls: ['./formation.css']
})
export class FormationComponent implements OnInit {
displayedColumns: string[] = ["theme","description", "supprimer"];
dataSource = formations;
constructor( private dialog: MatDialog) {}
ngOnInit() {
}
openDialog(): void {
const dialogRef = this.dialog.open(FormationDialog, {
width: 'auto'
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
}

@ -0,0 +1,9 @@
export * from './apside/apside';
export * from './competences/competences';
export * from './mission/mission';
export * from './objectifs/objectifs';
export * from './objectifs-prec/objectifs-prec';
export * from './referent';
export * from './engagement/engagement';
export * from './formation/formation';
export * from './salaire/salaire';

@ -0,0 +1,20 @@
.moveright {
margin-left: 1%;
}
.label {
display: block;
}
.input1 {
margin-top: 1%;
width: 50%;
}
.commentaire {
width: 50%
}
mat-table {
margin-bottom: 3%;
}

@ -0,0 +1,61 @@
<!--<mat-tab-group mat-align-tabs="start">
<mat-tab label="Avis">
</mat-tab>
<mat-tab label="Ressenti">
</mat-tab>
</mat-tab-group>-->
<div>
<mat-label class="label">Impression générale</mat-label>
<mat-form-field class="input1" appearance="fill">
<textarea matInput disabled="true"></textarea>
</mat-form-field>
</div>
<div>
<mat-label class="label">Faits Marquants</mat-label>
<mat-form-field class="input1" appearance="fill">
<textarea matInput disabled="true"></textarea>
</mat-form-field>
</div>
<div>
<mat-label class="label">Succès</mat-label>
<mat-form-field class="input1" appearance="fill">
<textarea matInput disabled="true"></textarea>
</mat-form-field>
</div>
<div>
<mat-label class="label">Retours client/chef de projet</mat-label>
<mat-form-field class="input1" appearance="fill">
<textarea matInput disabled="true"></textarea>
</mat-form-field>
</div>
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="libelle">
<mat-header-cell *matHeaderCellDef>Libellé</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.libelle}} </mat-cell>
<mat-footer-cell *matFooterCellDef>Moyenne globale</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="note">
<mat-header-cell *matHeaderCellDef>Note</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.note}} </mat-cell>
<mat-footer-cell *matFooterCellDef>4</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="commentaire">
<mat-header-cell *matHeaderCellDef>Commentaire</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.comm}} </mat-cell>
<mat-footer-cell *matFooterCellDef></mat-footer-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
<mat-footer-row *matFooterRowDef="displayedColumns;"></mat-footer-row>
</mat-table>

@ -0,0 +1,32 @@
import { Component, OnInit } from '@angular/core';
interface Mission {
libelle:string;
note:number;
comm?:string
}
const missions: Mission[] = [
{libelle:"Difficultés", note:3, comm:"Je travaille sur un très bon projet, je suis content du challenge mais je n'ai pas le temps nécessaire pour finir le projet. Je suis assez déçu de travailler sur un projet que je ne finirai pas."},
{libelle:"Relation Client/Chef de projet ", note:5, comm:"5"},
{libelle:"Relation équipe ", note:5},
{libelle:"Ambiance de travail ", note:5, comm:"Très bonne ambiance."},
{libelle:"Intérêt technique ", note:5, comm:"J'apprends de nouvelles technologies et consolide plusieurs de mes acquis."},
{libelle:"Intérêt fonctionnel ", note:5},
{libelle:"Site géographique ", note:5, comm:"Aucune contrainte géographique"}
]
@Component({
selector: 'mission-ref',
templateUrl: './mission.html',
styleUrls: ['./mission.css']
})
export class MissionRefComponent implements OnInit {
displayedColumns: string[] = ["libelle","note", "commentaire"];
dataSource = missions;
constructor() {}
ngOnInit() {
}
}

@ -0,0 +1,9 @@
mat-table {
margin-top: 2%;
}
.commentaire {
width: 90%;
margin-top: 5%;
margin-left: 5%
}

@ -0,0 +1,28 @@
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="objectif">
<mat-header-cell *matHeaderCellDef>Objectifs</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.objectif}} </mat-cell>
</ng-container>
<ng-container matColumnDef="resultat">
<mat-header-cell *matHeaderCellDef>Résultat</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.res}} </mat-cell>
</ng-container>
<ng-container matColumnDef="commentaire">
<mat-header-cell *matHeaderCellDef>Commentaire</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.comm}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<form>
<div>
<mat-form-field class="commentaire" appearance="fill">
<mat-label>Commentaire référent </mat-label>
<textarea matInput></textarea>
</mat-form-field>
</div>
</form>

@ -0,0 +1,30 @@
import { Component, OnInit } from '@angular/core';
interface Objectif {
objectif:string;
res:string;
comm:string;
}
const data: Objectif[] = [
{objectif:"Développer des connaissances de leadership" , res:"Non atteint", comm:"J'ai eu que deux occassions que je n'ai malheureusement saisies"},
{objectif:"Communique efficacement avec l'ensemble des participants du projet" , res:"Atteint", comm:"Objectif atteint"},
{objectif:"Devenir expert avec le framework Angular" , res:"Partiellement atteint", comm:"Le framework Angular est très vaste, j'ai développé énormément mes compétences à ce niveau mais il me reste beaucoup à apprendre"}
];
@Component({
selector: 'objectifs-prec-ref',
templateUrl: './objectifs-prec.html',
styleUrls: ['objectifs-prec.css']
})
export class ObjectifsPrecRefComponent implements OnInit {
displayedColumns: string[] = ["objectif","resultat","commentaire"];
dataSource = data;
constructor() {
}
ngOnInit() {
}
}

@ -0,0 +1,21 @@
.moveright {
margin-left: 1%;
}
.label {
display: block;
margin-top: 2%
}
.commentaire {
width: 50%;
}
form {
margin-left: 1%;
}
.commentairereferent {
margin-top: 2%;
margin-left: 5%;
width: 90%;
}

@ -0,0 +1,32 @@
<form>
<div>
<mat-label class="label">Objectif 1</mat-label>
<mat-form-field class="commentaire" appearance="fill">
<mat-label>Aider à la finalisation du projet dans les temps</mat-label>
<textarea matInput disabled="true"></textarea>
</mat-form-field>
</div>
<div>
<mat-label class="label">Objectif 2</mat-label>
<mat-form-field class="commentaire" appearance="fill">
<mat-label>Me focaliser beaucoup plus sur les spécifications</mat-label>
<textarea matInput disabled="true"></textarea>
</mat-form-field>
</div>
<div>
<mat-label class="label">Objectif 3</mat-label>
<mat-form-field class="commentaire" appearance="fill">
<mat-label>Devenir expert Angular</mat-label>
<textarea matInput disabled="true"></textarea>
</mat-form-field>
</div>
<div>
<mat-form-field class="commentairereferent" appearance="fill">
<mat-label>Commentaire référent</mat-label>
<textarea matInput ></textarea>
</mat-form-field>
</div>
</form>

@ -0,0 +1,16 @@
import { Component, OnInit } from '@angular/core';
/**
*/
@Component({
selector: 'objectifs-ref',
templateUrl: './objectifs.html',
styleUrls: ['objectifs.css']
})
export class ObjectifsRefComponent implements OnInit {
constructor() {}
ngOnInit() {
}
}

@ -0,0 +1,11 @@
<h3>Saisie EPS référent</h3>
<mat-tab-group mat-align-tabs="start">
<mat-tab label="Objectifs de l'EP précédent"><objectifs-prec-ref></objectifs-prec-ref></mat-tab>
<mat-tab label="Mission/Projet"><mission-ref></mission-ref></mat-tab>
<mat-tab label="Compétences"><competences-ref></competences-ref></mat-tab>
<mat-tab label="Apside"><apside-ref></apside-ref></mat-tab>
<mat-tab label="Objectifs"><objectifs-ref></objectifs-ref></mat-tab>
<mat-tab label="Engagements"><engagement></engagement></mat-tab>
<mat-tab label="Demandes de formation"><formation></formation></mat-tab>
<mat-tab label="Augmentation de salaire"><salaire></salaire></mat-tab>
</mat-tab-group>

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
/**
*/
@Component({
selector: 'referent',
templateUrl: './referent.html'
})
export class ReferentComponent implements OnInit {
constructor() {}
ngOnInit() {
}
}

@ -0,0 +1,8 @@
.message {
width: 50%
}
.input {
margin-left: 2%;
width: 10%;
}

@ -0,0 +1,14 @@
<form>
<div>
<mat-label>% de l'augmentation du salaire</mat-label>
<mat-form-field class="input">
<input matInput type="number" min=1 value>
</mat-form-field>
</div>
<div>
<mat-form-field appearance="fill" class="message">
<mat-label>Message</mat-label>
<textarea matInput></textarea>
</mat-form-field>
</div>
</form>

@ -0,0 +1,14 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'salaire',
templateUrl: './salaire.html',
styleUrls: ['./salaire.css']
})
export class SalaireComponent implements OnInit {
constructor() {}
ngOnInit() {
}
}

@ -6,6 +6,8 @@
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>

@ -1 +1,4 @@
/* You can add global styles to this file, and also import other style files */
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

Loading…
Cancel
Save