diff --git a/src/app/pages/data-entry/data-entry.component.css b/src/app/pages/data-entry/data-entry.component.css
index cadc1574974a62f61157d982397f6a3cca968b75..8c244950eeb3b28c49750caf56f56bd79a9f7940 100644
--- a/src/app/pages/data-entry/data-entry.component.css
+++ b/src/app/pages/data-entry/data-entry.component.css
@@ -1,88 +1,82 @@
.example-stretched-tabs {
- max-width: 100%;
+ max-width: 100%;
}
.mat-form-field {
- width: 70%;
- font-size: 18px;
- margin-left: 18%;
- margin-top: 3%;
+ width: 70%;
+ font-size: 18px;
+ margin-left: 18%;
+ margin-top: 3%;
}
.mat-tab-label {
- font-size: 21px;
+font-size: 21px;
}
:host {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
}
form {
- height: 1000px;
+height: 1000px;
}
.mat-datepicker {
- margin-top: 50px;
+margin-top: 50px;
}
- /* Mat-option tonalities */
+ /* Mat-option tonalities */
#tonalitePositive {
- background: rgb(147,201,14);
- padding-left: 50px;
+background: rgb(147,201,14);
+padding-left: 50px;
}
-
#tonalitePositive:hover, #tonaliteNegative:hover {
- transform: scale(1.1);
+transform: scale(1.1);
}
#tonaliteNegative {
- background: #EF426F;
- padding-left: 50px;
+background: #EF426F;
+padding-left: 50px;
}
-
#submit, #cancel{
- font-size: 18px;
- margin-top: 150px;
- position: absolute;
- border-radius: 8px;
+font-size: 18px;
+margin-top: 150px;
+position: absolute;
+border-radius: 8px;
}
- /* Buttons cancel and submit */
+ /* Buttons cancel and submit */
#submit {
- margin-left: -20%;
- border: 2px solid rgb(147,201,14);
- background: rgb(147,201,14);
- color: white;
+margin-left: -20%;
+border: 2px solid rgb(147,201,14);
}
-#submit:hover {
- color: rgb(147,201,14);
- background: white;
+#cancel {
+margin-left: -60%;
+border: 2px solid rgb(0,94,184);
}
-#cancel {
- margin-left: -60%;
- border: 2px solid rgb(0,94,184);
- background: rgb(0,94,184);
- color: white;
+#cancel:hover, #submit:hover {
+transform: scale(1.2);
}
-#cancel:hover {
- background: white;
- color: rgb(0,94,184);
+.example-form {
+min-width: 150px;
+max-width: 500px;
+width: 100%;
}
-#cancel:hover, #submit:hover {
- transform: scale(1.2);
+.example-full-width {
+width: 100%;
}
diff --git a/src/app/pages/data-entry/data-entry.component.html b/src/app/pages/data-entry/data-entry.component.html
index b38675e5b824aafe4152ec96662114b30ef5de83..d8da2dc6ac44173e7bfda75c5919acea364cde1b 100644
--- a/src/app/pages/data-entry/data-entry.component.html
+++ b/src/app/pages/data-entry/data-entry.component.html
@@ -6,14 +6,9 @@
<form action="">
<mat-form-field class="mat-datepicker">
<mat-label>Date de parution</mat-label>
- <input matInput [matDatepicker]="datepicker" class="input-date">
- <mat-datepicker-toggle matSuffix [for]="datepicker" ></mat-datepicker-toggle>
- <mat-datepicker #datepicker ></mat-datepicker>
- </mat-form-field>
-
- <mat-form-field>
- <mat-label>Réference communiqué de presse</mat-label>
- <input matInput type="text" name="cp-ref" id="cp-ref" placeholder="Ex: 101">
+ <input matInput [matDatepicker]="datepicker" >
+ <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
+ <mat-datepicker #datepicker></mat-datepicker>
</mat-form-field>
<mat-form-field>
@@ -23,31 +18,63 @@
<mat-form-field>
<mat-label>Type</mat-label>
- <mat-select [(value)]="type">
- <mat-option>None</mat-option>
- <mat-option *ngFor="let type of types" [value]="type">{{type}}</mat-option>
- </mat-select>
+ <input type="text" id="Type-cp"
+ aria-label="Type"
+ matInput
+ [formControl]="myControl"
+ [matAutocomplete]="autocp">
+ <mat-autocomplete autoActiveFirstOption #autocp="matAutocomplete">
+ <mat-option *ngFor="let option of filteredtypesCP | async" [value]="option">
+ {{option}}
+ </mat-option>
+ </mat-autocomplete>
</mat-form-field>
<mat-form-field>
<mat-label>Département</mat-label>
- <input matInput type="text" name="cp-departement" id="cp-departement" placeholder="Ex: 64">
+ <mat-select name="cp-departement" id="cp-departement" placeholder="Ex: 64">
+ <mat-option *ngFor="let option of filteredDepartement | async" [value]="option">
+ {{option}}
+ </mat-option>
+ </mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>Thème</mat-label>
- <input matInput type="text" name="cp-theme" id="cp-theme" placeholder="Ex: Reseau">
+ <input matInput type="text" name="cp-theme" id="cp-theme" placeholder="Ex: Reseau" aria-label="Type"
+ matInput
+ [formControl]="myControl"
+ [matAutocomplete]="autotheme" multiple>
+ <mat-autocomplete autoActiveFirstOption #autotheme="matAutocomplete">
+ <mat-option *ngFor="let option of filteredTheme | async" [value]="option">
+ {{option}}
+ </mat-option>
+ </mat-autocomplete>
</mat-form-field>
<mat-form-field>
<mat-label>Lien</mat-label>
<input matInput type="text" name="cp-lien" id="cp-lien">
+ <input class="ng-hide" id="input-file-id" multiple type="file" />
+ </mat-form-field>
+
+ <mat-form-field>
+ <mat-label>Lié un ou des articles</mat-label>
+ <mat-select multiple placeholder="Lié un article a une Retombée" name="cp-lie" id="cp-lie">
+ <mat-option *ngFor="let option of filteredArticle | async" [value]="option">
+ {{option}}
+ </mat-option>
+ </mat-select>
</mat-form-field>
+
+
+
+
<!-- Buttons Submit and cancel -->
- <button mat-raised-button type="submit" id="submit"><strong>Valider</strong></button>
- <button mat-raised-button (click)="emptyInputs()" id="cancel"><strong>Annuler</strong></button>
+ <button mat-raised-button (click)="addOptionCP()" [style.background]="backgroundSubmitButton" [style.color]="colorTextSubmit" (mouseenter)="setHover('submit')" (mouseleave)="setHover('submit')" type="submit" id="submit"><strong>Valider</strong></button>
+ <button mat-raised-button (click)="emptyInputs()" [style.background]="backgroundCancelButton" [style.color]="colorTextCancel" (mouseenter)="setHover('cancel')" (mouseleave)="setHover('cancel')" id="cancel"><strong>Annuler</strong></button>
</form>
</mat-tab>
@@ -55,60 +82,92 @@
<!-- Retombée tab -->
- <mat-tab label="Retombée">
+ <mat-tab label="Article">
<form action="">
<mat-form-field class="mat-datepicker">
<mat-label>Date de parution</mat-label>
- <input matInput [matDatepicker]="datepicker2" class="input-date">
+ <input matInput [matDatepicker]="datepicker2" >
<mat-datepicker-toggle matSuffix [for]="datepicker2"></mat-datepicker-toggle>
<mat-datepicker #datepicker2></mat-datepicker>
</mat-form-field>
- <mat-form-field>
- <mat-label>Réference communiqué de presse</mat-label>
- <input matInput type="text" name="cp-ref" id="cp-ref" placeholder="Ex: 101">
- </mat-form-field>
+
<mat-form-field>
<mat-label>Titre</mat-label>
- <input matInput type="text" name="cp-title" id="cp-title">
+ <input matInput type="text" name="r-title" id="r-title">
</mat-form-field>
<mat-form-field>
<mat-label>Type</mat-label>
- <mat-select [(value)]="type">
- <mat-option>None</mat-option>
- <mat-option *ngFor="let type of types" [value]="type">{{type}}</mat-option>
- </mat-select>
+ <input type="text" id="Type-retombe"
+ aria-label="Type"
+ matInput
+ [formControl]="myControl"
+ [matAutocomplete]="autoRetombe">
+ <mat-autocomplete autoActiveFirstOption #autoRetombe="matAutocomplete">
+ <mat-option *ngFor="let option of filteredtypesRetombe | async" [value]="option">
+ {{option}}
+ </mat-option>
+ </mat-autocomplete>
</mat-form-field>
<mat-form-field>
+ <mat-label>Journaux</mat-label>
+ <mat-select [(ngModel)]="selectedValue" name="journal">
+ <mat-option *ngFor="let type of journal" [value]="type.dep">
+ {{type.name}}
+ </mat-option>
+ </mat-select>
+
+ </mat-form-field>
+
+ <mat-form-field >
<mat-label>Département</mat-label>
- <input matInput type="text" name="cp-departement" id="cp-departement" placeholder="Ex: 64">
+ <input matInput value={{selectedValue}} name="r-departement" id="r-departement">
</mat-form-field>
<mat-form-field>
<mat-label>Thème</mat-label>
- <input matInput type="text" name="cp-theme" id="cp-theme" placeholder="Ex: Reseau">
+ <input matInput type="text" name="r-theme" id="r-theme" placeholder="Ex: Reseau" aria-label="Thème" aria-label="Type"
+ matInput
+ [formControl]="myControl"
+ [matAutocomplete]="autotheme">
+ <mat-autocomplete autoActiveFirstOption #autotheme="matAutocomplete">
+ <mat-option *ngFor="let option of filteredTheme | async" [value]="option">
+ {{option}}
+ </mat-option>
+ </mat-autocomplete>
</mat-form-field>
<mat-form-field>
<mat-label>Lien</mat-label>
- <input matInput type="text" name="cp-lien" id="cp-lien">
+ <input matInput type="text" name="r-lien" id="r-lien"/>
+ <input class="ng-hide" id="input-file-id" multiple type="file" />
</mat-form-field>
<mat-form-field>
<mat-label>Tonalité</mat-label>
- <mat-select [(value)]="tonality">
+ <mat-select>
<mat-option id="tonalitePositive" value="Positive" >Positive</mat-option>
<mat-option id="tonaliteNegative" value="Négative" >Négative</mat-option>
</mat-select>
</mat-form-field>
+ <mat-form-field>
+ <mat-label>Retombée</mat-label>
+ <mat-select multiple placeholder="Lié un article a une Retombée">
+ <mat-option *ngFor="let option of filteredArticle | async" [value]="option">
+ {{option}}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+
+
<!-- Buttons Submit and cancel -->
- <button mat-raised-button type="submit" id="submit"><strong>Valider</strong></button>
- <button mat-raised-button (click)="emptyInputs()" id="cancel"><strong> Annuler</strong></button>
+ <button mat-raised-button (click)="addOptiontypeRetombe()" [style.background]="backgroundSubmitButton" [style.color]="colorTextSubmit" (mouseenter)="setHover('submit')" (mouseleave)="setHover('submit')" type="submit" id="submit"><strong>Valider</strong></button>
+ <button mat-raised-button (click)="emptyInputs()" [style.background]="backgroundCancelButton" [style.color]="colorTextCancel" (mouseenter)="setHover('cancel')" (mouseleave)="setHover('cancel')" id="cancel"><strong> Annuler</strong></button>
</form>
</mat-tab>
</mat-tab-group>
diff --git a/src/app/pages/data-entry/data-entry.component.ts b/src/app/pages/data-entry/data-entry.component.ts
index 513bc12286fe33da220c1d7f86e2d734252167e8..294255b2b1aff6ef2a7a844c2e750045345d9677 100644
--- a/src/app/pages/data-entry/data-entry.component.ts
+++ b/src/app/pages/data-entry/data-entry.component.ts
@@ -1,7 +1,15 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {Observable} from 'rxjs';
+import {map, startWith} from 'rxjs/operators';
+interface journaux{
+ name:string;
+ dep:string
+}
+
@Component({
selector: 'app-data-entry',
templateUrl: './data-entry.component.html',
@@ -9,54 +17,168 @@ import { Component } from '@angular/core';
})
+
/**
* Page to enter new articles
*/
-export class DataEntryComponent {
+export class DataEntryComponent implements OnInit {
+ myControl = new FormControl();
+ //This is for type from retombé
+ //types is a array of all types we have
+ types_retombe: string[] = ['PQR', 'Radio', 'TV', 'Web'];
+ filteredtypesRetombe: Observable<string[]>;
+ ngOnInit() {
+ this.filteredtypesCP = this.myControl.valueChanges.pipe(
+ startWith(''),
+ map(value =>this._filterCP(value)),
+ );
+ this.filteredtypesRetombe = this.myControl.valueChanges.pipe(
+ startWith(''),
+ map(value =>this._filtertypeRetombe(value)),
+ );
+ this.filteredDepartement = this.myControl.valueChanges.pipe(
+ startWith(''),
+ map(value =>this._filterDepartement(value)),
+ );
+ this.filteredTheme = this.myControl.valueChanges.pipe(
+ startWith(''),
+ map(value =>this._filterTheme(value)),
+ );
+ this.filteredArticle = this.myControl.valueChanges.pipe(
+ startWith(''),
+ map(value =>this._filterArticle(value)),
+ );
+ this.filteredRetombe = this.myControl.valueChanges.pipe(
+ startWith(''),
+ map(value =>this._filterRetombe(value)),
+ );
+ }
- //////////////////// Values of Selection inputs \\\\\\\\\\\\\\\\\\\\
+ private _filtertypeRetombe(value: string): string[] {
+ const filterValue = value.toLowerCase();
- date = '';
- type = '';
- tonality = '';
+ return this.types_retombe.filter(typer => typer.toLowerCase().indexOf(filterValue) === 0);
+ }
+ //fonction to add a types in array if it is not in
+ public addOptiontypeRetombe(){
+ let value =<HTMLInputElement> document.querySelector("#Type-retombe");
+ if(this.types_retombe.indexOf(value.value)!==-1){
+ //value is not in types
+ }
+ else{
+ this.types_retombe.push(value.value)
+ }
+ }
- /* Values will be changed obviously .... */
- types: string[] = [
- 'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware',
- 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',
- 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
- 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico',
- 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania',
- 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
- 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
- ];
+ //this is for type from communique de presse
+ types_cp: string[] = ['Mail','CP','IP','Partenariat','Action','DT','Radio'];
+ filteredtypesCP: Observable<string[]>;
+ private _filterCP(value: string): string[] {
+ const filterValue = value.toLowerCase();
- /**
- * Empty form
- */
- public emptyInputs() {
+ return this.types_cp.filter(type => type.toLowerCase().indexOf(filterValue) === 0);
+ }
+ //fonction to add a types in array if it is not in
+ public addOptionCP(){
+ let value =<HTMLInputElement> document.querySelector("#Type-cp");
+ if(this.types_cp.indexOf(value.value)!==-1){
+ //value is not in types
- //////////////////// Reset selections \\\\\\\\\\\\\\\\\\\\
+ }
+ else{
+ this.types_cp.push(value.value)
+ }
+ }
+
+ //this is for type from communique de presse
+ departement: string[] = ['64','65','40'];
+ filteredDepartement: Observable<string[]>;
+
+ private _filterDepartement(value: string): string[] {
+ const filterValue = value.toLowerCase();
+
+ return this.departement.filter(type => type.toLowerCase().indexOf(filterValue) === 0);
+ }
+
+
+ //this is for Theme
+ theme: string[] = ['Partenariat','Sécurité','Transition écologique','RH','Crise climatique','Crise RH','Coupure','Linky','RSE'];
+ filteredTheme: Observable<string[]>;
- this.date = '';
- this.type = '';
- this.tonality = '';
+ private _filterTheme(value: string): string[] {
+ const filterValue = value.toLowerCase();
- //////////////////// Reset other inputs \\\\\\\\\\\\\\\\\\\\
+ return this.theme.filter(type => type.toLowerCase().indexOf(filterValue) === 0);
+ }
+ //fonction to add a types in array if it is not in
+ public addOptionTheme(){
+ let value =<HTMLInputElement> document.querySelector("#r-theme");
+
+ if(this.theme.indexOf(value.value)!==-1){
+ //value is not in types
- let inputs = document.querySelectorAll("input");
- for (let i = 0; i < inputs.length; i++) {
- if (inputs[i]){
- inputs[i].value = '';
- }
}
+ else{
+ this.theme.push(value.value)
+ }
+ }
+
+
+ //this is for Theme
+ article: string[] = ['Nom article 1','Nom article 2','Nom article 3','Nom article 4',];
+ filteredArticle: Observable<string[]>;
+
+ private _filterArticle(value: string): string[] {
+ const filterValue = value.toLowerCase();
+
+ return this.article.filter(type => type.toLowerCase().indexOf(filterValue) === 0);
}
-}
+ //this is for Theme
+ retombe: string[] = ['Nom retombe 1','Nom retombe 2','Nom retombe 3','Nom retombe 4',];
+ filteredRetombe: Observable<string[]>;
+ private _filterRetombe(value: string): string[] {
+ const filterValue = value.toLowerCase();
+
+ return this.retombe.filter(type => type.toLowerCase().indexOf(filterValue) === 0);
+ }
+
+ selectedValue: string;
+ journal: journaux[]= [{name:'Atomic Radio 40', dep:'40'},{name:'Atomic Radio 64', dep:'64'},{name:'Atomic Radio 65', dep:'65'}]
+
+ /**
+ * Empty inputs
+ */
+ public emptyInputs() {
+ location.reload();
+ }
+
+ //////////////////// Buttons \\\\\\\\\\\\\\\\\\\\
+
+ backgroundCancelButton = "rgb(0,94,184)";
+ backgroundSubmitButton = "rgb(147,201,14)";
+ colorTextSubmit = "#FFFFFF";
+ colorTextCancel = "#FFFFFF";
+
+ public setHover(button: string){
+ if (button === "submit"){
+ let color = this.backgroundSubmitButton;
+ this.backgroundSubmitButton = this.colorTextSubmit;
+ this.colorTextSubmit = color;
+ }
+ else if (button === "cancel"){
+ let color = this.backgroundCancelButton;
+ this.backgroundCancelButton = this.colorTextCancel;
+ this.colorTextCancel = color;
+ }
+ }
+
+
+}