Skip to content
This repository was archived by the owner on Oct 9, 2023. It is now read-only.

Commit

Permalink
Added overall row collapser #12
Browse files Browse the repository at this point in the history
  • Loading branch information
@Disane87
Disane87 committed Aug 16, 2019
1 parent 629e233 commit 2d82c4f
Show file tree
Hide file tree
Showing 2 changed files with 144 additions and 11 deletions.
15 changes: 8 additions & 7 deletions src/lib/board/board.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
<div class="h-100 d-flex flex-column align-items-stretch border-0" [class.small]="smallText" style="overflow: hidden">

<div class="d-flex flex-row align-items-stretch flex-fill h-100">


<div class="backlog border-right" *ngIf="showBacklog">
<div class="card border-right-0 border-top-0 border-left-0 w-100 h-100">
<div class="{{hHeaderClass}} d-flex flex-row justify-content-between">
Expand Down Expand Up @@ -43,18 +41,21 @@
<div class="column-cards d-flex flex-column flex-fill">

<div class="headings d-flex flex-row align-items-stretch w-100">
<div class="col-2 border-left card-header border-left-0 d-flex flex-row justify-content-between"
<div class="col-2 border-left card-header border-left-0 d-flex flex-row"
*ngIf="vGroupKey">
<div>
{{boardName}}
<div class="d-flex flex-row w-100">
<div class="boardname flex-fill">{{ boardName }}</div>
<div class="h-v-actions align-self-center">
<fa-icon [icon]="['fas', vCollapsed ? 'chevron-down' : 'chevron-up']" [fixedWidth]="true" (click)="toggleCollapseGroup('vertical', vCollapsed)"></fa-icon>
</div>
</div>
</div>

<div class="border-left {{hHeaderClass}} d-flex flex-row justify-content-between"
[class.bg-white]="collapseState(group)" [class.border-bottom-0]="collapseState(group)"
[class.col]="!collapseState(group)" *ngFor="let group of hHeadings"
[class.h-collapsed]="collapseState(group)">
<div clasS="group-heading" *ngIf="!collapseState(group)">
<div class="group-heading" *ngIf="!collapseState(group)">


<ng-container [ngIf]="hHeaderTemplate" *ngTemplateOutlet="hHeaderTemplate; context: { groupName: group }">
Expand Down Expand Up @@ -94,7 +95,7 @@
[class.flex-row]="collapseState(vGroup)" [class.flex-row-reverse]="collapseState(vGroup)">
<div class="align-self-start flex-fill">
<ng-content
*ngTemplateOutlet="cardAction; context: { withNew: false, group: { hGroup: null, vGroup: vGroup}, collapser: true }">
*ngTemplateOutlet="cardAction; context: { withNew: false, group: { hGroup: null, vGroup: vGroup}, collapser: true, chevronIcon: !collapseState(vGroup) ? 'chevron-up' : 'chevron-down' }">
</ng-content>
</div>
<div class="align-self-start">
Expand Down
140 changes: 136 additions & 4 deletions src/lib/board/board.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, OnInit, Input, Output, EventEmitter, Renderer2, ElementRef, TemplateRef } from '@angular/core';
import { Component, OnInit, Input, Output, EventEmitter, Renderer2, ElementRef, TemplateRef, ChangeDetectorRef } from '@angular/core';
import { CardItem, CollapseState } from '../types';
import { CodegenComponentFactoryResolver } from '@angular/core/src/linker/component_factory_resolver';

