angular

ctrl.html

<div class="animated fadeIn">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <strong *ngIf="editing">Modification d'un utilisateur</strong>
          <strong *ngIf="!editing">Création d'un utilisateur</strong>
        </div>
        <form *ngIf="user" [formGroup]="form" enctype="multipart/form-data" (ngSubmit)="onSubmit(form.value)">

          <div class="card-body">
              <div class="form-group row">
                <label class="col-md-3 form-control-label" for="email">Email</label>
                <div class="col-md-9">
                  <input
                    [ngClass] = "{'is-invalid': isValid('email')}"
                    type="text" id="text-input" name="email" id="email" class="form-control" placeholder="Email" formControlName="email">
                  <span class="help-block invalid-feedback">{{ erreurGenerique }}</span>
                </div>
              </div>
            <div class="form-group row">
              <label class="col-md-3 form-control-label" for="email">Upload de votre image</label>
              <div class="col-md-9">
                <image-upload
                  [max]="1"
                  [buttonCaption]="'Choisir une image'"
                  [dropBoxMessage]="'Déposez vos images ici'"
                  [url]="urlUplaod"
                  [uploadedFiles]="defaultImage"
                  (uploadFinished)="onUploadFinished($event)"
                  (uploadStateChanged)="onUploadStateChanged($event)"
                ></image-upload>
                <span class="help-block invalid-feedback">{{ erreurGenerique }}</span>
              </div>
            </div>

            <div class="form-group row">
                <label class="col-md-3 form-control-label" for="prenom">Prenom</label>
                <div class="col-md-9">
                  <input
                    [ngClass] = "{'is-invalid': isValid('first_name')}"
                    type="text" id="text-input" name="prenom" id="prenom" class="form-control" placeholder="Prénom" formControlName="first_name">
                  <span class="help-block invalid-feedback">{{ erreurGenerique }}</span>
                </div>
              </div>
              <div class="form-group row">
                <label class="col-md-3 form-control-label" for="nom">Nom</label>
                <div class="col-md-9">
                  <input
                    [ngClass]="{'is-invalid': isValid('last_name')}"
                    type="text" name="nom" id="nom" class="form-control" placeholder="Nom" formControlName="last_name">
                    <span class="help-block invalid-feedback">{{ erreurGenerique }}</span>
                </div>
              </div>
              <div class="form-group row" *ngIf="currentUser.role != 'super_admin'">
                <label class="col-md-3 form-control-label" for="nom">Supérieur hiérarchique</label>
                <div class="col-md-9">
                  <ng-select
                    [multiple]="false"
                    [items]="usersData"
                    [active]="selectedValue"
                    (data)="refreshValue($event)"
                    (selected)="selected($event)"
                    (removed)="removed($event)"
                    placeholder="supérieur hiérarchique">
                  </ng-select>
                  <span class="help-block invalid-feedback">{{ erreurGenerique }}</span>
                </div>
              </div>
              <div class="form-group row">
                <label class="col-md-3 form-control-label" for="select">Type d'utilisateur</label>
                <div class="col-md-9">
                  <select id="select" name="select" class="form-control" formControlName="role">
                    <option value="">Type d'utilisateur</option>
                    <option
                      *ngFor="let role of roles"
                      [attr.value] = "role"
                      [attr.selected] ="role == user.role ? true: null">{{role}}</option>
                  </select>
                </div>
              </div>
              <app-password
                [group]="form"
                (eventPasswords) = "inChangedPaswwrods($event)"
              ></app-password>
              <div class="form-group row">
                <label class="col-md-3 form-control-label" for="function_user">fonction</label>
                <div class="col-md-9">
                  <input
                    [ngClass] = "{'is-invalid': isValid('function_user')}"
                    type="text" id="text-input" name="function_user" id="function_user" class="form-control" placeholder="Fonction" formControlName="function_user">
                  <span class="help-block invalid-feedback">{{ erreurGenerique }}</span>
                </div>
              </div>

            <div class="form-group row" *ngIf="editing">
              <label class="col-md-3 form-control-label" for="msgUser">Message Spéciale</label>
              <div class="col-md-9">
                <input
                  [ngClass] = "{'is-invalid': isValid('function_user')}"
                  type="text" id="text-input" name="msg" id="msgUser" class="form-control" placeholder="Message Spéciale" formControlName="msg">
                <span class="help-block invalid-feedback">{{ erreurGenerique }}</span>
              </div>
            </div>

              <div class="form-group row">
                <label class="col-md-3 form-control-label">L'utilisateur est activé</label>
                <div class="col-md-9">
                  <label class="checkbox-inline" for="inline-checkbox1">
                    <input type="checkbox" id="inline-checkbox1" name="inline-checkbox1" formControlName="enabled"> Activer
                  </label>
                </div>
              </div>
          </div>
          <div class="card-footer">
            <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Valider</button>
            <button (click)="toList('user')" type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Annuler</button>
          </div>
        </form>

        <div class="sk-rotating-plane" *ngIf="user == null"></div>


      </div>
    </div>
  </div><!--/.row-->
</div>

user.ts

