artsite/zorro/src/app/pages/page/publish-confirm.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
import { firstValueFrom } from 'rxjs';
import { EpgService } from '../epg/epg.service';
import { ArtService } from './art.service';

@Component({
  selector: 'app-publish-confirm',
  template: `


<nz-spin [nzSpinning]="isLoading">


<div i18n>确认测试通过？</div>

<ng-container *ngIf="!isLoading && unshelfList && unshelfList.length > 0">

<div style="margin-top: 10px" i18n>提测后是否自动上架到以下epg？ 请勾选确认：</div>
<nz-table #unshelfTable nzSize="small" [nzFrontPagination]="false" [nzShowPagination]="false" [nzData]="unshelfList"
  [nzTemplateMode]="true" class="table table-hover table-sm  table-edit">
  <thead>
    <tr>
      <th [nzChecked]="checked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="onAllChecked($event)"></th>
      <th i18n>发布路径</th>
    </tr>
  </thead>
  <tbody *ngIf="unshelfTable.data && unshelfTable.data.length > 0">
    <tr *ngFor="let data of unshelfTable.data; let i = index" class="editable-row">
      <td [nzChecked]="checkDataSet.has(data)" (nzCheckedChange)="onItemChecked(data, $event)"></td>
      <td> {{data.path}} </td>
    </tr>
  </tbody>
</nz-table>

</ng-container>


</nz-spin>


  `,
  styles: [
  ]
})
export class PublishConfirmComponent implements OnInit {

  @Input() art: any;

  onshelfList: any[] = []; // 已上架列表

  pubList: any[] = []; // 根据tag与绑定epgs规则生成的可上架的列表

  unshelfList: any[] = []; // pubList 减去 onshelfList 后剩下的最终建议可上架的列表

  epgs: any[] = []; // epg 列表




  constructor(
    private message: NzMessageService,
    private artService: ArtService,
    private epgService: EpgService,
  ) { 
    
  }

  ngOnInit(): void {
    this.loadData();
  }

  isLoading: boolean = false;

  loadData() {
    this.isLoading = true;

    firstValueFrom(this.artService.getShelfInfo(this.art._id)).then((resp: any) => {
      this.onshelfList = resp as any[];
      firstValueFrom(this.epgService.epgAll()).then((ret: any) => {
        this.epgs = ret.data || [];
        this.generatePubList()
        this.isLoading = false;
      })
    })


  }


  generatePubList() {
    let tags = this.art.tags;
    let epgs = this.art.epgs;
    let pubList = [];
    epgs.forEach(epgId => {
      let epg = this.epgs.find(e => e.epgId == epgId);
      if (epg) {
        epg.columns.forEach(col => {
          if (tags.includes(col.id)) {
            pubList.push({
              epg: epg.epgId,
              column: col.id, 
              path: `${epg.epgId} -> ${col.zh}(${col.id})`
            });
          }
        })
      }
    })
    
    this.pubList = pubList;
    this.unshelfList = this.pubList.filter(item => {
      if (this.onshelfList.find(e => e.epg == item.epg && e.column == item.column)) return false;  // 找到，说明已经上架过了，忽略
      else return true;
    })
    
  }



  
  //////////////////////////////// table checked ////////////////////////

  checkDataSet = new Set<any>();
  checked = false;
  indeterminate = false;

  onItemChecked(data: any, checked: boolean): void {
    this.updateCheckedSet(data, checked);
    this.refreshCheckedStatus();
  }

  updateCheckedSet(data: any, checked: boolean): void {
    if (checked) {
      this.checkDataSet.add(data);
    } else {
      this.checkDataSet.delete(data);
    }
  }

  refreshCheckedStatus(): void {
    this.checked = this.unshelfList.every(item => this.checkDataSet.has(item));
    this.indeterminate = this.unshelfList.some(item => this.checkDataSet.has(item)) && !this.checked;
   }

  onAllChecked(checked: boolean): void {
    this.unshelfList.forEach(item => this.updateCheckedSet(item, checked));
    this.refreshCheckedStatus();
  }

  cleanAllChecked() {
    this.checkDataSet.clear();
    this.checked = false;
    this.indeterminate = false;
  }


}