harbor/src/portal/src/app/shared/components/robot-permissions-panel/robot-permissions-panel.component.html

<ng-container *ngIf="mode === PermissionSelectPanelModes.MODAL">
    <div (click)="modalOpen = true">
        <ng-content select="[modal]"></ng-content>
    </div>
    <clr-modal
        [clrModalSize]="'lg'"
        [(clrModalOpen)]="modalOpen"
        [clrModalStaticBackdrop]="false">
        <div class="modal-body">
            <table class="table table-compact mt-0">
                <thead>
                    <tr>
                        <th class="left">
                            {{ 'AUDIT_LOG.RESOURCE' | translate }}
                        </th>
                        <th class="left" *ngFor="let item of candidateActions">
                            {{ convertKey(item) | translate }}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let resource of candidateResources">
                        <td class="left td">
                            {{ convertKey(resource) | translate }}
                        </td>
                        <td class="td" *ngFor="let action of candidateActions">
                            <input
                                *ngIf="isCandidate(resource, action)"
                                type="checkbox"
                                clrCheckbox
                                [disabled]="true"
                                [ngModel]="getCheckBoxValue(resource, action)"
                                (ngModelChange)="
                                    setCheckBoxValue(resource, action, $event)
                                " />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </clr-modal>
</ng-container>

<ng-container *ngIf="mode === PermissionSelectPanelModes.DROPDOWN">
    <clr-dropdown [clrCloseMenuOnItemClick]="false">
        <span #dropdown class="trigger" clrDropdownTrigger>
            <ng-content></ng-content>
        </span>
        <clr-dropdown-menu
            class="dropdown-menu p-1"
            clrPosition="{{ dropdownPosition }}"
            *clrIfOpen>
            <div>
                <button
                    class="btn btn-link btn-sm select-all-for-dropdown p-0"
                    (click)="selectAllOrUnselectAll()">
                    <span *ngIf="!isAllSelected()">{{
                        'SYSTEM_ROBOT.SELECT_ALL' | translate
                    }}</span>
                    <span *ngIf="isAllSelected()">{{
                        'SYSTEM_ROBOT.UNSELECT_ALL' | translate
                    }}</span>
                </button>
            </div>
            <table class="table table-compact mt-0">
                <thead>
                    <tr>
                        <th class="left">
                            {{ 'AUDIT_LOG.RESOURCE' | translate }}
                        </th>
                        <th class="left" *ngFor="let item of candidateActions">
                            {{ convertKey(item) | translate }}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let resource of candidateResources">
                        <td class="left td">
                            {{ convertKey(resource) | translate }}
                        </td>
                        <td class="td" *ngFor="let action of candidateActions">
                            <input
                                *ngIf="isCandidate(resource, action)"
                                type="checkbox"
                                clrCheckbox
                                [ngModel]="getCheckBoxValue(resource, action)"
                                (ngModelChange)="
                                    setCheckBoxValue(resource, action, $event)
                                " />
                        </td>
                    </tr>
                </tbody>
            </table>
        </clr-dropdown-menu>
    </clr-dropdown>
</ng-container>

<ng-container *ngIf="mode === PermissionSelectPanelModes.NORMAL">
    <div>
        <button
            class="btn btn-outline btn-sm"
            (click)="selectAllOrUnselectAll()">
            <span *ngIf="!isAllSelected()">{{
                'SYSTEM_ROBOT.SELECT_ALL' | translate
            }}</span>
            <span *ngIf="isAllSelected()">{{
                'SYSTEM_ROBOT.UNSELECT_ALL' | translate
            }}</span>
        </button>
    </div>
    <table class="table table-compact mt-0">
        <thead>
            <tr>
                <th class="left">{{ 'AUDIT_LOG.RESOURCE' | translate }}</th>
                <th class="left" *ngFor="let item of candidateActions">
                    {{ convertKey(item) | translate }}
                </th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let resource of candidateResources">
                <td class="left td">{{ convertKey(resource) | translate }}</td>
                <td class="td" *ngFor="let action of candidateActions">
                    <input
                        *ngIf="isCandidate(resource, action)"
                        type="checkbox"
                        clrCheckbox
                        [ngModel]="getCheckBoxValue(resource, action)"
                        (ngModelChange)="
                            setCheckBoxValue(resource, action, $event)
                        " />
                </td>
            </tr>
        </tbody>
    </table>
</ng-container>