Expand Down Expand Up @@ -44,12 +44,13 @@ export class BoardComponent implements OnInit {
@Input() scrollable = false;
@Input() vCollapsable = true;

@Input() vCollapsed = false;
@Input() hCollapsed = false;

@Output() dragStarted = new EventEmitter<object>();
@Output() dropped = new EventEmitter<object>();
@Output() elementCreateClick = new EventEmitter<ClickEvent>();



public hHeadings: string[] = [];
public vHeadings: string[] = [];

Expand All @@ -58,8 +59,14 @@ export class BoardComponent implements OnInit {
private placeholderSet = false;
private currentDragZone: string;

constructor(private renderer: Renderer2, private elRef: ElementRef) { }
constructor(private renderer: Renderer2, private elRef: ElementRef, private cd: ChangeDetectorRef) { }

/**
*
*
*
* @memberOf BoardComponent
*/
ngOnInit() {
if (this.invertGroupDirection) {
const vGkey = this.vGroupKey;
Expand All @@ -74,6 +81,15 @@ export class BoardComponent implements OnInit {
this.collapseStates.push(...[...this.vHeadings, ...this.hHeadings].map(item => ({ name: item, collapsed: false })));
}

/**
*
*
* @param {string} vValue
* @param {string} hValue
* @returns {(CardItem[] | object[])}
*
* @memberOf BoardComponent
*/
getItemsOfGroup(vValue: string, hValue: string): CardItem[] | object[] {
// console.log('getItemsOfGroup', arguments);
let items = this.items.filter(item => {
Expand Down Expand Up @@ -133,17 +149,62 @@ export class BoardComponent implements OnInit {
return items;
}

/**
*
*
* @param {string} direction
* @param {boolean} collapsed
*
* @memberOf BoardComponent
*/
toggleCollapseGroup(direction: string, collapsed: boolean): void {
const groupKeysToToggle = this.collapseStates.filter(item => (direction == 'vertical' ? this.vHeadings : this.hHeadings).some(i => i.toLowerCase() == item.name.toLowerCase()));
groupKeysToToggle.forEach(item => item.collapsed = !collapsed);
if(groupKeysToToggle.length > 0){
if(direction == 'vertical'){
this.vCollapsed = !collapsed;
}else{
this.hCollapsed = !collapsed;
}
}
}

/**
*
*
* @param {object} item
* @returns {GroupKeys}
*
* @memberOf BoardComponent
*/
determineCorrectGroupKeys(item: object): GroupKeys {
return {
hGroupKey: this.getCaseInsensitivePropKey(this.items[0], this.hGroupKey),
vGroupKey: this.getCaseInsensitivePropKey(this.items[0], this.vGroupKey)
};
}

/**
*
*
* @param {object} item
* @param {string} propKey
* @returns {string}
*
* @memberOf BoardComponent
*/
getCaseInsensitivePropKey(item: object, propKey: string): string {
return Object.keys(item).find(key => key.toLowerCase() === propKey.toLowerCase());
}

/**
*
*
* @param {string} [groupKey=this.vGroupKey]
* @returns {string[]}
*
* @memberOf BoardComponent
*/
getHeadings(groupKey: string = this.vGroupKey): string[] {
const keys = (<object[]>this.items).map((item: any) =>
item[Object.keys(item).find(key => key.toLowerCase() === groupKey.toLowerCase())]
Expand All @@ -154,6 +215,13 @@ export class BoardComponent implements OnInit {
});
}

/**
*
*
* @returns {(CardItem[] | object[])}
*
* @memberOf BoardComponent
*/
getUngroupedItems(): CardItem[] | object[] {
if (this.showUngroupedInBacklog) {
return this.items.filter(item => {
Expand All @@ -166,6 +234,13 @@ export class BoardComponent implements OnInit {
return [];
}

/**
*
*
* @param {{ hGroup: string, vGroup: string }} group
*
* @memberOf BoardComponent
*/
toggleCollapse(group: { hGroup: string, vGroup: string }): void {


Expand All @@ -176,26 +251,66 @@ export class BoardComponent implements OnInit {
// console.log("Toggle: "+part);
}

/**
*
*
* @param {string} part
* @returns {boolean}
*
* @memberOf BoardComponent
*/
collapseState(part: string): boolean {
return this.collapseStates.find(item => item.name === part).collapsed;
}

/**
*
*
* @param {DragEvent} event
* @param {CardItem} item
*
* @memberOf BoardComponent
*/
public dragStart(event: DragEvent, item: CardItem) {
this.dragItem = item;
this.dragStarted.emit(this.dragItem);
}

/**
*
*
* @param {DragEvent} event
* @param {CardItem} item
*
* @memberOf BoardComponent
*/
public dragEnd(event: DragEvent, item: CardItem) {
this.dragItem = undefined;

}


/**
*
*
* @param {ClickEvent} group
*
* @memberOf BoardComponent
*/
createElement(group: ClickEvent) {
this.elementCreateClick.emit(group);
}


/**
*
*
* @param {DragEvent} event
* @param {string} vRow
* @param {string} hRow
*
* @memberOf BoardComponent
*/
public drop(event: DragEvent, vRow: string, hRow: string) {
event.preventDefault();
if (event.currentTarget) {
Expand All @@ -217,6 +332,15 @@ export class BoardComponent implements OnInit {
this.dragItem = undefined;
}

/**
*
*
* @param {DragEvent} event
* @param {string} vRow
* @param {string} hRow
*
* @memberOf BoardComponent
*/
public dragOver(event: DragEvent, vRow: string, hRow: string) {
if (this.dragItem) {
event.preventDefault();
Expand Down Expand Up @@ -248,6 +372,14 @@ export class BoardComponent implements OnInit {
}
}

/**
*
*
* @param {string} id
* @returns {HTMLElement}
*
* @memberOf BoardComponent
*/
createPlaceholderElement(id: string): HTMLElement {
if (this.dragoverPlaceholderTemplate) {
return this.dragoverPlaceholderTemplate.elementRef.nativeElement.cloneNode(true);
Expand Down

0 comments on commit 2d82c4f

Please sign in to comment.