Adición de un recuadro de entrada a la página de detalles "Crear pedido"

El flujo "Crear orden" es una acción de orden que pertenece al módulo buc-app-order . En esta lección, aprenderá a habilitar la personalización para el módulo buc-app-order , copiar los activos necesarios para iniciar la personalización y, a continuación, añadir un recuadro de entrada para capturar un número de orden de compra de cliente.

Procedimiento

Abra el archivo devtoolkit_docker/orderhub-code/buc-app-order/overrides.json .
Para crear un pedido, establezca runAsCustomization en true para habilitar la personalización de esta ruta. Esta configuración indica a Order Hub que mire el código personalizado cuando se llama a la ruta create-order.

Importante: Sólo establezca runAsCustomization a true para las rutas que se están personalizando actualmente. Se recomienda personalizar un máximo de cinco rutas a la vez.
Busque el código fuente para la página Crear pedido existente.
En este caso, los archivos se encuentran en buc-app-order/packages/create-order/src/app/features/order/create-order/order-setup/.
Replique la estructura de carpetas src en la carpeta src-custom .
1. Vaya al directorio buc-app-order/packages/create-order/src-custom/app .
2. Crear las carpetas features/order/create-order/order-setup
  Asegúrese de que la vía de acceso resultante sea: buc-app-order/packages/create-order/src-custom/app/features/order/create-order/order-setup/.
Vaya al directorio buc-app-order/packages/create-order/src/app/features/order/create-order/order-setup y copie los archivos order-setup.component.html y order-setup.component.ts .

Nota: No es necesario copiar el archivo .scss, ya que esta guía de aprendizaje no cambia el estilo de los elementos.
Pegue los archivos en el directorio buc-app-order/packages/create-order/src-custom/app/features/order/create-order/order-setup .
Es posible que observe algunos errores debido a las vías de acceso relativas. Puede hacer caso omiso de estos errores.
Abra el archivo src-custom/app/features/order/create-order/order-setup/order-setup.component.html .
Como necesita añadir un recuadro de entrada, analice los recuadros de entrada que existen en el archivo order-setup.component.html . Puede utilizar el recuadro de entrada Número de pedido como punto de partida. El paso siguiente utiliza un código similar al recuadro de entrada Número de pedido.
Añada el nuevo recuadro de entrada en la misma fila que el campo "Fecha de cancelación solicitada" existente.
Sugerencia: Busque "Fecha de cancelación solicitada" y observe que está dentro de una división con class bx--row. Añada el siguiente recuadro de entrada como una columna dentro de esta fila.
```
<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>
```
- Este recuadro de entrada permite a los usuarios añadir un Número de orden de compra del cliente al pedido que están creando.
- El valor [label] utiliza la notación de puntos para recuperar la serie de los archivos de traducción JSON. Creará el archivo en.json que contiene la serie literal en pasos posteriores.
- custPONo es una variable personalizada que contendrá la entrada de usuario. Actualizará el archivo .ts para incluir esta nueva variable custPONo en pasos posteriores.
Configurar series de conversión y configuraciones de entorno.
1. Copie la carpeta assets de buc-app-order/packages/order-shared y péguela en buc-app-order/packages/create-order/src-custom.
2. Abra el archivo buc-app-order/angular.json .
3. Sustituya el contenido actual de los proyectos > create-order > arquitecto > build > configuraciones > fusionado > activos matriz con las entradas siguientes. La finalidad de este paso es indicar al módulo que utilice los archivos de elementos personalizados en lugar de los archivos 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. Sustituya también el contenido de los proyectos > create-order > arquitecto > build > configuraciones > fusionado-prod > activos matriz.
5. Copie la carpeta environments de 'buc-app-order/packages/create-order/src' en 'buc-app-order/packages/create-order/src-custom'.
6. Vaya al directorio buc-app-order/packages/create-order/src-custom/environments .
7. Añada la línea siguiente al final de los archivos environment.ts y envrionment.prod.ts .
```
environment.customization = true;
```
8. Detenga y reinicie el servidor para que los cambios en los archivos angular.json y overrides.json entren en vigor.
  Detenga el trabajo en el terminal. A continuación, ejecute:
