File

src/app/apps/apps/apps.component.ts

Description

Main entry point to the Apps Module. Provides a paginated list of AppRegistrations and also provides operations to unregister AppRegistrations, displays versions control

Implements

OnInit OnDestroy

Example

Metadata

selector app-apps
templateUrl ./apps.component.html

Index

Properties
Methods

Constructor

constructor(appsService: AppsService, notificationService: NotificationService, sharedAboutService: SharedAboutService, modalService: BsModalService, loggerService: LoggerService, authService: AuthService, router: Router)

Constructor

Parameters :
Name Type Optional Description
appsService AppsService
notificationService NotificationService
sharedAboutService SharedAboutService
modalService BsModalService
loggerService LoggerService
authService AuthService
router Router

Methods

addApps
addApps()

Navigate to the page in order to register a new AppRegistration.

Returns : void
applicationActions
applicationActions(index: number)

Return a list of action for an application

Parameters :
Name Type Optional Description
index number
Returns : {}
applicationsActions
applicationsActions()

Return a list of action for an application

Returns : {}
applyAction
applyAction(action: string, args?: any)

Apply Action

Parameters :
Name Type Optional Description
action string
args any true
Returns : void
applySort
applySort(sort: SortParams)

Apply sort Triggered on column header click

Parameters :
Name Type Optional Description
sort SortParams
Returns : void
changeCheckboxes
changeCheckboxes()

Update the list of selected checkbox

Returns : void
changePaginationPager
changePaginationPager(params: )

Update event from the Paginator Pager

Parameters :
Name Type Optional Description
params
Returns : void
countSelected
countSelected()

Number of selected applications

Returns : number
loadAppRegistrations
loadAppRegistrations()

Load a paginated list of AppRegistrations. Build the form checkboxes (persist selection)

Returns : void
ngOnDestroy
ngOnDestroy()

On Destroy operations

Returns : void
ngOnInit
ngOnInit()

As soon as the page loads we retrieve a list of AppRegistrations after init the context.

Returns : void
refresh
refresh()

Refresh the page Work around: invalidate the cache applications

Returns : void
search
search(value: AppListParams)

Run the search

Parameters :
Name Type Optional Description
value AppListParams
Returns : void
unregisterApps
unregisterApps(appRegistrations: AppRegistration[])

Starts the unregistration process AppRegistrations by opening a confirmation modal dialog.

Parameters :
Name Type Optional Description
appRegistrations AppRegistration[]

An array of AppRegistrations to unregister

Returns : void
unregisterAppsSelected
unregisterAppsSelected()

Starts the unregistration process AppRegistrations by opening a confirmation modal dialog.

Returns : void
updateContext
updateContext()

Write the context in the service.

Returns : void
versions
versions(appRegistration: AppRegistration)

Open the version dialog of an application

Parameters :
Name Type Optional Description
appRegistration AppRegistration
Returns : void
view
view(appRegistration: AppRegistration)

Navigate to the page that provides a detail view for the passed-in AppRegistration.

Parameters :
Name Type Optional Description
appRegistration AppRegistration
Returns : void

Properties

appRegistrations
appRegistrations: Page<AppRegistration>
Type : Page<AppRegistration>

Current applications items

Public appsService
appsService: AppsService
Type : AppsService
context
context: any
Type : any

Storage context

form
form: any
Type : any

Current forms value

itemsSelected
itemsSelected: Array<string>
Type : Array<string>

Contain a key application of each selected application

listBar
listBar: AppListBarComponent
Type : AppListBarComponent
Decorators : ViewChild

List Bar Component

modal
modal: BsModalRef
Type : BsModalRef

Modal

Private ngUnsubscribe$
ngUnsubscribe$: Subject<any>
Type : Subject<any>

Unsubscribe

params
params: AppListParams
Type : AppListParams

State of App List Params

import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { Subject } from 'rxjs';
import { AppsService } from '../apps.service';
import { AppRegistration, Page } from '../../shared/model';
import { AppsUnregisterComponent } from '../apps-unregister/apps-unregister.component';
import { BsModalRef, BsModalService } from 'ngx-bootstrap';
import { SharedAboutService } from '../../shared/services/shared-about.service';
import { AppVersionsComponent } from '../app-versions/app-versions.component';
import { AppsWorkaroundService } from '../apps.workaround.service';
import { AppListParams } from '../components/apps.interface';
import { SortParams } from '../../shared/components/shared.interface';
import { takeUntil } from 'rxjs/operators';
import { NotificationService } from '../../shared/services/notification.service';
import { LoggerService } from '../../shared/services/logger.service';
import { AppError } from '../../shared/model/error.model';
import { AppListBarComponent } from '../components/app-list-bar/app-list-bar.component';
import { AuthService } from '../../auth/auth.service';

