Merge pull request #1 from IvashchenkoCW/build

Build

src/composer/src/app/app.module.ts

@@ -25,6 +25,7 @@ import { MatTooltipModule } from '@angular/material/tooltip'
 import { MatCheckboxModule } from '@angular/material/checkbox'
 import { MatMenuModule } from '@angular/material/menu'
 import { MatStepperModule } from '@angular/material/stepper'
+import { MatAutocompleteModule } from '@angular/material/autocomplete'
 
 import { RepoSearchComponent, DialogDetails, DialogAddCustom } from './core/components/repo-search/repo-search.component'
 import { HeaderComponent } from './core/components/header/header.component'
@@ -124,6 +125,7 @@ export function getHighlightLanguages() {
     MatCheckboxModule,
     MatMenuModule,
     MatStepperModule,
+    MatAutocompleteModule,
     DragDropModule,
     HighlightModule,
     FlexLayoutModule,

src/composer/src/app/core/components/dialogs/manage-project-dialog/manage-project-dialog.component.html

@@ -10,15 +10,12 @@
 
         <mat-form-field appearance="fill">
           <mat-label>Tag</mat-label>
-          <mat-select formControlName="tag">
-              <mat-option *ngFor="let tag of tags" [value]="tag">
-                {{ tag }}
-              </mat-option>
-              <mat-option *ngIf="isLoading">
-                <app-spinner></app-spinner>
-              </mat-option>
-              <button *ngIf="nextTagPage" mat-button color="primary" class="tag-select__upload-button" (click)="getTags()">Load more</button>
-          </mat-select>
+          <input type="text" matInput formControlName="tag" [matAutocomplete]="auto" (onEnter)="getTags()" (change)="getTags()">
+          <mat-autocomplete #auto="matAutocomplete" >
+            <mat-option *ngFor="let tag of tags" [value]="tag">
+              {{ tag }}
+            </mat-option>
+          </mat-autocomplete>
         </mat-form-field>
 
         <mat-form-field fxFill appearance="outline">

src/composer/src/app/core/components/dialogs/manage-project-dialog/manage-project-dialog.component.ts

@@ -65,7 +65,7 @@ export class ManageProjectDialogComponent implements OnInit, OnDestroy {
   ) {
     this.serviceName = this.data.name
     this.formGeneral = this.formBuilder.group({
-      image: new FormControl({ value: this.data.image, disabled: true }, Validators.required),
+      image: new FormControl( this.data.image, Validators.required),
       name: new FormControl('', [Validators.required, this.serviceNameAlreadyExistsValidator]),
       tag: new FormControl('', [Validators.required]),
       restart: new FormControl('', [Validators.required]),
@@ -78,6 +78,11 @@ export class ManageProjectDialogComponent implements OnInit, OnDestroy {
       networks: new FormControl(),
     })
 
+    this.formGeneral.get('image').valueChanges.pipe(takeUntil(this.unSubscribe$)).subscribe((value)=> {
+      if (!value) this.formGeneral.get('tag').disable()
+      else if (value && this.formGeneral.get('tag').disabled) this.formGeneral.get('tag').enable()
+    })
+
     this.project = this.store.select('project')
 
     const sub = this.project.pipe(takeUntil(this.unSubscribe$)).subscribe((v) => {
@@ -152,15 +157,11 @@ export class ManageProjectDialogComponent implements OnInit, OnDestroy {
   getTags(): void {
     this.isLoading = true
     this.rest
-      .getRepoTags(this.formGeneral.get('image').value, this.nextTagPage)
+      .getRepoTags(this.formGeneral.get('image').value, this.nextTagPage, this.formGeneral.get('tag').value)
       .pipe(takeUntil(this.unSubscribe$))
-      .subscribe(({ results, next }) => {
-        next ? this.nextTagPage++ : (this.nextTagPage = null)
+      .subscribe(({ results }) => {
 
-        results.forEach(({ name }) => {
-          const index = this.tags.findIndex((prevName) => name === prevName)
-          index === -1 ? this.tags.push(name) : ''
-        })
+        this.tags = results.map(({name}) => name)
 
         this.isLoading = false
       })

src/composer/src/app/core/components/repo-search/dialog-add-custom.html

@@ -9,8 +9,13 @@
     <mat-label>Tag</mat-label>
     <input matInput [(ngModel)]="tag" />
   </mat-form-field>
+
+  <mat-form-field appearance="fill">
+    <mat-label>Service name</mat-label>
+    <input matInput required [(ngModel)]="serviceName" />
+  </mat-form-field>
 </div>
 
 <div mat-dialog-actions fxLayoutAlign="end">
-  <button mat-raised-button (click)="addProject()" cdkFocusInitial>Add</button>
+  <button mat-raised-button [disabled]="!serviceName" (click)="addProject()" cdkFocusInitial>Add</button>
 </div>

src/composer/src/app/core/components/repo-search/repo-search.component.ts

@@ -94,7 +94,7 @@ export class RepoSearchComponent implements OnInit, OnDestroy {
           shm_size: null,
           stdin_open: null,
           tty: null,
-          name: `${data['name']}_${postfix}`,
+          name: data['serviceName'] ? `${data['serviceName']}_${postfix}` : `${data['name']}_${postfix}`,
           container_name: null,
           deploy: null,
           image: imageName,
@@ -250,9 +250,10 @@ export class DialogAddCustom {
   @Output() onAddProject = new EventEmitter()
   imageName: string
   tag: string
+  serviceName: string
   constructor(public dialogRef: MatDialogRef<DialogDetails>) {}
 
   addProject() {
-    this.onAddProject.emit({name: this.imageName, tag: this.tag})
+    this.onAddProject.emit({name: this.imageName, tag: this.tag, serviceName: this.serviceName})
   }
 }

src/composer/src/app/core/services/rest.service.ts

@@ -38,8 +38,8 @@ export class RestService {
     return this.http.get(`${baseDetailUrl}/?r=${repoName}`, httpOptions).pipe(map(this.extractData))
   }
 
-  getRepoTags(repoName: string, pageNumber: number): Observable<any> {
-    return this.http.get(`${baseTagsUrl}/?r=${repoName}&page=${pageNumber}`, httpOptions).pipe(map(this.extractData))
+  getRepoTags(repoName: string, pageNumber: number, searchSubStr: string): Observable<any> {
+    return this.http.get(`${baseTagsUrl}/?r=${repoName}&s=${searchSubStr}&page=${pageNumber}`, httpOptions).pipe(map(this.extractData))
   }
 
   generateCode(data: object): Observable<any> {