xambey

Untitled

Apr 30th, 2020
312
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <nz-spin [nzSpinning]="loaderKey | swIsLoading | async">
  2.   <form #form="ngForm" *ngIf="abstractControl" [form]="abstractControl" ngxScrollToFirstInvalid>
  3.     <ng-container
  4.      *ngTemplateOutlet="reactiveFormTemplate; context: { modelStructure: modelStructure, model: settings?.model, control: abstractControl, root: true  }"></ng-container>
  5.     <ng-template #reactiveFormTemplate let-control="control" let-model="model" let-modelStructure="modelStructure"
  6.                 let-root="root">
  7.       <!--        Корневой шаблон - строка-->
  8.       <ng-template [ngIfElse]="bodyTemplate" [ngIf]="root && modelStructure && model">
  9.         <div
  10.          [class.align-items-center]="modelStructure.alignItemsCenter"
  11.          [class.align-items-end]="modelStructure.alignItemsEnd"
  12.          [class.align-items-start]="modelStructure.alignItemsStart"
  13.          [class.align-self-center]="modelStructure.alignSelfCenter"
  14.          [class.align-self-end]="modelStructure.alignSelfEnd"
  15.          [class.align-self-start]="modelStructure.alignSelfStart"
  16.          [class.justify-content-around]="modelStructure.justifyContentAround"
  17.          [class.justify-content-between]="modelStructure.justifyContentBetween"
  18.          [class.justify-content-center]="modelStructure.justifyContentCenter"
  19.          [class.justify-content-end]="modelStructure.justifyContentEnd"
  20.          [class.justify-content-start]="modelStructure.justifyContentStart"
  21.          [ngClass]="modelStructure.class"
  22.  
  23.          [ngStyle]="modelStructure.style"
  24.          [nzType]="modelStructure.nzType"
  25.          [style.align]="modelStructure.align"
  26.          [style.height]="modelStructure.height"
  27.          [style.left]="modelStructure.left"
  28.          [style.maxHWidth]="modelStructure.maxWidth"
  29.          [style.maxHeight]="modelStructure.maxHeight"
  30.          [style.minHeight]="modelStructure.minHeight"
  31.          [style.minWidth]="modelStructure.minWidth"
  32.          [style.right]="modelStructure.right"
  33.  
  34.          [style.width]="modelStructure.width"
  35.          nz-row
  36.        >
  37.           <ng-container *ngTemplateOutlet="bodyTemplate"></ng-container>
  38.         </div>
  39.       </ng-template>
  40.       <ng-template #bodyTemplate>
  41.  
  42.         <!--            Шаблон отрисовки колонки формы
  43. -->
  44.         <ng-template #colTemplate let-key="key" let-outlet>
  45.           <div
  46.            *ngIf="layoutService.getControlStylesConfig(model,'layout', layoutService.tryGetAccessorControlName(key)); else outlet; let styles"
  47.            [class.adm-form-col]="true"
  48.            [ngClass]="styles.class"
  49.            [ngStyle]="styles.style"
  50.            [nzLg]="styles.allFlex ? styles.allFlex : styles.lg"
  51.            [nzMd]="styles.allFlex ? styles.allFlex : styles.md"
  52.            [nzOffset]="styles.offset"
  53.            [nzOrder]="styles.order"
  54.            [nzPull]="styles.pull"
  55.            [nzPush]="styles.push"
  56.            [nzSm]="styles.allFlex ? styles.allFlex : styles.sm"
  57.            [nzSpan]="styles.span"
  58.            [nzXXl]="styles.allFlex ? styles.allFlex : styles.xxl"
  59.            [nzXl]="styles.allFlex ? styles.allFlex : styles.xl"
  60.            [nzXs]="styles.allFlex ? styles.allFlex : styles.xs"
  61.            [style.textAlign]="styles.textAlign"
  62.            nz-col
  63.          >
  64.             <ng-container *ngTemplateOutlet="outlet"></ng-container>
  65.           </div>
  66.         </ng-template>
  67.  
  68.         <!--            Шаблон отрисовывающий элементы по метаданным модели. modelStructure - копия модели без привязок (ссылок),
  69.        model - оригинальный объект модели, control - AbstractControl на текущем уровне модели (может быть рекурсивным)
  70. -->
  71.         <ng-container *ngFor="let entry of layoutService.transformStructureModel(modelStructure); trackBy: trackByFn"
  72.                      [formGroup]="control">
  73.           <!--                Формирует отрисовку примитивных типов -->
  74.           <ng-container *ngIf="layoutService.isPrimitiveOrArray(entry.value); else compositeTemplate">
  75.             <ng-container
  76.              *ngIf="layoutService.getControlConfigs(model, layoutService.tryGetAccessorControlName(entry.key)); let configs">
  77.               <ng-container *ngFor="let config of configs">
  78.                 <ng-container
  79.                  *ngIf="(config?.conditionalExpression ? config.conditionalExpression(control.get(layoutService.tryGetAccessorControlName(entry.key)), model) : true)">
  80.                   <!--                                controlType - тип контрола из конфигурации, берущийся из метаданных свойства-->
  81.                   <ng-container [ngSwitch]="config.controlType">
  82.                     <ng-container *ngSwitchCase="LayoutItem.Switch">
  83.                       <ng-container
  84.                        *ngTemplateOutlet="colTemplate; context: { $implicit: switchElementTemplate, key: entry.key}"></ng-container>
  85.                       <ng-template #switchElementTemplate>
  86.                         <nz-switch
  87.                          (ngModelChange)="config?.ngModelChange"
  88.                          [formControlName]="entry.key"
  89.                          [id]="layoutService.tryGetAccessorControlName(entry.key)"
  90.                          [ngClass]="config.class"
  91.                          [ngStyle]="config.style"
  92.                          [nzCheckedChildren]="config?.checkedChildren"
  93.                          [nzControl]="config?.control"
  94.                          [nzDisabled]="config?.disabled"
  95.                          [nzLoading]="config?.loading"
  96.                          [nzSize]="config?.size"
  97.                          [nzUnCheckedChildren]="config?.uncheckedChildren"
  98.                          [tabIndex]="config.tabindex"
  99.                        ></nz-switch>
  100.                         <ng-container
  101.                          *ngTemplateOutlet="errorTemplate; context: { $implicit: layoutService.getControl(control, entry.key) }"></ng-container>
  102.                       </ng-template>
  103.                     </ng-container>
  104.                     <ng-container *ngSwitchCase="LayoutItem.Checkbox">
  105.                       <ng-container
  106.                        *ngTemplateOutlet="colTemplate; context: { $implicit: checkboxElementTemplate, key: entry.key}"></ng-container>
  107.                       <ng-template #checkboxElementTemplate>
  108.                         <label
  109.                          (ngModelChange)="config?.ngModelChange"
  110.                          [formControlName]="entry.key"
  111.                          [id]="layoutService.tryGetAccessorControlName(entry.key)"
  112.                          [ngClass]="config.class"
  113.                          [ngStyle]="config.style"
  114.                          [nzAutoFocus]="config?.autoFocus"
  115.                          [nzDisabled]="config?.disabled"
  116.                          [nzIndeterminate]="config?.indeterminate"
  117.                          [nzValue]="config?.value"
  118.                          [tabIndex]="config.tabindex"
  119.                          nz-checkbox
  120.                        > {{ config.label ? layoutService.translateControlValue(model, layoutService.tryGetAccessorControlName(entry.key), config?.label) : undefined }} </label>
  121.                         <ng-container
  122.                          *ngTemplateOutlet="errorTemplate; context: { $implicit: layoutService.getControl(control, entry.key) }"></ng-container>
  123.                       </ng-template>
  124.                     </ng-container>
  125.                     <ng-container *ngSwitchCase="LayoutItem.Input">
  126.                       <div
  127.                        *ngIf="layoutService.getControlStylesConfig(model,'layout', layoutService.tryGetAccessorControlName(entry.key)); else inputElementTemplate; let styles"
  128.                        [class.adm-form-col]="true"
  129.                        [ngClass]="styles.class"
  130.                        [ngStyle]="styles.style"
  131.                        [nzLg]="styles.allFlex ? styles.allFlex : styles.lg"
  132.                        [nzMd]="styles.allFlex ? styles.allFlex : styles.md"
  133.                        [nzOffset]="styles.offset"
  134.                        [nzOrder]="styles.order"
  135.                        [nzPull]="styles.pull"
  136.                        [nzPush]="styles.push"
  137.                        [nzSm]="styles.allFlex ? styles.allFlex : styles.sm"
  138.                        [nzSpan]="styles.span"
  139.                        [nzXXl]="styles.allFlex ? styles.allFlex : styles.xxl"
  140.                        [nzXl]="styles.allFlex ? styles.allFlex : styles.xl"
  141.                        [nzXs]="styles.allFlex ? styles.allFlex : styles.xs"
  142.                        [style.textAlign]="styles.textAlign"
  143.                        nz-col
  144.                      >
  145.                         <ng-container *ngIf="config?.textarea; else inputElementTemplate">
  146.                           <ng-container *ngTemplateOutlet="textareaElementTemplate"></ng-container>
  147.                         </ng-container>
  148.                       </div>
  149.                       <ng-template #textareaElementTemplate>
  150.                                                   <textarea
  151.                                                    [InputFilter]="config.inputFilter"
  152.                                                    adm-autofill
  153.                                                    [autocomplete]="config.autocomplete"
  154.  
  155.                                                    [disableControl]="config.disabled"
  156.                                                    [formControlName]="entry.key"
  157.                                                    [id]="layoutService.tryGetAccessorControlName(entry.key)"
  158.                                                    [ngClass]="config.class"
  159.                                                    [ngStyle]="config.style"
  160.                                                    [nzAutosize]="config?.autosize"
  161.                                                    [nzTooltipPlacement]="layoutService.getControlConfig(model, 'tooltip', entry.key)?.placement"
  162.                                                    [nzTooltipTitle]="layoutService.getControlConfig(model, 'tooltip', entry.key)?.label"
  163.                                                    [nzTooltipTrigger]="layoutService.getControlConfig(model, 'tooltip', layoutService.tryGetAccessorControlName(entry.key))?.trigger"
  164.                                                    [readOnly]="config.readOnly"
  165.                                                    [rows]="config?.rows"
  166.                                                    [style.readonly]="config.readOnly"
  167.                                                    [tabIndex]="config.tabindex"
  168.                                                    adm-input-filter
  169.                                                    nz-input
  170.                                                    nz-tooltip
  171.                                                  ></textarea>
  172.                         <ng-container
  173.                          *ngTemplateOutlet="errorTemplate; context: { $implicit: layoutService.getControl(control, entry.key) }"></ng-container>
  174.                       </ng-template>
  175.                       <ng-template #inputElementTemplate>
  176.                         <ng-template #showPasswordTemplate>
  177.                           <i (click)="config.passwordVisible = !config.passwordVisible"
  178.                             [nzType]="config?.passwordVisible ? 'eye-invisible' : 'eye'"
  179.                             nz-icon></i>
  180.                         </ng-template>
  181.                         <nz-input-group
  182.                          [ngClass]="layoutService.controlValid(layoutService.getControl(control, entry.key)) ? 'has-error' : ''"
  183.                          [nzSuffix]="!config?.readOnly && !config?.disabled && config?.passwordVisible === undefined ? clearInputTemplate : (config?.passwordVisible !== undefined ? showPasswordTemplate : undefined)"
  184.                          [tabIndex]="config.tabindex"
  185.                        >
  186.                           <input
  187.                            [InputFilter]="config.inputFilter"
  188.                            adm-autofill
  189.                            [autocomplete]="config.autocomplete"
  190.  
  191.  
  192.                            [autofocus]="false"
  193.                            [disableControl]="config.disabled"
  194.                            [formControlName]="entry.key"
  195.                            [id]="layoutService.tryGetAccessorControlName(entry.key)"
  196.                            [ngClass]="config.class"
  197.                            [ngStyle]="config.style"
  198.                            [nzTooltipPlacement]="layoutService.getControlConfig(model, 'tooltip', entry.key)?.placement"
  199.                            [nzTooltipTitle]="layoutService.getControlConfig(model, 'tooltip', entry.key)?.label"
  200.                            [nzTooltipTrigger]="layoutService.getControlConfig(model, 'tooltip', layoutService.tryGetAccessorControlName(entry.key))?.trigger"
  201.                            [placeholder]="layoutService.translateControlValue(model, layoutService.tryGetAccessorControlName(entry.key), config.placeholder)"
  202.                            [readOnly]="config.readOnly"
  203.                            [style.readonly]="config.readOnly"
  204.                            [tabIndex]="config.tabindex"
  205.                            [textMask]="config?.maskOptions"
  206.  
  207.                            [type]="config?.passwordVisible !== undefined ? (config?.passwordVisible ? 'text' : 'password') : config?.type"
  208.  
  209.                            adm-input-filter
  210.                            nz-input
  211.                            nz-tooltip
  212.                          />
  213.                         </nz-input-group>
  214.                         <button
  215.                          *ngIf="config.valueGeneratorOptions"
  216.                          nzGhost
  217.                          nzShape="circle"
  218.                          nz-button
  219.                          nz-tooltip
  220.                          [nzTooltipTitle]="config.valueGeneratorOptions?.tooltip"
  221.                          (click)="$event.preventDefault(); config.valueGeneratorOptions?.loadRequest ? subscribeAndUpdate(model, config.valueGeneratorOptions.loadRequest, config.valueGeneratorOptions.loadRequestContext, layoutService.getControl(control, entry.key)) : undefined"
  222.                        >
  223.                           <fa-icon
  224.                            [icon]="config.valueGeneratorOptions.icon"
  225.                            [ngStyle]="{ fontSize: 16, color: config.valueGeneratorOptions.color }"
  226.                          ></fa-icon>
  227.                         </button>
  228.                         <ng-container
  229.                          *ngTemplateOutlet="errorTemplate; context: { $implicit: layoutService.getControl(control, entry.key) }"></ng-container>
  230.                       </ng-template>
  231.                       <ng-template #clearInputTemplate>
  232.                         <fa-icon (click)="clearControl(layoutService.tryGetAccessorControlName(entry.key), control)"
  233.                           *ngIf="model[layoutService.tryGetAccessorControlName(entry.key)] != ''"
  234.                           [icon]="ICONS.CLEAR"
  235.                           class="ant-input-clear-icon"
  236.                        ></fa-icon>
  237.                       </ng-template>
  238.                     </ng-container>
  239.                     <ng-container *ngSwitchCase="LayoutItem.TreeSelect">
  240.                       <ng-container
  241.                        *ngTemplateOutlet="colTemplate; context: { $implicit: treeSelectTemplate, key: entry.key}"></ng-container>
  242.                       <ng-template #treeSelectTemplate>
  243.                         <adm-tree-select
  244.                          [control]="layoutService.getControl(control, entry.key)"
  245.                          [i18nConfig]="layoutService.getControlConfig(model, 'i18n', entry.key)"
  246.                          [settings]="config"
  247.                          [tabIndex]="config.tabindex"
  248.                        ></adm-tree-select>
  249.                       </ng-template>
  250.                     </ng-container>
  251.                     <ng-container *ngSwitchCase="LayoutItem.Select">
  252.                       <ng-container
  253.                        *ngTemplateOutlet="colTemplate; context: { $implicit: selectElementTemplate, key: entry.key}"></ng-container>
  254.                       <ng-template #selectElementTemplate>
  255.                         <adm-form-select [config]="config" [control]="abstractControl" [key]="entry.key" [model]="model"
  256.                                         [tabIndex]="config.tabindex"></adm-form-select>
  257.                         <ng-container
  258.                          *ngTemplateOutlet="errorTemplate; context: { $implicit: layoutService.getControl(control, entry.key) }"></ng-container>
  259.                       </ng-template>
  260.                     </ng-container>
  261.                     <ng-container *ngSwitchCase="LayoutItem.DatePicker">
  262.                       <ng-container
  263.                        *ngTemplateOutlet="colTemplate; context: { $implicit: datePickerElementTemplate, key: entry.key}"></ng-container>
  264.                       <ng-template #datePickerElementTemplate>
  265.                         <nz-date-picker
  266.                          (nzOnOk)="config?.onOk"
  267.                          [id]="layoutService.tryGetAccessorControlName(entry.key)"
  268.                          [ngClass]="config.class"
  269.                          [ngStyle]="config.style"
  270.                          [nzAllowClear]="config.allowClear"
  271.                          [nzDisabled]="config.disabled"
  272.                          [nzFormat]="config.format"
  273.                          [nzPlaceHolder]="layoutService.translateControlValue(model, entry.key, config.placeholder)"
  274.                          [nzShowTime]="config.showTime"
  275.                          [nzShowToday]="config.showToday"
  276.                          [tabIndex]="config.tabindex"
  277.                          formControlName="{{ layoutService.tryGetAccessorControlName(entry.key) }}"
  278.                        ></nz-date-picker>
  279.                         <ng-container
  280.                          *ngTemplateOutlet="errorTemplate; context: { $implicit: layoutService.getControl(control, entry.key) }"></ng-container>
  281.                       </ng-template>
  282.                     </ng-container>
  283.                     <ng-container *ngSwitchCase="LayoutItem.Label">
  284.                       <ng-container
  285.                        *ngTemplateOutlet="colTemplate; context: { $implicit: labelElementTemplate, key: entry.key}"></ng-container>
  286.                       <ng-template #labelElementTemplate>
  287.                         <label
  288.                          [attr.for]="layoutService.tryGetAccessorControlName(entry.key)"
  289.                          [class.adm-form-item-label-has-whitespace]="config.whiteSpace"
  290.                          [class.adm-form-item-label-no-colon]="config.noColon"
  291.                          [class.adm-form-item-label]="true"
  292.                          [class.adm-form-item-required]="config.required"
  293.                          [ngClass]="config.class"
  294.                          [ngStyle]="config.style"
  295.                          [style.textAlign]="config.textAlign"
  296.                          [style.whiteSpace]="config.whiteSpace"
  297.                          [style.width]="config.width"
  298.                          [tabIndex]="config.tabindex"
  299.                        >
  300.                           {{ layoutService.translateControlValue(model, entry.key, entry.value) }}
  301.                         </label>
  302.                       </ng-template>
  303.                     </ng-container>
  304.                     <ng-container *ngSwitchCase="LayoutItem.Array">
  305.                       <ng-container
  306.                        *ngTemplateOutlet="colTemplate; context: { $implicit: arrayElementTemplate, key: entry.key}"></ng-container>
  307.                       <ng-template #arrayElementTemplate>
  308.                         <ng-container *ngFor="let item of entry.value; index as i;">
  309.                           <ng-container
  310.                            *ngTemplateOutlet="reactiveFormTemplate; context: { modelStructure: item, model: model[layoutService.tryGetAccessorControlName(entry.key)][i], control: control.controls[layoutService.tryGetAccessorControlName(entry.key)].controls[i]}"></ng-container>
  311.                         </ng-container>
  312.                       </ng-template>
  313.                     </ng-container>
  314.                     <ng-container *ngSwitchCase="LayoutItem.ListAttributes">
  315.                       <ng-container
  316.                        *ngTemplateOutlet="colTemplate; context: { $implicit: listElementTemplate, key: entry.key}"></ng-container>
  317.                       <ng-template #listElementTemplate>
  318.                         <adm-list
  319.                          #listComponent
  320.                          [abstractControl]="layoutService.getControl(control, entry.key)"
  321.                          [config]="config"
  322.                          [model]="model[layoutService.tryGetAccessorControlName(entry.key)]"
  323.                          [structureModel]="entry.value"
  324.                        ></adm-list>
  325.                       </ng-template>
  326.                     </ng-container>
  327.                   </ng-container>
  328.                 </ng-container>
  329.               </ng-container>
  330.             </ng-container>
  331.           </ng-container>
  332.  
  333.           <!--                Формирует отрисовку составных объектов: модели и контролов из forms/common/controls/...-->
  334.           <ng-template #compositeTemplate>
  335.             <ng-container [ngSwitch]="entry.value.type">
  336.               <ng-container *ngSwitchCase="LayoutItem.Layout">
  337.                 {{ 'layout' }}
  338.                 <ng-container
  339.                  *ngTemplateOutlet="reactiveFormTemplate; context: { modelStructure: entry.value, model: model[layoutService.tryGetAccessorControlName(entry.key)], control: layoutService.getControl(control, entry.key) }"></ng-container>
  340.               </ng-container>
  341.               <ng-container *ngSwitchCase="LayoutItem.Button">
  342.                 <ng-container
  343.                  *ngTemplateOutlet="colTemplate; context: { $implicit: buttonTemplate, key: entry.key}"></ng-container>
  344.                 <ng-template #buttonTemplate>
  345.                   <button
  346.                    (click)="model[entry.key]?.clickSelf(control); $event.preventDefault()"
  347.                    (nzOnCancel)="model[entry.key]?.popConfirmOnClick?.cancel(model[entry.key], control)"
  348.                    (nzOnConfirm)="model[entry.key]?.popConfirmOnClick?.confirm(model[entry.key], control)"
  349.                    [disabled]="model[entry.key]?.disabled"
  350.                    [ngClass]="model[entry.key].class"
  351.                    [ngStyle]="model[entry.key].style"
  352.                    [nzBlock]="model[entry.key]?.block"
  353.                    [nzCancelText]="layoutService.translateControlValue(model, entry.key, model[entry.key]?.popConfirmOnClick?.cancelText)"
  354.                    [nzCondition]="model[entry.key]?.popConfirmOnClick?.condition"
  355.                    [nzGhost]="model[entry.key]?.ghost"
  356.                    [nzIcon]="model[entry.key]?.popConfirmOnClick?.icon"
  357.                    [nzLoading]="model[entry.key]?.loading | swIsLoading | async"
  358.                    [nzOkText]="layoutService.translateControlValue(model, entry.key, model[entry.key]?.popConfirmOnClick?.okText)"
  359.  
  360.                    [nzOkType]="model[entry.key]?.popConfirmOnClick?.okType"
  361.                    [nzPopconfirmPlacement]="model[entry.key]?.popConfirmOnClick?.placement"
  362.                    [nzPopconfirmTitle]="layoutService.translateControlValue(model, entry.key, model[entry.key]?.popConfirmOnClick?.title)"
  363.                    [nzPopconfirmTrigger]="model[entry.key]?.popConfirmOnClick?.trigger"
  364.                    [nzShape]="model[entry.key]?.shape"
  365.                    [nzType]="model[entry.key]?.buttonType"
  366.                    [type]="model[entry.key]?.buttonType"
  367.                    nz-button
  368.                    nz-popconfirm
  369.                  >
  370.                     {{ layoutService.translateControlValue(model, entry.key, model[entry.key]?.label) }}
  371.                   </button>&nbsp;
  372.                 </ng-template>
  373.               </ng-container>
  374.               <ng-container *ngSwitchCase="LayoutItem.Tree">
  375.                 <ng-container
  376.                  *ngTemplateOutlet="colTemplate; context: { $implicit: treeTemplate, key: entry.key}"></ng-container>
  377.                 <ng-template #treeTemplate>
  378.                   <adm-tree [settings]="model[entry.key]?.settings"></adm-tree>
  379.                 </ng-template>
  380.               </ng-container>
  381.               <ng-container *ngSwitchCase="LayoutItem.Table">
  382.                 <ng-container
  383.                  *ngTemplateOutlet="colTemplate; context: { $implicit: tableTemplate, key: entry.key}"></ng-container>
  384.                 <ng-template #tableTemplate>
  385.                   <adm-table [settings]="model[entry.key]?.settings"></adm-table>
  386.                 </ng-template>
  387.               </ng-container>
  388.               <ng-container *ngSwitchCase="LayoutItem.Space">
  389.                 <ng-container
  390.                  *ngTemplateOutlet="colTemplate; context: { $implicit: spaceTemplate, key: entry.key}"></ng-container>
  391.                 <ng-template #spaceTemplate>
  392.  
  393.                 </ng-template>
  394.               </ng-container>
  395.             </ng-container>
  396.           </ng-template>
  397.         </ng-container>
  398.       </ng-template>
  399.     </ng-template>
  400.     <ng-template #errorTemplate let-control>
  401.       <ng-container
  402.        *ngIf="layoutService.controlValid(control)">
  403.         <ng-container
  404.          *ngTemplateOutlet="errorMessageTemplate; context: { $implicit: control }"></ng-container>
  405.       </ng-container>
  406.     </ng-template>
  407.     <!--    Шаблон отисовывающий ошибки валидации-->
  408.     <ng-template #errorMessageTemplate let-control>
  409.       <ng-container
  410.        *ngTemplateOutlet="errorValidationTemplateService.getTemplate(); context: { $implicit: control }"></ng-container>
  411.     </ng-template>
  412.   </form>
  413. </nz-spin>
RAW Paste Data