add core module , and some pages

angular.json

@@ -24,12 +24,15 @@
               {
                 "glob": "**/*",
                 "input": "public"
-              }
+               }
             ],
-            "styles": [
-              "src/styles.css"
-            ],
-            "scripts": []
+          "styles": [
+          "src/styles.css",
+          "./node_modules/bootstrap/dist/css/bootstrap.min.css"
+          ],
+          "scripts": [
+          "./node_modules/bootstrap/dist/js/bootstrap.min.js"
+          ]
           },
           "configurations": {
             "production": {

package-lock.json

@@ -16,6 +16,7 @@
         "@angular/platform-browser": "^18.0.0",
         "@angular/platform-browser-dynamic": "^18.0.0",
         "@angular/router": "^18.0.0",
+        "bootstrap": "^5.2.3",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.3"
@@ -3739,6 +3740,16 @@
         "node": ">=14"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.18.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
@@ -4976,6 +4987,24 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -18,6 +18,7 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
+    "bootstrap": "^5.2.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

src/app/app-routing.module.ts

+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { LoginComponent } from './pages/login/login.component';
+import { LayoutComponent } from './pages/layout/layout.component';
+import { ProjectsComponent } from './pages/projects/projects.component';
+import { BoardComponent } from './pages/board/board.component';
+import { UsersComponent } from './pages/users/users.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'login',
+    pathMatch: "full"
+  },
+  {
+    path: 'login',
+    component: LoginComponent
+  },
+  {
+    path: '',
+    component: LayoutComponent,
+    children: [
+      {
+        path: 'projects',
+        component: ProjectsComponent
+      },
+      {
+        path: 'users',
+        component: UsersComponent
+      },
+      {
+        path: 'board',
+        component: BoardComponent
+      }
+
+    ]
+  }
+
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.ts

 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
-  standalone: true,
-  imports: [RouterOutlet],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
+  styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'PSManagementUI';
+  title = 'PSManagement';
 }

src/app/app.config.ts

 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
-import { routes } from './app.routes';
+// import { routes } from './app-routing.module';
 
-export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
-};
+// export const appConfig: ApplicationConfig = {
+//   providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+// };

src/app/app.module.ts

+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { ProjectsComponent } from './pages/projects/projects.component';
+import { BoardComponent } from './pages/board/board.component';
+import { LoginComponent } from './pages/login/login.component';
+import { LayoutComponent } from './pages/layout/layout.component';
+import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+import { UsersComponent } from './pages/users/users.component';
+import { ConfigurationService } from './core/services/configuration/configuration.service';
+import { CoreModule } from './core/core.module';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    ProjectsComponent,
+    BoardComponent,
+    LoginComponent,
+    UsersComponent,
+    LayoutComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    FormsModule,
+    CoreModule,
+    HttpClientModule
+  ],
+  providers: [
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

src/app/app.routes.ts

-import { Routes } from '@angular/router';
-
-export const routes: Routes = [];

src/app/core/core.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DataStorageService } from './services/dataStorage/data-storage.service';
+import { AuthenticationService } from './services/authentication/authentication.service';
+import { ConfigurationService } from './services/configuration/configuration.service';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ],
+  providers:[
+    DataStorageService,
+    AuthenticationService,
+    ConfigurationService
+  ]
+})
+export class CoreModule { }

src/app/core/models/authentication/authenticationResponse.ts

+export interface AuthenticationResponse {
+  userName:string;
+  firstName:string;
+  lastName:string;
+  email: string;
+  result:boolean;
+  token: string;
+ }
+  
\ No newline at end of file

src/app/core/models/authentication/loginRequest.ts

+export interface LoginRequest {
+  email: string;
+  passWord: string;
+}

src/app/core/models/authentication/registerRequest.ts

+export interface RegisterRequest {
+    userName:string;
+    firstName:string;
+    lastName:string;
+    email: string;
+    passWord: string;
+  }
+  
\ No newline at end of file