/**
 * Main entry point to the Apps Module. Provides
 * a paginated list of {@link AppRegistration}s and
 * also provides operations to unregister {@link AppRegistration}s,
 * displays versions control
 *
 * @author Gunnar Hillert
 * @author Damien Vitrac
 */
@Component({
  selector: 'app-apps',
  templateUrl: './apps.component.html'
})
export class AppsComponent implements OnInit, OnDestroy {

  /**
   * Current applications items
   */
  appRegistrations: Page<AppRegistration>;

  /**
   * Unsubscribe
   */
  private ngUnsubscribe$: Subject<any> = new Subject();

  /**
   * Modal
   */
  modal: BsModalRef;

  /**
   * Current forms value
   */
  form: any = {
    checkboxes: []
  };

  /**
   * State of App List Params
   * @type {SortParams}
   */
  params: AppListParams = null;

  /**
   * Contain a key application of each selected application
   * @type {Array}
   */
  itemsSelected: Array<string> = [];

  /**
   * Storage context
   */
  context: any;

  /**
   * List Bar Component
   */
  @ViewChild('listBar', { static: true })
  listBar: AppListBarComponent;

  /**
   * Constructor
   *
   * @param {AppsService} appsService
   * @param {NotificationService} notificationService
   * @param {SharedAboutService} sharedAboutService
   * @param {BsModalService} modalService
   * @param {LoggerService} loggerService
   * @param {AuthService} authService
   * @param {Router} router
   */
  constructor(public appsService: AppsService,
              private notificationService: NotificationService,
              private sharedAboutService: SharedAboutService,
              private modalService: BsModalService,
              private loggerService: LoggerService,
              private authService: AuthService,
              private router: Router) {
  }

  /**
   * As soon as the page loads we retrieve a list of {@link AppRegistration}s
   * after init the context.
   */
  ngOnInit() {
    this.context = this.appsService.applicationsContext;
    this.params = { ...this.context };
    this.form = { q: this.context.q, type: this.context.type, checkboxes: [] };
    this.itemsSelected = this.context.itemsSelected || [];
    this.loadAppRegistrations();
  }

  /**
   * On Destroy operations
   */
  ngOnDestroy() {
    this.updateContext();
    this.ngUnsubscribe$.next();
    this.ngUnsubscribe$.complete();
  }

  /**
   * Return a list of action for an application
   */
  applicationsActions() {
    return [
      {
        id: 'unregister-apps',
        icon: 'trash',
        action: 'unregisterSelected',
        title: 'Unregister application(s)',
        hidden: !this.authService.securityInfo.canAccess(['ROLE_DESTROY'])
      }
    ];
  }

  /**
   * Return a list of action for an application
   * @param {number} index
   */
  applicationActions(index: number) {
    return [
      {
        id: 'view' + index,
        icon: 'info-circle',
        action: 'view',
        title: 'Show details',
        isDefault: true
      },
      {
        divider: true,
        hidden: !this.authService.securityInfo.canAccess(['ROLE_DESTROY'])
      },
      {
        id: 'remove' + index,
        icon: 'trash',
        action: 'unregister',
        roles: ['ROLE_CREATE'],
        title: 'Remove',
        hidden: !this.authService.securityInfo.canAccess(['ROLE_DESTROY'])
      }
    ];
  }

  /**
   * Apply Action
   * @param action
   * @param args
   */
  applyAction(action: string, args?: any) {
    switch (action) {
      case 'view':
        this.view(args);
        break;
      case 'unregister':
        this.unregisterApps([args]);
        break;
      case 'unregisterSelected':
        this.unregisterAppsSelected();
        break;
    }
  }

