Issue: Can upload image URL (#4)

Co-authored-by: Hanna Pelsholen Busterud <hannapb@ntnu.no>

client/src/app/posts/post-form/post-form.component.html

@@ -11,6 +11,9 @@
     <option *ngFor="let category of categories" [value]="category.getCategoryId">{{category.getName}}</option>
 </app-select>
 
+<app-text-input [(inputModel)]="imageUrl" label="Bilde URL" (blur)="showImage(imageUrl)"></app-text-input>
+<img [src]="displayImageUrl" (error)="showImage('https://i.stack.imgur.com/y9DpT.jpg')">
+
 <p>{{statusMessage}}</p>
 
-<app-button (click)="publishPost()" text="Publiser"></app-button>
\ No newline at end of file
+<app-button (click)="publishPost()" text="Publiser"></app-button>

client/src/app/posts/post-form/post-form.component.spec.ts

@@ -31,7 +31,6 @@ describe('PostFormComponent', () => {
         })
     );
 
-
     await TestBed.configureTestingModule({
       declarations: [ PostFormComponent ],
       imports: [ HttpClientTestingModule, RouterTestingModule, FormsModule, SharedModule ],
@@ -104,4 +103,10 @@ describe('PostFormComponent', () => {
     expect(mockPostService.addPost).toHaveBeenCalled();
     expect(router.url).toBe('/');
   });
+
+  it('should show image', () => {
+    // Tests that image is updated with new URL
+    component.showImage("test");
+    expect(component.displayImageUrl).toBe("test");
+  });
 });

client/src/app/posts/post-form/post-form.component.ts

@@ -15,6 +15,8 @@ export class PostFormComponent implements OnInit {
   description: string = "";
   price: number = 0;
   categoryid: number = 0;
+  imageUrl: string;
+  displayImageUrl: string;
 
   statusMessage: string = "";
 
@@ -70,7 +72,7 @@ export class PostFormComponent implements OnInit {
         description: this.description,
         timestamp: new Date(),
         owner: "admin",
-        imageUrl: "",
+        imageUrl: this.imageUrl,
         price: this.price,
         categoryid: this.categoryid
       });
@@ -85,10 +87,17 @@ export class PostFormComponent implements OnInit {
     }
   }
 
+  /**
+   * Sets the image source to be the url.
+   */
+  showImage(url) {
+    this.displayImageUrl = url;
+  }
+
   /**
    * Sets a status message.
    */
-  setStatusMessage(message: string){
+  setStatusMessage(message: string) {
     this.statusMessage = message;
   }
 }
\ No newline at end of file