pagination and validation message

Author: mohitj2401

package-lock.json

@@ -20,6 +20,7 @@
     "@angular/router": "^14.1.0",
     "bootstrap": "^5.2.0",
     "ckeditor4-angular": "^3.1.1",
+    "ngx-pagination": "^6.0.2",
     "ngx-toastr": "^15.0.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",

package.json

@@ -15,6 +15,9 @@ import { CKEditorModule } from 'ckeditor4-angular';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { SafeHtmlPipe } from './safe-html.pipe';
 import { ToastrModule } from 'ngx-toastr';
+import { SortByDatePipe } from './sort-by-date.pipe';
+import { NgxPaginationModule } from 'ngx-pagination';
+
 
 
 @NgModule({
@@ -27,6 +30,7 @@ import { ToastrModule } from 'ngx-toastr';
     DiaryComponent,
     IdeaComponent,
     SafeHtmlPipe,
+    SortByDatePipe,
 
   ],
   imports: [
@@ -36,7 +40,8 @@ import { ToastrModule } from 'ngx-toastr';
     HttpClientModule,
     CKEditorModule,
     ToastrModule.forRoot(),
-    BrowserAnimationsModule
+    BrowserAnimationsModule,
+    NgxPaginationModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/app.module.ts

@@ -0,0 +1,8 @@
+import { SortByDatePipe } from './sort-by-date.pipe';
+
+describe('SortByDatePipe', () => {
+  it('create an instance', () => {
+    const pipe = new SortByDatePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/sort-by-date.pipe.spec.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'sortByDate'
+})
+export class SortByDatePipe implements PipeTransform {
+
+  transform(value) {
+    const sortedValues = value.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
+
+    return sortedValues;
+  }
+
+}

src/app/sort-by-date.pipe.ts

@@ -7,15 +7,25 @@
 
             <div class="row">
                 <span class="fs-3 ">Your Stories
-                    <button class="btn btn-secondary float-end" (click)="listing=false;createStory=true;">Add
+                    <button class="btn btn-secondary float-end" (click)="openCreateForm()">Add
                         New</button></span>
             </div>
-            <div class="mx-5 py-3" *ngFor="let story of stories">
+            <div class="mx-5 py-3" *ngFor="
+            let story of stories | sortByDate
+            | paginate
+            : {
+                itemsPerPage: tableSize,
+                currentPage: page,
+                totalItems: count
+              };
+        let i = index
+
+            ">
 
                 <div class="row pb-2">
                     <div>
                         <span class="float-start fs-3"> {{story.title}}</span>
-                        <span class="float-end text-primary"> Date :- {{story.created_at}}</span>
+                        <span class="float-end text-primary"> Date :- {{story.created_at | date:'mediumDate'}}</span>
 
                     </div>
                 </div>
@@ -26,10 +36,56 @@
                 <button class="btn btn-outline-secondary me-2" (click)="listing=!listing">Edit</button>
                 <button class="btn btn-outline-danger">Delete</button>
             </div>
-
+            <div class="d-flex justify-content-center">
+                <pagination-controls previousLabel="Prev" nextLabel="Next" (pageChange)="onTableDataChange($event)">
+                </pagination-controls>
+            </div>
         </div>
         <div *ngIf="createStory" class="mx-5 my-4">
-            <p class="fs-3 text-center">Add Your Story</p>
+            <p class="fs-3 text-center">
+                <button class="btn btn-warning float-start" (click)="listing=true;createStory=false;">Go Back</button>
+                Add Your Story
+            </p>
+            <form [formGroup]="storyForm" (ngSubmit)="addStory()">
+                <div class="form-floating mb-3">
+                    <input type="text" class="form-control" id="floatingInputValue" formControlName="title">
+                    <label for="floatingInputValue">Title</label>
+                    <p *ngIf="(
+                        storyForm.controls['title'].dirty ||
+                        storyForm.controls['title'].touched ||
+                        storyForm.controls['title'].pristine) &&
+                        storyForm.controls['title'].errors
+                    " class="alert alert-danger">This Field is Required</p>
+                </div>
+                <ckeditor #editor formControlName="content">
+                </ckeditor>
+                <p *ngIf="(
+                        storyForm.controls['content'].dirty ||
+                        storyForm.controls['content'].touched ||
+                        storyForm.controls['content'].pristine) &&
+                        storyForm.controls['content'].errors
+                    " class="alert alert-danger">This Field is Required</p>
+                <div class="form-floating my-3">
+                    <input type="date" class="form-control" id="floatingInputValue" formControlName="created_at">
+                    <label for="floatingInputValue">Completion Date</label>
+                    <p *ngIf="(
+                        storyForm.controls['created_at'].dirty ||
+                        storyForm.controls['created_at'].touched ||
+                        storyForm.controls['created_at'].pristine) &&
+                        storyForm.controls['created_at'].errors
+                    " class="alert alert-danger">This Field is Required</p>
+                </div>
+
+                <button type="submit" class="btn btn-primary" [disabled]="!storyForm.valid">Submit
+                </button>
+
+            </form>
+        </div>
+        <div *ngIf="editStory" class="mx-5 my-4">
+            <p class="fs-3 text-center">
+                <button class="btn btn-warning float-start" (click)="listing=true;editStory=false;">Go Back</button>
+                Edit Your Story
+            </p>
             <form [formGroup]="storyForm">
                 <div class="form-floating mb-3">
                     <input type="text" class="form-control" id="floatingInputValue" formControlName="title">

src/app/story/story.component.html

@@ -14,25 +14,30 @@ export class StoryComponent implements OnInit {
 
 
   listing: boolean = true;
+  editStory = false;
   createStory: boolean = false;
   storyForm!: FormGroup;
   stories!: Story[];
   successMessage: String = "ss";
   errorMessage!: String;
 
+
+  //pagination configuration
+  page: number = 1;
+  count: number = 0;
+  tableSize: number = 4;
+  tableSizes: any = [3, 6, 9, 12];
+
   constructor(private formbuilder: FormBuilder, private storyService: StoryService, private toastr: ToastrService) { }
 
   ngOnInit(): void {
 
     this.getStories();
-    this.storyForm = this.formbuilder.group({
-      title: ['', [Validators.required, Validators.minLength(255)]],
-      content: ['', Validators.required],
-      created_at: ['', [Validators.required]],
-    });
+
 
   }
   addStory() {
+    this.createStory = false; this.listing = true
     var story = this.storyForm.getRawValue();
     this.storyService.addStories(story).subscribe({
       next: (stories) => {
@@ -44,7 +49,15 @@ export class StoryComponent implements OnInit {
     });
 
   }
-
+  onTableDataChange(event: any) {
+    this.page = event;
+    this.getStories();
+  }
+  onTableSizeChange(event: any): void {
+    this.tableSize = event.target.value;
+    this.page = 1;
+    this.getStories();
+  }
   getStories() {
 
     this.storyService.getStories().subscribe({
@@ -55,4 +68,13 @@ export class StoryComponent implements OnInit {
       error: errror => console.log(errror),
     });
   }
+
+  openCreateForm() {
+    this.storyForm = this.formbuilder.group({
+      title: ['', [Validators.required, Validators.maxLength(255)]],
+      content: ['', Validators.required],
+      created_at: [Date.now().toLocaleString, [Validators.required]],
+    });
+    this.listing = false; this.createStory = true;
+  }
 }