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

Added the edit button

Browse Source
This commit is contained in:
Mosiur Rahman
2024-12-22 10:52:31 +06:00
committed by mosiur rahman
parent 1f43c54bfc
commit 50a7a1b143
4 changed files with 75 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/app/components/pages/shift-update/shift-update.component.html
View File

@@ -12,23 +12,43 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let updateData of updateDataList; let i = index" (click)="toggleRow(i)">
<td>{{updateData.Date}}</td>
<td>{{updateData.Details | shorten:getRowNumber(i)}}</td>
<td>{{updateData.Remarks | shorten:getRowNumber(i)}}</td>
<td>{{updateData.Sales_Concern}}</td>
<td>{{updateData.Reference | shorten:getRowNumber(i)}}</td>
<td>{{updateData.Handler}}</td>
<td>{{updateData.Status}}</td>
<td class="actions">
<button (click)="onComplete(updateData)" class="complete">
<i class="bi bi-check-lg"></i>
</button>
<button (click)="onDelete(updateData)" class="delete">
<i class="bi bi-x-lg"></i>
</button>
</td>
</tr>
<ng-container *ngFor="let updateData of updateDataList; let i = index" >
<ng-container *ngIf="editIndex!==i">
<tr (click)="toggleRow(i)">
<td>{{updateData.Date}}</td>
<td>{{updateData.Details | shorten:getRowNumber(i)}}</td>
<td>{{updateData.Remarks | shorten:getRowNumber(i)}}</td>
<td>{{updateData.Sales_Concern}}</td>
<td>{{updateData.Reference | shorten:getRowNumber(i)}}</td>
<td>{{updateData.Handler}}</td>
<td>{{updateData.Status}}</td>
<td class="actions">
<button (click)="onComplete(updateData)" class="complete">
<i class="bi bi-check-lg"></i>
</button>
<button (click)="onDelete(updateData)" class="delete">
<i class="bi bi-x-lg"></i>
</button>
</td>
<td>
<button (click)="onEdit(i)" class="edit">
<i class="bi bi-pencil"></i>
</button>
</td>
</tr>
</ng-container>
<ng-container *ngIf="editIndex===i">
<td class="edit-input"><input type="text" [(ngModel)]="updateData.Date"></td>
<td class="edit-input"><textarea name="text" [(ngModel)]="updateData.Details" id="">updateData.Details</textarea></td>
<td class="edit-input"><input type="text" [(ngModel)]="updateData.Remarks"></td>
<td class="edit-input"><input type="text" [(ngModel)]="updateData.Sales_Concern"></td>
<td class="edit-input"><input type="text" [(ngModel)]="updateData.Reference"></td>
<td class="edit-input"><input type="text" [(ngModel)]="updateData.Handler"></td>
<td class="edit-input"><input type="text" [(ngModel)]="updateData.Status"></td>
<td><button (click)="onEditSave()">Save</button></td>
<td><button (click)="onCancel()" >Cancel</button></td>
</ng-container>
</ng-container>
</tbody>
</table>
</div>

20
src/app/components/pages/shift-update/shift-update.component.scss
View File

@@ -94,3 +94,23 @@ td {
background-color: darken($danger, 20);
}
}
.edit{
background-color: yellowgreen;
border: none;
height: 2rem;
width: 2.5rem;
border-radius: 10px;
margin-top: 5px;
&:hover {
background-color: darken(yellowgreen, 20);
}
}
.edit-input {
input{
max-width: 100px;
}
}

18
src/app/components/pages/shift-update/shift-update.component.ts
View File

@@ -7,11 +7,12 @@ import { InputFormComponent } from "../../../shared/components/input-form/input-
import { Update } from '../../../shared/model/update.model';
import { CommonModule } from '@angular/common';
import { ShortenPipe } from '../../../shared/pipe/shorten.pipe';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-shift-update',
standalone: true,
imports: [TitleComponent, InputFormComponent, CommonModule, ShortenPipe],
imports: [TitleComponent, InputFormComponent, CommonModule, ShortenPipe, FormsModule],
templateUrl: './shift-update.component.html',
styleUrl: './shift-update.component.scss',
providers: [UpdateService]
@@ -21,7 +22,8 @@ export class ShiftUpdateComponent implements OnInit, OnDestroy {
updateDataList!: Update[];
updateListSubscription!: Subscription;
todayDate!: String;
editMode = false;
editIndex: number | null = null;
constructor(private updateService: UpdateService) {}
@@ -78,6 +80,9 @@ onDelete(data: any) {
})
}
onEdit(index: number) {
this.editIndex = index;
}
// clickToAdd(){
// const test_update: Update = {
// id: "",
@@ -96,6 +101,15 @@ onDelete(data: any) {
// })
// }
onEditSave() {
//
}
onCancel()
{
this.editIndex = null;
}
private fetchUpdates(): void {
this.updateService.allUpdate().subscribe((update) => {
this.updateDataList = update;

3
src/app/shared/components/input-form/input-form.component.scss
View File

@@ -51,8 +51,9 @@
.toggle{
position: fixed;
right: 2.5rem;
right: 2rem;
bottom: 0;
z-index: 100;
}
i {