.Net Angular PoUi : FullStackPlayGroung

code .

dotnet new webapi -o api

cd api

dotnet new gitignore

md Modelscd . > Models/Pet.cs

namespace api.Models{    public class Pet    {        public int Id { get; set; }        public string Nome { get; set; }        public string Raca { get; set; }        public string Dono { get; set; }    }}

dotnet add package Microsoft.EntityFrameworkCore.InMemory --version 5.0.7

md Datacd . > Data/DataContext.cs

using api.Models;using Microsoft.EntityFrameworkCore;namespace api.Data{    public class DataContext : DbContext    {        public DataContext(DbContextOptions<DataContext> options)            : base(options) { }        public DbSet<Pet> Pet { get; set; }    }}

using api.Data;using Microsoft.EntityFrameworkCore;

public void ConfigureServices(IServiceCollection services)    services.AddControllers();    services.AddSwaggerGen(c =>    {        c.SwaggerDoc("v1", new OpenApiInfo { Title = "api", Version = "v1" });    })    //adicione este trecho    services.AddDbContext<DataContext>(opt => opt.UseInMemoryDatabase("DataBase"));}

dotnet tool install -g dotnet-aspnet-codegenerator

dotnet tool update -g dotnet-aspnet-codegenerator

dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Designdotnet add package Microsoft.EntityFrameworkCore.Designdotnet add package Microsoft.EntityFrameworkCore.SqlServer

dotnet aspnet-codegenerator controller -name PetController -async -api -m Pet -dc DataContext -outDir Controllers

dotnet run

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)        {            if (env.IsDevelopment())            {                app.UseDeveloperExceptionPage();                app.UseSwagger();                app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "api v1"));            }            // Comente esse trecho            // app.UseHttpsRedirection();            app.UseRouting();            // adicione esse trecho            app.UseCors(x => x                .AllowAnyOrigin()                .AllowAnyMethod()                .AllowAnyHeader());            app.UseAuthorization();            app.UseEndpoints(endpoints =>            {                endpoints.MapControllers();            });        }

...        [HttpGet]        public async Task<ActionResult<dynamic>> GetPet()        {            var pets =  await _context.Pet.ToListAsync();            return new {                hasNext = false,                items = pets            };        }...

ng new app

cd app

ng add @po-ui/ng-components

ng add @po-ui/ng-templates

ng generate @po-ui/ng-templates:po-page-dynamic-table

ng generate @po-ui/ng-templates:po-page-dynamic-edit

...import { PetEditComponent } from './pet-edit/pet-edit.component';import { PetTableComponent } from './pet-table/pet-table.component';...

...const routes: Routes = [  { path: 'new', component: PetEditComponent },  { path: 'edit/:id', component: PetEditComponent },  { path: 'table', component: PetTableComponent },  { path: '', pathMatch: 'full', redirectTo: 'table' },];...

<div class="po-wrapper">  <po-toolbar p-title="Pet App"></po-toolbar>  <po-menu [p-menus]="menus"></po-menu>  <router-outlet></router-outlet></div>

import { Component } from "@angular/core";import { PoMenuItem } from "@po-ui/ng-components";@Component({  selector: "app-root",  templateUrl: "./app.component.html",  styleUrls: ["./app.component.css"],})export class AppComponent {  readonly menus: Array<PoMenuItem> = [{ label: "Pets", link: "/table" }];}

export const environment = {  production: false,  service: 'http://localhost:5000/api/pet'};

...// adicione esses importsimport { PoPageDynamicTableActions, PoPageDynamicTableField } from '@po-ui/ng-templates';import { environment } from 'src/environments/environment';@Component({  selector: 'app-pet-table',  templateUrl: './pet-table.component.html',  styleUrls: ['./pet-table.component.css']})export class PetTableComponent implements OnInit {  // Copie os cdigos abaixo  readonly apiService = environment.service;  readonly actions: PoPageDynamicTableActions = {    new: "/new",    edit: "/edit/:id",    remove: true,  };  readonly fields: Array<PoPageDynamicTableField> = [    { property: "id", label: "Id", key: true },    { property: "nome", label: "Nome" },    { property: "raca", label: "Raa" },    { property: "dono", label: "Dono" },  ];  ...

<po-page-dynamic-table  p-title="PetTable"  [p-actions]="actions"  [p-service-api]="apiService"  [p-fields]="fields"></po-page-dynamic-table>

...// adicione esses importsimport { PoPageDynamicEditActions, PoPageDynamicEditField } from '@po-ui/ng-templates';import { environment } from 'src/environments/environment';@Component({  selector: 'app-pet-edit',  templateUrl: './pet-edit.component.html',  styleUrls: ['./pet-edit.component.css']})export class PetEditComponent implements OnInit {  // copie os cdigos abaixo  readonly apiService = environment.service;  readonly fields: Array<PoPageDynamicEditField> = [    { property: "id", label: "Id", key: true, visible: false },    { property: "nome", label: "Nome" },    { property: "raca", label: "Raa" },    { property: "dono", label: "Dono" },  ];  public readonly actions: PoPageDynamicEditActions = {    save: "/table",    saveNew: "/new",  };...

<po-page-dynamic-edit  p-title="PetEdit"  [p-service-api]="apiService"  [p-fields]="fields"  [p-actions]="actions"></po-page-dynamic-edit>

dotnet run

ng s -o