alignment

FrontEnd/Library/src/app/app-routing.module.ts

@@ -66,7 +66,7 @@ const routes: Routes = [
   {path:'navbar2',component:Navbar2Component,canActivate: [HomeguardGuard]},
   {path:'sidenav2',component:Sidenav2Component,canActivate: [HomeguardGuard]},
   {path:'admin-navbar',component:AdminNavbarComponent,canActivate: [HomeguardGuard]},
-  {path:'homepage',component:HomepageComponent,canActivate:[HomeguardGuard]}
+  {path:'homepage',component:HomepageComponent,canActivate:[HomeguardGuard]},
   {path:'user-detailview',component:UserDetailviewComponent,canActivate: [HomeguardGuard]}
 ];
 

FrontEnd/Library/src/app/app.module.ts

@@ -59,6 +59,8 @@ import { Navbar2Component } from './navbar2/navbar2.component';
 import { AdminNavbarComponent } from './admin-navbar/admin-navbar.component';
 import { HomepageComponent } from './homepage/homepage.component';
 import { UserDetailviewComponent } from './user-detailview/user-detailview.component';
+import {MatTableModule} from '@angular/material/table';
+
 
 //  import {MatIconModule} from '@angular/material/icon';
 // import { MatToolbarModule } from '@angular/material';
@@ -125,7 +127,8 @@ import { UserDetailviewComponent } from './user-detailview/user-detailview.compo
     MatDialogModule,
     MatInputModule,
     MatListModule,
-    MatGridListModule
+    MatGridListModule,
+    MatTableModule
 
     // Chart
 

FrontEnd/Library/src/app/booksdisplay/booksdisplay.component.css