  /**
   * Load a paginated list of {@link AppRegistration}s.
   * Build the form checkboxes (persist selection)
   */
  loadAppRegistrations() {
    this.appsService.getApps(this.params).map((page: Page<AppRegistration>) => {
      this.form.checkboxes = page.items.map((app) => {
        return this.itemsSelected.indexOf(`${app.name}#${app.type}`) > -1;
      });
      return page;
    }).pipe(takeUntil(this.ngUnsubscribe$))
      .subscribe((page: Page<AppRegistration>) => {
          if (page.items.length === 0 && this.params.page > 0) {
            this.params.page = 0;
            this.loadAppRegistrations();
            return;
          }
          this.appRegistrations = page;
          this.changeCheckboxes();
          this.updateContext();
        },
        error => {
          this.notificationService.error(AppError.is(error) ? error.getMessage() : error);
        });
  }

  /**
   * Refresh the page
   * Work around: invalidate the cache applications
   */
  refresh() {
    AppsWorkaroundService.cache.invalidate();
    this.loadAppRegistrations();
  }

  /**
   * Write the context in the service.
   */
  updateContext() {
    this.context.q = this.params.q;
    this.context.type = this.params.type;
    this.context.sort = this.params.sort;
    this.context.order = this.params.order;
    this.context.page = this.params.page;
    this.context.size = this.params.size;
    this.context.itemsSelected = this.itemsSelected;
  }

  /**
   * Apply sort
   * Triggered on column header click
   *
   * @param {SortParams} sort
   */
  applySort(sort: SortParams) {
    this.params.sort = sort.sort;
    this.params.order = sort.order;
    this.loadAppRegistrations();
  }

  /**
   * Run the search
   */
  search(value: AppListParams) {
    this.params.q = value.q;
    this.params.type = value.type;
    this.params.page = 0;
    this.loadAppRegistrations();
  }

  /**
   * Update the list of selected checkbox
   */
  changeCheckboxes() {
    if (!this.appRegistrations || (this.appRegistrations.items.length !== this.form.checkboxes.length)) {
      return;
    }
    const value: Array<string> = this.appRegistrations.items.map((app, index) => {
      if (this.form.checkboxes[index]) {
        return `${app.name}#${app.type}`;
      }
    }).filter((a) => a != null);
    this.itemsSelected = value;
    this.updateContext();
  }

  /**
   * Number of selected applications
   * @returns {number}
   */
  countSelected(): number {
    return this.form.checkboxes.filter((a) => a).length;
  }

  /**
   * Update event from the Paginator Pager
   * @param params
   */
  changePaginationPager(params) {
    this.params.page = params.page;
    this.params.size = params.size;
    this.updateContext();
    this.loadAppRegistrations();
  }

  /**
   * Starts the unregistration process {@link AppRegistration}s
   * by opening a confirmation modal dialog.
   */
  unregisterAppsSelected() {
    const appRegistrations = this.appRegistrations.items.filter((app) => {
      return this.itemsSelected.indexOf(`${app.name}#${app.type}`) > -1;
    });
    this.unregisterApps(appRegistrations);
  }

  /**
   * Starts the unregistration process {@link AppRegistration}s
   * by opening a confirmation modal dialog.
   *
   * @param appRegistrations An array of AppRegistrations to unregister
   */
  unregisterApps(appRegistrations: AppRegistration[]) {
    this.loggerService.log(`Unregister ${appRegistrations.length} app(s).`, appRegistrations);
    this.modal = this.modalService.show(AppsUnregisterComponent);
    this.modal.content.open(appRegistrations).subscribe(() => {
      this.loadAppRegistrations();
    });
  }

  /**
   * Navigate to the page in order to register a new
   * {@link AppRegistration}.
   */
  addApps() {
    this.loggerService.log('Go to Add Application page ...');
    this.router.navigate(['/apps/add']);
  }

  /**
   * Navigate to the page that provides a detail view for the
   * passed-in {@link AppRegistration}.
   *
   * @param {AppRegistration} appRegistration
   */
  view(appRegistration: AppRegistration) {
    this.loggerService.log(`View app ${appRegistration.name}.`, appRegistration);
    this.router.navigate(['apps/' + appRegistration.type + '/' + appRegistration.name]);
  }

