Блог

У меня есть панель инструментов в главном компоненте, из которой я могу перейти к «gestionUtilisatuerComponent», используя всплывающий компонент, в представлении «gestionUtilisatuerComponent» у меня есть ionic select, когда я нажимаю на него, кажется, что он нажат, но всплывающее окно не отображается, и когда я возвращаюсь к предыдущему просмотру, я получаю всплывающее окно с выбранными параметрами.

gestion-utilisateur.html

 <ion-header>
  <ion-toolbar color="warning">
    <ion-title mode="ios">{{toolbarTitle}}</ion-title>

    <ion-buttons slot="start">
      <ion-button slot="start" (click)="goBack()" fill="clear" size="large" slot="icon-only">
        <ion-icon class="customIconToolbar" color="light" name="arrow-back-circle-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>

  <form [formGroup]="addForm">
    <ion-item>
      <ion-label>Type unité</ion-label>
      <ion-select name="selectedRegion" (ionChange)="getSelectedTypeUnite($event)">
        <ion-select-option *ngFor="let type of typesUnites" [value]="type">{{type.name}}</ion-select-option>
      </ion-select>
    </ion-item>
    <ion-item>
      <ion-label>Régions</ion-label>
      <ion-select name="selectedRegion" (ionChange)="getSelectedRegion($event)">
        <ion-select-option *ngFor="let rg of regions " [value]="rg">{{rg.region}}</ion-select-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <ion-label>Unités</ion-label>
      <ion-select name="selectedSousRegion" (ionChange)="getSelectedUnite($event)">
        <ion-select-option *ngFor="let u of unites " [value]="u">{{u.cUnite}}</ion-select-option>
      </ion-select>
    </ion-item>
    <div id="divInfoUser">
      <ion-item>
        <ion-label position="floating">First Name</ion-label>
        <ion-input formControlName='fName' requiered name="fName"
          [ngClass]="{ 'is-invalid': submitted amp;amp; addForm.get('fName').errors }"></ion-input>
      </ion-item>
      <div *ngIf="submitted amp;amp; addForm.get('fName').errors" class="invalid-feedback">
        <div *ngIf="addForm.get('fName').errors.required">username is required</div>
      </div>
      <ion-item>
        <ion-label position="floating">Last Name</ion-label>
        <ion-input formControlName='lName' requiered name="lName"
          [ngClass]="{ 'is-invalid': submitted amp;amp; addForm.get('lName').errors }"></ion-input>
      </ion-item>
      <div *ngIf="submitted amp;amp; addForm.get('lName').errors" class="invalid-feedback">
        <div *ngIf="addForm.get('lName').errors.required">username is required</div>
      </div>
      <ion-item>
        <ion-label position="floating">Matricule</ion-label>
        <ion-input formControlName='matricule' requiered name="matricule"
          [ngClass]="{ 'is-invalid': submitted amp;amp; addForm.get('matricule').errors }"></ion-input>
      </ion-item>
      <div *ngIf="submitted amp;amp; addForm.get('matricule').errors" class="invalid-feedback">
        <div *ngIf="addForm.get('matricule').errors.required">username is required</div>
      </div>


      <ion-item>
        <ion-label position="floating">Email</ion-label>
        <ion-input formControlName='email' requiered type="email" name="email"
          [ngClass]="{ 'is-invalid': submitted amp;amp; addForm.get('email').errors }"></ion-input>
      </ion-item>
      <div *ngIf="submitted amp;amp; addForm.get('email').errors" class="invalid-feedback">
        <div *ngIf="addForm.get('email').errors.required">username is required</div>
      </div>

      <ion-item>
        <ion-label position="floating">Téléphone</ion-label>
        <ion-input formControlName='telephone' requiered type="telephone" name="telephone"
          [ngClass]="{ 'is-invalid': submitted amp;amp; addForm.get('telephone').errors }"></ion-input>
      </ion-item>
      <div *ngIf="submitted amp;amp; addForm.get('telephone').errors" class="invalid-feedback">
        <div *ngIf="addForm.get('telephone').errors.required">username is required</div>
      </div>



      <ion-item>
        <ion-label>Profils</ion-label>
        <ion-select name="selectedSousRegion" (ionChange)="getSelectedProfil($event)">
          <ion-select-option *ngFor="let p of profils " [value]="p">{{p.profil}}</ion-select-option>
        </ion-select>
      </ion-item>
    </div>
    <ion-item id="agent">
      <ion-label>Agents</ion-label>
      <ion-select name="selectedSousRegion" (ionChange)="getSelectedAgents($event)">
        <ion-select-option *ngFor="let a of agents " [value]="a">{{a.matricule}}--{{a.nom}}--{{a.prenom}}
        </ion-select-option>
      </ion-select>
    </ion-item>
    <ion-button id="ajout" (click)="submit()" type="submit" expand="full" color="success">Ajouter</ion-button>
    <ion-button id="block" (click)="block()" type="submit" expand="full" color="danger">bloqué</ion-button>

  </form>
</ion-content>
  

