Re-added exercise-import component changes

package.json

@@ -85,11 +85,14 @@
     "packaging": "jar"
   },
   "dependencies": {
+    "@angular/animations": "^13.1.3",
+    "@angular/cdk": "^13.1.3",
     "@angular/common": "13.1.3",
     "@angular/compiler": "13.1.3",
     "@angular/core": "13.1.3",
     "@angular/forms": "13.1.3",
     "@angular/localize": "13.1.3",
+    "@angular/material": "^13.1.3",
     "@angular/platform-browser": "13.1.3",
     "@angular/platform-browser-dynamic": "13.1.3",
     "@angular/router": "13.1.3",

src/main/webapp/app/app.module.ts

@@ -8,7 +8,7 @@ import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { NgxWebstorageModule } from 'ngx-webstorage';
 import dayjs from 'dayjs/esm';
 import { NgbDateAdapter, NgbDatepickerConfig } from '@ng-bootstrap/ng-bootstrap';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 import { ApplicationConfigService } from 'app/core/config/application-config.service';
 import './config/dayjs';
@@ -19,13 +19,14 @@ import { HomeModule } from './home/home.module';
 // jhipster-needle-angular-add-module-import JHipster will add new module here
 import { NgbDateDayjsAdapter } from './config/datepicker-adapter';
 import { fontAwesomeIcons } from './config/font-awesome-icons';
-import { httpInterceptorProviders } from 'app/core/interceptor/index';
+import { httpInterceptorProviders } from './core/interceptor';
 import { MainComponent } from './layouts/main/main.component';
 import { NavbarComponent } from './layouts/navbar/navbar.component';
 import { FooterComponent } from './layouts/footer/footer.component';
 import { PageRibbonComponent } from './layouts/profiles/page-ribbon.component';
 import { ActiveMenuDirective } from './layouts/navbar/active-menu.directive';
 import { ErrorComponent } from './layouts/error/error.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 export let AppInjector: Injector;
 
@@ -42,6 +43,7 @@ export let AppInjector: Injector;
     NgxWebstorageModule.forRoot({ prefix: 'jhi', separator: '-', caseSensitive: true }),
     TranslationModule,
     FontAwesomeModule,
+    BrowserAnimationsModule,
   ],
   providers: [
     Title,
@@ -52,12 +54,13 @@ export let AppInjector: Injector;
   declarations: [MainComponent, NavbarComponent, ErrorComponent, PageRibbonComponent, ActiveMenuDirective, FooterComponent],
   bootstrap: [MainComponent],
 })
