diff --git a/backend-server/src/index.ts b/backend-server/src/index.ts index a8d22d6..33f2ae3 100644 --- a/backend-server/src/index.ts +++ b/backend-server/src/index.ts @@ -285,8 +285,8 @@ app.put("/api/delivery/update/:id", async(req, res)=> { res.status(200).send("Delivery Type Updated") }) -//TODO: FIx the file structure -//TODO: delivery Delete +//TODO1: FIx the file structure +//TODO2: delivery Delete const PORT = 3000; app.listen(PORT,()=>{ diff --git a/package-lock.json b/package-lock.json index d706c2f..b98a433 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,8 @@ "@angular/platform-browser": "^18.2.0", "@angular/platform-browser-dynamic": "^18.2.0", "@angular/router": "^18.2.0", + "ag-grid-angular": "^33.1.1", + "ag-grid-community": "^33.1.1", "express": "^4.21.1", "ngx-clipboard": "^16.0.0", "rxjs": "~7.8.0", @@ -4769,6 +4771,35 @@ "node": ">=8.9.0" } }, + "node_modules/ag-charts-types": { + "version": "11.1.1", + "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-11.1.1.tgz", + "integrity": "sha512-bRmUcf5VVhEEekhX8Vk0NSwa8Te8YM/zchjyYKR2CX4vDYiwoohM1Jg9RFvbIhVbLC1S6QrPEbx5v2C6RDfpSA==", + "license": "MIT" + }, + "node_modules/ag-grid-angular": { + "version": "33.1.1", + "resolved": "https://registry.npmjs.org/ag-grid-angular/-/ag-grid-angular-33.1.1.tgz", + "integrity": "sha512-6U0oM4ofcXB1q318dYkWnsFuz6Ne2aKZ9E8A+6IPsx5/9UaF9VlBaA2hIlKXDf2O1JPdoO6gnkm81OAyVu81wQ==", + "license": "MIT", + "dependencies": { + "ag-grid-community": "33.1.1", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": ">= 17.0.0", + "@angular/core": ">= 17.0.0" + } + }, + "node_modules/ag-grid-community": { + "version": "33.1.1", + "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-33.1.1.tgz", + "integrity": "sha512-CNubIro0ipj4nfQ5WJPG9Isp7UI6MMDvNzrPdHNf3W+IoM8Uv3RUhjEn7xQqpQHuu6o/tMjrqpacipMUkhzqnw==", + "license": "MIT", + "dependencies": { + "ag-charts-types": "11.1.1" + } + }, "node_modules/agent-base": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz", diff --git a/package.json b/package.json index 4a89e43..489f085 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,8 @@ "@angular/platform-browser": "^18.2.0", "@angular/platform-browser-dynamic": "^18.2.0", "@angular/router": "^18.2.0", + "ag-grid-angular": "^33.1.1", + "ag-grid-community": "^33.1.1", "express": "^4.21.1", "ngx-clipboard": "^16.0.0", "rxjs": "~7.8.0", diff --git a/src/app/components/pages/client-service/client-service.component.html b/src/app/components/pages/client-service/client-service.component.html index cd91ae2..35c7724 100644 --- a/src/app/components/pages/client-service/client-service.component.html +++ b/src/app/components/pages/client-service/client-service.component.html @@ -1,8 +1,10 @@
- - +
+ + +
- + +
- - - - - +
+ + +
+
+ + +
+
+ +

Todays Task

- + +
-
+

Pending Tasks