GestionUtilisateurPage.ts

 import { Component, OnInit, Inject } from '@angular/core';
import { Utilisateur } from '../models/UtilisateurModel';
import { UtilisateurService } from '../service/utilisateur.service';
import { ProfilModel } from '../models/profilModel';
import { NgForm, FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
import { RegionModel } from '../models/RegionModel';
import { UniteModel } from '../models/UniteModel';
import { ToastController, AlertController } from '@ionic/angular';
import { async } from 'rxjs/internal/scheduler/async';
import { Location, DOCUMENT } from '@angular/common';
import { IonicToastService } from '../service/ionic-toast.service';
import { resolve } from 'url';
import { promise } from 'protractor';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-gestion-utilisateur',
  templateUrl: './gestion-utilisateur.page.html',
  styleUrls: ['./gestion-utilisateur.page.scss'],
})
export class GestionUtilisateurPage implements OnInit {

  addForm: FormGroup;
  profils: ProfilModel[]
  regions: RegionModel[]
  unites: UniteModel[]
  selectedRegion: RegionModel
  selectedProfil: ProfilModel
  selectedTypeUnite: string
  selectedUnite: UniteModel
  selectedAgent: Utilisateur
  submitted: boolean = false
  operation: string
  hideSubmit: boolean = false
  hideDivLabels: boolean = false
  hideButtonBlock: boolean = true
  toolbarTitle: string
  agents: Utilisateur[]
  //typesUnite=["ULS","UGS","CSC"]
  typesUnites = [{ name: "ULS" }, { name: "UGS" }, { name: "CSC" }]


  constructor(private formBuilder: FormBuilder, private utilisateurService: UtilisateurService, private location: Location, private router: Router,
    public alertController: AlertController, private toastService: IonicToastService, private route: ActivatedRoute, @Inject(DOCUMENT) document) {
    this.route.queryParams.subscribe(params => {
      this.operation = params["operation"]
      if (this.operation === "block") {
        document.getElementById('divInfoUser').style.display = 'none';
        document.getElementById('ajout').style.display = 'none';
        document.getElementById('agent').style.display = 'inherit';
        document.getElementById('block').style.display = 'inherit';
        this.toolbarTitle = "Bloqué Utilisateur"
      }
      else if (this.operation === "ajout") {
        document.getElementById('ajout').style.display = 'inherit';
        document.getElementById('block').style.display = 'none';
        document.getElementById('divInfoUser').style.display = 'inherit';
        document.getElementById('agent').style.display = 'none';
        this.toolbarTitle = "Ajouter Utilisateur"
      }
    });

  }

  ngOnInit() {
    this.getListProfils()
    this.getListRegions()
    //  this.getListUnites()
    this.addForm = this.formBuilder.group({
      fName: (['', [Validators.required, this.noWhitespaceValidator]]),
      lName: (['', [Validators.required, this.noWhitespaceValidator]]),
      matricule: (['', [Validators.required, this.noWhitespaceValidator]]),
      telephone: (['', [Validators.required, this.noWhitespaceValidator, Validators.pattern("[0-9 ]{8}")]]),
      email: (['', [Validators.required, this.noWhitespaceValidator, Validators.email]])
    })
  }
  getListProfils() {
    return this.utilisateurService.getProfiles().subscribe(
      data => {
      this.profils = data
        console.log(this.profils)
      })
  }
  getListRegions() {
    return this.utilisateurService.getRegions().subscribe(
      data => {
      this.regions = data
        console.log(this.regions)
      })
  }

  getSelectedTypeUnite(type) {
    console.log(type)
    return this.selectedTypeUnite = type.detail.value.name
  }
  getSelectedRegion(region) {

    this.selectedRegion = region.detail.value
    console.log(region)
    return this.utilisateurService.getUnites(this.selectedRegion.cRegion, this.selectedTypeUnite).subscribe(
      data => {
      this.unites = data
        console.log(this.unites)
      })
  }

  getSelectedUnite(unite) {
    console.log(unite.detail.value)
    this.selectedUnite = unite.detail.value
    console.log(this.selectedUnite)

    return this.utilisateurService.getUsers(this.selectedRegion.cRegion, this.selectedUnite.cUnite).subscribe(
      data => {
      this.agents = data
        console.log(this.agents)

      })
  }
  getSelectedProfil(p) {
    return this.selectedProfil = p.detail.value
  }
  get formValidation() {
    return this.addForm.controls;
  }
  async createAlert(msg: string) {
    const alert = await this.alertController.create({


      header: "Erreur",
      message: msg,
      buttons: ['OK'],

    });
    await alert.present()

    console.log("not ok")
  }


