add auto comple insted of tag select

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

@@ -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/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> {