Change Shop name in card
Aim:
To
develop a code to create a change shop name.
Code:
HTML FILE:
--- THIS IS CARD ---
<div class="row">
<div class="col-xl-3 col-sm-6" *ngFor="let work of
workspaceList; let i = index">
<div class="card text-center" id="cardheight">
<div class="card-body">
<div *ngIf="!(showTab == i)" id="shopname"> {{work.workspaceName }}</div>
----
THIS IS LOADING SPINNER ----
<div class="d-flex justify-content-center" id="iconalign">
<span *ngIf="loading[i]" class="spinner-border" role="status">
<span class="sr-only">Loading...</span></span>
</div>
------ THIS IS INPUT BOX ------
<div *ngIf="showTab == i" class="col-md-12
px-3">
<input type="text" id="lname" name="lname" [(ngModel)]="workspaceName[i]"><br><br>
</div>
----
THIS IS EYE ICON ----
<div class="card-footer bg-transparent
border-top">
<div class="contact-links d-flex font-size-20">
<div class="flex-fill">
<a href="javascript: void(0);" *ngIf="!(showTab ==
i)" ngbTooltip="view"><i class="fas fa-eye" id="view"
(click)="setworkspaceid(work.workspaceID,work.workspaceName,work.id)"></i></a>
</div>
----- THIS IS EDIT ICON -----
<div class="flex-fill">
<a href="javascript: void(0);" *ngIf="!(showTab ==
i)" ngbTooltip="edit" (click)="tabToggle(i)"><i
class='bx bxs-edit-alt' id="edit"></i></a>
----- THIS IS CANCEL ICON ----
<a href="javascript: void(0);" *ngIf="showTab == i" (click)="tabToggle(-1)"><i class="dripicons-cross"
id="cross"></i></a>
</div>
---- THIS IS DELETE ICON ----
<div class="flex-fill">
<a href="javascript: void(0);" *ngIf="!(showTab ==
i)" ngbTooltip="delete">
<i class="bx bxs-trash" id="trash" (click)="confirm(work.workspaceID,i)"></i></a>
<span (click)="tabToggle(-1)"><a href="javascript:
void(0);" *ngIf="showTab == i"> <i class="bx bx-check"
id="tik" (click)="updateconfirm(work.workspaceID,
i) "></i></a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
-
TS FILE:
ngOnInit() {
this.isloading = true;
this.user.getworkshopid().subscribe(data => {
this.isloading = false
this.workspaceList = data?.["result"];
this.workspaceList.forEach(element => {
this.workspaceName.push(element.workspaceName)
});
console.log(this.workspaceList)
})
}
setworkspaceid(workspaceID,workspaceName,id){
localStorage.setItem("workspaceID",workspaceID);
localStorage.setItem("workspaceName",workspaceName);
localStorage.setItem('id',id);
console.log(workspaceID);
console.log(workspaceName);
this.router.navigate(['/report'])
const data: TriggerOption = {
type: "workspaceName",
value: "",
show: true,
};
this.observableService.emitData(data);
}
updateshop(id, index){
this.loading[index] = true
let paylod = {
workspaceID: id,
workspaceName: this.workspaceName[index]
}
console.log(paylod)
this.user.updateshop(paylod).subscribe(data=>
{
this.loading[index] = false
this.result=data?.["result"];
console.log(data)
console.log(this.result);
this.user.getworkshopid().subscribe(data=>
{
this.workspaceList = data?.["result"];
console.log(data)
console.log(this.workspaceList)
})
},
error => {
this.loading[index] = false
console.log(error)
})
}
updateconfirm(id, index) {
Swal.fire({
title: 'Are your sure you want to change',
// text: 'You won\'t be able to revert this!',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#34c38f',
cancelButtonColor: '#f46a6a',
confirmButtonText: 'Yes'
}).then(result => {
if (result.value) {
this.updateshop(id, index);
// Swal.fire('ch', 'shop has been deleted.', 'success');
}
});
}
showTab;
tabToggle(index){
this.showTab =index;
console.log(index)
}
Output:
