SfCrud

This library was generated with Angular CLI version 14.2.0.

Code scaffolding

Run ng generate component component-name --project sf-crud to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project sf-crud.

Note: Don't forget to add --project sf-crud or else it will be added to the default project in your angular.json file.

Build

Run ng build sf-crud to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build sf-crud, go to the dist folder cd dist/sf-crud and run npm publish.

Running unit tests

Run ng test sf-crud to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Elementos de UI scheme para simulaciones (13.4.0)

Action

Boton que dispara una accion bajo demanda de FormService (POST forms-submission/{idKatios}/{submissionId}/actions/{trigger}). sf-crud no llama al backend: emite stepService.customChildrenEvents$ con name = "onTriggerAction" y data = { element, trigger, data, index }. El host (forms-ui) hace la peticion y fusiona el FormData devuelto.

{
  "type": "Action",
  "label": "Simular",
  "trigger": "simular",
  "icon": "pi pi-calculator",
  "severity": "primary",
  "requires": [
    "$..properties.entrada.properties.plazo",
    "$..properties.entrada.properties.tasa"
  ]
}

• requires: scopes que deben tener valor para habilitar el boton.
• runAfterVoice: true (lo lee el host): vuelve a disparar el trigger despues de un llenado por voz.

Matrix

Tabla comparativa: conceptos en filas y elementos del arreglo en columnas. En escritorio y tablet se pinta como tabla; en celular (ancho <= 768 px) como tarjetas, una por columna, con cabecera colapsable. Las filas marcadas como editable se pintan como p-inputNumber y al confirmar el cambio (blur o Enter) disparan onEditTrigger, el mismo evento que un Action, para que el host vuelva a simular con el nuevo valor.

{
  "type": "Matrix",
  "label": "Comparativo por linea",
  "scope": "$..properties.resultado.properties.comparativo",
  "columnKey": "line",
  "columnLabelKey": "lineName",
  "rowHeader": "Concepto",
  "layout": "auto",
  "onEditTrigger": "OnSimulate",
  "selectable": { "key": "selected" },
  "card": { "subtitleTemplate": "{rate:percentage} · {term:months}", "expandFirst": true, "multiple": true },
  "rows": [
    { "key": "term", "label": "Plazo (meses)", "format": "months", "editable": { "min": 1, "max": 180 } },
    { "key": "rate", "label": "Tasa % M.V.", "format": "percentage", "summary": true },
    { "key": "amount", "label": "Monto", "format": "currency", "summary": true },
    { "key": "installment", "label": "Cuota", "format": "currency", "highlight": true },
    { "key": "viable", "label": "Viable", "format": "boolean" }
  ],
  "emptyMessage": "Ejecute la simulacion para ver el comparativo"
}

• Si rows no viene, se derivan de las llaves del primer elemento del arreglo.

• format: currency | percent (fraccion, 0.017 = 1,7 %) | percentage (ya en porcentaje, 1.7 = 1,70 %) | months (48 m) | number | boolean | text.

• layout: auto (tabla o tarjetas segun el ancho) | table | cards.

• editable: la celda se pinta con el mismo sf-control del formulario, asi acepta cualquier tipo (numeric, string, dropdown, checkbox, date...). Tres formas:

  • true: control numeric derivado de format (currency, percentage o decimal).
  • Definicion inline con la misma forma del esquema: { "type": "string", "subtype": "dropdown", "field": "value", "config": { "customOptions": [...], "optionValue": "value", "optionLabel": "label" } }.
  • { "scope": "$..properties.resultado..properties.comparativo..properties.term", "max": 180 }: toma el control del esquema (items.properties) y aplica el resto de llaves como overrides.

  El valor editado se escribe en el mismo elemento del arreglo en el data, asi el body de la accion ("lines": @lineas) ya lo lleva. Los inputs confirman con blur o Enter; dropdown, checkbox, switch, date y botones confirman al cambiar.

• onEditTrigger: trigger que se dispara al confirmar una celda editable. El evento lleva element.source = "Matrix", element.row (llave editada) y element.item (la columna).

• selectable: checkbox por columna que marca item[key] (selected por defecto, default: true). onSelectTrigger opcional dispara una accion al cambiarlo.

• card (solo tarjetas): subtitleKey o subtitleTemplate ({llave} o {llave:format}), expandFirst (abre la primera tarjeta, por defecto true), multiple (varias abiertas a la vez). Las filas con summary: true se muestran a la derecha del titulo cuando la tarjeta esta cerrada; las editables van en una grilla de campos y el resto como lineas concepto/valor.

