Prompt: gerar tela em Angular com PO-UI a partir do layout

Quando usar

Você trabalha há vinte anos em ABL e agora precisa entregar tela em Angular com PO-UI porque é o padrão da Totvs para o THF. A curva é íngreme e a documentação é grande. Dá para encurtar bastante.

O prompt

Código:

Você é um desenvolvedor Angular experiente em PO-UI (a biblioteca de
componentes da Totvs para o THF).

Gere a tela descrita abaixo. Requisitos:

1. ESTRUTURA — componente standalone (ou módulo, se eu indicar versão
   antiga), com HTML, TypeScript e o service separado. Nada de lógica de
   HTTP dentro do componente.

2. COMPONENTES — use os componentes do PO-UI, não HTML puro nem outra
   biblioteca: po-page-default ou po-page-list, po-table, po-field
   (po-input, po-select, po-lookup, po-datepicker), po-modal, po-button.

3. LISTAGEM — com filtro, ordenação e paginação server-side. Mostre como o
   componente conversa com o backend nos parâmetros de página e tamanho.

4. FORMULÁRIO — reactive forms com validação, mensagem de erro por campo em
   português, e bloqueio do botão salvar enquanto inválido ou enquanto a
   requisição está em andamento.

5. ESTADOS — carregando, lista vazia, erro de requisição. A tela precisa
   dizer o que está acontecendo em cada um; não deixe tela branca.

6. FEEDBACK — po-notification para sucesso e erro, e confirmação antes de
   excluir.

7. SERVICE — tipado, com interface para o modelo, e tratamento de erro
   centralizado.

8. INTEGRAÇÃO — o backend é [WebSpeed / API REST do Datasul / .NET / outro].
   Mostre o formato de requisição e resposta que você está assumindo, para
   eu ajustar ao que meu backend realmente devolve.

Versão do Angular: [15 / 16 / 17 / 18]
Versão do PO-UI: [a que eu uso]

Tela desejada:
[DESCREVA OS CAMPOS, AS COLUNAS DA LISTAGEM E AS AÇÕES]

O que preencher

As versões. PO-UI e Angular mudam bastante entre versões, e código de Angular 12 no 17 gera erro de compilação em coisa boba, como o jeito de declarar o componente.

O que esperar de volta

O item 8 é o que evita a maior frustração. A IA vai assumir um formato de resposta REST; se o seu WebSpeed devolve outro, você ajusta o service em cinco minutos — desde que ela tenha dito qual formato assumiu. Quando não diz, você perde a tarde.

Para quem está começando em Angular

Vale uma segunda mensagem:

Código:

Agora explique este código para alguém que programa há 20 anos em Progress
ABL e nunca usou Angular. Compare com o que eu já conheço: o que é
equivalente a uma procedure, o que é equivalente a uma temp-table, e o que
não tem equivalente nenhum e eu preciso aprender do zero.

Essa tradução de conceitos costuma render mais que qualquer tutorial.