Skip to content

Commit

Permalink
fix(ui): display input text for unknown key (#4430)
Browse files Browse the repository at this point in the history 
Signed-off-by: Benjamin Coenen <benjamin.coenen@corp.ovh.com>
  • Loading branch information
@bnjjj @yesnault
bnjjj authored and yesnault committed Jul 9, 2019
1 parent 6db0101 commit f1a067b
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 65 deletions.
17 changes: 6 additions & 11 deletions ui/src/app/shared/parameter/value/parameter.value.component.ts
View file
@@ -1,13 +1,4 @@
import {
AfterViewChecked,
ChangeDetectionStrategy,
Component,
EventEmitter,
Input,
OnInit,
Output,
ViewChild
} from '@angular/core';
import { AfterViewChecked, ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { AllKeys } from 'app/model/keys.model';
import { Parameter } from 'app/model/parameter.model';
import { Project } from 'app/model/project.model';
Expand Down Expand Up @@ -72,7 +63,7 @@ export class ParameterValueComponent implements OnInit, AfterViewChecked {
@Output() valueChange = new EventEmitter<string | number | boolean>();
@Output() valueUpdating = new EventEmitter<boolean>();

@ViewChild('codeMirror', {static: false}) codemirror: any;
@ViewChild('codeMirror', { static: false }) codemirror: any;

codeMirrorConfig: any;
repositoriesManager: Array<RepositoriesManager>;
Expand Down Expand Up @@ -205,4 +196,8 @@ export class ParameterValueComponent implements OnInit, AfterViewChecked {
});
}
}

keyExist(key: string): boolean {
return this.keys.ssh.find((k) => k.name === key) != null;
}
}
91 changes: 37 additions & 54 deletions ui/src/app/shared/parameter/value/parameter.value.html
View file
@@ -1,57 +1,48 @@
<ng-container [ngSwitch]="type" *ngIf="edit">
<div *ngSwitchCase="'number'" class="ui fluid input">
<input type="number" [(ngModel)]="editableValue" (change)="valueChanged()" (keydown)="sendValueChanged()" name="value">
<input type="number" [(ngModel)]="editableValue" (change)="valueChanged()" (keydown)="sendValueChanged()"
name="value">
</div>
<div *ngSwitchCase="'text'" class="ui form">
<codemirror [(ngModel)]="editableValue" [config]="codeMirrorConfig" (change)="changeCodeMirror()" #codeMirror (keydown)="sendValueChanged()"></codemirror>
<codemirror [(ngModel)]="editableValue" [config]="codeMirrorConfig" (change)="changeCodeMirror()" #codeMirror
(keydown)="sendValueChanged()"></codemirror>
</div>
<div *ngSwitchCase="'boolean'" class="ui checkbox">
<input type="checkbox" [(ngModel)]="editableValue" (change)="valueChanged();sendValueChanged()" name="value">
<label>{{ ' '}}</label>
</div>
<div *ngSwitchCase="'ssh-key'">
<ng-container *ngIf="keys">
<sui-select class="selection"
name="type"
[(ngModel)]="editableValue"
(ngModelChange)="valueChanged();sendValueChanged()"
[options]="keys.ssh"
labelField="name"
valueField="name"
[isSearchable]="true"
#sshkey>
<ng-container *ngIf="keys && keys.ssh && (keyExist(editableValue) || !editableValue)">
<sui-select class="selection" name="type" [(ngModel)]="editableValue"
(ngModelChange)="valueChanged();sendValueChanged()" [options]="keys.ssh" labelField="name"
valueField="name" [isSearchable]="true" #sshkey>
<sui-select-option *ngFor="let t of sshkey.filteredOptions" [value]="t">
</sui-select-option>
</sui-select>
</ng-container>
<ng-container *ngIf="keys && keys.ssh && editableValue && !keyExist(editableValue)">
<input type="text" [(ngModel)]="editableValue" (change)="valueChanged()" (keydown)="sendValueChanged()"
name="value">
</ng-container>
</div>
<div *ngSwitchCase="'pgp-key'">
<ng-container *ngIf="keys">
<sui-select class="selection"
name="type"
[(ngModel)]="editableValue"
(ngModelChange)="valueChanged();sendValueChanged()"
[options]="keys.pgp"
labelField="name"
valueField="name"
[isSearchable]="true"
#pgpkey>
<sui-select class="selection" name="type" [(ngModel)]="editableValue"
(ngModelChange)="valueChanged();sendValueChanged()" [options]="keys.pgp" labelField="name"
valueField="name" [isSearchable]="true" #pgpkey>
<sui-select-option *ngFor="let t of pgpkey.filteredOptions" [value]="t">
</sui-select-option>
</sui-select>
</ng-container>
</div>
<div *ngSwitchCase="'list'">
<div class="ui fluid input" *ngIf="editList">
<input type="text" [(ngModel)]="editableValue" (change)="valueChanged()" (keydown)="sendValueChanged()" name="value" placeholder="value1;value2;value3">
<input type="text" [(ngModel)]="editableValue" (change)="valueChanged()" (keydown)="sendValueChanged()"
name="value" placeholder="value1;value2;value3">
</div>
<div *ngIf="!editList && editableValue && list">
<sm-select class="search fluid"
[(model)]="editableValue"
[options]="{'fullTextSearch': true}"
(modelChange)="valueChanged();sendValueChanged()"
(keydown)="sendValueChanged()"
name="value">
<sm-select class="search fluid" [(model)]="editableValue" [options]="{'fullTextSearch': true}"
(modelChange)="valueChanged();sendValueChanged()" (keydown)="sendValueChanged()" name="value">

