feat: ui: add template expression widget

ui/dashboard/projects/utask-lib/src/lib/@components/resolution-expression/resolution-expression.component.ts

@@ -0,0 +1,71 @@
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { BehaviorSubject } from "rxjs";
+import Resolution from "../../@models/resolution.model";
+import { ApiService } from "../../@services/api.service";
+
+@Component({
+  selector: "lib-utask-resoution-expression",
+  templateUrl: "./resolution-expression.html",
+  styleUrls: ["./resolution-expression.sass"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ResolutionExpressionComponent {
+  private _resolution: Resolution;
+  private _steps$ = new BehaviorSubject<String[]>([]);
+  private _result$ = new BehaviorSubject<String | null>(null);
+  private _error$ = new BehaviorSubject<String | null>(null);
+
+  readonly formGroup: FormGroup;
+
+  readonly steps$ = this._steps$.asObservable();
+  readonly result$ = this._result$.asObservable();
+  readonly error$ = this._error$.asObservable();
+
+  @Input("resolution") set resolution(r: Resolution) {
+    if ((this._resolution = r)) {
+      this._steps$.next(Object.keys(r.steps));
+    } else {
+      this._steps$.next([]);
+    }
+  }
+
+  get resolution(): Resolution {
+    return this._resolution;
+  }
+
+  constructor(private _api: ApiService, _builder: FormBuilder) {
+    this.formGroup = _builder.group({
+      step: ["", [Validators.required]],
+      expression: ["", [Validators.required]],
+    });
+  }
+
+  reset(): void {
+    this.formGroup.reset();
+    this._result$.next(null);
+    this._error$.next(null);
+  }
+
+  submit(): void {
+    const { step, expression } = this.formGroup.value;
+
+    this._api.resolution
+      .templating(this._resolution, step, expression)
+      .subscribe(
+        (result) => {
+          if (result.error) {
+            this._result$.next(null);
+            this._error$.next(result.error);
+          } else {
+            this._result$.next(result.result);
+            this._error$.next(null);
+          }
+        },
+        (e) => {
+          this._result$.next(null);
+          this._error$.next(e.error.error);
+        }
+      );
+  }
+}

ui/dashboard/projects/utask-lib/src/lib/@components/resolution-expression/resolution-expression.html

@@ -0,0 +1,25 @@
+<form *ngIf="formGroup" nz-form [formGroup]="formGroup" [nzLayout]="'vertical'" (ngSubmit)="submit()">
+  <nz-form-item>
+    <nz-form-label nzFor="step" [nzRequired]="true">Step</nz-form-label>
+    <nz-form-control nzErrorTip="Please select step!">
+      <nz-select formControlName="step" nzPlaceHolder="Please select">
+        <nz-option *ngFor="let step of steps$ | async" [nzLabel]="step" [nzValue]="step"></nz-option>
+      </nz-select>
+    </nz-form-control>
+  </nz-form-item>
+  <nz-form-item>
+    <nz-form-label nzFor="expression" [nzRequired]="true">Template expression</nz-form-label>
+    <nz-form-control nzErrorTip="Please set a valid value for expression!">
+      <input type="string" formControlName="expression" nz-input [placeholder]="'{{.input}}'"/>
+    </nz-form-control>
+  </nz-form-item>
+</form>
+<lib-utask-error-message *ngIf="error$ | async as error" [data]="error">
+</lib-utask-error-message>
+<div class="buttons">
+  <button nz-button nzType="secondary" type="button" (click)="reset()">Reset</button>
+  <button nz-button nzType="primary" [disabled]="!formGroup.valid" type="button" (click)="submit()">Submit</button>
+</div>
+<div *ngIf="result$ | async as result" class="result">
+  <pre>{{ result }}</pre>
+</div>

ui/dashboard/projects/utask-lib/src/lib/@components/resolution-expression/resolution-expression.sass

@@ -0,0 +1,13 @@
+.buttons
+  margin-top: 1em
+
+  button
+    margin-right: 0.5em
+
+.result
+  margin-top: 1em
+  border: 1px solid #d9d9d9
+  padding: 1em
+
+  pre
+    margin: 0

ui/dashboard/projects/utask-lib/src/lib/@models/resolution.model.ts

@@ -14,4 +14,9 @@ export default class Resolution {
     task_id: string;
     task_title: string;
     steps: { [key: string]: Step };
-}
+}
+
+export class TemplateExpression {
+    result: string;
+    error?: string;
+}

ui/dashboard/projects/utask-lib/src/lib/@routes/task/task.html

@@ -272,6 +272,17 @@
             </div>
         </lib-utask-box>
 
+        <!-- Templating expression box -->
+        <lib-utask-box [header]="{openable: true, init: false, class: 'primary'}"
+            *ngIf="meta.user_is_admin && resolution && resolution.steps">
+            <div app-box-header>
+                Template expression
+                <span *ngIf="loaders.execution || loaders.refreshTask">&nbsp;<i nz-icon nzType="loading"></i></span>
+            </div>
+            <div app-box-content>
+                <lib-utask-resoution-expression [resolution]="resolution"></lib-utask-resoution-expression>
+            </div>
+        </lib-utask-box>
     </ng-container>
 
 

ui/dashboard/projects/utask-lib/src/lib/@services/api.service.ts

@@ -5,6 +5,7 @@ import { Observable } from 'rxjs';
 import { HttpClient, HttpResponse } from '@angular/common/http';
 import Meta from '../@models/meta.model';
 import Template from '../@models/template.model';
+import Resolution, { TemplateExpression } from '../@models/resolution.model';
 
 export class ParamsListTasks {
     page_size?: number;
@@ -314,6 +315,16 @@ export class ApiServiceResolution {
             resolution
         );
     }
+
+    templating(resolution: Resolution, step: string, expression: string) {
+        return this.http.post<TemplateExpression>(
+            `${this.base}resolution/${resolution.id}/templating`,
+            {
+                step_name: step,
+                templating_expression: expression,
+            }
+        );
+    }
 }
 
 @Injectable({

ui/dashboard/projects/utask-lib/src/lib/utask-lib.module.ts

@@ -15,6 +15,7 @@ import { InputsFormComponent } from './@components/inputs-form/inputs-form.compo
 import { InputTagsComponent } from './@components/input-tags/input-tags.component';
 import { InputEditorComponent } from './@components/input-editor/input-editor.component';
 import { LoaderComponent } from './@components/loader/loader.component';
+import { ResolutionExpressionComponent } from './@components/resolution-expression/resolution-expression.component';
 import { MetaResolve } from './@resolves/meta.resolve';
 import { ModalApiYamlComponent } from './@modals/modal-api-yaml/modal-api-yaml.component';
 import { ModalEditResolutionStepStateComponent } from './@modals/modal-edit-resolution-step-state/modal-edit-resolution-step-state.component';
@@ -77,6 +78,7 @@ const components: any[] = [
   ModalEditResolutionStepStateComponent,
   ModalApiYamlEditComponent,
   NzModalContentWithErrorComponent,
+  ResolutionExpressionComponent,
   StepNodeComponent,
   StepsListComponent,
   StepsViewerComponent,