stable after blogs
This commit is contained in:
Dhanraj
@ -0,0 +1,31 @@
|
||||
/* Add these styles to your component's CSS file or a global stylesheet */
|
||||
|
||||
.blog-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.blog-list {
|
||||
flex: 1;
|
||||
margin-right: 20px; /* Adjust spacing as needed */
|
||||
}
|
||||
|
||||
.blog-form {
|
||||
flex: 2; /* Adjust this if you want the form to be wider or narrower */
|
||||
}
|
||||
|
||||
.blog-form form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.result-container {
|
||||
border: 1px solid #ddd;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.result-container h4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@ -0,0 +1,118 @@
|
||||
<app-menu></app-menu>
|
||||
<div class="container mt-4">
|
||||
<div class="d-flex justify-content-between mb-3">
|
||||
<!-- Button to Toggle to Blog Form -->
|
||||
<button *ngIf="!isShowForm" class="btn btn-primary" (click)="showForm()">New Blog</button>
|
||||
<!-- Button to Toggle to Blog List -->
|
||||
<button *ngIf="isShowForm" class="btn btn-secondary" (click)="showTable()">Back to List</button>
|
||||
</div>
|
||||
|
||||
<!-- Blog Form -->
|
||||
<div *ngIf="isShowForm" class="mb-4">
|
||||
<form [formGroup]="blogForm" (ngSubmit)="saveBlog()">
|
||||
<div class="container">
|
||||
<button type="submit" class="btn btn-primary mx-2">{{ editing ? 'Update Blog' : 'Create Blog' }}</button>
|
||||
<button type="button" class="btn btn-secondary ml-2" (click)="resetForm()">Cancel</button>
|
||||
</div>
|
||||
|
||||
<div class="form-group m-2 ">
|
||||
<label class="text-primary" for="title">Title</label>
|
||||
<input type="text" id="title" class="form-control" formControlName="title" placeholder="Enter blog title">
|
||||
<div *ngIf="blogForm?.get('title')?.invalid && blogForm.get('title')?.touched" class="text-danger">
|
||||
Title is required.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group m-2">
|
||||
<label class="text-primary" for="professors">Professors</label>
|
||||
<select id="professors" formControlName="professors" class="form-control" multiple>
|
||||
<option *ngFor="let professor of allProfessors" [value]="professor.id">
|
||||
{{ professor.firstName }}
|
||||
</option>
|
||||
</select>
|
||||
<div *ngIf="blogForm.get('professors')?.invalid && blogForm.get('professors')?.touched" class="text-danger mt-1">
|
||||
At least one professor must be selected.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group m-2">
|
||||
<label class="text-primary" for="tags">Tags</label>
|
||||
<input type="text" id="tags" class="form-control" formControlName="tags" placeholder="Enter tags separated by commas">
|
||||
<div *ngIf="blogForm.get('tags')?.invalid && blogForm.get('tags')?.touched" class="text-danger mt-1">
|
||||
Tags are required.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group m-2">
|
||||
<input type="checkbox" class="mx-2" id="posted" formControlName="posted">
|
||||
<label class="text-primary" for="posted">Posted</label>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="form-group m-2">
|
||||
<label class="text-primary m-1" for="content">Content</label>
|
||||
<angular-editor [config]="editorConfig" [placeholder]="'Enter text here...'" formControlName="content"></angular-editor>
|
||||
<div *ngIf="blogForm.get('content')?.invalid && blogForm.get('content')?.touched" class="text-danger mt-1">
|
||||
Content is required.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result-container mt-4">
|
||||
<h4 class="text-primary">Preview</h4>
|
||||
<div [innerHTML]="blogForm.get('content')?.value || ''"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Blog List -->
|
||||
<div *ngIf="!isShowForm">
|
||||
<div *ngIf="blogs.length > 0">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<!-- <th>Content</th> -->
|
||||
<th>Authors</th>
|
||||
<th>Tags</th>
|
||||
<th>Posted</th> <!-- New column for posted status -->
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let blog of blogs">
|
||||
<td>{{ blog.title }}</td>
|
||||
<!-- <td>{{ blog.content | slice:0:50 }}...</td> -->
|
||||
<td>
|
||||
<span *ngFor="let professor of blog.professors">{{ professor.firstName }}<br></span>
|
||||
</td>
|
||||
<td>
|
||||
<span *ngFor="let tag of blog.tags">{{ tag }}<br></span>
|
||||
</td>
|
||||
<td>
|
||||
<span *ngIf="blog.posted" class="text-success">✓</span> <!-- Check mark for posted -->
|
||||
<span *ngIf="!blog.posted" class="text-danger">✗</span> <!-- Cross mark for not posted -->
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-info btn-sm mr-2" (click)="editBlog(blog)"> <!-- Added margin-right for spacing -->
|
||||
Edit
|
||||
</button>
|
||||
<button class="btn btn-danger btn-sm" (click)="deleteBlog(blog)">
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<div *ngIf="blogs.length === 0" class="alert alert-info">
|
||||
No blogs available. Please create a new blog.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { BlogComponent } from './blog.component';
|
||||
|
||||
describe('BlogComponent', () => {
|
||||
let component: BlogComponent;
|
||||
let fixture: ComponentFixture<BlogComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ BlogComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(BlogComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
187
support-portal-frontend/src/app/component/blog/blog.component.ts
Normal file
187
support-portal-frontend/src/app/component/blog/blog.component.ts
Normal file
@ -0,0 +1,187 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { AngularEditorConfig } from '@josipv/angular-editor-k2';
|
||||
import { AuthenticationService } from 'src/app/service/authentication.service';
|
||||
;
|
||||
import { BlogService } from 'src/app/service/blog.service';
|
||||
import { ProfessorService } from 'src/app/service/professor.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-blog',
|
||||
templateUrl: './blog.component.html',
|
||||
styleUrls: ['./blog.component.css'],
|
||||
})
|
||||
export class BlogComponent implements OnInit {
|
||||
blogs: any[] = [];
|
||||
allProfessors: any[] = [];
|
||||
selectedBlog: any = null;
|
||||
blogForm: FormGroup;
|
||||
editing: boolean = false;
|
||||
loggedInUser: any;
|
||||
currentBlog: any = null; // Holds the blog being edited
|
||||
isShowForm = false; // Controls visibility of form vs. table
|
||||
content = '';
|
||||
|
||||
constructor(
|
||||
private blogService: BlogService,
|
||||
private authService: AuthenticationService,
|
||||
private professorService: ProfessorService,
|
||||
private fb: FormBuilder
|
||||
) {
|
||||
// Initialize form with form controls
|
||||
this.blogForm = this.fb.group({
|
||||
title: ['', Validators.required],
|
||||
content: ['', Validators.required],
|
||||
professors: [[], Validators.required], // To hold selected professor IDs
|
||||
tags: ['', Validators.required], // To hold tags as a comma-separated string
|
||||
posted: [true], // Initialize checkbox with default value false
|
||||
});
|
||||
}
|
||||
|
||||
editorConfig: AngularEditorConfig = {
|
||||
editable: true,
|
||||
spellcheck: true,
|
||||
height: '10',
|
||||
minHeight: '0',
|
||||
maxHeight: 'auto',
|
||||
width: 'auto',
|
||||
minWidth: '0',
|
||||
translate: 'yes',
|
||||
enableToolbar: true,
|
||||
showToolbar: true,
|
||||
placeholder: 'Enter text here...',
|
||||
defaultParagraphSeparator: '',
|
||||
defaultFontName: '',
|
||||
defaultFontSize: '',
|
||||
// headers: [{
|
||||
|
||||
// }],
|
||||
fonts: [
|
||||
{ class: 'arial', name: 'Arial' },
|
||||
{ class: 'times-new-roman', name: 'Times New Roman' },
|
||||
{ class: 'calibri', name: 'Calibri' },
|
||||
{ class: 'comic-sans-ms', name: 'Comic Sans MS' },
|
||||
],
|
||||
customClasses: [
|
||||
{
|
||||
name: 'quote',
|
||||
class: 'quote',
|
||||
},
|
||||
{
|
||||
name: 'redText',
|
||||
class: 'redText',
|
||||
},
|
||||
{
|
||||
name: 'titleText',
|
||||
class: 'titleText',
|
||||
tag: 'h1',
|
||||
},
|
||||
],
|
||||
// uploadUrl: 'v1/image',
|
||||
// upload: (file: File) => { ... }
|
||||
// uploadWithCredentials: false,
|
||||
sanitize: true,
|
||||
toolbarPosition: 'top',
|
||||
toolbarHiddenButtons: [['bold', 'italic'], ['fontSize']],
|
||||
};
|
||||
|
||||
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loggedInUser = this.authService.getUserFromLocalStorage();
|
||||
this.professorService
|
||||
.getAllProfessors()
|
||||
.subscribe((res) => (this.allProfessors = res.content));
|
||||
|
||||
this.loadBlogs();
|
||||
// Subscribe to form value changes to update content for preview
|
||||
this.blogForm.get('content')?.valueChanges.subscribe((value) => {
|
||||
this.content = value;
|
||||
});
|
||||
}
|
||||
|
||||
showForm() {
|
||||
this.isShowForm = true;
|
||||
this.resetForm(); // Ensure form is reset when showing
|
||||
}
|
||||
|
||||
showTable() {
|
||||
this.isShowForm = false;
|
||||
this.resetForm(); // Ensure form is reset when switching back
|
||||
}
|
||||
|
||||
loadBlogs() {
|
||||
this.blogService.getBlogs().subscribe(data => {
|
||||
this.blogs = data;
|
||||
});
|
||||
}
|
||||
|
||||
createBlog() {
|
||||
this.showForm(); // Show form to create a new blog
|
||||
this.blogForm.reset();
|
||||
this.selectedBlog = null;
|
||||
this.editing = false;
|
||||
}
|
||||
|
||||
editBlog(blog: any) {
|
||||
|
||||
this.selectedBlog = blog;
|
||||
|
||||
this.blogForm.patchValue({
|
||||
title: blog.title,
|
||||
content: blog.content,
|
||||
posted: blog.posted,
|
||||
professors: blog.professors.map((prof: any) => prof.id), // Assuming professors are an array of objects
|
||||
tags: blog.tags.join(', ') // Convert tags array back to comma-separated string
|
||||
});
|
||||
this.editing = true;
|
||||
this.isShowForm = true;
|
||||
|
||||
}
|
||||
|
||||
saveBlog() {
|
||||
if (this.blogForm.valid) {
|
||||
const blogData = this.blogForm.value;
|
||||
|
||||
// Convert tags to array and professors to array of IDs
|
||||
blogData.tags = blogData.tags.split(',').map((tag: string) => tag.trim());
|
||||
blogData.professors = blogData.professors || [];
|
||||
|
||||
blogData.author = this.loggedInUser._id; // Associate logged-in user with the blog
|
||||
|
||||
if (this.editing && this.selectedBlog) {
|
||||
this.blogService.updateBlog(this.selectedBlog.id, blogData).subscribe(() => {
|
||||
this.loadBlogs();
|
||||
this.resetForm();
|
||||
this.isShowForm = false; // Hide form after update
|
||||
});
|
||||
} else {
|
||||
this.blogService.createBlog(blogData).subscribe(() => {
|
||||
this.loadBlogs();
|
||||
this.resetForm();
|
||||
this.isShowForm = false; // Hide form after creation
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
deleteBlog(blog: any) {
|
||||
if (confirm('Are you sure you want to delete this blog?')) {
|
||||
this.blogService.deleteBlog(blog.id).subscribe(() => {
|
||||
this.loadBlogs();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
resetForm() {
|
||||
this.blogForm.reset();
|
||||
this.selectedBlog = null;
|
||||
this.editing = false;
|
||||
this.blogForm.patchValue({
|
||||
professors: [],
|
||||
tags: ''
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user