```
yarn stop-app
```
```
yarn start-app
```
9. Cree una carpeta personalizada bajo 'buc-app-order/packages/create-order/src-custom/assets'. Puede colocar los activos personalizados en esta carpeta.
10. Cree una carpeta i18n bajo 'buc-app-order/packages/create-order/src-custom/assets/custom'.
11. Cree un archivo en.json bajo 'buc-app-order/packages/create-order/src-custom/assets/custom/i18n.
  El archivo en.json incluye las series literales en inglés que se van a visualizar en la interfaz de usuario. Puede añadir series traducidas creando otros archivos JSON. Asigne un nombre a los archivos basándose en los códigos de idioma ISO-639 . Por ejemplo, fr.json para series en francés.
12. Pegue el siguiente contenido JSON en el archivo en.json .
```
{
    "CREATE_ORDER": {
        "ORDER_SETUP": {
            "CUSTOMER_PO_ORDER_LABEL": "Customer purchase order number (optional)"
        }
    }
}
```
  Este archivo de traducción se utiliza para visualizar el texto en inglés del recuadro de entrada que ha creado en el paso 9.
Abra el archivo src-custom/app/features/order/create-order/order-setup/order-setup.component.ts .
Añade la siguiente variable a la clase OrderSetupComponent.
```
custPONo = '';
```
Puesto que este recuadro de entrada personalizado es similar al recuadro de entrada Número de pedido existente, puede buscar en el archivo order-setup.component. la variable orderNo y copiar su implementación para la variable custPONo .
1. Siguiendo la lógica de orderNo, añada el siguiente código a la función prepareOrderDetails( ).
```
this.custPONo = this.orderDetailsData.CustomerPONo;
```
  Para obtener más información sobre la API de CustomerPONo , consulte el Javadoc.
2. Añade el siguiente código a la función changeOrder( ).
```
CustomerPONo: this.custPONo,
```
3. El último lugar donde aparece la variable orderNo es en la función onText($event, field). No es necesario utilizar esta función, por lo tanto, ignore esta parte.
Asegúrese de que el parámetro se pasa a la llamada de API. La API que se utiliza para crear una orden se denomina createOrder y se encuentra en buc-app-order/packages/order-shared/src/lib/data-services/create-order-data.service.ts. Ahora necesita personalizar este archivo .ts.
1. Cree una carpeta data-services en /packages/create-order/src-custom/app/.
2. Copie el archivo buc-app-order/packages/order-shared/src/lib/data-services/create-order-data.service.ts en esta carpeta nueva.
3. Abra el archivo buc-app-order/packages/create-order/src-custom/app/data-services/create-order-data.service.ts
4. Actualice las vías de acceso de importación para Templates y CommonService.
```
import { Templates } from '@buc/order-shared/lib/constants/order.constants';
import { CommonService } from '@buc/order-shared/lib/data-services/common-service.service';
```
5. En createOrChangeOrder añada el siguiente código para pasar el valor CustomerPONo del cuadro de entrada.
```
CustomerPONo: params.CustomerPONo,
```
6. Modifique el archivo buc-app-order/packages/create-order/src-custom/app/app-customization.impl.ts como se indica a continuación.
  - Añada una sentencia de importación:
```
import { CreateOrderDataService } from "./data-services/create-order-data.service";
```
  - Añade el CreateOrderDataService a la matriz de proveedores.
  Por ejemplo:
```
import { CreateOrderDataService } from "./data-services/create-order-data.service";

export class AppCustomizationImpl {
    static readonly components = [];

    static readonly providers = [CreateOrderDataService];

    static readonly imports = [];

}
```
7. En el archivo src-custom/app/features/order/create-order/order-setup/order-setup.components.ts, cambie la ruta de importación de CreateOrderDataService a:
```
import { CreateOrderDataService } from '../../../../data-services/create-order-data.service';
```
Ha añadido correctamente un recuadro de entrada a la página Crear detalles de pedido. Ahora pruebe los cambios.
1. Inicie sesión en Order Hub.
2. Pulse Pedidos > Salientes.
3. Pulse Crear pedido
  Ahora puede ver el campo Número de orden de compra de cliente (opcional).