feat(admin): add bulk operations to applications overview

Application overview now allows to approve, reject, delete and resend notification in bulk.
Selected applications have to have the same state.
Each action will prompt a confirmation dialog.
The page was refactored as it is shared for Vo and Groups

Author: michalberky

apps/admin-gui/src/app/shared/components/application-actions/application-actions.component.html

@@ -0,0 +1,92 @@
+<h1 class="page-subtitle">{{'VO_DETAIL.APPLICATION.TITLE' | translate}}</h1>
+<div class="action-row">
+  <perun-web-apps-refresh-button (refresh)="refreshTable()"></perun-web-apps-refresh-button>
+  <span [matTooltip]="!canPerformAction.approve ? tooltipMessages.approve : ''">
+    <button
+      *ngIf="authRights.approve"
+      [disabled]="!canPerformAction.approve"
+      (click)="onApprove()"
+      color="accent"
+      mat-flat-button>
+      {{'VO_DETAIL.APPLICATION.APPLICATION_DETAIL.APPROVE' | translate}}
+    </button>
+  </span>
+  <span [matTooltip]="!canPerformAction.reject ? tooltipMessages.reject : ''">
+    <button
+      *ngIf="authRights.reject"
+      [disabled]="!canPerformAction.reject"
+      (click)="onReject()"
+      color="warn"
+      mat-flat-button>
+      {{'VO_DETAIL.APPLICATION.APPLICATION_DETAIL.REJECT' | translate}}
+    </button>
+  </span>
+  <span [matTooltip]="!canPerformAction.delete ? tooltipMessages.delete : ''">
+    <button
+      *ngIf="authRights.delete"
+      [disabled]="!canPerformAction.delete"
+      (click)="onDelete()"
+      color="warn"
+      mat-flat-button>
+      {{'VO_DETAIL.APPLICATION.APPLICATION_DETAIL.DELETE' | translate}}
+    </button>
+  </span>
+  <span [matTooltip]="!canPerformAction.resend ? tooltipMessages.resend : ''">
+    <button
+      *ngIf="authRights.resend"
+      [disabled]="!canPerformAction.resend"
+      (click)="onResend()"
+      mat-stroked-button>
+      <i class="material-icons"> mail_outline </i>
+      {{'VO_DETAIL.APPLICATION.APPLICATION_DETAIL.SEND_NOTIFICATION' | translate}}
+    </button>
+  </span>
+  <perun-web-apps-application-state-selector (stateChanged)="statesChanged($event)">
+  </perun-web-apps-application-state-selector>
+  <perun-web-apps-debounce-filter
+    [placeholder]="'VO_DETAIL.APPLICATION.FILTER'"
+    (filter)="applyFilter($event)">
+  </perun-web-apps-debounce-filter>
+  <perun-web-apps-date-range
+    [endDate]="endDate"
+    [startDate]="startDate"></perun-web-apps-date-range>
+  <span [matTooltip]="tooltipMessages.columnSettings" matTooltipPosition="above">
+    <button
+      *ngIf="authRights.columnSettings"
+      [disabled]="showAllDetails"
+      (click)="viewChanged()"
+      mat-stroked-button>
+      <mat-icon>settings</mat-icon>
+    </button>
+  </span>
+</div>
+<div class="action-row">
+  <mat-slide-toggle [checked]="showAllDetails" (change)="toggleDetailedView()">
+    {{'VO_DETAIL.APPLICATION.SHOW_ALL_DETAILS' | translate}}
+  </mat-slide-toggle>
+  <mat-slide-toggle *ngIf="vo" [checked]="showGroupApps" (change)="toggleIncludeGroups()">
+    {{'VO_DETAIL.APPLICATION.SHOW_GROUP_APPLICATIONS' | translate}}
+  </mat-slide-toggle>
+</div>
+<ng-template #spinner>
+  <perun-web-apps-loading-table></perun-web-apps-loading-table>
+</ng-template>
+<div class="position-relative">
+  <perun-web-apps-applications-dynamic-list
+    *perunWebAppsLoader="loading$ | async; indicator: spinner"
+    (loading$)="loading$ = $event"
+    (selectedApplications)="onSelectedApplicationsChange($event)"
+    [tableId]="showAllDetails ? detailTableId : tableId"
+    [searchString]="filterValue"
+    [displayedColumns]="currentColumns"
+    [fedColumnsFriendly]="showAllDetails ? [] : configuredFedColumns"
+    [fedAttrs]="fedAttrs"
+    [states]="currentStates"
+    [dateFrom]="startDate.value"
+    [dateTo]="endDate.value"
+    [includeGroupApps]="showGroupApps"
+    [refreshTable]="refresh"
+    [vo]="vo"
+    [group]="group">
+  </perun-web-apps-applications-dynamic-list>
+</div>

apps/admin-gui/src/app/shared/components/application-actions/application-actions.component.scss

@@ -0,0 +1,10 @@
+.action-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}