@@ -1,87 +1,123 @@
-p{
+p {
     padding: 0px 0px 30px 1000px;
     margin: 0px;
     background-color: rgb(0, 0, 0);
-    /* background-image: url('../../../a.png'); */
-
+
 }
 
-.btnhome{
+.btnhome {
     margin-top: 20px;
     margin-bottom: 10px;
     padding: 7;
     border-color: rgb(124, 241, 134);
     background-color: rgba(83, 254, 3, 0.853);
     font-size: 13px;
     border-radius: 25px;
-   
+
 }
 
-.text-danger1{
+.text-danger1 {
 
     width: 160%;
     padding: 8px 6px;
     margin: 0px;
     box-sizing: border-box;
-    border: 1px ;
+    border: 1px;
     background-color: #a7bdb08f;
     color: rgb(0, 0, 0);
     border-radius: 7px;
-
 }
-
-.dropbtn{
+.dropbtn {
     width: 160%;
     padding: 8px 6px;
     margin: 0px;
     box-sizing: border-box;
-    border: 1px ;
+    border: 1px;
     background-color: #a7bdb08f;
     color: rgb(0, 0, 0);
     border-radius: 7px;
 }
-.btn{
+
+.btn {
     width: 150%;
     padding: 7px 2px;
-    margin: 5px ;
+    margin: 5px;
     box-sizing: border-box;
     border: 2px solid rgb(250, 97, 97);
-    background-color:rgba(106, 215, 56, 0.682);
+    background-color: rgba(106, 215, 56, 0.682);
     color: rgb(0, 0, 0);
     border-radius: 7px;
 }
-.table-bordered{
+
+.table-bordered {
     border: 1px solid;
 }
+
 th {
     background-color: #232524;
     color: white;
     width: 15%;
     text-align: center;
-  }
-  td {
+}
+
+/* td {
     background-color: #a7bdb08f;
     color: rgb(0, 0, 0);
     width: 15%;
     text-align: center;
     margin-top: auto;
     padding: auto;
-  }
+} */
 
 
-  .btnList{
+.btnList {
     border: none;
     padding: 1px;
     background: rgb(0, 0, 0);
     font-size: 13px;
-    font-style: italic ;
+    font-style: italic;
     color: rgb(255, 255, 255);
     border-radius: 3px;
 }
-.btnn2{
-    padding-left: 10px;padding-right: 10px;
+
+.btnn2 {
+    color: white;
+    padding-left: 10px;
+    padding-right: 10px;
     border-color: rgb(0, 0, 0);
-    background-color: rgb(64, 133, 238);
+    background-color: black;
     font-size: 13px;
 }
 
+.grid {
+    border-width: 2px;
+    width: 50%;
+}
+
+mat-grid-tile {
+    border-radius: 10px;
+    background: lightblue;
+    height: 100px;
+}
+
+.table {
+    margin-left: 100px;
+width: 300px;
+height: 250px;
+
+
+}
+
+.example-card {
+    max-width: 400px;
+}
+
+.example-header-image {
+    background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
+    background-size: cover;
+}
+@media only screen and (max-width: 600px) {
+    body {
+      background-color: lightblue;
+    }
+  }

FrontEnd/Library/src/app/booksdisplay/booksdisplay.component.html

@@ -1,15 +1,11 @@
 <app-sidenav2></app-sidenav2>
 <router-outlet></router-outlet>
-
- <div class="text-center">
-  <form>
-    <div class="card-box">
-      <div class="row">
-        <div class="table-responsive"><br>
-          <h1 style="text-align:center;color:white;">Books Details</h1>
-
-
-
+<div class="text-center">
+  <div class="card-box">
+    <div class="row">
+      <div class="table-responsive"><br>
+        <div style="display: grid; place-items: center;">
+          <h1 style="text-align:center;color:rgb(4, 9, 31);">Books Details</h1>
           <table class="table table-striped w-auto" style="margin-left: 100px; height: 250px;width: 300px;">
 
             <thead>
@@ -50,10 +46,13 @@ <h1 style="text-align:center;color:white;">Books Details</h1>
 
                   <button type="button" class="btnn2" (click)="requestBook(books)">Request</button>
             </tbody>
-          </table>
+          </table></div>
+
           <div class="d-flex justify-content-center">
             <pagination-controls (pageChange)="onTableDataChange(page=$event)">
             </pagination-controls>
-          </div> 
-
+          </div>
+          <!-- new table -->
+
+
 

FrontEnd/Library/src/app/booksdisplay/booksdisplay.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { NgToastService } from 'ng-angular-popup';
 import { BooksService } from '../books.service';
 import { BorrowService } from '../borrow.service';
 import { CategoryService } from '../category.service';
@@ -10,7 +11,7 @@ import { CategoryService } from '../category.service';
   styleUrls: ['./booksdisplay.component.css']
 })
 export class BooksdisplayComponent implements OnInit {
-
+  
 //booksdata:any;
 // categoryList: any[];
 categoryId:any;
@@ -41,7 +42,7 @@ result: any;
   direction=-1;
 
 
-  constructor(private router:Router ,private booksservice:BooksService,private service:CategoryService,private borrowservice:BorrowService) {
+  constructor(private router:Router ,private booksservice:BooksService,private service:CategoryService,private borrowservice:BorrowService,private toast:NgToastService) {
     // this.booksList=[];
     // this.categoryList=[];
    }
@@ -128,8 +129,10 @@ onTableDataChange(event:any) {
         this.borrowservice.add(data).subscribe({    
         next:(res)=>{
         this.booksId=res.booksId;
-        console.log(res);   
-        alert("Book request successfull")   
+        console.log(res);  
+
+        // alert("Book request successfull")   
+        this.toast.info({summary:'Booking Successfull',duration:5000});
         this.router.navigate(['/borrowhistory'])
         },
         error:(msg)=>{}

FrontEnd/Library/src/app/borrow.service.ts

@@ -72,7 +72,7 @@ handleError(err: HttpErrorResponse): any {
     // user filer
     filterBorrowPagination2(date1:any,date2:any,page:any,tableSize:any,sort:any){
       console.log(date1)
-      return this.http.get(this.apiurl + "/borrow/user/"+date1+"/"+date2+"?pageNo="+page+"&pageSize="+tableSize+"&sortBy="+sort)
+      return this.http.get(this.apiurl + "/borrow/user/loadByIssueDate/"+date1+"/"+date2)
     }
 
     //////////////
@@ -83,7 +83,7 @@ handleError(err: HttpErrorResponse): any {
 
   // return this.http.get(this.apiurl + `/users/fetching/${type}/${date1}/${date2}`, httpOptions)
   LoadByIssueDate(date1:any,date2:any){
-    return this.http.get(this.apiurl + "/borrow/loadByIssueDate/"+date1+"/"+date2).pipe((catchError(err => this.handleError(err))));
+    return this.http.get(this.apiurl + "/borrow/loadByIssueDate/"+date1+"/"+date2);
   }
   //user
   LoadByIssueDateUser(date1:any,date2:any){

FrontEnd/Library/src/app/borrowhistory/borrowhistory.component.ts

@@ -11,7 +11,8 @@ import { UserserviceService } from '../userservice.service';
   styleUrls: ['./borrowhistory.component.css']
 })
 export class BorrowhistoryComponent implements OnInit {
-
+
+
 
   // borrowList: any[];
   borrowId: any;
@@ -194,25 +195,14 @@ export class BorrowhistoryComponent implements OnInit {
       console.log('1111',this.sort);
     })
 
-    // if (this.searchData == null || this.searchData == "") {
-
-    //   //  this.sort="borrow_id";
 
        this.service.filterBorrowPagination2(this.ObjSampleForm.controls['date1'].value, this.ObjSampleForm.controls['date2'].value, this.page, this.tableSize, this.sort).subscribe({
          next: (res: any) => {
-
-           //console.log("--------")
            console.log('filter',res);
            console.log(this.ObjSampleForm.controls['date1'].value);
            this.data = res;
        },
        });
-
-    // }
-    // else {
-
-    //   this.data = this.searchData
-    // }
   }
 
   display(){

FrontEnd/Library/src/app/findby-category/findby-category.component.html

@@ -1,12 +1,12 @@
 <app-sidenav2></app-sidenav2>
-<router-outlet></router-outlet>
+
 <div class="text-center">
   <form [formGroup]="ObjSampleForm">
     <div style="width: 200px; margin-left: 70px; left:520px; top:180px;" class="example-container">
       <table>
         <br>
-        <label for="categoryId">Select Category </label>
-        <select [(ngModel)]="selectedGroup" class="dropbtn" type="input" formControlName="categoryId" name="select"
+        <label for="categoryId" style="margin-left: 500px;">Select Category </label>
+        <select [(ngModel)]="selectedGroup" class="dropbtn"style="margin-left: 450px;width: 350px;"type="input" formControlName="categoryId" name="select"
           placeholder="Select Category" (ngModelChange)="disp()">
           <option *ngFor="let category of catdata" value={{category.categoryId}}>
             {{category.categoryName}}
@@ -20,41 +20,41 @@
 <div class="text-center">
   <form>
     <div class="card-box">
-      <div *ngIf="booksdata==null"> NO BOOKS FOUND!!! </div>
+
       <!-- new table starts -->
-      <table class="table table-striped w-auto" style="margin-left: 100px; position: relative;">
+      <table class="table table-striped w-auto " style="margin-left: 25%; position: relative; ">
 
         <!--Table head-->
         <thead>
           <tr role="row">
             <th>Book Name</th>
             <th>Category-Name</th>
             <th>Publication</th>
-            <th>Auther</th>
+            <th>Author</th>
             <th>Book Copies</th>
             <th>Book Cover</th>
             <th>Action</th>
           </tr>
         </thead>
         <!--Table head-->
-      
+
         <!--Table body-->
         <tbody>
-          
+
           <tr *ngFor="let books of  booksdata">
-          <td>{{books.booksName}}</td>
-          <td>{{books.category.categoryName}}</td>
-          <td>{{books.publication}}</td>
-          <td>{{books.auther}}</td>
-          <td>{{books.booksCopies}}</td>
-          <td align="right"><img src="../../assets/BooksImage/item_pics/{{books.image}}" width="70" height="100">
-          </td>
-      
-          <td>
-      
-            <button type="button" class="btnn2" (click)="requestBook(books)">Request</button>
+            <td>{{books.booksName}}</td>
+            <td>{{books.category.categoryName}}</td>
+            <td>{{books.publication}}</td>
+            <td>{{books.auther}}</td>
+            <td>{{books.booksCopies}}</td>
+            <td align="right"><img src="../../assets/BooksImage/item_pics/{{books.image}}" width="70" height="100">
+            </td>
+
+            <td>
+
+              <button type="button" class="btnn2" (click)="requestBook(books)">Request</button>
         </tbody>
         <!--Table body-->
-      
-      
+
+
       </table>

FrontEnd/Library/src/app/notification/notification.component.css

@@ -52,6 +52,8 @@ p{
 }
 .table-bordered{
     border: 1px solid;
+    margin-left: 70px;
+ margin-right: 20px;
 }
 th {
     background-color: #232524;