enum.ts

import { Component, OnInit } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { CreateUserGQL, Roles, JobTitles, CreateUserProfileImageGQL } from '@generated-types';
import { SEOService } from '@services/seo.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MustMatch } from '@helpers/must-match-validator';
import * as uuid from 'uuid';

interface Role {
  value: string;
  title: string;
}


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

  form: FormGroup;

  // file upload vars
  selectedFile: File;
  newFileName: any;
  selectedFileExtension: any;
  fileURL: any;

  roles: Role[] = [
    { value: 'ADMIN', title: 'ADMIN' },
    { value: 'MODERATOR', title: 'MODERATOR' },
    { value: 'MEMBER', title: 'MEMBER' }
  ];

  constructor(
    private snackBar: MatSnackBar,
    private createUserGQL: CreateUserGQL,
    private createUserProfileImageGQL: CreateUserProfileImageGQL,
    private seoService: SEOService,
    private formBuilder: FormBuilder,
  ) { }

  // form alanları için erişim.
  get f() { return this.form.controls; }

  ngOnInit() {
    const title = `KULLANICI EKLE | BIOCIDAL`;
    this.seoService.createMetaData(title, title);
    this.seoService.meta.updateTag({ name: 'robots', content: 'noindex' });
    this.form = this.formBuilder.group({
      email: ['', [Validators.required, Validators.email]],
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      password: ['', [Validators.required, Validators.minLength(6)]],
      confirmPassword: ['', Validators.required],
      role: ['', Validators.required]
    }, {
      validator: MustMatch('password', 'confirmPassword')
    });
  }

  async onSubmit() {
    if (this.form.invalid) {
      return;
    }

    // seçili resim varsa
    if (this.selectedFile) {
      this.sendFileToServer();
    }
    this.createUser();
  }

  createUser() {
    this.createUserGQL.mutate({
      user: {
        email: this.form.value.email,
        firstName: this.form.value.firstName,
        lastName: this.form.value.lastName,
        password: this.form.value.password,
        image: this.newFileName,
        // role: Roles.MEMBER,
        role: this.form.value.role, // "1"
        // jobTitle: JobTitles.UYGULAYICI
      }
    }).subscribe(({ data }) => {
      this.openSnackBar('KAYIT İŞLEMİ TAMAMLANDI');
    }, (error: any) => {
      this.handleError(error);
    });
  }

  // kullanıcı daha önce bir file seçimi yapmış ise viewdaki buttonda gösterilir
  // ilgili tüm değişkenleri null'a çevirir.
  removeFile(event: any) {
    this.selectedFile = null;
    this.fileURL = null;
    this.newFileName = null;
    console.log(this.selectedFile, this.fileURL, this.newFileName);
  }

  // body  de fake bir input oluşturduk
  // type ve multiple özellikleri verdik
  // elementte olan değişikliği izledik
  // elementi clickledik
  // daha sonra view kısmında bir angular (click)'ine bagladık.
  getFiles(multiple: boolean) {
    return new Promise(resolve => {
      const fakeElem = document.createElement('input');
      fakeElem.type = 'file';
      fakeElem.multiple = multiple;
      fakeElem.onchange = () => resolve(fakeElem.files);
      fakeElem.click();
    });
  }

  // viewdan bir button click ediliyor.
  async selectFile() {
    const files = await this.getFiles(false);
    this.selectedFile = files[0];
    console.log(this.selectedFile);

    // seçilen resmin önizlemesini göstermek için
    // ama bu base64 methodu şişme yapar domda o yüzden
    // daha dogru bir çözüm bulmamız gerekecek ileride
    const fileReader = new FileReader();
    fileReader.readAsDataURL(this.selectedFile);
    fileReader.onload = (_event: any) => {
      this.fileURL = fileReader.result;
    };

    this.makeNewFileName();
  }

  makeNewFileName() {
    const id = uuid.v4();
    this.selectedFileExtension = this.selectedFile.name.split('.').pop();
    this.newFileName = id + '.' + this.selectedFileExtension;
    console.log('makeNewFileName: ', this.newFileName);
  }

  // sunucuya upload et
  sendFileToServer() {
    this.createUserProfileImageGQL.mutate({
      file: this.selectedFile,
      imageName: this.newFileName
    }).subscribe(({ data }) => {
      this.openSnackBar('upload tamamladı.');
    }, (error: any) => {
      this.handleError(error);
    });
  }

  handleError(error: any) {
    return this.snackBar.open(error.message, '', { horizontalPosition: 'right', verticalPosition: 'top', duration: 3000 });
  }

  openSnackBar(selectedFileExtension: string) {
    return this.snackBar.open(selectedFileExtension, '', { horizontalPosition: 'right', verticalPosition: 'top', duration: 3000 });
  }

}