dnet-applications/frontends/dnet-is-application/src/app/resources/resources.component.ts

import { Component, Inject,AfterViewInit, ViewChild, OnInit } from '@angular/core';
import { ISService } from '../is.service';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort, Sort } from '@angular/material/sort';
import { ActivatedRoute } from '@angular/router';
import { map } from 'rxjs/operators';
import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { ResourceType, SimpleResource } from '../model/controller.model';
import {FormControl, FormGroup, FormGroupDirective, NgForm, Validators} from '@angular/forms';
import { ResourceLoader } from '@angular/compiler';

@Component({
  selector: 'app-resources',
  templateUrl: './resources.component.html',
  styleUrls: ['./resources.component.css']
})
export class ResourcesComponent implements OnInit {
  typeId:string = '';
  type:ResourceType = { id: '', name: '', contentType: '', count: 0, simple: true };
  resources:SimpleResource[] = [];
  searchText:string = '';

  constructor(public service: ISService, public route: ActivatedRoute, public newDialog: MatDialog, public contentDialog: MatDialog, public metadataDialog: MatDialog) {
  }

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.typeId = params['type'];
      this.service.loadResourceType(this.typeId, (data: ResourceType) => this.type = data);
      this.reload()
    });
  }

  reload() {
    if (this.typeId) {
      this.service.loadSimpleResources(this.typeId, (data: SimpleResource[]) => this.resources = data);
    }
  }

  openNewDialog(): void {
    const dialogRef = this.newDialog.open(ResCreateNewDialog, {
      data: this.type,
      width: '80%'
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) this.reload();
    });
  }

  openMetadataDialog(r:SimpleResource): void {
    const dialogRef = this.metadataDialog.open(ResMetadataDialog, {
      data: r,
      width: '80%'
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) this.reload();
    });
  }

  openContentDialog(r:SimpleResource): void {
    this.service.loadSimpleResourceContent(r.id, (data: string) => {
      const dialogRef = this.contentDialog.open(ResContentDialog, {
        data: {
          id: r.id,
          contentType: this.type.contentType,
          content: data
        },
        width: '80%'
      });
  
      dialogRef.afterClosed().subscribe(result => {
        if (result) this.reload();
      });
    });
  }

  deleteResource(r:SimpleResource) {
    if (confirm('Are you sure?')) {
      this.service.deleteSimpleResource(r.id, (data: void) => this.reload());
    }
  }
}


@Component({
  selector: 'res-content-dialog',
  templateUrl: 'content-dialog.html',
  styleUrls: ['resources.component.css']
})
export class ResContentDialog {
  contentFormControl = new FormControl('');
  
  contentForm = new FormGroup({
    content : this.contentFormControl
  });

  constructor(public dialogRef: MatDialogRef<ResContentDialog>,  @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {
    this.contentFormControl.setValue(data.content);
  }

  onSubmit():void {
    let content = this.contentFormControl.value;
    if (content) {
      this.service.saveSimpleResourceContent(this.data.id, content, (data: void) => this.dialogRef.close(1), this.contentForm)
    }
  }
  
  onNoClick(): void {
    this.dialogRef.close();
  }
}

@Component({
  selector: 'res-metadata-dialog',
  templateUrl: 'metadata-dialog.html',
  styleUrls: ['resources.component.css']
})
export class ResMetadataDialog {
  metadataForm = new FormGroup({
    name:  new FormControl(''),
    description : new FormControl('')
  });

  constructor(public dialogRef: MatDialogRef<ResMetadataDialog>,  @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {
    this.metadataForm.get('name')?.setValue(data.name);
    if (data.description) {
      this.metadataForm.get('description')?.setValue(data.description);
    }
  }

  onSubmit():void {
    const res = Object.assign({}, this.data, this.metadataForm.value);
    this.service.saveSimpleResourceMedatata(res, (data: void) => this.dialogRef.close(1), this.metadataForm);
  }
  
  onNoClick(): void {
    this.dialogRef.close();
  }
}

@Component({
  selector: 'res-new-dialog',
  templateUrl: 'new-dialog.html',
  styleUrls: ['resources.component.css']
})
export class ResCreateNewDialog {
  newResourceForm = new FormGroup({
    name:  new FormControl(''),
    description : new FormControl(''),
    content : new FormControl('')
  });

  constructor(public dialogRef: MatDialogRef<ResCreateNewDialog>,  @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {}
  
  onSubmit():void {
    let name:string = this.newResourceForm.get('name')?.value!;
    let type:string = this.data.id!;
    let description:string = this.newResourceForm.get('description')?.value!;
    let content:string = this.newResourceForm.get('content')?.value!;
    
    this.service.addSimpleResource(name, type, description, content, (data: void) => this.dialogRef.close(1), this.newResourceForm);
  }
  onNoClick(): void {
    this.dialogRef.close();
  }
}