<link href="scripts/css/select/select2.min.css" rel="stylesheet" />
<script src="scripts/javascript/select/select2.full.min.js"></script>
<script type="text/javascript" src="/scripts/javascript/mentions/jquery.events.input.js"></script>
<script type="text/javascript" src="/scripts/javascript/mentions/jquery.elastic.js"></script>
<script type="text/javascript" src="/scripts/javascript/mentions/jquery.mentionsInput.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxcore.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxdropdownbutton.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxcolorpicker.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxwindow.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxeditor.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxtooltip.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxcore.js"></script>
<script type="text/javascript" src="/scripts/javascript/jqWidgets/jqxdata.js"></script>
<link rel="stylesheet" href="/scripts/css/jqWidgets/jqx.base.css" type="text/css" />
<script type="text/javascript" src="/common/javascript/bryntum/taskboard/taskboard.module.js"></script>
<link rel="stylesheet" href="/scripts/css/bryntum/taskboard/taskboard.stockholm.css" type="text/css" media="all" />
<script type="text/javascript" src="/scripts/kanban/kanban_omg.js"></script>
<link rel="stylesheet" href="/css/bryntumKanban/kanban_omg.css" type="text/css" />
<div id="kanban"></div>
<div id="right_content_nav" class="right_content_hide" style="padding-left:10px;"></div>
<% INCLUDE "include/upload_hidden_inputs.tt" %>
<div>
<input type="hidden" id="customer_id" name="customer_id" value="<% planning.customer_id %>">
<input type="hidden" id="category_id" name="category_id" value="<% planning.owner_org_id %>">
<input type="hidden" id="category_name" name="category_name" value="<% planning.owner_org_name %>">
<input type="hidden" id="id" name="id" value="<% planning.id %>">
<input type="hidden" id="parent_plan_security_level" name="parent_plan_security_level" value="<% planning.security_level.join(',') %>">
</div>
<script type="module">
import { TaskBoard, Widget, TaskBoardLinked, Field, DomHelper, StringHelper, ProjectModel, TaskModel, DependencyModel, ResourceModel, DateHelper, LocaleManager, TaskTooltip, WidgetHelper, Toast } from '/common/javascript/bryntum/taskboard/taskboard.module.js';
// A custom widget showing all team members
class TeamMembers extends Widget.mixin(TaskBoardLinked) {
static $name = 'TeamMembers';
static type = 'teammembers';
// Hook in after the widget is configured
afterConfigure() {
super.afterConfigure();
// TaskBoard is created after us, bind to it later
this.setTimeout('lateInit', 0);
}
// Called a while after construction, to attach to TaskBoard
lateInit() {
// Redraw on any resource store change
this.taskBoard.project.resourceStore.on({
change : 'recompose',
thisObj : this
});
this.recompose();
}
// Function that populates the widget with contents, returns a DomConfig which in the end will be applied as HTML
compose() {
const { taskBoard } = this;
if (taskBoard) {
return {
// Create one image per resource
children: taskBoard.project.resourceStore.map(resource => ({
tag: 'img',
src: taskBoard.resourceImagePath + (resource.image ? resource.image : 'none.png'),
dataset: {
// Localized tooltip
btip : StringHelper.xss`${this.L(`${resource.name}`)}`
},
elementData : {
// Tag along the resource, to simplify our click handler below
resource
}
})),
listeners : {
// Only care about events originating from the resource images
delegate : 'img',
click(event) {
// Extract the resource we tagged along above
const { resource } = event.target.elementData;
// Select all assigned tasks (data layer is shared with Scheduler, which uses the term "event")
this.taskBoard.selectedTasks = resource.events;
}
}
};
}
}
updateLocalization() {
this.recompose();
}
} // end class
TeamMembers.initClass(); // Importing custom locales
var kanban = <% kanban %>,
kanbanResources = <% kanban_resources %>,
kanbanResourceAssignment = <% kanban_resource_assignment %>;
const taskBoard = new TaskBoard({
appendTo: "kanban",
resourceImagePath : window.location.origin,
features: {
taskDrag: true,
taskEdit: {
editorConfig: {
modal: false
}
},
taskMenu: false,
columnHeaderMenu: false
},
//Using taskboard's taskRenderer method to set status and status_color attributes in task header
taskRenderer({ cardConfig, taskRecord }) {
cardConfig.children.header.status = taskRecord.status;
cardConfig.children.header.status_color = taskRecord._status_colour;
},
footerItems: {
_required_by_date: { type: 'text', format: "dd mmm yyyy"}
},
responsive: {
medium: {
when: 600, // when width <= 600, Configs applied for this state
footerItems: {
'_required_by_date > resourceAvatars' : { hidden : true } //_required_by_date from cards
},
cardSizes: [
{ name : 'medium' }
],
headerItems : {
_workflow_status_name: { hidden: true } // hide _worlk_flow_status_name from cards
}
}
},
columnField: 'status',
columns: [
'To do',
'In progress',
'In approval',
'Approved',
'Complete'
],
project: {
tasks: kanban,
resources: kanbanResources,
assignments: kanbanResourceAssignment
},
tbar: [{
type : 'teammembers'
}
]
});
</script>