File

libs/rucken/todo-web/src/lib/entities/projects/projects-grid/projects-grid.component.ts

Extends

BaseEntityListComponent

Implements

OnInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector projects-grid
templateUrl ./projects-grid.component.html

Index

Methods

Constructor

constructor(modalsService: ModalsService, errorsExtractor: ErrorsExtractor, translateService: TranslateService, dynamicRepository: DynamicRepository, projectsConfig: IRestProviderOptions, userPermPipe?: UserPermPipe)
Parameters :
Name Type Optional
modalsService ModalsService No
errorsExtractor ErrorsExtractor No
translateService TranslateService No
dynamicRepository DynamicRepository No
projectsConfig IRestProviderOptions<Project> No
userPermPipe UserPermPipe Yes

Methods

ngOnInit
ngOnInit()
Returns : void
onDblClick
onDblClick(item: Project)
Parameters :
Name Type Optional
item Project No
Returns : void
import { ChangeDetectionStrategy, Component, Inject, Input, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import {
  BaseEntityListComponent,
  ErrorsExtractor,
  IBaseEntityModalOptions,
  ModalsService,
  translate,
  UserPermPipe
} from '@rucken/core';
import { Project, PROJECTS_CONFIG_TOKEN } from '@rucken/todo-core';
import { DynamicRepository, IRestProviderOptions } from 'ngx-repository';
import { ProjectModalComponent } from '../project-modal/project-modal.component';
import { BindIoInner } from 'ngx-bind-io';

@BindIoInner()
@Component({
  selector: 'projects-grid',
  templateUrl: './projects-grid.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProjectsGridComponent extends BaseEntityListComponent<Project> implements OnInit {
  @Input()
  autoload = false;
  @Input()
  modalItem: IBaseEntityModalOptions = {
    component: ProjectModalComponent,
    class: 'modal-lg'
  };
  @Input()
  modalDelete = {
    class: 'modal-md'
  };
  @Input()
  title = translate('Projects');
  constructor(
    modalsService: ModalsService,
    protected errorsExtractor: ErrorsExtractor,
    protected translateService: TranslateService,
    protected dynamicRepository: DynamicRepository,
    @Inject(PROJECTS_CONFIG_TOKEN)
    protected projectsConfig: IRestProviderOptions<Project>,
    protected userPermPipe?: UserPermPipe
  ) {
    super(dynamicRepository.fork<Project>(Project), modalsService, Project);
  }
  ngOnInit() {
    if (!this.mockedItems) {
      this.useRest({
        apiUrl: this.apiUrl,
        ...this.projectsConfig,
        autoload: this.autoload
      });
    }
    if (this.mockedItems) {
      this.useMock({
        items: this.mockedItems,
        ...this.projectsConfig,
        autoload: this.autoload
      });
    }
  }
  onDblClick(item: Project) {
    if (this.userPermPipe.transform(item)) {
      this.onUpdateClick(item);
    } else {
      this.onViewClick(item);
    }
  }
}
<entity-grid
    [bindIO]
    [columns]="'change_project'|perm:false:['title','users','isPublic','action']:['title','users']|async"
    [translatedCells]="['isPublic']"
    [enableCreate]="'add_project' | perm:false | async"
    [enableUpdate]="'change_project' | perm:false | async"
    [enableDelete]="'delete_project' | perm:false | async"
    [gridCellActionContent]="gridCellActionContent"
    #grid>
</entity-grid>
<ng-template
    #gridCellActionContent
    let-ctx>
    <button
        type="button"
        class="btn btn-default btn-sm"
        (click)="grid.onUpdate(ctx.item)"
        *ngIf="(grid.notReadonlyAndEnableUpdate$ | async) && (ctx.item|userPerm)">
        <fa-icon [icon]="['fas', 'edit']"></fa-icon>
    </button>
    <button
        type="button"
        class="btn btn-default btn-sm"
        (click)="grid.onDelete(ctx.item)"
        *ngIf="(grid.notReadonlyAndEnableDelete$ | async) && (ctx.item|userPerm)">
        <fa-icon [icon]="['fas', 'trash']"></fa-icon>
    </button>
    <button
        type="button"
        class="btn btn-default btn-sm"
        (click)="grid.onView(ctx.item)"
        *ngIf="!(ctx.item|userPerm)">
        <fa-icon [icon]="['fas', 'eye']"></fa-icon>
    </button>
</ng-template>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""