jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
170 lines (148 loc) • 7.25 kB
text/typescript
import { Component, OnDestroy, ViewChild } from '@angular/core';
import { jqxKanbanComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxkanban';
({
selector: 'app-administrative-tasks',
templateUrl: './administrative-tasks.component.html',
styleUrls: ['./administrative-tasks.component.css']
})
export class AdministrativeTasksComponent {
('myKanban') myKanban: jqxKanbanComponent;
constructor() { }
ngOnDestroy() {
this.myKanban.destroy();
}
private itemIndex: number = 0;
private kanbanTemplate: string =
`<div class="jqx-kanban-item" id="">
<div class='jqx-kanban-item-color-status'></div>
<div class='jqx-icon jqx-icon-close jqx-kanban-item-template-content jqx-kanban-template-icon'></div>
<div class='jqx-kanban-item-text'></div>
<div style='display: none;' class='jqx-kanban-item-footer'></div>
</div>";`
private resourcesAdapterFunc = () => {
const resourcesSource =
{
dataType: "json",
dataFields: [
{ name: "id", type: "number" },
{ name: "name", type: "string" },
{ name: "common", type: "boolean" }
],
url: "https://www.jqwidgets.com/jquery-widgets-demo/demos/interactivedemos/fitnessmanager/data.php?usedwidget=taskskanbanusers"
};
return new jqx.dataAdapter(resourcesSource);
}
private kanbanSource: any = {
dataType: "json",
dataFields: [
{ name: "id", type: "string" },
{ name: "status", map: "state", type: "string" },
{ name: "text", map: "label", type: "string" },
{ name: "tags", type: "string" },
{ name: "color", map: "hex", type: "string" },
{ name: "resourceId", type: "number" }
],
url: "https://www.jqwidgets.com/jquery-widgets-demo/demos/interactivedemos/fitnessmanager/data.php?usedwidget=taskskanban"
}
private kanbanDataAdapter = new jqx.dataAdapter(this.kanbanSource);
private kanbanColumns: jqwidgets.KanbanColumns[] = [
{ text: "Backlog", iconClassName: 'jqx-icon-plus-alt', dataField: "new", maxItems: 6 },
{ text: "In Progress", iconClassName: 'jqx-icon-plus-alt', dataField: "work", maxItems: 6 },
{ text: "Done", iconClassName: 'jqx-icon-plus-alt', dataField: "done", maxItems: 6 }
];
private itemRenderer = (item, data, resource) => {
item.find('.jqx-kanban-item-color-status')[0].innerHTML = '<span style="line-height: 23px; margin-left: 5px;">' + resource.name + '</span>';
item[0].addEventListener('dblclick', (event) => {
let input;
let addToHeader = false;
let header = null;
let textElement;
if (event.target.nodeName === 'SPAN' && event.target.parentElement.classList.contains('jqx-kanban-item-color-status')) {
input = document.createElement('input');
input.placeholder = '(No Title)';
input.classList.add('jqx-input');
input.style.cssText = 'border: none; background: transparent; width: 80%;';
header = event.target;
header.innerHTML = '';
header.appendChild(input);
addToHeader = true;
}
if (!addToHeader) {
input = document.createElement('textarea');
input.placeholder = '(No Title)';
input.classList.add('jqx-input');
input.style.cssText = 'border: none; width: 100%;';
textElement = item.find('.jqx-kanban-item-text');
textElement[0].innerHTML = '';
textElement[0].appendChild(input);
}
input.addEventListener('mousedown', (event) => event.stopPropagation());
input.addEventListener('mouseup', (event) => event.stopPropagation());
input.addEventListener('blur', () => {
let value = input.value;
if (!addToHeader) {
let span = document.createElement('span');
span.textContent = value;
textElement[0].appendChild(span);
} else {
header.innerHTML = value;
}
input.remove();
});
input.addEventListener('keydown', (event) => {
if (event.keyCode === 13) {
if (!addToHeader) {
let span = document.createElement('span');
span.textContent = event.target.value;
event.target.parentElement.insertBefore(span, null);
event.target.remove();
} else {
header.innerHTML = event.target.value;
}
}
})
input.focus();
});
}
private columnRenderer = (element, collapsedElement, column) => {
if (!column) return;
let columnItems = this.myKanban.getColumnItems(column.dataField).length;
element.find('.jqx-kanban-column-header-status')[0].innerHTML = ' (' + columnItems + '/' + column.maxItems + ')';
}
private itemAttrClicked = (event) => {
let args = event.args;
if (args.attribute === 'template') {
this.myKanban.removeItem(args.item.id);
}
}
private columnAttrClicked = (event) => {
let args = event.args;
if (args.attribute === "button") {
args.cancelToggle = true;
if (!args.column.collapsed) {
let colors = ['#f19b60', '#5dc3f0', '#6bbd49', '#dddddd'];
this.myKanban.addItem({
status: args.column.dataField,
text: '<textarea placeholder="(No Title)" style = "width: 96%; margin-top:2px; border-radius: 3px; border:none; line-height:20px; height: 50px;" class= "jqx-input" id="newItem' + this.itemIndex + '"></textarea>',
tags: 'new task',
color: colors[Math.floor(Math.random() * 4)],
resourceId: null
});
let input = document.getElementById('newItem' + this.itemIndex);
input.addEventListener('mousedown', (event) => event.stopPropagation());
input.addEventListener('mouseup', (event) => event.stopPropagation());
input.addEventListener('keydown', (event) => {
if (event.keyCode === 13) {
let target = event.target as HTMLTextAreaElement;
let span = document.createElement('span');
span.innerHTML = target.value;
target.parentElement.insertBefore(span, null);
target.remove();
}
});
input.focus();
this.itemIndex++;
}
}
}
}