src/app/core/models/users/User.ts

+export interface User {
+    id: string;
+    name: string;
+    email: string;
+    avatarUrl: string;
+  }
+  
\ No newline at end of file

src/app/core/services/authentication/authentication.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { AuthenticationService } from './authentication.service';
+
+describe('AuthenticationService', () => {
+  let service: AuthenticationService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AuthenticationService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/core/services/authentication/authentication.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { LoginRequest } from '../../models/authentication/loginRequest';
+import { RegisterRequest } from '../../models/authentication/registerRequest';
+import { AuthenticationResponse } from '../../models/authentication/authenticationResponse';
+import { Observable } from 'rxjs';
+import { ConfigurationService } from '../configuration/configuration.service';
+import { DataStorageService } from '../dataStorage/data-storage.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthenticationService {
+
+  constructor(private http : HttpClient,private config : ConfigurationService, private dataStorage : DataStorageService) { }
+  
+  Login(loginRequest : LoginRequest ) :Observable<AuthenticationResponse>{
+  
+    return this.http
+          .post<AuthenticationResponse>(
+            this.config.getServerUrl()+ "/Authentication/Login",loginRequest)       
+  }
+  Register(registerRequest : RegisterRequest ) :Observable<AuthenticationResponse>{
+  
+    return this.http
+          .post<AuthenticationResponse>(
+            this.config.getServerUrl()+ "/Authentication/register",registerRequest)       
+  }
+
+  IsAuthenticated():Boolean{
+    if(this.dataStorage.getItem("token")){
+      return true ;
+    }else{
+      return false ;
+    }
+
+  }
+}

src/app/core/services/configuration/configuration.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { ConfigurationService } from './configuration.service';
+
+describe('ConfigurationService', () => {
+  let service: ConfigurationService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ConfigurationService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/core/services/configuration/configuration.service.ts

+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { environment } from '../../../../environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ConfigurationService {
+  private  baseUrl = environment.serverUrl ;
+
+  constructor() { }
+
+  public getServerUrl(){
+    return this.baseUrl ;
+  }
+}

src/app/core/services/dataStorage/data-storage.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { DataStorageService } from './data-storage.service';
+
+describe('DataStorageService', () => {
+  let service: DataStorageService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DataStorageService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/core/services/dataStorage/data-storage.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DataStorageService {
+
+  constructor() { }
+
+  setItem(key : string , value : string){
+      localStorage.setItem(key,value);
+  }
+  getItem(key : string ):any{
+    return localStorage.getItem(key);
+  }
+  clear(){
+    localStorage.clear();
+  }
+}

src/app/pages/board/board.component.css

+.breadcrumb-Hover:hover {
+    color: darkgrey;
+    text-decoration: underline;
+}
+
+.search-Border {
+    height: 40px;
+}
+
+.space-board-icon-hover:hover {
+    background-color: lightgrey;
+}
+
+.group-By-Font {
+    font-size: 13px;
+}
+
+.ct {
+    background-color: blue;
+    border-radius: 17px;
+    width: 34px;
+    padding: 5px;
+}
+
+.icon-CT {
+    background-color: lightgray;
+    border-radius: 17px;
+    width: 34px;
+    padding: 5px;
+}
+
+.user {
+    background-color: gray;
+    padding: 6px;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.user-selected {
+    padding: 6px;
+    cursor: pointer;
+    border-radius: 50%;
+}
+
+
+.card-Height {
+    height: 100%;
+}
+
+.card-Body-Hover {
+    background-color: #ffff;
+    padding: 6px;
+    border: 1px solid lightgray;
+    border-bottom: 1px solid gray;
+}
+
+#draggable {
+    width: 100px;
+    height: 50px;
+    background-color: #f5f5f5;
+    padding: 10px;
+    cursor: move;
+}
+
+#droppable {
+    width: 200px;
+    height: 200px;
+    background-color: #ccc;
+    margin-top: 20px;
+}
+
+#board {
+    display: flex;
+    gap: 20px;
+}
+
+.grabbable {
+    cursor: move;
+    /* fallback if grab cursor is unsupported */
+    cursor: grab;
+    cursor: -moz-grab;
+    cursor: -webkit-grab;
+}
+
+/* (Optional) Apply a "closed-hand" cursor during drag operation. */
+.grabbable:active {
+    cursor: grabbing;
+    cursor: -moz-grabbing;
+    cursor: -webkit-grabbing;
+}
+
+.column {
+    flex: 1 0 auto;
+    border: 1px solid #ccc;
+    padding: 10px;
+}
+
+.task {
+    background-color: #f5f5f5;
+    padding: 5px;
+    margin-bottom: 10px !important;
+    cursor: move;
+}
+
+.card-Body-Hover:hover {
+    background-color: rgba(238, 244, 244, 0.973);
+}
+
+.create-Hover:hover {
+    background-color: rgba(238, 244, 244, 0.973);
+    color: rgb(54, 53, 53);
+}
+
+.space-font {
+    font-size: 13px;
+}
+
+.create-Font {
+    font-size: 15px;
+}
+
+.board {
+    position: absolute;
+}
+
+.card-body {
+    background-color: #ffff !important;
+    padding: 5px;
+}
\ No newline at end of file

src/app/pages/board/board.component.html

+<div class="container-fluid pt-2">
+    <div class="row pt-5">
+        <div class="col-12">
+            <div class="d-flex justify-content-between">
+                <div>
+                    <h4>{{selectedProjectData.projectName}}</h4>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row mt-3">
+        <div class="col-12">
+            <div class="d-flex">
+                <div><input type="text" placeholder="Search Here"
+                        class="form-control ng-pristine ng-valid ng-touched">
+                </div>
+
+            </div>
+        </div>
+    </div>
+    <div class="row pt-1">
+        <div class="col" id="3" *ngFor="let staus of status">
+            <div class="card card-bg">
+                <div class="card-header border-0 py-1"> {{staus}} <span>  </span><!----></div>
+                <div class="card-body ticket-bg border" id="3"><!---->
+                    <div draggable="true" *ngFor="let ticket of filterTicket(staus)" class="card-Body-Hover m-1 rounded-1 task" >
+                        <div class="my-1 fw-bold"> {{ticket.summary}} </div>
+                        <div class="row">
+                            <div class="col-3">
+                                <p class="text-muted space-font m-0 pointer"></p>
+                            </div>
+                            <div class="col-9 text-end">
+                                <p class="text-muted space-font m-0">{{ticket.assignedTo}}
+                                </p>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-12 text-end"><span>5
+                                    hrs</span></div>
+                        </div>
+                    </div> 
+                </div>
+            </div>
+        </div>
+        
+    </div>
+     
+</div>
\ No newline at end of file

src/app/pages/board/board.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BoardComponent } from './board.component';
+
+describe('BoardComponent', () => {
+  let component: BoardComponent;
+  let fixture: ComponentFixture<BoardComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [BoardComponent]
+    });
+    fixture = TestBed.createComponent(BoardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/board/board.component.ts

+import { HttpClient } from '@angular/common/http';
+import { Component } from '@angular/core';
+import { MasterService } from '../../services/master.service';
+
+@Component({
+  selector: 'app-board',
+  templateUrl: './board.component.html',
+  styleUrls: ['./board.component.css']
+})
+export class BoardComponent {
+
+  ticketsArray: any[] = [];
+  selectedProjectData: any ;
+  status: string[]= ['To Do','In Progress','Done'];
+
+  constructor(private master: MasterService, private http: HttpClient) {
+    this.master.onProjectChange.subscribe((res: any) => {
+      debugger;
+      this.getProjectTickets(res.projectId);
+      this.selectedProjectData = res;
+    })
+    this.master.onTicketCreate.subscribe((res: any) => {
+      debugger;
+      this.getProjectTickets(this.selectedProjectData.projectId);
+    })
+  }
+
+  getProjectTickets(id: number) {
+    this.http.get('https://freeapi.miniprojectideas.com/api/Jira/GetTicketsByProjectId?projectid=' + id).subscribe((res: any) => {
+      this.ticketsArray = res.data;
+    })
+  }
+
+  filterTicket(status: string) {
+    return this.ticketsArray.filter(m=>m.status == status)
+  }
+}

src/app/pages/layout/layout.component.css

+.mynav  {
+    background-color: #0747a6!important;
+    color: #fff!important;
+}
+.content-hover:hover {
+    background-color: #033681!important;
+}
+.nav-link, .navbar-brand {
+    color: #fff!important;
+}
\ No newline at end of file

src/app/pages/layout/layout.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LayoutComponent } from './layout.component';
+
+describe('LayoutComponent', () => {
+  let component: LayoutComponent;
+  let fixture: ComponentFixture<LayoutComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [LayoutComponent]
+    });
+    fixture = TestBed.createComponent(LayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/layout/layout.component.ts

+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { MasterService } from '../../services/master.service';
+
+@Component({
+  selector: 'app-layout',
+  templateUrl: './layout.component.html',
+  styleUrls: ['./layout.component.css']
+})
+export class LayoutComponent  implements OnInit {
+  projectList: any [] = [];
+  userList: any[] = [];
+  issueTypes: string[]= ['Ticket','Defect','RnD Work'];
+  status: string[]= ['To Do','In Progress','Done'];
+  
+  ticketObj: any = {
+    "ticketId": 0,
+    "createdDate": "2023-08-18T05:58:41.065Z",
+    "summary": "",
+    "status": "",
+    "description": "",
+    "parentId": 0,
+    "storyPoint": 0,
+    "ticketGuid": "",
+    "assignedTo": 0,
+    "createdBy": 0,
+    "projectId": 0
+  }
+
+
+  constructor(private http: HttpClient, private master: MasterService) {
+    const loginData = localStorage.getItem('jiraLoginDetails');
+    if(loginData !=  null) {
+      const paserData =  JSON.parse(loginData);
+      this.ticketObj.createdBy = paserData.userId;
+    }
+  }
+
+  ngOnInit(): void {
+    this.getAllProjects();
+    this.getAllUsers();
+  }
+  setProject(obj: any) {
+    debugger;
+    this.master.onProjectChange.next(obj);
+  }
+
+  getAllProjects() {
+    this.http.get("https://freeapi.miniprojectideas.com/api/Jira/GetAllProjects").subscribe((res: any)=>{
+      this.projectList = res.data;
+      debugger;
+      this.master.onProjectChange.next( this.projectList[0]);
+    })
+  }
+  getAllUsers() {
+    this.http.get("https://freeapi.miniprojectideas.com/api/Jira/GetAllUsers").subscribe((res: any)=>{
+      this.userList = res.data;
+    })
+  }
+
+  onTicketCreate() {
+    this.http.post('https://freeapi.miniprojectideas.com/api/Jira/CreateTicket', this.ticketObj).subscribe((res: any)=>{
+      if(res.result) {
+       alert(res.message); 
+       this.master.onTicketCreate.next(true);
+      } else {
+       alert(res.message)
+      }
+   })
+  }
+
+}

src/app/pages/login/login.component.css

+.main {
+    background-image: url(/assets/bg-img.jpg);
+    height: 100vh;
+}
+
+
+/* first col */
+.authfy-panel-left {
+    background-color: rgba(38, 43, 72, 0.92);
+    color: #ffffff;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    box-shadow: 0px 3px 6px #1d2030;
+
+
+}
+
+.btn-facebook {
+    background: #3b5998;
+}
+
+.btn-twitter {
+    background: #00aced;
+    padding-right: 35px;
+}
+
+.btn-google {
+    padding-right: 23px;
+}
+
+/* second col */
+.remember-box {
+    padding-right: 69px;
+}
+
+.btn-lg {
+    margin-right: 90px;
+}
+
+.authfy-login {
+    padding-left: 60px;
+}
+
+.authfy-heading {
+    margin-right: 64px;
+    padding-top: 25px;
+}
+
+.main-row {
+    transform: translate(20%, 50%);
+}
+
+.form-group {
+    box-sizing: border-box;
+    box-shadow: skyblue;
+
+}
+
+.eyeicon {
+    position: absolute;
+    margin-left: 320px;
+    cursor: pointer;
+}
+
+
+

src/app/pages/login/login.component.html

+<div class="main">
+    <div class="container-fluid">
+        <div class="row" style="padding-left: 20%;padding-top: 10%;">
+            <div class="col-sm-8 col-lg-4 col-md-4 authfy-panel-left p-2 pt-5 " style=" height: auto;">
+                <div class="brand-col">
+                    <div class="headline">
+                        <div class="brand-logo">
+                            <img src="/assets/favicon.ico" style=" width: 100%;max-width: 80px;max-height: 80px;"
+                                alt="brand-logo">
+                                <h5 class="pt-2 text-center" > Projects Status Management</h5>
+
+                        </div>
+                        <p class="pt-2 text-center text-secondary">a Project Status Management Application.</p>
+                        <p class=" text-center text-secondary">Manage and track your project.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-7 col-lg-6 col-md-6 p-5 authfy-panel-right" style="background-color:white ;">
+                <div class="authfy-login">
+                    <div class="authfy-panel panel-login text-center active">
+                        <div class="authfy-heading pe-4">
+                            <h3 class="auth-title">Login to your account</h3>
+                        </div>
+                        <div class="row"  >
+                            <div class="col-xs-12 col-sm-12">
+                                <form name="loginForm" class="loginForm" action="#" method="POST" >
+                                    <div class="form-group">
+                                        <input type="email"  [(ngModel)]="loginRequest.email" class="form-control email my-2" name="emailId" required
+                                            placeholder="Email address" style="width: 80%;">
+                                    </div>
+                                    <div class="form-group">
+                                        <div class="pwdMask">
+                                            <span class="d-flex">
+                                                <input type="text" [(ngModel)]="loginRequest.passWord" class="form-control password" name="password"
+                                                    placeholder="Password" style="width: 80%;">
+
+                                            </span>
+                                        </div>
+
+                                    </div>
+                                    <div class="row remember-row d-flex pt-4 me-5">
+                                       
+                                        <div class="col-xs-6 col-sm-6">
+                                            <p class="forgotPwd">
+                                                <a class="lnk-toggler" data-panel=".panel-forgot">Forgot
+                                                    password?</a>
+                                            </p>
+                                        </div>
+                                    </div>
+                                    <div class="form-group">
+                                        <button class="btn btn-lg btn-primary btn-block " (click)="onLogin()" type="button"
+                                            style="width: 80%;">
+                                            
+                                            Login 
+                                        </button>
+
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/pages/login/login.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LoginComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/login/login.component.ts

+import { HttpClient } from '@angular/common/http';
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { LoginRequest } from '../../core/models/authentication/loginRequest';
+import { ConfigurationService } from '../../core/services/configuration/configuration.service';
+import { AuthenticationService } from '../../core/services/authentication/authentication.service';
+import { AuthenticationResponse } from '../../core/models/authentication/authenticationResponse';
+import { DataStorageService } from '../../core/services/dataStorage/data-storage.service';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.css'
+})
+export class LoginComponent {
+  loginRequest:LoginRequest = {
+    email :"",
+    passWord:""
+  }
+
+  constructor(private dataStorage : DataStorageService,private router: Router,private authService :AuthenticationService ) {
+  
+  }
+
+
+  onLogin() {
+    this.authService
+          .Login(this.loginRequest)
+          .subscribe((res:AuthenticationResponse)=>{
+          debugger;
+          if(res.email) {
+            this.dataStorage.setItem('userDetails', JSON.stringify(res));
+            this.dataStorage.setItem('token', JSON.stringify(res.token));
+            
+            this.router.navigateByUrl('/board');
+
+          } else {
+            //alert(res.message)
+          }
+        },(err)=>console.log(err))
+       
+      }
+       
+}