import { Component, OnInit } from '@angular/core';
import {FormGroup, AbstractControl, FormBuilder, Validators} from '@angular/forms';
import {ActivatedRoute, Router} from '@angular/router';
import { AuthenticationService } from './../../-services/authentication/authentication.service';
import { User } from './../../-models/user';
import { environment } from '../../../environments/environment';
import { FormsService } from './../../shared/shared-function/forms.service';
import {UsersService} from '../../-services/users/users.service';
import {ToasterService} from "angular2-toaster/angular2-toaster";

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
  styleUrls: ['./user-form.component.scss']
})
export class UserFormComponent implements OnInit {

  public form: FormGroup;
  public error: string;
  public idUser: string;
  public users: User[];
  public loading: Boolean = false;
  public user: User = null;
  public editing: Boolean = false;
  public roles: string[];
  public erreurGenerique: string = "erreur: vous devez remplir ce champ avec les bonnes informations";
  public urlUplaod = `${environment.apiUrl}upload`;
  public defaultImage = [];
  public currentUser;


  public usersData:Array<object> = [

  ];


  private value:any = [];
  private selectedValue:any ;

  public selected(value:any):void {
    this.form.patchValue({
      parent: value.id
    });
  }

  public removed(value:any):void {
    console.log('Removed value is: ', value);
  }

  public refreshValue(value:any):void {
    this.value = value;
  }
  constructor(
    private fb: FormBuilder,
    private auth: AuthenticationService,
    private us: UsersService,
    private router: Router,
    private formsUtils: FormsService,
    private route:  ActivatedRoute,
    private toasterService: ToasterService,

  ) {
    this.editing = this.route.snapshot.params['mode'] === 'edit';
    if (this.editing) {
      this.form = fb.group({
          _id: [],
          last_name: ['', Validators.compose([Validators.required, Validators.minLength(4)])],
          first_name: ['', Validators.compose([Validators.required, Validators.minLength(4)])],
          function_user: ['', Validators.compose([Validators.required, Validators.minLength(4)])],
          enabled: [''],
          role: ['', Validators.compose([Validators.required])],
          company: [],
          email: [''],
          image: [''],
          parent: [],
          password: '',
          confirmpassword: '',
          msg: '',
        },
        {validator: formsUtils.matchingField('password', 'confirmpassword')}
      );
    } else {
      let companyId;
      if(this.auth.getCompanyId()) {
        companyId =  this.auth.getCompanyId();
      } else companyId = null;
      this.form = fb.group({
          last_name: ['', Validators.compose([Validators.required, Validators.minLength(4)])],
          first_name: ['', Validators.compose([Validators.required, Validators.minLength(4)])],
          function_user: ['', Validators.compose([Validators.required, Validators.minLength(4)])],
          enabled: ['', Validators.compose([Validators.required])],
          role: ['', Validators.compose([Validators.required])],
          company: [companyId],
          image: [''],
          parent: [],
          email: ['', Validators.compose([Validators.required, Validators.minLength(4), formsUtils.validEmail()])],
          password: ['', Validators.compose([Validators.required, Validators.minLength(4)])],
          confirmpassword: ['', Validators.required],
        },
        {validator: formsUtils.matchingField('password', 'confirmpassword')}
      );
    }
  }
  ngOnInit() {
    this.editing = this.route.snapshot.params['mode'] === 'edit';
    this.currentUser = this.auth.getCurrentUSer();
    if(this.currentUser.role === 'super_admin') {
      this.roles = ['super_admin'];
    } else if(this.currentUser.role == 'admin' || this.currentUser.role == 'manager') {
      this.roles = ['admin', 'manager', 'user'];
    }
    console.log('this.currentUser', this.currentUser);
    this.us.getUsers().subscribe(res => {
      this.usersData = res.reduce((accum, item) => {
        accum.push({id: item._id, text:`${item.last_name} ${item.first_name}`})
        return accum;
      },[]);
    });

    if (this.editing) {
      this.idUser = this.route.snapshot.params['id'];

      if (this.idUser) {
        this.us.getUser(this.idUser).subscribe(user => {
          this.user = user;
          if(user.image) {
            let image = `${environment.apiUrl}static/uploads/${user.image}`;
            this.defaultImage.push(image);
          }
          this.form.patchValue(user);
          this.form.controls['password'].setValue('');
          if (user.parent){
            this.selectedValue = [{id: user.parent._id, text: `${user.parent.last_name} ${user.parent.first_name}`}];
            console.log('selected', user);
          }
        })
      } else {
        throw new Error('error forbidden id user')
      }
    } else {
      this.user = {first_name: ''};
      this.loading = false;
    }
  }

  inChangedPaswwrods(data) {
    console.log(JSON.stringify(data));
  }
  isValid(control) {
    return this.form.controls[control].invalid && this.form.controls[control].touched
  }
  onSubmit(user: User): void {
    console.log('this.form.errors', user);
      if (this.editing) {
       this.us.updateObject(user).subscribe( result => {
         this.router.navigate(['/users']);
         this.toasterService.pop('success', 'Succès', `l'action a été completé avec succès`);
       });
      } else {
        this.us.addObject(user).subscribe( result => {
          this.router.navigate(['/users']);
          this.toasterService.pop('success', 'Succès', `l'action a été completé avec succès`);
        });
      }
  }

  toList(route) {
    this.router.navigate(['users']);
  }

  onUploadFinished(value) {
   if(value) {
     let results = JSON.parse(value.serverResponse._body);
     this.form.controls['image'].setValue(results[0].filename);

   }
  }

  onUploadStateChanged(value) {
    console.log(value)
  }

}