Merge pull request #320 from strayge/save-columns-state-catalog

[2.x] hide/show columns at "Get Addons" tab

wowup-electron/src/app/pages/get-addons/get-addons.component.html

@@ -100,8 +100,8 @@
       matSort
       (matSortChange)="onSortChange()"
       [dataSource]="dataSource"
-      matSortActive="downloadCount"
-      matSortDirection="desc"
+      [matSortActive]="activeSort"
+      [matSortDirection]="activeSortDirection"
       class="mat-elevation-z8"
     >
       <ng-container matColumnDef="name">
@@ -197,7 +197,10 @@
         </td>
       </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+      <tr
+        mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"
+        (contextmenu)="onHeaderContext($event); $event.preventDefault()"
+      ></tr>
       <tr
         mat-row
         *matRowDef="let row; columns: displayedColumns; let i = index"
@@ -206,3 +209,30 @@
     </table>
   </div>
 </div>
+
+<!-- COLUMNS CONTEXT MENU -->
+<div
+  style="visibility: hidden; position: fixed"
+  #columnContextMenuTrigger="matMenuTrigger"
+  [style.left]="contextMenuPosition.x"
+  [style.top]="contextMenuPosition.y"
+  [matMenuTriggerFor]="columnContextMenu"
+></div>
+<mat-menu #columnContextMenu="matMenu" class="addon-context-menu">
+  <ng-template matMenuContent let-columns="columns">
+    <div class="addon-context-menu-header">
+      <div class="addon-name">
+        {{ "PAGES.MY_ADDONS.COLUMNS_CONTEXT_MENU.TITLE" | translate }}
+      </div>
+    </div>
+    <mat-divider></mat-divider>
+    <mat-checkbox
+      *ngFor="let column of columns"
+      class="mat-menu-item"
+      [checked]="column.visible"
+      (change)="onColumnVisibleChange($event, column)"
+    >
+      {{ column.display | translate }}
+    </mat-checkbox>
+  </ng-template>
+</mat-menu>

wowup-electron/src/app/pages/get-addons/get-addons.component.ts

@@ -29,6 +29,8 @@ import { AddonService } from "../../services/addons/addon.service";
 import { SessionService } from "../../services/session/session.service";
 import { WarcraftService } from "../../services/warcraft/warcraft.service";
 import { WowUpService } from "../../services/wowup/wowup.service";
