artsite/zorro/src/app/pages/page/list.component.ts

import { AfterViewInit, Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { firstValueFrom } from 'rxjs';
import { FilterItem, FilterType } from 'src/app/lib/pager/pager-filter.component';
import { SysService } from '../sys/sys.service';


@Component({
  selector: 'art-list',
  template: `

      <nz-page-header *ngIf="!embedMode" [nzGhost]="false">
        <nz-page-header-title i18n>{{data?.title || '作品列表'}}</nz-page-header-title>
        <nz-page-header-extra>
          <ng-container *ngIf="!hideUpload">
            <a *can="['create', 'own', 'art']" nz-button nzType="primary" routerLink="/art/play">
              <i class="fal fa-cloud-upload mr-1"></i>
              <ng-container i18n>上传作品</ng-container>
            </a>
          </ng-container>
        </nz-page-header-extra>
        <nz-page-header-content>
        </nz-page-header-content>
      </nz-page-header>


  <cg-pager 
    [remoteUrl]="remoteUrl"
    remoteHeaderUrl="/napi/web/art/pager/headers"
    [defaultOrder]="'desc'"
    [defaultOrderBy]="'date'"
    [listTemplate]="listTemplate"
    [pageSizeOptions]="[30, 60, 90, 120, 150, 180, 480]"
    [topPagination]="true"
    [bottomPagination]="true"
    [showOrder]="true"
    [showSearch]="true"
    [debug]="false"
    [refresh]="refreshTrigger"
    [filterConfig]="filterConfig"
    [inputFilters]="inputFilters"
    [orderColumns]="['areaCount', 'status', 'publishTime', 'date','lastMod' ]"
  ></cg-pager>

  <ng-template #listTemplate  let-list="list" >
    <div nz-row [nzGutter]="[20, 20]" class="pt-4 pb-4" 
      cdkDropList 
      id="list-1" 
      cdkDropListConnectedTo="list-2"
      [cdkDropListDisabled]="!embedMode" 
      [cdkDropListSortingDisabled]="true"
      [cdkDropListData]="list?.data"
       >
      <art-card   *ngFor="let item of list?.data" 
        nz-col  [nzSm]="8" [nzMd]="6" [nzLg]="6" [nzXl]="4" [nzXXl]="3"	
        [data]="item"  
        [hideAuthor]="hideAuthor"
        (itemClick)="onItemClick($event)"
        (useClick)="filter('use', $event)"
        (tagClick)="filter('tags', [$event])"
        (authorClick)="filter('user', [$event])"
        cdkDrag
         >
      </art-card>
    </div>
  </ng-template>





  `,
  styles: [
    `
    :host {
      padding-bottom:100px;
      display:block;
    }

    .cdk-drag-preview {
      box-sizing: border-box;
      border-radius: 4px;
      box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
                  0 8px 10px 1px rgba(0, 0, 0, 0.14),
                  0 3px 14px 2px rgba(0, 0, 0, 0.12);
    }

    .cdk-drag-placeholder {
      opacity: 0;
    }

    .cdk-drag-animating {
      transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    }

    nz-select {
      width: 150px;
    }
    
    `
  ]
})
export class ListComponent implements OnInit, AfterViewInit {

  @Input() remoteUrl = '/napi/web/art/pager/my';
  @Input() hideAuthor: boolean = false;
  @Input() hideUpload: boolean = false;
  @Input() embedMode: boolean = false;
  @Input() refreshTrigger: any;

  @Input()
  filterConfig: FilterItem[] = [
    {
      data: 'status',
      title: $localize`状态`,
      filterType: FilterType.radio,
      options: [
        { label: $localize`拒稿`, value: 500 },
        { label: $localize`草稿`, value: 1000 },
        { label: $localize`需要修改`, value: 2000 },
        { label: $localize`测试中`, value: 3000 },
        { label: $localize`测试通过`, value: 7000 },
        { label: $localize`已发布`, value: 9000 },
        { label: $localize`下线`, value: 8000 },
      ],
      span: 4,
    },
    {
      data: 'use',
      title: $localize`用途`,
      filterType: FilterType.radio,
      options: [
        { label: $localize`日常`, value: 'normal' },
        { label: $localize`每日`, value: 'daily' },
        { label: $localize`专辑`, value: 'album' },
        { label: $localize`收集`, value: 'collection' },
      ],
      span: 2,
    },
    {
      data: 'date',
      title: $localize`上传`,
      filterType: FilterType.dateRange,
      span: 2,
    },
    {
      data: 'publishTime',
      title: $localize`发布`,
      filterType: FilterType.dateRange,
      span: 2,
    },
    {
      data: 'tags',
      title: $localize`标签`,
      filterType: FilterType.select,
      mode: 'tags',
      span: 2,
      fullWidth: true,
      optionsUrl: '/napi/web/art/agg/tags',
    },
    {
      data: 'user',
      title: $localize`作者`,
      filterType: FilterType.select,
      mode: 'multiple',
      span: 2,
      fullWidth: true,
      optionsUrl: '/napi/web/user/select/options',
    },
    {
      data: 'hasSpecial',
      title: $localize`彩绘`,
      filterType: FilterType.select,
      options: [
        { label: $localize`是`, value: true },
        { label: $localize`否`, value: false },
      ],
      span: 1,
    },
    {
      data: 'mystery',
      title: $localize`神秘图`,
      filterType: FilterType.select,
      options: [
        { label: $localize`是`, value: true },
        { label: $localize`否`, value: false },
      ],
      span: 1,
    },
    {
      data: 'ai',
      title: $localize`AI`,
      filterType: FilterType.select,
      options: [
        { label: $localize`是`, value: true },
        { label: $localize`否`, value: false },
      ],
      span: 1,
    },
    {
      data: 'width',
      title: $localize`尺寸`,
      filterType: FilterType.select,
      options: [
        { label: '2000', value: 2000 },
        { label: '1500', value: 1500 },
        { label: '2400', value: 2400 },
        { label: '3000', value: 3000 },
      ],
      span: 1,
    },
    {
      data: 'lock',
      title: $localize`加锁`,
      filterType: FilterType.select,
      options: [
        { label: $localize`是`, value: true },
        { label: $localize`否`, value: false },
      ],
      span: 1,
    },

  ];


  inputFilters: any;

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private sysService: SysService,
  ) {
    this.data = this.activatedRoute.snapshot.data;
    let { remoteUrl, hideAuthor, hideUpload } = this.activatedRoute.snapshot.data;
    this.remoteUrl = remoteUrl || this.remoteUrl;
    this.hideAuthor = hideAuthor;
    this.hideUpload = hideUpload;
    if (this.hideAuthor) {
      this.filterConfig = this.filterConfig.filter(c => c.data != 'user');
    }
  }

  filter(data, value) {
    console.log('filter', data, value);
    let filter = {};
    filter[data] = value;
    this.inputFilters = filter;
  }

  data: any;

  onItemClick(data: any) {
    //this.router.navigate([`/art/play/${data._id}`]);
    this.router.navigate(['/pages/detail', data._id]);
  }

  ngAfterViewInit() { }

  ngOnInit() {
  }

}