  /**
   * Open the version dialog of an application
   * @param {AppRegistration} appRegistration
   */
  versions(appRegistration: AppRegistration) {
    this.loggerService.log(`Manage versions ${appRegistration.name} app.`, appRegistration);
    this.modal = this.modalService.show(AppVersionsComponent, { class: 'modal-xl' });
    this.modal.content.open(appRegistration).subscribe(() => {
      this.loadAppRegistrations();
    });
  }

}
<app-page id="applications-list">
  <app-page-head>
    <app-page-head-title><strong>Applications</strong></app-page-head-title>
    <app-page-head-actions [dataflowAppRoles]="['ROLE_CREATE']">
      <button class="btn btn-primary btn-fa" (click)="addApps()">
        <span class="fa fa-plus"></span>
        Add Application(s)
      </button>
    </app-page-head-actions>
  </app-page-head>

  <div dataflowLayoutType type="full">
    <p>
      This section lists all the available applications and provides the control to register/unregister them (if
      applicable).
    </p>

    <app-list-bar-app [params]="params" [page]="appRegistrations" [countSelected]="countSelected()" #listBar
                      (refresh)="refresh()" (search)="search($event)" [actions]="applicationsActions()"
                      (action)="applyAction($event.action)">
    </app-list-bar-app>

    <table id="table" *ngIf="appRegistrations?.items && appRegistrations.items.length > 0"
           class="table-checkbox table table-hover">
      <thead>
      <tr>
        <th style="width: 30px" [dataflowAppRoles]="['ROLE_DESTROY']">
          <app-master-checkbox (change)="changeCheckboxes()" *ngIf="form?.checkboxes"
                               [items]="form.checkboxes"></app-master-checkbox>
        </th>
        <th style="width: 200px">
          <app-sort [indeterminate]="true" (change)="applySort($event)" [value]="'name'" [sort]="params"
                    id="sort-name">Name
          </app-sort>
        </th>
        <th style="width: 100px">
          <app-sort [indeterminate]="true" (change)="applySort($event)" [value]="'type'" [sort]="params"
                    id="sort-type">Type
          </app-sort>
        </th>
        <th>
          <app-sort [indeterminate]="true" (change)="applySort($event)" [value]="'uri'" [sort]="params"
                    id="sort-uri">Uri
          </app-sort>
        </th>
        <th>Versions</th>
        <th class="text-center">&nbsp;</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of appRegistrations.items | paginate: appRegistrations.getPaginationInstance(); index as i">
        <td class="cell-checkbox" [dataflowAppRoles]="['ROLE_DESTROY']">
          <input type="checkbox" (change)="changeCheckboxes()"
                 [(ngModel)]="form.checkboxes[i]"/>
        </td>
        <td>
          <a style="cursor: pointer" (click)="view(item)">{{ item.name }}</a>
        </td>
        <td>
          <app-type [application]="item"></app-type>
        </td>
        <td class="dataflow-truncator-width">
          {{ item.uri }}
        </td>
        <td class="cell-version">
          <app-version-label [isClickable]="true" (labelClick)="versions(item)"
                             [application]="item"></app-version-label>
        </td>
        <td class="table-actions" width="10px" nowrap="">
          <app-list-row-actions [item]="item" (action)="applyAction($event.action, $event.args)"
                                [actions]="applicationActions(i)"></app-list-row-actions>
        </td>
      </tr>
      </tbody>
    </table>

    <app-list-pagination [page]="appRegistrations" [params]="params" (changed)="changePaginationPager($event)"
                         [item]="'application'" [items]="'applications'">
    </app-list-pagination>

    <app-list-empty [page]="appRegistrations" [filters]="[params.q, params.type]">
      <p>There is <strong>no application registered</strong>, yet.</p>
      <p [dataflowAppRoles]="['ROLE_CREATE']">
        You can: <a (click)="addApps()">Add Application(s)</a> or <a (click)="refresh()">Refresh</a> the page.
      </p>
    </app-list-empty>

    <app-list-no-result [page]="appRegistrations" [filters]="[params.q, params.type]">
      <p>
        No results found for
        <strong *ngIf="params.q != ''">'{{ params.q }}'</strong><span *ngIf="params.q != '' && params.type">, </span>
        <strong *ngIf="params.type">'{{ params.type }}'</strong>.
      </p>
      <p>
        You can <a id="search-clear" (click)="listBar.clearSearch()">clear the search</a> or <a (click)="refresh()">Refresh</a>
        the page.
      </p>
    </app-list-no-result>
  </div>
</app-page>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""