Applying short-term correction suggestions

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

@@ -49,14 +49,29 @@
                     <div *ngIf="exerciseInfo.keyword.length < 1" class="alert alert-danger">
                         <span jhiTranslate="exercise.validation.minKeywords"></span>
                     </div>
-
                 </div>
-                <h4 class="mt-5" jhiTranslate="exercise.import.form.optionalAttributes">Optional Attributes</h4>
                 <div class="form-group">
                     <label class="form-control-label" jhiTranslate="exercise.metadata.description">Description</label>
-                    <input type="text" class="form-control" name="description" [(ngModel)]='exerciseInfo.description'
-                           [value]="exerciseInfo.description ? exerciseInfo.description : ''"/>
+                    <textarea class="form-control" name="description" #description="ngModel" required [(ngModel)]='exerciseInfo.description'
+                              [value]="exerciseInfo.description ? exerciseInfo.description : ''"></textarea>
+                </div>
+                <div *ngIf="description.invalid && (description.dirty || description.touched)" class="alert alert-danger">
+                    <span *ngIf="description.errors?.required" jhiTranslate="exercise.validation.required"></span>
                 </div>
+                <div class="form-group">
+                    <label class="form-control-label" jhiTranslate="exercise.metadata.language.mix">Language</label>
+                    <br>
+                    <div class="btn-group">
+                        <div class="p-2 btn" *ngFor="let language of getLanguages()"
+                             [ngClass]="{ 'btn-primary': isLanguage(language), 'btn-outline-primary': !isLanguage(language) }"
+                             (click)="setLanguage(language)" jhiTranslate="exercise.metadata.{{language.toUpperCase()}}">
+                        </div>
+                    </div>
+                    <div *ngIf="!isLanguageSet()" class="alert alert-danger">
+                        <span jhiTranslate="exercise.validation.required"></span>
+                    </div>
+                </div>
+                <h4 class="mt-5" jhiTranslate="exercise.import.form.optionalAttributes">Optional Attributes</h4>
                 <div class="form-group">
                     <ng-template #helpStructure> {{ 'exercise.help.structure' | translate}}</ng-template>
                     <fa-icon icon="info-circle"
@@ -66,11 +81,6 @@
                     <input type="text" disabled class="form-control" name="structure" [(ngModel)]='exerciseInfo.structure'
                            [value]="exerciseInfo.structure ? exerciseInfo.structure : ''"/>
                 </div>
-                <div class="form-group">
-                    <label class="form-control-label" jhiTranslate="exercise.metadata.language.singular">Language</label>
-                    <input type="text" class="form-control" name="language" [(ngModel)]='exerciseInfo.languages'
-                           [value]="exerciseInfo.languages ? exerciseInfo.languages : ''"/>
-                </div>
                 <div class="form-group position-relative">
                     <label class="form-control-label" jhiTranslate="exercise.metadata.programmingLanguage.plural">Programming languages</label>
                     <tag-input [(ngModel)]='exerciseInfo.programmingLanguages'
@@ -100,10 +110,13 @@
                         <label class="col form-control-label" jhiTranslate="exercise.metadata.person.email">Email</label>
                     </div>
                     <div class="grid-striped mb-2">
-                        <div class="row rounded" *ngFor="let creator of exerciseInfo.creator">
-                            <span class="col text-center my-auto">{{creator.name}}</span>
-                            <span class="col text-center my-auto">{{creator.affiliation}}</span>
-                            <span class="col text-center my-auto">{{creator.email}}</span>
+                        <div class="row rounded" *ngFor="let creator of exerciseInfo.creator; index as i;">
+                            <input type="text" name="creatorName{{i}}" [(ngModel)]="exerciseInfo.creator[i].name"
+                                   [value]="exerciseInfo.creator[i].name" class="col text-center my-auto form-control"/>
+                            <input type="text" name="creatorAffiliation{{i}}" [(ngModel)]="exerciseInfo.creator[i].affiliation"
+                                   [value]="exerciseInfo.creator[i].affiliation" class="col text-center my-auto form-control"/>
+                            <input type="text" name="creatorEmail{{i}}" [(ngModel)]="exerciseInfo.creator[i].email"
+                                   [value]="exerciseInfo.creator[i].email" class="col text-center my-auto form-control"/>
                             <div class="btn btn-outline-primary col-1" (click)="removeCreator(creator)">-</div>
                         </div>
                     </div>
