Adicionando uma caixa de entrada à página de detalhes “Criar pedido”

O fluxo “Criar pedido” é uma ação de Pedido que pertence ao buc-app-order módulo. Nesta lição, você aprenderá como habilitar a personalização do buc-app-order módulo, copiar os recursos necessários para iniciar a personalização e, em seguida, adicionar uma caixa de entrada para capturar o número do pedido de compra do cliente.

Procedimento

Abra o devtoolkit_docker/orderhub-code/buc-app-order/overrides.json arquivo.
Para criar um pedido, defina runAsCustomization como verdadeiro para habilitar a personalização para esta rota. Essa configuração instrui o Order Hub a consultar seu código personalizado quando a rota create-order for chamada.

Importante: defina runAsCustomization como verdadeiro apenas para as rotas que estão sendo personalizadas no momento. Recomenda-se personalizar no máximo cinco rotas por vez.
Encontre o código-fonte da página Criar pedido existente.
Neste caso, os arquivos estão em buc-app-order/packages/create-order/src/app/features/order/create-order/order-setup/.
Replique a estrutura da pasta src na pasta src-custom.
1. Vá para o buc-app-order/packages/create-order/src-custom/app diretório.
2. Crie as pastas recursos/pedido/criar-pedido/configuração-do-pedido
  Certifique-se de que o caminho resultante seja: buc-app-order/packages/create-order/src-custom/app/features/order/create-order/order-setup/.
Vá para o diretório buc-app-order/packages/create-order/src/app/features/order/create-order/order-setup e copie os arquivos order-setup.component.html e order-setup.component.ts.

Observação: você não precisa copiar o arquivo.scss, pois este tutorial não altera o estilo dos elementos.
Cole os arquivos no diretório buc-app-order/packages/create-order/src-custom/app/features/order/create-order/order-setup.
Você pode notar alguns erros devido a caminhos relativos. Você pode ignorar esses erros.
Abra o arquivo src-custom/app/features/order/create-order/order-setup/order-setup.component.html.
Como você precisa adicionar uma caixa de entrada, analise as caixas de entrada que existem no order-setup.component.html arquivo. Você pode usar a caixa de entrada do número do pedido como ponto de partida. A etapa seguinte utiliza código semelhante ao da caixa de entrada Número do pedido.
Adicione a nova caixa de entrada na mesma linha do campo existente “Data de cancelamento solicitada”.
Dica: procure por “Data de cancelamento solicitada” e observe que ela está dentro de um div com class bx--row. Adicione a seguinte caixa de entrada como uma coluna dentro desta linha.
```
<div class="combo-box bx--col-md-3">
                <buc-label class="size--sm" [label]="'CREATE_ORDER.ORDER_SETUP.CUSTOMER_PO_ORDER_LABEL' | translate" placeholder=""
                    [(inputValue)]="custPONo" [isDisabled]="isEdit"></buc-label>
</div>
```
- Esta caixa de entrada permite que os usuários adicionem um número de ordem de compra do cliente ao pedido que estão criando.
- O valor [label] usa notação de ponto para recuperar a string dos arquivos de tradução JSON. Você criará o en.json arquivo que contém a string literal em etapas posteriores.
- custPONo é uma variável personalizada que armazenará as entradas do usuário. Você atualizará o arquivo.ts para incluir essa nova variável custPONo nas etapas posteriores.
Configure as cadeias de tradução e as configurações do ambiente.
1. Copie a pasta assets de buc-app-order/packages/order-shared e cole em buc-app-order/packages/create-order/src-custom.
2. Abra o buc-app-order/angular.json arquivo.
3. Substitua o conteúdo atual da matriz projects > create-order > architect > build > configurations > merged > assets pelas seguintes entradas. O objetivo desta etapa é direcionar o módulo para usar os arquivos de recursos personalizados em vez dos arquivos de /order-shared.
```
            "assets": [
              {
                "glob": "**",
                "input": "packages/create-order/src-merged/assets",
                "output": "assets"
              },
              {
                "glob": "*.json",
                "input": "packages/create-order/src-merged/assets/buc-app-order",
                "output": "assets/create-order"
              },
              {
                "glob": "**",
                "input": "node_modules/@buc/svc-angular/assets",
                "output": "assets"
              },
              {
                "glob": "**",
                "input": "node_modules/@buc/common-components/assets",
                "output": "assets"
              }
            ],
```
4. Substitua também o conteúdo na matriz projects > create-order > architect > build > configurations > merged-prod > assets.
5. Copie a pasta environments de buc-app-order/packages/create-order/src'' para 'buc-app-order/packages/create-order/src-custom'.
6. Vá para o buc-app-order/packages/create-order/src-custom/environments diretório.
7. Adicione a seguinte linha ao final dos arquivos environment.tsenvrionment.prod.ts e.
```
environment.customization = true;
```
8. Pare e reinicie o servidor para que as alterações nos arquivos angular.jsonoverrides.json e entrem em vigor.
  Interrompa o trabalho. Em seguida, execute:
```
yarn stop-app
```
```
yarn start-app
```
9. Crie uma pasta personalizada em “buc-app-order/packages/create-order/src-custom/assets”. Você pode colocar seus recursos personalizados nesta pasta.
10. Crie uma pasta i18n em 'buc-app-order/packages/create-order/src-custom/assets/custom'.
11. Crie um arquivo en.json em 'buc-app-order/packages/create-order/src-custom/assets/custom/i18n.
  O en.json arquivo inclui as strings literais em inglês a serem exibidas na interface do usuário. Você pode adicionar strings traduzidas criando outros arquivos JSON. Nomeie os arquivos com base nos códigos de idioma ISO-639. Por exemplo, fr.json para strings em francês.
12. Cole o seguinte conteúdo JSON no arquivo en.json .
```
{
    "CREATE_ORDER": {
        "ORDER_SETUP": {
            "CUSTOMER_PO_ORDER_LABEL": "Customer purchase order number (optional)"
        }
    }
}
```
  Este arquivo de tradução é usado para exibir o texto em inglês para a caixa de entrada que você criou na etapa 9.
Abra o arquivo src-custom/app/features/order/create-order/order-setup/order-setup.component.ts.
Adicione a seguinte variável à classe OrderSetupComponent.
```
custPONo = '';
```
Como essa caixa de entrada personalizada é semelhante à caixa de entrada Número do pedido existente, você pode procurar no order-setup.component. arquivo a variável ` orderNo ` e copiar sua implementação para a variável ` custPONo `.
1. Seguindo a lógica orderNo, adicione o seguinte código à função prepareOrderDetails( ).
```
this.custPONo = this.orderDetailsData.CustomerPONo;
```
  Para obter mais informações sobre a CustomerPONo API, consulte o Javadoc.
2. Adicione o seguinte código à função ` changeOrder( `.
```
CustomerPONo: this.custPONo,
```
3. O último lugar em que a variável orderNo aparece é na função onText($event, field). Você não precisa usar esta função, portanto ignore esta parte.
Certifique-se de que o parâmetro seja passado para a chamada da API. A API utilizada para criar um pedido é denominad createOrder e está localizada em buc-app-order/packages/order-shared/src/lib/data-services/create-order-data.service.ts. Agora você precisa personalizar esse arquivo.ts.
1. Crie uma pasta de serviços de dados em /packages/create-order/src-custom/app/.
2. Copie o buc-app-order/packages/order-shared/src/lib/data-services/create-order-data.service.ts arquivo para esta nova pasta.
3. Abra o buc-app-order/packages/create-order/src-custom/app/data-services/create-order-data.service.ts arquivo
4. Atualize os caminhos de importação para Modelos e CommonService.
```
import { Templates } from '@buc/order-shared/lib/constants/order.constants';
import { CommonService } from '@buc/order-shared/lib/data-services/common-service.service';
```
5. Em createOrChangeOrder, adicione o seguinte código para passar o valor CustomerPONo da caixa de entrada.
```
CustomerPONo: params.CustomerPONo,
```
6. Modifique o buc-app-order/packages/create-order/src-custom/app/app-customization.impl.ts arquivo da seguinte maneira.
  - Adicione uma instrução de importação:
```
import { CreateOrderDataService } from "./data-services/create-order-data.service";
```
  - Adicione o CreateOrderDataService à matriz de provedores.
  Por exemplo,
```
import { CreateOrderDataService } from "./data-services/create-order-data.service";

export class AppCustomizationImpl {
    static readonly components = [];

    static readonly providers = [CreateOrderDataService];

    static readonly imports = [];

}
```
7. No src-custom/app/features/order/create-order/order-setup/order-setup.components.ts arquivo, altere o caminho de importação para o CreateOrderDataService para:
```
import { CreateOrderDataService } from '../../../../data-services/create-order-data.service';
```
Você adicionou com sucesso uma caixa de entrada à página Criar detalhes do pedido. Agora teste as alterações.
1. Faça login no Order Hub de última geração.
2. Clique em Pedidos > Saída.
3. Clique em Criar pedido
  Agora você pode ver o campo Número do pedido de compra do cliente (opcional).

O que fazer depois

Implemente sua personalização. Para obter mais informações, consulte Preparando-se para implantar personalizações para aplicativos existentes.