UI navigation improvements

4 years ago · a6f2d114f1
9 changed files with 85 additions and 22 deletions
--- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
@ -251,7 +251,8 @@
            <mat-row [fxShow]="!dataSource.dataLoading"
                     [ngClass]="{'mat-row-select': selectionEnabled,
                                 'mat-selected': dataSource.selection.isSelected(entity),
-                                 'tb-current-entity': dataSource.isCurrentEntity(entity)}"
+                                 'tb-current-entity': dataSource.isCurrentEntity(entity),
+                                 'tb-pointer': entitiesTableConfig.rowPointer}"
                     *matRowDef="let entity; columns: displayedColumns;" (click)="onRowClick($event, entity)"></mat-row>
          </table>
          <span [fxShow]="!(isLoading$ | async) && (dataSource.isEmpty() | async) && !dataSource.dataLoading"
--- a/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts
+++ b/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts
@ -155,6 +155,7 @@ export class EntityTableConfig<T extends BaseData<HasId>, P extends PageLink = P
  entitiesDeleteEnabled = true;
  detailsPanelEnabled = true;
  hideDetailsTabsOnEdit = true;
+  rowPointer = false;
  actionsColumnTitle = null;
  entityTranslations: EntityTypeTranslation;
  entityResources: EntityTypeResource<T>;
@ -220,6 +221,20 @@ export class EntityTableConfig<T extends BaseData<HasId>, P extends PageLink = P
    }
  }

+  toggleEntityDetails($event: Event, entity: T) {
+    if (this.table) {
+      this.table.toggleEntityDetails($event, entity);
+    }
+  }
+
+  isDetailsOpen(): boolean {
+    if (this.table) {
+      return this.table.isDetailsOpen;
+    } else {
+      return false;
+    }
+  }
+
  getActivatedRoute(): ActivatedRoute {
    if (this.table) {
      return this.table.route;
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
@ -94,6 +94,8 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<
    this.config.entityTranslations = entityTypeTranslations.get(EntityType.DASHBOARD);
    this.config.entityResources = entityTypeResources.get(EntityType.DASHBOARD);

+    this.config.rowPointer = true;
+
    this.config.deleteEntityTitle = dashboard =>
      this.translate.instant('dashboard.delete-dashboard-title', {dashboardTitle: dashboard.title});
    this.config.deleteEntityContent = () => this.translate.instant('dashboard.delete-dashboard-text');
@ -107,6 +109,15 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<
    this.config.onEntityAction = action => this.onDashboardAction(action);
    this.config.detailsReadonly = () => (this.config.componentsData.dashboardScope === 'customer_user' ||
      this.config.componentsData.dashboardScope === 'edge_customer_user');
+
+    this.config.handleRowClick = ($event, dashboard) => {
+      if (this.config.isDetailsOpen()) {
+        this.config.toggleEntityDetails($event, dashboard);
+      } else {
+        this.openDashboard($event, dashboard);
+      }
+      return true;
+    };
  }

  resolve(route: ActivatedRouteSnapshot): Observable<EntityTableConfig<DashboardInfo | Dashboard>> {
@ -197,14 +208,6 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<

  configureCellActions(dashboardScope: string): Array<CellActionDescriptor<DashboardInfo>> {
    const actions: Array<CellActionDescriptor<DashboardInfo>> = [];
-    actions.push(
-      {
-        name: this.translate.instant('dashboard.open-dashboard'),
-        icon: 'dashboard',
-        isEnabled: () => true,
-        onAction: ($event, entity) => this.openDashboard($event, entity)
-      }
-    );
    if (dashboardScope === 'tenant') {
      actions.push(
        {
@ -271,6 +274,14 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<
        }
      );
    }
+    actions.push(
+      {
+        name: this.translate.instant('dashboard.dashboard-details'),
+        icon: 'edit',
+        isEnabled: () => true,
+        onAction: ($event, entity) => this.config.toggleEntityDetails($event, entity)
+      }
+    );
    return actions;
  }

--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechains-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechains-table-config.resolver.ts
@ -74,6 +74,8 @@ export class RuleChainsTableConfigResolver implements Resolve<EntityTableConfig<
    this.config.entityTranslations = entityTypeTranslations.get(EntityType.RULE_CHAIN);
    this.config.entityResources = entityTypeResources.get(EntityType.RULE_CHAIN);

+    this.config.rowPointer = true;
+
    this.config.deleteEntityTitle = ruleChain => this.translate.instant('rulechain.delete-rulechain-title',
      {ruleChainName: ruleChain.name});
    this.config.deleteEntityContent = () => this.translate.instant('rulechain.delete-rulechain-text');
@ -83,6 +85,14 @@ export class RuleChainsTableConfigResolver implements Resolve<EntityTableConfig<
    this.config.saveEntity = ruleChain => this.saveRuleChain(ruleChain);
    this.config.deleteEntity = id => this.ruleChainService.deleteRuleChain(id.id);
    this.config.onEntityAction = action => this.onRuleChainAction(action);
+    this.config.handleRowClick = ($event, ruleChain) => {
+      if (this.config.isDetailsOpen()) {
+        this.config.toggleEntityDetails($event, ruleChain);
+      } else {
+        this.openRuleChain($event, ruleChain);
+      }
+      return true;
+    };
  }

  resolve(route: ActivatedRouteSnapshot): EntityTableConfig<RuleChain> {
@ -214,12 +224,6 @@ export class RuleChainsTableConfigResolver implements Resolve<EntityTableConfig<
  configureCellActions(ruleChainScope: string): Array<CellActionDescriptor<RuleChain>> {
    const actions: Array<CellActionDescriptor<RuleChain>> = [];
    actions.push(
-      {
-        name: this.translate.instant('rulechain.open-rulechain'),
-        icon: 'settings_ethernet',
-        isEnabled: () => true,
-        onAction: ($event, entity) => this.openRuleChain($event, entity)
-      },
      {
        name: this.translate.instant('rulechain.export'),
        icon: 'file_download',
@ -275,6 +279,14 @@ export class RuleChainsTableConfigResolver implements Resolve<EntityTableConfig<
        }
      );
    }
+    actions.push(
+      {
+        name: this.translate.instant('rulechain.rulechain-details'),
+          icon: 'edit',
+        isEnabled: () => true,
+        onAction: ($event, entity) => this.config.toggleEntityDetails($event, entity)
+      }
+    );
    return actions;
  }

--- a/ui-ngx/src/app/modules/home/pages/widget/widget-library.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-library.component.html
@ -27,7 +27,8 @@
        style="display: flex;"
        class="mat-headline tb-absolute-fill">widgets-bundle.empty</span>
 </section>
-<tb-dashboard #dashboard
+<tb-dashboard class="tb-widget-library"
+              #dashboard
              [aliasController]="aliasController"
              [widgets]="widgetsData.widgets"
              [widgetLayouts]="widgetsData.widgetLayouts"
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-library.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-library.component.scss
@ -21,3 +21,11 @@
    border-width: 2px;
  }
 }
