added create page and updated auth
This commit is contained in:
@ -1 +1,20 @@
|
||||
<app-post-editor />
|
||||
<!-- <app-post-editor /> -->
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-2xl">Posts Overview</h2>
|
||||
<a
|
||||
routerLink="/post/new"
|
||||
class="bg-amber-400 rounded-full p-1 px-5 hover:bg-amber-500 active:bg-amber-600 transition-colors"
|
||||
>
|
||||
New
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<section class="grid grid-cols-1 gap-5 m-5">
|
||||
<article
|
||||
*ngFor="let post of posts()"
|
||||
class="p-5 flex flex-col items-start rounded-s bg-white drop-shadow-md hover:drop-shadow-lg"
|
||||
>
|
||||
<h3 class="text-xl">{{ post.title }}</h3>
|
||||
<p><strong>TL;DR; </strong>{{ post.tldr }}</p>
|
||||
</article>
|
||||
</section>
|
||||
|
@ -1,10 +1,15 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, inject } from '@angular/core';
|
||||
import { PostEditorComponent } from '../../components/post-editor/post-editor.component';
|
||||
import { NgFor } from '@angular/common';
|
||||
import { PostsService } from '../../shared/services/posts.service';
|
||||
import { RouterLink, RouterOutlet } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-admin',
|
||||
imports: [PostEditorComponent],
|
||||
imports: [NgFor, RouterLink],
|
||||
standalone: true,
|
||||
templateUrl: './admin.component.html',
|
||||
})
|
||||
export class AdminComponent {}
|
||||
export class AdminComponent {
|
||||
posts = inject(PostsService).getPosts();
|
||||
}
|
||||
|
@ -10,9 +10,5 @@ import { RouterLink } from '@angular/router';
|
||||
templateUrl: './home.component.html',
|
||||
})
|
||||
export class HomeComponent {
|
||||
private postsService = inject(PostsService);
|
||||
|
||||
get posts() {
|
||||
return this.postsService.getPosts();
|
||||
}
|
||||
posts = inject(PostsService).getPosts();
|
||||
}
|
||||
|
@ -0,0 +1,10 @@
|
||||
<div class="flex items-center justify-between mb-5">
|
||||
<h1 class="text-3xl">Create a new Post</h1>
|
||||
<button
|
||||
class="bg-amber-400 rounded-full p-1 px-5 hover:bg-amber-500 active:bg-amber-600 transition-colors"
|
||||
(click)="publish()"
|
||||
>
|
||||
Publish
|
||||
</button>
|
||||
</div>
|
||||
<app-post-editor [post]="post" (postChange)="post.set($event)" />
|
@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { CreatePostComponent } from './create-post.component';
|
||||
|
||||
describe('CreatePostComponent', () => {
|
||||
let component: CreatePostComponent;
|
||||
let fixture: ComponentFixture<CreatePostComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [CreatePostComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(CreatePostComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
@ -0,0 +1,36 @@
|
||||
import { Component, effect, inject, signal } from '@angular/core';
|
||||
import { PostEditorComponent } from '../../../components/post-editor/post-editor.component';
|
||||
import { Post } from '../../../shared/interfaces/post';
|
||||
import { PostsService } from '../../../shared/services/posts.service';
|
||||
import { Location } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-create-post',
|
||||
imports: [PostEditorComponent],
|
||||
templateUrl: './create-post.component.html',
|
||||
})
|
||||
export class CreatePostComponent {
|
||||
private postsService = inject(PostsService);
|
||||
private location = inject(Location);
|
||||
post = signal<Post>({
|
||||
id: 0,
|
||||
title: '',
|
||||
tldr: '',
|
||||
content: '',
|
||||
});
|
||||
|
||||
constructor() {
|
||||
effect(() => {
|
||||
console.log('create', this.post());
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.post.set({ ...this.post(), title: 'adf' });
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
publish() {
|
||||
this.postsService.createPost(this.post());
|
||||
this.location.back();
|
||||
}
|
||||
}
|
@ -10,10 +10,10 @@ import { MarkdownComponent } from '../../components/markdown/markdown.component'
|
||||
templateUrl: './post.component.html',
|
||||
})
|
||||
export class PostComponent {
|
||||
private posts = inject(PostsService);
|
||||
@Input() id!: string;
|
||||
private postsService = inject(PostsService);
|
||||
|
||||
get post() {
|
||||
return this.posts.getPost(parseInt(this.id));
|
||||
return this.postsService.getPost(parseInt(this.id));
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user