A angular component to show detail information of an entry and to edit its content.

EntryDetailInfoComponent.js

import { Component, OnDestroy, OnInit } from '@angular/core';
import { EntryService } from '../entry.service';
import { EntrySelectorService } from '../../entry-selector/entry-selector.service';
import { Entry } from '../../../../core/models/entry.model';
import { Subscription } from 'rxjs/Subscription';
import { FormBuilder, FormGroup } from '@angular/forms';
import { FuseUtils } from '../../../../core/fuseUtils';
import { fuseAnimations } from '../../../../core/animations';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import { EntryTag } from '../../../../core/models/entry-tag.model';
import { inspect } from 'util';
import { EntrySelectorItem } from '../../../../core/models/entry-selector.model';
import { CategoryService } from '../../../../core/services/category.service';
import { ObservationLookupService } from '../../../../core/services/observation-lookup.service';
import { LimitationLookupService } from '../../../../core/services/limitation-lookup.service';
import { CannedNoteLookupService } from '../../../../core/services/canned-note.service';
import { DescriptionLookupService } from '../../../../core/services/description-lookup.service';
import { Router, ActivatedRoute } from '@angular/router';
import { DataService } from '../../../../core/services/data.service';
import { Subcategory } from '../../../../core/models/subcategory.model';
import { SubcategoryService } from '../../../../core/services/subcategory.service';
import { LanguageService } from '../../../../core/services/language.service';
import { AProLocation } from '../../../../core/models/apro-location.model';
import { EntryLocation } from '../../../../core/models/entry-location.model';
import { SubcategoryDescriptionService } from '../../../../core/services/subcategory-description.service';
import { SeverityService } from '../../../../core/services/severity.service';
import { Severity } from '../../../../core/models/severity.model';
import { MatDialog } from '@angular/material';
import { FuseConfirmDialogComponent } from '../../../../core/components/confirm-dialog/confirm-dialog.component';

@Component({
    selector: 'apro-entry-details',
    templateUrl: './entry-details.component.html',
    styleUrls: ['./entry-details.component.scss'],
    animations: fuseAnimations
})
export class EntryDetailInfoComponent implements OnInit, OnDestroy {
    entry: Entry;
    locations: AProLocation[];
    tags: EntryTag[];
    formType: string;
    entryForm: FormGroup;

    step = 0;
    substep = 0;
    searchInput;
    onFormChange: any;

    onCurrentEntryChanged: Subscription;
    onTagsChanged: Subscription;
    onNewEntryClicked: Subscription;
    onEntryUpdated: Subscription;

    currentEntrySelectorItem: EntrySelectorItem;

    showAddLocation: boolean = false;
    selectedLocation: AProLocation;
    selectedSeverity: Severity;

    constructor(
        private entryService: EntryService,
        private formBuilder: FormBuilder,
        private entrySelectorService: EntrySelectorService,
        private categoryService: CategoryService,
        private router: Router,
        private dataService: DataService,
        private subcategoryService: SubcategoryService,
        private descriptionLookupService: DescriptionLookupService,
        private languageService: LanguageService,
        private subcategoryDescriptionService: SubcategoryDescriptionService,
        private severityService: SeverityService,
        public dialog: MatDialog,
    ) {

    }

    ngOnInit() {
        // Subscribe to update the current entry
        this.onCurrentEntryChanged = this.entryService.onCurrentEntryChanged.subscribe(([entry, formType]) => {
            if (entry && formType === 'edit') {
                this.formType = 'edit';
                this.entry = entry;
                this.entry.tags = entry.tags;
                this.entryForm = this.createEntryForm();
                this.onFormChange = this.entryForm.valueChanges.debounceTime(500).distinctUntilChanged().subscribe(data => {
                    //this.inspectionService.updateInspection(data);
                });

                //console.log("entry is ", JSON.stringify(entry))

                this.entryService.getEntryLocations(entry).then((locations: AProLocation[]) => {
                //    console.log("This.locations ", JSON.stringify(locations))
                    this.locations = locations;
                }, (error) => {
                    this.locations = [];
                }); 

                if(this.severityService.severities.length > 0){
                    this.setSelectedSeverity(entry)
                }else{
                    this.severityService.onSeveritiesChanged.subscribe(
                        (data)=>{
                            this.setSelectedSeverity(entry)
                        },
                        (error)=>{
                            console.log("Error while fetching severity services")
                        }
                    )
                }
            }
        });

        // Subscribe to update on tag change
        this.onTagsChanged =
            this.entryService.onTagsChanged
                .subscribe(labels => {
                    this.tags = labels;
                });

        // Subscribe to update on tag change
        this.onNewEntryClicked = this.entryService.onNewEntryClicked
            .subscribe(() => {
                this.entry = new Entry({});
                this.entry.entryId = FuseUtils.generateGUID();
                this.entry.tags = new Array<EntryTag>();
                this.formType = 'new';
                this.entryForm = this.createEntryForm();
                // this.focusTextBodyField();
                this.entryService.onCurrentEntryChanged.next([this.entry, 'new']);
            });

        this.onEntryUpdated = this.entryService.onEntryUpdated.subscribe((updatedEntry: Entry) => {
            if (this.entry && updatedEntry.entryId === this.entry.entryId) {
                this.entry = updatedEntry;
            }
        });
    }

