# data[].attributes.body
⚈ 35h par semaine
⚈ 8h à 16h
⚈ Travail en présentiel
⚈ Ce padlet contient un code couleur :
-En violet : Travail réalisé
-En vert : Les différentes notes

Certains codes et notes sont directement écrit depuis mon cahier.

# data[].attributes.body
⚈ Présentation de l'entreprise
et mise en liaison avec les projets de l'entreprise
⚈Installation des différents logiciels :
NodeJs, Python, Visual Studio Code, Angular, SVN-Tortoise, Docker Studio.
⚈Création d'un environnement virtuel sur Python et installation d'Angular sur Visual Studio Code

# data[].attributes.body
⚈ Installation des différents modules Angular.

⚈Introduction à Python et son Framework "Django". Il sert à se connecter localement à notre site.

⚈Introduction aux différentes BDD de l'entreprise sous PgAdmin.

⚈Explication du travail à réaliser pour les prochaines semaines :
-Passer le projet Angular 6.4.2 vers 11 et y importer le Template.

Début du travail :
J'ai pu réaliser des captures d'écran des différentes erreurs.

⚈ Installation de l'environnement Python, Django et des modules Angular.

https://packaging.python.org/guides/installing-using-pip-and-virtual-environments/#creating-a-virtual-environment

https://docs.python.org/fr/3/library/venv.html

https://code.visualstudio.com/docs/python/environments

⚈Tutoriel Python et Framework Django :
-pip install -r requirements.txt
-Le fichier requirements.txt contient les modules à installer

Installation Django :

https://code.visualstudio.com/docs/python/tutorial-django

⚈ Lien du Template :

https://www.creative-tim.com/product/material-dashboard-angular2 Version V10

⚈ Installation des modules :
-npm install  @angular/cli
-npm install -r package.json
Le fichier package.json contient les modules à installer.

# data[].attributes.body
⚈ Apprentissage Angular :
Réalisation de deux projets afin d'apprendre Angular.

⚈Premier projet tutoriel Angular "Site de vente" :
Le projet a été fini et réalisé. Il permet la compréhension de l'utilisation de classe, de composants, et des différentes fonctionnalités Angular... Celui a été réalisé sous "Stackblitz" permettant de virtualiser un projet Angular.
-Lien du projet :
https://stackblitz.com/edit/angular-ojtmkv-drxwfs?file=src/app/app.component.ts

⚈Début de réalisation du deuxième projet "Tour des héros" séparer en 6 parties :
1°)Réalisation de l'éditeur d'héros
2°)Réalisation d'une liste d'héros ( notion array et *ngFor )

# data[].attributes.body
⚈ Apprentissage Angular :
Suite de la réalisation du deuxième projet "Tour des héros" permettant un approfondissement d'Angular.
J'ai fait le 2°) 3°) 4°)

2°) Fin de la réalisation des listes :

a°)Réalisation d'un tableau (const) ;

b°) Méthode de clique bouton (click) ;

c°) *ngFor pour afficher la liste :

Ex : *ngFor="let 'x' of parcour", "parcour" étant le tableau réalisé via const et "hero" un element objet  ;

d°) Application d'un CSS avec une condition Angular

3°)Composants de fonction :

a°)Créer un composant :

ng generate "detailhero"

b°)Importation et séparation des différents codes dans plusieurs composants classe fille pour alléger le code.

c°) Révision des notions "d'Input", "Output" et de classe ( mère / fille )

d°) Utilisation du "selector" pour importer l'HTML d'une classe fille dans la classe mère, HTML d'origine.

e°)Notion de "binding" : pour lier une propriété.

A savoir :

Ce projet n'a pas été réalisé sur "stackblitz" comparé au premier mais directement sur Visual Studio Code de A à Z.

Grosse erreur corrigé :

"strictNullChecks" : false dans le fichier tsconfig.json qui permet de forcer une variable en "null".
4°)Les services
A quoi ça sert ?

-Facilité les tests unitaire

Maigrir le contenu de l'application de base

-Concentré sur le support de vue de la classe mère

-Les composants ne doivent pas enregistrer et récupérer des données directement et montrer de fausse données

-Ils doivent présenter les données.

a°) Créer le service "hero service": -ng generate servicehero

b°) Notion @Injectable : Participe au système d'injection de dépendance

c°)Importation des components heros : import { Hero } from './hero';
import { HEROES } from './mock-heroes';

d°) Modification du fichier mère : parcourheros: Hero[]; et Ajoute d'un paramètre privé de type HeroService au constructeur.

e°)Création méthode getleHero();

ngOnInit(): garder le constructeur pour initialisation, ngoninit prendra en charge l'appel des méthodes

Librairie RxJs : Observable

Affichage du message, ng generate component message

ng generate service message

# data[].attributes.body
5°) Ajouter la navigation dans l'application avec le routage :

Ajoutez une vue de tableau de bord .

Ajoutez la possibilité de naviguer entre les vues Heroes et Dashboard .

Lorsque les utilisateurs cliquent sur un nom de héros dans l'une ou l'autre vue, accédez à une vue détaillée du héros sélectionné.

Lorsque les utilisateurs cliquent sur un lien profond dans un e-mail, ouvrez la vue détaillée d'un héros particulier.

1°) Ajout AppRoutingModule :

"ng generate module app-routing --flat --module=app"

Configure le routeur.
--flat place le fichier au src/app lieu de son propre dossier.
--module=App indique à la CLI de l'enregistrer dans le imports tableau du AppModule.

Le fichier importe RouterModule et Routes pour avoir une fonctionnalité de routage.
Il importe aussi le composant demandé pour savoir ou aller.

Code :

Imports RouterModule, Routes..
Imports Hero from 'hero'...
const routes: Routes = [
{path:'hero', component: HeroComponent}
];

Explication code :

-On créer une const "x" lié à Routes.
-On y ajoute le path ( le chemin ) et le composant vers ou il va.
-Exemple du code : Le routeur lira "hero" en URL et affiche le composant "HeroComponent"

Explication systèmes des routes :

Les routes permettent de dire au routeur quelle vue afficher quand l'utilisateur clique sur un lien ou donne un URL dans la barre de recherche

Par la suite on import :

imports: [ RouterModule.forRoot(routes) ],
La ligne suivante ajoute le RouterModule au service app routing et le configure avec le routes en une seule étape en appelant : RouterModule.forRoot():
forRoot() : config à la racine

Ensuite :

exports: [ RouterModule ]
-AppRouting exporte RouterModule pour qu'il soit disponible dans toute l'application.

2°) Ajout du <router-outlet> :
On remplace le <app-heroes> par le <router-outel>.
L'application affichera "HeroesComponent" que si on navigue dedans maintenant.

Explication

- <router-outel> dis au routeur ou afficher les vues "routes"
- <router-outel> est une directive du routeur valable aux composants d'application car elle a été importé à l'aide de "App-Module" qui importe automatiquement les modules du Routeur.