src/app/pages/projects/projects.component.html

+<div class="row">
+    <div class="col-12 text-end">
+        <button class="btn btn-success btn-sm"  data-bs-toggle="modal" data-bs-target="#myModal">Create New Project</button>
+    </div>
+</div>
+<div class="row">
+    <div class="col-3" *ngFor="let project of projectList">
+        <div class="card">
+            <div class="card-header bg-success">
+                {{project.shortName}}
+            </div>
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        {{project.projectName}}
+                    </div>
+                    <div class="col-6">
+                        {{project.createdDate | date:'dd-MMM-yy'}}
+                    </div>
+                </div>
+              
+            </div>
+            <div class="card-footer">
+                <div class="row">
+                    <div class="col-6">
+                        <button class="btn btn-success btn-sm">Edit</button>
+                    </div>
+                    <div class="col-6">
+                        <button class="btn btn-danger btn-sm">Delete</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal" id="myModal">
+    <div class="modal-dialog">
+      <div class="modal-content"> 
+        <div class="modal-header">
+          <h4 class="modal-title">New Project</h4>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+        </div> 
+        <div class="modal-body">
+          <div class="row">
+            <div class="col-3">
+                <label for="">Short Name</label>
+                <input type="text" name="shortName" class="form-control" [(ngModel)]="projectObj.shortName">
+            </div>
+            <div class="col-5">
+                <label for="">Full  Name</label>
+                <input type="text" name="projectName" class="form-control" [(ngModel)]="projectObj.projectName">
+            </div>
+          </div>
+        </div> 
+        <div class="modal-footer">
+          <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-danger" (click)="onSave()">Save</button>
+        </div> 
+      </div>
+    </div>
+  </div>
\ No newline at end of file