+
+:host ::ng-deep {
+  .tb-widget-library {
+    .tb-widget-container {
+      cursor: pointer;
+    }
+  }
+}
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-library.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-library.component.ts
@ -78,6 +78,7 @@ export class WidgetLibraryComponent extends PageComponent implements OnInit {

  dashboardCallbacks: DashboardCallbacks = {
    onEditWidget: this.openWidgetType.bind(this),
+    onWidgetClicked: this.openWidgetType.bind(this),
    onExportWidget: this.exportWidgetType.bind(this),
    onRemoveWidget: this.removeWidgetType.bind(this)
  };
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundles-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundles-table-config.resolver.ts
@ -61,6 +61,8 @@ export class WidgetsBundlesTableConfigResolver implements Resolve<EntityTableCon
    this.config.entityResources = entityTypeResources.get(EntityType.WIDGETS_BUNDLE);
    this.config.defaultSortOrder = {property: 'title', direction: Direction.ASC};

+    this.config.rowPointer = true;
+
    this.config.entityTitle = (widgetsBundle) => widgetsBundle ?
      widgetsBundle.title : '';

@ -89,17 +91,17 @@ export class WidgetsBundlesTableConfigResolver implements Resolve<EntityTableCon
    );

    this.config.cellActionDescriptors.push(
-      {
-        name: this.translate.instant('widgets-bundle.open-widgets-bundle'),
-        icon: 'now_widgets',
-        isEnabled: () => true,
-        onAction: ($event, entity) => this.openWidgetsBundle($event, entity)
-      },
      {
        name: this.translate.instant('widgets-bundle.export'),
        icon: 'file_download',
        isEnabled: () => true,
        onAction: ($event, entity) => this.exportWidgetsBundle($event, entity)
+      },
+      {
+        name: this.translate.instant('widgets-bundle.widgets-bundle-details'),
+        icon: 'edit',
+        isEnabled: () => true,
+        onAction: ($event, entity) => this.config.toggleEntityDetails($event, entity)
      }
    );

@ -114,6 +116,15 @@ export class WidgetsBundlesTableConfigResolver implements Resolve<EntityTableCon
    this.config.saveEntity = widgetsBundle => this.widgetsService.saveWidgetsBundle(widgetsBundle);
    this.config.deleteEntity = id => this.widgetsService.deleteWidgetsBundle(id.id);
    this.config.onEntityAction = action => this.onWidgetsBundleAction(action);
+
+    this.config.handleRowClick = ($event, widgetsBundle) => {
+      if (this.config.isDetailsOpen()) {
+        this.config.toggleEntityDetails($event, widgetsBundle);
+      } else {
+        this.openWidgetsBundle($event, widgetsBundle);
+      }
+      return true;
+    };
  }

  resolve(): EntityTableConfig<WidgetsBundle> {
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@ -1011,6 +1011,9 @@ mat-label {
    &.tb-current-entity {
      background-color: #e9e9e9;
    }
+    &.tb-pointer {
+      cursor: pointer;
+    }
  }

  .mat-row:not(.mat-row-select), .mat-header-row:not(.mat-row-select) {