+ + +
diff --git a/src/app/components/pages/client-service/client-service.component.scss b/src/app/components/pages/client-service/client-service.component.scss index 9331b72..304369d 100644 --- a/src/app/components/pages/client-service/client-service.component.scss +++ b/src/app/components/pages/client-service/client-service.component.scss @@ -1,2 +1,55 @@ -// TODO: Style the Input fields -// TODO: Style the Table \ No newline at end of file +// TODO1: Style the Input fields +// TODO2: Style the Table +@import "../../../shared/scss/colors.scss"; + +.container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding-top: 5rem; + padding-left: 15rem; + position: relative; +} + +.container div { + padding-top: 0.7rem; +} + +// form-container css +.form-container { + position: absolute; + left: 3rem; + top: 5rem; +} + +form, form div { + display: flex; + flex-direction: column; +} + +.form-control { + margin-bottom: 1rem; +} + +input, select { + border-radius: 10px; +} + +button { + margin-top: 0.5rem; +} + +// table-container css +.task-table { + height: 300px; + width: 70rem; +} + +h1 { + text-align: center; +} + +.pending-cotainer h1 { + color: $danger; +} \ No newline at end of file diff --git a/src/app/components/pages/client-service/client-service.component.ts b/src/app/components/pages/client-service/client-service.component.ts index 42eaa9a..8b9ca52 100644 --- a/src/app/components/pages/client-service/client-service.component.ts +++ b/src/app/components/pages/client-service/client-service.component.ts @@ -4,40 +4,80 @@ import { ClientDeliveryService } from './client-service.service'; import { DeliveryModel } from './client-service.model'; import { Subscription } from 'rxjs'; import { FormsModule } from '@angular/forms'; +import { AgGridAngular } from 'ag-grid-angular'; // Angular Data Grid Component +import type { ColDef } from 'ag-grid-community'; // Column Definition Type Interface +import { ChangeDetectorRef } from '@angular/core'; + + -// ############################################### -// TODO: Client-Service -// Hide the Full Task if the isCompleted Field is true -// Add button for update @Component({ selector: 'app-client-service', standalone: true, - imports: [CommonModule, FormsModule], + imports: [CommonModule, FormsModule, AgGridAngular], templateUrl: './client-service.component.html', styleUrl: './client-service.component.scss' }) export class ClientServiceComponent implements OnInit, OnDestroy { + // Define the date variables date = new Date(); day = String(this.date.getDate()).padStart(2,'0'); month = String(this.date.getMonth()+1).padStart(2,'0'); year = this.date.getFullYear(); + + // Formate todays date in YYYY-MM-DD today = this.year + "-" + this.month +"-"+ this.day; - isCompleted= false; + + // Array to store all delivery tasks allDeliveryTasks!: DeliveryModel[]; + filteredDeliveryTask!: DeliveryModel[]; + filteredPreviousTasks!: DeliveryModel[]; + + // Object to hold data for a new client newClient: DeliveryModel = new DeliveryModel() + + // Subscription object to manage observable subscriptions allDeliverySubscription!: Subscription; - - constructor(private clientDeliveryService: ClientDeliveryService){} + // ColDef + colDefs: ColDef[] = [ + { field: 'client_name', headerName: 'Client Name', sortable: true, filter: true }, + { field: 'delivery_status', headerName: 'Delivery Status', sortable: true, filter: true }, + { field: 'delivery_type', headerName: 'Delivery Type', sortable: true, filter: true }, + { field: 'delivery_date', headerName: 'Delivery Date', sortable: true, filter: true }, + { field: 'remarks', headerName: 'Remarks', sortable: true, filter: true }, + { headerName: 'Action', + cellRenderer: (params: any) => { + // Create the button directly and return it as HTML + const button = document.createElement('button'); + button.innerText = 'Complete'; + + // Add a click event listener to handle the click + button.addEventListener('click', () => { + this.completedTask(params.data); // Call the completedTask method + }); + + return button; } + } + ] + + constructor(private clientDeliveryService: ClientDeliveryService, private cdr: ChangeDetectorRef){} + + /** + * Lifecycle hook that runs when the component initializes. + * Fetches all delivery tasks from the service. + */ ngOnInit(): void { this.allDeliverySubscription = this.clientDeliveryService.allDelivery().subscribe(data=>{ this.allDeliveryTasks = data; + + this.filteredDeliveryTask = this.allDeliveryTasks.filter(tasks=>tasks.delivery_status!= "Completed" && tasks.delivery_date===this.today) + this.filteredPreviousTasks = this.allDeliveryTasks.filter(tasks=>tasks.delivery_status!= "Completed" && tasks.delivery_date{ console.log(response) + + // Refresh the delivery tasks list after adding a new client this.clientDeliveryService.allDelivery().subscribe(data=>{ this.allDeliveryTasks = data; + this.filteredDeliveryTask = this.allDeliveryTasks.filter(tasks=>tasks.delivery_status!= "Completed" && tasks.delivery_date=== this.today) + this.filteredPreviousTasks = this.allDeliveryTasks.filter(tasks=>tasks.delivery_status!= "Completed" && tasks.delivery_date{ console.log("response", response); + + // Reset the newClient object after adding a new entry this.newClient = new DeliveryModel(); + + // Refresh the delivery tasks list after adding a new client this.clientDeliveryService.allDelivery().subscribe(data=>{ this.allDeliveryTasks = data; - },error=>{console.log("error", error)}) + this.filteredDeliveryTask = this.allDeliveryTasks.filter(tasks=>tasks.delivery_status!= "Completed" && tasks.delivery_date=== this.today) + this.filteredPreviousTasks = this.allDeliveryTasks.filter(tasks=>tasks.delivery_status!= "Completed" && tasks.delivery_date{console.log("error", error)}) }) } + } diff --git a/src/app/components/pages/client-service/client-service.service.ts b/src/app/components/pages/client-service/client-service.service.ts index 3cae1d0..3ecc40b 100644 --- a/src/app/components/pages/client-service/client-service.service.ts +++ b/src/app/components/pages/client-service/client-service.service.ts @@ -8,7 +8,6 @@ import { DELIVERY_CREATE_URL, DELIVERY_UPDATE_URL, DELIVERY_URL } from "../../.. providedIn: 'root' }) -//TODO: change the URI of the Delivery API after Full development export class ClientDeliveryService { diff --git a/src/app/components/pages/dashboard/dashboard-data.ts b/src/app/components/pages/dashboard/dashboard-data.ts index a0c5106..40bd158 100644 --- a/src/app/components/pages/dashboard/dashboard-data.ts +++ b/src/app/components/pages/dashboard/dashboard-data.ts @@ -75,6 +75,14 @@ export const service_links: navLink[] =[ { "name" : "FortiAnalyzer", "url" : "https://118.67.209.115/p/login/" + }, + { + "name" : "Observium", + "url" : "http://observium.brilliant.com.bd/", + }, + { + "name" : "smokeping", + "url" : "http://103.209.42.218:10180/smokeping/" } ] diff --git a/src/app/components/pages/dashboard/dashboard.component.ts b/src/app/components/pages/dashboard/dashboard.component.ts index fa405ac..6ff1480 100644 --- a/src/app/components/pages/dashboard/dashboard.component.ts +++ b/src/app/components/pages/dashboard/dashboard.component.ts @@ -3,7 +3,7 @@ import { monitoring_tools_links, service_links, tools_links, shift_tasks, client import { navLink } from '../../../shared/model/nav-link.model'; import { CommonModule } from '@angular/common'; -//TODO10: Create a document list in data-ts file +//TODO3: Create a document list in data-ts file @Component({ diff --git a/src/main.ts b/src/main.ts index 35b00f3..fe09791 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,6 +1,10 @@ import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from './app/app.config'; import { AppComponent } from './app/app.component'; +import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; + + +ModuleRegistry.registerModules([AllCommunityModule]); bootstrapApplication(AppComponent, appConfig) .catch((err) => console.error(err));