Untitled

import {
  Component,
  Input,
  OnInit,
  ViewEncapsulation,
  Inject,
  Output,
  EventEmitter,
  OnChanges,
  OnDestroy,
} from '@angular/core';
// import 'ag-grid-enterprise';
import {
  ColDef,
  GridOptions,
  CellClickedEvent,
  FirstDataRenderedEvent,
  GridApi,
  RowSelectionOptions,
} from 'ag-grid-community';
import * as entreprise from 'ag-grid-enterprise';
import {
  Action,
  Permission,
  Right,
  Service,
  updateAction,
  updatePermission,
} from '../../models/permission.model';
import { PermissionInputControllerComponentData } from '../../permission.interface';
import { LayoutToastsService } from '@ziwig/ng-layout';
import { PermissionActionControllerComponent } from '../permission-action/permission-action.controller';
import { PermissionsService } from '../../services/permissions.service';
import { Subject, takeUntil } from 'rxjs';
import { RightActionControllerComponent } from '../right-action/right-action.controller';

@Component({
  selector: 'zg-permissions-input',
  templateUrl: './permission-input.component.html',
  styleUrls: ['./permission-input.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class PermissionInputComponent implements OnInit, OnChanges, OnDestroy {
  @Input() data!: PermissionInputControllerComponentData;

  @Input() profileName!: string;

  // @Input() applicationId!: string;

  @Output() findRightsEvent = new EventEmitter();

  @Output() addRightToPermissionEvent = new EventEmitter();

  @Output() updatePermissionEvent = new EventEmitter();

  @Output() getPermissionsEvent = new EventEmitter();

  @Output() deletePermissionEvent = new EventEmitter();

  @Output() deleteAllPermissionsEvent = new EventEmitter();

  @Output() deleteRightEvent = new EventEmitter();

  @Output() updateRightEvent = new EventEmitter();

  actions!: Action[];

  type!: string;

  resource!: Service;

  permissions!: Permission[];

  gridOptions!: GridOptions;

  rightGridOptions!: GridOptions;

  columnDefs!: ColDef[];

  rightsColumnDefs!: ColDef[];

  showRights!: boolean;

  rightType!: string;

  permissionId!: string;

  rights!: Right[];

  loading: boolean = false;

  autoGroupColumnDef!: ColDef;

  rowSelection: 'single' | 'multiple' = 'multiple';

  defaultColDef!: ColDef;

  selectedRightsUpdated!: boolean;

  displayCreatePermission: boolean = false;

  displayUpdatePermission: boolean = false;

  displayUpdateModule: boolean = false;

  moduleId!: string;

  rightId!: string;

  private unSub$ = new Subject<void>();

  loadingPermissionsData: boolean = false;

  permissionsInfosMessage: any = {
    message: 'aucune permission à afficher',
    class: 'text-green-500',
  };

  gridApi!: GridApi;

  constructor(
    @Inject('env') private env: any,
    private LayoutToastsService: LayoutToastsService,
    private permissionsService: PermissionsService
  ) {
    entreprise.LicenseManager.setLicenseKey(this.env.aggridEntrepriseKey);
    this.getUserGridActions();
  }

  getUserGridActions() {
    this.permissionsService
      .getUpdate()
      .pipe(takeUntil(this.unSub$))
      .subscribe((actionData) => {
        if (actionData) {
          if (actionData.data.operation === 'updatePermission') {
            this.permissionId = actionData.data.id;
            this.displayUpdatePermission = true;
          } else if (actionData.data.operation === 'updateModule') {
            this.moduleId = actionData.data.id;
            this.displayUpdateModule = true;
          } else if (actionData.data.operation === 'deletePermission') {
            this.deletePermissionEvent.emit({ id: actionData.data.id });
          } else if (actionData.data.operation === 'deleteModule') {
            this.deleteAllPermissionsEvent.emit({
              moduleId: actionData.data.id,
            });
          } else if (actionData.data.operation === 'deleteRight') {
            this.deleteRightEvent.emit({ id: actionData.data.id });
          } else if (actionData.data.operation === 'updateRight') {
            this.rightId = actionData.data.id;
          }
        }
      });
  }

  ngOnInit(): void {
    // this.permissions = [];
    this.showRights = false;
    this.gridOptions = {
      columnDefs: this.columnDefs,
      rowSelection: {
        mode: 'multiRow',
        enableClickSelection: false, // Disables click selection
      } as RowSelectionOptions,
    };

    this.rightGridOptions = {
      columnDefs: this.rightsColumnDefs,
      rowSelection: {
        mode: 'multiRow',
        enableClickSelection: false, // Disables click selection
      } as RowSelectionOptions,
    };
    this.defaultColDef = {
      flex: 1,
      minWidth: 100,
    };
  }

  ngOnChanges() {
    this.initData();
  }

  onGridReady(params: { api: GridApi }) {
    this.gridApi = params.api;
  }

  onCellClicked(e: CellClickedEvent): void {
    if (e.colDef.field !== 'droitRestr' && e.colDef.field !== 'droitSpec') {
      this.gridApi?.setGridOption('columnDefs', this.columnDefs);
    }

    if (
      (e.colDef.field === 'droitRestr' || e.colDef.field === 'droitSpec') &&
      e.data
    ) {
      this.rightType =
        e.colDef.field === 'droitRestr' ? 'restriction' : 'special';
      this.initRightsGrid();
      this.selectedRightsUpdated = false;
      this.showRights = true;
      this.rightId = '';
      if (e.data) {
        this.resource = e.data.resource;
        this.permissionId = e.data.id;
        this.findRightsEvent.emit({
          type: this.rightType,
          service: this.resource.id,
        });
        this.rightGridOptions.context = {
          permissionId: this.permissionId,
        };
      }
    }
  }

  saveEvent(event: any) {
    const message =
      event.operation === 'add'
        ? 'votre élément a été ajouté avec succès'
        : 'votre élément a été modifié avec succès';

    this.gridApi?.setGridOption('loading', true);
    this.findRightsEvent.emit({
      type: this.rightType,
      service: this.resource.id,
    });
    window.scrollTo(0, 900);
    this.rightId = '';
    this.LayoutToastsService.showSuccess(message);
  }

  addRightToPermission() {
    const selectedRights = this.gridApi ? this.gridApi.getSelectedRows() : [];

    this.addRightToPermissionEvent.emit({
      permissionId: this.permissionId,
      rightType: this.rightType,
      selectedRights,
    });
  }

  updatePermission() {
    this.loading = true;
    const newPermissions: updatePermission[] = [];
    const selectedPermissions = this.gridApi
      ? this.gridApi.getSelectedRows()
      : [];

    if (selectedPermissions.length > 0) {
      selectedPermissions.map((permission) => {
        const actions: updateAction[] = [];

        permission.actions.map((action: any) => {
          actions.push({ id: action.action.id, status: action.status });
        });
        newPermissions.push({ id: permission.id, actions });
      });
      this.updatePermissionEvent.emit({ newPermissions });
    }
  }

  disableUpdatePemission() {
    if (this.gridApi?.getSelectedRows()) {
      return (
        this.gridApi?.getSelectedRows()?.length === 0 ||
        this.permissions.length === 0
      );
    } else {
      return true;
    }
  }

  onFirstRightsRendered(params: FirstDataRenderedEvent<Right>) {
    params.api.forEachNode((node) =>
      node.setSelected(
        !!node.data &&
          node.data.permissions.findIndex(
            (permission) => permission.id === this.permissionId
          ) !== -1
      )
    );
  }

  initPermissionsGrid() {
    this.columnDefs = [];
    this.columnDefs.push({ field: 'module.name', rowGroup: true, hide: true });

    if (this.actions && this.actions.length > 0) {
      this.columnDefs.push({
        field: 'accesTotal',
        pinned: 'left',
        width: 10,
        cellRenderer: function (params: any) {
          if (params.data) {
            const fragment = document.createElement('label');

            fragment.className = 'container';
            const input = document.createElement('input');

            input.type = 'checkbox';
            const indexGreen = params.data.actions.findIndex(
              (permissionAction: any) => permissionAction.status === false
            );
            const indexRed = params.data.actions.findIndex(
              (permissionAction: any) => permissionAction.status === true
            );

            input.checked = indexGreen === -1;
            const span = document.createElement('span');

            if (indexGreen !== -1 && indexRed === -1) {
              span.style.backgroundColor = 'red';
            } else if (indexGreen === -1 && indexRed !== -1) {
              span.style.backgroundColor = 'green';
            } else if (indexGreen !== -1 && indexRed !== -1) {
              span.style.backgroundColor = 'orange';
            }
            span.className = 'checkmark';
            fragment.appendChild(input);
            fragment.appendChild(span);
            input.addEventListener('click', function () {
              input.checked != input.checked;
              params.data.actions.map(
                (item: any) => (item.status = input.checked)
              );
            });

            return fragment;
          } else {
            const fragment = document.createElement('label');

            fragment.className = 'container';
            const input = document.createElement('input');

            input.type = 'checkbox';
            let indexGreen = -1;
            let indexRed = -1;

            params.node.allLeafChildren.map((node: any) => {
              if (
                node.data.actions.findIndex(
                  (action: any) => action.status === false
                ) !== -1
              ) {
                indexRed = 1;
              }
              if (
                node.data.actions.findIndex(
                  (action: any) => action.status === true
                ) !== -1
              ) {
                indexGreen = 1;
              }
            });
            input.checked = indexRed === -1;
            const span = document.createElement('span');

            if (indexGreen === 1 && indexRed === -1) {
              span.style.backgroundColor = 'green';
            } else if (indexGreen === -1 && indexRed !== -1) {
              span.style.backgroundColor = 'red';
            } else if (indexGreen !== -1 && indexRed !== -1) {
              span.style.backgroundColor = 'orange';
            }
            span.className = 'checkmark';
            fragment.appendChild(input);
            fragment.appendChild(span);
            input.addEventListener('click', function () {
              input.checked != input.checked;
              params.node.allLeafChildren.map((node: any) => {
                node.data.actions.map((action: any) => {
                  action.status = input.checked;
                });
              });
            });

            return fragment;
          }
        },
      });
      this.actions.map((action) => {
        this.columnDefs.push({
          field: action.name,
          width: 5,
          cellRenderer: function (params: any) {
            if (params.data) {
              const index = params.data.actions.findIndex(
                (permissionAction: any) =>
                  permissionAction.action.id === action.id
              );

              if (index !== -1) {
                const fragment = document.createElement('label');

                fragment.className = 'container';
                const input = document.createElement('input');

                input.type = 'checkbox';
                input.checked = params.data.actions[index].status;
                const span = document.createElement('span');

                span.style.backgroundColor =
                  input.checked === true ? 'green' : 'red';
                span.className = 'checkmark';
                fragment.appendChild(input);
                fragment.appendChild(span);
                input.addEventListener('click', function () {
                  input.checked != input.checked;
                  params.data.actions.map((item: any) => {
                    if (item.action.id === action.id) {
                      item.status = input.checked;
                    }
                  });
                });

                return fragment;
              } else {
                const label = document.createElement('label');

                label.innerHTML = '-';

                return label;
              }
            }

            return;
          },
        });
      });
    }
    this.columnDefs.push({
      field: 'droitRestr',
      pinned: 'right',
      headerName: 'Droit restr',
      width: 20,
      cellRenderer: function (params: any) {
        if (params.data) {
          const fragment = document.createElement('label');

          fragment.className = 'container';
          const input = document.createElement('input');

          input.type = 'checkbox';
          input.disabled = true;
          input.checked = params.data.restrictionRights.length > 0;
          const span = document.createElement('span');

          span.style.backgroundColor = input.checked === true ? 'green' : 'red';
          span.className = 'checkmark';
          fragment.appendChild(input);
          fragment.appendChild(span);

          return fragment;
        }

        return;
      },
      cellStyle: { cursor: 'pointer' },
    });
    this.columnDefs.push({
      field: 'droitSpec',
      pinned: 'right',
      headerName: 'Droit special',
      width: 20,
      cellRenderer: function (params: any) {
        if (params.data) {
          const fragment = document.createElement('label');

          fragment.className = 'container';
          const input = document.createElement('input');

          input.type = 'checkbox';
          input.disabled = true;
          input.checked = params.data.specialRights.length > 0;
          const span = document.createElement('span');

          span.style.backgroundColor = input.checked === true ? 'green' : 'red';
          span.className = 'checkmark';
          fragment.appendChild(input);
          fragment.appendChild(span);

          return fragment;
        }

        return;
      },
      cellStyle: { cursor: 'pointer' },
    });

    this.columnDefs.push({
      field: 'actions',
      pinned: 'right',
      width: 20,
      cellRenderer: PermissionActionControllerComponent,
    });

    this.autoGroupColumnDef = {
      headerName:
        this.type === 'service'
          ? 'Services IMS api full rest'
          : 'Fonctionnalités ensemble des modules',
      field: 'module.name',
      pinned: 'left',
      minWidth: 250,
      cellRenderer: 'agGroupCellRenderer',
      cellRendererParams: {
        innerRenderer: function (params: any) {
          if (params.data) {
            let checked = false;

            params.api.getSelectedRows().map((row: any) => {
              if (row.resource.id === params.data.resource.id) {
                checked = true;
              }
            });
            const globaleFragment = document.createElement('div');
            const fragment = document.createElement('label');

            fragment.className = 'container';
            const input = document.createElement('input');

            input.type = 'checkbox';
            input.checked = checked;
            const span = document.createElement('span');

            span.className = 'checkmark';
            const resourceName = document.createElement('span');

            resourceName.innerHTML = params.data.resource.name;
            const statusFalse = params.data.actions.findIndex(
              (item: any) => item.status === false
            );
            const statusTrue = params.data.actions.findIndex(
              (item: any) => item.status === true
            );

            if (statusFalse !== -1 && statusTrue === -1) {
              span.style.backgroundColor = 'red';
            } else if (statusFalse === -1 && statusTrue !== -1) {
              span.style.backgroundColor = 'green';
            } else if (statusFalse !== -1 && statusTrue !== -1) {
              span.style.backgroundColor = 'orange';
            }
            fragment.appendChild(input);
            fragment.appendChild(span);
            globaleFragment.appendChild(fragment);
            globaleFragment.appendChild(resourceName);
            input.addEventListener('click', function () {
              input.checked != input.checked;
              params.node.setSelected(input.checked);
            });

            return globaleFragment;
          } else {
            let checkedrows = 0;

            params.api.getSelectedRows().map((row: any) => {
              if (row.module.name === params.value) {
                checkedrows++;
              }
            });
            const globaleFragment = document.createElement('div');
            const fragment = document.createElement('label');

            fragment.className = 'container';
            const input = document.createElement('input');

            input.type = 'checkbox';
            input.checked = checkedrows === params.node.allChildrenCount;
            const span = document.createElement('span');

            span.className = 'checkmark';
            const moduleName = document.createElement('span');

            moduleName.innerHTML = params.value;

            let statusFalse = -1;
            let statusTrue = -1;

            params.api.forEachNode((node: any) => {
              if (params.value === node.key) {
                node.allLeafChildren.map((node: any) => {
                  if (
                    node.data.actions.findIndex(
                      (action: any) => action.status === false
                    ) !== -1
                  ) {
                    statusFalse = 1;
                  }
                  if (
                    node.data.actions.findIndex(
                      (action: any) => action.status === true
                    ) !== -1
                  ) {
                    statusTrue = 1;
                  }
                });
              }
            });
            if (statusFalse !== -1 && statusTrue === -1) {
              span.style.backgroundColor = 'red';
            } else if (statusFalse === -1 && statusTrue !== -1) {
              span.style.backgroundColor = 'green';
            } else if (statusFalse !== -1 && statusTrue !== -1) {
              span.style.backgroundColor = 'orange';
            } else {
              span.style.backgroundColor = 'red';
            }
            fragment.appendChild(input);
            fragment.appendChild(span);
            globaleFragment.appendChild(fragment);
            globaleFragment.appendChild(moduleName);

            input.addEventListener('click', function () {
              input.checked != input.checked;
              params.api.forEachNode((node: any) => {
                if (params.value === node.key) {
                  node.setSelected(input.checked);
                }
              });
            });

            return globaleFragment;
          }
        },
      },
    };
    this.gridApi?.setGridOption('columnDefs', this.columnDefs);
  }

  initRightsGrid() {
    this.rightsColumnDefs = [];
    this.rightsColumnDefs = [
      {
        field: '',
        cellRenderer: function (params: any) {
          if (params.data) {
            const input = document.createElement('input');

            input.type = 'checkbox';
            input.checked =
              params.data.permissions.findIndex(
                (item: any) => item.id === params.context.permissionId
              ) !== -1;
            params.node.setSelected(input.checked);
            input.addEventListener('click', function () {
              input.checked != input.checked;
              params.node.setSelected(input.checked);
            });

            return input;
          }

          return;
        },
      },
      {
        field: 'service.name',
        headerName:
          this.type === 'service'
            ? 'Services IMS api full rest'
            : 'Fonctionnalités ensemble des modules',
      },
      { field: 'statusPermission', headerName: 'Etat' },
      {
        field: 'context.name',
        headerName:
          this.rightType === 'special'
            ? 'Droit spécial'
            : 'Restriction associée',
      },
      { field: 'comment', headerName: 'Commentaire' },
      { field: 'actions', cellRenderer: RightActionControllerComponent },
    ];
    this.gridApi?.setGridOption('rowData', this.rightsColumnDefs);
  }

  initData() {
    if (this.data?.isLoading === false) {
      this.loading = false;
    }
    if (this.data?.permissionUpdated && this.data?.message) {
      this.LayoutToastsService.showSuccess(this.data.message);
    }
    if (this.data?.actions) {
      this.actions = this.data.actions;
    }
    if (this.data.type) {
      this.type = this.data.type;
    }
    if (
      this.data?.loadingPermissionsData === true ||
      this.data?.loadingPermissionsData === false
    ) {
      this.loadingPermissionsData = this.data?.loadingPermissionsData;
    }
    if (this.data?.permissions) {
      if (this.data.permissions.length === 0) {
        this.permissionsInfosMessage = {
          message: 'aucune permission à afficher',
          class: 'text-green-500',
        };
      }
      if (this.permissions?.length === 0) {
        this.showRights = false;
        this.permissions = this.data.permissions;
        if (this.permissions.length > 0) {
          this.initPermissionsGrid();
        }
      } else {
        this.permissions = this.data.permissions;
      }
    }
    if (this.data?.rights) {
      this.rights = this.data.rights;
    }
    if (this.data?.rightPermissionAffected) {
      this.getPermissionsEvent.emit();
    }
    if (this.data?.error) {
      this.getErrors(this.data.error);
    }
  }

  getErrors(error: any) {
    if (error.status === 404) {
      if ((error.error.message = 'Profile not found')) {
        this.loadingPermissionsData = false;
        this.permissionsInfosMessage = {
          message: 'permission refusée',
          class: 'text-red-500',
        };
      }
    }
  }

  onRightsCellClicked(e: CellClickedEvent): void {
    if (e.colDef.field === '') {
      let updated = false;

      this.gridApi?.forEachNode((item) => {
        const index = item.data.permissions.findIndex(
          (item: Permission) => item.id === this.permissionId
        );

        if (item.isSelected() === true) {
          if (index === -1) {
            updated = true;
          }
        } else {
          if (index !== -1) {
            updated = true;
          }
        }
      });
      this.selectedRightsUpdated = updated;
    }
  }

  showCreatePermissionModal() {
    this.displayCreatePermission = true;
  }

  cancel(event?: any) {
    if (event.cancel === true) {
      this.displayCreatePermission = false;
      this.displayUpdatePermission = false;
      this.displayUpdateModule = false;
      this.getPermissionsEvent.emit();
    }
  }

  ngOnDestroy(): void {
    this.unSub$.unsubscribe();
  }
}