Polish for Release (#2314)

2023-10-15 13:39:11 -05:00 · 2023-10-15 13:39:11 -05:00 · 59b950c4bd
commit 59b950c4bd
parent fe4af4b648
54 changed files with 1162 additions and 1056 deletions
--- a/UI/Web/src/app/sidenav/_components/customize-dashboard-modal/customize-dashboard-modal.component.html
+++ b/UI/Web/src/app/sidenav/_components/customize-dashboard-modal/customize-dashboard-modal.component.html
@ -3,7 +3,7 @@
    <h4 class="modal-title">{{t('title-' + activeTab)}}</h4>
    <button type="button" class="btn-close" [attr.aria-label]="t('close')" (click)="close()"></button>
  </div>
-  <div class="modal-body scrollable-modal {{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? '' : 'd-flex'}}">
+  <div #modalBody class="modal-body scrollable-modal {{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? '' : 'd-flex'}}">
    <ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-pills" orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 154px;">
      <li [ngbNavItem]="TabID.Dashboard">
        <a ngbNavLink>{{t(TabID.Dashboard)}}</a>
--- a/UI/Web/src/app/sidenav/_components/customize-dashboard-streams/customize-dashboard-streams.component.ts
+++ b/UI/Web/src/app/sidenav/_components/customize-dashboard-streams/customize-dashboard-streams.component.ts
@ -49,6 +49,12 @@ export class CustomizeDashboardStreamsComponent {
  constructor(public modal: NgbActiveModal) {
    forkJoin([this.dashboardService.getDashboardStreams(false), this.filterService.getAllFilters()]).subscribe(results => {
      this.items = results[0];
+
+      // After 100 items, drag and drop is disabled to use virtualization
+      if (this.items.length > 100) {
+        this.accessibilityMode = true;
+      }
+
      const smartFilterStreams = new Set(results[0].filter(d => !d.isProvided).map(d => d.name));
      this.smartFilters = results[1].filter(d => !smartFilterStreams.has(d.name));
      this.cdRef.markForCheck();
--- a/UI/Web/src/app/sidenav/_components/customize-sidenav-streams/customize-sidenav-streams.component.html
+++ b/UI/Web/src/app/sidenav/_components/customize-sidenav-streams/customize-sidenav-streams.component.html
@ -10,14 +10,25 @@
        <span role="alert" class="mt-1" *ngIf="listForm.get('filterSideNavStream')?.value">{{t('reorder-when-filter-present')}}</span>
      </div>
      <div class="col-3">
-        <div class="form-check form-check-inline" style="margin-top: 35px; margin-left: 10px">
-          <input class="form-check-input" type="checkbox" id="accessibility-mode" [value]="accessibilityMode" (change)="updateAccessibilityMode()">
-          <label class="form-check-label" for="accessibility-mode">{{t('order-numbers-label')}}</label>
-        </div>
+        <form [formGroup]="pageOperationsForm">
+          <div class="form-check form-check-inline" style="margin-top: 23px; margin-left: 10px">
+            <input class="form-check-input" type="checkbox" id="accessibility-mode" formControlName="accessibilityMode">
+            <label class="form-check-label" for="accessibility-mode">{{t('order-numbers-label')}}</label>
+          </div>
+          <div class="form-check form-check-inline" style="margin-left: 10px">
+            <input class="form-check-input" type="checkbox" id="bulk-mode" formControlName="bulkMode" >
+            <label class="form-check-label" for="bulk-mode">{{t('bulk-mode-label')}}</label>
+          </div>
+        </form>
      </div>
    </div>
-    <app-draggable-ordered-list [items]="items | filter: filterSideNavStreams" (orderUpdated)="orderUpdated($event)" [accessibilityMode]="accessibilityMode"
-                                [showRemoveButton]="false" [disabled]="listForm.get('filterSideNavStream')?.value">
+    <app-bulk-operations [modalMode]="true" [topOffset]="0" [actionCallback]="bulkActionCallback"></app-bulk-operations>
+    <app-draggable-ordered-list [items]="items | filter: filterSideNavStreams" (orderUpdated)="orderUpdated($event)"
+                                [accessibilityMode]="pageOperationsForm.get('accessibilityMode')!.value"
+                                [showRemoveButton]="false" [disabled]="listForm.get('filterSideNavStream')?.value"
+                                [bulkMode]="pageOperationsForm.get('bulkMode')!.value"
+                                [virtualizeAfter]="100"
+                                >
      <ng-template #draggableItem let-position="idx" let-item>
        <app-sidenav-stream-list-item [item]="item" [position]="position" (hide)="updateVisibility($event, position)"></app-sidenav-stream-list-item>
      </ng-template>
--- a/UI/Web/src/app/sidenav/_components/customize-sidenav-streams/customize-sidenav-streams.component.ts
+++ b/UI/Web/src/app/sidenav/_components/customize-sidenav-streams/customize-sidenav-streams.component.ts
@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, OnDestroy} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {SmartFilter} from "../../../_models/metadata/v2/smart-filter";
 import {FilterService} from "../../../_services/filter.service";
@ -11,36 +11,43 @@ import {
 import {SideNavStream} from "../../../_models/sidenav/sidenav-stream";
 import {NavService} from "../../../_services/nav.service";
 import {DashboardStreamListItemComponent} from "../dashboard-stream-list-item/dashboard-stream-list-item.component";
-import {CommonStream} from "../../../_models/common-stream";
 import {TranslocoDirective} from "@ngneat/transloco";
 import {SidenavStreamListItemComponent} from "../sidenav-stream-list-item/sidenav-stream-list-item.component";
 import {ExternalSourceService} from "../../../external-source.service";
 import {ExternalSource} from "../../../_models/sidenav/external-source";
-import {StreamType} from "../../../_models/dashboard/stream-type.enum";
 import {SideNavStreamType} from "../../../_models/sidenav/sidenav-stream-type.enum";
 import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
 import {FilterPipe} from "../../../pipe/filter.pipe";
+import {BulkOperationsComponent} from "../../../cards/bulk-operations/bulk-operations.component";
+import {Action, ActionItem} from "../../../_services/action-factory.service";
+import {BulkSelectionService} from "../../../cards/bulk-selection.service";
+import {filter, tap} from "rxjs/operators";
+import {takeUntilDestroyed} from "@angular/core/rxjs-interop";

@Component({
  selector: 'app-customize-sidenav-streams',
  standalone: true,
-  imports: [CommonModule, DraggableOrderedListComponent, DashboardStreamListItemComponent, TranslocoDirective, SidenavStreamListItemComponent, ReactiveFormsModule, FilterPipe],
+  imports: [CommonModule, DraggableOrderedListComponent, DashboardStreamListItemComponent, TranslocoDirective, SidenavStreamListItemComponent, ReactiveFormsModule, FilterPipe, BulkOperationsComponent],
  templateUrl: './customize-sidenav-streams.component.html',
  styleUrls: ['./customize-sidenav-streams.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CustomizeSidenavStreamsComponent {
+export class CustomizeSidenavStreamsComponent implements OnDestroy {

+  //@Input({required: true}) parentScrollElem!: Element | Window;
  items: SideNavStream[] = [];
  smartFilters: SmartFilter[] = [];
  externalSources: ExternalSource[] = [];
-  accessibilityMode: boolean = false;

  listForm: FormGroup = new FormGroup({
    'filterSideNavStream': new FormControl('', []),
    'filterSmartFilter': new FormControl('', []),
    'filterExternalSource': new FormControl('', []),
  });
+  pageOperationsForm: FormGroup = new FormGroup({
+    'accessibilityMode': new FormControl(false, []),
+    'bulkMode': new FormControl(false, [])
+  })

  filterSideNavStreams = (listItem: SideNavStream) => {
    const filterVal = (this.listForm.value.filterSideNavStream || '').toLowerCase();
@ -57,17 +64,87 @@ export class CustomizeSidenavStreamsComponent {
    return listItem.name.toLowerCase().indexOf(filterVal) >= 0;
  }

+  bulkActionCallback = (action: ActionItem<SideNavStream>, data: SideNavStream) => {
+    const streams = this.bulkSelectionService.getSelectedCardsForSource('sideNavStream').map(index => this.items[parseInt(index, 10)]);
+    let visibleState = false;
+    switch (action.action) {
+      case Action.MarkAsVisible:
+        visibleState = true;
+        break;
+      case Action.MarkAsInvisible:
+        visibleState = false;
+        break;
+    }
+
+    for(let index of this.bulkSelectionService.getSelectedCardsForSource('sideNavStream').map(s => parseInt(s, 10))) {
+      this.items[index].visible = visibleState;
+      this.items[index] = {...this.items[index]};
+    }
+    this.cdRef.markForCheck();
+    // Make bulk call
+    this.sideNavService.bulkToggleSideNavStreamVisibility(streams.map(s => s.id), visibleState).subscribe(() => this.bulkSelectionService.deselectAll());
+  }
+

  private readonly sideNavService = inject(NavService);
  private readonly filterService = inject(FilterService);
  private readonly externalSourceService = inject(ExternalSourceService);
  private readonly cdRef = inject(ChangeDetectorRef);
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly bulkSelectionService = inject(BulkSelectionService);

  constructor(public modal: NgbActiveModal) {
+
+    this.pageOperationsForm.get('accessibilityMode')?.valueChanges.pipe(
+        tap(_ => {
+          const accessibleValue = this.pageOperationsForm.get('accessibilityMode')?.value;
+          if (accessibleValue) {
+            if (this.pageOperationsForm.get('bulkMode')?.disabled) return;
+            this.pageOperationsForm.get('bulkMode')?.disable();
+          } else {
+            if (!this.pageOperationsForm.get('bulkMode')?.disabled) return;
+            this.pageOperationsForm.get('bulkMode')?.enable();
+          }
+          this.cdRef.markForCheck();
+        }),
+        takeUntilDestroyed(this.destroyRef)
+    ).subscribe();
+
+    this.pageOperationsForm.get('bulkMode')?.valueChanges.pipe(
+        tap(_ => {
+          const bulkValue = this.pageOperationsForm.get('bulkMode')?.value;
+          if (bulkValue) {
+            if (this.pageOperationsForm.get('accessibilityMode')?.disabled) return;
+            this.pageOperationsForm.get('accessibilityMode')?.disable();
+          } else {
+            if (this.pageOperationsForm.get('accessibilityMode')?.disabled) return;
+            this.pageOperationsForm.get('accessibilityMode')?.enable();
+          }
+        }),
+        takeUntilDestroyed(this.destroyRef)
+    ).subscribe();
+
+    this.pageOperationsForm.valueChanges.pipe(
+        tap(_ => {
+          if (this.pageOperationsForm.value.accessibilityMode || this.pageOperationsForm.value.bulkMode) {
+            this.listForm.get('filterSideNavStream')?.disable();
+            return;
+          }
+          this.listForm.get('filterSideNavStream')?.enable();
+        }),
+        takeUntilDestroyed(this.destroyRef)
+    ).subscribe();
+
    forkJoin([this.sideNavService.getSideNavStreams(false),
        this.filterService.getAllFilters(), this.externalSourceService.getExternalSources()
    ]).subscribe(results => {
      this.items = results[0];
+
+      // After 100 items, drag and drop is disabled to use virtualization
+      if (this.items.length > 100) {
+        this.pageOperationsForm.get('accessibilityMode')?.setValue(true);
+      }
+
      const existingSmartFilterStreams = new Set(results[0].filter(d => !d.isProvided && d.streamType === SideNavStreamType.SmartFilter).map(d => d.name));
      this.smartFilters = results[1].filter(d => !existingSmartFilterStreams.has(d.name));

@ -77,6 +154,10 @@ export class CustomizeSidenavStreamsComponent {
    });
  }

+  ngOnDestroy() {
+    this.bulkSelectionService.deselectAll();
+  }
+
  resetSideNavFilter() {
    this.listForm.get('filterSideNavStream')?.setValue('');
    this.cdRef.markForCheck();
@ -108,11 +189,6 @@ export class CustomizeSidenavStreamsComponent {
    });
  }

-  updateAccessibilityMode() {
-    this.accessibilityMode = !this.accessibilityMode;
-    this.cdRef.markForCheck();
-  }
-

  orderUpdated(event: IndexUpdateEvent) {
    this.sideNavService.updateSideNavStreamPosition(event.item.name, event.item.id, event.fromPosition, event.toPosition).subscribe(() => {
@ -128,8 +204,8 @@ export class CustomizeSidenavStreamsComponent {
  updateVisibility(item: SideNavStream, position: number) {
    const stream = this.items.filter(s => s.id == item.id)[0];
    stream.visible = !stream.visible;
-    this.sideNavService.updateSideNavStream(stream).subscribe();
    this.cdRef.markForCheck();
+    this.sideNavService.updateSideNavStream(stream).subscribe();
  }

 }
--- a/UI/Web/src/app/sidenav/_components/manage-external-sources/manage-external-sources.component.html
+++ b/UI/Web/src/app/sidenav/_components/manage-external-sources/manage-external-sources.component.html
@ -24,5 +24,10 @@
                                   (sourceDelete)="deleteSource(idx, $event)"
                                   [isViewMode]="externalSource.id !== 0"></app-edit-external-source-item>
  </ng-container>
+  <ul>
+    <li class="list-group-item" *ngIf="externalSources.length === 0">
+      {{t('no-data')}}
+    </li>
+  </ul>
 </ng-container>

--- a/UI/Web/src/app/sidenav/_components/manage-external-sources/manage-external-sources.component.scss
+++ b/UI/Web/src/app/sidenav/_components/manage-external-sources/manage-external-sources.component.scss
@ -0,0 +1,20 @@
+ul {
+  margin:0;
+  padding: 0;
+
+  li {
+    padding: 0.5rem 1rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 5px;
+    margin: 5px 0;
+    color: var(--list-group-hover-text-color);
+    background-color: var(--card-bg-color);
+
+    span {
+      cursor: pointer;
+    }
+  }
+}
--- a/UI/Web/src/app/sidenav/_components/manage-smart-filters/manage-smart-filters.component.scss
+++ b/UI/Web/src/app/sidenav/_components/manage-smart-filters/manage-smart-filters.component.scss
@ -12,7 +12,7 @@ ul {
        border-radius: 5px;
        margin: 5px 0;
        color: var(--list-group-hover-text-color);
-        background-color: var(--list-group-hover-bg-color);
+        background-color: var(--card-bg-color);

        span {
            cursor: pointer;
--- a/UI/Web/src/app/sidenav/_components/side-nav/side-nav.component.ts
+++ b/UI/Web/src/app/sidenav/_components/side-nav/side-nav.component.ts
@ -159,11 +159,11 @@ export class SideNavComponent implements OnInit {
  }

  handleHomeActions() {
-    this.ngbModal.open(CustomizeDashboardModalComponent, {size: 'xl'});
+    this.ngbModal.open(CustomizeDashboardModalComponent, {size: 'xl', fullscreen: 'md'});
  }

  importCbl() {
-    this.ngbModal.open(ImportCblModalComponent, {size: 'xl'});
+    this.ngbModal.open(ImportCblModalComponent, {size: 'xl', fullscreen: 'md'});
  }

  performAction(action: ActionItem<Library>, library: Library) {