You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by dg...@apache.org on 2020/07/23 16:06:39 UTC
[incubator-dlab] 01/02: Add 2 inputs for lib and version
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 <di...@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-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org