mosiur/link-manage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finished the Client-delivery COmponent, Added AG-Grid for managing table

Browse Source
This commit is contained in:
Md. Mosiur Rahman
2025-03-24 14:02:43 +06:00
parent 000ea0b72b
commit a4bddd68a1
10 changed files with 210 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/app/components/pages/client-service/client-service.component.html
View File

@@ -1,8 +1,10 @@
<div class="container">
<div class="form-container">
<form action="" #clientForm="ngForm" (ngSubmit)="addNewClient()">
<label for="clientName">Client Name</label>
<input type="text" id="clientName" name="clientName" placeholder="Enter client name" [(ngModel)]="newClient.client_name" #clientName="ngModel" required>
<div class="form-control">
<label for="clientName">Client Name</label>
<input type="text" id="clientName" name="clientName" placeholder="Enter client name" [(ngModel)]="newClient.client_name" #clientName="ngModel" required>
</div>
<div class="form-control">
<label for="clientDeliveryStatus">Client Delivery Status</label>
<select type="text" id="clientDeliveryStatus" name="clientDeliveryStatus" placeholder="Enter delivery status" [(ngModel)]="newClient.delivery_status" #clientDeliveryStatus="ngModel" required>
@@ -14,27 +16,35 @@
<div class="form-control" id="type">
<label for="clientDeliveryType">Client Delivery Type</label>
<select type="text" id="clientDeliveryType" name="clientDeliveryType" placeholder="Enter delivery type" [(ngModel)]="newClient.delivery_type" #clientDeliveryType="ngModel" required>
<option value="test">Test</option>
<option value="remove">Delivery</option>
<option value="test">Test - End</option>
<option value="termination">Termination</option>
<option value="remove">Remove VM</option>
</select>
</div>
<label for="clientDeliveryDate">Client Delivery Date</label>
<input type="date" id="clientDeliveryDate" name="clientDeliveryDate" placeholder="Enter delivery date" [(ngModel)]="newClient.delivery_date" #clientDeliveryDate="ngModel" required>
<label for="remarks">Remarks</label>
<input type="text" id="remarks" name="remarks" placeholder="Enter Remarks" [(ngModel)]="newClient.remarks" #remarks="ngModel" required>
<button type="submit" [disabled]="clientForm.invalid">Add</button>
<div class="form-control">
<label for="clientDeliveryDate">Client Delivery Date</label>
<input type="date" id="clientDeliveryDate" name="clientDeliveryDate" placeholder="Enter delivery date" [(ngModel)]="newClient.delivery_date" #clientDeliveryDate="ngModel" required>
</div>
<div class="from-control">
<label for="remarks">Remarks</label>
<input type="text" id="remarks" name="remarks" placeholder="Enter Remarks" [(ngModel)]="newClient.remarks" #remarks="ngModel" required>
</div>
<div class="form-control">
<button type="submit" [disabled]="clientForm.invalid">Add</button>
</div>
</form>
</div>
<div class="client_list today-task">
<h1>Todays Task</h1>
<table>
<!-- <table>
<thead>
<tr>
<th>Client Name</th>
<th>Delivery Status</th>
<th>Delivery Type</th>
<th>Delivery Date</th>
<th>Remarks</th>
<th>Action</th>
</tr>
</thead>
@@ -45,17 +55,23 @@
<td>{{client.delivery_status}}</td>
<td>{{client.delivery_type}}</td>
<td>{{client.delivery_date }}</td>
<td>{{ client.remarks }}</td>
<td>
<button (click)="completedTask(client)">Completed</button>
</td>
</ng-container>
</tr>
</tbody>
</table>
</table> -->
<ag-grid-angular
class="task-table"
[rowData]="filteredDeliveryTask"
[columnDefs]="colDefs" />
</div>
<div class="pending-cotainer">
<div class="client_list">
<h1>Pending Tasks</h1>
<!-- <div class="client_list">
<h1>Pending Task</h1>
<table>
<thead>
@@ -77,10 +93,14 @@
<td>
<button (click)="completedTask(client)">Completed</button>
</td>
</ng-container>
</tr>
</ng-container> -->
<!-- </tr>
</tbody>
</table>
</div>
</table> -->
<ag-grid-angular
class="task-table"
[rowData]="filteredPreviousTasks"
[columnDefs]="colDefs"
/>
</div>
</div>

57
src/app/components/pages/client-service/client-service.component.scss
View File

@@ -1,2 +1,55 @@
// TODO: Style the Input fields
// TODO: Style the Table
// 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;
}

81
src/app/components/pages/client-service/client-service.component.ts
View File

@@ -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<this.today)
})
}
@@ -45,23 +85,46 @@ export class ClientServiceComponent implements OnInit, OnDestroy {
this.allDeliverySubscription.unsubscribe();
}
/**
* Marks a task as completed by updating its status.
* Calls the service to update the status in the database.
* @param client - The delivery task to be marked as completed.
*/
completedTask(client: DeliveryModel): void {
client.delivery_status = "Completed";
this.clientDeliveryService.updateStatus(client).subscribe(response=>{
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<this.today)
this.cdr.detectChanges();
})
})
}
/**
* Adds a new client to the database.
* Calls the service to save the new client and refreshes the task list.
*/
addNewClient() {
this.clientDeliveryService.addNewClientToDB(this.newClient).subscribe(response=>{
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<this.today)
},error=>{console.log("error", error)})
})
}
}

1
src/app/components/pages/client-service/client-service.service.ts
View File

@@ -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 {

8
src/app/components/pages/dashboard/dashboard-data.ts
View File

@@ -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/"
}
]

2
src/app/components/pages/dashboard/dashboard.component.ts
View File

@@ -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({