attachments added for referee

frontend/angular/src/app/components/my-career-web/career-history/career-history/references/references.component.html

@@ -55,8 +55,16 @@
 
                     <div class="col-md-3 col-md-offset-3 form-group">
                         <label>Written Reference</label>
-                        <p-fileUpload mode="basic" name="Upload your Cover Letter" withCredentials="true" auto="true"
-                                      chooseLabel="Browse"></p-fileUpload>
+                        <p-fileUpload *ngIf="!referee?.WrittenReference" name="File" withCredentials="true" auto="true" chooseLabel="Browse" [disabled]="uploadingFile"
+                                      url="{{apiUrl}}uploadFile" (onUpload)="onUpload($event, referee)" (onBeforeUpload)="uploadStarted()">
+                            <ng-template let-file pTemplate="file">
+                                <div>Uploading...</div>
+                            </ng-template>
+                        </p-fileUpload>
+                        <div class="uploaded-attachment" *ngIf="referee?.WrittenReference">
+                            {{referee.WrittenReference.Name}}
+                            <i class="pi pi-times" (click)="removeAttachment(referee)"></i>
+                        </div>
                     </div>
                 </div>
 
@@ -77,7 +85,7 @@
 
 
     <div class="d-flex justify-content-center" style="margin-top: 48px;">
-        <button pButton label="Next Section" class="ui-button-info next-section" [disabled]="isSaving" (click)="saveReferees()"></button>
+        <button pButton label="Next Section" class="ui-button-info next-section" [disabled]="isSaving || uploadingFile" (click)="saveReferees()"></button>
     </div>
 
 </div>

frontend/angular/src/app/components/my-career-web/career-history/career-history/references/references.component.ts

@@ -8,6 +8,7 @@ import { NgForm } from '@angular/forms';
 import { BaseComponent } from '../../../base/base.component';
 import { takeUntil } from 'rxjs/operators';
 import { RefereeModel } from '../../../models/referee.model';
+import { environment } from '../../../../../../environments/environment';
 
 @Component({
   selector: 'app-references',
@@ -18,6 +19,8 @@ export class ReferencesComponent extends BaseComponent implements OnInit {
 
     assocs = ['Referees'];
     careerProfile = new CareerProfileModel();
+    apiUrl = environment.baseUrl;
+    uploadingFile;
 
     @ViewChild('form') form: NgForm;
     @Output() refereeSaved = new EventEmitter();
@@ -45,6 +48,7 @@ export class ReferencesComponent extends BaseComponent implements OnInit {
                 this.us.addObjsToJSONByObjectID(this.updatedObjs, this.careerProfile.Referees);
                 this.addReferee(true);
                 this.isLoading = false;
+                console.log(this.careerProfile);
             }, err => {
                 this.hs.handleHttpError(err);
                 this.isLoading = false;
@@ -65,7 +69,6 @@ export class ReferencesComponent extends BaseComponent implements OnInit {
         } else if (!initLoad) {
             this.us.addMultiRefObject(newModel, this.careerProfile, 'Referees', this.createdObjs);
         }
-        console.log(newModel);
     }
 
     removeReferee(ref): void {
@@ -95,4 +98,22 @@ export class ReferencesComponent extends BaseComponent implements OnInit {
             })
     }
 
+    uploadStarted(): void {
+        this.uploadingFile = true;
+    }
+
+    onUpload($event, referee: RefereeModel): void {
+        const response = JSON.parse($event.xhr.response);
+        referee.WrittenReference = {
+            FileToken: response.files[0].token,
+            Name: response.files[0].fileName,
+        };
+        this.uploadingFile = false;
+    }
+
+    removeAttachment(refree: RefereeModel): void {
+        delete refree.WrittenReference;
+    }
+
+
 }

frontend/angular/src/styles/my-career-styles/_misc.scss

@@ -28,6 +28,22 @@
     box-shadow: 0 0 20px 0 rgba(128,130,133,0.13);
 }
 
+.uploaded-attachment {
+    padding: 4px 8px;
+    background: #f2f2f2;
+    border-radius: 7px;
+    position: relative;
+    border: 1px solid #c2c2c2;
+
+    .pi-times {
+        position: absolute;
+        right: 6px;
+        top: 6px;
+        font-size: 14px;
+        cursor: pointer;
+    }
+}
+
 
 @media only screen and (max-width: 768px) {
 

frontend/angular/src/styles/my-career-styles/_styles.scss

@@ -23,5 +23,6 @@
     @import "primeng/calendar";
     @import "primeng/file-upload";
     @import "primeng/select-button";
+    @import "primeng/upload";
 
 }

frontend/angular/src/styles/my-career-styles/primeng/_upload.scss

+.ui-fileupload {
+
+    &-choose {
+        background: transparent !important;
+    }
+
+    &-buttonbar {
+        padding: 0 !important;
+    }
+
+    &-content {
+        border: 0;
+    }
+}