Permalink
Browse files

User interaction for New Blog Post seems to be working

  • Loading branch information...
drovani committed Feb 3, 2019
1 parent 590d446 commit c997a423414c0f3f93e22b08f5f47352f4d8d138
@@ -12,7 +12,7 @@ import { BlogPostsComponent } from './blogposts/blogposts.component';
declarations: [
AppComponent,
NavMenuComponent,
BlogPostsComponent
BlogPostsComponent,
],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),

This file was deleted.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -15,7 +15,6 @@ const httpOptions = {
})

export class BlogPostService {

private blogPostsUrl = 'api/BlogPosts';

constructor(protected http: HttpClient) { }
@@ -28,6 +27,13 @@ export class BlogPostService {
);
}

createBlogPost(blogpost: BlogPost): Observable<BlogPost> {
return this.http.post<BlogPost>(this.blogPostsUrl, blogpost, httpOptions)
.pipe(
catchError(this.handleError<BlogPost>('createBlogPost'))
);
}

deleteBlogPost(blogpost: BlogPost | string): Observable<BlogPost> {
const id = typeof blogpost === 'string' ? blogpost : blogpost.id;
const url = `${this.blogPostsUrl}/${id}`;
@@ -0,0 +1,17 @@
export class BlogPost {
id: string;
postedOn: Date;

constructor(
public title?: string,
public postedBy?: string,
public bodyText?: string
) {
/// generate a version 4 UUID
this.id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
this.postedOn = new Date();
}
}
@@ -1,12 +1,40 @@
<h1>Recent Blog Posts</h1>
<h2>Create New Blog Post</h2>

<section>
<article style="border-bottom:thin solid black; padding-bottom: 1em;">
<form #blogpostForm="ngForm" (submit)="onSubmit()">
<header>
<div class="input-group input-group-lg mb-1">
<input type="text" class="form-control" id="title" required [(ngModel)]="newBlogPost.title" name="title" placeholder="Blog Post Title" />
</div>
<div class="input-group input-group-sm">
<label for="postedBy">Posted by </label><input type="text" class="form-control mx-3" id="postedBy" required [(ngModel)]="newBlogPost.postedBy" name="postedBy" placeholder="author" />
<label for="postedOn">on</label><input type="datetime-local" class="form-control ml-3" id="postedOn" required [ngModel]="newBlogPost.postedOn | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="newBlogPost.postedOn = $event" name="postedOn" />
</div>
<span>{{ newBlogPost.id }}</span>
</header>
<div class="input-group mb-1">
<textarea class="form-control" id="bodytext" required [(ngModel)]="newBlogPost.bodyText" name="bodyText" rows="5" cols="80" placeholder="Blog Post Text"></textarea>
</div>
<button type="submit" class="btn mr-1"
[ngClass]="{'btn-primary': blogpostForm.form.valid, 'btn-dark': !blogpostForm.form.valid}"
[disabled]="!blogpostForm.form.valid">
Submit
</button>
<button type="button" class="btn btn-secondary" (click)="resetBlogPost(); blogpostForm.reset()">Reset</button>
</form>
</article>
</section>

<h2>Recent Blog Posts</h2>

<div *ngIf="!blogposts"><em>Loading&#8230;</em></div>

<section *ngIf="blogposts">
<article *ngFor="let blogpost of blogposts" style="border-bottom:thin solid black; padding-bottom: 1em;">
<header style="padding-bottom: 1em">
<h2>{{ blogpost.title }}</h2>
<aside>Posted by {{ blogpost.postedBy }} on {{ blogpost.postedOn }}</aside>
<h3>{{ blogpost.title }}</h3>
<aside>Posted by {{ blogpost.postedBy }} on {{ blogpost.postedOn | date:'medium' }}</aside>
<span>{{ blogpost.id }}</span>
</header>
<p>{{ blogpost.bodyText }}</p>
@@ -1,15 +1,18 @@
import { Component, OnInit } from '@angular/core';
import { BlogPost } from '../blogpost';
import { BlogPostService } from '../blogpost.service';
import { BlogPost } from './blogpost';
import { BlogPostService } from './blogpost.service';

@Component({
selector: 'app-blogposts',
templateUrl: './blogposts.component.html'
})
export class BlogPostsComponent implements OnInit {
public blogposts: BlogPost[];
public newBlogPost: BlogPost;

constructor(private blogpostService: BlogPostService) { }
constructor(private blogpostService: BlogPostService) {
this.newBlogPost = new BlogPost('Test Blog Title', 'Seeded Author', 'This is some sample text so it doesn\'t need to be asdf\'d every time.');
}

ngOnInit() {
this.getBlogPosts();
@@ -20,6 +23,18 @@ export class BlogPostsComponent implements OnInit {
.subscribe(blogposts => this.blogposts = blogposts);
}

onSubmit(): void {
this.blogpostService.createBlogPost(this.newBlogPost)
.subscribe(post => {
this.blogposts.push(post);
this.newBlogPost = new BlogPost();
});
}

resetBlogPost(): void {
this.newBlogPost = new BlogPost();
}

delete(blogpost: BlogPost): void {
this.blogposts = this.blogposts.filter(bp => bp !== blogpost);
this.blogpostService.deleteBlogPost(blogpost).subscribe();
@@ -34,8 +34,8 @@
</ItemGroup>

<ItemGroup>
<TypeScriptCompile Include="ClientApp\src\app\blogpost.service.ts" />
<TypeScriptCompile Include="ClientApp\src\app\blogpost.ts" />
<TypeScriptCompile Include="ClientApp\src\app\blogposts\blogpost.service.ts" />
<TypeScriptCompile Include="ClientApp\src\app\blogposts\blogpost.ts" />
</ItemGroup>

<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">

0 comments on commit c997a42

Please sign in to comment.