role-access.component.html 2.53 KB
<mat-expansion-panel>
  <mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
    <mat-panel-title>Select Role</mat-panel-title>
  </mat-expansion-panel-header>
  <ng-template matExpansionPanelContent>
  </ng-template>
  <mat-form-field>
    <mat-select placeholder="Role">
      <mat-option>--</mat-option>
      <mat-option value="SUPERADMIN">Super Admin</mat-option>
      <mat-option value="ADMIN">Admin</mat-option>
      <mat-option value="MARKETING">Marketing</mat-option>
      <mat-option value="DEVELOPER">Developer</mat-option>
      <mat-option value="QA">QA</mat-option>
      <mat-option value="CS">CS</mat-option>
    </mat-select>
  </mat-form-field>
  <button mat-raised-button color="primary">Search</button>
</mat-expansion-panel>
<br>
<div fxLayout="row" fxLayoutWrap="wrap">
  <div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
    <div class="mat-box-shadow">
      <ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="0"
        [rowHeight]="50" [scrollbarV]="true" [scrollbarH]="true" [rows]="roleAccessDataSource">

        <ngx-datatable-column name="Menu">
          <ng-template let-row="row" ngx-datatable-cell-template>
            <mat-checkbox (change)="current_item = row.id; triggerCheckBoxEventrow($event, 1)">{{ row?.menu }}
            </mat-checkbox>
          </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column name="Child Menu">
          <ng-template let-row="row" ngx-datatable-cell-template>
            <mat-checkbox [disabled]="row.isDisabled < 2" (change)="current_item = row.id; triggerCheckBoxEventrow($event, 2)">{{ row?.childMenu}}</mat-checkbox>
          </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column name="Status">
          <ng-template let-row="row" ngx-datatable-cell-template>
            <mat-checkbox [disabled]="row.isDisabled < 3"></mat-checkbox>
          </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column name="Operation">
          <ng-template let-row="row" ngx-datatable-cell-template>
            <mat-checkbox [disabled]="row.isDisabled < 3" >{{ row?.operation}}</mat-checkbox>
          </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column name="Action">
          <ng-template let-row="row" ngx-datatable-cell-template>
            <mat-checkbox [disabled]="row.isDisabled < 3">{{ row?.action }}</mat-checkbox>
          </ng-template>
        </ngx-datatable-column>

      </ngx-datatable>
    </div>
  </div>
</div>