    setSelectedSeverity(entry){
        this.selectedSeverity = this.severityService.severities.find(item => {
            let severityId: string;
            if (entry.severityId) {
                severityId = entry.severityId;
            } else {
                severityId = entry.userSeverityId;
            }
            return item.severityId === severityId;
        });
    }

    createEntryForm() {
        
        return this.formBuilder.group({
            'entryId': [this.entry.entryId],
            'textBody': [this.entry.textBody]
        });
    }

    /**
     * Toggle Copy To Summary
     * @param event
     */
    toggleCopyToSummary(event) {
        event.stopPropagation();
        this.entry.toggleCopyToSummary();
    }

    /**
     * Toggle Unique
     * @param event
     */
    toggleUnique(event) {
        event.stopPropagation();
        this.entry.toggleUnique();
    }

    /**
     * Toggle Deleted
     * @param event
     */
    toggleDeleted(event) {
        event.stopPropagation();

        this.entry.toggleDeleted();
        console.log(this.entry);

        //remove entry from entry store
        //remove link location if exists
        //remove from selected list?
        this.entryService.deleteEntry(this.entry,
            this.entrySelectorService.selectedLocation != null ? this.entrySelectorService.selectedLocation.locationId : null);

        this.router.navigate(['/inspections/' + this.entry.reportID + '/entries/all']).then(() => {
            setTimeout(() => {
                this.entryService.onNewEntryClicked.next('');
            });
        });
    }

    setStep(index: number) {
        this.step = index;
    }

    nextStep() {
        this.step++;
    }

    prevStep() {
        this.step--;
    }

    setSubStep(index: number) {
        this.substep = index;
    }

    nextSubStep() {
        this.step++;
    }

    prevSubStep() {
        this.step--;
    }

    removeEntryLocation(event, location: AProLocation) {
        event.stopPropagation();
        this.openConfirmationDialog("Are you sure you want to remove this location?", () => {
            this.entryService.removeEntryLocation(this.entry, location);
        })
        
    }

    removeAllEntryLocation(locations: AProLocation[]) {
        console.log("locations need to be deleted ", JSON.stringify(locations))
        this.openConfirmationDialog("Are you sure you want to remove all locations?", () => {
            this.entryService.removeAllEntryLocation(this.entry, locations);
        })
    }

    openConfirmationDialog(question: string, callback): void {
        let dialogRef = this.dialog.open(FuseConfirmDialogComponent, {
            width: '300px',
            data: question
        });
        dialogRef.afterClosed().subscribe(result => {
            console.log('The dialog was closed ', result);
            if(result){
                console.log("call the callback")
                callback()
            }
        });
    }

    showEntryAddLocation(event) {
        this.showAddLocation = true;
    }

    onLocationSelected(location: AProLocation) {
        console.log("selected location is ", JSON.stringify(location))
        this.selectedLocation = location;
    }

    onSeveritySelected(severity: Severity) {
        this.selectedSeverity = severity;
        if (severity.type === "global") {
            this.entry.severityId = severity.severityId;
            this.entry.userSeverityId = null;
        } else {
            this.entry.severityId = null;
            this.entry.userSeverityId = severity.severityId;
        }
        this.entry.uploaded = false;
        this.entryService.upsertEntry(this.entry);
    }

    cancelEntryAddLocation(event) {
        this.showAddLocation = false;
    }

    saveEntryAddLocation(event) {
        this.entryService.linkLocationToEntry(this.entry, this.selectedLocation);
        this.showAddLocation = false;
    }

    saveEntry() {
        let updatedEntry = new Entry(this.entryForm.getRawValue());
        if (updatedEntry.textBody !== this.entry.textBody) {
            this.entry.textBodyOverridden = updatedEntry.textBody !== this.entry.textBody;
            this.entry.textBody = updatedEntry.textBody;
        }
        this.entryService.upsertEntry(this.entry);
    }

    ngOnDestroy() {
        if (this.onFormChange) {
            this.onFormChange.unsubscribe();
        }
        this.onCurrentEntryChanged.unsubscribe();

        this.onNewEntryClicked.unsubscribe();
        this.onTagsChanged.unsubscribe();
        this.onEntryUpdated.unsubscribe();
    }
}