Untitled
unknown
plain_text
a month ago
24 kB
5
Indexable
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(); } }
Editor is loading...
Leave a Comment