Explication

- La première commande d'initialisation à ajouter les importations :
"ng generate module app-routing --flat --module=app"
- Si on ne créer pas l'app routing sans cette commande, il faut écrire soi-même les imports.
- Maintenant, ng serve affiche l'app mais plus la liste des héros.
Pour y accéder il faut ajouter /hero dans l'URL

3°) Lien de navigation Ajout :
Lien cliquable pour ne plus écrire l'URL
Utilisation de <nav> dans l'html
Ajout d'un "Routerlink" à /Heroes

Code :

<nav Routerlink="/hero">
click
</nav>

4°) Ajout de la vue Dashboard
"ng g Dashboard components"

Ajout NAV route :

Import Dashboard et on ajoute la route ( comme en haut, voir code ).

Route par défaut :

Quand l'App démarre il n'y a aucune route à l'accueil. Il faut faire nav l'app automatiquement sur le DashBoard :
{path: ' ', redirectto: '/dashboard', patchmatch:'full' }

-Le path : ' ' amène à Dashboard.
-"patchMatch" : "full" signifie que la page par défaut est l'écran de bienvenu avec l'URL originel "localhost:4200"

Ajout du clique Dashboard :

<a routerlink="./Dashboard">Dash
</a>

5°) Navigation détail Hero :

Détail accessible en cliquant :
->Sur un héros
->Sur la liste des héros
->Par l'URL ou un lien

On enleve les details hero de "herocomponents" en supprimant <app-detailhero>

Ajout Routes :

-Import Detailherocomp...
-On fait la route...

- Mais ici dans le "path" on met "detail/:id"
Quand on cliquera sur l'id 11, ça affichera les détails du héro 11.

Dashboard lien Héro code :

<a *ngFor="let hero of heroes" class="col-1-4" routerLink="/detail/{{hero.id}}">
<div class="module hero">
<h4>{{hero.name}}</h4>
</div>
</a>

HeroesComponent liens héros :

<ul class="heroes">
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<ul class="heroes">
<li *ngFor="let hero of heroes">
<a routerLink="/detail/{{hero.id}}">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</a>
</li>
</ul>
Dans l'HTML de hérosComponents.

Explication :

Maintenant que le routeur a une route vers HeroDetailComponent, les liens héros du dashboard pourront naviguer via l' itinéraire du dashboard paramétré .

6°)Routes des détails hero :

-Le routeur créer le détail du héros à l'aide de l'URL
-Le détail Hero a besoin d'une nouvelle méthode pour trouver le chemin.
-Obtenir et extraire son itinéraire
-Héros avec ID via le HeroService.

Imports et injections :

import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { HeroService } from '../hero.service';

On injecter les services ActivatedRoute, HeroService et les Location dans le constructeur.

constructor(
private route: ActivatedRoute,
private heroService: HeroService,
private location: Location
) {}

Extrait l'id du parametre d'itinéraire :

ngOnInit(): void {
this.prendreleHero();
}
prendreleHero(): void {
const id = +this.route.snapshot.paramMap.get('id');
this.heroService.prendreleHero(id)
.subscribe(hero => this.hero = hero);
}

Explication

-snapshot est une image statique
-Le paramMap est un dictionnaire de valeurs de paramètres d'itinéraire extraites de l'URL. La "id" clé renvoie l'id du héros à récupérer.
-L'opérateur JavaScript (+) convertit la chaîne en un nombre, ce que id devrait être un héros .

Le navigateur s'actualise et l'application se bloque avec une erreur du compilateur. HeroService n'a pas de méthode prendreleHero()

Ajouter prendreleHero():

Dans hero.service.ts :

prendreleHero(id: number): Observable<Hero> {
  // TODO: send the message _after_ fetching the hero
  this.messageService.add(`HeroService: fetched hero id=${id}`);
  return of(tableauHeroes.find(hero => hero.id === id));
}

Trouvez le chemin du retour :

-Dans heroes comp html.
Code :
<button (click)="goBack()">go back</button>

Ajout de la méthode goBack():

Méthode à la classe de composant qui navigue en arrière d'une étape dans la pile d'historique du navigateur à l'aide du Locationservice.

goBack(): void {
this.location.back();
}

Résumé :
->Compréhension Routeur/route
-><router-outlet> navigable
-> Config routeur
-> LinkDirective...

# data[].attributes.body
6°)Navigation : Obtenir des données d'un serveur

Ajout de données

HTTPClient

Ajout, modif, supp d'un héros via HTTP

Rechercher héros par nom

1°) Activer HTTP :
Communiquer avec un serveur distant HTTP
Importe HttpClientModule
Ajoute Httpclient au imports du ngModule
2°)Simuler le serveur de données
npm install angular-in-message-web-api --save
Importe à la racine et on les déclare dans les imports
3°)Import HTTPClient dans les hérosservice et on déclare une variable avec l'URL de l'API :
app= 'api/tableauHeroes';

Configuration de l'HTTP terminé, voir code Cahier de note.

# data[].attributes.body
Se renseigner sur le module npm "json-server" : json-server - npm. Permet de simuler un serveur json très facilement à partir d'un fichier de données
et de tester tes différents accès aux données à partir de tes services

Réalisation de la partie "Routage" du tutoriel d'Angular pour le transfert de la version 6 à la 10 de "gipsy",  les notions de routage sont essentielles

Note à moi-même :

Revoir les notions de services et d'observable ainsi que la bibliothèque "rxjs"

Lien :

https://www.pierre-giraud.com/javascript-apprendre-coder-cours/introduction-asynchrone/
https://www.youtube.com/watch?v=TrDqaABq-UY&ab_channel=DevoxxFR
https://www.youtube.com/watch?v=xdxbbbm2aXU&ab_channel=CodeStepByStep

Lien Dashboard Template :

https://www.creative-tim.com/product/material-dashboard-angular2

Installation environnement Python et des modules:

https://packaging.python.org/guides/installing-using-pip-and-virtual-environments/#creating-a-virtual-environment
https://docs.python.org/fr/3/library/venv.html
https://code.visualstudio.com/docs/python/environments

-pip install -r requirements.txt
Le fichier requirements.txt dans le projet Gipsy contient les modules à installer

Exemple installation django

https://code.visualstudio.com/docs/python/tutorial-django

Installation des modules Angular :

-npm install  @angular/cli
-npm install -r package.json
Le fichier package.json contient les modules à installer

Logiciels :

VS code / docker / material dashboard angular / noode js / pgadmin / postgresql /python / tortoise svn / wamp

# data[].attributes.attachment_link.readable_text
Lien 
https://www.creative-tim.com/product/material-dashboard-angular2 Version V10

Installation environnement Python et des modules:
https://packaging.python.org/guides/installing-using-pip-and-virtual-environments/#creating-a-virtual-environment
https://docs.python.org/fr/3/library/venv.html
https://code.visualstudio.com/docs/python/environments

