Added Select tag and added another section for pending tasks

This commit is contained in:
Md. Mosiur Rahman
2025-03-23 17:11:00 +06:00
parent 6374964442
commit 55f7f9eaa2
4 changed files with 67 additions and 13 deletions

View File

@@ -1,5 +1,6 @@
<div class="container"> <div class="container">
<div class="client_list"> <div class="client_list">
<h1>Todays Task</h1>
<table> <table>
<thead> <thead>
<tr> <tr>
@@ -12,7 +13,7 @@
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let client of allDeliveryTasks"> <tr *ngFor="let client of allDeliveryTasks">
<ng-container *ngIf="client.delivery_date === today && !isCompleted"> <ng-container *ngIf="client.delivery_date === today && client.delivery_status !='Completed'">
<td>{{client.client_name}}</td> <td>{{client.client_name}}</td>
<td>{{client.delivery_status}}</td> <td>{{client.delivery_status}}</td>
<td>{{client.delivery_type}}</td> <td>{{client.delivery_type}}</td>
@@ -29,15 +30,56 @@
<form action="" #clientForm="ngForm" (ngSubmit)="addNewClient()"> <form action="" #clientForm="ngForm" (ngSubmit)="addNewClient()">
<label for="clientName">Client Name</label> <label for="clientName">Client Name</label>
<input type="text" id="clientName" name="clientName" placeholder="Enter client name" [(ngModel)]="newClient.client_name" #clientName="ngModel" required> <input type="text" id="clientName" name="clientName" placeholder="Enter client name" [(ngModel)]="newClient.client_name" #clientName="ngModel" required>
<label for="clientName">Client Delivery Status</label> <div class="form-control">
<input type="text" id="clientDeliveryStatus" name="clientDeliveryStatus" placeholder="Enter delivery status" [(ngModel)]="newClient.delivery_status" #clientDeliveryStatus="ngModel" required> <label for="clientDeliveryStatus">Client Delivery Status</label>
<label for="clientName">Client Delivery Type</label> <select type="text" id="clientDeliveryStatus" name="clientDeliveryStatus" placeholder="Enter delivery status" [(ngModel)]="newClient.delivery_status" #clientDeliveryStatus="ngModel" required>
<input type="text" id="clientDeliveryType" name="clientDeliveryType" placeholder="Enter delivery type" [(ngModel)]="newClient.delivery_type" #clientDeliveryType="ngModel" required> <option value="Pending" id="pending">Pending</option>
<label for="clientName">Client Delivery Date</label> <option value="On Going" id="onGoing">On Going</option>
<option value="Completed" id="completed">Completed</option>
</select>
</div>
<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="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> <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> <button type="submit" [disabled]="clientForm.invalid">Add</button>
</form> </form>
</div> </div>
<div class="pending-cotainer">
<div class="client_list">
<h1>Pending Task</h1>
<table>
<thead>
<tr>
<th>Client Name</th>
<th>Delivery Status</th>
<th>Delivery Type</th>
<th>Delivery Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let client of allDeliveryTasks">
<ng-container *ngIf="client.delivery_date < today">
<td>{{client.client_name}}</td>
<td>{{client.delivery_status}}</td>
<td>{{client.delivery_type}}</td>
<td>{{client.delivery_date }}</td>
<td>
<button (click)="completedTask()">Completed</button>
</td>
</ng-container>
</tr>
</tbody>
</table>
</div>
</div>
</div> </div>
<!-- TODO: ADD Remarks Input -->
<!-- TODO: Add Option Selection Pattrn in Status and type Input -->

View File

@@ -45,9 +45,7 @@ export class ClientServiceComponent implements OnInit, OnDestroy {
// } // }
this.allDeliverySubscription = this.clientDeliveryService.allDelivery().subscribe(data=>{ this.allDeliverySubscription = this.clientDeliveryService.allDelivery().subscribe(data=>{
this.allDeliveryTasks = data; this.allDeliveryTasks = data;
console.log(data[0].delivery_date)
}) })
console.log(this.today)
} }
ngOnDestroy(): void { ngOnDestroy(): void {
@@ -55,7 +53,7 @@ export class ClientServiceComponent implements OnInit, OnDestroy {
} }
completedTask() { completedTask() {
this.isCompleted = true;
} }
addNewClient() { addNewClient() {

View File

@@ -31,7 +31,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="delivery"> <div class="shiftTask">
<div class="dropdown"> <div class="dropdown">
<button class="dropbtn">Shift Tasks</button> <button class="dropbtn">Shift Tasks</button>
<div class="dropdown-content"> <div class="dropdown-content">
@@ -41,7 +41,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="delivery"> <div class="clientDocument">
<div class="dropdown"> <div class="dropdown">
<button class="dropbtn">Client Documents</button> <button class="dropbtn">Client Documents</button>
<div class="dropdown-content"> <div class="dropdown-content">
@@ -51,6 +51,16 @@
</div> </div>
</div> </div>
</div> </div>
<div class="internalDocument">
<div class="dropdown">
<button class="dropbtn">Documents</button>
<div class="dropdown-content">
<ng-container *ngFor="let link of document_links">
<a href={{link.url}} target="_blank">{{ link.name }}</a>
</ng-container>
</div>
</div>
</div>
</div> </div>
</nav> </nav>
</div> </div>

View File

@@ -3,6 +3,9 @@ import { monitoring_tools_links, service_links, tools_links, shift_tasks, client
import { navLink } from '../../../shared/model/nav-link.model'; import { navLink } from '../../../shared/model/nav-link.model';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
//TODO10: Create a document list in data-ts file
@Component({ @Component({
selector: 'app-dashboard', selector: 'app-dashboard',
standalone: true, standalone: true,
@@ -16,6 +19,7 @@ export class DashboardComponent implements OnInit {
tools_links!: navLink[]; tools_links!: navLink[];
shift_tasks_links!: navLink[]; shift_tasks_links!: navLink[];
client_doc_links!: navLink[]; client_doc_links!: navLink[];
document_links!: navLink[];
ngOnInit(): void { ngOnInit(): void {