add service name field to add custom dialog

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]),

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})
   }
 }