<ng-container *ngIf="refValue">
<option *ngFor="let v of refValue" [value]="v">{{v}}</option>
Expand All @@ -65,53 +56,45 @@
</div>

<div *ngSwitchCase="'env'">
<sm-select class="search fluid"
[options]="{'fullTextSearch': true}"
[(model)]="editableValue"
(modelChange)="valueChanged()"
(onChange)="sendValueChanged()">
<option *ngFor="let env of projectRo?.environments" value="{{env.name}}">{{env.name}}</option>
</sm-select>
<sm-select class="search fluid" [options]="{'fullTextSearch': true}" [(model)]="editableValue"
(modelChange)="valueChanged()" (onChange)="sendValueChanged()">
<option *ngFor="let env of projectRo?.environments" value="{{env.name}}">{{env.name}}</option>
</sm-select>
</div>
<div *ngSwitchCase="'pipeline'">
<sm-select class="search fluid"
[options]="{'fullTextSearch': true}"
[(model)]="editableValue"
(modelChange)="valueChanged()"
(onChange)="sendValueChanged()">
<sm-select class="search fluid" [options]="{'fullTextSearch': true}" [(model)]="editableValue"
(modelChange)="valueChanged()" (onChange)="sendValueChanged()">
<option *ngFor="let pip of projectRo?.pipelines" value="{{pip.name}}">{{pip.name}}</option>
</sm-select>
</div>
<div *ngSwitchCase="'repository'">
<sm-select class="search fluid"
[options]="{'fullTextSearch': true}"
[model]="selectedRepoManager.name"
<sm-select class="search fluid" [options]="{'fullTextSearch': true}" [model]="selectedRepoManager.name"
(modelChange)="updateRepoManager($event)">
<option *ngFor="let r of repositoriesManager" value="{{r.name}}">{{r.name}}</option>
</sm-select>
<sm-select *ngIf="selectedRepoManager && selectedRepoManager.name !== 'Git Url'"
placeholder="{{'common_loading' | translate}}"
[options]="{'fullTextSearch': true}"
(modelChange)="valueRepoChanged($event)"
[(model)]="selectedRepo"
class="search item"
[disabled]="loadingRepos">
placeholder="{{'common_loading' | translate}}" [options]="{'fullTextSearch': true}"
(modelChange)="valueRepoChanged($event)" [(model)]="selectedRepo" class="search item"
[disabled]="loadingRepos">
<option *ngFor="let r of repositories" value="{{r.fullname}}">{{r.fullname}}</option>
</sm-select>
<input *ngIf="selectedRepoManager && selectedRepoManager.name === 'Git Url'" type="text" [(ngModel)]="editableValue" (change)="valueChanged()" (keydown)="sendValueChanged()" name="value" placeholder="{{'parameter_git_url' | translate }}">
<input *ngIf="selectedRepoManager && selectedRepoManager.name === 'Git Url'" type="text"
[(ngModel)]="editableValue" (change)="valueChanged()" (keydown)="sendValueChanged()" name="value"
placeholder="{{'parameter_git_url' | translate }}">
</div>
<div *ngSwitchDefault>
<input auto-complete autocomplete="off" type="text" [(ngModel)]="editableValue"
(change)="valueChanged()" (keydown)="sendValueChanged()" name="value" [source]="suggest" [min-chars]="3"
[no-match-found-text]="false">
<input auto-complete autocomplete="off" type="text" [(ngModel)]="editableValue" (change)="valueChanged()"
(keydown)="sendValueChanged()" name="value" [source]="suggest" [min-chars]="3"
[no-match-found-text]="false">
</div>
</ng-container>
<ng-container [ngSwitch]="type" *ngIf="!edit">
<div *ngSwitchCase="'text'" class="ui form">
<textarea readonly rows="{{_sharedService.getTextAreaheight(editableValue)}}">{{editableValue}}</textarea>
</div>
<div *ngSwitchCase="'boolean'" class="ui checkbox">
<input disabled type="checkbox" [(ngModel)]="editableValue" (change)="valueChanged()" (keydown)="sendValueChanged()" name="value">
<input disabled type="checkbox" [(ngModel)]="editableValue" (change)="valueChanged()"
(keydown)="sendValueChanged()" name="value">
<label>{{' '}}</label>
</div>
<div *ngSwitchDefault class="ui fluid input">
Expand Down

0 comments on commit f1a067b

Please sign in to comment.