+import { MatMenuTrigger } from "@angular/material/menu";
+import { MatCheckboxChange } from "@angular/material/checkbox";
 
 @Component({
   selector: "app-get-addons",
@@ -41,19 +43,22 @@ export class GetAddonsComponent implements OnInit, OnDestroy {
 
   @ViewChild(MatSort) sort: MatSort;
   @ViewChild("table", { read: ElementRef }) table: ElementRef;
+  @ViewChild("columnContextMenuTrigger") columnContextMenu: MatMenuTrigger;
 
   private _subscriptions: Subscription[] = [];
   private _isSelectedTab: boolean = false;
   private _lazyLoaded: boolean = false;
 
   public dataSource = new MatTableDataSource<GetAddonListItem>([]);
+  public activeSort = "downloadCount";
+  public activeSortDirection = "desc";
 
   columns: ColumnState[] = [
     { name: "name", display: "Addon", visible: true },
-    { name: "downloadCount", display: "Downloads", visible: true },
-    { name: "releasedAt", display: "Released At", visible: true },
-    { name: "author", display: "Author", visible: true },
-    { name: "providerName", display: "Provider", visible: true },
+    { name: "downloadCount", display: "Downloads", visible: true, allowToggle: true },
+    { name: "releasedAt", display: "Released At", visible: true, allowToggle: true },
+    { name: "author", display: "Author", visible: true, allowToggle: true },
+    { name: "providerName", display: "Provider", visible: true, allowToggle: true },
     { name: "status", display: "Status", visible: true },
   ];
 
@@ -76,6 +81,7 @@ export class GetAddonsComponent implements OnInit, OnDestroy {
   public query = "";
   public isBusy = true;
   public selectedClient = WowClientType.None;
+  public contextMenuPosition = { x: "0px", y: "0px" };
 
   constructor(
     private _addonService: AddonService,
@@ -97,7 +103,25 @@ export class GetAddonsComponent implements OnInit, OnDestroy {
     });
   }
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    const sortOrder = this._wowUpService.getAddonsSortOrder;
+    if(sortOrder){
+      this.activeSort = sortOrder.name;
+      this.activeSortDirection = sortOrder.direction;
+    }
+
+    const columnStates = this._wowUpService.getAddonsHiddenColumns;
+    this.columns.forEach((col) => {
+      if (!col.allowToggle) {
+        return;
+      }
+
+      const state = _.find(columnStates, (cs) => cs.name === col.name);
+      if (state) {
+        col.visible = state.visible;
+      }
+    });
+  }
 
   ngOnDestroy() {
     this._subscriptions.forEach((sub) => sub.unsubscribe());
@@ -108,12 +132,38 @@ export class GetAddonsComponent implements OnInit, OnDestroy {
     if (this.table) {
       this.table.nativeElement.scrollIntoView({ behavior: "smooth" });
     }
+
+    this._wowUpService.getAddonsSortOrder = {
+      name: this.sort.active,
+      direction: this.sort.start || "",
+    };
   }
 
   onStatusColumnUpdated() {
     this._cdRef.detectChanges();
   }
 
+  public onHeaderContext(event: MouseEvent) {
+    event.preventDefault();
+    this.updateContextMenuPosition(event);
+    this.columnContextMenu.menuData = {
+      columns: this.columns.filter((col) => col.allowToggle),
+    };
+    this.columnContextMenu.menu.focusFirstItem("mouse");
+    this.columnContextMenu.openMenu();
+  }
+
+  private updateContextMenuPosition(event: MouseEvent) {
+    this.contextMenuPosition.x = event.clientX + "px";
+    this.contextMenuPosition.y = event.clientY + "px";
+  }
+
+  public onColumnVisibleChange(event: MatCheckboxChange, column: ColumnState) {
+    const col = this.columns.find((col) => col.name === column.name);
+    col.visible = event.checked;
+    this._wowUpService.getAddonsHiddenColumns = [...this.columns];
+  }
+
   private lazyLoad() {
     if (this._lazyLoaded) {
       return;

wowup-electron/src/app/services/wowup/wowup.service.ts

@@ -24,6 +24,8 @@ import {
   SELECTED_LANGUAGE_PREFERENCE_KEY,
   MY_ADDONS_HIDDEN_COLUMNS_KEY,
   MY_ADDONS_SORT_ORDER,
+  GET_ADDONS_HIDDEN_COLUMNS_KEY,
+  GET_ADDONS_SORT_ORDER,
 } from "../../../common/constants";
 import { WowClientType } from "../../models/warcraft/wow-client-type";
 import { AddonChannelType } from "../../models/wowup/addon-channel-type";
@@ -210,6 +212,22 @@ export class WowUpService {
     this._preferenceStorageService.setObject(MY_ADDONS_SORT_ORDER, sortOrder);
   }
 
+  public get getAddonsHiddenColumns() {
+    return this._preferenceStorageService.getObject<ColumnState[]>(GET_ADDONS_HIDDEN_COLUMNS_KEY) || [];
+  }
+
+  public set getAddonsHiddenColumns(columnStates: ColumnState[]) {
+    this._preferenceStorageService.setObject(GET_ADDONS_HIDDEN_COLUMNS_KEY, columnStates);
+  }
+
+  public get getAddonsSortOrder(): SortOrder {
+    return this._preferenceStorageService.getObject<SortOrder>(GET_ADDONS_SORT_ORDER);
+  }
+
+  public set getAddonsSortOrder(sortOrder: SortOrder) {
+    this._preferenceStorageService.setObject(GET_ADDONS_SORT_ORDER, sortOrder);
+  }
+
   public getClientDefaultAddonChannelKey(clientType: WowClientType) {
     const typeName = getEnumName(WowClientType, clientType);
     return `${typeName}${DEFAULT_CHANNEL_PREFERENCE_KEY_SUFFIX}`.toLowerCase();

wowup-electron/src/common/constants.ts

@@ -31,6 +31,8 @@ export const NO_LATEST_SEARCH_RESULT_FILES_ERROR = "NO_LATEST_SEARCH_RESULT_FILE
 export const SELECTED_LANGUAGE_PREFERENCE_KEY = "selected_language";
 export const MY_ADDONS_HIDDEN_COLUMNS_KEY = "my_addons_hidden_columns";
 export const MY_ADDONS_SORT_ORDER = "my_addons_sort_order";
+export const GET_ADDONS_HIDDEN_COLUMNS_KEY = "get_addons_hidden_columns";
+export const GET_ADDONS_SORT_ORDER = "get_addons_sort_order";
 
 // APP UPDATER
 export const APP_UPDATE_ERROR = "app-update-error";