feat(job-scheduler): cria diretiva p-job-scheduler-summary-template

CSimoesJr · jcorrea97 · commit b6d69a940ddf · 2024-08-12T09:43:51.000-03:00
Cria diretiva para poder customizar as informações no sumário.

fixes DTHFUI-9306
diff --git a/projects/templates/src/lib/components/po-page-job-scheduler/index.ts b/projects/templates/src/lib/components/po-page-job-scheduler/index.ts
@@ -5,3 +5,5 @@ export * from './po-page-job-scheduler.module';
 export * from './interfaces/po-job-scheduler.interface';
 
 export * from './po-page-job-scheduler-parameters';
+
+export * from './po-page-job-scheduler-summary';
diff --git a/projects/templates/src/lib/components/po-page-job-scheduler/po-page-job-scheduler-summary/index.ts b/projects/templates/src/lib/components/po-page-job-scheduler/po-page-job-scheduler-summary/index.ts
@@ -0,0 +1 @@
+export * from './po-job-scheduler-summary-template';
diff --git a/projects/templates/src/lib/components/po-page-job-scheduler/po-page-job-scheduler-summary/po-job-scheduler-summary-template/index.ts b/projects/templates/src/lib/components/po-page-job-scheduler/po-page-job-scheduler-summary/po-job-scheduler-summary-template/index.ts
@@ -0,0 +1 @@
+export * from './po-job-scheduler-summary-template.directive';
diff --git a/projects/templates/src/lib/components/po-page-job-scheduler/po-page-job-scheduler-summary/po-job-scheduler-summary-template/po-job-scheduler-summary-template.directive.spec.ts b/projects/templates/src/lib/components/po-page-job-scheduler/po-page-job-scheduler-summary/po-job-scheduler-summary-template/po-job-scheduler-summary-template.directive.spec.ts
@@ -0,0 +1,9 @@
+import { PoJobSchedulerSummaryTemplateDirective } from './po-job-scheduler-summary-template.directive';
+
+describe('PoComboOptionTemplateDirective:', () => {
+  const component = new PoJobSchedulerSummaryTemplateDirective(null);
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/templates/src/lib/components/po-page-job-scheduler/po-page-job-scheduler-summary/po-job-scheduler-summary-template/po-job-scheduler-summary-template.directive.ts b/projects/templates/src/lib/components/po-page-job-scheduler/po-page-job-scheduler-summary/po-job-scheduler-summary-template/po-job-scheduler-summary-template.directive.ts
@@ -0,0 +1,35 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+/**
+ * @usedBy PoPageJobScheduler
+ *
+ * @description
+ *
+ * Esta diretiva permite personalizar o conteúdo de resumo das informações de parâmetro na etapa de conclusão do componente de PoPageJobScheduler.
+ *
+ * Essa funcionalidade costuma ser útil em casos onde a propriedade parameters não tem valor e mesmo assim é necessário exibir
+ * as informações de resumo na etapa de conclusão.
+ *
+ * ```
+ * ...
+ *   <po-page-job-scheduler [p-service-api]="serviceApi">
+ *    <ng-template p-job-scheduler-summary-template>
+ *    ...
+ *     <po-dynamic-view
+ *       [p-fields]="fieldsSummary"
+ *       [p-value]="valueSummary"
+ *     >
+ *     </po-dynamic-view
+ *    </ng-template>
+ *   </po-page-job-scheduler>
+ * ...
+ * ```
+ *
+ */
+@Directive({
+  selector: '[p-job-scheduler-summary-template]'
+})
+export class PoJobSchedulerSummaryTemplateDirective {
+  // Necessário manter templateRef para o funcionamento do row template.
+  constructor(public templateRef: TemplateRef<any>) {}
+}
diff --git a/projects/templates/src/lib/components/po-page-job-scheduler/po-page-job-scheduler-summary/po-page-job-scheduler-summary.component.html b/projects/templates/src/lib/components/po-page-job-scheduler/po-page-job-scheduler-summary/po-page-job-scheduler-summary.component.html
@@ -30,7 +30,13 @@
   <po-info [p-label]="literals.firstExecution" [p-orientation]="infoOrientation" [p-value]="firstExecutionValue">
   </po-info>
 </div>
-
-<po-widget *ngIf="parameters && parameters.length" class="po-pt-1 po-pb-1 po-md-12" [p-title]="literals.parameters">
+<po-widget
+  *ngIf="parameters && parameters.length && !jobSchedulerSummaryTemplate"
+  class="po-pt-1 po-pb-1 po-md-12"
+  [p-title]="literals.parameters"
+>
   <po-dynamic-view [p-fields]="parameters" [p-value]="value.executionParameter"> </po-dynamic-view>
 </po-widget>
+<div *ngIf="jobSchedulerSummaryTemplate" class="po-pt-1 po-pb-1 po-md-12">
+  <ng-template [ngTemplateOutlet]="jobSchedulerSummaryTemplate?.templateRef"></ng-template>
+</div>
diff --git a/projects/templates/src/lib/components/po-page-job-scheduler/po-page-job-scheduler-summary/po-page-job-scheduler-summary.component.ts b/projects/templates/src/lib/components/po-page-job-scheduler/po-page-job-scheduler-summary/po-page-job-scheduler-summary.component.ts
@@ -1,5 +1,5 @@
-import { Component, Input, OnInit } from '@angular/core';
 import { DatePipe } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
 
 import { PoDynamicViewField, PoInfoOrientation } from '@po-ui/ng-components';
 
@@ -18,6 +18,8 @@ export class PoPageJobSchedulerSummaryComponent implements OnInit {
 
   @Input('p-no-parameters') noParameters: Boolean = true;
 
+  @Input('p-summary-template') jobSchedulerSummaryTemplate;
+
   executionValue = '';
   firstExecutionValue = '';
   infoOrientation = PoInfoOrientation.Horizontal;
diff --git a/projects/templates/src/lib/components/po-page-job-scheduler/po-page-job-scheduler.component.html b/projects/templates/src/lib/components/po-page-job-scheduler/po-page-job-scheduler.component.html
@@ -38,8 +38,9 @@
           </po-page-job-scheduler-parameters>
 
           <po-page-job-scheduler-summary
-            [p-no-parameters]="!parameters.length"
             *ngIf="step === stepSummary"
+            [p-no-parameters]="!parameters.length"
+            [p-summary-template]="jobSchedulerSummaryTemplate"
             class="po-md-12"
             [p-literals]="literals"
             [p-parameters]="parameters"
diff --git a/projects/templates/src/lib/components/po-page-job-scheduler/po-page-job-scheduler.component.ts b/projects/templates/src/lib/components/po-page-job-scheduler/po-page-job-scheduler.component.ts
@@ -1,14 +1,15 @@
-import { ActivatedRoute, Router } from '@angular/router';
 import {
   AfterContentInit,
   Component,
+  ContentChild,
   ContentChildren,
   OnInit,
   QueryList,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
 import { NgForm } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
 
 import { Observable } from 'rxjs';
 
@@ -24,12 +25,13 @@ import {
 } from '@po-ui/ng-components';
 
 import { PoJobSchedulerInternal } from './interfaces/po-job-scheduler-internal.interface';
-import { PoPageJobSchedulerInternal } from './po-page-job-scheduler-internal';
 import { PoPageJobSchedulerBaseComponent } from './po-page-job-scheduler-base.component';
+import { PoPageJobSchedulerInternal } from './po-page-job-scheduler-internal';
 import { poPageJobSchedulerLiteralsDefault } from './po-page-job-scheduler-literals';
 import { PoPageJobSchedulerLookupService } from './po-page-job-scheduler-lookup.service';
-import { PoPageJobSchedulerService } from './po-page-job-scheduler.service';
 import { PoJobSchedulerParametersTemplateDirective } from './po-page-job-scheduler-parameters';
+import { PoJobSchedulerSummaryTemplateDirective } from './po-page-job-scheduler-summary';
+import { PoPageJobSchedulerService } from './po-page-job-scheduler.service';
 
 /**
  * @docsExtends PoPageJobSchedulerBaseComponent
@@ -41,6 +43,11 @@ import { PoJobSchedulerParametersTemplateDirective } from './po-page-job-schedul
  *  <file name="sample-po-page-job-scheduler-background-process/sample-po-page-job-scheduler-background-process.component.ts"> </file>
  * </example>
  *
+ * <example name="po-page-job-scheduler-directives" title="PO Page Job Scheduler - Directives">
+ *  <file name="sample-po-page-job-scheduler-directives/sample-po-page-job-scheduler-directives.component.html"> </file>
+ *  <file name="sample-po-page-job-scheduler-directives/sample-po-page-job-scheduler-directives.component.ts"> </file>
+ * </example>
+ *
  */
 @Component({
   selector: 'po-page-job-scheduler',
@@ -60,6 +67,9 @@ export class PoPageJobSchedulerComponent extends PoPageJobSchedulerBaseComponent
   @ContentChildren(PoJobSchedulerParametersTemplateDirective)
   parametersTemplate: QueryList<PoJobSchedulerParametersTemplateDirective>;
 
+  @ContentChild(PoJobSchedulerSummaryTemplateDirective)
+  jobSchedulerSummaryTemplate: PoJobSchedulerSummaryTemplateDirective;
+
   isEdit = false;
   literals = {
     ...poPageJobSchedulerLiteralsDefault[poLocaleDefault]
diff --git a/projects/templates/src/lib/components/po-page-job-scheduler/po-page-job-scheduler.module.ts b/projects/templates/src/lib/components/po-page-job-scheduler/po-page-job-scheduler.module.ts
@@ -23,16 +23,22 @@ import { PoPageJobSchedulerParametersComponent } from './po-page-job-scheduler-p
 import { PoPageJobSchedulerService } from './po-page-job-scheduler.service';
 import { PoPageJobSchedulerSummaryComponent } from './po-page-job-scheduler-summary/po-page-job-scheduler-summary.component';
 import { PoJobSchedulerParametersTemplateDirective } from './po-page-job-scheduler-parameters';
+import { PoJobSchedulerSummaryTemplateDirective } from './po-page-job-scheduler-summary/po-job-scheduler-summary-template';
 
 @NgModule({
   declarations: [
     PoPageJobSchedulerComponent,
     PoPageJobSchedulerExecutionComponent,
     PoPageJobSchedulerParametersComponent,
     PoPageJobSchedulerSummaryComponent,
-    PoJobSchedulerParametersTemplateDirective
+    PoJobSchedulerParametersTemplateDirective,
+    PoJobSchedulerSummaryTemplateDirective
+  ],
+  exports: [
+    PoPageJobSchedulerComponent,
+    PoJobSchedulerParametersTemplateDirective,
+    PoJobSchedulerSummaryTemplateDirective
   ],
-  exports: [PoPageJobSchedulerComponent, PoJobSchedulerParametersTemplateDirective],
   imports: [
     CommonModule,
     FormsModule,
diff --git a/projects/templates/src/lib/components/po-page-job-scheduler/samples/sample-po-page-job-scheduler-directives/sample-po-page-job-scheduler-directives.component.html b/projects/templates/src/lib/components/po-page-job-scheduler/samples/sample-po-page-job-scheduler-directives/sample-po-page-job-scheduler-directives.component.html
@@ -0,0 +1,28 @@
+<po-page-job-scheduler
+  p-service-api="https://po-sample-api.onrender.com/v1/scheduler"
+  p-orientation="horizontal"
+  [p-step-execution-last]="true"
+>
+  <ng-template
+    p-job-scheduler-parameters-template
+    [p-disable-advance]="dynamicForm?.form.invalid"
+    [p-execution-parameter]="dynamicForm?.form.value"
+    p-title="1"
+  >
+    <h1>Etapa 1</h1>
+    <po-dynamic-form [p-fields]="parametersForm" (p-form)="getFormExample($event)"> </po-dynamic-form>
+  </ng-template>
+
+  <ng-template
+    p-job-scheduler-parameters-template
+    [p-disable-advance]="!selectedValue.select.length"
+    [p-execution-parameter]="selectedValue"
+  >
+    <po-table [p-items]="items" [p-selectable]="true" (p-selected)="selectedItem($event)"></po-table>
+  </ng-template>
+  <ng-template p-job-scheduler-summary-template>
+    <po-widget p-title="Parâmetros">
+      <po-dynamic-view [p-fields]="fieldsSummary" [p-value]="valueSummary"> </po-dynamic-view>
+    </po-widget>
+  </ng-template>
+</po-page-job-scheduler>
diff --git a/projects/templates/src/lib/components/po-page-job-scheduler/samples/sample-po-page-job-scheduler-directives/sample-po-page-job-scheduler-directives.component.ts b/projects/templates/src/lib/components/po-page-job-scheduler/samples/sample-po-page-job-scheduler-directives/sample-po-page-job-scheduler-directives.component.ts
@@ -0,0 +1,76 @@
+import { Component } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { PoDynamicFormField, PoDynamicViewField } from '@po-ui/ng-components';
+
+@Component({
+  selector: 'sample-po-page-job-scheduler-directives',
+  templateUrl: './sample-po-page-job-scheduler-directives.component.html'
+})
+export class SamplePoPageJobSchedulerDirectivesComponent {
+  dynamicForm!: NgForm;
+  selectedValue = { select: [] };
+  valueSummary;
+
+  parametersForm: Array<PoDynamicFormField> = [
+    {
+      property: 'version',
+      label: 'Versão',
+      required: true,
+      gridLgColumns: 12,
+      gridXlColumns: 12
+    }
+  ];
+
+  fieldsSummary: Array<PoDynamicViewField> = [
+    {
+      property: 'version',
+      label: 'Versão',
+      gridColumns: 6,
+      gridSmColumns: 12
+    },
+    {
+      property: 'selectedValue',
+      label: 'Valor selecionado na tabela',
+      isArrayOrObject: true,
+      fieldLabel: 'customer',
+      gridColumns: 6,
+      gridSmColumns: 12
+    }
+  ];
+
+  items: Array<any> = [
+    {
+      code: 1200,
+      customer: 'Angeloni',
+      driver: 'José Oliveira'
+    },
+    {
+      code: 1355,
+      customer: 'Giassi',
+      driver: 'Francisco Pereira'
+    },
+    {
+      code: 1496,
+      customer: 'Walmart',
+      driver: 'Pedro da Costa'
+    },
+    {
+      code: 1712,
+      customer: 'Carrefour',
+      driver: 'João da Silva'
+    }
+  ];
+
+  getFormExample(form: NgForm) {
+    this.dynamicForm = form;
+  }
+
+  selectedItem(value: any) {
+    this.selectedValue.select.push(value);
+
+    this.valueSummary = {
+      selectedValue: this.selectedValue.select,
+      version: this.dynamicForm.form.value.version
+    };
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export * from './po-job-scheduler-summary-template';`