feat(page-dynamic-edit): adiciona p-load-data #1635

app.component.html

<po-page-default p-title="PO UI">
  <router-outlet></router-outlet>
</po-page-default>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {}

app.module.ts

import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { PoModule } from '@po-ui/ng-components';

import { AppComponent } from './app.component';
import { PoPageDynamicEditModule } from '../../../templates/src/lib';
import { EditComponent } from './edit/edit.component';

@NgModule({
  declarations: [AppComponent, EditComponent],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: '**', redirectTo: 'edit/1' },
      { path: 'edit/:id', component: EditComponent },
    ], {}),
    PoModule,
    PoPageDynamicEditModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

edit.component.html

<po-page-dynamic-edit
  #pageDynamicEdit
  [p-auto-router]="true"
  [p-title]="'Editar'"
  [p-actions]="actions"
  [p-fields]="schemaFields"
  [p-service-api]="serviceApi"
  [p-load-data]="customLoadData"                   
>
</po-page-dynamic-edit>

edit.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
})
export class EditComponent {
  constructor() { }

  serviceApi = 'https://run.mocky.io/v3/e8207321-28e6-4f4e-b0a4-736227849ad6';
  schemaFields = [
    {
      property: 'name',
      label: 'Seu nome',
      gridColumns: 12,
    },
    {
      help: 'Envie a imagem para avatar',
      property: 'image',
      label: 'Avatar',
      disabled: false,
      multiple: false,
      type: 'upload',
      url: './',
      hideSendButton: true,
      restrictions: { allowedExtensions: ['.png', '.jpg', '.jpeg'] },
    },
  ];
  actions = {
    cancel: '/',
    save: (resource, id) => { console.log(resource, id) },
  };

  /**
   * Aqui será possível alterar o formato do dado antes de chegar ao model do componente
   */
  customLoadData = (model) => {
    const newValues = { image: [this.convertbase64ToFile(model.image)] }
    return { ...model, ...newValues };
  }

  /**
   * Somente como exemplo
   * A string base64 deve ser convertida para Blob e depois criado o File
   */
  convertbase64ToFile(base64string) {
    return new File([base64string], "example.png", {
      type: "image/png"
    })
  }
}