Incluindo uma caixa de entrada na página de detalhes "Criar pedido"

O fluxo "Criar pedido" é uma ação de Pedido que pertence ao módulo buc-app-order ... Nesta lição, você aprende como ativar a customização para o módulo buc-app-order , copiar os ativos necessários para iniciar a customização e, em seguida, incluir uma caixa de entrada para capturar um número de ordem de compra do cliente.

Procedimento

Abra o arquivo devtoolkit_docker/orderhub-code/buc-app-order/overrides.json .
Para create-order, defina runAsCustomization como true para ativar a personalização dessa rota. Essa configuração instrui o Order Hub a examinar seu código customizado quando a rota create-order for chamada.

Importante: Defina runAsCustomization como true apenas para as rotas que estão sendo personalizadas no momento. É recomendado customizar um máximo de cinco rotas por vez.
Localize o código-fonte para a página existente do Criar pedido
Nesse caso, os arquivos estão em buc-app-order/packages/create-order/src/app/features/order/create-order/order-setup/
Replicar a estrutura de pasta src na pasta src-custom .
1. acesse o diretório buc-app-order/packages/create-order/src-custom/app .
2. Criar as pastas features / order/create-order/order-setup
  Assegure-se de que o caminho resultante seja: buc-app-order/packages/create-order/src-custom/app/features/order/create-order/order-setup/.
acesse 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 .

Nota: não é necessário copiar o arquivo .scss, pois este tutorial não altera o estilo dos elementos
Cole os arquivos para o 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 É possível ignorar esses erros..
Abra o arquivo src-custom/app/features/order/create-order/order-setup/order-setup.component.html ..
Como você precisa incluir uma caixa de entrada, analise as caixas de entrada existentes no arquivo order-setup.component.html . É possível usar a caixa de entrada Número do pedido como um ponto de partida A etapa a seguir usa código que é semelhante à caixa de entrada Número do pedido.
Inclua a nova caixa de entrada na mesma linha que o campo "Data de cancelamento solicitada" existente
Dica: procure por "Data de cancelamento solicitada" e observe que ela está dentro de uma div com class bx--row. Inclua a caixa de entrada a seguir como uma coluna dentro dessa 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 incluam um Número da ordem de compra do cliente na ordem que eles estão criando
- O valor [label] usa a notação de ponto para recuperar a cadeia de arquivos de tradução JSON. Você criará o arquivo en.json que retém a sequência literal em etapas posteriores
- O custPONo é uma variável customizada que manterá a entrada do usuário. Você atualizará o arquivo .ts para incluir essa nova variável custPONo em etapas posteriores
Defina sequências de conversão e configurações de 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 arquivo buc-app-order/angular.json .
3. Substitua o conteúdo atual da matriz de projetos > create-order > architect > build > configurações > mesclado > ativos com as entradas a seguir. O propósito desta etapa para direcionar o módulo para usar os arquivos de ativos customizados 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. Além disso, substitua o conteúdo na matriz projects > create-order > architect > build > configurações > merge-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. acesse o diretório buc-app-order/packages/create-order/src-custom/environments .
7. Inclua a linha a seguir no final dos arquivos environment.ts e envrionment.prod.ts .
```
environment.customization = true;
```
8. Pare e reinicie o servidor para que as mudanças nos arquivos angular.json e overrides.json entrem em vigor.
  Pare a tarefa no terminal Em seguida, execute:
```
yarn stop-app
```
```
yarn start-app
```
9. Crie uma pasta customizada em 'buc-app-order/packages/create-order/src-custom/assets' É possível colocar seus ativos customizados nesta pasta.
10. Crie uma pasta i18n sob '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 arquivo en.json inclui as sequências literais em inglês a serem exibidas na UI. É possível incluir sequências traduzidas criando outros arquivos JSON.. Nomeie os arquivos com base nos códigos de idioma ISO-639 .. Por exemplo, fr.json para sequências em francês.
12. Cole o conteúdo JSON a seguir no arquivo en.json
```
{
    "CREATE_ORDER": {
        "ORDER_SETUP": {
            "CUSTOMER_PO_ORDER_LABEL": "Customer purchase order number (optional)"
        }
    }
}
```
  Esse arquivo de tradução é usado para exibir o texto em inglês para a caixa de entrada criada 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 customizada é semelhante à caixa de entrada Número do pedido existente, é possível procurar no arquivo order-setup.component. 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 API CustomerPONo , consulte o Javadoc.
2. Adicione o seguinte código à função changeOrder( ).
```
CustomerPONo: this.custPONo,
```
3. O último local em que a variável orderNo aparece é na função onText($event, field). Não é necessário usar esta função, portanto ignore esta parte.
Assegure-se de que o parâmetro seja transmitido para a chamada da API (interface de programação de aplicativos) A API que é usada para criar um pedido é denominada createOrder e está localizada em buc-app-order/packages/order-shared/src/lib/data-services/create-order-data.service.ts.. Agora é necessário customizar esse arquivo .ts.
1. Crie uma pasta data-services em /packages/create-order/src-custom/app/.
2. Copie o arquivo buc-app-order/packages/order-shared/src/lib/data-services/create-order-data.service.ts para essa nova pasta
3. Abra o arquivo buc-app-order/packages/create-order/src-custom/app/data-services/create-order-data.service.ts
4. Atualizar 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 arquivo buc-app-order/packages/create-order/src-custom/app/app-customization.impl.ts conforme a seguir
  - Inclua 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 arquivo src-custom/app/features/order/create-order/order-setup/order-setup.components.ts, altere o caminho de importação do CreateOrderDataService para:
```
import { CreateOrderDataService } from '../../../../data-services/create-order-data.service';
```
Você incluiu com sucesso uma caixa de entrada na página Criar detalhes do pedido Agora teste as mudanças.
1. Efetue login no Order Hub.
2. Clique em Pedidos > Saída.
3. clique em Criar pedido
  Agora é possível ver o campo Número da ordem de compra do cliente (opcional).