Condiciones empty / notEmpty y opciones desde el data

Para mostrar un bloque solo despues de una accion (el resultado de la simulacion), en registro.conditions:

{ "type": "notEmpty", "attrs": { "field": "$.resultado.comparativo" } }

y en el layout o elemento del UI scheme "conditions": [1] (indice de esa condicion). empty es el inverso.

Un dropdown (o multiselect) puede tomar sus opciones de un arreglo del propio formulario con config.optionsScope, por ejemplo para elegir una de las lineas que devolvio la simulacion:

"lineaSeleccionada": {
  "type": "string", "subtype": "dropdown", "field": "line",
  "config": { "optionsScope": "$..properties.resultado..properties.comparativo", "optionValue": "line", "optionLabel": "lineName" }
}

Las opciones se releen cada vez que el formulario se reconstruye. Si el valor elegido deja de estar entre las opciones se limpia; con una sola opcion se selecciona sola (autoSelectSingle: false lo evita).

Info

Valor de solo lectura con etiqueta, para mostrar el bloque comun de una simulacion (capacidad, ingreso neto, plazo maximo) encima de la matriz sin usar controles deshabilitados.

{
  "type": "HorizontalLayout",
  "class": "p-fluid p-formgrid grid",
  "elements": [
    { "type": "Info", "label": "Ingreso neto", "class": "col-6", "size": "md", "format": "currency",
      "scope": "$..properties.resultado..properties.ingresoNeto" },
    { "type": "Info", "label": "Capacidad", "class": "col-6", "size": "md", "format": "currency",
      "scope": "$..properties.resultado..properties.capacidadNomina",
      "styles": { "value": { "class": "text-primary" } } }
  ]
}

• format: los mismos de la matriz. emptyText (por defecto -) cuando no hay valor.
• layout: inline (etiqueta a la izquierda, valor a la derecha) | stacked (valor debajo).
• size: xs | sm | md | lg | xl, tamano del valor; la etiqueta va un paso menor.
• styles: container, label, value, cada uno con class y style.

Estilos de la matriz

Todo el diseno sale del UI scheme. Cada parte acepta class (PrimeFlex o propias) y style inline; align acepta left | center | right.

{
  "type": "Matrix",
  "scope": "...",
  "styles": {
    "title":   { "class": "text-white" },
    "table":   { "class": "border-round" },
    "header":  { "class": "bg-transparent text-primary", "align": "center", "conceptAlign": "left" },
    "concept": { "class": "font-bold", "align": "left" },
    "cell":    { "class": "text-right" },
    "row":     { "class": "" },
    "empty":   { "class": "text-500" }
  },
  "rows": [
    { "key": "installment", "label": "Cuota", "format": "currency", "align": "right", "class": "font-bold" },
    { "key": "transfer", "label": "Giro", "format": "currency", "highlight": true,
      "cellRules": [
        { "op": "<",  "value": 0, "class": "text-red-500" },
        { "op": ">=", "value": 0, "class": "text-green-500" }
      ] },
    { "key": "viable", "label": "Viable", "format": "boolean", "align": "center",
      "cellRules": [
        { "op": "==", "value": true,  "class": "text-green-600 font-bold" },
        { "op": "==", "value": false, "class": "text-red-600 font-bold" }
      ] }
  ]
}

• Por fila: align, class (al <tr>), style, cellClass / cellStyle (a cada celda de valor), conceptClass, highlight (fondo suave con el color secundario).
• cellRules: reglas condicionales por celda. op: ==, !=, <, <=, >, >=, in, notIn, empty, notEmpty, contains, startsWith, endsWith. Cada regla aporta class y/o style. Se aplican todas las que se cumplan. Los numeros se comparan como numero, el resto como texto sin distinguir mayusculas.

Ocultar el boton Guardar

El boton Guardar/Actualizar del pie se oculta solo cuando registros[0] no tiene operations (o es un arreglo vacio). Es el caso de simuladores o consultas que solo usan elementos Action:

[
  {
    "label": "Simulador comercial",
    "conditions": [
      { "type": "equal", "attrs": { "field": "entrada.modo", "value": "InstallmentAmount" } }
    ]
  }
]

Si el registro si tiene operaciones pero aun asi no se quiere el boton, hideSubmit: true lo fuerza. Los default literales del esquema (numeros, textos, booleanos) se aplican igual sin operaciones; solo los default con key o comodines (@uactivo, @hoy, ...) requieren una operacion con keys.