update

src/app/ui/profilefields/profilefields.component.ts

@@ -0,0 +1,159 @@
+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';
+
+@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) {
+    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;
+  }
+
+
+
+}