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`
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)

Parameters :

Name	Type	Optional	Default value
actions	`DashboardChildActionComponent[]`	No
prepend		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

_pxHeight

Type : string

Default value : '100%'

_pxWidth

Type : string

Default value : '100%'

actions

Type : DashboardChildActionComponent[]

Default value : []

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

Default value : false

Decorators :


                            @HostBinding('class.fullscreen')

intersected

Default value : false

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

isDragging

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

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)

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

Parameters :

Name	Optional
value	No

Returns : void

pxHeight

setpxHeight(value)

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

Parameters :

Name	Optional
value	No

Returns : void

inlineStyle

getinlineStyle()

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

<div cdkDropList>
  <div
    class="card-placeholder"
    *ngIf="isResize"
  ></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>
      <div
        class="header-actions d-flex a-i-center"
        *ngIf="actions.length > 0"
      >
        <c8y-widget-time-context-icon-bar
          *ngIf="data?.config?.displaySettings && data?.config?.widgetInstanceGlobalTimeContext"
          [config]="data.config"
        ></c8y-widget-time-context-icon-bar>

        <button
          class="btn btn-icon"
          [tooltip]="fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)"
          delay="500"
          container="body"
          [attr.aria-label]="'Full screen' | translate"
          [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
          [container]="'body'"
        >
          <button
            class="btn btn-icon c8y-dropdown"
            title="{{ 'Settings' | translate }}"
            aria-haspopup="true"
            *ngIf="editMode"
            data-cy="c8y-dashboard-child--settings"
            (click)="(false)"
            dropdownToggle
          >
            <i [c8yIcon]="'cog'"></i>
          </button>
          <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"
            *ngIf="!editMode"
            (click)="(false)"
            data-cy="c8y-dashboard-child--settings-locked"
          >
            <i [c8yIcon]="'lock'"></i>
          </button>
          <ul
            class="dropdown-menu dropdown-menu-right"
            data-cy="c8y-dashboard-child--actions-dropdown"
            style="right: -1px"
            *dropdownMenu
          >
            <ng-container *ngFor="let action of actions">
              <ng-container *ngTemplateOutlet="action.template"></ng-container>
            </ng-container>
          </ul>
        </div>
      </div>
    </div>
    <div class="card-inner-scroll">
      <ng-content></ng-content>
    </div>
    <div
      class="resize-handle hidden-xs"
      *ngIf="editMode && !isDragging && !fullscreen"
      cdkDrag
      [cdkDragDisabled]="!editMode || fullscreen"
      (cdkDragStarted)="resizeStarted($event)"
      (cdkDragEnded)="reset($event)"
    ></div>
    <div
      class="resize-icon hidden-xs"
      *ngIf="editMode && !isDragging && !fullscreen"
    ></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 ""