src/app/views/qualifications/qualifications.component.html

@@ -2,9 +2,9 @@
     <div class="qualifications__action-row">
         <mat-form-field>
             <mat-label>Qualification</mat-label>
-            <input matInput>
+            <input matInput #qualificationInput minlength="1" maxlength="25">
         </mat-form-field>
-        <button mat-fab class="shadowless">
+        <button mat-fab class="shadowless" (click)="onAdd(qualificationInput)">
             <mat-icon>add</mat-icon>
         </button>
     </div>

src/app/views/qualifications/qualifications.component.ts

@@ -79,6 +79,16 @@ export class QualificationsComponent {
         this.qualificationEdits.set(id, true);
     }
 
+    onAdd(qualificationField: HTMLInputElement){
+        this.qualificationService.createQualification({requestBody: {skill: qualificationField.value}}).subscribe((qualification)=>{
+            const data = this.qualificationDataSource.data;
+            data.push(qualification);
+            this.qualificationDataSource = new MatTableDataSource<Qualification>(data);
+            this.notifications.publish(`Added ${qualification.skill}`);
+            qualificationField.value='';
+        });
+    }
+
     endEdit(oldQualification: Qualification, save: boolean) {
 
         const qualificationFormGroup = this.qualificationSkillFormGroups.get(oldQualification.id);
@@ -128,6 +138,10 @@ export class QualificationsComponent {
                 return;
             }
             this.qualificationService.getAllQualificationEmployees({id: qualification.id}).subscribe((employees: QualificationEmployees) => {
+                if (employees.employees.length==0){
+                    this.execDelete(qualification);
+                    return;
+                }
                 const requests: Array<Observable<RemoveQualificationFromEmployeeResponse>> = [];
                 for (const employee of employees.employees) {
                     requests.push(this.employeeService.removeQualificationFromEmployee({
@@ -142,6 +156,12 @@ export class QualificationsComponent {
                             return;
                         }
                     }
+                    this.execDelete(qualification);
+                });
+            });
+        });
+    }
+    execDelete(qualification: Qualification){
         this.qualificationService.deleteQualification({id: qualification.id}).subscribe(() => {
             const data = this.qualificationDataSource.data;
             const i = data.indexOf(qualification);
@@ -151,8 +171,5 @@ export class QualificationsComponent {
             }
             this.notifications.publish(`Deleted ${qualification.skill}`, NotificationType.Information);
         });
-                });
-            });
-        });
     }
 }