-pip install -r requirements.txt

Le fichier requirements.txt contient les modules à installer

Exemple installation django :
https://code.visualstudio.com/docs/python/tutorial-django

Installation des modules Angular :
-npm install  @angular/cli
-npm install -r package.json


Le fichier package.json contient les modules à installer

logiciel
vs code / docker / material dashboard angular / noode js / pgadmin / postgresql /python / tortoise svn / wamp

# data[].attributes.body
Mise en place du travail, je dois corriger les erreurs de modules du programme de l'entreprise sous Angular tout en l'analysant.

Donc transférer le fichier de gipsy au nouveau fichier et régler les erreurs

Correction d'erreurs et de bugs :

Correction d'un bug sur Angular apparu dans les imports d'un module buggé "angular-in-memory-webapi" :

Install angular-in-memory-webapi --save

Correction problème HTTP et erreur "Createdb" : Après être mis en commentaire, le site refonctionne.

App.module.ts -> /* code HttpClientInMemory

Connection à l'app "Gibsy" :
-> Python / Django
-> ng serve -o depuis Gibsy

On se met sur l'environnement Python créer la première semaine.

SELECT interpretreter, Le .venv

Dans le terminal pour se connecter on écrit :

"python manage.py runserver localhost:8000"

Le serveur se lance, il permet de tester le travail. Aucune modification apportés est affecté.

Sans lancer Django et Python depuis le terminal il est impossible de se connecter sur l'interface de Gibsy !
Toujours faire cette étape !

Instructions :

-Ne pas toucher les fichiers externe au frontend sauf si nécessité pour images etc..
-Déplacer les fichiers du frontend.
-Principalement des erreurs de chemins, de modules, installation des modules, et quelques codes en commentaires et ou inutilisable.
-Identifier le code et le comprendre.

Début du portage, je mettrais les différents problèmes depuis un tableau Excel ou un Word car ils sont trop long à énumérer ici

# data[].attributes.body
Objectifs de la semaine :
1°) Importer le projet Gipsy Angular 6.2.9
sur le nouveau dossier Angular 11 contenant le Dashboard
Soit :

Importer tous les composants

Importer tous les modules et les installer

Effectuer les modifications pour faire fonctionner les modules, installation, chemin

Lien Dashboard Template :

https://www.creative-tim.com/product/material-dashboard-angular2

2°)Effectuer les chemins de Routes sur le nouveau Dashboard :

Donc dans le composant "sidebar", pouvoir naviguer sur les composants de Gipsy.

3°)Amélioration du Paddlet et rédaction de notes pour le stage

-Mise à jour du padlet avec plus de détails sur certains jours.

Fait aujourd'hui :

-Je continue le portage des données du projet de l'entreprise "gipsy" vers le nouveau en Angular 11 contenant le Dashboard, je mettrais les différents problèmes depuis un tableau Excel ou un Word car ils sont trop long à énumérer ici

-Fin des imports et résolutions des imports dans le dossier "app". Tous les fichiers de gipsy sont transférés.

-Ajout des imports dans le app.module.ts ainsi que l'installation de certains modules npm.

Important erreur qui a pris beaucoup de temps !

-Mon tuteur de stage, Fabrice, a dû m'aider pour un énorme bug de "jasmine", "cannot find namespace" ainsi que des problèmes "d'entries". Il a directement changer le codage d'une méthode appelant "Order" en "Any". En outre c'était un problème de typage complexe. Concernant les Entries, dans le fichier tsconfig, j'ai rajouté : "esnext" dans "lib" pour faire appel à d'autres librairies JavaScript ( voir capture d'écran )

# data[].attributes.body
Importation app.module.ts

J'importe tous les modules de "app.module.ts" Gipsy vers le projet "frontend-v10". Pour cela j'installe certains modules, je supprime les doublons et je réécris les chemins d'importation car la norme pour écrire les chemins d'accès à changer d'Angular 6 à 11.
Voir le fichier note uploadé

Codage de la navigation, routes

Dans le composant "sidebar" du fichier "shared", j'effectue les routes des différents chemins d'accès

Imports "Angular materials" corrigé, voir fichier "Angumath" joint contenant avant / après

Installation des modules :

-npm i time-ago-pipe --save
-npm Angular-dual-listbox --save

J'ai dû installer une dizaine de module dans le "app.module.ts" qui sont nécessaire aux fonctionnements de certaines fonctionnalités du projet Gipsy.

Pour exemple, "angular-list-box" est un composant qui fournit deux listes de contrôles côte à côte et permet aux éléments d'une liste d'être sélectionnés et déplacés * vers l'autre liste par glisser-déposer et / ou par bouton interface. Le composant prend en charge plusieurs options de sélection dans la liste, le réglage par programmation des sources de la liste et la mise en page avec mise en forme de direction et de bouton.

Petite Erreur sur le ngbModule

Importing any ng-bootstrap module via .forRoot() has now been completely removed since 5.0.0-rc.0

Change

NgbModule.forRoot()

To

NgbModule

Concernant les déclarations :

Dans les déclarations, on déclare les components, soit les fichiers components générés.

Concernant NgModules :

Dans NgModules, on déclare les modules, tout simplement.

Importation finis, il faut maintenant coder et transférer certaines lignes de code

# data[].attributes.body
Ce fichier note contient des parties de code que j'ai réalisé et réparer pour les importations des différents composants et modules du projet

# data[].attributes.attachment_link.readable_text

Voici le travail que j'ai effectué dans le "app.module.ts" du nouveau projet. Je n'ai pas inclus les déclarations et le NgModules des imports car celle-ci sont simple, il y a juste un léger exemple.
De plus, pour des raisons de confidentialité je ne peux pas afficher toutes les parties, voici donc quelques exemples et parties de code que j'ai effectué, réparé et importé.

Voici la liste des imports d'Angular Material. La première version est celle-ci de Gipsy obsolete
_____________________________________________________________AVANT_______________________________________________________
import {
    MatSortModule,
    MatCardModule,
    MatDialogModule,
    MatTabsModule,
    MatButtonModule,
    MatCheckboxModule,
    MatGridListModule,
    MatInputModule,
    MatIconModule,
    MatTableModule,
    MatProgressSpinnerModule,
    MatDatepickerModule,
    MatNativeDateModule,
    DateAdapter,
    MatSelectModule,
    MatExpansionModule,
    MatListModule,
    MatPaginatorModule,
    MatTooltipModule,
    MatAutocompleteModule, MAT_DATE_LOCALE, MAT_DATE_FORMATS,
} from '@angular/material';
_____________________________________________________________APRES_______________________________________________________
//Imports Angular Materials MAJ avec les chemins spécifiques aux demandes
//Les angular materials GIPSY maj avec leurs chemins d'accès
import{MatSortModule} from '@angular/material/sort';
import{MatCardModule} from '@angular/material/card';
import{MatDialogModule} from '@angular/material/dialog';
import{MatTabsModule} from '@angular/material/tabs';
import{MatButtonModule} from '@angular/material/button';
import{MatCheckboxModule} from '@angular/material/checkbox';
import{MatGridListModule} from '@angular/material/grid-list';
import{MatInputModule} from '@angular/material/input';
import{MatIconModule} from '@angular/material/icon';
import{MatTableModule} from '@angular/material/table';
import{MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import{MatDatepickerModule} from '@angular/material/datepicker';
import{MatNativeDateModule} from '@angular/material/core';
import{MatSelectModule} from '@angular/material/select';
import{MatExpansionModule} from '@angular/material/expansion';
import{MatListModule} from '@angular/material/list';
import{MatPaginatorModule} from '@angular/material/paginator';
import{MatTooltipModule} from '@angular/material/tooltip';
import{MatAutocompleteModule} from '@angular/material/autocomplete';
//Fin Imports materials
_____________________________________________________LISTE NPM INSTALL_____________________________________________________
Liste de certains modules NPM installés :
npm i @ng-bootstrap/ng-bootstrap
npm i angular-dual-listbox
npm i @ng-select/ng-select
npm i time-ago-pipe
_______________________________________________________NgModules et DECLARATIONS___________________________________________

@NgModule({
  imports: [
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    ComponentsModule,
...
declarations: [
    AppComponent,
    AdminLayoutComponent,
    ConsommableComponent,
    ConsommableDetailDialogComponent,
    NotificationsComponent,
    UserComponent,
  //declarations gipsy frontend
    HomeComponent,
    MaterielListComponent,
    EquipementDetailsComponent,
    ExportComponent,
    MaterielDetailsComponent,
....
_______________________________________________________EXPORTS et Composants___________________________________________
exports: [PrescriptionListComponent] //Export GIPSY
})
export class AppModule {
  constructor(private dateAdapter: DateAdapter<Date>) {
    dateAdapter.setLocale('fr');
  }
}

# data[].attributes.body
Il faut aussi changé le "from 'ng2-file-upload/ng2-file-upload';" en "from 'ng2-file-upload';

# data[].attributes.body
Depuis le 20/01, je commence à modifier la template pour la rendre fonctionnelle avec le projet Gipsy.

Modification du footer/navbar/sidebar :

Je dois modifier le footer/navbar/sidebar du template (https://demos.creative-tim.com/material-dashboard-angular2/#/dashboard ) pour qu'il soit utilisable avec le projet Gipsy

-Compréhension de l'environnement

-Réalisation des routes pour accéder à des parties de Gipsy
dans "sidebard.component.ts"

-Suppresion de certains composants inutiles aux projets "Carte Google Map" etc

-Lancement du site avec le Template fonctionnel après correctif du bug index.html, les icones refonctionnent grâce à ça et le site marche.

-Reglage du footer/header/sidebar qui sont fonctionnel, il faut modifier leurs routes et leurs styles.

Correction de quelques soucis :

"Balise <a>" buggé ajout d'un cursor pointeur.

Compréhension de l'erreur css dans les navigables. Quand l'utilisateur n'est pas connecté, la css n'est pas appliqué, il faut corriger.

Suppression de "getTitle" car non fonctionnel et doublon. Cette méthode servait à afficher le titre de l'élément sélectionner.

Réglage de quelque bugs d'imports.

# data[].attributes.attachment_link.readable_text
Bug Balise <a> logo et nom de Gipsy :

    .logo{
        cursor: pointer;
__________________________________________________________________________________________________________________________________________
 (sidebar)
Modification du code affichage logo et nom avec insertion route vers dashboard qui était manquante :

    <a (click)="router.navigate(['dashboard']);" class="simple-text" title="Gestion Inter-Pôles et Systèmes">
        <div class="logo-img">
            <img src="/assets/img/angular2-logo-red.png"/>
        </div>
        GIPSY
    </a>
</div>
__________________________________________________________________________________________________________________________________________
problème index.html résolu : Mais peut être futur installation css de base du projet Gipsy
    <!--     Fonts and icons     -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY-HERE"></script>
__________________________________________________________________________________________________________________________________________
Methode getTitle qui ne fonctionne pas et supprimer du programme :

    getTitle() {
        let title = this.location.prepareExternalUrl(this.location.path());
        let titlee = title.split('/');
        for (let item = 0; item < this.listTitles.length; item++) {
            /*console.log(titlee[1]);
            console.log(this.listTitles[item].path);
            console.log(this.listTitles[item].path.includes(titlee[1]));*/
            if (this.listTitles[item].path === titlee[1] || (this.listTitles[item].path).includes(titlee[1])) {
                return this.listTitles[item].title;
            }
        }
        return 'dashboard';
