import { NgForOf } from '@angular/common';
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Host, Input, NgModule, OnInit, Output, ViewChild } from '@angular/core';
import { TenantStore } from '@core/services/tenant/tenant.store';
import { Subject } from "rxjs";
import { TenantService } from '@core/services/tenant/tenant.service';
import { ModalDismissReasons, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ApiHttpService, AuthService, NotificationsService } from '@core/services';
import { DomSanitizer } from '@angular/platform-browser';
import { ConfirmationDialogService } from '@shared/components/confirmation-dialog/confirmation-dialog.service';
import { WorkflowService } from '../services/workflow.service';
import { FormArray } from '@angular/forms';
import { MatDialogConfig } from '@angular/material/dialog';
import { DataRequest } from '@shared/models/data.request';
import { ComboboxpopupService } from '@shared/components/comboboxpopup/comboboxpopup.service';
import { ERMComboboxService } from '@shared/components/ermcombobox/ermcombobox.service';
import { TaskService } from '../services/task.service';
import { FileUpload, TaskUpload } from '../services/_models/task.model';
import { ThrowStmt } from '@angular/compiler';
import { BryntumTaskBoardComponent } from '@bryntum/taskboard-angular';
import { DateHelper, EventModel, EventStore, DomSync, CrudManager, StringHelper, TaskBoard } from '@bryntum/taskboard/taskboard.lite.umd.js';
@Component({
selector: 'kanban-home',
templateUrl: './kandan.component.html',
styleUrls: ['./kandan.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class KanbanComponent implements OnInit, AfterViewInit {
html: string;
count: number;
tenant: string;
oldFolderId: string;
_propertyName: string = "";
fullName: string = "";
id: string = "";
ext: string = "";
user: any;
totalRating: number;
totalViews: number;
closeResult = '';
editingRecord = null;
newStartDate: any;
newEndDate: any;
taskName: any;
listTag: any;
tags: any;
taskDescription: any;
endDate: any;
priority: any;
issue: any;
project: any;
addToDoList: any;
service = "";
objUser: any;
parentIdField = "";
objectName = '';
entityName = "";
predicate = "";
dataValue = "";
viewMember = "";
valueMember = "";
comboboxName = "";
dataVll = [];
listUser: any;
message: string;
errorshow = false;
options = new DataRequest();
fileUploadList: FileUpload[];
// Mustache = require('mustache');
@Output() eventShow = new EventEmitter<boolean>();
constructor(
private domSanitizer: DomSanitizer,
private tenantService: TenantService,
private api: ApiHttpService,
wkSV: WorkflowService,
private modalService: NgbModal,
private auth: AuthService,
private cbxsv: ComboboxpopupService,
private taskService: TaskService,
private cbx: ERMComboboxService,
private notificationsService: NotificationsService,
private confirmationDialogService: ConfirmationDialogService,
private changeDetectorRef: ChangeDetectorRef) {
}
@ViewChild('contentPopup') contentPopup;
@ViewChild('contentAddUser') contentAddUser;
@ViewChild('contentListTask') contentListTask;
resources = [
{
id: '0',
name: 'Bình thường',
eventColor: 'blue'
},
{
id: '1',
name: 'Thấp',
eventColor: 'orange'
},
{
id: '2',
name: 'Cao',
eventColor: 'deep-orange'
}
];
events = [
{
id: 1,
startDate: '2020-10-11T14:00:00',
endDate: '2020-10-18T12:00:00',
name: 'Hackathon 2020',
allDay: true,
resourceId: '0',
eventColor: 'green'
},
{
id: 2,
startDate: '2020-10-11T14:00:00',
endDate: '2020-10-11T18:00:00',
name: 'Check-In in Hotel',
resourceId: '1'
},
{
id: 3,
startDate: '2020-10-11T18:00:00',
endDate: '2020-10-11T20:00:00',
name: 'Relax and official arrival beer',
allDay: true,
resourceId: '1'
},
{
id: 4,
startDate: '2020-10-11T20:00:00',
endDate: '2020-10-11T21:00:00',
name: 'Dinner',
resourceId: '1'
},
{
id: 5,
startDate: '2020-10-12T09:00:00',
endDate: '2020-10-12T10:00:00',
name: 'Breakfast',
resourceId: '1'
},
{
id: 6,
startDate: '2020-10-12T10:00:00',
endDate: '2020-10-12T12:00:00',
name: 'Team Scrum',
resourceId: '1'
},
{
id: 7,
startDate: '2020-10-12T12:00:00',
endDate: '2020-10-12T14:00:00',
name: 'Scheduler Grid introduction + review',
resourceId: '1'
},
{
id: 8,
startDate: '2020-10-12T14:00:00',
endDate: '2020-10-12T15:00:00',
name: 'Lunch',
resourceId: '1'
},
{
id: 9,
startDate: '2020-10-12T15:00:00',
endDate: '2020-10-12T19:00:00',
name: 'Active client project review',
resourceId: '1'
},
{
id: 10,
startDate: '2020-10-12T19:00:00',
endDate: '2020-10-12T20:00:00',
name: 'Dinner',
resourceId: '1'
},
{
id: 11,
startDate: '2020-10-13T09:00:00',
endDate: '2020-10-13T10:00:00',
name: 'Breakfast',
resourceId: '1'
},
{
id: 12,
startDate: '2020-10-13T10:00:00',
endDate: '2020-10-13T12:00:00',
name: 'Roadmapping for 2020',
resourceId: '1'
},
{
id: 13,
startDate: '2020-10-13T12:00:00',
endDate: '2020-10-13T14:00:00',
name: 'Review Assembla tickets and decide features to add',
resourceId: '1'
},
{
id: 14,
startDate: '2020-10-13T14:00:00',
endDate: '2020-10-13T15:00:00',
name: 'Lunch',
resourceId: '1'
},
{
id: 15,
startDate: '2020-10-13T15:00:00',
endDate: '2020-10-13T19:00:00',
name: 'Active programming',
resourceId: '1'
},
{
id: 16,
startDate: '2020-10-13T19:00:00',
endDate: '2020-10-13T20:00:00',
name: 'Dinner',
resourceId: '1'
},
{
id: 17,
startDate: '2020-10-14T09:00:00',
endDate: '2020-10-14T10:00:00',
name: 'Breakfast',
resourceId: '1'
},
{
id: 18,
startDate: '2020-10-14T10:00:00',
endDate: '2020-10-14T18:00:00',
name: 'Excursion',
resourceId: '1'
},
{
id: 19,
startDate: '2020-10-14T18:00:00',
endDate: '2020-10-14T22:00:00',
name: 'Team Building',
resourceId: '1',
eventColor: 'green'
},
{
id: 20,
startDate: '2020-10-15T09:00:00',
endDate: '2020-10-15T10:00:00',
name: 'Breakfast',
resourceId: 'hotel'
},
{
id: 21,
startDate: '2020-10-15T14:00:00',
endDate: '2020-10-15T15:00:00',
name: 'Lunch',
resourceId: 'hotel'
},
{
id: 22,
startDate: '2020-10-15T19:00:00',
endDate: '2020-10-15T20:00:00',
name: 'Dinner',
resourceId: 'hotel'
},
{
id: 23,
startDate: '2020-10-15T00:00:00',
endDate: '2020-10-16T00:00:00',
name: 'Gantt review + development',
allDay: true,
resourceId: 'bryntum'
},
{
id: 24,
startDate: '2020-10-16T09:00:00',
endDate: '2020-10-16T10:00:00',
name: 'Breakfast',
resourceId: 'hotel'
},
{
id: 25,
startDate: '2020-10-16T14:00:00',
endDate: '2020-10-16T15:00:00',
name: 'Lunch',
resourceId: 'hotel'
},
{
id: 26,
startDate: '2020-10-16T18:00:00',
endDate: '2020-10-16T21:00:00',
name: 'Split.JS conference: Monitoring and Reproducing Errors in Web Applications + Late Dinner or AfterParty',
resourceId: 'michael'
},
{
id: 27,
startDate: '2020-10-16T00:00:00',
endDate: '2020-10-17T00:00:00',
name: 'Root Cause ticket bash',
allDay: true,
resourceId: 'bryntum'
},
{
id: 28,
startDate: '2020-10-17T09:00:00',
endDate: '2020-10-17T10:00:00',
name: 'Breakfast',
resourceId: 'hotel'
},
{
id: 29,
startDate: '2020-10-17T14:00:00',
endDate: '2020-10-17T15:00:00',
name: 'Lunch',
resourceId: 'hotel'
},
{
id: 30,
startDate: '2020-10-17T19:00:00',
endDate: '2020-10-17T20:00:00',
name: 'Dinner',
resourceId: 'hotel'
},
{
id: 31,
startDate: '2020-10-17T00:00:00',
endDate: '2020-10-18T00:00:00',
name: 'Pair programming sessions',
allDay: true,
resourceId: 'bryntum'
},
{
id: 32,
startDate: '2020-10-18T09:00:00',
endDate: '2020-10-18T10:00:00',
name: 'Breakfast',
resourceId: 'hotel'
},
{
id: 33,
startDate: '2020-10-18T10:00:00',
endDate: '2020-10-18T12:00:00',
name: 'Check-Out & Fly home',
resourceId: 'michael'
}
];
tbarConfig = {
items : [
{
type : 'button',
text : 'My button'
}
]
}
taskBoardConfig: any;
ngOnInit(): void {
this.config();
}
// @ViewChild(BryntumCalendarComponent) calendarComponent: BryntumCalendarComponent;
// // private calendar1: WeekGrid;
// private calendar: Calendar;
// private eventStore: EventStore;
@ViewChild(BryntumTaskBoardComponent, { static : false }) taskboardComponent: BryntumTaskBoardComponent;
//@ViewChild(BryntumTaskBoardComponent) taskboardComponent: BryntumTaskBoardComponent;
taskboard = new TaskBoard({
// Supply it to the project
project : {
tasksData : [
{ id : 1, name : 'Double click me', status : 'doing', description : 'Lorum ipsum bacon', tags : 'bug,reproduced' }
],
resourcesData : [
{ id : 1, name : 'Angelo', image : 'angelo.jpg' },
{ id : 2, name : 'Celia', image : 'celia.jpg' },
{ id : 3, name : 'Dave', image : 'dave.jpg' }
],
assignmentsData : [
{ id : 1, event : 1, resource : 1 }
]
}
});
private eventStore: EventStore;
filterTriggers = {
filter: {
align: 'start',
cls: 'b-fa b-fa-filter'
}
};
highlightTriggers = {
filter: {
align: 'start',
cls: 'b-fa b-fa-highlighter'
}
};
config() {
this.taskBoardConfig = {
useDomTransition : true,
features : {
columnToolbars : true,
columnHeaderMenu : true,
taskEdit : {
items : {
category : {
type : 'combo',
items : [ 'Administrative', 'DevOps', 'Devs' ],
name : 'category',
label : 'Category',
weight : 150
}
}
}
},
headerItems : {
resourceAvatars : { type : 'resourceAvatars' }
},
tbar : [
{
type : 'label',
text : 'Theme'
},
{
type : 'buttonGroup',
items : ['Stockholm', 'Material', 'Classic-Light', 'Classic', 'Classic-Dark'].map(name => {
})
}
],
footerItems : {
resourceAvatars : null
},
columns : [
'todo',
'doing',
'done'
],
// Field used to pair a task to a column
columnField : 'status',
bodyItems : {
tags : { type : 'tags' }
},
// Project using inline data
project : {
tasksData : [
{ id : 1, name : 'Double click me', status : 'doing', description : 'Lorum ipsum bacon', tags : 'bug,reproduced' }
],
resourcesData : [
{ id : 1, name : 'Angelo', image : 'angelo.jpg' },
{ id : 2, name : 'Celia', image : 'celia.jpg' },
{ id : 3, name : 'Dave', image : 'dave.jpg' }
],
assignmentsData : [
{ id : 1, event : 1, resource : 1 }
]
},
listeners : {
cellClick(e) {
alert('cellClick');
console.log('cellClick', e);
}
},
eventTooltip: {
showOn: 'hover',
tools: {
left: {
cls: 'b-fa b-fa-copy',
weight: 20,
tooltip: 'copy task'
},
},
renderer: (data: any) => {
},
}
}
}
/**
* Find by name text field change handler
*/
onFindChange({ value }: any): void {
// We filter using a RegExp, so quote significant characters
const val = value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
// A filter with an id replaces any previous filter with that id.
// Leave any other filters which may be in use in place.
// this.calendar.eventStore.filter({
// id: 'eventNameFilter',
// filterBy: (event: EventModel) => event.name.match(new RegExp(val, 'i'))
// });
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
doRequestTextareaValueChange(ev) {
try {
if (this.taskDescription == "") {
$('#requestContent').addClass('form-control is-invalid');
$("#btnSave").attr('disabled', 'disabled');
$('#taskDescription').focus();
}
else {
$('#taskDescription').addClass('form-control').removeClass("is-invalid");
$("#btnSave").removeAttr('disabled');
}
} catch (e) {
console.info('could not set textarea-value');
}
}
openDialog(content, size: string = "") {
this.fileUploadList = [];
this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title', size: size, windowClass: 'custom-class' }).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
SaveData(modal) {
var task = new TaskUpload;
task.name = this.taskName;
task.description = this.taskDescription;
task.dueDate = this.endDate;
task.files = this.fileUploadList;
task.issue = this.issue;
task.project = this.project;
task.addtoList = this.addToDoList;
task.priority = this.priority;
//task.owner = User.name;
this.taskService.addTask(task).subscribe(item => {
var date = this.newStartDate;
this.editingRecord.meta.isCreating = false;
this.editingRecord.set({
name: this.taskName,
date
});
this.changeDetectorRef.detectChanges();
this.notificationsService.notify("Tạo task thành công");
modal.dismiss();
});
}
beforeEventEdit({ editor, eventRecord }): boolean {
var newDate = eventRecord.data.endDate;
this.taskName = eventRecord.data.name;
this.editingRecord = eventRecord;
this.editingRecord.meta.isCreating = true;
this.newEndDate = eventRecord.data.endDate;
this.newStartDate = eventRecord.data.startDate;//DateHelper.format(event.eventRecord.data.startDate, 'YYYY-MM-DD');//event.eventRecord.data.startDate;
var img = '<img draggable="false" class="b-resource-avatar b-resource-image" ontouchstart="return false" src="assets/users/arcady.jpg">';
// eventRecord.set({
// name: (eventRecord.data.id.indexOf('_generated') == -1 ? '' : eventRecord.data.name),
// startDate: newDate
// });
this.listUser = [];
this.openDialog(this.contentPopup);
return false;
}
// /**
// * Highlight text field change handler
// */
// onHighlightChange({ value }: any): void {
// const
// val = value.toLowerCase(),
// { eventStore, calendar } = this;
// // Calendars refresh on any data change so suspend that.
// // We will trigger the store's change event when we're done.
// eventStore.suspendEvents();
// // Loop through all events in the store
// eventStore.forEach((task) => {
// // The cls field is a DomClassList with add and remove methods
// if (val !== '' && task.name.toLowerCase().includes(val)) {
// task.cls.add('b-match');
// }
// else {
// task.cls.remove('b-match');
// }
// });
// eventStore.resumeEvents();
// // Announce that data has changed which will refresh UIs.
// eventStore.trigger('change');
// calendar.element.classList[value.length > 0 ? 'add' : 'remove']('b-highlighting');
// }
/**
* Called after View is initialized
*/
ngAfterViewInit(): void {
// var taskBoard1 = new TaskBoard({
// // Supply it to the project
// project : {
// }
// });
// Calendar.Modes.register('weekgrid', WeekGrid);
// Calendar.Modes.register('mynewtype', MyClassName);
// this.calendar = this.calendarComponent.instance;
// this.calendar.resources = this.resources;
// this.calendar.events = this.events;
// this.eventStore = this.calendar.eventStore;
//this.calendar.addListener('cellOverflowClick', this.onMonthMoreCellClick);
//Calendar.Modes.register('weekgrid', WeekGrid);
//this.calendar.on('beforeEventEdit', this.beforeEventEdit.bind(this));
//this.calendar.onCellOverflowClick.
// this.calendar.onCellOverflowClick.bind(this.onMonthMoreCellClick);
// this.calendarConfig.modes.month.overflowPopup.listeners.beforeShow()
//this.calendar = this.calendarComponent.instance;
//this.taskboard.re = this.resources;
// this.taskboardComponent.project = {
// tasksData : this.taskBoardConfig.project.tasksData,
// resourcesData : this.taskBoardConfig.project.resourcesData,
// assignmentsData : this.taskBoardConfig.project.assignmentsData
// };
//this.taskboardComponent.project.taskStore.data = this.taskBoardConfig.project.tasksData;
this.taskboard = this.taskboardComponent.instance;
// this.taskboard.
// this.taskboard = new TaskBoard({
// features : {
// taskEdit : {
// items : {
// category : {
// type : 'combo',
// items : [ 'Administrative', 'DevOps', 'Devs' ],
// name : 'category',
// label : 'Category',
// weight : 150
// }
// }
// }
// }
//});
//this.taskboard. = this.taskBoardConfig;
// this.taskboard.project.inlineData = {
// tasksData : tasksOnClient,
// resourcesData : resourcesOnClient,
// assignmentsData : assignmentsOnClient
// };
// this.task
//this.taskboard.project.
//this.taskboard.on('beforeEventEdit', this.beforeEventEdit.bind(this));
}
onTaskBoardCellClick(e) : void {
console.log('onCellClick', e);
}
onTaskBoardEvents(event: Record<string, any>): void {
// Uncomment the code in this method to start "logging" events
switch (event.type) {
case 'beforeEventEdit':
// alert(9);
break;
case 'daterangechange':
break;
case 'aftereventsave':
// alert('save');
// console.log(`New event saved: ${event.eventRecord.name}`);
break;
case 'beforeeventdelete':
// alert('delete');
console.log(event.eventRecords);
console.log(`Events removed: ${event.eventRecords.map(eventRecord => eventRecord.name).join(',')}`);
this.taskService.deleteTask(event.eventRecords.id).subscribe(item => {
});
break;
default:
// console.log(event.type);
break;
}
}
onUpdateTags() {
if (this.tags != null) {
this.listTag = this.tags.split(" ").filter(i => i);
this.changeDetectorRef.detectChanges();
}
}
// syncData({ store, action, records } : { store : Store; action : String; records : Model[]}) : void {
// console.log(`${store.id} changed. The action was: ${action}. Changed records: `, records);
// // Your sync data logic comes here
// }
getAvatar(filename: string) {
if (filename == "" || filename == null)
return "";
var ext = filename.substring(filename.lastIndexOf('.'), filename.length) || filename;
if (ext == null) {
// alert(1);
return "file.svg";
}
else {
switch (ext) {
case ".txt":
return "txt.svg";
case ".doc":
case ".docx":
return "doc.svg";
case ".7z":
case ".rar":
case ".zip":
return "zip.svg";
case ".jpg":
return "jpg.svg";
case ".mp4":
return "mp4.svg";
case ".xls":
case ".xlsx":
return "xls.svg";
case ".pdf":
return "pdf.svg";
case ".png":
return "png.svg";
case ".js":
return "javascript.svg";
default:
return "file.svg";
}
}
}
getNow() {
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
var ret = dd + '/' + mm + '/' + yyyy;
return ret;
}
onDeleteUploaded(file: string) {
let index = this.fileUploadList.findIndex(d => d.fileName.toString() === file.toString()); //find index in your array
if (index > -1) {
this.fileUploadList.splice(index, 1);//remove element from array
this.changeDetectorRef.detectChanges();
}
}
openDialogFolder(content, size: string = "") {
this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title', size: size, windowClass: 'custom-class' }).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
validate(item) {
// fileName
//this.errorshow = false;
switch (item) {
case "taskName":
if (this.taskName === "") {
$('#taskName').addClass('form-control is-invalid');
$("#btnSave").attr('disabled', 'disabled');
}
else {
$('#taskName').addClass('form-control').removeClass("is-invalid");
$("#taskName").removeAttr('disabled');
}
$('#taskName').focus();
break;
}
this.changeDetectorRef.detectChanges();
}
onSaveAddUser(event) {
var modal = event.modal;
this.listUser = this.cbxsv.dataSelcected;
console.log(this.listUser);
this.changeDetectorRef.detectChanges();
modal.dismiss();
}
loadRole() {
this.cbxsv.dataSelcected = [];
this.cbxsv.objectName = "users";
this.cbxsv.objectType = "U";
this.comboboxName = "Users";
this.api.call("ERM.Business.SYS", "ValueListBusiness", "GetJsonAsync", ["L1901"]).subscribe(res => {
if (res && res.msgBodyData != null && res.msgBodyData.length > 0) {
var data = res.msgBodyData[0];
if (data) {
this.dataVll = data;
// console.log(this.dataVll);
this.changeDetectorRef.detectChanges();
}
}
})
}
onAddUser(event) {
this.loadRole();
this.changeDetectorRef.detectChanges();
this.openDialogFolder(this.contentAddUser, "");
}
async handleFileInput(files: FileList) {
if (this.fileUploadList == null)
this.fileUploadList = [];
var count = this.fileUploadList.length;
//console.log(files);
for (var i = 0; i < files.length; i++) {
let index = this.fileUploadList.findIndex(d => d.fileName.toString() === files[i].name.toString()); //find index in your array
if (index == -1) {
let no = count + i;
let data: ArrayBuffer;
data = await files[i].arrayBuffer();
var fileUpload = new FileUpload();
// var bytes = new Int8Array(this.datafile[no] as ArrayBuffer);
var item = this.arrayBufferToBase64(data);
fileUpload.fileName = files[i].name;
fileUpload.avatar = this.getAvatar(fileUpload.fileName);
fileUpload.extension = files[i].name.substring(files[i].name.lastIndexOf('.'), files[i].name.length) || files[i].name;
fileUpload.createdBy = this.user.userName;
fileUpload.createdOn = this.getNow();
fileUpload.type = files[i].type;
fileUpload.fileSize = files[i].size;
fileUpload.fileName = files[i].name;
fileUpload.data = item;
fileUpload.funcId = 'TM001';
fileUpload.objectType = 'AD_Users';
fileUpload.objectID = this.user.userID;
this.fileUploadList.push(Object.assign({}, fileUpload));
}
}
// files = null;
$('#file').val('');
this.changeDetectorRef.detectChanges();
return false;
}
arrayBufferToBase64(buffer) {
var binary = '';
var bytes = new Uint8Array(buffer);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
}