File

core/dashboard/dashboard-child.component.ts

Description

A dashboard child allows to position elements correctly on a grid.

By setting c8y-dashboard-child-actions and c8y-dashboard-child-title on the element you can add custom actions or a custom title to the current child.

By adding the correct branded classes, you can define the look and feel of the child. By default it is displayed as a card.

Example :

  <c8y-dashboard-child
    #cpWidget3
    [x]="0"
    [y]="3"
    [width]="4"
    [height]="4"
    [class]="'card-dashboard panel-content-transparent'"
  >
    <c8y-dashboard-child-title *ngIf="showTitle">
      <span>Transparent!</span>
    </c8y-dashboard-child-title>
    <c8y-dashboard-child-action>
      <a href="" (click)="showTitle = !showTitle; (false)">
        <i [c8yIcon]="'heading'"></i> Hide/show title
      </a>
    </c8y-dashboard-child-action>
    x: {{ cpWidget3.x }}<br />
    y: {{ cpWidget3.y }}<br />
    width: {{ cpWidget3.width }}<br />
    height: {{ cpWidget3.height }}<br />
  </c8y-dashboard-child>

Implements

DashboardChildDimension

Metadata

host	`{ }`
selector	`c8y-dashboard-child`
standalone	`true`
imports	`CdkDropList` `CdkDrag` `NgStyle` `NgClass` `CdkDragHandle` `TooltipModule` `IconDirective` `BsDropdownModule` `NgTemplateOutlet` `CdkDragPlaceholder` `C8yTranslatePipe` `DropdownFocusTrapDirective` `AsyncPipe`
templateUrl	`./dashboard-child.component.html`

Index

Constructor

constructor(dashboard: DashboardComponent, sanitizer: DomSanitizer, element: ElementRef)

Parameters :

Name	Type	Optional
dashboard	`DashboardComponent`	No
sanitizer	`DomSanitizer`	No
element	`ElementRef`	No

Inputs

canToggleFullscreen

Type : boolean

Default value : true

class

Type : string[] | literal type

Default value : {}

All classes added to this child

data

Type : Widget | any

The data object can be used as a dataTransfer object for events of the child.

editMode

Type : boolean

Default value : false

If a dashboard editing is disabled no widgets can be moved, edited, removed or added.

height

Type : number

Default value : 1

The height of the component in grid-rows.

isFrozen

Type : boolean

If a dashboard is frozen, all children cannot be moved or resized.

margin

Type : number

Default value : 12

The margin of the child in pixel.

useIntersection

Type : boolean

Default value : false

The child content is initialized, as soon it is scrolled into viewport

width

Type : number

Default value : 1

The width of the component in grid-columns.

Type : any

The x position of the child.

Type : any

The y position of the child.

Outputs

changeEnd

Type : EventEmitter

An event fired if a child change is ended

changeStart

Type : EventEmitter

An event fired if a child change is started (dragging or resizing)

toggleFullscreen

Type : EventEmitter

An event fired if the fullscreen toggle button was pressed.

HostBindings

attr.style

Type : any

nasty workaround for that issue: https://github.com/angular/angular/issues/9343

class.fullscreen

Type : boolean

Default value : false

Methods

addActions

addActions(actions: DashboardChildActionComponent[], prepend: unknown)

Parameters :

Name	Type	Optional	Default value
actions	`DashboardChildActionComponent[]`	No
prepend	`unknown`	No	`false`

Returns : void

dragStarted

dragStarted($event: CdkDragStart)

Parameters :

Name	Type	Optional
$event	`CdkDragStart`	No

Returns : void

ngAfterViewInit

ngAfterViewInit()

Returns : void

ngOnChanges

ngOnChanges()

Returns : void

ngOnDestroy

ngOnDestroy()

Returns : void

ngOnInit

ngOnInit()

Returns : void

reset

reset($event?: CdkDragEnd)

Parameters :

Name	Type	Optional
$event	`CdkDragEnd`	Yes

Returns : void

resizeStarted

resizeStarted($event: CdkDragStart)

Parameters :

Name	Type	Optional
$event	`CdkDragStart`	No

Returns : void

setDynamicDimension

setDynamicDimension()

Returns : void

Properties

_additionalHeaderTemplates

Type : unknown

Default value : new BehaviorSubject<HeaderTemplates[]>([])

_pxHeight

Type : string

Default value : '100%'

_pxWidth

Type : string

Default value : '100%'

actions

Type : DashboardChildActionComponent[]

Default value : []

additionalHeaderTemplates$

Type : unknown

Default value :

this._additionalHeaderTemplates.asObservable().pipe(
    map(templates => this.sortByPriority(templates)),
    shareReplay(1)
  )

changeSubscription

Type : Subscription

The observable subscription which is listen to on changes (drag or resize).

Public dashboard

Type : DashboardComponent

dragSource

Type : CdkDrag

Public element

Type : ElementRef

fullscreen

Type : unknown

Default value : false

Decorators :


                            @HostBinding('class.fullscreen')

intersected

Type : unknown

Default value : false

An indicator if the child is intersected (that mean visible for the user)

isDragging

Type : unknown

Default value : false

isOneColumnView$

Type : Observable<boolean>

Default value :

