Refactored user roles (#3791)

libs/dh/admin/feature-user-management-new/src/lib/details/details.component.ts

@@ -49,7 +49,7 @@ import {
 } from '@energinet-datahub/dh/shared/domain/graphql';
 
 import { DhNavigationService } from '@energinet-datahub/dh/shared/navigation';
-import { DhUserRolesComponent } from '@energinet-datahub/dh/admin/feature-user-roles';
+import { DhUserRolesComponent } from '@energinet-datahub/dh/admin/feature-user-roles-new';
 import { DhPermissionRequiredDirective } from '@energinet-datahub/dh/shared/feature-authorization';
 
 import { DhDeactivteComponent } from './deactivate.component';

libs/dh/admin/feature-user-roles-new/src/index.ts

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export * from './lib/dh-user-roles.component';
+export * from './lib/user-roles.component';
 export { DhCreateUserRoleComponent } from './lib/create.component';
 export { DhEditUserRoleModalComponent } from './lib/details/edit.component';
 export { DhUserRoleDetailsComponent } from './lib/details/details.component';

libs/dh/admin/feature-user-roles-new/src/lib/user-roles.component.html

@@ -0,0 +1,96 @@
+<!--
+@license
+Copyright 2020 Energinet DataHub A/S
+
+Licensed under the Apache License, Version 2.0 (the "License2");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+@if (loading()) {
+  <vater-flex direction="row" justify="center">
+    <watt-spinner />
+  </vater-flex>
+} @else if (hasError()) {
+  <vater-flex direction="row" justify="center">
+    <watt-empty-state
+      icon="custom-power"
+      [title]="'shared.error.title' | transloco"
+      [message]="'shared.error.message' | transloco"
+    />
+  </vater-flex>
+} @else {
+  <mat-accordion *transloco="let t; read: 'admin.userManagement.tabs.roles'" multi>
+    @for (actor of userRolesPerActor(); track actor) {
+      <watt-expandable-card
+        variant="solid"
+        [expanded]="expanded()"
+        *transloco="let translateMarketRole; read: 'marketParticipant.marketRoles'"
+      >
+        @if (!selectMode()) {
+          <watt-badge>{{
+            t("assigned.count", { count: (actor.userRoles | filterUserRoles: false).length })
+          }}</watt-badge>
+        }
+
+        @let title =
+          actor.glnOrEicNumber +
+          " • " +
+          actor.organization.name +
+          " - " +
+          (actor.name ? actor.name + " - " : "") +
+          translateMarketRole(actor.userRoles[0].eicFunction);
+
+        <watt-expandable-card-title>
+          {{ title }}
+
+          @if (actor.id === user()?.administratedBy?.id) {
+            <watt-icon
+              name="personCheck"
+              wattTooltipPosition="right"
+              [wattTooltip]="t('userResponsible')"
+            />
+          }
+        </watt-expandable-card-title>
+
+        @if (!checkIfAtLeastOneRoleIsAssigned(actor.id) && selectMode()) {
+          <watt-field-error>
+            {{ t("atleastOneRole") }}
+          </watt-field-error>
+        }
+
+        <watt-table
+          [dataSource]="actor.userRoles | filterUserRoles: selectMode() | userRolesIntoTable"
+          [initialSelection]="actor.userRoles | filterUserRoles: false"
+          [columns]="columns"
+          sortBy="marketRole"
+          sortDirection="asc"
+          [selectable]="selectMode()"
+          (selectionChange)="selectionChanged(actor.id, $event, actor.userRoles)"
+        >
+          <ng-container
+            *wattTableCell="columns['name']; header: t('assigned.columns.name'); let element"
+          >
+            {{ element.name }}
+          </ng-container>
+          <ng-container
+            *wattTableCell="
+              columns['description'];
+              header: t('assigned.columns.description');
+              let element
+            "
+          >
+            {{ element.description }}
+          </ng-container>
+        </watt-table>
+      </watt-expandable-card>
+    }
+  </mat-accordion>
+}

libs/dh/admin/feature-user-roles-new/src/lib/dh-user-roles.component.ts → libs/dh/admin/feature-user-roles-new/src/lib/user-roles.component.ts

@@ -14,58 +14,72 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  input,
-  output,
-  ViewEncapsulation,
-} from '@angular/core';
+import { effect, input, output, computed, Component, ChangeDetectionStrategy } from '@angular/core';
+
 import { FormsModule } from '@angular/forms';
 import { MatExpansionModule } from '@angular/material/expansion';
