Skip to content

Commit

Permalink
fix: zoneless OperationCallComponent
Browse files Browse the repository at this point in the history
  • Loading branch information
@ralfaron
ralfaron committed Jun 21, 2024
1 parent d94aaf3 commit 8d52f69
Show file tree
Hide file tree
Showing 8 changed files with 127 additions and 122 deletions.
13 changes: 12 additions & 1 deletion projects/aas-lib/src/lib/aas-table/aas-table.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,17 @@
*
*****************************************************************************/

import { Component, OnDestroy, computed, effect, input, model, untracked } from '@angular/core';
import {
ChangeDetectionStrategy,
Component,
OnDestroy,
computed,
effect,
input,
model,
untracked,
} from '@angular/core';

import { Router } from '@angular/router';
import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
Expand All @@ -27,6 +37,7 @@ import { AASTableFilter } from './aas-table.filter';
standalone: true,
imports: [NgbTooltip, MaxLengthPipe, TranslateModule],
providers: [AASTableStore],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AASTableComponent implements OnDestroy {
private shiftKey = false;
Expand Down
3 changes: 1 addition & 2 deletions projects/aas-lib/src/lib/aas-tree/aas-tree.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,8 +304,7 @@ export class AASTreeComponent implements OnInit, OnDestroy {
try {
if (operation) {
const modalRef = this.modal.open(OperationCallFormComponent, { backdrop: 'static' });
modalRef.componentInstance.document = this.document;
modalRef.componentInstance.operation = operation;
modalRef.componentInstance.initialize(this.document, operation);
await modalRef.result;
}
} catch (error) {
Expand Down
14 changes: 7 additions & 7 deletions projects/aas-lib/src/lib/aas-tree/operation-call-form/operation-call-form.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@
<div class="modal-header">
<h4 class="modal-title text-info">
<i class="bi bi-arrow-clockwise"></i>
<span class="ms-2">{{name}}</span>
<span class="ms-2">{{name()}}</span>
</h4>
<button type="button" class="btn-close" (click)="close()"> </button>
</div>
<div class="modal-body">
@for (message of messages; track message) {
@for (message of messages(); track message) {
<ngb-toast [autohide]="false" class="bg-danger w-100 mb-3">
<div class="d-flex">
<div class="flex-grow-1">{{message}}</div>
Expand All @@ -35,7 +35,7 @@ <h4 class="modal-title text-info">
</tr>
</thead>
<tbody>
@for (variable of inputVariables; track variable) {
@for (variable of inputVariables(); track variable) {
<tr>
<td>{{variable.name}}</td>
@if (variable.inputType === 'text') {
Expand All @@ -44,7 +44,7 @@ <h4 class="modal-title text-info">
name="{{variable.name}}">
</td>
}
@if (variable.inputType === 'checkbox') {
@else if (variable.inputType === 'checkbox') {
<td>
<div class="form-check">
<input type="checkbox" class="form-check-input" [(ngModel)]="variable.value"
Expand Down Expand Up @@ -72,7 +72,7 @@ <h4 class="modal-title text-info">
</tr>
</thead>
<tbody>
@for (variable of outputVariables; track variable) {
@for (variable of outputVariables(); track variable) {
<tr>
<td>{{variable.name}}</td>
@if (variable.inputType === 'text') {
Expand All @@ -81,7 +81,7 @@ <h4 class="modal-title text-info">
[value]="variable.value">
</td>
}
@if (variable.inputType === 'checkbox') {
@else if (variable.inputType === 'checkbox') {
<td>
<div class="form-check">
<input type="checkbox" class="form-check-input" readonly="true" [checked]="variable.value">
Expand All @@ -96,7 +96,7 @@ <h4 class="modal-title text-info">
</table>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" (click)="call()" [disabled]="!canCall"
<button type="submit" class="btn btn-primary" (click)="call()" [disabled]="!canCall()"
translate>CMD_OPERATION_CALL</button>
<button type="button" class="btn btn-secondary" (click)="close()" translate>CMD_CLOSE</button>
</div>
Expand Down
155 changes: 77 additions & 78 deletions projects/aas-lib/src/lib/aas-tree/operation-call-form/operation-call-form.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*****************************************************************************/

import cloneDeep from 'lodash-es/cloneDeep';
import { Component } from '@angular/core';
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgbActiveModal, NgbToast } from '@ng-bootstrap/ng-bootstrap';
import { TranslateService } from '@ngx-translate/core';
Expand All @@ -28,7 +28,7 @@ import {
toBoolean,
} from 'common';

export interface Bla {
export interface VariableItem {
submodelElement: aas.SubmodelElement;
name: string;
description?: string;
Expand All @@ -43,57 +43,56 @@ export interface Bla {
styleUrls: ['./operation-call-form.component.scss'],
standalone: true,
imports: [NgbToast, FormsModule],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OperationCallFormComponent {
private _operation!: aas.Operation;
private operation: aas.Operation | undefined;
private document: AASDocument | null = null;

public constructor(
private modal: NgbActiveModal,
private translate: TranslateService,
private api: AASTreeApiService,
) {}

public name = '';
public readonly name = signal('');

public document: AASDocument | null = null;
public readonly canCall = signal(true);

public result: aas.Operation | null = null;
public readonly inputVariables = signal<VariableItem[]>([]);

public canCall = true;
public readonly outputVariables = signal<VariableItem[]>([]);

public get operation(): aas.Operation {
return this._operation;
}
public readonly messages = signal<string[]>([]);

public result: aas.Operation | null = null;

public initialize(document: AASDocument, operation: aas.Operation): void {
this.document = document;
this.operation = cloneDeep(operation);

public set operation(value: aas.Operation) {
this._operation = cloneDeep(value);
try {
this.applyToView(this._operation.inputVariables, this.inputVariables);
this.applyToView(this._operation.outputVariables, this.outputVariables);
this.inputVariables.set(this.applyToView(this.operation.inputVariables));
this.outputVariables.set(this.applyToView(this.operation.outputVariables));
} catch (error) {
this.messages.push(messageToString(error, this.translate));
this.canCall = false;
this.messages.update(values => [...values, messageToString(error, this.translate)]);
this.canCall.set(false);
}
}

public readonly inputVariables: Bla[] = [];

public readonly outputVariables: Bla[] = [];

public messages: string[] = [];

public async call(): Promise<void> {
if (this.document && this.canCall) {
this.messages = [];
if (this.document && this.operation && this.canCall()) {
this.messages.set([]);

try {
this.result = await this.api.invoke(this.document, this.applyToModel());
this.applyToModel();
this.result = await this.api.invoke(this.document, this.operation);
if (this.result && Array.isArray(this.result.outputVariables)) {
this.applyToView(this.result.inputVariables, this.inputVariables);
this.applyToView(this.result.outputVariables, this.outputVariables);
this.inputVariables.set(this.applyToView(this.result.inputVariables));
this.outputVariables.set(this.applyToView(this.result.outputVariables));
}
} catch (error) {
this.messages.push(messageToString(error, this.translate));
this.messages.set([messageToString(error, this.translate)]);
}
}
}
Expand All @@ -102,8 +101,8 @@ export class OperationCallFormComponent {
this.modal.close();
}

private applyToModel(): aas.Operation {
for (const item of this.inputVariables) {
private applyToModel(): void {
for (const item of this.inputVariables()) {
const element = item.submodelElement;
if (isProperty(element)) {
const value =
Expand All @@ -126,58 +125,58 @@ export class OperationCallFormComponent {
// ToDo:
}
}

return this._operation;
}

private applyToView(sources: aas.OperationVariable[] | undefined, targets: Bla[]): void {
targets.splice(0, targets.length);
if (sources) {
for (const sourceVariable of sources) {
if (sourceVariable.value.modelType === 'Property') {
const source = sourceVariable.value as aas.Property;
const inputType = isBooleanType(source.valueType) ? 'checkbox' : 'text';

let valueType: aas.DataTypeDefXsd | undefined;
if (source.valueType) {
valueType = source.valueType;
} else if (source.value) {
valueType = determineType(source.value);
}

if (!valueType) {
throw new ApplicationError(
`The data type of the variable "${source.idShort}" is undefined.`,
ERRORS.UNKNOWN_VARIABLE_VALUE_TYPE,
source.idShort,
);
}

let value = source.value;
if (!value) {
value = convertToString(getDefaultValue(valueType), this.translate.currentLang);
}

targets.push({
submodelElement: source,
name: source.idShort,
description: getLocaleValue(source.description),
type: valueType,
inputType: inputType,
value: inputType === 'checkbox' ? toBoolean(value) : value,
});
} else {
const source = sourceVariable.value;
targets.push({
submodelElement: source,
name: source.idShort,
description: getLocaleValue(source.description),
type: 'xs:string',
inputType: 'text',
value: 'not implemented',
});
private applyToView(sources: aas.OperationVariable[] | undefined): VariableItem[] {
const values: VariableItem[] = [];
if (!sources) return values;

for (const sourceVariable of sources) {
if (sourceVariable.value.modelType === 'Property') {
const source = sourceVariable.value as aas.Property;
const inputType = isBooleanType(source.valueType) ? 'checkbox' : 'text';

let valueType: aas.DataTypeDefXsd | undefined;
if (source.valueType) {
valueType = source.valueType;
} else if (source.value) {
valueType = determineType(source.value);
}

if (!valueType) {
throw new ApplicationError(
`The data type of the variable "${source.idShort}" is undefined.`,
ERRORS.UNKNOWN_VARIABLE_VALUE_TYPE,
source.idShort,
);
}

let value = source.value;
if (!value) {
value = convertToString(getDefaultValue(valueType), this.translate.currentLang);
}

values.push({
submodelElement: source,
name: source.idShort,
description: getLocaleValue(source.description),
type: valueType,
inputType: inputType,
value: inputType === 'checkbox' ? toBoolean(value) : value,
});
} else {
const source = sourceVariable.value;
values.push({
submodelElement: source,
name: source.idShort,
description: getLocaleValue(source.description),
type: 'xs:string',
inputType: 'text',
value: 'not implemented',
});
}
}

return values;
}
}
2 changes: 1 addition & 1 deletion projects/aas-lib/src/lib/secured-image/secured-image.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export class SecuredImageComponent {
});
}

public readonly src = input.required<string>();
public readonly src = input<string>('');

public readonly alt = input<string | undefined>();

Expand Down
Loading

0 comments on commit 8d52f69

Please sign in to comment.