fromEvent(window, 'resize').pipe(
    map(_ => {
      return (
        document.documentElement.clientWidth <= this.MD_BOOTSTRAP_BREAKPOINT_READONLY_CLASS_PROPERTY
      );
    }),
    debounceTime(200),
    startWith(
      document.documentElement.clientWidth <= this.MD_BOOTSTRAP_BREAKPOINT_READONLY_CLASS_PROPERTY
    )
  )

Triggers on every resize and returns true if in one column view (mobile view)

isResize

Type : unknown

Default value : false

klasses

Type : object

Default value : {}

lastChange

Type : "drag" | "resize"

Default value : null

Tells if the last change was a dragging or resizing event;

Readonly MD_BOOTSTRAP_BREAKPOINT_READONLY_CLASS_PROPERTY

Type : number

Default value : 768

Accessors

templateActions

settemplateActions(actions: DashboardChildActionComponent[])

Parameters :

Name	Type	Optional
actions	`DashboardChildActionComponent[]`	No

Returns : void

isFrozen

setisFrozen(value: boolean)

If a dashboard is frozen, all children cannot be moved or resized.

Parameters :

Name	Type	Optional
value	`boolean`	No

Returns : void

pxWidth

setpxWidth(value: unknown)

Updates the pixel width of the child (used for resizing)

Parameters :

Name	Type	Optional
value	`unknown`	No

Returns : void

pxHeight

setpxHeight(value: unknown)

Updates the pixel height of the child (used for resizing)

Parameters :

Name	Type	Optional
value	`unknown`	No

Returns : void

inlineStyle

getinlineStyle()

nasty workaround for that issue: https://github.com/angular/angular/issues/9343

<div cdkDropList>
  @if (isResize) {
    <div class="card-placeholder"></div>
  }

  <div
    [ngStyle]="{ width: _pxWidth, height: _pxHeight }"
    [ngClass]="klasses"
    cdkDrag
    (cdkDragStarted)="dragStarted($event)"
    (cdkDragEnded)="reset($event)"
    [cdkDragDisabled]="(isOneColumnView$ | async) || !editMode || fullscreen"
  >
    <div
      class="card-header-actions card-header-grid"
      [ngClass]="{
        'drag-handle': editMode && !fullscreen,
        draggableCursor: editMode && !fullscreen
      }"
      cdkDragHandle
    >
      <ng-content select="c8y-dashboard-child-title"></ng-content>

      @if (actions.length > 0) {
        <div class="header-actions d-flex a-i-center">
          @for (headerTemplate of additionalHeaderTemplates$ | async; track headerTemplate) {
            <ng-container *ngTemplateOutlet="headerTemplate.template"></ng-container>
          }

          <button
            class="btn btn-icon"
            [attr.aria-label]="'Full screen' | translate"
            [tooltip]="fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)"
            container="body"
            [delay]="500"
            [disabled]="editMode || !canToggleFullscreen"
            (click)="toggleFullscreen.next()"
            data-cy="c8y-dashboard-child--settings-fullscreen"
          >
            <i [c8yIcon]="fullscreen ? 'compress' : 'expand'"></i>
          </button>

          <div
            class="optionsBtn dropdown"
            placement="bottom right"
            dropdown
            c8yDropdownFocusTrap
            [container]="'body'"
            #cardDashboardActions="bs-dropdown"
          >
            @if (editMode) {
              <button
                class="btn btn-icon dropdown-toggle c8y-dropdown"
                title="{{ 'Settings' | translate }}"
                [attr.aria-label]="'Settings' | translate"
                aria-haspopup="true"
                [attr.aria-expanded]="cardDashboardActions.isOpen"
                data-cy="c8y-dashboard-child--settings"
                (click)="(false)"
                dropdownToggle
              >
                <i [c8yIcon]="'cog'"></i>
              </button>
            } @else {
              <button
                class="btn btn-icon"
                [attr.aria-label]="'Click &quot;Edit widgets&quot; to unlock' | translate"
                tooltip="{{ 'Click &quot;Edit widgets&quot; to unlock' | translate }}"
                container="body"
                (click)="(false)"
                data-cy="c8y-dashboard-child--settings-locked"
              >
                <i [c8yIcon]="'lock'"></i>
              </button>
            }

            <ul
              class="dropdown-menu dropdown-menu-right"
              style="right: -1px"
              data-cy="c8y-dashboard-child--actions-dropdown"
              *dropdownMenu
            >
              @for (action of actions; track action) {
                <ng-container *ngTemplateOutlet="action.template"></ng-container>
              }
            </ul>
          </div>
        </div>
      }
    </div>

    <div class="card-inner-scroll">
      <ng-content></ng-content>
    </div>

    @if (editMode && !isDragging && !fullscreen) {
      <div
        class="resize-handle hidden-xs"
        cdkDrag
        [cdkDragDisabled]="!editMode || fullscreen"
        (cdkDragStarted)="resizeStarted($event)"
        (cdkDragEnded)="reset($event)"
      ></div>
      <div class="resize-icon hidden-xs"></div>
    }

    <div
      class="card-placeholder"
      *cdkDragPlaceholder
    ></div>
  </div>
</div>

File

Description

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

HostBindings

Accessors

Constructor

Inputs

Outputs

HostBindings

Methods

Properties

Accessors

results matching ""

No results matching ""