SistemaMantenimiento/sistema-mantenimiento-front/src/app/components/users-profiles/profiles-admin/new-profile/new-profile.component.html

<div class="items-container animated fadeIn">
    <div id="navigation" class="mb-8">
        <div class="prev-page prevent-select indigo_primary_background mat-elevation-z8" (click)="goBack(1)" matRipple>
            <mat-icon style="color: white;">arrow_back</mat-icon>
            <div class="page-name ml-4">Administrador de perfiles</div>
        </div>
    </div>
    <mat-card class="override-elevation-z8" style="width: 100%; height: 100%;">
        <mat-card-title style="text-align: center;" class="prevent-select">{{ tituloCard }}</mat-card-title>
        <mat-card-content>
            <div class="loader-container prevent-select animated fadeIn" *ngIf="isLoading">
                <mat-spinner></mat-spinner>
                <h2 class="loader-label">Cargando...</h2>
            </div>
            <div class="error-container prevent-select animated fadeIn fast" *ngIf="!isLoading && hasError">
                <mat-icon style="color: #e53935; transform: scale(5); margin: 48px;">error</mat-icon>
                <h1 style="color: #e53935;">¡Error!</h1>
                <p style="font-style: italic; font-size: 16px; overflow-wrap: anywhere; text-align: center;">{{ errorStr }}</p>
            </div>
            <div class="name-container prevent-select animated fadeIn" *ngIf="!isLoading && !hasError">
                <mat-form-field appearance="outline" style="width: 384px;">
                    <mat-label>Nombre del perfil</mat-label>
                    <input matInput placeholder="Ingresa el nombre del perfil" [formControl]="profileName" [errorStateMatcher]="errorMatcher">
                    <mat-error *ngIf="profileName.hasError('required')">
                        El nombre del perfil es <strong>requerido</strong>
                    </mat-error>
                    <mat-error *ngIf="profileName.hasError('minlength')">
                        El nombre del perfil debe tener al menos <strong>8 caracteres</strong>
                    </mat-error>
                    <mat-error *ngIf="profileName.hasError('maxlength')">
                        El nombre del perfil debe tener máximo <strong>50 caracteres</strong>
                    </mat-error>
                </mat-form-field>
                <h2>Asignar permisos</h2>
                <div class="accordion-container">
                    <mat-accordion class="example-headers-align">
                        <mat-expansion-panel *ngFor="let module of permissions" class="mat-elevation-z0 borders">
                            <mat-expansion-panel-header>
                                <mat-panel-title>
                                    {{ module.id }}
                                </mat-panel-title>
                                <mat-panel-description>
                                    {{ module.name }}
                                    <mat-chip-listbox>
                                        <mat-chip class="white_font no_wrap" [ngClass]="{
                                            green_primary_background: module.access == 2,
                                            amber_primary_background: module.access == 1,
                                            red_primary_background: module.access == 0
                                        }" (click)="enableModule(module.id)">{{ getAccessText(module.access) }}</mat-chip>
                                    </mat-chip-listbox>
                                </mat-panel-description>
                            </mat-expansion-panel-header>
                            <mat-accordion *ngIf="hasChildren(module.id)" class="example-headers-align">
                                <mat-expansion-panel *ngFor="let submodule of module.children" class="mat-elevation-z0 borders">
                                    <mat-expansion-panel-header>
                                        <mat-panel-title>
                                            {{ submodule.id }}
                                        </mat-panel-title>
                                        <mat-panel-description>
                                            {{ submodule.name }}
                                            <mat-chip-listbox>
                                                <mat-chip class="white_font no_wrap" [ngClass]="{
                                                    green_primary_background: submodule.access == 2,
                                                    amber_primary_background: submodule.access == 1,
                                                    red_primary_background: submodule.access == 0
                                                }" (click)="enableSubmodule(module.id, submodule.id)">{{ getAccessText(submodule.access) }}</mat-chip>
                                            </mat-chip-listbox>
                                        </mat-panel-description>
                                    </mat-expansion-panel-header>
                                    <mat-accordion class="example-headers-align">
                                        <mat-expansion-panel *ngFor="let function of submodule.children" [hideToggle]="function.children == undefined || function.children == null || function.children.length == 0" class="mat-elevation-z0 borders">
                                            <mat-expansion-panel-header>
                                                <mat-panel-title>
                                                    {{ function.id }}
                                                </mat-panel-title>
                                                <mat-panel-description>
                                                    {{ function.name }}
                                                    <mat-chip-listbox>
                                                        <mat-chip class="white_font no_wrap" [ngClass]="{
                                                            green_primary_background: function.access == 2,
                                                            amber_primary_background: function.access == 1,
                                                            red_primary_background: function.access == 0
                                                        }" (click)="enableFunction(module.id, submodule.id, function.id)">{{ getAccessText(function.access) }}</mat-chip>
                                                    </mat-chip-listbox>
                                                </mat-panel-description>
                                            </mat-expansion-panel-header>
                                            <mat-accordion *ngIf="!(function.children == undefined || function.children == null || function.children.length == 0)" class="example-headers-align">
                                                <mat-expansion-panel *ngFor="let screen of function.children" hideToggle class="mat-elevation-z0 borders">
                                                    <mat-expansion-panel-header>
                                                        <mat-panel-title>
                                                            {{ screen.id }}
                                                        </mat-panel-title>
                                                        <mat-panel-description>
                                                            {{ screen.name }}
                                                            <mat-chip-listbox>
                                                                <mat-chip class="white_font no_wrap" [ngClass]="{
                                                                    green_primary_background: screen.access == 2,
                                                                    amber_primary_background: screen.access == 1,
                                                                    red_primary_background: screen.access == 0
                                                                }" (click)="enableScren(module.id, submodule.id, function.id, screen.id)">{{ getAccessText(screen.access) }}</mat-chip>
                                                            </mat-chip-listbox>
                                                        </mat-panel-description>
                                                    </mat-expansion-panel-header>
                                                </mat-expansion-panel>
                                            </mat-accordion>
                                        </mat-expansion-panel>
                                    </mat-accordion>
                                </mat-expansion-panel>
                            </mat-accordion>
                            <div *ngIf="!hasChildren(module.id)" class="img-container">
                                <img src="assets/img/empty_data.svg" alt="prueba" width="128px" class="mb-8">
                                <p>No se encontró información</p>
                            </div>
                        </mat-expansion-panel>
                    </mat-accordion>
                </div>
            </div>
        </mat-card-content>
        <mat-card-actions align="end" *ngIf="!isLoading && !hasError">
            <div matTooltip="Su perfil no cuenta con los permisos suficientes para ejecutar esta acción." 
            [matTooltipDisabled]="realTimeUpdateEnabled" *ngIf="action != 'detalles'">
                <button mat-button (click)="save()" [disabled]="!realTimeUpdateEnabled">Guardar perfil</button>
            </div>
        </mat-card-actions>
    </mat-card>
</div>