typescript 从父组件到子组件的角度传递数据

Posted 2021-05-20

<div *ngIf="authUser.isPermission(P.PICKUP_RCU_CASES) && state.latest_rcu_status_name" class="col-lg-4 col-xl-3">
            <!-- RCU Case Action child component -->
            <v-rcu-case-action [status_name]="state?.latest_rcu_status_name" [rcu_case_id]="meta.rcuCase?.id" ></v-rcu-case-action>
        </div>

import { RcucaseActionService } from './../../../service/service/rcucase-action.service';
import { ToastService } from 'Services/toast.service';
import { Subject, merge } from 'rxjs';
import { Component, OnInit, OnChanges, Input, ViewChild, Output, EventEmitter } from '@angular/core';
import { PersonaService } from 'App/_shared/services/persona.service';
import { IPaginate } from 'App/_shared/interfaces/paginate.interface';
import { AuthUserService } from 'App/_shared/services/auth-user.service';
import { ComponentUtilService } from 'App/_shared/services/component-util.service';
import { MscComplianceService } from 'App/msc-compliance/services/compliances-request.service';
import { finalize, distinctUntilChanged, map, debounceTime, share, mergeMap, startWith } from 'rxjs/operators';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { ModalDirective } from 'ngx-bootstrap/modal/modal.directive';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { RCUSTATUSES } from 'Helpers/rcustatuses';
import { RcuCaseStatusService } from 'App/msc-compliance/services/rcu-case-status.service';

@Component({
    selector: 'v-rcu-case-action',
    templateUrl: './rcu-case-action.component.html',
    styleUrls: [ './rcu-case-action.component.scss' ],
})
export class RcuCaseActionComponent implements OnInit {

    @Input()
    status_name: string = '';

    @Input()
    rcu_case_id: number = 0;

    @Output() rcuCaseStatusEvent = new EventEmitter<string>();

    state = {
        can_pickup: false,
        can_approve: false,
        can_reject: false,
        can_return: false,
        can_release: false,
        current_action: null
    };

    constructor(
        private toastService: ToastService,
        private rcucaseActionService: RcucaseActionService,
        private rcuCaseStatusService: RcuCaseStatusService,
        private fb: FormBuilder
    ) {

    }

    ngOnInit(): void {

        this.myForm = this.fb.group({
            remarks: ['', Validators.required],
        });

        this.enablePickup(this.status_name);
    }

    private enablePickup(status_name: string) {

        if (status_name === RCUSTATUSES.PENDING_PICKUP) {
            this.state.can_pickup = true;
        }

        if (status_name === RCUSTATUSES.RELEASED) {
            this.state.can_pickup = true;
        }
    }

    pickupRcuCase() {

        this.rcucaseActionService.pickup(this.rcu_case_id)
            .pipe(finalize(() => console.log(1)))
            .subscribe(
                res => {
                    console.log(res);

                    // tell the parent component the RCU Case is IN_PROGRESS

                    this.updateRcuCaseStatus(RCUSTATUSES.IN_PROGRESS);

                    // success message

                    this.toastService.show('success', { title: 'Success Pickup Rcu Case' });
                },
                err => {
                    console.log('err', err);
                    this.toastService.show('error', { title: 'Error Pickup Rcu Case' });
                });

    }

    private updateRcuCaseStatus(status: string) {

        // tell the parent component the RCU Case is NOT_APPROVED

        this.rcuCaseStatusEvent.emit(status);

        // tell the others component RCU Case status was updated

        this.rcuCaseStatusService.changeStatus(status);

        // set internal status_name state
        this.status_name = status;

        // reset the state

        this.state = {
            can_pickup: false,
            can_approve: false,
            can_reject: false,
            can_return: false,
            can_release: false,
            current_action: null
        };

        // recheck the button permission

        this.enablePickup(this.status_name);
    }
}