@@ -119,7 +132,7 @@
                     <input type="text" class="form-control" name="source" [(ngModel)]='exerciseInfo.source'
                            [value]="exerciseInfo.source ? exerciseInfo.source : ''"/>
                 </div>
-                <button type="submit" [disabled]="importForm.form.invalid || isLoading" class="btn btn-outline-primary mt-3">
+                <button type="submit" [disabled]="importForm.form.invalid || hasValidationErrors() || isLoading" class="btn btn-outline-primary mt-3">
                     <fa-icon class="align-middle" [icon]="'save'"></fa-icon> <span jhiTranslate="exercise.import.form.submit">Submit</span>
                 </button>
             </form>

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

@@ -44,6 +44,9 @@ export class ExerciseImportComponent implements OnInit {
             this.toTitleCase(programmingLanguage)
           );
           this.exerciseInfo.creator = data['creator'];
+          if (this.exerciseInfo.languages === undefined) {
+            this.exerciseInfo.languages = ['english']; // default value if none is set
+          }
         },
         error => {
           this.jhiAlertService.error('Error loading info of artemis exercise: ' + error.error);
@@ -60,6 +63,7 @@ export class ExerciseImportComponent implements OnInit {
     if (this.exerciseInfo!.difficulty !== null) {
       this.exerciseInfo!.difficulty = this.exerciseInfo!.difficulty?.toLowerCase();
     }
+    this.mapExerciseInfoValues();
     this.openGitlabPathSelectorModal().then(gitlabGroup => {
       if (gitlabGroup !== undefined) {
         this.isLoading = true;
@@ -89,6 +93,42 @@ export class ExerciseImportComponent implements OnInit {
     });
   }
 
+  /**
+   * Validation function for button-groups.
+   * At least one value must be set.
+   * @return true if invalid and false if valid
+   */
+  hasValidationErrors() {
+    if (this.exerciseInfo?.keyword === undefined || this.exerciseInfo?.languages === undefined) {
+      return true;
+    }
+
+    if (!(this.exerciseInfo.keyword.length > 0)) {
+      return true;
+    }
+
+    if (!(this.exerciseInfo.languages.length > 0)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Used to map specific attributes of
+   * the currently imported exercise to correct metadata values
+   */
+  mapExerciseInfoValues() {
+    let index = this.exerciseInfo!.languages.indexOf('english');
+    if (index !== -1) {
+      this.exerciseInfo!.languages[index] = 'en';
+    }
+    index = this.exerciseInfo!.languages.indexOf('german');
+    if (index !== -1) {
+      this.exerciseInfo!.languages[index] = 'de';
+    }
+  }
+
   /**
    * Used to set the exercise's difficulty on
    * user's click
@@ -98,6 +138,18 @@ export class ExerciseImportComponent implements OnInit {
     this.exerciseInfo!.difficulty = difficulty;
   }
 
+  /**
+   * Used to add a language to the exercise
+   * @param language to add
+   */
+  setLanguage(language: string) {
+    if (this.exerciseInfo!.languages.includes(language)) {
+      this.exerciseInfo!.languages = this.exerciseInfo!.languages.filter(lang => lang !== language);
+    } else {
+      this.exerciseInfo!.languages.push(language);
+    }
+  }
+
   /**
    * used to set the exercise's type
    * @param type to set
@@ -145,6 +197,14 @@ export class ExerciseImportComponent implements OnInit {
     return ['simple', 'medium', 'advanced'];
   }
 
+  /**
+   * Utility function used to retrieve the possible languages
+   * for an exercise
+   */
+  getLanguages() {
+    return ['english', 'german'];
+  }
+
   /**
    * Utility function used to retrieve the possible types
    */
@@ -175,4 +235,20 @@ export class ExerciseImportComponent implements OnInit {
       return false;
     }
   }
+
+  /**
+   * Utility function used to check if a given language is set
+   * in the imported exercsie
+   * @param language
+   */
+  isLanguage(language: string) {
+    return this.exerciseInfo!.languages !== undefined && this.exerciseInfo!.languages.includes(language);
+  }
+
+  /**
+   * Used to validate language input
+   */
+  isLanguageSet() {
+    return this.exerciseInfo!.languages !== undefined && this.exerciseInfo!.languages.length > 0;
+  }
 }