-import { TranslocoDirective } from '@ngneat/transloco';
 
+import { TranslocoDirective, TranslocoPipe } from '@ngneat/transloco';
+
+import { WattIconComponent } from '@energinet-datahub/watt/icon';
 import { WattBadgeComponent } from '@energinet-datahub/watt/badge';
+import { VaterFlexComponent } from '@energinet-datahub/watt/vater';
+import { WattSpinnerComponent } from '@energinet-datahub/watt/spinner';
+import { WattTooltipDirective } from '@energinet-datahub/watt/tooltip';
 import { WattFieldErrorComponent } from '@energinet-datahub/watt/field';
+import { WattEmptyStateComponent } from '@energinet-datahub/watt/empty-state';
 import { WattTableColumnDef, WATT_TABLE } from '@energinet-datahub/watt/table';
 import { WATT_EXPANDABLE_CARD_COMPONENTS } from '@energinet-datahub/watt/expandable-card';
-import { WattIconComponent } from '@energinet-datahub/watt/icon';
-import { WattTooltipDirective } from '@energinet-datahub/watt/tooltip';
 
 import {
+  UpdateUserRoles,
   DhActorUserRole,
   DhActorUserRoles,
-  UpdateUserRoles,
 } from '@energinet-datahub/dh/admin/shared';
 
-import {
-  FilterUserRolesPipe,
-  UserRolesIntoTablePipe,
-} from './dh-filter-user-roles-into-table.pipe';
 import { lazyQuery } from '@energinet-datahub/dh/shared/util-apollo';
 import { GetActorsAndUserRolesDocument } from '@energinet-datahub/dh/shared/domain/graphql';
 
+import { FilterUserRolesPipe, UserRolesIntoTablePipe } from './filter-user-roles-into-table.pipe';
+
 @Component({
   selector: 'dh-user-roles',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
   standalone: true,
-  templateUrl: './dh-user-roles.component.html',
-  styleUrls: ['./dh-user-roles.component.scss'],
+  templateUrl: './user-roles.component.html',
+  styles: `
+    watt-expandable-card {
+      watt-badge {
+        flex: 0 0 auto;
+      }
+
+      watt-expandable-card-title {
+        display: flex;
+        gap: var(--watt-space-s);
+
+        watt-icon {
+          color: var(--watt-color-primary-darker);
+        }
+      }
+    }
+  `,
   imports: [
+    FormsModule,
+    TranslocoPipe,
     TranslocoDirective,
     MatExpansionModule,
-    FormsModule,
 
     WATT_TABLE,
     WattIconComponent,
     WattBadgeComponent,
+    WattSpinnerComponent,
     WattTooltipDirective,
+    WattEmptyStateComponent,
     WattFieldErrorComponent,
     WATT_EXPANDABLE_CARD_COMPONENTS,
 
+    VaterFlexComponent,
+
     FilterUserRolesPipe,
     UserRolesIntoTablePipe,
   ],
@@ -84,6 +98,9 @@ export class DhUserRolesComponent {
 
   user = computed(() => this.actorsAndRolesQuery.data()?.userById);
 
+  loading = this.actorsAndRolesQuery.loading;
+  hasError = this.actorsAndRolesQuery.hasError;
+
   userRolesPerActor = computed(() => this.user()?.actors ?? []);
 
   columns: WattTableColumnDef<DhActorUserRole> = {