  submit(form: NgForm) {

    const user = new Utilisateur()
    this.submitted = true;
    if (this.addForm.invalid) {
      return this.createAlert("Veuillez vérifier les données entrées !!")
    }
    user.nom = this.formValidation.fName.value
    user.prenom = this.formValidation.lName.value
    user.matricule = this.formValidation.matricule.value
    user.login = this.formValidation.matricule.value
    user.motPasse = this.formValidation.matricule.value
    user.email = this.formValidation.email.value
    user.tel = this.formValidation.telephone.value
    user.cRegion = this.selectedRegion.cRegion
    user.cTypeUnite = this.selectedTypeUnite
    user.cUnite = this.selectedUnite.cUnite
    user.idProfil = this.selectedProfil.idProfil
    this.utilisateurService.ajouterUtilisateur(user).subscribe(response => {
      // prints 200

      this.toastService.showToast("utilisateur crée")
      this.router.navigate(["home"])
      console.log(response.status);
    },
      (error) => {
        // prints 403
        this.createAlert("Matricule affécté !!")


        console.log("not ok")
        console.log(error.status);
        // prints Permission denied
        console.log(error.error);

      });
  }


  public noWhitespaceValidator(control: AbstractControl) {
    if (control amp;amp; control.value amp;amp; !control.value.replace(/s/g, '').length) {
      control.setValue('');
    }
    return null;
  }


  goBack() {
    this.location.back()
  }


  getSelectedAgents(p) {
    return this.selectedAgent = p.detail.value
  }

  block(form: NgForm) {

    let user = new Utilisateur()
    this.submitted = true;

    user = this.selectedAgent
    this.utilisateurService.blockUtilisateur(user).subscribe(response => {
      // prints 200

      this.toastService.showToast("utilisateur bloqué")
      console.log(response.status);
      this.router.navigate(["home"])
    },
      (error) => {
        // prints 403
        this.createAlert(error.error.message)


        console.log("not ok")
        console.log(error.status);
        // prints Permission denied
        console.log(error.error);

      });
  }



}
  

Home.html

 <ion-app>

  <ion-menu contentId="my-content" class="my-custom-menu">
    <ion-header>
      <ion-toolbar color="dark">
        <ion-title mode="ios">
          <ion-label class="ion-text-center">
            <b>Menu</b>
          </ion-label>
        </ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div *ngFor="let menu of typesOt let i=index">
        <ion-menu-toggle auto-hide="true">
          <ion-item button *ngIf="!(menu.cTypeOt==3);" (click)="Goto(menu)" color="light" detail="true" lines="full"
            type="button" routerLinkActive="active">
            <!-- <ion-icon slot="start" name="{{menu.icon}}"></ion-icon>-->
            <ion-label class="my-label">
              <font size="2">{{menu.typeOt}}</font>
            </ion-label>
          </ion-item>
        </ion-menu-toggle>

        <ion-item button *ngIf="menu.cTypeOt==3" (click)="menu.open =!menu.open" color="light" detail="false"
          lines="full" [class.active-parent]="menu.open">
          <ion-icon color="medium" class="customIconToolbar" slot="end" name="chevron-down-circle-outline"
            *ngIf="!menu.open"></ion-icon>
          <ion-icon color="medium" class="customIconToolbar" slot="end" name="chevron-up-circle-outline"
            *ngIf="menu.open"></ion-icon>

          <ion-label class="my-label">
            <font size="2">{{menu.typeOt}}</font>
          </ion-label>
        </ion-item>
        <ion-list *ngIf="menu.open">

          <ion-menu-toggle auto-hide="true">
            <ion-item button (click)="Goto(menu)" color="light" detail="true" lines="full" type="button">

              <ion-label class="my-label">
                <font size="2">Consulter Ots Raccordement</font>
              </ion-label>
            </ion-item>
            <ion-item [hidden]="hideAffectationEquipe" button (click)="GotoRaccordementAffecterEquipe(menu)"
              color="light" detail="true" lines="full" type="button">

              <ion-label class="my-label">
                <font size="2">Affectation d'équipes</font>
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>

      </div>

      <ion-item [hidden]="hideAjouterEquipe" button routerLink="/ajouterequipe" color="light" detail="true" lines="full"
        type="button">

        <ion-label class="my-label">
          <font size="2"> Ajouter Equipe </font>
        </ion-label>
      </ion-item>
    </ion-content>
  </ion-menu>

  <ion-router-outlet id="my-content"></ion-router-outlet>
  <ion-content>
    HAHAHAHHAHAHAHAHA
  </ion-content>
  <ion-header>
    <ion-toolbar id="homeToolbar" color="{{tbColor}}">
      <ion-title mode="ios"> {{tbTitle}}</ion-title>
      <ion-buttons slot="start">
        <ion-menu-button autoHide="false"> </ion-menu-button>
        <ion-back-button auto-hide="false"> </ion-back-button>
      </ion-buttons>
      <ion-buttons slot="end">
        <ion-button routerLink="/profil" fill="clear" size="large" slot="icon-only">
          <ion-icon class="customIconToolbar" color="light" name="person-circle-outline"></ion-icon>
        </ion-button>
      </ion-buttons>
      <ion-buttons [hidden]="hideOptions" slot="end">
        <ion-button color="danger" (click)="CreatePopover($event)" fill="clear" size="large" slot="icon-only">
          <ion-icon class="customIconToolbar" color="light" name="ellipsis-vertical-outline"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>

</ion-app>