fix(table): remove prizmCell after destroy

.github/workflows/prereleased.yml

@@ -14,6 +14,8 @@ jobs:
  runs-on: ubuntu-latest
  steps:
  - uses: actions/checkout@v2
+ with:
+ fetch-depth: 0
  - name: Run workflow with draft publish
  uses: zyfra/Prizm/.github/workflows/draft-publish.yml@main
 
@@ -22,5 +24,7 @@ jobs:
  needs: draft_release
  steps:
  - uses: actions/checkout@v2
+ with:
+ fetch-depth: 0
  - name: Run workflow with prerelease publish
  uses: zyfra/Prizm/.github/workflows/prerelease-publish.yml@main

.github/workflows/released.yml

@@ -14,6 +14,8 @@ jobs:
  runs-on: ubuntu-latest
  steps:
  - uses: actions/checkout@v2
+ with:
+ fetch-depth: 0
  - name: Run workflow with draft publish
  uses: zyfra/Prizm/.github/workflows/draft-publish.yml@main
 
@@ -22,5 +24,7 @@ jobs:
  needs: draft_release
  steps:
  - uses: actions/checkout@v2
+ with:
+ fetch-depth: 0
  - name: Run workflow with prerelease publish
  uses: zyfra/Prizm/.github/workflows/main-publish.yml@main

apps/doc/src/app/components/table/examples/table-tree-example/table-tree-example.component.html

@@ -30,7 +30,7 @@ <h3>Base example</h3>
  "
  >
  <tr #trElement prizmTr>
- <td prizmTd>
+ <td *prizmCell prizmTd>
  <div class="col-tree">
  <prizm-tree-button
  #treeButton
@@ -43,16 +43,18 @@ <h3>Base example</h3>
  <span>{{ item.name }}</span>
  </div>
  </td>
- <td prizmTd>
+ <td *prizmCell prizmTd>
  {{ item.category }}<br />
  #{{ i }}
  {{ odd ? '#odd' : '#even' }}
  {{ first ? '#first' : '' }}
  {{ last ? '#last' : '' }}
  </td>
- <td class="format__number" *ngIf="showFormatNumber" prizmTd>
- {{ item.count | spaceNumber : '0.0-0' }}
- </td>
+ <ng-container *ngIf="showFormatNumber">
+ <td class="format__number" *prizmCell prizmTd>
+ {{ item.count | spaceNumber : '0.0-0' }}
+ </td>
+ </ng-container>
  </tr>
  </ng-container>
  </tbody>

libs/components/src/lib/components/table/directives/cell.directive.ts

@@ -1,21 +1,36 @@
-import { Directive, Inject, Input, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
+import {
+ Directive,
+ Inject,
+ Input,
+ OnDestroy,
+ OnInit,
+ Optional,
+ TemplateRef,
+ ViewContainerRef,
+} from '@angular/core';
 import { prizmDefaultProp } from '@prizm-ui/core';
+import { PrizmCellService } from './cell.service';
 
 @Directive({
  selector: `[prizmCell]`,
  exportAs: 'prizmCell',
 })
-export class PrizmCellDirective implements OnDestroy {
+export class PrizmCellDirective implements OnDestroy, OnInit {
  @Input()
  @prizmDefaultProp()
  prizmCell = ``;
 
  constructor(
  @Inject(TemplateRef) readonly template: TemplateRef<Record<string, unknown>>,
- public readonly viewContainer: ViewContainerRef
+ public readonly viewContainer: ViewContainerRef,
+ @Optional() @Inject(PrizmCellService) private readonly cellService: PrizmCellService
  ) {}
 
  public ngOnDestroy(): void {
- this.viewContainer.clear();
+ this.cellService?.changes$$.next();
+ }
+
+ public ngOnInit(): void {
+ this.cellService?.changes$$.next();
  }
 }

libs/components/src/lib/components/table/directives/cell.service.ts

@@ -0,0 +1,7 @@
+import { Injectable } from '@angular/core';
+import { ReplaySubject } from 'rxjs';
+
+@Injectable()
+export class PrizmCellService {
+ readonly changes$$ = new ReplaySubject<void>(0);
+}

libs/components/src/lib/components/table/tr/tr.component.ts

@@ -9,8 +9,8 @@ import {
  QueryList,
  ViewEncapsulation,
 } from '@angular/core';
-import { map, startWith } from 'rxjs/operators';
-import { Observable } from 'rxjs';
+import { debounceTime, map, observeOn, startWith } from 'rxjs/operators';
+import { animationFrameScheduler, merge, Observable } from 'rxjs';
 import { prizmDefaultProp } from '@prizm-ui/core';
 
 import { PrizmCellDirective } from '../directives/cell.directive';
@@ -20,6 +20,7 @@ import { PrizmTbodyComponent } from '../tbody/tbody.component';
 import { PrizmTableCellStatus } from '../table.types';
 import { PrizmDestroyService } from '@prizm-ui/helpers';
 import { PrizmTableTreeService } from '../service/tree.service';
+import { PrizmCellService } from '../directives/cell.service';
 
 @Component({
  // eslint-disable-next-line @angular-eslint/component-selector
@@ -29,7 +30,7 @@ import { PrizmTableTreeService } from '../service/tree.service';
  exportAs: 'prizmTr',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
- providers: [PRIZM_TABLE_PROVIDER],
+ providers: [PRIZM_TABLE_PROVIDER, PrizmCellService],
 })
 export class PrizmTrComponent<T extends Partial<Record<keyof T, unknown>>> {
  @Input() @HostBinding('attr.status') public status: PrizmTableCellStatus = 'default';
@@ -41,7 +42,10 @@ export class PrizmTrComponent<T extends Partial<Record<keyof T, unknown>>> {
  @ContentChildren(forwardRef(() => PrizmCellDirective))
  readonly cells: QueryList<PrizmCellDirective> = new QueryList<PrizmCellDirective>();
 
- readonly cells$ = this.cells.changes.pipe(
+ readonly cells$ = merge(
+ this.cells.changes,
+ this.cellService.changes$$.pipe(debounceTime(0, animationFrameScheduler))
+ ).pipe(
  startWith(null),
  map(() => {
  const cells = this.cells.toArray();
@@ -67,6 +71,7 @@ export class PrizmTrComponent<T extends Partial<Record<keyof T, unknown>>> {
  public readonly table: PrizmTableDirective<T>,
  @Inject(forwardRef(() => PrizmTbodyComponent))
  private readonly body: PrizmTbodyComponent<T>,
+ private readonly cellService: PrizmCellService,
  private readonly tableTreeService: PrizmTableTreeService,
  @Inject(PrizmDestroyService) readonly destroy$: PrizmDestroyService
  ) {}