AC-2410 Migrate Events Component (#8970)

* AC-2410 Migrate Events Component

* AC-2410 Addressed a minor correction

apps/web/src/app/admin-console/organizations/manage/events.component.html

@@ -1,6 +1,6 @@
 <app-header></app-header>
 
-<div class="tw-mb-4">
+<div class="tw-mb-4" [formGroup]="eventsForm">
   <div class="tw-mt-4 tw-flex tw-items-center">
     <bit-form-field>
       <bit-label>{{ "from" | i18n }}</bit-label>
@@ -8,7 +8,7 @@
         bitInput
         type="datetime-local"
         placeholder="{{ 'startDate' | i18n }}"
-        [(ngModel)]="start"
+        formControlName="start"
         (change)="dirtyDates = true"
       />
     </bit-form-field>
@@ -19,51 +19,44 @@
         bitInput
         type="datetime-local"
         placeholder="{{ 'endDate' | i18n }}"
-        [(ngModel)]="end"
+        formControlName="end"
         (change)="dirtyDates = true"
       />
     </bit-form-field>
-    <form #refreshForm [appApiAction]="refreshPromise">
+    <form>
       <button
         class="tw-mx-3 tw-mt-1"
         type="button"
         bitButton
+        bitFormButton
         buttonType="primary"
-        (click)="loadEvents(true)"
-        [disabled]="loaded && refreshForm.loading"
+        [bitAction]="refreshEvents"
       >
         {{ "update" | i18n }}
       </button>
     </form>
-    <form #exportForm [appApiAction]="exportPromise">
+    <form>
       <button
         type="button"
         class="tw-mt-1"
         bitButton
-        [ngClass]="{ loading: exportForm.loading }"
-        (click)="exportEvents()"
-        [disabled]="(loaded && exportForm.loading) || dirtyDates"
+        bitFormButton
+        [bitAction]="exportEvents"
+        [disabled]="dirtyDates"
       >
         <span>{{ "export" | i18n }}</span>
-        <i
-          class="bwi bwi-fw"
-          aria-hidden="true"
-          [ngClass]="{
-            'bwi-sign-in': !exportForm.loading,
-            'bwi-spinner bwi-spin': exportForm.loading
-          }"
-        ></i>
+        <i class="bwi bwi-fw bwi-sign-in" aria-hidden="true"></i>
       </button>
     </form>
   </div>
 </div>
 <ng-container *ngIf="!loaded">
   <i
-    class="bwi bwi-spinner bwi-spin text-muted"
+    class="bwi bwi-spinner bwi-spin tw-text-muted"
     title="{{ 'loading' | i18n }}"
     aria-hidden="true"
   ></i>
-  <span class="sr-only">{{ "loading" | i18n }}</span>
+  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container *ngIf="loaded">
   <p *ngIf="!events || !events.length">{{ "noEventsInList" | i18n }}</p>
@@ -90,21 +83,12 @@
     </ng-template>
   </bit-table>
   <button
-    #moreBtn
-    [appApiAction]="morePromise"
     type="button"
     bitButton
     buttonType="primary"
-    (click)="loadEvents(false)"
-    [disabled]="loaded && $any(moreBtn).loading"
+    [bitAction]="loadMoreEvents"
     *ngIf="continuationToken"
   >
-    <i
-      class="bwi bwi-spinner bwi-spin"
-      title="{{ 'loading' | i18n }}"
-      aria-hidden="true"
-      *ngIf="moreBtn.loading"
-    ></i>
-    <span>{{ "loadMore" | i18n }}</span>
+    {{ "loadMore" | i18n }}
   </button>
 </ng-container>

apps/web/src/app/admin-console/organizations/manage/events.component.ts

@@ -108,7 +108,7 @@ export class EventsComponent extends BaseEventsComponent implements OnInit, OnDe
       }
     }
 
-    await this.loadEvents(true);
+    await this.refreshEvents();
     this.loaded = true;
   }