src/app/pages/projects/projects.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectsComponent } from './projects.component';
+
+describe('ProjectsComponent', () => {
+  let component: ProjectsComponent;
+  let fixture: ComponentFixture<ProjectsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProjectsComponent]
+    });
+    fixture = TestBed.createComponent(ProjectsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/projects/projects.component.ts

+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-projects',
+  templateUrl: './projects.component.html',
+  styleUrls: ['./projects.component.css']
+})
+export class ProjectsComponent implements OnInit{
+
+  projectList: any [] = [];
+  projectObj: any = {
+    "projectId": 0,
+    "projectName": "",
+    "shortName": "",
+    "createdDate": new Date()
+  }
+
+  constructor(private http: HttpClient) {
+
+  }
+
+  ngOnInit(): void {
+    this.getAllProjects();
+  }
+
+  getAllProjects() {
+    this.http.get("https://freeapi.miniprojectideas.com/api/Jira/GetAllProjects").subscribe((res: any)=>{
+      this.projectList = res.data;
+    })
+  }
+  onSave() {
+    this.http.post("https://freeapi.miniprojectideas.com/api/Jira/CreateProject",this.projectObj).subscribe((res: any)=>{
+       if(res.result) {
+        alert(res.message);
+        this.getAllProjects();
+       } else {
+        alert(res.message)
+       }
+    })
+  }
+}

