<div class="card"> <div *ngIf="isLoading" class="spinner-container"> <p-progressSpinner></p-progressSpinner> </div> <div *ngIf="isError && !isLoading" class="error-message-container"> <p>{{ 'Data Loading Error' | translate }}</p> </div> <div *ngIf="!isError && !isLoading"> <p-toolbar styleClass="p-mb-4"> <ng-template pTemplate="left"></ng-template> <ng-template pTemplate="right"> <p-button *ngIf="IdControl && IdControl.value !== -1 && !isNew" [disabled]='isExportProcedureButtonDisabled' (onClick)="exportProcedure()">{{ 'Export procedure' | translate }}</p-button> <div> <div *ngIf="StatusControl.value !== EntityStatus.PUBLISHED"> <p-button *ngIf="canPublish && !isNew" (onClick)="confirmPublishingOperation()" [disabled]="!procedureForm || !procedureForm.valid">{{ 'Publish the procedure' | translate }}</p-button> <p-button (onClick)="save(true)" [disabled]="!procedureForm.valid || (!configurationsForm && TypeControl.value.code !== ProcType.SUB_WORKFLOW_BASED) || (!workflowForm.valid && TypeControl.value.code === ProcType.WORKFLOW_BASED)"> {{ 'Save' | translate }}</p-button> <p-button (onClick)="updateAndPublish()" [hidden]="isNew" [disabled]="!procedureForm || !procedureForm.valid || !configurationsForm || !configurationsForm.valid || (TypeControl.value.code === ProcType.STANDARD && selectedForm.id === -1) || (TypeControl.value.code === ProcType.WORKFLOW_BASED && (WorkflowIdControl.value === '' || !WorkflowIdControl.value))"> {{ 'Save and publish' | translate }}</p-button> <p-button (click)="cancel()">{{ 'Cancel' | translate }}</p-button> <app-procedure-scope-modal [showProcedureScopeModal]="showProcedureScopeModal" (onProcedureScopeCanceled)="showProcedureScopeModal = false" (onProcedureScopeSelected)="onProcedureScopeSelected($event)"> </app-procedure-scope-modal> </div> <p-dialog *ngIf="showValidationErrorsModal" header="Errori di validazione" [(visible)]="showValidationErrorsModal" [modal]="true" [style]="{width: '60vw'}" [baseZIndex]="10000" [draggable]="false" [resizable]="false"> <div class="error-message">{{ 'The following mistakes have been found in the workflow, it is necessary to correct them in order to publish' | translate }}</div> <p-table #dt [value]="validationErrors" dataKey="id" styleClass="p-datatable-customers" [rowHover]="true" [filterDelay]="0"> <ng-template pTemplate="header"> <tr> <th style="width: 40%">{{ 'Error' | translate }}</th> <th style="width: 60%">{{ 'Where is it' | translate }}</th> </tr> </ng-template> <ng-template pTemplate="body" let-error> <tr class="p-selectable-row"> <td> <span class="image-text" style="vertical-align: middle">{{ error.code | translate }}</span> </td> <td> <ng-container> <span *ngFor="let place of error.locations, let i = index">{{ place | translate }}<span *ngIf="i !== error.locations.length - 1">, </span></span> </ng-container> </td> </tr> </ng-template> </p-table> </p-dialog> <div *ngIf="StatusControl.value === EntityStatus.PUBLISHED"> <p-button (click)="confirmPublishingOperation()">{{ 'Cancel publication' | translate }}e</p-button> </div> </div> </ng-template> </p-toolbar> <h5>{{ 'Procedure detail' | translate }}</h5> </div> <br> <p-tabView [hidden]="isLoading"> <p-tabPanel> <ng-template pTemplate="header"> {{ 'Basic data' | translate }} </ng-template> <div *ngIf="showForm"> <form [formGroup]='procedureForm'> <span class="p-float-label"> <p-dropdown [options]="procedureTypes" [style]="{width: '100%'}" [formControl]="TypeControl" optionLabel="name" [disabled]="StatusControl.value === EntityStatus.PUBLISHED"> </p-dropdown> <label for="float-input-domain">{{ 'Procedure type *' | translate }}</label> </span> <span class="p-float-label"> <input id="float-input-name" type="text" pInputText [formControl]="NameControl" /> <label for="float-input-name">{{ 'First name *' | translate }}</label> </span> <small *ngIf="!NameControl.valid && NameControl.touched" class="p-invalid">{{ 'Name field is required' | translate }}</small> <span class="p-float-label calendar-container" [hidden]="TypeControl.value?.code === ProcType.SUB_WORKFLOW_BASED"> <p-calendar showButtonBar="true" [formControl]="EndedAtControl" [utc]="true" [showIcon]="true" inputId="enddate-icon" class="my-p-calendar" dateFormat="dd-mm-yy" [readonlyInput]="true" [disabled]="StatusControl.value === EntityStatus.PUBLISHED"> </p-calendar> <label for="enddate-icon">{{ 'Ending date' | translate }}</label> </span> <span class="p-float-label form" *ngIf="TypeControl.value?.code === ProcType.STANDARD"> <input disabled id="float-input-form" type="text" pInputText [formControl]='FormNameControl'> <label for="float-input-form">{{ 'Form *' | translate }}</label> </span> <p-button *ngIf="StatusControl.value !== ProcStatus.PUBLISHED && TypeControl.value?.code === ProcType.STANDARD" class="form-button" (click)="onSelectFormButtonClick()">{{ 'Choose form' | translate }}</p-button> <p-dialog *ngIf="showFormSelectionModal" header="Elenco moduli" [(visible)]="showFormSelectionModal" [modal]="true" [style]="{width: '80vw'}" [baseZIndex]="10000" [draggable]="false" [resizable]="false"> <p-table #dt [value]="forms" dataKey="id" styleClass="p-datatable-customers" [rowHover]="true" [filterDelay]="0" [rows]="10" [paginator]="true" [lazy]="true" (onLazyLoad)="loadForms($event)" [totalRecords]="formsTotalRecords"> <ng-template pTemplate="header"> <tr> <th style="width: 28%">{{ 'Name' | translate }}</th> <th style="width: 28%">{{ 'Creation date' | translate }}</th> <th style="width: 28%">{{ 'Last edit date' | translate }}</th> </tr> </ng-template> <ng-template pTemplate="body" let-form> <tr class="p-selectable-row" (click)="onFormClicked(form)"> <td><span class="image-text" style="vertical-align: middle">{{ form.name }}</span></td> <td>{{ form.createdAt | date: 'medium' }}</td> <td>{{ form.updatedAt | date: 'medium' }}</td> </tr> </ng-template> <ng-template pTemplate="emptymessage"> <tr> <td colspan="3">{{ 'No items found' | translate }}</td> </tr> </ng-template> </p-table> </p-dialog> <div class="inline-box-container" *ngIf="showMultiSelect" [hidden]="TypeControl.value?.code === ProcType.SUB_WORKFLOW_BASED"> <div class="viewer-box"> <span class="p-float-label"> <p-chips id="float-input-domain" [readonly]="true" [disabled]="true" class="p-fluid p-inputwrapper-filled" [formControl]='DomainsControl'> <ng-template let-item pTemplate="item"> {{ item.name }} </ng-template> </p-chips> <label for="float-input-domain">{{ 'Domains' | translate }}</label> </span> </div> <div class="button-box"> <p-button [disabled]="StatusControl.value === EntityStatus.PUBLISHED" (click)="displayDomainsDialog = true" label="{{'Select domains' | translate }}"> </p-button> </div> </div> <span class="p-float-label" *ngIf="showMultiSelect && TypeControl.value?.code !== ProcType.STANDARD" [hidden]="TypeControl.value?.code === ProcType.SUB_WORKFLOW_BASED"> <p-multiSelect id="float-input-statuses" [options]="procedureStatuses" [style]="{width: '100%', height: '35px'}" optionLabel="label" [disabled]="StatusControl.value === EntityStatus.PUBLISHED" [formControl]='ProcedureStatusControl'> <ng-template let-value pTemplate="selectedItems"> <ng-container *ngFor="let option of value"> <p-chip class="p-multiselect-token" [removable]="option.key !== 'OPEN' && option.key !== 'CLOSED'" (onRemove)="updateProcedureStatusControl(option)"> {{ option.label }} </p-chip> </ng-container> </ng-template> </p-multiSelect> <label for="float-input-statuses">{{ 'Procedure statuses' | translate }}</label> </span> <div [hidden]="TypeControl.value?.code === ProcType.SUB_WORKFLOW_BASED"> <label style="margin: 10px 0 2px 5px">{{ 'Description' | translate }}</label> <p-editor id="float-input-description" [readonly]="StatusControl.value === EntityStatus.PUBLISHED" [formControl]="DescriptionControl" [style]="{'height':'320px'}"></p-editor> </div> <div> <label style="margin: 15px 8px 0px 8px" for="float-input-name">{{ 'State:' | translate }}</label> <p-badge [value]="procedureStatusTranslated"></p-badge> </div> </form> </div> </p-tabPanel> <p-tabPanel [disabled]="TypeControl.value?.code === ProcType.SUB_WORKFLOW_BASED"> <ng-template pTemplate="header"> {{ 'Configurations' | translate }} </ng-template> <form [formGroup]='configurationsForm'> <div class="folder-box"> <span class="p-float-label input-container"> <input id="float-input-documentsBasePath" type="text" pInputText disabled class="folder" [formControl]='DocumentsBasePathControl'> <label for="float-input-documentsBasePath">{{ 'Document saving folder *' | translate }}</label> </span> <div class="button-box"> <p-button class="folder-selection-button" [disabled]="StatusControl.value === EntityStatus.PUBLISHED" (onClick)="displayTreeDialog=true">{{ 'Choose folder' | translate }}</p-button> </div> <span class="p-float-label input-container"> <input id="float-input-documentsPathPattern" type="text" pInputText class="folder" [(ngModel)]="procedure.documentsPathPattern" formControlName='documentsPathPattern' [attr.disabled]="StatusControl.value === EntityStatus.PUBLISHED ? true : null"> <label for="float-input-documentsPathPattern">{{ 'Document path pattern' | translate }}</label> <small *ngIf="!DocumentsBasePathControl.valid && DocumentsBasePathControl.touched" class="p-invalid"> {{ configurationsForm.get('documentsPathPattern').getError('error') | translate }} {{ ' Please read carefully the instructions by hovering the question mark on the right.' | translate }} </small> </span> <button pButton pRipple type="button" id="info-icon" class="p-button-rounded p-button-info" icon="pi pi-question" tooltipPosition="left" pTooltip="Per favore, attenersi alle seguenti istruzioni: -Il primo carattere deve essere '/' -L'ultimo carattere NON deve essere '/' od uno spazio -E' possibile utilizzare dei 'placeholders' per assegnare dinamicamente dei valori all'apertura della pratica I placeholder disponibili sono: -${day} -${month} -${year} -${procedureName} -${requesterIdentifier} Es:'/miaProcedura/${year}/testo${day}'"> </button> </div> <p-dialog header="Seleziona cartella" [(visible)]="displayTreeDialog" [modal]="true" [style]="{width: '60vw'}" [baseZIndex]="10000" [draggable]="false" [resizable]="false"> <app-folder-tree *ngIf="rootTree" [rootTree]="rootTree" (folderSelected)="onFolderSelected($event)"> </app-folder-tree> <ng-template pTemplate="footer"> <p-button icon="pi pi-check" (click)="folderSelectedConfirmationClick()" label="Ok" styleClass="p-button-text"></p-button> </ng-template> </p-dialog> <span class="p-float-label" *ngIf="showPluginProtocolGenerator"> <p-dropdown [options]="pluginProtocolGenerators" [style]="{width: '100%'}" optionLabel="name" [(ngModel)]="pluginProtocolGenerator" [formControl]="ServicePluginProtocolIdControl" [showClear]="true" [autoDisplayFirst]="false" [disabled]="StatusControl.value === EntityStatus.PUBLISHED" (onChange)="onSelectedPluginProtocolGenerator($event)"> </p-dropdown> <label for="float-input-domain">{{ 'Protocol number generator' | translate }}</label> </span> <div class="protocol-configurator" *ngIf="showPluginProtocolGenerator && pluginProtocolGenerator && pluginProtocolGeneratorSettings && pluginProtocolGeneratorSettings.settings.length>0"> <label for="float-input-domain"> {{ 'Protocol number generator configurations' | translate }} </label> <small *ngIf="pluginProtocolGenerators && !isPluginProtocolGeneratorSettingsValid" class="p-invalid"> {{ 'Every property must be valued' | translate }} </small> <div> <app-editable-table [disabled]="StatusControl.value === EntityStatus.PUBLISHED" [rowsArray]='pluginProtocolGeneratorSettings.settings' (editedRowEvent)="handleEditedRowEvent($event)"> </app-editable-table> </div> </div> <span class="p-float-label" *ngIf="showProcedureReport"> <p-dropdown [options]="procedureReports" [style]="{width: '100%'}" [(ngModel)]="procedureReport" optionLabel="name" [formControl]="ProcedureReportIdControl" [showClear]="true" [autoDisplayFirst]="false" (onChange)="handleProcedureReportChange($event)" [disabled]="StatusControl.value === EntityStatus.PUBLISHED"> </p-dropdown> <label for="float-input-domain">{{ 'Procedure report' | translate }}</label> </span> <span class="p-float-label" *ngIf="!!procedureReport"> <input *ngIf="StatusControl.value === EntityStatus.PUBLISHED" disabled id="float-input-report-name" type="text" pInputText [formControl]='ProcedureReportNameControl'> <input *ngIf="StatusControl.value !== EntityStatus.PUBLISHED" id="float-input-report-name" type="text" pInputText [formControl]='ProcedureReportNameControl'> <label for="float-input-report-name">{{ 'Report Name *' | translate }}</label> </span> <small *ngIf="!!procedureReport && !ProcedureReportNameControl.valid && ProcedureReportNameControl.touched" class="p-invalid">{{ 'Procedure report name field is required' | translate }}</small> </form> </p-tabPanel> <p-tabPanel [disabled]="TypeControl.value?.code === ProcType.STANDARD"> <ng-template pTemplate="header"> {{ 'Workflow' | translate }} </ng-template> <div *ngIf="workflow && workflow.name !== ''" style="margin-bottom: 15px"> <span class="p-column-title">{{ 'The workflow is:' | translate }}</span><b>{{ workflow.name }}</b> </div> <p-button id="select-workflow-button" *ngIf="showWorkflowButton" (onClick)="confirmChangeOfWorkflowOperation()" icon="pi pi-external-link" label="Seleziona Workflow"></p-button> <p-dialog *ngIf="showModal" header="Elenco workflow" [(visible)]="showModal" [modal]="true" [style]="{width: '80vw'}" [baseZIndex]="10000" [draggable]="false" [resizable]="false"> <p-table *ngIf="workflows" selectionMode="single" [(selection)]="dummyWorkflowSelected" #dt [value]="workflows" dataKey="id" styleClass="p-datatable-customers" [rowHover]="true" [filterDelay]="0" [rows]="10" [paginator]="true" [lazy]="true" (onLazyLoad)="loadWorkflows($event)" [totalRecords]="totalWorkflowsNumber"> <ng-template pTemplate="header"> <tr> <th style="width: 21%">{{ 'First name' | translate }}</th> <th style="width: 21%">{{ 'Creation date' | translate }}</th> <th style="width: 21%">{{ 'Last edit date' | translate }}</th> <th style="width: 21%">{{ 'State' | translate }}</th> </tr> </ng-template> <ng-template pTemplate="body" let-workflow> <tr class="p-selectable-row" [pSelectableRow]="workflow" (click)="onWorkflowClicked(workflow.id)"> <td><span class="image-text" style="vertical-align: middle">{{ workflow.name }}</span></td> <td>{{ workflow.createdAt | date: 'medium' }}</td> <td>{{ workflow.updatedAt | date: 'medium' }}</td> <td>{{ workflow.status | translate }}</td> </tr> </ng-template> <ng-template pTemplate="emptymessage"> <tr> <td colspan="4">{{ 'No items found' | translate }}</td> </tr> </ng-template> </p-table> <ng-template pTemplate="footer"> <p-button icon="pi pi-check" (click)="onWorkflowConfirmed()" label="Ok" styleClass="p-button-text"></p-button> </ng-template> </p-dialog> <app-workflow-navigated-viewer height="tall" *ngIf="showWorkflowPreview" [input]="workflowDefinition"> </app-workflow-navigated-viewer> </p-tabPanel> <p-tabPanel class="visibility-panel" [disabled]="!areVariablesLoaded || (TypeControl.value?.code === ProcType.WORKFLOW_BASED && (!workflow || workflow.name === '')) || (TypeControl.value?.code === ProcType.STANDARD && !FormIdControl.value)"> <ng-template pTemplate="header"> {{ 'Visibility settings' | translate }} </ng-template> <p-tabView> <p-tabPanel> <ng-template pTemplate="header"> {{ 'Simple variables' | translate }} </ng-template> <div class="global-variable-dropdown-reference"> <div class="global-variable-dropdown"> <label> {{ 'Set visibility for all variables: ' | translate }} </label> <p-dropdown [disabled]="isVariableVisibilitySelectDisabled" [options]="visibilityOptions" optionLabel="label" optionValue="value" placeholder="Seleziona.." [(ngModel)]="globalVariablesVisibilitySetting"> </p-dropdown> <p-button [disabled]="isVariableVisibilitySelectDisabled || !globalVariablesVisibilitySetting" (onClick)="setGlobalVariablesVisibilitySetting('simple')" [label]="'Apply' | translate"></p-button> </div> </div> <p-table [value]="simpleVariables" dataKey="id"> <ng-template pTemplate="header"> <tr> <th>{{ 'Variable name' | translate }}</th> <th>{{ 'Visibility' | translate }}</th> </tr> </ng-template> <ng-template pTemplate="body" let-variable> <tr> <td>{{ variable.name }}</td> <td> <p-dropdown [disabled]="isVariableVisibilitySelectDisabled" [options]="visibilityOptions" [(ngModel)]="variable.procedureVariableVisibilityType" optionLabel="label" optionValue="value" placeholder="variable.procedureVariableVisibilityType"> </p-dropdown> </td> </tr> </ng-template> <ng-template pTemplate="emptymessage"> <tr> <td>{{ 'No items found' | translate }}</td> <td></td> </tr> </ng-template> </p-table> </p-tabPanel> <p-tabPanel> <ng-template pTemplate="header"> {{ 'Document variables' | translate }} </ng-template> <div class="global-variable-dropdown-reference"> <div class="global-variable-dropdown"> <label> {{ 'Set visibility for all variables: ' | translate }} </label> <p-dropdown [disabled]="isVariableVisibilitySelectDisabled" [options]="visibilityOptions" optionLabel="label" optionValue="value" placeholder="Seleziona.." [(ngModel)]="globalVariablesVisibilitySetting"> </p-dropdown> <p-button [disabled]="isVariableVisibilitySelectDisabled || !globalVariablesVisibilitySetting" (onClick)="setGlobalVariablesVisibilitySetting('document')" [label]="'Apply' | translate"></p-button> <p-button [disabled]="StatusControl.value === EntityStatus.PUBLISHED" id="button-with-margin" (onClick)="openAddVariableModal()" [label]="'Add permission' | translate"></p-button> </div> </div> <p-table [value]="documentVariables" dataKey="id"> <ng-template pTemplate="header"> <tr> <th>{{ 'Variable name' | translate }}</th> <th>{{ 'Visibility' | translate }}</th> <th>{{ 'Custom' | translate }}</th> </tr> </ng-template> <ng-template pTemplate="body" let-variable> <tr> <td>{{ variable.name }}</td> <td> <p-dropdown [disabled]="isVariableVisibilitySelectDisabled" [options]="visibilityOptions" [(ngModel)]="variable.procedureVariableVisibilityType" optionLabel="label" optionValue="value" placeholder="variable.procedureVariableVisibilityType"> </p-dropdown> </td> <td> <p>{{ getProcedureVariablePermissionType(variable) }}</p> </td> <td style="text-align: center"> <button *ngIf="StatusControl.value !== EntityStatus.PUBLISHED && variable.procedureVariablePermissionType" pButton pRipple type="button" class="p-button-rounded p-button-warning" icon="pi pi-trash" (click)="confirmVariableDeletion(variable)" pTooltip="{{ 'Delete variable' | translate }}" tooltipPosition="top"></button> </td> </tr> </ng-template> <ng-template pTemplate="emptymessage"> <tr> <td>{{ 'No items found' | translate }}</td> <td></td> </tr> </ng-template> </p-table> </p-tabPanel> </p-tabView> </p-tabPanel> <p-tabPanel *ngIf="showPublications" [disabled]="TypeControl.value?.code === ProcType.SUB_WORKFLOW_BASED"> <ng-template pTemplate="header"> {{ 'Publications' | translate }} </ng-template> <p-table #dt [value]="publications" dataKey="id" styleClass="p-datatable-customers" [rowHover]="true" [filterDelay]="0" [rows]="10" [paginator]="true" [lazy]="true" (onLazyLoad)="loadPublications($event)" [totalRecords]="publicationsTotalRecords" [hidden]="isPublicationsLoading" [(first)]="publicationsFirstPage"> <ng-template pTemplate="header"> <tr> <th style="width: 22%">{{ 'Name' | translate }}</th> <th style="width: 22%">{{ 'Version' | translate }}</th> <th style="width: 22%">{{ 'Publication date' | translate }}</th> <th style="width: 12%"></th> </tr> </ng-template> <ng-template pTemplate="body" let-publication> <tr class="p-selectable-row"> <td><span class="image-text" style="vertical-align: middle">{{ publication.name }}</span></td> <td>{{ publication.deploymentVersion }}</td> <td>{{ publication.publishedAt | date: 'medium' }}</td> <td style="text-align: center"> <button pButton type="button" class="p-button-rounded p-button-success p-mr-2" icon="pi pi-search-plus" style="margin-right: 3px" (click)="openPublicationDetailModal(publication, publication.deploymentVersion)" pTooltip="{{ 'Open publication detail' | translate }}" tooltipPosition="top"></button> </td> </tr> </ng-template> <ng-template pTemplate="emptymessage"> <tr> <td colspan="4">{{ 'No items found' | translate }}</td> </tr> </ng-template> </p-table> </p-tabPanel> <p-tabPanel [disabled]="TypeControl.value?.code === ProcType.SUB_WORKFLOW_BASED"> <ng-template pTemplate="header"> {{ 'Metadata' | translate }} </ng-template> <ng-template pTemplate="body"> <div class="metadata-box"> <p-button id="metadata-button" [disabled]="StatusControl.value === EntityStatus.PUBLISHED" (onClick)="onShowModalMetadataClick()" icon="pi pi-external-link" label="{{ 'Add metadata' | translate }}"> </p-button> <p-table #dt [value]="metaDataList" dataKey="id" styleClass="p-datatable-customers"> <ng-template pTemplate="header"> <tr> <th style="width: 40%">{{ 'Name' | translate }}</th> <th style="width: 50%">{{ 'Value' | translate }}</th> <th style="width: 12%"></th> </tr> </ng-template> <ng-template pTemplate="body" let-metadata> <tr class="p-selectable-row"> <td><span class="image-text" style="vertical-align: middle">{{ metadata.name }}</span></td> <td>{{ metadata.value }}</td> <td style="text-align: center"> <button pButton type="button" class="p-button-rounded p-button-warning" icon="pi pi-trash" (click)="confirmMetadataDeletion(metadata.name)" *ngIf="StatusControl.value !== EntityStatus.PUBLISHED" pTooltip="{{ 'Delete metadata' | translate }}" tooltipPosition="top"></button> </td> </tr> </ng-template> <ng-template pTemplate="emptymessage"> <tr> <td colspan="3">{{ 'No items found' | translate }}</td> </tr> </ng-template> </p-table> </div> </ng-template> </p-tabPanel> </p-tabView> <app-publication-detail-modal *ngIf="showPublicationDetailModal" [publicationVersion]="publicationVersion" [publicationId]="publicationId" [showPublicationModal]="showPublicationDetailModal" (publicationModalClose)="onPublicationModalClose()"></app-publication-detail-modal> <p-dialog [(visible)]="showAddVariableModal" [modal]="true" [style]="{width: '40vw'}" [baseZIndex]="10000" [draggable]="false" [resizable]="false" (onHide)="closeAddVariableModal()"> <ng-template pTemplate="header"> <div class="p-d-flex p-flex-column p-flex-md-row p-jc-md-between table-header" style="font-size: 1.5rem"> {{ 'Add permission' | translate }} </div> </ng-template> <ng-template pTemplate="body"> <form [formGroup]='newVariableForm'> <span class="p-float-label"> <input id="float-input-new-variable" type="text" pInputText [(ngModel)]="newVariable" formControlName="newVariable"> <label for="float-input-new-variable">{{ 'Name *' | translate }}</label> </span> <small *ngIf="newVariableForm.get('newVariable').touched && newVariableForm.get('newVariable').valid && isVariableDuplicated()" class="p-invalid">{{ 'Name field is already used' | translate }}</small> <small *ngIf="newVariableForm.get('newVariable').touched && !newVariableForm.get('newVariable').valid" class="p-invalid">{{ 'Name field is required' | translate }}</small> </form> </ng-template> <ng-template pTemplate="footer"> <p-button *ngIf="!newVariableForm.get('newVariable').touched || !newVariableForm.get('newVariable').valid || isVariableDuplicated()" icon="pi pi-check" [disabled]="true" styleClass="p-button-text" [label]="'Add' | translate"></p-button> <p-button *ngIf="newVariableForm.get('newVariable').touched && newVariableForm.get('newVariable').valid && !isVariableDuplicated()" icon="pi pi-check" (click)="addVariable()" styleClass="p-button-text" [label]="'Add' | translate"></p-button> </ng-template> </p-dialog> <p-dialog [(visible)]="showFormMetadataModal" [modal]="true" [style]="{width: '40vw'}" [baseZIndex]="10000" [draggable]="false" [resizable]="false"> <ng-template pTemplate="header"> <div class="p-d-flex p-flex-column p-flex-md-row p-jc-md-between table-header" style="font-size: 1.5rem"> {{ 'Add metadata' | translate }} </div> </ng-template> <ng-template pTemplate="body"> <form [formGroup]='newMetadataForm'> <!-- <span class="p-float-label"> <p-dropdown id="float-input-metadata" [options]="defaultMetadata" [style]="{width: '35%'}" [autoDisplayFirst]="false" [showClear]="true" optionLabel="name" (onChange)="defaultMetadataSelection($event)"></p-dropdown> <label for="float-input-metadata">{{ 'Default metadata' | translate }}</label> </span>--> <span class="p-float-label"> <input id="float-input-name" type="text" pInputText [(ngModel)]="metadata.name" formControlName="name"> <label for="float-input-name">{{ 'Name *' | translate }}</label> </span> <small *ngIf="!newMetadataForm.get('name').valid" class="p-invalid"> {{ 'Name field is required' | translate }} </small> <span class="p-float-label"> <input id="float-input-value" type="text" pInputText [(ngModel)]="metadata.value" formControlName="value"> <label for="float-input-value">{{ 'Value *' | translate }}</label> </span> <small *ngIf="!newMetadataForm.get('value').valid" class="p-invalid"> {{ 'Value field is required' | translate }} </small> </form> </ng-template> <ng-template pTemplate="footer"> <p-button [disabled]="!newMetadataForm.get('name').valid || !newMetadataForm.get('value').valid" icon="pi pi-check" (onClick)="addMetadata()" styleClass="p-button-text" [label]="'Add' | translate"></p-button> </ng-template> </p-dialog> </div> <p-confirmDialog [style]="{width: '40vw'}" [baseZIndex]="10000000" rejectButtonStyleClass="p-button-text"> </p-confirmDialog> <app-node-tree *ngIf="showMultiSelect" [treeNodes]="domainsTree" [selectionMode]="'checkbox'" (selectedTreeNodes)="onChangeSelectedDomains($event)" [(showDialog)]="displayDomainsDialog" (closedDialog)="displayDomainsDialog = false" [(selectedNodes)]="this.DomainsControl.value"> </app-node-tree>