ChurchAngular/src/app/admin/family-members/family-members.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { NbDialogService } from '@nebular/theme';
import { Observable } from 'rxjs';
import { first } from 'rxjs/operators';
import { FamilyMember, Gender } from '../../entity/Member';
import { PastoralDomain } from '../../entity/PastoralDomain';
import { FamilyMemberService } from '../../services/crudServices/family-member.service';
import { PastoralDomainService } from '../../services/crudServices/pastoral-domain.service';
import { MsgBoxService } from '../../services/msg-box.service';
import { StateService } from '../../services/state.service';
import { FancySettings } from '../../ui/fancy-table/fancy-settings.model';
import { FancyTableComponent } from '../../ui/fancy-table/fancy-table.component';
import { ObjectUtils } from '../../utilities/object-utils';
import { AssignMemberCellGroupComponent } from './assign-member-cell-group/assign-member-cell-group.component';
import { FamilyMemberEditorComponent } from './family-member-editor/family-member-editor.component';

@Component({
  selector: 'ngx-family-members',
  templateUrl: './family-members.component.html',
  styleUrls: ['./family-members.component.scss']
})
export class FamilyMembersComponent implements OnInit {
  @ViewChild(FancyTableComponent, { static: false }) fancyTable: FancyTableComponent<FamilyMember>;
  data: FamilyMember;
  allData: FamilyMember[];
  selectedIndex: number = 0;
  isLoading: boolean = true;
  cellGroups: PastoralDomain[];
  constructor(
    private familyMemberService: FamilyMemberService,
    private pastoralDomainService: PastoralDomainService,
    private msgBoxService: MsgBoxService,
    private dlgService: NbDialogService,
    protected stateService: StateService,
    protected route: ActivatedRoute,
  ) {
  }

  //#region Table Setting
  settings = <FancySettings<FamilyMember>>{
    multiselect: true,
    contextMenuItems: [
      {
        id: 'add',
        enabled: true,
        title: 'Add New',
        icon: 'plus-circle-outline',
        callback: (datum, element) => {
          this.openEditingDialog(true);
        },
      },
      {
        id: 'edit',
        enabled: true,
        title: 'Edit',
        icon: 'edit',
        callback: (datum, element) => {
          this.openEditingDialog(false);
        },
      },
      {
        enabled: true,
        id: 'delete',
        title: 'Delete',
        icon: 'trash-2-outline',
        callback: (datum, element) => {
          this.delete(datum);
        },
      },
      {
        enabled: true,
        id: 'assign',
        title: 'Assign Cell Group',
        icon: 'send-outline',
        callback: (datum, element) => {
          this.assignCellGroup();
        },
      },
    ],
    onContextMenuOpening: (datum, menuItems) => {
      menuItems.find(i => i.id == 'delete').visible = !!datum;
      menuItems.find(i => i.id == 'edit').visible = !!datum;
      return datum;
    },
    columns: [
      // {
      //   name: 'avatarImage',
      //   title: 'Avatar Image',
      //   type: 'text',
      //   widthPx: 100,
      //   //valuePrepareFunction: (item) => ,
      // },
      {
        name: 'firstName',
        title: 'First Name',
        type: 'text',
        widthPx: 130,
        //valuePrepareFunction: (item) => ,
      },
      {
        name: 'lastName',
        title: 'Last Name',
        type: 'text',
        widthPx: 100,
        //valuePrepareFunction: (item) => ,
      },
      {
        name: 'email',
        title: 'Email',
        type: 'text',
        widthPx: 260,
        //valuePrepareFunction: (item) => ,
      },
      {
        name: 'gender',
        title: 'Gender',
        type: 'text',
        widthPx: 60,
        valuePrepareFunction: (item) => item.gender == Gender.Male ? '男' : '女',
      },
      {
        name: 'birthday',
        title: 'Birthday',
        type: 'date',
        widthPx: 110,
        //valuePrepareFunction: (item) => ,
      },
      {
        name: 'address',
        title: 'Address',
        type: 'text',
        widthPx: 200,
        //valuePrepareFunction: (item) => ,
      },
      // {
      //   name: 'baptized',
      //   title: 'Baptized',
      //   type: 'text',
      //   widthPx: 100,
      //   //valuePrepareFunction: (item) => ,
      // },
      {
        name: 'role',
        title: 'Role',
        type: 'text',
        widthPx: 50,
        //valuePrepareFunction: (item) => ,
      },

    ],

  };
  //#endregion

  //#region Implements Methods
  ngOnInit(): void {
    this.getAllData();
  }
  get saveMethod(): Observable<any> {
    return Observable.of(true);
  }
  getAllData() {
    this.isLoading = true;
    this.pastoralDomainService.getAll().pipe(first()).subscribe(result => {
      this.cellGroups = result;
      this.familyMemberService.getAll().pipe(first()).subscribe(result => {
        this.isLoading = false;
        this.allData = result;
      });
    });
  }
  //#endregion

  //#region UI Calling Methods
  openEditingDialog(isAdding: boolean) {
    this.dlgService.open(FamilyMemberEditorComponent, {
      context: {
        data: isAdding ? null : ObjectUtils.CloneValue(this.allData[this.selectedIndex]),
        isAdding: isAdding
      }
    }).onClose.pipe(first()).subscribe(result => {
      if (result) {
        this.getAllData();
      }
    });
  }

  assignCellGroup() {
    this.dlgService.open(AssignMemberCellGroupComponent, {
      context: {
        members: this.fancyTable.getSelected().selectedRows,
        cellGroups: this.cellGroups
      }
    }).onClose.pipe(first()).subscribe(result => {
      this.getAllData();
    });
  }

  //#endregion

  //#region CRUD Methods
  delete(datum) {
    this.msgBoxService.showConfirmDeleteBox().pipe(first()).subscribe(answer => {
      if (answer === true) {
        this.isLoading = true;
        this.familyMemberService.delete(datum).pipe(first()).subscribe(result => {
          this.isLoading = false;
          this.allData.splice(this.selectedIndex, 1);
          this.fancyTable.reload();
        });
      }
    });
  }
  //#endregion

}