@disane/ngx-taskboard
Version:
Yet another angular taskboard
1,229 lines (1,223 loc) • 235 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/platform-browser'), require('@angular/platform-browser/animations'), require('rxjs'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-brands-svg-icons'), require('@fortawesome/free-regular-svg-icons'), require('@fortawesome/free-solid-svg-icons'), require('rxjs/operators')) :
typeof define === 'function' && define.amd ? define('@disane/ngx-taskboard', ['exports', '@angular/core', '@angular/forms', '@angular/platform-browser', '@angular/platform-browser/animations', 'rxjs', '@fortawesome/angular-fontawesome', '@fortawesome/free-brands-svg-icons', '@fortawesome/free-regular-svg-icons', '@fortawesome/free-solid-svg-icons', 'rxjs/operators'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.disane = global.disane || {}, global.disane['ngx-taskboard'] = {}), global.ng.core, global.ng.forms, global.ng.platformBrowser, global.ng.platformBrowser.animations, global.rxjs, global.angularFontawesome, global.freeBrandsSvgIcons, global.freeRegularSvgIcons, global.freeSolidSvgIcons, global.rxjs.operators));
}(this, (function (exports, i0, forms, platformBrowser, animations, rxjs, angularFontawesome, freeBrandsSvgIcons, freeRegularSvgIcons, freeSolidSvgIcons, operators) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (Object.prototype.hasOwnProperty.call(b, p))
d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); };
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try {
step(generator.next(value));
}
catch (e) {
reject(e);
} }
function rejected(value) { try {
step(generator["throw"](value));
}
catch (e) {
reject(e);
} }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function () { if (t[0] & 1)
throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f)
throw new TypeError("Generator is already executing.");
while (_)
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
return t;
if (y = 0, t)
op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return { value: op[1], done: false };
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2])
_.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
}
catch (e) {
op = [6, e];
y = 0;
}
finally {
f = t = 0;
}
if (op[0] & 5)
throw op[1];
return { value: op[0] ? op[1] : void 0, done: true };
}
}
var __createBinding = Object.create ? (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
}) : (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
o[k2] = m[k];
});
function __exportStar(m, o) {
for (var p in m)
if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
__createBinding(o, m, p);
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m)
return m.call(o);
if (o && typeof o.length === "number")
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++)
s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
;
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n])
i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try {
step(g[n](v));
}
catch (e) {
settle(q[0][3], e);
} }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length)
resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) {
Object.defineProperty(cooked, "raw", { value: raw });
}
else {
cooked.raw = raw;
}
return cooked;
}
;
var __setModuleDefault = Object.create ? (function (o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function (o, v) {
o["default"] = v;
};
function __importStar(mod) {
if (mod && mod.__esModule)
return mod;
var result = {};
if (mod != null)
for (var k in mod)
if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
__createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, privateMap) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to get private field on non-instance");
}
return privateMap.get(receiver);
}
function __classPrivateFieldSet(receiver, privateMap, value) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to set private field on non-instance");
}
privateMap.set(receiver, value);
return value;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/taskboard.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TaskboardService = /** @class */ (function () {
function TaskboardService() {
this.filterChanged$ = new i0.EventEmitter();
this.objectProperties = [];
}
return TaskboardService;
}());
TaskboardService.decorators = [
{ type: i0.Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */ TaskboardService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TaskboardService_Factory() { return new TaskboardService(); }, token: TaskboardService, providedIn: "root" });
if (false) {
/** @type {?} */
TaskboardService.prototype.filterChanged$;
/** @type {?} */
TaskboardService.prototype.objectProperties;
}
var BoardComponent = /** @class */ (function () {
/**
* @param {?} renderer
* @param {?} elRef
* @param {?} cd
* @param {?} taskboardService
* @param {?} ngZone
*/
function BoardComponent(renderer, elRef, cd, taskboardService, ngZone) {
this.renderer = renderer;
this.elRef = elRef;
this.cd = cd;
this.taskboardService = taskboardService;
this.ngZone = ngZone;
/**
* Shows the blacklog on onit
*/
this.showBacklog = true;
/**
* Name of the backlog row
*/
this.backlogName = 'Backlog';
/**
* Grouping keys for columns (if not passed, the keys will be determined out of the items)
* Caution: If you don't pass any headings manually, only the columns are shown, which have data.
* If you want to show emtpy rows, please set them
*/
this.hGroupKeys = [];
/**
* Grouping keys for rows (if not passed, the keys will be determined out of the items)
* Caution: If you don't pass any headings manually, only the rows are shown, which have data.
* If you want to show emtpy rows, please set them
*/
this.vGroupKeys = [];
/**
* Show add buttons on the column headings
*/
this.hAddNewItems = true;
/**
* Show add buttons on the row headings
*/
this.vAddNewItems = true;
/**
* Show add buttons in the cells for columns and rows
*/
this.cellAddNewItems = true;
/**
* Key to group data for rows
*/
this.vGroupKey = '';
/**
* Key to group data for columns
*/
this.hGroupKey = '';
/**
* Sort items by property
*/
this.sortBy = '';
/**
* Board name to show between row and column header
*/
this.boardName = '';
/**
* Invert rows and columns
*/
this.invertGroupDirection = false;
/**
* All items which can't be grouped into rows and columns are stored into the backlog
*/
this.showUngroupedInBacklog = true;
/**
* Decrease overall font size
*/
this.smallText = false;
/**
* Template for items to render. "item" object ist passed (see examples)
*/
this.itemTemplate = null;
/**
* Template for collapsed rows to render. "count" object ist passed (see examples)
*/
this.noElementsTemplate = null;
/**
* Template for column headers. Current groupName will be passed (see examples)
*/
this.hHeaderTemplate = null;
/**
* Template for row headers. Current groupName will be passed (see examples)
*/
this.vHeaderTemplate = null;
/**
* Template for actions, add and collapse buttons (see examples)
*/
this.actionsTemplate = null;
/**
* Template for the placeholder element which will be generated when an item is draged over a cell
*/
this.dragoverPlaceholderTemplate = null;
/**
* Icon template for add icons
*/
this.addIconTemplate = null;
/**
* Icon template for collapse icons
*/
this.collapseIconTemplate = null;
/**
* Icon template for expand icons
*/
this.expandIconTemplate = null;
/**
* Default css class for row header
*/
this.vHeaderClass = 'card-header';
/**
* Default css class for column header
*/
this.hHeaderClass = 'card-header card-header-bg';
/**
* If set to true, the horizontal group keys are fixed positioned to the top and remain at the top while scrolling. Only applied when scrollable is true
*/
this.stickyHorizontalHeaderKeys = true;
/**
* If set to true, the vertical group keys are fixed positioned to the top and remain at the top while scrolling. Only applied when scrollable is true
*/
this.stickyVerticalHeaderKeys = false;
/**
* Default css class for cell header
*/
this.cellClass = 'card-header';
/**
* Column width (in px) which is applied to the columns when the content is scollable
*/
this.columnWidth = 200;
/**
* Width of the backlog row, when activated. You can use all valid css units. Default is columnWidth
*/
this.backlogWidth = this.columnWidth + "px";
/**
* Allow to collapse the rows
*/
this.vCollapsable = true;
/**
* Rows are collapsed or not on init
*/
this.vCollapsed = false;
/**
* Columns are collapsed or not on init
*/
this.hCollapsed = false;
/**
* Shows the filter row to search items by filter in filterOnProperties array
*/
this.showFilterRow = true;
/**
* Placeholder for the input with the filter row
*/
this.filterRowPlaceholder = 'Search for items';
/**
* Predefined filter for the searchbar. If set, the items are filtered by the term on init.
*/
this.filter = '';
/**
* Specify the properties which will be searched for the given term
* in filter. If not properties are given, all will be searched
*/
this.filterOnProperties = [];
/**
* The collapse state which is applied when set initially
*/
this.initialCollapseState = [];
// OUTPUTS
/**
* Fired when the user drags an item. Current item is passed
*/
this.dragStarted = new i0.EventEmitter();
/**
* Fired when an item is dropped. Current item is passed
*/
this.dropped = new i0.EventEmitter();
/**
* Fired when an add action is click. Current ClickEvent is passed
*/
this.elementCreateClick = new i0.EventEmitter();
/**
* Fired when a heading is collapsed. CollapseEvent is emitted
*/
this.headingCollapsed = new i0.EventEmitter();
this.isScrolling = new i0.EventEmitter();
this.scrolledToEnd = new i0.EventEmitter();
this.scrollEnded = new i0.EventEmitter();
/**
* Column headings
*/
this.hHeadings = [];
/**
* Row headings
*/
this.vHeadings = [];
/**
* If set to true, the rows and columns are scrollable and will be out of the viewport.
* If not set, all rows and column will only use 100% of the parent element (aligned by flex/flex-fill)
*/
this.scrollable = false;
/**
* If set to true, rows are scrollable
*/
this.verticalScrolling = false;
/**
* If set to true, columns are scrollable
*/
this.horizontalScrolling = false;
/**
* Items to display
*/
// tslint:disable-next-line: variable-name
this._items = [];
this.collapseStates = [];
this.placeholderSet = false;
this.isScrollingTimeout = 0;
this.scrollableContainer = '.column-cards';
}
Object.defineProperty(BoardComponent.prototype, "items", {
/**
* @return {?}
*/
get: function () {
return this._items;
},
/**
* @param {?} items
* @return {?}
*/
set: function (items) {
this._items = items;
if (items.length > 0) {
this.prepareBoard();
}
},
enumerable: false,
configurable: true
});
/**
* @return {?}
*/
BoardComponent.prototype.onResize = function () {
this.checkIfContentNeedsToScroll();
};
/**
* @return {?}
*/
BoardComponent.prototype.ngOnInit = function () {
if (this.items.length > 0) {
this.prepareBoard();
}
};
/**
* @return {?}
*/
BoardComponent.prototype.executeChangeDetection = function () {
// this.checkIfContentNeedsToScroll();
this.cd.detectChanges();
};
/**
* @return {?}
*/
BoardComponent.prototype.ngDoCheck = function () {
};
/**
* @return {?}
*/
BoardComponent.prototype.ngAfterViewInit = function () {
// Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
// Add 'implements AfterViewInit' to the class.
};
/**
* Checks if content needs to scroll and restore the scrollstate if needed
* @private
* @return {?}
*/
BoardComponent.prototype.checkIfContentNeedsToScroll = function () {
var _this = this;
var _a = this.containerIsScrollable(this.scrollableContainer), h = _a.hScroll, v = _a.vScroll;
this.horizontalScrolling = h;
this.verticalScrolling = v;
this.scrollable = v || h;
// this.executeChangeDetection();
if (this.scrollStates && (this.horizontalScrolling || this.verticalScrolling)) {
setTimeout(( /**
* @return {?}
*/function () {
if (_this.restoreScrollState(h, v, _this.scrollStates)) {
_this.scrollStates = null;
}
}), 500);
}
};
/**
* Prepares board
* @private
* @return {?}
*/
BoardComponent.prototype.prepareBoard = function () {
var _this = this;
this.checkPrerequisites().then(( /**
* @return {?}
*/function () {
var _a;
_this.generateHeadings();
(_a = _this.collapseStates).push.apply(_a, __spread(_this.generateCollapseStates(_this.hHeadings, 'h'), _this.generateCollapseStates(_this.vHeadings, 'v')));
_this.matchAndSetInitialCollapseState();
_this.taskboardService.filterChanged$.subscribe(( /**
* @param {?} filter
* @return {?}
*/function (/**
* @param {?} filter
* @return {?}
*/ filter) { return _this.filter = filter; }));
_this.checkIfContentNeedsToScroll();
_this.executeChangeDetection();
}));
};
/**
* @private
* @param {?} hScrollable
* @param {?} vScrollable
* @param {?} scrollState
* @return {?}
*/
BoardComponent.prototype.restoreScrollState = function (hScrollable, vScrollable, scrollState) {
/** @type {?} */
var scrollContainer = this.elRef.nativeElement.querySelector(this.scrollableContainer);
if (scrollContainer && scrollState) {
if (vScrollable) {
scrollContainer.scrollTop = scrollState.scrollTop;
}
if (hScrollable) {
scrollContainer.scrollLeft = scrollState.scrollLeft;
}
return true;
}
return false;
};
/**
* Matches and set initial collapse state
* @private
* @return {?}
*/
BoardComponent.prototype.matchAndSetInitialCollapseState = function () {
var _this = this;
this.initialCollapseState.forEach(( /**
* @param {?} item
* @return {?}
*/function (/**
* @param {?} item
* @return {?}
*/ item) {
/** @type {?} */
var foundCollapseState = _this.collapseStates.find(( /**
* @param {?} cS
* @return {?}
*/function (/**
* @param {?} cS
* @return {?}
*/ cS) { return cS.name.toLowerCase() === item.name.toLowerCase(); }));
if (foundCollapseState && foundCollapseState.collapsed !== item.collapsed) {
foundCollapseState.collapsed = item.collapsed;
}
}));
};
/**
* Checks prerequisites
* @private
* @return {?} prerequisites
*/
BoardComponent.prototype.checkPrerequisites = function () {
if (this.checkIfPropIsObject(this.hGroupKeys[0])) {
/** @type {?} */
var hasValueProperty = this.hGroupKeys.every(( /**
* @param {?} item
* @return {?}
*/function (item) { return item.value != null; }));
if (!hasValueProperty) {
throw new Error(("Column headers are objects but field 'value' is missing in one or more items."));
}
}
if (this.checkIfPropIsObject(this.vGroupKeys[0])) {
/** @type {?} */
var hasValueProperty = this.vGroupKeys.every(( /**
* @param {?} item
* @return {?}
*/function (item) { return item.value != null; }));
if (!hasValueProperty) {
throw new Error(("Row headers are objects but field 'value' is missing in one or more items."));
}
}
return Promise.resolve(true);
};
/**
* Checks if prop is object
* @private
* @param {?} prop
* @return {?} true if if prop is object
*/
BoardComponent.prototype.checkIfPropIsObject = function (prop) {
return typeof (prop) === 'object';
};
/**
* Generates the appropiate headings
* \@memberOf BoardComponent
* @private
* @return {?}
*/
BoardComponent.prototype.generateHeadings = function () {
if (this.invertGroupDirection) {
/** @type {?} */
var vGkey = this.vGroupKey;
/** @type {?} */
var hGkey = this.hGroupKey;
this.hGroupKey = vGkey;
this.vGroupKey = hGkey;
}
this.vHeadings = this.getHeadings(this.vGroupKeys, this.vGroupKey);
this.hHeadings = this.getHeadings(this.hGroupKeys, this.hGroupKey);
};
/**
* Generates collapse states
* @private
* @param {?} array Array of collapse states
* @param {?} direction
* @return {?} collapse states
*/
BoardComponent.prototype.generateCollapseStates = function (array, direction) {
var _this = this;
return array.map(( /**
* @param {?} item
* @return {?}
*/function (/**
* @param {?} item
* @return {?}
*/ item) { return ({ name: _this.getValue(item), collapsed: (direction === 'h') ? _this.hCollapsed : _this.vCollapsed }); }));
};
/**
* Gets all items of a cell (row / col)
*
* \@memberOf BoardComponent
* @param {?} vValue Value of the row
* @param {?} hValue Value of the column
* @return {?} Array of all items of a cell
*
*/
BoardComponent.prototype.getItemsOfGroup = function (vValue, hValue) {
var _this = this;
/** @type {?} */
var items = this.items.filter(( /**
* @param {?} item
* @return {?}
*/function (/**
* @param {?} item
* @return {?}
*/ item) {
if (_this.taskboardService.objectProperties.length === 0) {
_this.taskboardService.objectProperties = Object.keys(item);
}
/** @type {?} */
var groupKeys = _this.determineCorrectGroupKeys();
/** @type {?} */
var vItem = _this.getValue(item[groupKeys.vGroupKey]);
/** @type {?} */
var hItem = _this.getValue(item[groupKeys.hGroupKey]);
if (hItem === undefined || hItem === undefined && vItem === undefined || vItem === undefined) {
return false;
}
/** @type {?} */
var found = vItem.toString().toLowerCase() === vValue.toString().toLowerCase() && hItem.toString().toLowerCase() === hValue.toString().toLowerCase();
return found;
}));
// console.log('getItemsOfGroup', items);
if (this.showUngroupedInBacklog) {
items = items.filter(( /**
* @param {?} item
* @return {?}
*/function (/**
* @param {?} item
* @return {?}
*/ item) { return item[_this.vGroupKey] !== '' && item[_this.hGroupKey] !== ''; }));
}
if (this.sortBy !== '') {
/** @type {?} */
var fieldType_1 = typeof (items.some(( /**
* @return {?}
*/function () { return items[0][_this.sortBy] !== undefined && items[0][_this.sortBy] !== null; }))[this.sortBy]);
if (fieldType_1) {
items = items.sort(( /**
* @param {?} a
* @param {?} b
* @return {?}
*/function (a, b) {
/** @type {?} */
var aField = a[_this.sortBy];
/** @type {?} */
var bField = b[_this.sortBy];
if (fieldType_1 === 'number') {
return bField - aField;
}
if (fieldType_1 === 'string') {
if (aField < bField) {
return -1;
}
if (aField > bField) {
return 1;
}
return 0;
}
}));
}
}
return (this.filter !== '') ? items.filter(( /**
* @param {?} item
* @return {?}
*/function (item) { return (_this.filterOnProperties.length > 0 ? _this.filterOnProperties : Object.keys(item)).some(( /**
* @param {?} key
* @return {?}
*/function (/**
* @param {?} key
* @return {?}
*/ key) {
/** @type {?} */
var found = item[key] !== null && typeof (item[key]) !== 'number' && ((( /** @type {?} */(item[key]))).indexOf(_this.filter) > -1 ? true : false);
// found && console.info(`Searching "${item[key]}" for "${this.filter}" | Found ${found}`);
return found;
})); })) : items;
};
/**
* Toggles in entire group (all rows or all columns)
*
* \@memberOf BoardComponent
* @param {?} direction Direction to toggle
* @param {?} collapsed Current collapse state
*
* @return {?}
*/
BoardComponent.prototype.toggleCollapseGroup = function (direction, collapsed) {
var _this = this;
this.ngZone.runOutsideAngular(( /**
* @return {?}
*/function () {
/** @type {?} */
var groupKeysToToggle = _this.collapseStates.filter(( /**
* @param {?} item
* @return {?}
*/function (/**
* @param {?} item
* @return {?}
*/ item) { return (direction === 'vertical' ? _this.vHeadings : _this.hHeadings)
.some(( /**
* @param {?} i
* @return {?}
*/function (/**
* @param {?} i
* @return {?}
*/ i) { return _this.getValue(i).toString()
.toLowerCase() === item.name.toString().toLowerCase(); })); }));
groupKeysToToggle.forEach(( /**
* @param {?} item
* @return {?}
*/function (/**
* @param {?} item
* @return {?}
*/ item) { return item.collapsed = !collapsed; }));
if (groupKeysToToggle.length > 0) {
if (direction === 'vertical') {
_this.vCollapsed = !collapsed;
}
else {
_this.hCollapsed = !collapsed;
}
}
_this.headingCollapsed.emit({
group: direction,
collapsed: !collapsed,
overallCollapseState: _this.collapseStates
});
}));
// debugger;
setTimeout(( /**
* @return {?}
*/function () {
_this.executeChangeDetection();
_this.checkIfContentNeedsToScroll();
}), 100);
};
/**
* Gets the value of an item
*
* \@memberOf BoardComponent
* @param {?} item Item to get the value from
* @return {?} Value of item
*
*/
BoardComponent.prototype.getValue = function (item) {
if (( /** @type {?} */(item))) {
return ((( /** @type {?} */(item))).value ? (( /** @type {?} */(item))).value : ( /** @type {?} */(item)));
}
return '';
};
/**
* Determines correct group keys
* @private
* @return {?} correct group keys
*/
BoardComponent.prototype.determineCorrectGroupKeys = function () {
return {
hGroupKey: this.getCaseInsensitivePropKey(this.items[0], this.hGroupKey),
vGroupKey: this.getCaseInsensitivePropKey(this.items[0], this.vGroupKey)
};
};
/**
* Gets case insensitive prop key
* @private
* @param {?} item Item object
* @param {?} propKey property key
* @return {?} case insensitive prop key
*/
BoardComponent.prototype.getCaseInsensitivePropKey = function (item, propKey) {
if (item) {
return Object.keys(item)
.find(( /**
* @param {?} key
* @return {?}
*/function (/**
* @param {?} key
* @return {?}
*/ key) { return (key !== '' && key !== undefined && key !== undefined)
? key.toLowerCase() === propKey.toLowerCase()
: false; }));
}
return '';
};
/**
* Gets headings from items
* @private
* @param {?=} groupKey
* @return {?} headings from items
*/
BoardComponent.prototype.getHeadingsFromItems = function (groupKey) {
var _this = this;
if (groupKey === void 0) { groupKey = this.vGroupKey; }
/** @type {?} */
var keys = (( /** @type {?} */(this.items))).map(( /**
* @param {?} item
* @return {?}
*/function (item) { return item[Object.keys(item)
.find(( /**
* @param {?} key
* @return {?}
*/function (/**
* @param {?} key
* @return {?}
*/ key) { return key.toLowerCase() === groupKey.toLowerCase(); }))]; }));
return keys.filter(( /**
* @param {?} elem
* @param {?} pos
* @param {?} arr
* @return {?}
*/function (elem, pos, arr) { return arr.indexOf(elem) === pos && (_this.showUngroupedInBacklog && (elem !== '' && elem !== undefined)); }));
};
/**
* Gets ungrouped items (which could not be put into rows or cols)
*
* \@memberOf BoardComponent
* @return {?} Array of ungrouped items
*
*/
BoardComponent.prototype.getUngroupedItems = function () {
var _this = this;
if (this.showUngroupedInBacklog) {
return this.items.filter(( /**
* @param {?} item
* @return {?}
*/function (/**
* @param {?} item
* @return {?}
*/ item) {
/** @type {?} */
var groupKeys = _this.determineCorrectGroupKeys();
/** @type {?} */
var isUngrouped = (item[groupKeys.vGroupKey] === '' && item[groupKeys.hGroupKey] === '')
||
(item[groupKeys.vGroupKey] === null && item[groupKeys.hGroupKey] === null);
return isUngrouped;
}));
}
return [];
};
/**
* Toggles an elements collapse state
*
* \@memberOf BoardComponent
* @param {?} group Column and row value
*
* @return {?}
*/
BoardComponent.prototype.toggleCollapse = function (group) {
var _this = this;
this.ngZone.runOutsideAngular(( /**
* @return {?}
*/function () {
/** @type {?} */
var part = _this.getValue(group.hGroup || group.vGroup);
// console.log("Toggle: " + part);
/** @type {?} */
var collapseState = _this.collapseState(part);
_this.collapseStates.find(( /**
* @param {?} item
* @return {?}
*/function (/**
* @param {?} item
* @return {?}
*/ item) { return item.name === part; })).collapsed = !collapseState;
_this.headingCollapsed.emit({
group: group.hGroup || group.vGroup,
collapsed: !collapseState,
overallCollapseState: _this.collapseStates
});
// this.ngZone.run(() => {
// });
// ;
}));
rxjs.timer(100).subscribe(( /**
* @param {?} t
* @return {?}
*/function (/**
* @param {?} t
* @return {?}
*/ t) {
_this.executeChangeDetection();
_this.checkIfContentNeedsToScroll();
}));
// this.checkIfContentNeedsToScroll();
};
/**
* Gets the current collapse state of a specific item
*
* \@memberOf BoardComponent
* @param {?} collapseItem Item to get the collapse state
* @return {?} true if collapsed, false when expanded
*
*/
BoardComponent.prototype.collapseState = function (collapseItem) {
var _this = this;
if (typeof (collapseItem) === 'object') {
collapseItem = (collapseItem).value;
}
/** @type {?} */
var foundItem = this.collapseStates.find(( /**
* @param {?} item
* @return {?}
*/function (/**
* @param {?} item
* @return {?}
*/ item) { return item.name === _this.getValue(collapseItem); }));
if (foundItem) {
/** @type {?} */
var foundCollapsedState = foundItem.collapsed;
// console.log('collapseState', part, foundCollapsedState);
return foundCollapsedState;
}
return false;
};
/**
* Handler which is called when an item starts to drag
*
* \@memberOf BoardComponent
* @param {?} event Native drag event
* @param {?} item CardItem which is dragged
*
* @return {?}
*/
BoardComponent.prototype.dragStart = function (event, item) {
this.dragItem = item;
this.nativeDragItem = (( /** @type {?} */(event.currentTarget)));
this.dragStarted.emit(this.dragItem);
this.cd.detach();
};
/**
* Handler which is called, when the drag of an item ends
*
* \@memberOf BoardComponent
* @return {?}
*/
BoardComponent.prototype.dragEnd = function () {
this.dragItem = undefined;
};
/**
* Handler which is called, when a new item should be created (click on a add icon)
*
* \@memberOf BoardComponent
* @param {?} group Row and column value
*
* @return {?}
*/
BoardComponent.prototype.createElement = function (group) {
this.elementCreateClick.emit(group);
};
/**
* Handler which is called when an item is dropped
*
* \@memberOf BoardComponent
* @param {?} event Native drag event
* @param {?} vRow Row item
* @param {?} hRow Column item
*
* @return {?}
*/
BoardComponent.prototype.drop = function (event, vRow, hRow) {
event.preventDefault();
if (event.currentTarget) {
/** @type {?} */
var placeholderEl = (( /** @type {?} */(event.currentTarget))).querySelector('.placeholder');
if (placeholderEl) {
this.renderer.removeChild(placeholderEl.parentNode, placeholderEl);
}
this.currentDragZone = '';
this.placeholderSet = false;
}
/** @type {?} */
var groupKeys = this.determineCorrectGroupKeys();
/** @type {?} */
var dragItemBeforeChange = Object.assign({}, this.dragItem);
this.dragItem[groupKeys.vGroupKey] = this.getValue(vRow);
this.dragItem[groupKeys.hGroupKey] = this.getValue(hRow);
this.dropped.emit({
hGroup: hRow,
vGroup: vRow,
item: this.dragItem,
itemBeforeChange: dragItemBeforeChange,
nativeItemElement: this.nativeDragItem
});
this.dragItem = undefined;
this.cd.reattach();
this.executeChangeDetection();
};
/**
* Handler which is called when an item is dragged over a cell
*
* \@memberOf BoardComponent
* @param {?} event Native html drag event
* @param {?} vRow Row item
* @param {?} hRow Column item
*
* @return {?}
*/
BoardComponent.prototype.dragOver = function (event, vRow, hRow) {
if (this.dragItem) {
event.preventDefault();
if (vRow === undefined) {
vRow = '';
}
if (hRow === undefined) {
hRow = '';
}
vRow = this.getValue(vRow).toString();
hRow = this.getValue(hRow).toString();
/** @type {?} */
var dragZone = (vRow + "-" + hRow.replace(' ', '')).toLowerCase();
if (dragZone !== this.currentDragZone && this.currentDragZone !== '') {
/** @type {?} */
var lastPlaceholder = document.getElementById(this.currentDragZone);
if (lastPlaceholder) {
this.renderer.removeChild(lastPlaceholder.parentNode, lastPlaceholder);
this.placeholderSet = false;
}
}
this.currentDragZone = (vRow + "-" + hRow.replace(' ', '')).toLowerCase();
if (!this.placeholderSet) {
/** @type {?} */
var placeholderElement = this.createPlaceholderElement();
this.renderer.appendChild(event.currentTarget, placeholderElement);
this.placeholderSet = true;
}
}
};
/**
* Checks if container is scrollable
* @private
* @param {?} containerName Container to check if scrollable
* @return {?} is scrollable
*/
BoardComponent.prototype.containerIsScrollable = function (containerName) {
/** @type {?} */
var container = this.elRef.nativeElement.querySelector(containerName);
if (container) {
/** @type {?} */
var hasHorizontalScrollbar = container.scrollWidth > container.clientWidth;
/** @type {?} */