we_bstly-web/src/app/ui/profilefields/profilefields.component.ts

import {Component, OnInit, Inject, Input} from '@angular/core';
import {Sort} from '@angular/material/sort';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import {I18nService} from '../../services/i18n.service';
import {ProfileService} from '../../services/profile.service';
import {ConfirmDialog} from '../confirm/confirm.component';

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

  @Input() profileFields: Array<any>;
  @Input() edit;
  profileFieldColumns = ["name", "value"];

  constructor(private i18n: I18nService, private profileService: ProfileService, public dialog: MatDialog) {}

  ngOnInit(): void {
    if(this.edit) {
      this.profileFieldColumns.push("visibility");
      this.profileFieldColumns.push("edit");
      this.profileFieldColumns.push("delete");
    }
  }

  sortData(sort: Sort) {
    const data = this.profileFields.slice();
    if(!sort.active || sort.direction === '') {
      this.profileFields = data;
      return;
    }

    this.profileFields = data.sort((a, b) => {
      const isAsc = sort.direction === 'asc';
      switch(sort.active) {
        case 'name': return this.compare(this.i18n.get('profileField.name.' + a.name, []), this.i18n.get('profileField.name.' + b.name, []), isAsc);
        case 'value': return this.compare(a.value, b.value, isAsc);
        case 'index': return this.compare(a.index, b.index, isAsc);
        default: return 0;
      }
    });
  }

  compare(a: number | string | String, b: number | string | String, isAsc: boolean) {
    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
  }


  openEdit(profileField) {

    const resetProfileField = JSON.parse(JSON.stringify(profileField));

    const dialogRef = this.dialog.open(ProfileFieldDialog, {
      data: profileField,
      minWidth: '400px'
    });


    dialogRef.afterClosed().subscribe(result => {
      if(result) {
        this.profileService.createOrUpdate(result).subscribe();
      } else {
        profileField.name = resetProfileField.name;
        profileField.value = resetProfileField.value;
        profileField.type = resetProfileField.type;
        profileField.visibility = resetProfileField.visibility;
        profileField.index = resetProfileField.index;
      }
    });

  }

  confirmDelete(profileField) {
    const dialogRef = this.dialog.open(ConfirmDialog, {
      data: {
        'label': 'profileField.confirmDelete',
        'args': ['profileField.name.' + profileField.name]
      }
    })

    dialogRef.afterClosed().subscribe(result => {
      if(result) {
        this.profileService.delete(profileField.name).subscribe((result: any) => {
          this.profileFields.splice(this.profileFields.indexOf(profileField), 1);
          this.profileFields = [...this.profileFields];
        })
      }
    });
  }

  openCreate() {
    const dialogRef = this.dialog.open(ProfileFieldDialog, {
      data: {"type": "TEXT", "visibility": "PRIVATE"},
      minWidth: '400px'
    });

    dialogRef.afterClosed().subscribe(result => {
      if(result) {
        this.profileService.createOrUpdate(result).subscribe((result: any) => {
          this.profileFields.push(result);
          this.profileFields = [...this.profileFields];
        });
      }
    });

  }

  openBlob(profileField) {
    this.dialog.open(ProfileFieldBlob, {
      data: profileField,
      minWidth: '400px'
    });
  }

}

@Component({
  selector: 'app-profilefield-dialog',
  templateUrl: 'profilefield.dialog.html',
  styleUrls: ['./profilefield.dialog.scss']
})
export class ProfileFieldDialog {

  form: FormGroup;
  profileField;

  types = ["TEXT", "NUMBER", "DATE", "URL", "EMAIL", "BOOL", "BLOB"];
  visibilities = ["PRIVATE", "PROTECTED", "PUBLIC"];

  constructor(
    private formBuilder: FormBuilder,
    public dialogRef: MatDialogRef<ProfileFieldDialog>,
    @Inject(MAT_DIALOG_DATA) public data: any) {
    this.profileField = data;
  }

  ngOnInit() {
    this.form = this.formBuilder.group({
      name: ['', Validators.required],
      type: ['', Validators.required],
      value: [''],
      blob: [''],
      visibility: ['', Validators.required],
      index: ['']
    });
  }
}


@Component({
  selector: 'app-profilefield-blob',
  templateUrl: 'profilefield.blob.html',
  styleUrls: ['./profilefield.blob.scss']
})
export class ProfileFieldBlob {

  profileField;

  constructor(
    public dialogRef: MatDialogRef<ProfileFieldDialog>,
    @Inject(MAT_DIALOG_DATA) public data: any) {
    this.profileField = data;
  }



}