This is an automated email from the ASF dual-hosted git repository. dgnatyshyn pushed a commit to branch DLAB-1750 in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 06eac11383e4a05604f43d7ba1fc5417083bb611 Author: Dmytro_Gnatyshyn <di1...@ukr.net> AuthorDate: Wed Jul 22 10:16:40 2020 +0300 Add 2 inputs for lib and version --- .../install-libraries.component.html | 140 ++++++++++++++------- .../install-libraries.component.scss | 24 +++- .../install-libraries.component.ts | 13 +- 3 files changed, 121 insertions(+), 56 deletions(-) diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.html index 5d53b59..2146f5d 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.html @@ -52,61 +52,105 @@ </div> </div> </div> + <div class="m-top-20"> + <div class="control-group constol-select"> + <label class="label">Library name</label> + <div class="control"> + <input type="text" [placeholder]="'Enter library name'" [(ngModel)]="lib.name" [disabled]="!group" matInputb> + </div> + </div> + <div class="control-group control-select"> + <label class="label">Library version</label> + <div class="control"> + <input type="text" [placeholder]="'Enter library version (optional)'" [(ngModel)]="lib.version" [disabled]="!lib.name" [matAutocomplete]="auto" #trigger="matAutocompleteTrigger" [formControl]="libSearch"> + <mat-autocomplete #auto="matAutocomplete" class="suggestions" >--> + <ng-template ngFor let-item [ngForOf]="filteredList" let-i="index" *ngIf="query.indexOf(':') === -1"> + <mat-option [ngClass]="{ 'not-allowed': isDuplicated(item) }"> + <div class="option" (click)="selectLibrary(item)"> + <a *ngIf="!isDuplicated(item)"> + <span [innerHTML]="item.name | highlight:query"></span> + <!-- <span *ngIf="item.version && item.version !== 'N/A'">{{ item.version }}</span>--> + </a> + <span *ngIf="isInSelectedList || isInstalled">{{ item.name }} + <span *ngIf="item.version && item.version !== 'N/A'">{{ item.version }}</span> + </span> + + <strong *ngIf="isInSelectedList">selected + <i class="material-icons">done</i> + </strong> + <strong *ngIf="isInstalled">installed + <i class="material-icons">done</i> + </strong> + </div> + </mat-option> + </ng-template> +<!-- <mat-option *ngIf="model.isEmpty(filteredList) && !validity_format && query.indexOf(':') === -1">--> +<!-- <span class="configuring">No matches found</span>--> +<!-- </mat-option>--> +<!-- <mat-option *ngIf="validity_format?.length > 0">--> +<!-- <span class="configuring" *ngIf="query.indexOf(':') === -1">{{ validity_format }}</span >--> +<!-- </mat-option>--> + </mat-autocomplete> + <span class="error-message" *ngIf="!group && libSearch.value">Group field is required. Please choose appropriate group.</span> + </div> + </div> + <mat-icon class="plus-icon" (click)="addLibrary(lib)" [ngClass]="{'not-allow': !lib.name}">add</mat-icon> + </div> <p class="other-message"> <span *ngIf="group === 'others'">Other group can include libs from Python 2 and Python 3 groups</span> </p> <div class="search"> - <mat-form-field class="chip-list"> - <input - type="text" - [placeholder]="group === 'java' ? - 'Enter library name in <groupId>:<artifactId>:<versionId> format' : - 'Enter library name in <name>:<version> format(version is not required)'" - matInput - #trigger="matAutocompleteTrigger" - [formControl]="libSearch" - [value]="query" - [matAutocomplete]="auto" - > -<!-- <span class="add-icon" [matTooltip]="(isInSelectedList || isInstalled) ? 'Current library dosen\'t exist' : 'You have already added or installed current library'"--> -<!-- matTooltipPosition="above"--> -<!-- [matTooltipDisabled] = "isLibExist && (isInSelectedList || isInstalled)"--> - <span class="add-icon"> - <button mat-icon-button class="btn" [disabled]="!isLibExist || query.length < 1 || - isDuplicated({name: query.slice(0, query.indexOf(':')), version: query.slice(query.indexOf(':') + 1) || 'N/A'})" (click)="addLibrary(query);$event.stopPropagation()"> - <mat-icon matSuffix >add</mat-icon> - </button> - </span> +<!-- <mat-form-field class="chip-list">--> +<!-- <input--> +<!-- type="text"--> +<!-- [placeholder]="group === 'java' ?--> +<!-- 'Enter library name in <groupId>:<artifactId>:<versionId> format' :--> +<!-- 'Enter library name in <name>:<version> format(version is not required)'"--> +<!-- matInput--> +<!-- #trigger="matAutocompleteTrigger"--> +<!-- [formControl]="libSearch"--> +<!-- [value]="query"--> +<!-- [matAutocomplete]="auto"--> +<!-- >--> +<!--<!– <span class="add-icon" [matTooltip]="(isInSelectedList || isInstalled) ? 'Current library dosen\'t exist' : 'You have already added or installed current library'"–>--> +<!--<!– matTooltipPosition="above"–>--> +<!--<!– [matTooltipDisabled] = "isLibExist && (isInSelectedList || isInstalled)"–>--> +<!-- <span class="add-icon">--> +<!-- <button mat-icon-button class="btn" [disabled]="!isLibExist || query.length < 1 ||--> +<!-- isDuplicated({name: query.slice(0, query.indexOf(':')), version: query.slice(query.indexOf(':') + 1) || 'N/A'})" (click)="addLibrary(query);$event.stopPropagation()">--> +<!-- <mat-icon matSuffix >add</mat-icon>--> +<!-- </button>--> +<!-- </span>--> - <mat-autocomplete #auto="matAutocomplete" class="suggestions" > - <ng-template ngFor let-item [ngForOf]="filteredList" let-i="index" *ngIf="query.indexOf(':') === -1"> - <mat-option [ngClass]="{ 'not-allowed': isDuplicated(item) }"> - <div class="option" (click)="selectLibrary(item)"> - <a *ngIf="!isDuplicated(item)"> - <span [innerHTML]="item.name | highlight:query"></span> +<!-- <mat-autocomplete #auto="matAutocomplete" class="suggestions" >--> +<!-- <ng-template ngFor let-item [ngForOf]="filteredList" let-i="index" *ngIf="query.indexOf(':') === -1">--> +<!-- <mat-option [ngClass]="{ 'not-allowed': isDuplicated(item) }">--> +<!-- <div class="option" (click)="selectLibrary(item)">--> +<!-- <a *ngIf="!isDuplicated(item)">--> +<!-- <span [innerHTML]="item.name | highlight:query"></span>--> +<!--<!– <span *ngIf="item.version && item.version !== 'N/A'">{{ item.version }}</span>–>--> +<!-- </a>--> +<!-- <span *ngIf="isInSelectedList || isInstalled">{{ item.name }}--> <!-- <span *ngIf="item.version && item.version !== 'N/A'">{{ item.version }}</span>--> - </a> - <span *ngIf="isInSelectedList || isInstalled">{{ item.name }} - <span *ngIf="item.version && item.version !== 'N/A'">{{ item.version }}</span> - </span> +<!-- </span>--> - <strong *ngIf="isInSelectedList">selected - <i class="material-icons">done</i> - </strong> - <strong *ngIf="isInstalled">installed - <i class="material-icons">done</i> - </strong> - </div> - </mat-option> - </ng-template> - <mat-option *ngIf="model.isEmpty(filteredList) && !validity_format && query.indexOf(':') === -1"> - <span class="configuring">No matches found</span> - </mat-option> - <mat-option *ngIf="validity_format?.length > 0"> - <span class="configuring" *ngIf="query.indexOf(':') === -1">{{ validity_format }}</span > - </mat-option> - </mat-autocomplete> - </mat-form-field> +<!-- <strong *ngIf="isInSelectedList">selected--> +<!-- <i class="material-icons">done</i>--> +<!-- </strong>--> +<!-- <strong *ngIf="isInstalled">installed--> +<!-- <i class="material-icons">done</i>--> +<!-- </strong>--> +<!-- </div>--> +<!-- </mat-option>--> +<!-- </ng-template>--> +<!-- <mat-option *ngIf="model.isEmpty(filteredList) && !validity_format && query.indexOf(':') === -1">--> +<!-- <span class="configuring">No matches found</span>--> +<!-- </mat-option>--> +<!-- <mat-option *ngIf="validity_format?.length > 0">--> +<!-- <span class="configuring" *ngIf="query.indexOf(':') === -1">{{ validity_format }}</span >--> +<!-- </mat-option>--> +<!-- </mat-autocomplete>--> +<!-- </mat-form-field> --> <div class="list-selected list-container" id='scrolling'> <mat-chip-list *ngIf="model.selectedLibs.length && libs_uploaded"> <mat-chip *ngFor="let item of model.selectedLibs"> diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss index fd769f0..044ff8f 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss @@ -214,9 +214,13 @@ ul.resources{ width: 100%; overflow-y: auto; - .mat-form-field { + + &.mat-form-field { width: 100%; - padding: 5px 20px; + //padding: 5px 20px; + .mat-form-field-infix{ + display: flex; + } } .mat-input-flex { @@ -547,6 +551,22 @@ mat-chip.mat-chip:not(.mat-basic-chip) { .btn{ line-height: 26px; } + +.m-top-20{ + position: relative; + .plus-icon{ + position: absolute; + right: 70px; + top: 5px; + color: #35afd5; + font-size: 27px; + cursor: pointer; + &.not-allow{ + color: lightgray; + } + } +} + @media screen and (min-width: 1281px) { .libs-info { height: 60%; diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.ts index 2f22fb9..ed5fa6d 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.ts @@ -84,6 +84,7 @@ export class InstallLibrariesComponent implements OnInit, OnDestroy { @ViewChild('trigger', { static: false }) matAutoComplete; public isLibInfoOpened = { }; private isLibExist: boolean; + lib: Library = {name: '', version: ''}; constructor( @Inject(MAT_DIALOG_DATA) public data: any, @@ -145,7 +146,7 @@ export class InstallLibrariesComponent implements OnInit, OnDestroy { public filterList(): void { this.validity_format = ''; - (this.query.length >= 2 && this.group) ? this.getFilteredList() : this.filteredList = null; + (this.lib.name.length >= 2 && this.group) ? this.getFilteredList() : this.filteredList = null; } public filterGroups(groupsList) { @@ -192,17 +193,17 @@ export class InstallLibrariesComponent implements OnInit, OnDestroy { } public addLibrary(item): void { - const lib = item.split(':').filter(v => !!v); - this.model.selectedLibs.push({ group: this.group, name: lib[0], version: lib[1] || 'N/A' }); + this.model.selectedLibs.push({ group: this.group, name: item.name, version: item.version || 'N/A' }); this.query = ''; this.libSearch.setValue(''); + this.lib = {name: '', version: ''}; this.filteredList = null; } public selectLibrary(item): void { // this.model.selectedLibs.push({ group: this.group, name: item.name, version: item.version }); // this.query = ''; - this.libSearch.setValue(item.name + ':'); + this.libSearch.setValue(item.name); this.filteredList = null; } @@ -417,7 +418,7 @@ export class ErrorLibMessageDialogComponent { template: ` <div class="dialog-header"> <h4 class="modal-title" *ngIf="data.type === 'added'">Installed dependency</h4> - <h4 class="modal-title" *ngIf="data.type === 'available'">Library installation error</h4> + <h4 class="modal-title" *ngIf="data.type === 'available'">Version is not available</h4> <button type="button" class="close" (click)="dialogRef.close()">×</button> </div> <!-- <mat-list class="resources">--> @@ -443,7 +444,7 @@ export class ErrorLibMessageDialogComponent { <span class="strong">Dependency: </span>{{data.lib.add_pkgs.join(', ')}} </div> <div class="lib-list" *ngIf="data.type === 'available'"> - <p class="terminated">Version is not available</p> +<!-- <p class="terminated">Version is not available</p>--> <span class="strong">Available versions: </span>{{data.lib.available_versions.join(', ')}} </div> <!-- <div class="text-center">--> --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@dlab.apache.org For additional commands, e-mail: commits-h...@dlab.apache.org