feat: actors drawer empty and error messages (#2151)

Energinet-DataHub · Oct 16, 2023 · 54fc7ef · 54fc7ef
1 parent 66e728b
commit 54fc7ef
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 6 deletions.
diff --git a/libs/dh/globalization/assets-localization/src/assets/i18n/da.json b/libs/dh/globalization/assets-localization/src/assets/i18n/da.json
@@ -639,6 +639,10 @@
       "drawer": {
         "edit": "Rediger organisation",
         "tabs": {
+          "shared": {
+            "error": "En fejl opstod",
+            "noData": "Ingen data"
+          },
           "masterData": {
             "tabLabel": "Information",
             "businessRegisterIdentifier": "CVR",

diff --git a/libs/dh/globalization/assets-localization/src/assets/i18n/en.json b/libs/dh/globalization/assets-localization/src/assets/i18n/en.json
@@ -646,6 +646,10 @@
       "drawer": {
         "edit": "Edit organisation",
         "tabs": {
+          "shared": {
+            "error": "An error occurred",
+            "noData": "No data"
+          },
           "masterData": {
             "tabLabel": "Information",
             "businessRegisterIdentifier": "Business ID",

diff --git a/...icipant/actors/feature-organizations/src/lib/drawer/dh-organization-drawer.component.html b/...icipant/actors/feature-organizations/src/lib/drawer/dh-organization-drawer.component.html
@@ -32,27 +32,49 @@ <h2 class="organization-heading">{{ organization?.name }}</h2>
     <watt-drawer-content *ngIf="drawer.isOpen">
       <watt-tabs>
         <watt-tab [label]="t('tabs.masterData.tabLabel')">
-          <watt-card variant="solid">
+          <vater-stack [fill]="'horizontal'" [align]="'center'">
+            <watt-spinner *ngIf="isLoadingOrganization" />
+          </vater-stack>
+          <watt-empty-state
+            *ngIf="!isLoadingOrganization && !organization"
+            [icon]="organizationFailedToLoad ? 'custom-power' : 'cancel'"
+            size="small"
+            [title]="organizationFailedToLoad ? t('tabs.shared.error') : t('tabs.shared.noData')"
+          ></watt-empty-state>
+          <watt-card variant="solid" *ngIf="!isLoadingOrganization && organization">
             <watt-description-list variant="stack">
               <watt-description-list-item
                 [label]="t('tabs.masterData.businessRegisterIdentifier')"
-                [value]="organization?.businessRegisterIdentifier"
+                [value]="organization.businessRegisterIdentifier"
               ></watt-description-list-item>
 
               <watt-description-list-item
                 [label]="t('tabs.masterData.name')"
-                [value]="organization?.name"
+                [value]="organization.name"
               ></watt-description-list-item>
 
               <watt-description-list-item
                 [label]="t('tabs.masterData.domain')"
-                [value]="organization?.domain"
+                [value]="organization.domain"
               ></watt-description-list-item>
             </watt-description-list>
           </watt-card>
         </watt-tab>
         <watt-tab [label]="t('tabs.actors.tabLabel')">
-          <watt-card variant="solid" style="padding-bottom: 0; padding-top: 8px">
+          <vater-stack [fill]="'horizontal'" [align]="'center'">
+            <watt-spinner *ngIf="isLoadingActors" />
+          </vater-stack>
+          <watt-empty-state
+            *ngIf="!isLoadingActors && actors.data.length === 0"
+            [icon]="actorsFailedToLoad ? 'custom-power' : 'cancel'"
+            size="small"
+            [title]="actorsFailedToLoad ? t('tabs.shared.error') : t('tabs.shared.noData')"
+          ></watt-empty-state>
+          <watt-card
+            variant="solid"
+            style="padding-bottom: 0; padding-top: 8px"
+            *ngIf="actors.data.length > 0 && !isLoadingActors"
+          >
             <watt-table
               [dataSource]="actors"
               [columns]="columns"

diff --git a/...rticipant/actors/feature-organizations/src/lib/drawer/dh-organization-drawer.component.ts b/...rticipant/actors/feature-organizations/src/lib/drawer/dh-organization-drawer.component.ts
@@ -38,6 +38,9 @@ import {
 } from '@energinet-datahub/dh/shared/domain/graphql';
 import { WATT_TABLE, WattTableColumnDef, WattTableDataSource } from '@energinet-datahub/watt/table';
 import { DhActorStatusBadgeComponent } from '@energinet-datahub/dh/market-participant/actors/feature-actors';
+import { WattEmptyStateComponent } from '@energinet-datahub/watt/empty-state';
+import { VaterStackComponent } from '@energinet-datahub/watt/vater';
+import { WattSpinnerComponent } from '@energinet-datahub/watt/spinner';
 
 import { DhOrganizationDetails } from '../dh-organization';
 import { DhOrganizationEditModalComponent } from '../edit/dh-edit-modal.component';
@@ -83,9 +86,15 @@ type Actor = {
     WATT_TABLE,
     WATT_TABS,
     WATT_CARD,
+
+    VaterStackComponent,
+
+    WattButtonComponent,
     WattDescriptionListComponent,
     WattDescriptionListItemComponent,
-    WattButtonComponent,
+    WattEmptyStateComponent,
+    WattSpinnerComponent,
+
     DhActorStatusBadgeComponent,
     DhEmDashFallbackPipe,
     DhPermissionRequiredDirective,
@@ -113,6 +122,12 @@ export class DhOrganizationDrawerComponent {
     query: GetActorsByOrganizationIdDocument,
   });
 
+  isLoadingOrganization = false;
+  organizationFailedToLoad = false;
+
+  isLoadingActors = false;
+  actorsFailedToLoad = false;
+
   organization: DhOrganizationDetails | undefined = undefined;
 
   actors: WattTableDataSource<Actor> = new WattTableDataSource<Actor>([]);
@@ -154,10 +169,18 @@ export class DhOrganizationDrawerComponent {
       .pipe(takeUntil(this.closed))
       .subscribe({
         next: (result) => {
+          this.isLoadingOrganization = result.loading;
+          this.organizationFailedToLoad =
+            !result.loading && (!!result.error || !!result.errors?.length);
+
           this.organization = result.data?.organizationById
             ? { ...result.data.organizationById, organizationId: id }
             : undefined;
         },
+        error: () => {
+          this.organizationFailedToLoad = true;
+          this.isLoadingOrganization = false;
+        },
       });
   }
 
@@ -170,7 +193,11 @@ export class DhOrganizationDrawerComponent {
       .pipe(takeUntil(this.closed))
       .subscribe({
         next: (result) => {
+          this.isLoadingActors = result.loading;
+          this.actorsFailedToLoad = !result.loading && (!!result.error || !!result.errors?.length);
+
           const data = result.data?.actorsByOrganizationId;
+
           this.actors.data = data
             ? [...data]
                 .sort((a, b) => a.name.localeCompare(b.name))
@@ -181,6 +208,10 @@ export class DhOrganizationDrawerComponent {
                 }))
             : [];
         },
+        error: () => {
+          this.actorsFailedToLoad = true;
+          this.isLoadingActors = false;
+        },
       });
   }
 }