Notes

@ViewChildren('titleWrapper, descriptionWrapper, contentWrapper') wrappers!: QueryList<ElementRef>;

// To make the output fields editable.
editHandler(field: string): void {
this.editStatus[field] = true;

setTimeout(() => {
const wrapper = this.wrappers.find((el) => el.nativeElement.getAttribute('contentEditable') === 'true');
wrapper?.nativeElement.focus();
}, 100);
}

// Updating title and content with edited data.
saveData(event: FocusEvent, field: string): void {
const target = event.target as HTMLElement;
const updatedContent = target.innerText;
console.log(`Updated ${field}:`, updatedContent);
if (field === 'title') {
this.details.title = this.details.title ?? []; // Ensuring title is defined
this.details.title[this.refreshCount] = updatedContent;
} else if (field === 'description') {
this.details.description = updatedContent;
} else if (field === 'content') {
this.details.content = updatedContent;
}
}

// To save all editing enabled output fields.
saveAll() {
for (const field in this.editStatus) {
if (this.editStatus.hasOwnProperty(field)) {
this.editStatus[field] = false;
}
}
this._snackBar.open('Saved Successfully', '', {
duration: 2000
});
console.log(this.details)
}

// Method to check if any key in editStatus is true
isAnyEditStatusTrue(): boolean {
return Object.values(this.editStatus).some(status => status);
}

@if(details.title?.length !== 0){
<div class="d-flex justify-space-between align-items-center">
<h3 class="title">Title</h3>
<div class="d-flex justify-content-center align-items-center icon-group">
<a type="button" (click)="editHandler('title')" [class.disabled]="editStatus['title']">
<img src="./assets/edit-refresh.svg" alt="Edit" class="update-icon edit" />
</a>
<a type="button" (click)="refreshHandler('title', 'glossary')">
<img src="./assets/edit-refresh.svg" alt="Refresh" class="update-icon refresh" />
</a>
<!-- @if(closeStatus) { <a type="button" (click)="closeFullScreen()"
class="cursor-pointer position-absolute top-n5 right-0"><img class="update-icon"
src="./assets/close-01.svg" alt="close fullscreen" /></a>
} -->
</div>
</div>
<div [attr.contentEditable]="editStatus['title']" #titleWrapper tabindex="0" class="bg-white p-1 output-card"
(blur)="saveData($event,'title')" *ngIf="!titleLoading && !errorMessageForTitle">
{{details.title?.[refreshCount]}}
</div>
}
@if(details.description?.length !== 0){
<div class="d-flex justify-space-between align-items-center">
<h3 class="description">Description</h3>
<div class="d-flex justify-content-center align-items-center icon-group">
<a type="button" (click)="editHandler('description')" [class.disabled]="editStatus['description']">
<img src="./assets/edit-refresh.svg" alt="Edit" class="update-icon edit" />
</a>
<a type="button" (click)="refreshHandler('description', 'glossary')">
<img src="./assets/edit-refresh.svg" alt="Refresh" class="update-icon refresh" />
</a>
</div>
</div>
<div [attr.contentEditable]="editStatus['description']" #descriptionWrapper tabindex="0" class="bg-white p-1 output-card"
(blur)="saveData($event,'description')" *ngIf="!descriptionLoading && !errorMessageForDescription">
{{details.description?.[refreshCount]}}
</div>
}
@if(details.content !== ''){
<div class="d-flex justify-space-between align-items-center mt-1">
<h3 class="title">AI Generated Content</h3>
<div class="d-flex justify-content-center align-items-center icon-group">
<a type="button" (click)="editHandler('content')" [class.disabled]="editStatus['content']">
<img src="./assets/edit-refresh.svg" alt="Edit" class="update-icon edit" />
</a>
<a type="button" (click)="refreshHandler('content', 'glossary')">
<img src="./assets/edit-refresh.svg" alt="Refresh" class="update-icon refresh" />
</a>
</div>
</div>
<div [attr.contentEditable]="editStatus['content']" #contentWrapper tabindex="0"
class="bg-white p-1 output-card" (blur)="saveData($event, 'content')"
*ngIf="!contentLoading && !errorMessageForContent">
{{details.content}}
</div>
}