src/app/pages/users/users.component.html

+<div class="row">
+    <div class="col-12 text-end">
+        <button class="btn btn-success btn-sm"  data-bs-toggle="modal" data-bs-target="#myModal">Create New User</button>
+    </div>
+</div>
+<div class="row">
+    <div class="col-3" *ngFor="let project of userList">
+        <div class="card">
+            <div class="card-header bg-success">
+                {{project.emailId}}
+            </div>
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-6">
+                        {{project.fullName}}
+                    </div>
+                    <div class="col-6">
+                        {{project.password }}
+                    </div>
+                </div>
+              
+            </div>
+            <div class="card-footer">
+                <div class="row">
+                    <div class="col-6">
+                        <button class="btn btn-success btn-sm">Edit</button>
+                    </div>
+                    <div class="col-6">
+                        <button class="btn btn-danger btn-sm">Delete</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal" id="myModal">
+    <div class="modal-dialog">
+      <div class="modal-content"> 
+        <div class="modal-header">
+          <h4 class="modal-title">New Project</h4>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+        </div> 
+        <div class="modal-body">
+          <div class="row">
+            <div class="col-6">
+                <label for="">EmailId</label>
+                <input type="text" name="emailId" class="form-control" [(ngModel)]="userObj.emailId">
+            </div>
+            <div class="col-6">
+                <label for="">Password</label>
+                <input type="text" name="password" class="form-control" [(ngModel)]="userObj.password">
+            </div>
+          </div>
+          <div class="row"> 
+            <div class="col-8">
+                <label for="">Full  Name</label>
+                <input type="text" name="projectName" class="form-control" [(ngModel)]="userObj.fullName">
+            </div>
+          </div>
+        </div> 
+        <div class="modal-footer">
+          <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-danger" (click)="onSave()">Save</button>
+        </div> 
+      </div>
+    </div>
+  </div>
\ No newline at end of file

src/app/pages/users/users.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UsersComponent } from './users.component';
+
+describe('UsersComponent', () => {
+  let component: UsersComponent;
+  let fixture: ComponentFixture<UsersComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [UsersComponent]
+    });
+    fixture = TestBed.createComponent(UsersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/users/users.component.ts

+import { HttpClient } from '@angular/common/http';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-users',
+  templateUrl: './users.component.html',
+  styleUrls: ['./users.component.css']
+})
+export class UsersComponent {
+
+  userList: any [] = [];
+  userObj: any = {
+    "userId": 0,
+    "emailId": "string",
+    "fullName": "string",
+    "password": "string"
+  }
+
+  constructor(private http: HttpClient) {
+
+  }
+
+  ngOnInit(): void {
+    this.getAllUsers();
+  }
+
+  getAllUsers() {
+    this.http.get("https://freeapi.miniprojectideas.com/api/Jira/GetAllUsers").subscribe((res: any)=>{
+      this.userList = res.data;
+    })
+  }
+  onSave() {
+    this.http.post("https://freeapi.miniprojectideas.com/api/Jira/CreateUser",this.userObj).subscribe((res: any)=>{
+       if(res.result) {
+        alert(res.message);
+        this.getAllUsers();
+       } else {
+        alert(res.message)
+       }
+    })
+  }
+}

src/app/services/master.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { MasterService } from './master.service';
+
+describe('MasterService', () => {
+  let service: MasterService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MasterService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/master.service.ts

+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MasterService {
+
+  public onProjectChange= new Subject();
+  public onTicketCreate= new Subject();
+  constructor() { }
+}

src/environments/environment.prod.ts

+export const environment = {
+  production: true,
+  firebase: {
+    apiKey: 'YOUR_API_KEY',
+    authDomain: 'YOUR_AUTH_DOMAIN',
+    projectId: 'YOUR_PROJECT_ID',
+    storageBucket: 'YOUR_STORAGE_BUCKET',
+    messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
+    appId: 'YOUR_APP_ID',
+    measurementId: 'YOUR_MEASUREMENT_ID',
+  },
+  serverUrl: 'YOUR_PRODUCTION_SERVER_URL',
+};

src/environments/environment.ts

+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false,
+  serverUrl: 'https://localhost:5001/api',
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>PSManagementUI</title>
+  <title>PSManagement</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

src/main.ts

 import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
-import { AppComponent } from './app/app.component';
+import { AppModule } from './app/app.module';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-bootstrapApplication(AppComponent, appConfig)
-  .catch((err) => console.error(err));
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));
\ No newline at end of file