-
-
-
 export class AppModule {
-  constructor(applicationConfigService: ApplicationConfigService, 
-              iconLibrary: FaIconLibrary, dpConfig: NgbDatepickerConfig, private injector: Injector) {
+  constructor(
+    applicationConfigService: ApplicationConfigService,
+    iconLibrary: FaIconLibrary,
+    dpConfig: NgbDatepickerConfig,
+    private injector: Injector
+  ) {
     AppInjector = injector;
     applicationConfigService.setEndpointPrefix(SERVER_API_URL);
     registerLocaleData(locale);

src/main/webapp/app/exercise/import/exercise-import.component.html

-<!-- TODO
 <jhi-alert></jhi-alert>
 <jhi-alert-error></jhi-alert-error>
- -->
 <h2 jhiTranslate="exercise.import.pageTitle">Import exercise</h2>
 
 <div *ngIf="exerciseInfo != undefined">
   <div class="row justify-content-center">
     <div class="col-8">
-    TODO
-    <!-- TODO
       <form name="importForm" role="form" (ngSubmit)="import()" #importForm="ngForm">
         <div class="form-group">
           <label class="form-control-label" jhiTranslate="exercise.metadata.metadataVersion">Metadata version</label>
@@ -273,7 +269,6 @@
           <fa-icon class="align-middle" [icon]="'save'"></fa-icon> <span jhiTranslate="exercise.import.form.submit">Submit</span>
         </button>
       </form>
-      -->
     </div>
   </div>
 </div>

src/main/webapp/app/exercise/import/exercise-import.component.ts

@@ -8,6 +8,8 @@ import { GitlabService } from 'app/shared/gitlab/gitlab.service';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { GitlabPathSelectorComponent } from 'app/shared/gitlab/gitlab-path-selector/gitlab-path-selector.component';
 import { GitlabGroup } from 'app/shared/model/gitlab-group.model';
+import { COMMA, ENTER, TAB } from '@angular/cdk/keycodes';
+import { MatChipInputEvent } from '@angular/material/chips';
 
 @Component({
   selector: 'jhi-import',
@@ -29,6 +31,8 @@ export class ExerciseImportComponent implements OnInit {
   isLoading = false;
   isImporting = false;
 
+  separatorKeysCodes = [ENTER, COMMA, TAB];
+
   constructor(
     private route: ActivatedRoute,
     private exerciseService: ExerciseService,
@@ -65,7 +69,7 @@ export class ExerciseImportComponent implements OnInit {
           }
         },
         error => {
-          this.jhiAlertService.addAlert({type: 'danger', message: 'some error occured:'}); // .error('', { error: error.error });
+          this.jhiAlertService.addAlert({ type: 'danger', message: 'Following error occurred: '.concat(error.error) });
         }
       );
     }
@@ -80,8 +84,9 @@ export class ExerciseImportComponent implements OnInit {
       this.exerciseInfo!.difficulty = this.exerciseInfo!.difficulty?.toLowerCase();
     }
     if (this.isPublisherSameAsCreator) {
-        if(this.exerciseInfo)
-          this.exerciseInfo.publisher = this.exerciseInfo?.creator;
+      if (this.exerciseInfo) {
+        this.exerciseInfo.publisher = this.exerciseInfo?.creator;
+      }
     }
     this.openGitlabPathSelectorModal().then(gitlabGroup => {
       if (gitlabGroup !== undefined) {
@@ -92,7 +97,7 @@ export class ExerciseImportComponent implements OnInit {
             window.location.href = this.route.snapshot.queryParams['callback'];
           },
           error => {
-            this.jhiAlertService.addAlert({type: 'danger', message: error.error.detail});
+            this.jhiAlertService.addAlert({ type: 'danger', message: error.error.detail });
             window.scroll(0, 0);
             this.isLoading = false;
             this.isImporting = false;
@@ -112,7 +117,7 @@ export class ExerciseImportComponent implements OnInit {
     return modalRef.result.then(group => {
       this.selectedGitlabGroup = group;
       return group as GitlabGroup;
-    }) ;
+    });
   }
 
   /**
@@ -161,7 +166,7 @@ export class ExerciseImportComponent implements OnInit {
    * @param person to add
    * @param personList to add the given person to (ex. 'creators', 'publishers')
    */
-  addPerson(person: Person, personList: string) : void{
+  addPerson(person: Person, personList: string): void {
     if (this.validatePerson(person) && this.exerciseInfo) {
       if (!personList.localeCompare('creator')) {
         if (this.exerciseInfo.creator == null) {
@@ -254,4 +259,26 @@ export class ExerciseImportComponent implements OnInit {
   isPersonSet(personList: Person[]): boolean {
     return personList !== undefined && personList.length > 0;
   }
+
+  onKeywordAdd(event: MatChipInputEvent): void {
+    if (this.exerciseInfo!.keyword.filter(entry => entry === event.value).length === 0) {
+      this.exerciseInfo!.keyword.push(event.value);
+    }
+    event.chipInput?.clear();
+  }
+
+  onKeywordRemove(keyword: string): void {
+    this.exerciseInfo!.keyword = this.exerciseInfo!.keyword.filter(entry => entry !== keyword);
+  }
+
+  onProgrammingLanguageAdd(event: MatChipInputEvent): void {
+    if (this.exerciseInfo!.programmingLanguage.filter(entry => entry === event.value).length === 0) {
+      this.exerciseInfo!.programmingLanguage.push(event.value);
+    }
+    event.chipInput?.clear();
+  }
+
+  onProgrammingLanguageRemove(programmingLanguage: string): void {
+    this.exerciseInfo!.programmingLanguage = this.exerciseInfo!.programmingLanguage.filter(entry => entry !== programmingLanguage);
+  }
 }

src/main/webapp/app/exercise/import/exercise-import.module.ts

 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { RouterModule } from '@angular/router';
 import { ExerciseModule } from 'app/exercise/exercise.module';
 import { ExerciseImportComponent } from 'app/exercise/import/exercise-import.component';
 import { EXERCISE_IMPORT_ROUTE } from 'app/exercise/import/exercise-import.route';
 import { GitlabModule } from 'app/shared/gitlab/gitlab.module';
 import { SharedModule } from 'app/shared/shared.module';
-// import { TagInputModule } from 'ngx-chips';
+import { MatIconModule } from '@angular/material/icon';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatFormFieldModule } from '@angular/material/form-field';
 
 @NgModule({
-  imports: [RouterModule.forChild(EXERCISE_IMPORT_ROUTE), FontAwesomeModule, SharedModule, ExerciseModule, /* TagInputModule, */ GitlabModule, FormsModule],
+  imports: [
+    RouterModule.forChild(EXERCISE_IMPORT_ROUTE),
+    FontAwesomeModule,
+    SharedModule,
+    ExerciseModule,
+    GitlabModule,
+    FormsModule,
+    MatChipsModule,
+    MatFormFieldModule,
+    MatIconModule,
+  ],
   declarations: [ExerciseImportComponent],
   exports: [ExerciseImportComponent],
 })