__________________________________________________________________________________________________________________________________________
Modification et Réalisation du footer :
<footer class="footer">
    <div class="container-fluid">
        <nav class="pull-left">
            <ul>
                <li>
                    <a [routerLink]="['/dashboard']">
                        Home
                    </a>
                </li>
                <li>
                    <a href="http://gmes-etudes/">
                        GMES-etudes
                    </a>
                </li>
                <li>
                    <a href="http://gmes-etudes/glpi/">
                        GPLI
                    </a>
                </li>
            </ul>
        </nav>
        <div class="copyright pull-right">
            &copy;
            {{test | date: 'yyyy'}},
            <img src="assets/img/gif.gif" title="SEP" class="pull-right" style="width:30%"/>
        </div>
    </div>
</footer>
__________________________________________________________________________________________________________________________________________

Se renseigner sur Adminlayout qui gere le CSS :
/*{
    path: '',
    component: AdminLayoutComponent,
    children: [{
      path: '',
      loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'
    }]
  },*/
__________________________________________________________________________________________________________________________________________
Création des routes :
export const ROUTES: RouteInfo[] = [
  
    { path: 'dashboard', title: 'Dashboard',  icon: 'dashboard', class: '' },
    { path: 'materiel', title: 'Matériels',  icon: 'assignment', class: '' },
    //{ path: 'equipement', title: 'Équipements IEG',  icon: 'pe-7s-plugin', class: '' }, A remettre, pour l'instant en commentaire
    { path: 'consommable', title: 'Consommables',  icon: 'handyman', class: '' },
    { path: 'prestation', title: 'Prestations',  icon: 'engineering', class: '' }, 
    //{ path: 'prescription', title: 'Prescriptions',  icon: 'pe-7s-news-paper', class: '' }, A remettre, pour l'instant en commentaire
    { path: 'export', title: 'Exports',  icon: 'backup', class: '' },
    { path: 'fournisseur', title: 'Fournisseurs',  icon: 'supervisor_account', class: '' },



# data[].attributes.body
Objectifs à faire :

Correction Hebdomadaire du Padlet en y ajoutant des captures-d'écrans etc...

Récupération du projet sur un support externe, Cle USB

Analyse composant "AdminLayout" responsable d'une problème des styles CSS dans la sidebar.

Analyse CSS / BS après connexion à Gipsy car bug CSS / BS sur la sidebar.

Correction du footer, du CSS/BS ainsi que certaines images et icones

Correction des routes dans "Adminlayout" ainsi que des routes "privées" avec conditions.

# data[].attributes.body
Le rectangle bleu est une censure, ce sont des données confidentiels

# data[].attributes.body
Ce fichier compressé 7zip contient des informations sur le footer et la navbar réalisé, de plus, elle contient le code HTML pour appeler la sidebar, la navbar et le footer.

# data[].attributes.body
Revoir Bootstrap et le CSS en général

Réviser et approfondir Angular

Compréhension du code de Gipsy et de la template pour l'assimiler

Début livret de stage

# data[].attributes.body
Objectifs de la semaine :

Améliorer l'affichage du site :
(Sidebar, Navbar, panels et le texte en général du site )

Fonctionnement de la méthode "getAccount()" avec le bouton pour accéder aux informations d'un profil

Affichage de la sidebar

-Sidebar en bleu si connecté
-Sidebar en rouge si déconnecté

Notifications fonctionnelles

Mettre tous les icones

Optionnel :

Méthode GetTitle() qui ne fonctionnait pas sur le projet originel

Nom d'utilisateur dans la sidebar

Faits :

La méthode "getAccount()" fonctionne, voir fiche note

La sidebar est rouge quand l'utilisateur est déconnecté, et bleu quand l'utilisateur est connecté.

La sidebar est entièrement fini et animé, j'ai dû rajouté un fond après sélection d'une section précise ( voir note ), il manquait des éléments sur la Template.

La sidebar, footer et navbar sont fini, fonctionnelles avec un belle affichage

Voir notes

# data[].attributes.body
Ce fichier compressé 7zip contient des captures d'écran de la résolution du problème de la méthode "getAccount()" permettant d'afficher les informations d'un profil

La méthode ne fonctionner pas car "currentUserData" n'était" pas trouvé dans le ngInit(), erreur d'import de ma part.

# data[].attributes.headline
Resolution condition BootStrap pour la SideBar

# data[].attributes.subject
Resolution condition BootStrap pour la SideBar

# data[].attributes.body
Ce fichier compressé 7zip contient des captures d'écran de la résolution du problème au niveau de la Sidebar et de sa condition Bootstrap impliquant un style spécifique.

Quand la condition "!authenticationService.userLoggedIn" ( soit quand l'utilisateur n'est pas connecté ) :

Dans la classe "class="sidebar"", le style de la page sera en rouge :

class="sidebar-background" style="background:linear-gradient( rgba(255, 0, 0, 0.5) 100%, rgba(255, 0, 0, 0.5)100%), url(assets/img/sidebar-1.jpg)">

Et inversement pour "quand l'utilisateur est connecté"

Voir fichier compressé pour plus de détails sur le code et pour voir les Screenshots.

Le dossier par la suite comporte toutes les solutions CSS / SCSS / Bootstrap sur la sidebar

# data[].attributes.headline
Apercu site avec sidebar, navbar et footer réalisés

# data[].attributes.subject
Apercu site avec sidebar, navbar et footer réalisés

# data[].attributes.body
Voici un aperçu du site avec la sidebar, footer et Navbar terminé, elles possèdent des animations, les routes fonctionnent, une image de fond y est incrusté, les icones fonctionnent.

Il manque juste l'ajout de la barre de recherche, des notifications sur la navbar.

# data[].attributes.body
Objectifs :

-Faire les notifications

-Faire chaque partie de la navigation (Dashboard, export, composants, fournisseurs etc..) et ne plus avoir de bugs d'affichage sur leur panel

Corrigé le bug de cliping de la barre de recherche

Corrigé le but de l'image de la sidebar en expansion

Le projet a bien avancé, l'affichage du site est bien, cependant il faut maintenant compléter les différents onglets pour ne plus obtenir de bug d'affichage. Il faudra donc optimiser le bootstrap, l'html et le css de chaque onglet.

Onglet "Export"

J'ai fini la réalisation de l'onglet "Export", j'ai modifié des éléments de son Bootstrap tel que les "rows", les boutons, ou encore directement le header. Cela m'a pris du temps mais la page est maintenant opérationnel et plus jolie que l'originel.
(voir fiche note export)

Onglet prescription

J'ai rajouté son sous-onglet permettant d'accéder au liste de scénario. J'ai crée un bouton avec un icone et le chemin sur l'icone mène à la page.

J'ai aussi corrigé le bouton "nouvelle prescription", l'affichage n'est plus buggué et il est opérationnel, cependant, il faudrait voir si le tableau fonctionne en test ou non et rajouter des boutons plus visible.

Cet onglet doit donc uniquement obtenir des modifications CSS
(voir fiche note)

Onglet fournisseur

Comme l'onglet Export, j'ai beaucoup travaillé sur cet onglet aujourd'hui, il a maintenant un bon affichage grâce au modification Bootstrap que j'ai apporté cependant il faut finir certains panels sur les boutons

Le bouton "nouveau fournisseur".
Le bouton "gérer un achat" est fini
Le bouton "retour consultation" n'est pas entièrement fini
Le bouton "consultation d'obsolescence" n'est pas entièrement fini

Onglet prestation et onglet consommable :

Ils ont un panel identique sur leur bouton, il faudra donc le réaliser et aussi compléter le style de leur page respectif.

Onglet Dashboard

Compléter la font sinon fini

Onglet Matériels et équipements

Ils ont un panel identique sur leur bouton, il faudra donc le réaliser et aussi compléter le style de leur page respectif

A chaque fois que je compléterais entièrement un onglet je posterai un Avant / Après de mon travail et une comparaison vis à vis de la version v6 Gipsy.

# data[].attributes.body
Ce fichier compressé contient le code et des apercus de l'affichage concernant les "exports"

A noté que ce sont majoritairement de grosse modification Bootstrap et CSS mais le code sera cependant expliqué à certains moments.

Pour exemple, la dernière <div> fonctionne uniquement si le contenu de chaque listbox est selectionné

# data[].attributes.body
Objectifs:

Faire le CSS, fonts etc de chaque onglets.

Finir chaque onglet

Résoudre les bugs précédemment cité concernant l'extension de l'image de la sidebar et le clping de la barre de recherche

Concernant BS/CSS/SCSS

Voici des lignes de code qui m'aideront à résoudre certains aspect du CSS du projet.
Je mettrais un dossier contenant avant après du css et une comparaison au projet V6.

Bug de cursor pointeur et couleur  :

Certains éléments du projet ne possède (étrangement) pas de curseur pointeur comme notamment les tableaux. Il faut donc les ajouter :
style="cursor: pointer;" dans chaque balise <mat-cell>.
Et je rajoute la couleur simplement par un : color:blue;" dans le style.
J'accentue aussi la police d'écriture : font-weight:bolder;
Exemple tableau fournisseur :

<mat-cell *matCellDef="let element">
<a style="cursor: pointer; color:#1f81d6; font-weight:bolder;" (click)="getDetails(element.id)" [contextMenu]="basicMenu"
[contextMenuSubject]="element">{{ element.adresse }}</a>
</mat-cell>

Maintenant que j'ai réglé ce tableau, je peux tout simplement copier coller le style sur toute les autres pages

Modification des titres :

Comme dans le titre, j'ajoute le texte en gras dans chaque titre et je l'espace vers la gauche.

Exemple dans fournisseur :

<h4 class="title" style="font-weight: bold; margin-left: 15px;">Liste des fournisseurs</h4>

Maintenant que j'ai réglé les titres, je peux simplement copier coller le style sur toute les autres pages

Pour ne pas recopier les titres j'ai rajouté dans les fichers scss :
.title{

font-weight: bold;

margin-left: 15px;

}

CSS Terminé au niveau des titres et tableau

Résolution Sidebar

background-size: auto 1000px;

Panel "selection colonne":

Tous les icones ont étaient modifié et sont fonctionnelles

Un gros bug sur le module "handsontable" permettant d'afficher des tableaux a été résolu"

Dans angular.json -> Styles, déclarer le styles.scss

Le site a beaucoup avancé, cependant vu la quantité énorme d'onglet je ne montrerai pas chaque changement en capture d'écran

# data[].attributes.body
Dans chaque SCSS je rajoute :
.mat-cell{

cursor: pointer;

color:#1f81d6;

font-weight:bolder;

}
.mat-cell:link {

text-decoration: none;

}

.mat-cell:visited {

text-decoration: none;

}

.mat-cell:hover {

text-decoration: underline;

}

.mat-cell:active {

text-decoration: underline;

}

.title{

font-weight: bold;

margin-left: 15px;

}

Si il y a des liens :
a{

cursor: pointer;

color:#1f81d6;

}

a:link {

text-decoration: none;

}

a:visited {

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

a:active {

text-decoration: underline;

}

# data[].attributes.body
Objectifs :

Dans l'onglet fournisseurs :

-Corrigé la textarea qui prend toute la page
-Modifier l'emplacement de certains boutons et ajouter un bouton :
Valider et Retour à gauche et le reste à droite
-Ajouter un "input" pour déposer un fichier dans le bouton consultation

Dans les onglets Prestation et Consommable :

-Corrigé l'affichage de leur méthode "nouvelle prestation / consommable"

Dans l'onglet Equipements IEG :

Tout faire comme hier, affichage, icone etc...

Dans l'onglet Matériel :

-Ajouter un cursor pointeur quand on sélectionne une référence-fournisseur
Modifier l'emplacement de certains boutons à l'aide de Bootstrap

Quand tout sera fini, on attaquera le développement de la barre de recherche avec une partie "backend"
Toutes les modifications apportaient jusqu'ici relèvent du frontend et du développement web design

Faits

Onglet matériel fait à 100%

Onglet DashBoard fait à 100%

Onglet Export fait à 100%

Onglet Prescription fait à 100%

Tout est réalisé à 100% !

# data[].attributes.body
Le projet Gipsy comporte énormément de bouton, plus de 100 boutons en tout. Il est donc évident que je ne vais pas poster chaque code de modification de chaque bouton.

Afin de changer rapidement chaque bouton, j'utilise l'historique de recherche de Visual Studio Code et je copie un bouton préalablement créer par moi-même sur le bouton en question concernant sont type : Annuler / Valider...

Cependant, certains boutons se ressemble, je vais donc expliquer les types de boutons de l'application et certaines de leurs méthodes.

Pour les boutons valider :

class="btn-success btn btn-fill pull-right"
C'est un bouton, vert "success", et remplis de sa couleur, vers la droite "pull-right".

Pour les boutons Annuler / Quitter :

class="btn-danger btn btn-fill pull-right"
Btn-danger donne une couleur rouge, c'est un bouton entièrement remplis, vers la droite.

# data[].attributes.body
Voici un fichier compressé 7zip contenant des informations sur mon travail sur l'onglet materiel

# data[].attributes.body
Aujourd'hui j'ai fini la réalisation du site, il ne reste que quelques bugs mineurs à voir avec Fabrice lors de son retour.
Les notifications sont terminées

J'ai donc aujourd'hui commencé un récapitulatif de ce que j'ai fait, avec une explication appronfondis de certaines lignes de codes.

Bien évident, je ne pourrais pas mettre tout dans le compte rendu du projet étant donné que certaines parties de code font plus de 1000 lignes et je ne les ai jamais traité. Cependant, je compte expliquer certaines méthodes et leurs actions, notamment les méthodes lié à des listes ou des tableaux.

A la suite de cette semaine, je vais devoir la barre de recherche du site. Donc, je vais m'attaquer à la partie backend du projet, et je vais développer tout ça.

Il reste quelque bugs sur le site, notamment avec un input file non fonctionnel que je dois voir avec Fabrice

En outre cette semaine, j'ai énormément travaillé sur l'interface du site avec BootStrap et CSS
J'uploaderai toutes les captures d'écrans et modification de code que j'ai effectué lors de cette troisième semaine

# data[].attributes.body
Le site est maintenant terminé.
Objectifs

Développer la barre de recherche

Développer le bouton Input pour "sélectionner un fichier"

Corriger quelques bugs :

-Mettre l'interface "login" sur le "dashboard"

Message :
"Dès que l'utilisateur tape un caractère dans la barre de recherche, tu vas faire des "appels Ajax" en passant par un service Angular. Côté backend (python/Django), il faut faire un "service REST" qui va chercher la chaine passée en paramètre de la requête HTTP dans les tables de la base de données. Regarde la recherche "full text" de PostgreSQL.

Barre de recherche

Quand on écrit un mot clé et qu'on le recherche, ça nous redirige vers une page affichant une liste contenant plusieurs colonnes :
-Le nom des tables affichant le mot clé
-Toutes les propriétés, Id etc...

Quand on clique sur l'élément de la liste, on est redirigé vers l'élément en question

Deux Solutions possible :

-Base de données : Utilisé un SELECT / LIKE
-Full-text -> langage naturel

BackEnd -> Python.

# data[].attributes.body
Hopital Urgence arrêt de travail
J'ai repris le travail le 15/02 malgré l'AT

# data[].attributes.body
Je dois toujours effectuer la barre de recherche mais c'est très compliqué surtout côté BACKEND

J'ai trouvé une ressource pour m'aider :
https://github.com/ParentJA/example-search

Je dois faire une recherche "full text"

J'ai réalisé le code suivant :

serializer_class = RechercheSerializer

def get_queryset(self):

query = self.request.query_params.get('query')

if query is None:

return Materiel.objects.none()

search_vector = (

SearchVector('id') +

SearchVector('reference_ieg')

)

return Materiel.objects.annotate(

search_vector=search_vector

).filter(search_vector=SearchQuery(query))

Problème, il y a une erreur de "GET", il m'est impossible d'utiliser le GET

# data[].attributes.body
Unaccented query

By activating the unaccent PostgreSQL module, we can use the “unaccent” extension.

Python

from django.contrib.postgres.operations import UnaccentExtension
class Migration(migrations.Migration):
    ...
    operations = [
        UnaccentExtension(),
        ...
    ]

SQL

CREATE EXTENSION unaccent;

We can search without worrying about accented characters, useful in different languages.

Python

Author.objects.filter(
  name__unaccent='Helene Joy'
).values_list('name', flat=True))

SQL

SELECT "blog_author"."name"
  FROM "blog_author"
 WHERE UNACCENT("blog_author"."name") = (UNACCENT('Helene Joy'))

Output

['Hélène Joy']

# data[].attributes.body
Fabrice m'a aidé côté backend
J'ai maintenant le code permettant d'effectuer les recherches, cependant il y a une erreur au niveau du parametre query prenant le mot saisie par l'utilisateur.
De plus je dois ajouter les "searchrank" pour mieux trier les recherches
j'ai complété le code en ajoutant les defs pour chaque table

class Recherche(View):

def __init__(self):

super().__init__()

self.logger = logging.getLogger('backend')

def post(self, request: HttpRequest, *args, **kwargs):

routename = resolve(request.path_info).url_name

query = request.GET.get('query', None)

self.logger.debug('routename is {}'.format(routename))

self.logger.debug('arguments are : {}'.format(kwargs))

self.logger.debug('query terms are : {}'.format(query))

if routename == 'recherche':

data = []

data += self.filter_materiels(query)

data += self.filter_equipements(query)

data += self.filter_prestations(query)

data += self.filter_conso(query)

data += self. filter_prescriptions(query)

data += self.filter_fournisseurs(query)

return HttpResponse(json.dumps(data), content_type='application/json')

else:

raise Http404('pas de données')

def filter_materiels(self, query):

lignes = Materiel.objects.annotate(search=SearchVector('type_materiel', 'famille','reference_ieg','version','libelle', 'equipement', 'qualification_particuliere', 'user_modification', 'date_modification')).filter(search=query)

data = []

for row in lignes:

data_row = {

'id': row.id,

'type': 'materiel',

'libelle': '{} / {} / {} / {} / {} / {} / {} / {} / {}'.format(row.type_materiel, row.famille, row.reference_ieg, row.version, row.libelle, row.equipement, row.qualification_particuliere, row.user_modification, row.date_modification)

}

data.append(data_row)

return data

def filter_equipements(self, query):

lignes = TypeMateriel.objects.annotate(search=SearchVector('libelle', 'famille', 'alerte_cq', 'assemblage')).filter(search=query)

data = []

for row in lignes:

data_row = {

'id': row.id,

'type': 'type_materiel',

'libelle': '{} / {} / {} / {}'.format(row.libelle, row.famille, row.alerte_cq, row.assemblage)

}

data.append(data_row)

return data

def filter_prestations(self, query):

lignes = Prestation.objects.annotate(search=SearchVector('reference_ieg', 'famille', 'type', 'origine')).filter(search=query)

data = []

for row in lignes:

data_row = {

'id': row.id,

'type': 'fourniture',

'libelle': '{} / {} / {} / {}'.format(row.reference_ieg, row.famille, row.type, row.origine)

}

data.append(data_row)

return data

def filter_conso(self, query):

lignes = Consommable.objects.annotate(search=SearchVector('reference_ieg', 'famille', 'type', 'origine')).filter(search=query)

data = []

for row in lignes:

data_row = {

'id': row.id,

'type': 'fourniture',

'libelle': '{} / {} / {} / {}'.format(row.reference_ieg, row.famille, row.type, row.origine)

}

data.append(data_row)

return data

def filter_prescriptions(self, query):

lignes = Fournisseur.objects.annotate(search=SearchVector('affaire','document_fdt_id','document_lma_id','user_modification',' date_modification')).filter(search=query)

data = []

for row in lignes:

data_row = {

'id': row.id,

'type': 'prescription',

'libelle': '{} / {} / {} / {} / {}'.format(row.affaire,row.document_fdt_id,row.document_lma_id,row.user_modification,row.date_modification)

}

data.append(data_row)

return data

def filter_fournisseurs(self, query):

lignes = Fournisseur.objects.annotate(search=SearchVector('raison_sociale','adresse','code_postal','ville','site_web','tel_accueil', 'commentaire')).filter(search=query)

data = []

for row in lignes:

data_row = {

'id': row.id,

'type': 'fournisseur',

'libelle': '{} / {} / {} / {} / {} / {} / {}'.format(row.raison_sociale, row.adresse, row.code_postal, row.ville, row.site_web, row.tel_accueil, row.commentaire)

}

data.append(data_row)

return data

# data[].attributes.body
La recherche dans un champ unique fonctionne bien mais est plutôt limitée. Les instances Entry que nous recherchons appartiennent à un Blog, qui possède un champ tagline. Pour interroger les deux champs, utilisez un vecteur SearchVector:

>>> from django.contrib.postgres.search import SearchVector
>>> Entry.objects.annotate(
...     search=SearchVector('body_text', 'blog__tagline'),
... ).filter(search='Cheese')
[<Entry: Cheese on Toast recipes>, <Entry: Pizza Recipes>]

Les paramètres à SearchVector peuvent être n’importe quelle Expression ou le nom d’un champ. Plusieurs paramètres seront concaténés par des espaces afin que le document de recherche les inclue tous.

Les objets SearchVector peuvent être combinés ce qui permet de les réutiliser. Par exemple :

>>> Entry.objects.annotate(
...     search=SearchVector('body_text') + SearchVector('blog__tagline'),
... ).filter(search='Cheese')
[<Entry: Cheese on Toast recipes>, <Entry: Pizza Recipes>]

Voir Modification de la configuration de recherche et Pondération des requêtes pour une explication des paramètres config et weight.

# data[].attributes.body
class SearchRank(vector, query, weights=None, normalization=None, cover_density=False)¶

Nous avons jusqu’ici renvoyés les résultats pour lesquels au moins une correspondance entre le vecteur et la requête est possible. Il est probable que vous souhaitiez trier les résultats par une certaine notion de pertinence. PostgreSQL fournit une fonction de classement qui prend en compte la fréquence d’apparition des termes recherchés dans le document, la proximité de ces termes dans le document et l’importance de l’endroit où les termes se trouvent dans le document. Plus la correspondance est bonne, plus le classement sera élevé. Pour trier par pertinence :

>>> from django.contrib.postgres.search import SearchQuery, SearchRank, SearchVector
>>> vector = SearchVector('body_text')
>>> query = SearchQuery('cheese')
>>> Entry.objects.annotate(rank=SearchRank(vector, query)).order_by('-rank')
[<Entry: Cheese on Toast recipes>, <Entry: Pizza recipes>]

Voir Pondération des requêtes pour une explication du paramètre weights.

Définissez le paramètre cover_density à True pour activer le classement selon densité de couverture, ce qui signifie que la proximité des termes de recherche correspondants est prise en compte.

Indiquez un nombre entier dans le paramètre normalization pour contrôler la normalisation du classement. Ce nombre est un masque binaire, ce qui permet de combiner plusieurs comportements

>>> from django.db.models import Value
>>> Entry.objects.annotate(
...     rank=SearchRank(
...         vector,
...         query,
...         normalization=Value(2).bitor(Value(4)),
...     )
... )

La documentation PostgreSQL contient plus de détails sur les différentes options de normalisation de classement.

New in Django 3.1:Les paramètres normalization et cover_density ont été ajoutés.

# data[].attributes.body
-Documents administratif
-Se renseigner sur les requetes POST de Django
-Le frontend pour effectuer le post fonctionne
-Regler le bug de la query

Les utilisateurs peuvent maintenant effectuer une recherche sur toute la BDD
La pagination est présente à l'aide d'un module Angular

Il faut rajouter maintenant la barre de filtre ainsi que les liens cliquables

# data[].attributes.body
Attention, il n'y a içi que la recherche pour les materiels, les autres recherches vont être implanter par la suite

import json

import django

from django.core.exceptions import ObjectDoesNotExist

from django.core.signals import request_finished

from django.dispatch import receiver

from django.http import HttpResponse, HttpRequest, HttpResponseNotFound, Http404

import logging

from django.shortcuts import get_object_or_404

from django.urls import resolve

from django.views import View

from backend import models

from backend.tools import serializers

from rest_framework import viewsets

from django.db.models import Q

from rest_framework import serializers

from django.contrib.postgres.search import SearchQuery, SearchVector, SearchRank

class Recherche(View):

def __init__(self):

super().__init__()

self.logger = logging.getLogger('backend')

def post(self, request: HttpRequest, *args, **kwargs):

routename = resolve(request.path_info).url_name

if routename == 'recherche':

request_body = json.loads(request.body.decode('utf-8'))

query = request_body['query']

self.logger.debug('query is: {}' .format(query))

data = []

data += self.filter_materiels(query)

return HttpResponse(json.dumps(data), content_type='application/json')

else:

raise Http404('pas de données')

def filter_materiels(self, query):

lignes= models.Materiel.objects.annotate(search=SearchVector('reference_ieg','libelle')).filter(search=query)

data = []

for row in lignes:

data_row = {

'id': row.id,

'type': 'materiel',

'libelle': '{} / {}'.format(row.reference_ieg, row.libelle)

}

data.append(data_row)

return data

# data[].attributes.body
Voici l'html de ma barre de recherche

# data[].attributes.attachment_link.readable_text
Rechercher :
Rechercher

R��sultat de la recherche :

Type d'information {{ element.type }} Le libell�� : {{ element.libelle }}

# data[].attributes.body
Voici le composant contenant les méthodes

# data[].attributes.body
Voici le service pour effectuer la connexion backend avec la requete ajax

import { Injectable } from '@angular/core';

import {HttpClient, HttpParams,  HttpHeaders} from '@angular/common/http';

import 'rxjs/add/operator/map'

import {Router} from '@angular/router';

import {CookieService} from 'ngx-cookie-service';

import {Refresh_componentService} from './refresh_component.service';

import { RechercheInterface } from '../rechercheInterface';

import { Observable } from 'rxjs/Rx';

import {Global} from '../globals';

import {MessageService} from './message.service';

@Injectable({

providedIn: 'root'

})

export class RechercherService {

private urlrecherche = Global.BACKEND_URL + 'recherche/';  // URL to web api

httpOptions = {

headers: new HttpHeaders({'Content-Type': 'application/json'})

};

constructor(private http: HttpClient, private router: Router, private cookieService: CookieService, private refreshComponent: Refresh_componentService, private messageService: MessageService) {

}

search(query: string): Observable<RechercheInterface[]> {

//    const params: HttpParams = new HttpParams().set('query', query);

const params = {'query': query};

return this.http.post<RechercheInterface[]>(this.urlrecherche, params, this.httpOptions);

}

}

# data[].attributes.body
Voici l'interface

export class RechercheInterface {

public id : number;

public type : string;

public libelle : string;

}

//Transmit par les composants et les controles Angular

# data[].attributes.headline
J'ai aussi réalisé la redirection en cliquant sur les liens de recherche

# data[].attributes.subject
J'ai aussi réalisé la redirection en cliquant sur les liens de recherche

# data[].attributes.body
https://hasangalakdinu.medium.com/how-to-call-a-function-in-another-component-angular-using-rxjs-3f2e85920705
Pour utiliser la méthode d'un composant dans un autre composant

getDetailsMateriel(materiel_id) {

this.router.navigate(['/materiel-details/', materiel_id]);

}

getDetailsEquipement(materiel_id) {

this.router.navigate(['/equipement-details/', materiel_id]);

}

getDetailsFournisseur(materiel_id) {

this.router.navigate(['/fournisseur-details/' , materiel_id]);

}
Redirection à l'aide d'un router navigate

# data[].attributes.body
Réglage du soucis de l'onglet Prescription ainsi que de l'animation de déconnexion qui affichait la sidebar en bleu alors que l'utilisateur est déconnecté

Dans home.components.ts, suppresion de :
this.refreshComponent.sendCustomEvent('login'); // Pour afficher le nom d'utilisateur de la navbar

this.currentUserData = JSON.parse(sessionStorage.getItem('currentUser'));

this.authenticationService.changeLoginStatus(true);

# data[].attributes.body
Ce bug provoquait une duplication du fond de la sidebar

resolution : background-size: cover;"

# data[].attributes.headline
Resolution form inutilisable quand un dialog est ouvert

# data[].attributes.subject
Resolution form inutilisable quand un dialog est ouvert

# data[].attributes.body
A l'aide de "autoFocus: false", quand un dialog est ouvert, le fond est desactivé

# data[].attributes.headline
Dossier contenant frontend / backend de mon programme

# data[].attributes.subject
Dossier contenant frontend / backend de mon programme

# data[].attributes.body
-Attestation de stage
-Mise en place de "TortoiseSVN" pour récupérer mon travail

La recherche est terminé
Correction de bug...

Il ne reste qu'a modifier le input dans fournisseur pour la semaine prochaine et réaliser le rapport à l'aide de paddlet, de mon travail ainsi que des fichiers