@seniorsistemas/angular-components 16.13.1 → 17.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/seniorsistemas-angular-components.umd.js +1733 -26
- package/bundles/seniorsistemas-angular-components.umd.js.map +1 -1
- package/bundles/seniorsistemas-angular-components.umd.min.js +2 -2
- package/bundles/seniorsistemas-angular-components.umd.min.js.map +1 -1
- package/components/gantt/components/gantt/arrow.d.ts +16 -0
- package/components/gantt/components/gantt/bar.d.ts +43 -0
- package/components/gantt/components/gantt/gantt-options.d.ts +2 -0
- package/components/gantt/components/gantt/gantt.d.ts +66 -0
- package/components/gantt/components/gantt/popup.d.ts +11 -0
- package/components/gantt/components/gantt/utils/date-utils.d.ts +13 -0
- package/components/gantt/components/gantt/utils/svg-utils.d.ts +11 -0
- package/components/gantt/components/side-table/side-table.component.d.ts +7 -0
- package/components/gantt/gantt.component.d.ts +21 -0
- package/components/gantt/gantt.module.d.ts +2 -0
- package/components/gantt/index.d.ts +3 -0
- package/components/gantt/models/index.d.ts +3 -0
- package/components/gantt/models/options.d.ts +21 -0
- package/components/gantt/models/task.d.ts +21 -0
- package/components/gantt/models/view-mode.d.ts +9 -0
- package/esm2015/components/gantt/components/gantt/arrow.js +82 -0
- package/esm2015/components/gantt/components/gantt/bar.js +236 -0
- package/esm2015/components/gantt/components/gantt/gantt-options.js +16 -0
- package/esm2015/components/gantt/components/gantt/gantt.js +767 -0
- package/esm2015/components/gantt/components/gantt/popup.js +68 -0
- package/esm2015/components/gantt/components/gantt/utils/date-utils.js +126 -0
- package/esm2015/components/gantt/components/gantt/utils/svg-utils.js +119 -0
- package/esm2015/components/gantt/components/side-table/side-table.component.js +26 -0
- package/esm2015/components/gantt/gantt.component.js +112 -0
- package/esm2015/components/gantt/gantt.module.js +19 -0
- package/esm2015/components/gantt/index.js +4 -0
- package/esm2015/components/gantt/models/index.js +2 -0
- package/esm2015/components/gantt/models/options.js +1 -0
- package/esm2015/components/gantt/models/task.js +1 -0
- package/esm2015/components/gantt/models/view-mode.js +11 -0
- package/esm2015/components/sidebar/sidebar.component.js +3 -3
- package/esm2015/public-api.js +2 -1
- package/esm2015/seniorsistemas-angular-components.js +25 -24
- package/esm5/components/gantt/components/gantt/arrow.js +81 -0
- package/esm5/components/gantt/components/gantt/bar.js +271 -0
- package/esm5/components/gantt/components/gantt/gantt-options.js +16 -0
- package/esm5/components/gantt/components/gantt/gantt.js +883 -0
- package/esm5/components/gantt/components/gantt/popup.js +59 -0
- package/esm5/components/gantt/components/gantt/utils/date-utils.js +134 -0
- package/esm5/components/gantt/components/gantt/utils/svg-utils.js +121 -0
- package/esm5/components/gantt/components/side-table/side-table.component.js +27 -0
- package/esm5/components/gantt/gantt.component.js +114 -0
- package/esm5/components/gantt/gantt.module.js +22 -0
- package/esm5/components/gantt/index.js +4 -0
- package/esm5/components/gantt/models/index.js +2 -0
- package/esm5/components/gantt/models/options.js +1 -0
- package/esm5/components/gantt/models/task.js +1 -0
- package/esm5/components/gantt/models/view-mode.js +11 -0
- package/esm5/components/sidebar/sidebar.component.js +3 -3
- package/esm5/public-api.js +2 -1
- package/esm5/seniorsistemas-angular-components.js +25 -24
- package/fesm2015/seniorsistemas-angular-components.js +1558 -4
- package/fesm2015/seniorsistemas-angular-components.js.map +1 -1
- package/fesm5/seniorsistemas-angular-components.js +1708 -4
- package/fesm5/seniorsistemas-angular-components.js.map +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
- package/seniorsistemas-angular-components.d.ts +24 -23
- package/seniorsistemas-angular-components.metadata.json +1 -1
|
@@ -7975,6 +7975,1560 @@ EditableOverlayModule = __decorate([
|
|
|
7975
7975
|
})
|
|
7976
7976
|
], EditableOverlayModule);
|
|
7977
7977
|
|
|
7978
|
+
const moment$7 = moment_;
|
|
7979
|
+
const YEAR = "year";
|
|
7980
|
+
const MONTH = "month";
|
|
7981
|
+
const DAY = "day";
|
|
7982
|
+
const HOUR = "hour";
|
|
7983
|
+
const MINUTE = "minute";
|
|
7984
|
+
const SECOND = "second";
|
|
7985
|
+
const MILLISECOND = "millisecond";
|
|
7986
|
+
class DateUtils {
|
|
7987
|
+
static parse(date) {
|
|
7988
|
+
return moment$7(date).toDate();
|
|
7989
|
+
}
|
|
7990
|
+
static toString(date, with_time = false) {
|
|
7991
|
+
let result = with_time ? moment$7(date, "YYYY-MM-DD hh:mm:ss.SSS") : moment$7(date, "YYYY-MM-DD");
|
|
7992
|
+
return result.toString();
|
|
7993
|
+
}
|
|
7994
|
+
static format(date, formatString = "YYYY-MM-DD HH:mm:ss.SSS", lang = "en") {
|
|
7995
|
+
const monthName = moment$7(date)
|
|
7996
|
+
.locale(lang)
|
|
7997
|
+
.startOf("month")
|
|
7998
|
+
.format("MMMM");
|
|
7999
|
+
const monthNameCapitalized = monthName.charAt(0).toUpperCase() + monthName.slice(1);
|
|
8000
|
+
const dateToFormat = moment$7(date);
|
|
8001
|
+
const format_map = {
|
|
8002
|
+
YYYY: dateToFormat.format("YYYY"),
|
|
8003
|
+
MM: dateToFormat.format("MM"),
|
|
8004
|
+
DD: dateToFormat.format("DD"),
|
|
8005
|
+
HH: dateToFormat.format("HH"),
|
|
8006
|
+
mm: dateToFormat.format("mm"),
|
|
8007
|
+
ss: dateToFormat.format("ss"),
|
|
8008
|
+
SSS: dateToFormat.format("SSS"),
|
|
8009
|
+
D: dateToFormat.format("D"),
|
|
8010
|
+
MMMM: monthNameCapitalized,
|
|
8011
|
+
MMM: monthNameCapitalized,
|
|
8012
|
+
};
|
|
8013
|
+
let str = formatString;
|
|
8014
|
+
const formattedValues = [];
|
|
8015
|
+
Object.keys(format_map)
|
|
8016
|
+
.sort((a, b) => b.length - a.length)
|
|
8017
|
+
.forEach(key => {
|
|
8018
|
+
if (str.includes(key)) {
|
|
8019
|
+
str = str.replace(key, `$${formattedValues.length}`);
|
|
8020
|
+
formattedValues.push(format_map[key]);
|
|
8021
|
+
}
|
|
8022
|
+
});
|
|
8023
|
+
formattedValues.forEach((value, i) => {
|
|
8024
|
+
str = str.replace(`$${i}`, value);
|
|
8025
|
+
});
|
|
8026
|
+
return str;
|
|
8027
|
+
}
|
|
8028
|
+
static diff(fistDate, secondDate, scale) {
|
|
8029
|
+
const milliseconds = moment$7(fistDate).diff(secondDate, MILLISECOND);
|
|
8030
|
+
const seconds = moment$7(fistDate).diff(secondDate, SECOND);
|
|
8031
|
+
const minutes = moment$7(fistDate).diff(secondDate, MINUTE);
|
|
8032
|
+
const hours = moment$7(fistDate).diff(secondDate, HOUR);
|
|
8033
|
+
const days = moment$7(fistDate).diff(secondDate, DAY);
|
|
8034
|
+
const months = moment$7(fistDate).diff(secondDate, MONTH);
|
|
8035
|
+
const years = moment$7(fistDate).diff(secondDate, YEAR);
|
|
8036
|
+
if (!scale.endsWith("s")) {
|
|
8037
|
+
scale += "s";
|
|
8038
|
+
}
|
|
8039
|
+
return Math.floor({
|
|
8040
|
+
milliseconds,
|
|
8041
|
+
seconds,
|
|
8042
|
+
minutes,
|
|
8043
|
+
hours,
|
|
8044
|
+
days,
|
|
8045
|
+
months,
|
|
8046
|
+
years,
|
|
8047
|
+
}[scale]);
|
|
8048
|
+
}
|
|
8049
|
+
static today() {
|
|
8050
|
+
const dateStr = moment$7().format("YYY-MM-DD");
|
|
8051
|
+
return new Date(dateStr);
|
|
8052
|
+
}
|
|
8053
|
+
static now() {
|
|
8054
|
+
return moment$7().toDate();
|
|
8055
|
+
}
|
|
8056
|
+
static add(date, quantity, scale) {
|
|
8057
|
+
return moment$7(date).add(quantity, scale).toDate();
|
|
8058
|
+
}
|
|
8059
|
+
static startOf(date, scale) {
|
|
8060
|
+
const scores = {
|
|
8061
|
+
[YEAR]: 6,
|
|
8062
|
+
[MONTH]: 5,
|
|
8063
|
+
[DAY]: 4,
|
|
8064
|
+
[HOUR]: 3,
|
|
8065
|
+
[MINUTE]: 2,
|
|
8066
|
+
[SECOND]: 1,
|
|
8067
|
+
[MILLISECOND]: 0,
|
|
8068
|
+
};
|
|
8069
|
+
function shouldReset(_scale) {
|
|
8070
|
+
const max_score = scores[scale];
|
|
8071
|
+
return scores[_scale] <= max_score;
|
|
8072
|
+
}
|
|
8073
|
+
const vals = [
|
|
8074
|
+
date.getFullYear(),
|
|
8075
|
+
shouldReset(YEAR) ? 0 : date.getMonth(),
|
|
8076
|
+
shouldReset(MONTH) ? 1 : date.getDate(),
|
|
8077
|
+
shouldReset(DAY) ? 0 : date.getHours(),
|
|
8078
|
+
shouldReset(HOUR) ? 0 : date.getMinutes(),
|
|
8079
|
+
shouldReset(MINUTE) ? 0 : date.getSeconds(),
|
|
8080
|
+
shouldReset(SECOND) ? 0 : date.getMilliseconds(),
|
|
8081
|
+
];
|
|
8082
|
+
return new Date(vals[0], vals[1], vals[2], vals[3], vals[4], vals[5], vals[6]);
|
|
8083
|
+
}
|
|
8084
|
+
static clone(date) {
|
|
8085
|
+
return moment$7(date).toDate();
|
|
8086
|
+
}
|
|
8087
|
+
static getDateValues(date) {
|
|
8088
|
+
return [
|
|
8089
|
+
date.getFullYear(),
|
|
8090
|
+
date.getMonth(),
|
|
8091
|
+
date.getDate(),
|
|
8092
|
+
date.getHours(),
|
|
8093
|
+
date.getMinutes(),
|
|
8094
|
+
date.getSeconds(),
|
|
8095
|
+
date.getMilliseconds(),
|
|
8096
|
+
];
|
|
8097
|
+
}
|
|
8098
|
+
static getDaysInMonth(date) {
|
|
8099
|
+
return moment$7(date, "YYYY-MM").daysInMonth();
|
|
8100
|
+
}
|
|
8101
|
+
}
|
|
8102
|
+
|
|
8103
|
+
const $ = (expr, con) => {
|
|
8104
|
+
return typeof expr === 'string'
|
|
8105
|
+
? (con || document).querySelector(expr)
|
|
8106
|
+
: expr || null;
|
|
8107
|
+
};
|
|
8108
|
+
const createSVG = (tag, attrs) => {
|
|
8109
|
+
const elem = document.createElementNS("http://www.w3.org/2000/svg", tag);
|
|
8110
|
+
for (let attr in attrs) {
|
|
8111
|
+
if (attr === "append_to") {
|
|
8112
|
+
const parent = attrs.append_to;
|
|
8113
|
+
parent.appendChild(elem);
|
|
8114
|
+
}
|
|
8115
|
+
else if (attr === "innerHTML") {
|
|
8116
|
+
elem.innerHTML = attrs.innerHTML;
|
|
8117
|
+
}
|
|
8118
|
+
else {
|
|
8119
|
+
elem.setAttribute(attr, attrs[attr]);
|
|
8120
|
+
}
|
|
8121
|
+
}
|
|
8122
|
+
return elem;
|
|
8123
|
+
};
|
|
8124
|
+
const animateSVG = (svgElement, attr, from, to) => {
|
|
8125
|
+
const animatedSvgElement = getAnimationElement(svgElement, attr, from, to);
|
|
8126
|
+
if (animatedSvgElement === svgElement) {
|
|
8127
|
+
// triggered 2nd time programmatically
|
|
8128
|
+
// trigger artificial click event
|
|
8129
|
+
const event = document.createEvent("HTMLEvents");
|
|
8130
|
+
event.initEvent("click", true, true);
|
|
8131
|
+
// event.eventName = 'click'; TODO: Ver porque esta propriedade não existe
|
|
8132
|
+
animatedSvgElement.dispatchEvent(event);
|
|
8133
|
+
}
|
|
8134
|
+
};
|
|
8135
|
+
const getAnimationElement = (svgElement, attr, from, to, dur = "0.4s", begin = "0.1s") => {
|
|
8136
|
+
const animEl = svgElement.querySelector("animate");
|
|
8137
|
+
if (animEl) {
|
|
8138
|
+
$.attr(animEl, {
|
|
8139
|
+
attributeName: attr,
|
|
8140
|
+
from,
|
|
8141
|
+
to,
|
|
8142
|
+
dur,
|
|
8143
|
+
begin: "click + " + begin,
|
|
8144
|
+
}, null);
|
|
8145
|
+
return svgElement;
|
|
8146
|
+
}
|
|
8147
|
+
const animateElement = createSVG("animate", {
|
|
8148
|
+
attributeName: attr,
|
|
8149
|
+
from,
|
|
8150
|
+
to,
|
|
8151
|
+
dur,
|
|
8152
|
+
begin,
|
|
8153
|
+
calcMode: "spline",
|
|
8154
|
+
values: from + ";" + to,
|
|
8155
|
+
keyTimes: "0; 1",
|
|
8156
|
+
keySplines: cubic_bezier("ease-out"),
|
|
8157
|
+
});
|
|
8158
|
+
svgElement.appendChild(animateElement);
|
|
8159
|
+
return svgElement;
|
|
8160
|
+
};
|
|
8161
|
+
const ɵ0 = getAnimationElement;
|
|
8162
|
+
const cubic_bezier = (name) => {
|
|
8163
|
+
return {
|
|
8164
|
+
ease: ".25 .1 .25 1",
|
|
8165
|
+
linear: "0 0 1 1",
|
|
8166
|
+
"ease-in": ".42 0 1 1",
|
|
8167
|
+
"ease-out": "0 0 .58 1",
|
|
8168
|
+
"ease-in-out": ".42 0 .58 1",
|
|
8169
|
+
}[name];
|
|
8170
|
+
};
|
|
8171
|
+
const ɵ1 = cubic_bezier;
|
|
8172
|
+
$.on = (element, event, selector, callback) => {
|
|
8173
|
+
if (!callback) {
|
|
8174
|
+
callback = selector;
|
|
8175
|
+
$.bind(element, event, callback);
|
|
8176
|
+
}
|
|
8177
|
+
else {
|
|
8178
|
+
$.delegate(element, event, selector, callback);
|
|
8179
|
+
}
|
|
8180
|
+
};
|
|
8181
|
+
$.off = (element, event, handler) => {
|
|
8182
|
+
element.removeEventListener(event, handler);
|
|
8183
|
+
};
|
|
8184
|
+
$.bind = (element, event, callback) => {
|
|
8185
|
+
event.split(/\s+/).forEach(function (event) {
|
|
8186
|
+
element.addEventListener(event, callback);
|
|
8187
|
+
});
|
|
8188
|
+
};
|
|
8189
|
+
$.delegate = (element, event, selector, callback) => {
|
|
8190
|
+
element.addEventListener(event, function (e) {
|
|
8191
|
+
const delegatedTarget = e.target.closest(selector);
|
|
8192
|
+
if (delegatedTarget) {
|
|
8193
|
+
e.delegatedTarget = delegatedTarget;
|
|
8194
|
+
callback.call(this, e, delegatedTarget);
|
|
8195
|
+
}
|
|
8196
|
+
});
|
|
8197
|
+
};
|
|
8198
|
+
$.closest = (selector, element) => {
|
|
8199
|
+
if (!element) {
|
|
8200
|
+
return null;
|
|
8201
|
+
}
|
|
8202
|
+
if (element.matches(selector)) {
|
|
8203
|
+
return element;
|
|
8204
|
+
}
|
|
8205
|
+
// TODO: Corrigir este problema
|
|
8206
|
+
// return $.closest(selector, element.parentNode);
|
|
8207
|
+
};
|
|
8208
|
+
$.attr = (element, attr, value) => {
|
|
8209
|
+
if (!value && typeof attr === "string") {
|
|
8210
|
+
return element.getAttribute(attr);
|
|
8211
|
+
}
|
|
8212
|
+
if (typeof attr === "object") {
|
|
8213
|
+
for (let key in attr) {
|
|
8214
|
+
$.attr(element, key, attr[key]);
|
|
8215
|
+
}
|
|
8216
|
+
return;
|
|
8217
|
+
}
|
|
8218
|
+
element.setAttribute(attr, value);
|
|
8219
|
+
};
|
|
8220
|
+
|
|
8221
|
+
var ViewMode;
|
|
8222
|
+
(function (ViewMode) {
|
|
8223
|
+
ViewMode["QuarterDay"] = "quarterDay";
|
|
8224
|
+
ViewMode["HalfDay"] = "halfDay";
|
|
8225
|
+
ViewMode["Day"] = "day";
|
|
8226
|
+
ViewMode["Week"] = "week";
|
|
8227
|
+
ViewMode["Month"] = "month";
|
|
8228
|
+
ViewMode["Year"] = "year";
|
|
8229
|
+
ViewMode["Hour"] = "hour";
|
|
8230
|
+
})(ViewMode || (ViewMode = {}));
|
|
8231
|
+
|
|
8232
|
+
class Bar {
|
|
8233
|
+
constructor(gantt, task) {
|
|
8234
|
+
this._setDefaults(gantt, task);
|
|
8235
|
+
this._prepare();
|
|
8236
|
+
this._draw();
|
|
8237
|
+
this._bind();
|
|
8238
|
+
}
|
|
8239
|
+
get arrows() {
|
|
8240
|
+
return this._arrows;
|
|
8241
|
+
}
|
|
8242
|
+
set arrows(arrows) {
|
|
8243
|
+
this._arrows = arrows;
|
|
8244
|
+
}
|
|
8245
|
+
get task() {
|
|
8246
|
+
return this._task;
|
|
8247
|
+
}
|
|
8248
|
+
get element() {
|
|
8249
|
+
return this._element;
|
|
8250
|
+
}
|
|
8251
|
+
get group() {
|
|
8252
|
+
return this._group;
|
|
8253
|
+
}
|
|
8254
|
+
updateBarPosition({ x, width }) {
|
|
8255
|
+
const bar = this.element;
|
|
8256
|
+
if (x) {
|
|
8257
|
+
// get all x values of parent task
|
|
8258
|
+
const xs = this.task.dependencies.map((dep) => {
|
|
8259
|
+
return this._gantt.get_bar(dep).element.getX();
|
|
8260
|
+
});
|
|
8261
|
+
// child task must not go before parent
|
|
8262
|
+
const valid_x = xs.reduce((prev, curr) => {
|
|
8263
|
+
return x >= curr;
|
|
8264
|
+
}, x);
|
|
8265
|
+
if (!valid_x) {
|
|
8266
|
+
width = null;
|
|
8267
|
+
return;
|
|
8268
|
+
}
|
|
8269
|
+
this._updateAttr(bar, "x", x);
|
|
8270
|
+
}
|
|
8271
|
+
if (width && width >= this._gantt.options.columnWidth) {
|
|
8272
|
+
this._updateAttr(bar, "width", width);
|
|
8273
|
+
}
|
|
8274
|
+
this._updateLabelPosition();
|
|
8275
|
+
this._updateArrowPosition();
|
|
8276
|
+
}
|
|
8277
|
+
dateChanged() {
|
|
8278
|
+
let changed = false;
|
|
8279
|
+
const { newStartDate, newEndDate } = this._computeStartEndDate();
|
|
8280
|
+
if (this.task.start !== newStartDate) {
|
|
8281
|
+
changed = true;
|
|
8282
|
+
this.task.start = newStartDate;
|
|
8283
|
+
}
|
|
8284
|
+
if (this.task.end !== newEndDate) {
|
|
8285
|
+
changed = true;
|
|
8286
|
+
this.task.end = newEndDate;
|
|
8287
|
+
}
|
|
8288
|
+
if (changed) {
|
|
8289
|
+
this._gantt.trigger_event("onDateChange", [
|
|
8290
|
+
this.task,
|
|
8291
|
+
newStartDate,
|
|
8292
|
+
DateUtils.add(newEndDate, -1, "second"),
|
|
8293
|
+
]);
|
|
8294
|
+
}
|
|
8295
|
+
;
|
|
8296
|
+
}
|
|
8297
|
+
setActionCompleted() {
|
|
8298
|
+
this._actionCompleted = true;
|
|
8299
|
+
setTimeout(() => {
|
|
8300
|
+
this._actionCompleted = false;
|
|
8301
|
+
}, 1000);
|
|
8302
|
+
}
|
|
8303
|
+
_setDefaults(gantt, task) {
|
|
8304
|
+
this._actionCompleted = false;
|
|
8305
|
+
this._gantt = gantt;
|
|
8306
|
+
this._task = task;
|
|
8307
|
+
}
|
|
8308
|
+
_prepare() {
|
|
8309
|
+
this._prepareValues();
|
|
8310
|
+
this._prepareHelpers();
|
|
8311
|
+
}
|
|
8312
|
+
_prepareValues() {
|
|
8313
|
+
this._invalid = this.task.invalid;
|
|
8314
|
+
this._height = this._gantt.options.barHeight;
|
|
8315
|
+
this._x = this._computeX();
|
|
8316
|
+
this._y = this._computeY();
|
|
8317
|
+
this._cornerRadius = this._gantt.options.barCornerRadius;
|
|
8318
|
+
this._duration = DateUtils.diff(this.task.end, this.task.start, "minute") / this._gantt.options.step / 60.0;
|
|
8319
|
+
this._width = this._gantt.options.columnWidth * this._duration;
|
|
8320
|
+
this._group = createSVG("g", {
|
|
8321
|
+
class: "bar-wrapper " + (this.task.custom_class || ""),
|
|
8322
|
+
"data-id": this.task.id,
|
|
8323
|
+
});
|
|
8324
|
+
this._barGroup = createSVG("g", {
|
|
8325
|
+
class: "bar-group",
|
|
8326
|
+
append_to: this.group,
|
|
8327
|
+
});
|
|
8328
|
+
}
|
|
8329
|
+
_prepareHelpers() {
|
|
8330
|
+
SVGElement.prototype.getX = function () {
|
|
8331
|
+
return +this.getAttribute("x");
|
|
8332
|
+
};
|
|
8333
|
+
SVGElement.prototype.getY = function () {
|
|
8334
|
+
return +this.getAttribute("y");
|
|
8335
|
+
};
|
|
8336
|
+
SVGElement.prototype.getWidth = function () {
|
|
8337
|
+
return +this.getAttribute("width");
|
|
8338
|
+
};
|
|
8339
|
+
SVGElement.prototype.getHeight = function () {
|
|
8340
|
+
return +this.getAttribute("height");
|
|
8341
|
+
};
|
|
8342
|
+
SVGElement.prototype.getEndX = function () {
|
|
8343
|
+
return this.getX() + this.getWidth();
|
|
8344
|
+
};
|
|
8345
|
+
}
|
|
8346
|
+
_draw() {
|
|
8347
|
+
this._drawBar();
|
|
8348
|
+
this._drawLabel();
|
|
8349
|
+
}
|
|
8350
|
+
_drawBar() {
|
|
8351
|
+
this._element = createSVG("rect", {
|
|
8352
|
+
x: this._x,
|
|
8353
|
+
y: this._y,
|
|
8354
|
+
width: this._width,
|
|
8355
|
+
height: this._height,
|
|
8356
|
+
rx: this._cornerRadius,
|
|
8357
|
+
ry: this._cornerRadius,
|
|
8358
|
+
class: "bar",
|
|
8359
|
+
append_to: this._barGroup,
|
|
8360
|
+
fill: this.task.color,
|
|
8361
|
+
});
|
|
8362
|
+
animateSVG(this.element, "width", 0, this._width);
|
|
8363
|
+
if (this._invalid) {
|
|
8364
|
+
this.element.classList.add("bar-invalid");
|
|
8365
|
+
}
|
|
8366
|
+
}
|
|
8367
|
+
_drawLabel() {
|
|
8368
|
+
createSVG("text", {
|
|
8369
|
+
x: this._x + this._width / 2,
|
|
8370
|
+
y: this._y + this._height / 2,
|
|
8371
|
+
innerHTML: this.task.showTaskName ? this.task.name : "",
|
|
8372
|
+
class: "bar-label",
|
|
8373
|
+
append_to: this._barGroup,
|
|
8374
|
+
});
|
|
8375
|
+
// labels get BBox in the next tick
|
|
8376
|
+
requestAnimationFrame(() => this._updateLabelPosition());
|
|
8377
|
+
}
|
|
8378
|
+
_bind() {
|
|
8379
|
+
if (!this._invalid) {
|
|
8380
|
+
this._setupClickEvent();
|
|
8381
|
+
}
|
|
8382
|
+
}
|
|
8383
|
+
_setupClickEvent() {
|
|
8384
|
+
$.on(this.group, "focus " + this._gantt.options.popupTrigger, (e) => {
|
|
8385
|
+
// just finished a move action, wait for a few seconds
|
|
8386
|
+
if (!this._actionCompleted) {
|
|
8387
|
+
this._showPopup();
|
|
8388
|
+
this._gantt.unselect_all();
|
|
8389
|
+
this.group.classList.add("active");
|
|
8390
|
+
}
|
|
8391
|
+
}, null);
|
|
8392
|
+
$.on(this.group, "dblclick", (e) => {
|
|
8393
|
+
// just finished a move action, wait for a few seconds
|
|
8394
|
+
if (!this._actionCompleted) {
|
|
8395
|
+
this._gantt.trigger_event("onClick", [this.task]);
|
|
8396
|
+
}
|
|
8397
|
+
}, null);
|
|
8398
|
+
}
|
|
8399
|
+
_showPopup() {
|
|
8400
|
+
if (this._gantt.bar_being_dragged) {
|
|
8401
|
+
return;
|
|
8402
|
+
}
|
|
8403
|
+
const formatString = this._gantt.view_is(ViewMode.Hour)
|
|
8404
|
+
? "HH:ss"
|
|
8405
|
+
: "MMM D";
|
|
8406
|
+
const start_date = DateUtils.format(this.task.start, formatString, this._gantt.options.language);
|
|
8407
|
+
const end_date = DateUtils.format(DateUtils.add(this.task.end, -1, "second"), formatString, this._gantt.options.language);
|
|
8408
|
+
const subtitle = start_date + " - " + end_date;
|
|
8409
|
+
this._gantt.show_popup({
|
|
8410
|
+
target_element: this.element,
|
|
8411
|
+
title: this.task.name,
|
|
8412
|
+
subtitle: subtitle,
|
|
8413
|
+
task: this.task,
|
|
8414
|
+
});
|
|
8415
|
+
}
|
|
8416
|
+
_computeStartEndDate() {
|
|
8417
|
+
const bar = this.element;
|
|
8418
|
+
const xInUnits = bar.getX() / this._gantt.options.columnWidth;
|
|
8419
|
+
const newStartDate = DateUtils.add(this._gantt.minDate, xInUnits * this._gantt.options.step, "hour");
|
|
8420
|
+
const width_in_units = bar.getWidth() / this._gantt.options.columnWidth;
|
|
8421
|
+
const newEndDate = DateUtils.add(newStartDate, width_in_units * this._gantt.options.step, "hour");
|
|
8422
|
+
return { newStartDate, newEndDate };
|
|
8423
|
+
}
|
|
8424
|
+
_computeX() {
|
|
8425
|
+
const { step, columnWidth } = this._gantt.options;
|
|
8426
|
+
const diff = DateUtils.diff(this.task.start, this._gantt.minDate, "hour");
|
|
8427
|
+
let x = (diff / step) * columnWidth;
|
|
8428
|
+
if (this._gantt.view_is(ViewMode.Month)) {
|
|
8429
|
+
const diff = DateUtils.diff(this.task.start, this._gantt.minDate, "day");
|
|
8430
|
+
x = (diff * columnWidth) / 30;
|
|
8431
|
+
}
|
|
8432
|
+
return x;
|
|
8433
|
+
}
|
|
8434
|
+
_computeY() {
|
|
8435
|
+
return (this._gantt.options.headerHeight +
|
|
8436
|
+
this._gantt.options.padding +
|
|
8437
|
+
this.task._index * (this._height + this._gantt.options.padding));
|
|
8438
|
+
}
|
|
8439
|
+
_updateAttr(element, attr, value) {
|
|
8440
|
+
value = +value;
|
|
8441
|
+
if (!isNaN(value)) {
|
|
8442
|
+
element.setAttribute(attr, value);
|
|
8443
|
+
}
|
|
8444
|
+
return element;
|
|
8445
|
+
}
|
|
8446
|
+
_updateLabelPosition() {
|
|
8447
|
+
const bar = this.element, label = this.group.querySelector(".bar-label");
|
|
8448
|
+
if (label.getBBox().width > bar.getWidth()) {
|
|
8449
|
+
label.classList.add("big");
|
|
8450
|
+
label.setAttribute("x", bar.getX() + bar.getWidth() + 5);
|
|
8451
|
+
}
|
|
8452
|
+
else {
|
|
8453
|
+
label.classList.remove("big");
|
|
8454
|
+
label.setAttribute("x", bar.getX() + bar.getWidth() / 2);
|
|
8455
|
+
}
|
|
8456
|
+
}
|
|
8457
|
+
_updateArrowPosition() {
|
|
8458
|
+
this._arrows = this._arrows || [];
|
|
8459
|
+
for (let arrow of this._arrows) {
|
|
8460
|
+
arrow.update();
|
|
8461
|
+
}
|
|
8462
|
+
}
|
|
8463
|
+
}
|
|
8464
|
+
|
|
8465
|
+
class Popup {
|
|
8466
|
+
constructor(parent, customHtml) {
|
|
8467
|
+
this.parent = parent;
|
|
8468
|
+
this.customHtml = customHtml;
|
|
8469
|
+
this.make();
|
|
8470
|
+
}
|
|
8471
|
+
show(options) {
|
|
8472
|
+
if (!options.target_element) {
|
|
8473
|
+
throw new Error("target_element is required to show popup");
|
|
8474
|
+
}
|
|
8475
|
+
if (!options.position) {
|
|
8476
|
+
options.position = "left";
|
|
8477
|
+
}
|
|
8478
|
+
const target_element = options.target_element;
|
|
8479
|
+
if (this.customHtml) {
|
|
8480
|
+
let html = this.customHtml(options.task);
|
|
8481
|
+
html += '<div class="pointer"></div>';
|
|
8482
|
+
this.parent.innerHTML = html;
|
|
8483
|
+
this.pointer = this.parent.querySelector(".pointer");
|
|
8484
|
+
}
|
|
8485
|
+
else {
|
|
8486
|
+
// set data
|
|
8487
|
+
this.title.innerHTML = options.title;
|
|
8488
|
+
this.subtitle.innerHTML = options.subtitle;
|
|
8489
|
+
this.parent.style.width = this.parent.clientWidth + "px";
|
|
8490
|
+
}
|
|
8491
|
+
// set position
|
|
8492
|
+
let positionMeta;
|
|
8493
|
+
if (target_element instanceof HTMLElement) {
|
|
8494
|
+
positionMeta = target_element.getBoundingClientRect();
|
|
8495
|
+
}
|
|
8496
|
+
else if (target_element instanceof SVGElement) {
|
|
8497
|
+
positionMeta = options.target_element.getBBox();
|
|
8498
|
+
}
|
|
8499
|
+
if (options.position === 'left') {
|
|
8500
|
+
this.parent.style.left = positionMeta.x + (positionMeta.width + 10) + "px";
|
|
8501
|
+
this.parent.style.top = positionMeta.y + "px";
|
|
8502
|
+
this.pointer.style.transform = "rotateZ(90deg)";
|
|
8503
|
+
this.pointer.style.left = "-7px";
|
|
8504
|
+
this.pointer.style.top = "2px";
|
|
8505
|
+
}
|
|
8506
|
+
// show
|
|
8507
|
+
this.parent.style.opacity = 1;
|
|
8508
|
+
}
|
|
8509
|
+
make() {
|
|
8510
|
+
this.parent.innerHTML = `
|
|
8511
|
+
<div class="popup">
|
|
8512
|
+
<div class="wrp-title">
|
|
8513
|
+
<span class="title"></span>
|
|
8514
|
+
</div>
|
|
8515
|
+
<div class="wrp-subtitle">
|
|
8516
|
+
<span class="icon fas fa-calendar-alt"></span>
|
|
8517
|
+
<span class="subtitle"></span>
|
|
8518
|
+
</div>
|
|
8519
|
+
<div class="pointer"></div>
|
|
8520
|
+
</div>
|
|
8521
|
+
`;
|
|
8522
|
+
this.hide();
|
|
8523
|
+
this.title = this.parent.querySelector(".title");
|
|
8524
|
+
this.subtitle = this.parent.querySelector(".subtitle");
|
|
8525
|
+
this.pointer = this.parent.querySelector(".pointer");
|
|
8526
|
+
}
|
|
8527
|
+
hide() {
|
|
8528
|
+
this.parent.style.opacity = 0;
|
|
8529
|
+
this.parent.style.left = 0;
|
|
8530
|
+
}
|
|
8531
|
+
}
|
|
8532
|
+
|
|
8533
|
+
class Arrow {
|
|
8534
|
+
constructor(gantt, fromTask, toTask) {
|
|
8535
|
+
this._gantt = gantt;
|
|
8536
|
+
this._fromTask = fromTask;
|
|
8537
|
+
this._toTask = toTask;
|
|
8538
|
+
this.calculatePath();
|
|
8539
|
+
this.draw();
|
|
8540
|
+
}
|
|
8541
|
+
get fromTask() {
|
|
8542
|
+
return this._fromTask;
|
|
8543
|
+
}
|
|
8544
|
+
get toTask() {
|
|
8545
|
+
return this._toTask;
|
|
8546
|
+
}
|
|
8547
|
+
get element() {
|
|
8548
|
+
return this._element;
|
|
8549
|
+
}
|
|
8550
|
+
update() {
|
|
8551
|
+
this.calculatePath();
|
|
8552
|
+
this._element.setAttribute("d", this._path);
|
|
8553
|
+
}
|
|
8554
|
+
calculatePath() {
|
|
8555
|
+
let startX = this.fromTask.element.getX() + this.fromTask.element.getWidth() / 2;
|
|
8556
|
+
const condition = () => this.toTask.element.getX() < startX + this._gantt.options.padding &&
|
|
8557
|
+
startX > this.fromTask.element.getX() + this._gantt.options.padding;
|
|
8558
|
+
while (condition()) {
|
|
8559
|
+
startX -= 10;
|
|
8560
|
+
}
|
|
8561
|
+
const startY = this._gantt.options.headerHeight +
|
|
8562
|
+
this._gantt.options.barHeight +
|
|
8563
|
+
(this._gantt.options.padding + this._gantt.options.barHeight) *
|
|
8564
|
+
this.fromTask.task._index +
|
|
8565
|
+
this._gantt.options.padding;
|
|
8566
|
+
const endX = this.toTask.element.getX() - this._gantt.options.padding / 2;
|
|
8567
|
+
const endY = this._gantt.options.headerHeight +
|
|
8568
|
+
this._gantt.options.barHeight / 2 +
|
|
8569
|
+
(this._gantt.options.padding + this._gantt.options.barHeight) *
|
|
8570
|
+
this.toTask.task._index +
|
|
8571
|
+
this._gantt.options.padding;
|
|
8572
|
+
const fromIsBelowTo = this.fromTask.task._index > this.toTask.task._index;
|
|
8573
|
+
const curve = this._gantt.options.arrowCurve;
|
|
8574
|
+
const clockwise = fromIsBelowTo ? 1 : 0;
|
|
8575
|
+
const curveY = fromIsBelowTo ? -curve : curve;
|
|
8576
|
+
const offset = fromIsBelowTo
|
|
8577
|
+
? endY + this._gantt.options.arrowCurve
|
|
8578
|
+
: endY - this._gantt.options.arrowCurve;
|
|
8579
|
+
this._path = `
|
|
8580
|
+
M ${startX} ${startY}
|
|
8581
|
+
V ${offset}
|
|
8582
|
+
a ${curve} ${curve} 0 0 ${clockwise} ${curve} ${curveY}
|
|
8583
|
+
L ${endX} ${endY}
|
|
8584
|
+
m -5 -5
|
|
8585
|
+
l 5 5
|
|
8586
|
+
l -5 5`;
|
|
8587
|
+
if (this.toTask.element.getX() < this.fromTask.element.getX() + this._gantt.options.padding) {
|
|
8588
|
+
const down1 = this._gantt.options.padding / 2 - curve;
|
|
8589
|
+
const down2 = this.toTask.element.getY() + this.toTask.element.getHeight() / 2 - curveY;
|
|
8590
|
+
const left = this.toTask.element.getX() - this._gantt.options.padding;
|
|
8591
|
+
this._path = `
|
|
8592
|
+
M ${startX} ${startY}
|
|
8593
|
+
v ${down1}
|
|
8594
|
+
a ${curve} ${curve} 0 0 1 -${curve} ${curve}
|
|
8595
|
+
H ${left}
|
|
8596
|
+
a ${curve} ${curve} 0 0 ${clockwise} -${curve} ${curveY}
|
|
8597
|
+
V ${down2}
|
|
8598
|
+
a ${curve} ${curve} 0 0 ${clockwise} ${curve} ${curveY}
|
|
8599
|
+
L ${endX} ${endY}
|
|
8600
|
+
m -5 -5
|
|
8601
|
+
l 5 5
|
|
8602
|
+
l -5 5`;
|
|
8603
|
+
}
|
|
8604
|
+
}
|
|
8605
|
+
draw() {
|
|
8606
|
+
this._element = createSVG("path", {
|
|
8607
|
+
d: this._path,
|
|
8608
|
+
"data-from": this.fromTask.task.id,
|
|
8609
|
+
"data-to": this.toTask.task.id,
|
|
8610
|
+
});
|
|
8611
|
+
}
|
|
8612
|
+
}
|
|
8613
|
+
|
|
8614
|
+
const defaultOptions = {
|
|
8615
|
+
headerHeight: 94,
|
|
8616
|
+
columnWidth: 30,
|
|
8617
|
+
step: 24,
|
|
8618
|
+
barHeight: 20,
|
|
8619
|
+
barCornerRadius: 0,
|
|
8620
|
+
arrowCurve: 4,
|
|
8621
|
+
padding: 24,
|
|
8622
|
+
viewMode: ViewMode.Day,
|
|
8623
|
+
dateFormat: "YYYY-MM-DD",
|
|
8624
|
+
popupTrigger: "click",
|
|
8625
|
+
customPopupHtml: null,
|
|
8626
|
+
language: "en",
|
|
8627
|
+
};
|
|
8628
|
+
|
|
8629
|
+
class Gantt {
|
|
8630
|
+
constructor(wrapper, tasks, options) {
|
|
8631
|
+
this.setup_wrapper(wrapper);
|
|
8632
|
+
this.setup_options(options);
|
|
8633
|
+
this.setup_tasks(tasks);
|
|
8634
|
+
// initialize with default view mode
|
|
8635
|
+
this.change_view_mode();
|
|
8636
|
+
this.bind_events();
|
|
8637
|
+
}
|
|
8638
|
+
get minDate() {
|
|
8639
|
+
return this._minDate;
|
|
8640
|
+
}
|
|
8641
|
+
get maxDate() {
|
|
8642
|
+
return this._maxDate;
|
|
8643
|
+
}
|
|
8644
|
+
setup_wrapper(element) {
|
|
8645
|
+
let svg_element, wrapper_element;
|
|
8646
|
+
// CSS Selector is passed
|
|
8647
|
+
if (typeof element === "string") {
|
|
8648
|
+
element = document.querySelector(element);
|
|
8649
|
+
}
|
|
8650
|
+
// get the SVGElement
|
|
8651
|
+
if (element instanceof HTMLElement) {
|
|
8652
|
+
wrapper_element = element;
|
|
8653
|
+
svg_element = element.querySelector("svg");
|
|
8654
|
+
}
|
|
8655
|
+
else if (element instanceof SVGElement) {
|
|
8656
|
+
svg_element = element;
|
|
8657
|
+
}
|
|
8658
|
+
else {
|
|
8659
|
+
throw new TypeError("Frappé Gantt only supports usage of a string CSS selector, HTML DOM element or SVG DOM element for the \'element\' parameter");
|
|
8660
|
+
}
|
|
8661
|
+
// svg element
|
|
8662
|
+
if (!svg_element) {
|
|
8663
|
+
// create it
|
|
8664
|
+
this.$svg = createSVG("svg", {
|
|
8665
|
+
append_to: wrapper_element,
|
|
8666
|
+
class: "gantt",
|
|
8667
|
+
});
|
|
8668
|
+
}
|
|
8669
|
+
else {
|
|
8670
|
+
this.$svg = svg_element;
|
|
8671
|
+
this.$svg.classList.add("gantt");
|
|
8672
|
+
}
|
|
8673
|
+
// wrapper element
|
|
8674
|
+
this.$container = document.createElement("div");
|
|
8675
|
+
this.$container.classList.add("gantt-container");
|
|
8676
|
+
const parent_element = this.$svg.parentElement;
|
|
8677
|
+
parent_element.appendChild(this.$container);
|
|
8678
|
+
this.$container.appendChild(this.$svg);
|
|
8679
|
+
// popup wrapper
|
|
8680
|
+
this.popup_wrapper = document.createElement("div");
|
|
8681
|
+
this.popup_wrapper.classList.add("popup-wrapper");
|
|
8682
|
+
this.$container.appendChild(this.popup_wrapper);
|
|
8683
|
+
}
|
|
8684
|
+
setup_options(options) {
|
|
8685
|
+
this.options = Object.assign({}, defaultOptions, options);
|
|
8686
|
+
}
|
|
8687
|
+
setup_tasks(tasks) {
|
|
8688
|
+
// prepare tasks
|
|
8689
|
+
this.tasks = tasks.map((task, i) => {
|
|
8690
|
+
//standard colors if needed
|
|
8691
|
+
task.color = task.color || '#7892A1';
|
|
8692
|
+
// convert to Date objects
|
|
8693
|
+
task._start = DateUtils.parse(task.start);
|
|
8694
|
+
task._end = DateUtils.parse(task.end);
|
|
8695
|
+
// make task invalid if duration too large
|
|
8696
|
+
if (DateUtils.diff(task._end, task._start, "year") > 10) {
|
|
8697
|
+
task.end = null;
|
|
8698
|
+
}
|
|
8699
|
+
// cache index
|
|
8700
|
+
task._index = i;
|
|
8701
|
+
if (typeof task._row_id === "number") {
|
|
8702
|
+
task._index = task._row_id;
|
|
8703
|
+
}
|
|
8704
|
+
// invalid dates
|
|
8705
|
+
if (!task.start && !task.end) {
|
|
8706
|
+
const today = DateUtils.today();
|
|
8707
|
+
task._start = today;
|
|
8708
|
+
task._end = DateUtils.add(today, 2, "day");
|
|
8709
|
+
}
|
|
8710
|
+
if (!task.start && task.end) {
|
|
8711
|
+
task._start = DateUtils.add(task._end, -2, 'day');
|
|
8712
|
+
}
|
|
8713
|
+
if (task.start && !task.end) {
|
|
8714
|
+
task._end = DateUtils.add(task._start, 2, "day");
|
|
8715
|
+
}
|
|
8716
|
+
// if hours is not set, assume the last day is full day
|
|
8717
|
+
// e.g: 2018-09-09 becomes 2018-09-09 23:59:59
|
|
8718
|
+
const task_end_values = DateUtils.getDateValues(task._end);
|
|
8719
|
+
if (task_end_values.slice(3).every((d) => d === 0)) {
|
|
8720
|
+
task._end = DateUtils.add(task._end, 24, "hour");
|
|
8721
|
+
}
|
|
8722
|
+
// invalid flag
|
|
8723
|
+
if (!task.start || !task.end) {
|
|
8724
|
+
task.invalid = true;
|
|
8725
|
+
}
|
|
8726
|
+
// dependencies
|
|
8727
|
+
if (typeof task.dependencies === "string" || !task.dependencies) {
|
|
8728
|
+
let deps = [];
|
|
8729
|
+
if (task.dependencies) {
|
|
8730
|
+
deps = task.dependencies
|
|
8731
|
+
.split(',')
|
|
8732
|
+
.map((d) => d.trim())
|
|
8733
|
+
.filter((d) => d);
|
|
8734
|
+
}
|
|
8735
|
+
task.dependencies = deps;
|
|
8736
|
+
}
|
|
8737
|
+
// uids
|
|
8738
|
+
if (!task.id) {
|
|
8739
|
+
task.id = generate_id(task);
|
|
8740
|
+
}
|
|
8741
|
+
return task;
|
|
8742
|
+
});
|
|
8743
|
+
this.setup_dependencies();
|
|
8744
|
+
}
|
|
8745
|
+
setup_dependencies() {
|
|
8746
|
+
this.dependency_map = {};
|
|
8747
|
+
for (let t of this.tasks) {
|
|
8748
|
+
for (let d of t.dependencies) {
|
|
8749
|
+
this.dependency_map[d] = this.dependency_map[d] || [];
|
|
8750
|
+
this.dependency_map[d].push(t.id);
|
|
8751
|
+
}
|
|
8752
|
+
}
|
|
8753
|
+
}
|
|
8754
|
+
refresh(tasks) {
|
|
8755
|
+
this.setup_tasks(tasks);
|
|
8756
|
+
this.change_view_mode();
|
|
8757
|
+
}
|
|
8758
|
+
change_view_mode(mode = this.options.viewMode) {
|
|
8759
|
+
this.update_view_scale(mode);
|
|
8760
|
+
this.setup_dates();
|
|
8761
|
+
this.render();
|
|
8762
|
+
// fire viewmode_change event
|
|
8763
|
+
this.trigger_event("onViewChange", [mode]);
|
|
8764
|
+
}
|
|
8765
|
+
update_view_scale(view_mode) {
|
|
8766
|
+
this.options.viewMode = view_mode;
|
|
8767
|
+
// this.isHourView = false;
|
|
8768
|
+
if (view_mode === ViewMode.Hour) {
|
|
8769
|
+
this.options.step = 24 / 24;
|
|
8770
|
+
this.options.columnWidth = 50;
|
|
8771
|
+
// this.isHourView = true;
|
|
8772
|
+
}
|
|
8773
|
+
else if (view_mode === ViewMode.Day) {
|
|
8774
|
+
this.options.step = 24;
|
|
8775
|
+
this.options.columnWidth = 50;
|
|
8776
|
+
}
|
|
8777
|
+
else if (view_mode === ViewMode.HalfDay) {
|
|
8778
|
+
this.options.step = 24 / 2;
|
|
8779
|
+
this.options.columnWidth = 50;
|
|
8780
|
+
}
|
|
8781
|
+
else if (view_mode === ViewMode.QuarterDay) {
|
|
8782
|
+
this.options.step = 24 / 4;
|
|
8783
|
+
this.options.columnWidth = 50;
|
|
8784
|
+
}
|
|
8785
|
+
else if (view_mode === ViewMode.Week) {
|
|
8786
|
+
this.options.step = 24 * 7;
|
|
8787
|
+
this.options.columnWidth = 140;
|
|
8788
|
+
}
|
|
8789
|
+
else if (view_mode === ViewMode.Month) {
|
|
8790
|
+
this.options.step = 24 * 30;
|
|
8791
|
+
this.options.columnWidth = 120;
|
|
8792
|
+
}
|
|
8793
|
+
else if (view_mode === ViewMode.Year) {
|
|
8794
|
+
this.options.step = 24 * 365;
|
|
8795
|
+
this.options.columnWidth = 120;
|
|
8796
|
+
}
|
|
8797
|
+
}
|
|
8798
|
+
setup_dates() {
|
|
8799
|
+
this.setup_gantt_dates();
|
|
8800
|
+
this.setup_date_values();
|
|
8801
|
+
}
|
|
8802
|
+
setup_gantt_dates() {
|
|
8803
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
8804
|
+
this._minDate = null;
|
|
8805
|
+
this._maxDate = null;
|
|
8806
|
+
for (let task of this.tasks) {
|
|
8807
|
+
// set global start and end date
|
|
8808
|
+
if (!this.minDate || task.start < this.minDate) {
|
|
8809
|
+
this._minDate = task.start;
|
|
8810
|
+
}
|
|
8811
|
+
if (!this.maxDate || task.end > this.maxDate) {
|
|
8812
|
+
this._maxDate = task.end;
|
|
8813
|
+
}
|
|
8814
|
+
}
|
|
8815
|
+
this._realMinDate = this.minDate;
|
|
8816
|
+
this._realMaxDate = this.maxDate;
|
|
8817
|
+
switch (this.options.viewMode) {
|
|
8818
|
+
case ViewMode.Hour:
|
|
8819
|
+
this._minDate = DateUtils.add(this.minDate, -((_a = this.options.marginBeforeStart) !== null && _a !== void 0 ? _a : 1), "hour");
|
|
8820
|
+
this._maxDate = DateUtils.add(this.maxDate, (_b = this.options.marginAfterEnd) !== null && _b !== void 0 ? _b : 1, "hour");
|
|
8821
|
+
break;
|
|
8822
|
+
case ViewMode.QuarterDay:
|
|
8823
|
+
this._minDate = DateUtils.add(this.minDate, -((_c = this.options.marginBeforeStart) !== null && _c !== void 0 ? _c : 12), "hour");
|
|
8824
|
+
this._maxDate = DateUtils.add(this.maxDate, (_d = this.options.marginAfterEnd) !== null && _d !== void 0 ? _d : 12, "hour");
|
|
8825
|
+
break;
|
|
8826
|
+
case ViewMode.HalfDay:
|
|
8827
|
+
this._minDate = DateUtils.add(this.minDate, -((_e = this.options.marginBeforeStart) !== null && _e !== void 0 ? _e : 1), "day");
|
|
8828
|
+
this._maxDate = DateUtils.add(this.maxDate, (_f = this.options.marginAfterEnd) !== null && _f !== void 0 ? _f : 1, "day");
|
|
8829
|
+
break;
|
|
8830
|
+
case ViewMode.Day:
|
|
8831
|
+
this._minDate = DateUtils.add(this.minDate, -((_g = this.options.marginBeforeStart) !== null && _g !== void 0 ? _g : 3), "day");
|
|
8832
|
+
this._maxDate = DateUtils.add(this.maxDate, (_h = this.options.marginAfterEnd) !== null && _h !== void 0 ? _h : 3, "day");
|
|
8833
|
+
break;
|
|
8834
|
+
case ViewMode.Week:
|
|
8835
|
+
this._minDate = DateUtils.add(this.minDate, -((_j = this.options.marginBeforeStart) !== null && _j !== void 0 ? _j : 1), "month");
|
|
8836
|
+
this._maxDate = DateUtils.add(this.maxDate, (_k = this.options.marginAfterEnd) !== null && _k !== void 0 ? _k : 1, "month");
|
|
8837
|
+
break;
|
|
8838
|
+
case ViewMode.Month:
|
|
8839
|
+
this._minDate = DateUtils.add(this.minDate, -((_l = this.options.marginBeforeStart) !== null && _l !== void 0 ? _l : 1), "year");
|
|
8840
|
+
this._maxDate = DateUtils.add(this.maxDate, (_m = this.options.marginAfterEnd) !== null && _m !== void 0 ? _m : 1, "year");
|
|
8841
|
+
break;
|
|
8842
|
+
case ViewMode.Year:
|
|
8843
|
+
this._minDate = DateUtils.add(this.minDate, -((_o = this.options.marginBeforeStart) !== null && _o !== void 0 ? _o : 2), "year");
|
|
8844
|
+
this._maxDate = DateUtils.add(this.maxDate, (_p = this.options.marginAfterEnd) !== null && _p !== void 0 ? _p : 2, "year");
|
|
8845
|
+
break;
|
|
8846
|
+
}
|
|
8847
|
+
}
|
|
8848
|
+
setup_date_values() {
|
|
8849
|
+
this.dates = [];
|
|
8850
|
+
let cur_date = null;
|
|
8851
|
+
while (cur_date === null || cur_date < this.maxDate) {
|
|
8852
|
+
if (!cur_date) {
|
|
8853
|
+
cur_date = DateUtils.clone(this.minDate);
|
|
8854
|
+
}
|
|
8855
|
+
else {
|
|
8856
|
+
if (this.view_is(ViewMode.Year)) {
|
|
8857
|
+
cur_date = DateUtils.add(cur_date, 1, "year");
|
|
8858
|
+
}
|
|
8859
|
+
else if (this.view_is(ViewMode.Month)) {
|
|
8860
|
+
cur_date = DateUtils.add(cur_date, 1, "month");
|
|
8861
|
+
}
|
|
8862
|
+
else {
|
|
8863
|
+
cur_date = DateUtils.add(cur_date, this.options.step, 'hour');
|
|
8864
|
+
}
|
|
8865
|
+
}
|
|
8866
|
+
this.dates.push(cur_date);
|
|
8867
|
+
}
|
|
8868
|
+
console.log("cur_date", cur_date);
|
|
8869
|
+
console.log("dates", this.dates);
|
|
8870
|
+
}
|
|
8871
|
+
bind_events() {
|
|
8872
|
+
this.bind_grid_click();
|
|
8873
|
+
this.bind_bar_events();
|
|
8874
|
+
}
|
|
8875
|
+
render() {
|
|
8876
|
+
this.clear();
|
|
8877
|
+
this.setup_layers();
|
|
8878
|
+
this.make_grid();
|
|
8879
|
+
this.make_dates();
|
|
8880
|
+
this.make_bars();
|
|
8881
|
+
this.make_arrows();
|
|
8882
|
+
this.map_arrows_on_bars();
|
|
8883
|
+
this.set_width();
|
|
8884
|
+
this.set_scroll_position();
|
|
8885
|
+
}
|
|
8886
|
+
setup_layers() {
|
|
8887
|
+
this.layers = {};
|
|
8888
|
+
const layers = ["grid", "date", "arrow", "progress", "bar", "details"];
|
|
8889
|
+
// make group layers
|
|
8890
|
+
for (let layer of layers) {
|
|
8891
|
+
this.layers[layer] = createSVG('g', {
|
|
8892
|
+
class: layer,
|
|
8893
|
+
append_to: this.$svg,
|
|
8894
|
+
});
|
|
8895
|
+
}
|
|
8896
|
+
}
|
|
8897
|
+
make_grid() {
|
|
8898
|
+
this.make_grid_background();
|
|
8899
|
+
this.make_grid_rows();
|
|
8900
|
+
this.make_grid_header();
|
|
8901
|
+
this.make_grid_highlights();
|
|
8902
|
+
this.make_grid_ticks();
|
|
8903
|
+
}
|
|
8904
|
+
make_grid_background() {
|
|
8905
|
+
const grid_width = this.dates.length * this.options.columnWidth;
|
|
8906
|
+
const distinct_rows = [...new Set(this.tasks.map((x) => x._row_id))];
|
|
8907
|
+
const grid_height = this.options.headerHeight +
|
|
8908
|
+
this.options.padding / 2 +
|
|
8909
|
+
(this.options.barHeight + this.options.padding) *
|
|
8910
|
+
distinct_rows.length;
|
|
8911
|
+
createSVG("rect", {
|
|
8912
|
+
x: 0,
|
|
8913
|
+
y: 0,
|
|
8914
|
+
width: grid_width,
|
|
8915
|
+
height: grid_height,
|
|
8916
|
+
class: "grid-background",
|
|
8917
|
+
append_to: this.layers.grid,
|
|
8918
|
+
});
|
|
8919
|
+
$.attr(this.$svg, {
|
|
8920
|
+
height: grid_height,
|
|
8921
|
+
width: "100%",
|
|
8922
|
+
}, null);
|
|
8923
|
+
}
|
|
8924
|
+
make_grid_rows() {
|
|
8925
|
+
const rows_layer = createSVG("g", { append_to: this.layers.grid });
|
|
8926
|
+
const lines_layer = createSVG("g", { append_to: this.layers.grid });
|
|
8927
|
+
const row_width = this.dates.length * this.options.columnWidth;
|
|
8928
|
+
const row_height = this.options.barHeight + this.options.padding;
|
|
8929
|
+
//TODO: ajustar o posicionamento das linhas
|
|
8930
|
+
let row_y = this.options.headerHeight + this.options.padding / 2;
|
|
8931
|
+
this.tasks.forEach(_ => {
|
|
8932
|
+
createSVG("rect", {
|
|
8933
|
+
x: 0,
|
|
8934
|
+
y: row_y,
|
|
8935
|
+
width: row_width,
|
|
8936
|
+
height: row_height,
|
|
8937
|
+
class: "grid-row",
|
|
8938
|
+
append_to: rows_layer,
|
|
8939
|
+
});
|
|
8940
|
+
createSVG("line", {
|
|
8941
|
+
x1: 0,
|
|
8942
|
+
y1: row_y + row_height,
|
|
8943
|
+
x2: row_width,
|
|
8944
|
+
y2: row_y + row_height,
|
|
8945
|
+
class: "row-line",
|
|
8946
|
+
append_to: lines_layer,
|
|
8947
|
+
});
|
|
8948
|
+
row_y += this.options.barHeight + this.options.padding;
|
|
8949
|
+
});
|
|
8950
|
+
}
|
|
8951
|
+
make_grid_header() {
|
|
8952
|
+
// const addIsHourView = this.isHourView ? 25 : 10
|
|
8953
|
+
const header_width = this.dates.length * this.options.columnWidth;
|
|
8954
|
+
const header_height = this.options.headerHeight + 10;
|
|
8955
|
+
createSVG("rect", {
|
|
8956
|
+
x: 0,
|
|
8957
|
+
y: 0,
|
|
8958
|
+
width: header_width,
|
|
8959
|
+
height: header_height,
|
|
8960
|
+
class: "grid-header",
|
|
8961
|
+
append_to: this.layers.grid,
|
|
8962
|
+
});
|
|
8963
|
+
}
|
|
8964
|
+
make_grid_ticks() {
|
|
8965
|
+
let tick_x = 0;
|
|
8966
|
+
let tick_y = this.options.headerHeight + this.options.padding / 2;
|
|
8967
|
+
let tick_height = (this.options.barHeight + this.options.padding) *
|
|
8968
|
+
this.tasks.length;
|
|
8969
|
+
for (let date of this.dates) {
|
|
8970
|
+
let tick_class = "tick";
|
|
8971
|
+
// thick tick for monday
|
|
8972
|
+
if (this.view_is(ViewMode.Day) && date.getDate() === 1) {
|
|
8973
|
+
tick_class += " thick";
|
|
8974
|
+
}
|
|
8975
|
+
// thick tick for first week
|
|
8976
|
+
if (this.view_is(ViewMode.Week) &&
|
|
8977
|
+
date.getDate() >= 1 &&
|
|
8978
|
+
date.getDate() < 8) {
|
|
8979
|
+
tick_class += " thick";
|
|
8980
|
+
}
|
|
8981
|
+
// thick ticks for quarters
|
|
8982
|
+
if (this.view_is(ViewMode.Month) && date.getMonth() % 3 === 0) {
|
|
8983
|
+
tick_class += " thick";
|
|
8984
|
+
}
|
|
8985
|
+
createSVG("path", {
|
|
8986
|
+
d: `M ${tick_x} ${tick_y} v ${tick_height}`,
|
|
8987
|
+
class: tick_class,
|
|
8988
|
+
append_to: this.layers.grid,
|
|
8989
|
+
});
|
|
8990
|
+
if (this.view_is(ViewMode.Month)) {
|
|
8991
|
+
tick_x +=
|
|
8992
|
+
(DateUtils.getDaysInMonth(date) *
|
|
8993
|
+
this.options.columnWidth) /
|
|
8994
|
+
30;
|
|
8995
|
+
}
|
|
8996
|
+
else {
|
|
8997
|
+
tick_x += this.options.columnWidth;
|
|
8998
|
+
}
|
|
8999
|
+
}
|
|
9000
|
+
}
|
|
9001
|
+
make_grid_highlights() {
|
|
9002
|
+
if (this.view_is(ViewMode.Day)) {
|
|
9003
|
+
const width = this.options.columnWidth;
|
|
9004
|
+
const height = (this.options.barHeight + this.options.padding) *
|
|
9005
|
+
this.tasks.length +
|
|
9006
|
+
this.options.headerHeight +
|
|
9007
|
+
this.options.padding / 2;
|
|
9008
|
+
let x = 0;
|
|
9009
|
+
for (let date of this.dates) {
|
|
9010
|
+
let y = (this.options.headerHeight + this.options.padding) / 2;
|
|
9011
|
+
let isToday = date.toString() == DateUtils.today();
|
|
9012
|
+
let isWeekend = (date.getDay() == 0 || date.getDay() == 6);
|
|
9013
|
+
let className;
|
|
9014
|
+
if (isToday) {
|
|
9015
|
+
className = "today-highlight";
|
|
9016
|
+
y = (this.options.headerHeight + this.options.padding) / 2;
|
|
9017
|
+
}
|
|
9018
|
+
else if (isWeekend) {
|
|
9019
|
+
className = "weekend-highlight";
|
|
9020
|
+
}
|
|
9021
|
+
const rx = 3;
|
|
9022
|
+
const ry = 3;
|
|
9023
|
+
if (isToday || isWeekend) {
|
|
9024
|
+
createSVG("rect", {
|
|
9025
|
+
x,
|
|
9026
|
+
y,
|
|
9027
|
+
rx,
|
|
9028
|
+
ry,
|
|
9029
|
+
width,
|
|
9030
|
+
height,
|
|
9031
|
+
class: className,
|
|
9032
|
+
append_to: this.layers.grid
|
|
9033
|
+
});
|
|
9034
|
+
}
|
|
9035
|
+
x += this.options.columnWidth;
|
|
9036
|
+
}
|
|
9037
|
+
}
|
|
9038
|
+
}
|
|
9039
|
+
make_dates() {
|
|
9040
|
+
const dates = this.get_dates_to_draw();
|
|
9041
|
+
const isHourView = this.view_is([ViewMode.Hour, ViewMode.QuarterDay, ViewMode.HalfDay]);
|
|
9042
|
+
let counter = 0;
|
|
9043
|
+
for (let i = 0; i < dates.length; i++) {
|
|
9044
|
+
const date = dates[i];
|
|
9045
|
+
if (isHourView && date.date >= this._realMinDate && date.date <= this._realMaxDate) {
|
|
9046
|
+
createSVG("text", {
|
|
9047
|
+
x: date.lower_x,
|
|
9048
|
+
y: date.lower_y,
|
|
9049
|
+
innerHTML: `H${counter++ * this.options.step}`,
|
|
9050
|
+
class: "title-1",
|
|
9051
|
+
append_to: this.layers.date,
|
|
9052
|
+
});
|
|
9053
|
+
}
|
|
9054
|
+
createSVG("text", {
|
|
9055
|
+
x: date.lower_x,
|
|
9056
|
+
y: date.lower_y + 20,
|
|
9057
|
+
innerHTML: date.lower_text,
|
|
9058
|
+
class: "title-2",
|
|
9059
|
+
append_to: this.layers.date,
|
|
9060
|
+
});
|
|
9061
|
+
if (date.upper_text) {
|
|
9062
|
+
const $upper_text = createSVG("text", {
|
|
9063
|
+
x: date.upper_x,
|
|
9064
|
+
y: date.upper_y,
|
|
9065
|
+
innerHTML: date.upper_text,
|
|
9066
|
+
class: "upper-text",
|
|
9067
|
+
append_to: this.layers.date,
|
|
9068
|
+
});
|
|
9069
|
+
// remove out-of-bound dates
|
|
9070
|
+
if ($upper_text.getBBox().x2 > this.layers.grid.getBBox().width) {
|
|
9071
|
+
$upper_text.remove();
|
|
9072
|
+
}
|
|
9073
|
+
}
|
|
9074
|
+
}
|
|
9075
|
+
}
|
|
9076
|
+
get_dates_to_draw() {
|
|
9077
|
+
let last_date = null;
|
|
9078
|
+
const dates = this.dates.map((date, i) => {
|
|
9079
|
+
const d = this.get_date_info(date, last_date, i);
|
|
9080
|
+
last_date = date;
|
|
9081
|
+
return d;
|
|
9082
|
+
});
|
|
9083
|
+
return dates;
|
|
9084
|
+
}
|
|
9085
|
+
get_date_info(date, last_date, i) {
|
|
9086
|
+
if (!last_date) {
|
|
9087
|
+
last_date = DateUtils.add(date, 1, "year");
|
|
9088
|
+
}
|
|
9089
|
+
const date_text = {
|
|
9090
|
+
hourLower: DateUtils.format(date, "HH:mm", this.options.language),
|
|
9091
|
+
quarterDayLower: DateUtils.format(date, "HH:mm", this.options.language),
|
|
9092
|
+
halfDayLower: DateUtils.format(date, "HH:mm", this.options.language),
|
|
9093
|
+
dayLower: date.getDate() !== last_date.getDate()
|
|
9094
|
+
? DateUtils.format(date, "D", this.options.language)
|
|
9095
|
+
: "",
|
|
9096
|
+
weekLower: date.getMonth() !== last_date.getMonth()
|
|
9097
|
+
? DateUtils.format(date, "D MMM", this.options.language)
|
|
9098
|
+
: DateUtils.format(date, "D", this.options.language),
|
|
9099
|
+
monthLower: DateUtils.format(date, "MMMM", this.options.language),
|
|
9100
|
+
yearLower: DateUtils.format(date, "YYYY", this.options.language),
|
|
9101
|
+
quarterDayUpper: date.getDate() !== last_date.getDate()
|
|
9102
|
+
? DateUtils.format(date, "D MMM", this.options.language)
|
|
9103
|
+
: "",
|
|
9104
|
+
halfDayUpper: date.getDate() !== last_date.getDate()
|
|
9105
|
+
? date.getMonth() !== last_date.getMonth()
|
|
9106
|
+
? DateUtils.format(date, "D MMM", this.options.language)
|
|
9107
|
+
: DateUtils.format(date, "D", this.options.language)
|
|
9108
|
+
: "",
|
|
9109
|
+
dayUpper: date.getMonth() !== last_date.getMonth()
|
|
9110
|
+
? DateUtils.format(date, "MMMM", this.options.language)
|
|
9111
|
+
: "",
|
|
9112
|
+
weekUpper: date.getMonth() !== last_date.getMonth()
|
|
9113
|
+
? DateUtils.format(date, "MMMM", this.options.language)
|
|
9114
|
+
: "",
|
|
9115
|
+
monthUpper: date.getFullYear() !== last_date.getFullYear()
|
|
9116
|
+
? DateUtils.format(date, "YYYY", this.options.language)
|
|
9117
|
+
: "",
|
|
9118
|
+
yearUpper: date.getFullYear() !== last_date.getFullYear()
|
|
9119
|
+
? DateUtils.format(date, "YYYY", this.options.language)
|
|
9120
|
+
: "",
|
|
9121
|
+
hour: date.getHours() !== last_date.getHours()
|
|
9122
|
+
? DateUtils.format(date, "HH:mm", this.options.language)
|
|
9123
|
+
: "",
|
|
9124
|
+
};
|
|
9125
|
+
// Descontando 20 para adcionar uma segunda linha de informação no cabeçalho
|
|
9126
|
+
const base_pos = {
|
|
9127
|
+
x: i * this.options.columnWidth,
|
|
9128
|
+
lower_y: this.options.headerHeight - 20,
|
|
9129
|
+
upper_y: this.options.headerHeight - 20 - 25,
|
|
9130
|
+
};
|
|
9131
|
+
const x_pos = {
|
|
9132
|
+
hourLower: this.options.columnWidth / 2,
|
|
9133
|
+
hourUpper: this.options.columnWidth * 24 / 2,
|
|
9134
|
+
quarterDayLower: this.options.columnWidth / 2,
|
|
9135
|
+
quarterDayUpper: this.options.columnWidth * 4 / 2,
|
|
9136
|
+
halfDayLower: this.options.columnWidth / 2,
|
|
9137
|
+
halfDayUpper: this.options.columnWidth * 2 / 2,
|
|
9138
|
+
dayLower: this.options.columnWidth / 2,
|
|
9139
|
+
dayUpper: (this.options.columnWidth * 30) / 2,
|
|
9140
|
+
weekLower: 0,
|
|
9141
|
+
weekUpper: (this.options.columnWidth * 4) / 2,
|
|
9142
|
+
monthLower: this.options.columnWidth / 2,
|
|
9143
|
+
monthUpper: (this.options.columnWidth * 12) / 2,
|
|
9144
|
+
yearLower: this.options.columnWidth / 2,
|
|
9145
|
+
yearUpper: (this.options.columnWidth * 30) / 2,
|
|
9146
|
+
};
|
|
9147
|
+
return {
|
|
9148
|
+
upper_text: date_text[`${this.options.viewMode}Upper`],
|
|
9149
|
+
lower_text: date_text[`${this.options.viewMode}Lower`],
|
|
9150
|
+
upper_x: base_pos.x + x_pos[`${this.options.viewMode}Upper`],
|
|
9151
|
+
upper_y: base_pos.upper_y,
|
|
9152
|
+
lower_x: base_pos.x + x_pos[`${this.options.viewMode}Lower`],
|
|
9153
|
+
lower_y: base_pos.lower_y,
|
|
9154
|
+
date,
|
|
9155
|
+
};
|
|
9156
|
+
}
|
|
9157
|
+
make_bars() {
|
|
9158
|
+
this.bars = this.tasks.map((task) => {
|
|
9159
|
+
const bar = new Bar(this, task);
|
|
9160
|
+
this.layers.bar.appendChild(bar.group);
|
|
9161
|
+
return bar;
|
|
9162
|
+
});
|
|
9163
|
+
}
|
|
9164
|
+
make_arrows() {
|
|
9165
|
+
this.arrows = [];
|
|
9166
|
+
for (let task of this.tasks) {
|
|
9167
|
+
let arrows = [];
|
|
9168
|
+
arrows = task.dependencies
|
|
9169
|
+
.map((task_id) => {
|
|
9170
|
+
const dependency = this.get_task(task_id);
|
|
9171
|
+
if (!dependency)
|
|
9172
|
+
return;
|
|
9173
|
+
const arrow = new Arrow(this, this.bars[dependency._index], // from_task
|
|
9174
|
+
this.bars[task._index] // to_task
|
|
9175
|
+
);
|
|
9176
|
+
this.layers.arrow.appendChild(arrow.element);
|
|
9177
|
+
return arrow;
|
|
9178
|
+
})
|
|
9179
|
+
.filter(Boolean); // filter falsy values
|
|
9180
|
+
this.arrows = this.arrows.concat(arrows);
|
|
9181
|
+
}
|
|
9182
|
+
}
|
|
9183
|
+
map_arrows_on_bars() {
|
|
9184
|
+
for (let bar of this.bars) {
|
|
9185
|
+
bar.arrows = this.arrows.filter((arrow) => {
|
|
9186
|
+
return (arrow.fromTask.task.id === bar.task.id ||
|
|
9187
|
+
arrow.toTask.task.id === bar.task.id);
|
|
9188
|
+
});
|
|
9189
|
+
}
|
|
9190
|
+
}
|
|
9191
|
+
set_width() {
|
|
9192
|
+
const cur_width = this.$svg.getBoundingClientRect().width;
|
|
9193
|
+
const actual_width = this.$svg
|
|
9194
|
+
.querySelector(".grid .grid-row")
|
|
9195
|
+
.getAttribute("width");
|
|
9196
|
+
if (cur_width < actual_width) {
|
|
9197
|
+
this.$svg.setAttribute("width", actual_width);
|
|
9198
|
+
}
|
|
9199
|
+
}
|
|
9200
|
+
set_scroll_position() {
|
|
9201
|
+
const parent_element = this.$svg.parentElement;
|
|
9202
|
+
if (!parent_element)
|
|
9203
|
+
return;
|
|
9204
|
+
const hours_before_first_task = DateUtils.diff(this.get_oldest_starting_date(), this.minDate, "hour");
|
|
9205
|
+
const scroll_pos = (hours_before_first_task / this.options.step) *
|
|
9206
|
+
this.options.columnWidth -
|
|
9207
|
+
this.options.columnWidth;
|
|
9208
|
+
parent_element.scrollLeft = scroll_pos;
|
|
9209
|
+
}
|
|
9210
|
+
bind_grid_click() {
|
|
9211
|
+
$.on(this.$svg, this.options.popupTrigger, ".grid-row, .grid-header", () => {
|
|
9212
|
+
this.unselect_all();
|
|
9213
|
+
this.hide_popup();
|
|
9214
|
+
});
|
|
9215
|
+
}
|
|
9216
|
+
bind_bar_events() {
|
|
9217
|
+
let is_dragging = false;
|
|
9218
|
+
let x_on_start = 0;
|
|
9219
|
+
let is_resizing_left = false;
|
|
9220
|
+
let is_resizing_right = false;
|
|
9221
|
+
let parent_bar_id = null;
|
|
9222
|
+
let bars = [];
|
|
9223
|
+
this.bar_being_dragged = null;
|
|
9224
|
+
function action_in_progress() {
|
|
9225
|
+
return is_dragging || is_resizing_left || is_resizing_right;
|
|
9226
|
+
}
|
|
9227
|
+
$.on(this.$svg, "mousedown", ".bar-wrapper, .handle", (e, element) => {
|
|
9228
|
+
const bar_wrapper = $.closest(".bar-wrapper", element);
|
|
9229
|
+
if (element.classList.contains("left")) {
|
|
9230
|
+
is_resizing_left = true;
|
|
9231
|
+
}
|
|
9232
|
+
else if (element.classList.contains("right")) {
|
|
9233
|
+
is_resizing_right = true;
|
|
9234
|
+
}
|
|
9235
|
+
else if (element.classList.contains("bar-wrapper")) {
|
|
9236
|
+
is_dragging = true;
|
|
9237
|
+
}
|
|
9238
|
+
bar_wrapper.classList.add("active");
|
|
9239
|
+
x_on_start = e.offsetX;
|
|
9240
|
+
parent_bar_id = bar_wrapper.getAttribute("data-id");
|
|
9241
|
+
const ids = [
|
|
9242
|
+
parent_bar_id,
|
|
9243
|
+
...this.get_all_dependent_tasks(parent_bar_id),
|
|
9244
|
+
];
|
|
9245
|
+
bars = ids.map((id) => this.get_bar(id));
|
|
9246
|
+
this.bar_being_dragged = parent_bar_id;
|
|
9247
|
+
bars.forEach((bar) => {
|
|
9248
|
+
const $bar = bar.element;
|
|
9249
|
+
$bar.ox = $bar.getX();
|
|
9250
|
+
$bar.oy = $bar.getY();
|
|
9251
|
+
$bar.owidth = $bar.getWidth();
|
|
9252
|
+
$bar.finaldx = 0;
|
|
9253
|
+
});
|
|
9254
|
+
});
|
|
9255
|
+
$.on(this.$svg, "mousemove", (e) => {
|
|
9256
|
+
if (!action_in_progress()) {
|
|
9257
|
+
return;
|
|
9258
|
+
}
|
|
9259
|
+
const dx = e.offsetX - x_on_start;
|
|
9260
|
+
bars.forEach((bar) => {
|
|
9261
|
+
const $bar = bar.element;
|
|
9262
|
+
$bar.finaldx = this.get_snap_position(dx);
|
|
9263
|
+
this.hide_popup();
|
|
9264
|
+
if (is_resizing_left) {
|
|
9265
|
+
if (parent_bar_id === bar.task.id) {
|
|
9266
|
+
bar.updateBarPosition({
|
|
9267
|
+
x: $bar.ox + $bar.finaldx,
|
|
9268
|
+
width: $bar.owidth - $bar.finaldx,
|
|
9269
|
+
});
|
|
9270
|
+
}
|
|
9271
|
+
else {
|
|
9272
|
+
bar.updateBarPosition({
|
|
9273
|
+
x: $bar.ox + $bar.finaldx,
|
|
9274
|
+
});
|
|
9275
|
+
}
|
|
9276
|
+
}
|
|
9277
|
+
else if (is_resizing_right) {
|
|
9278
|
+
if (parent_bar_id === bar.task.id) {
|
|
9279
|
+
bar.updateBarPosition({
|
|
9280
|
+
width: $bar.owidth + $bar.finaldx,
|
|
9281
|
+
});
|
|
9282
|
+
}
|
|
9283
|
+
}
|
|
9284
|
+
else if (is_dragging) {
|
|
9285
|
+
bar.updateBarPosition({ x: $bar.ox + $bar.finaldx });
|
|
9286
|
+
}
|
|
9287
|
+
});
|
|
9288
|
+
}, null);
|
|
9289
|
+
document.addEventListener("mouseup", (e) => {
|
|
9290
|
+
if (is_dragging || is_resizing_left || is_resizing_right) {
|
|
9291
|
+
bars.forEach((bar) => bar.group.classList.remove("active"));
|
|
9292
|
+
}
|
|
9293
|
+
is_dragging = false;
|
|
9294
|
+
is_resizing_left = false;
|
|
9295
|
+
is_resizing_right = false;
|
|
9296
|
+
});
|
|
9297
|
+
$.on(this.$svg, "mouseup", (e) => {
|
|
9298
|
+
this.bar_being_dragged = null;
|
|
9299
|
+
bars.forEach((bar) => {
|
|
9300
|
+
const $bar = bar.element;
|
|
9301
|
+
if (!$bar.finaldx)
|
|
9302
|
+
return;
|
|
9303
|
+
bar.dateChanged();
|
|
9304
|
+
bar.setActionCompleted();
|
|
9305
|
+
});
|
|
9306
|
+
}, null);
|
|
9307
|
+
}
|
|
9308
|
+
get_all_dependent_tasks(task_id) {
|
|
9309
|
+
let out = [];
|
|
9310
|
+
let to_process = [task_id];
|
|
9311
|
+
while (to_process.length) {
|
|
9312
|
+
const deps = to_process.reduce((acc, curr) => {
|
|
9313
|
+
acc = acc.concat(this.dependency_map[curr]);
|
|
9314
|
+
return acc;
|
|
9315
|
+
}, []);
|
|
9316
|
+
out = out.concat(deps);
|
|
9317
|
+
to_process = deps.filter((d) => !to_process.includes(d));
|
|
9318
|
+
}
|
|
9319
|
+
return out.filter(Boolean);
|
|
9320
|
+
}
|
|
9321
|
+
get_snap_position(dx) {
|
|
9322
|
+
let odx = dx, rem, position;
|
|
9323
|
+
if (this.view_is(ViewMode.Hour)) {
|
|
9324
|
+
rem = dx % (this.options.columnWidth / 6);
|
|
9325
|
+
position = odx - rem + (rem < this.options.columnWidth / 12 ? 0 : this.options.columnWidth / 6);
|
|
9326
|
+
}
|
|
9327
|
+
else if (this.view_is(ViewMode.Week)) {
|
|
9328
|
+
rem = dx % (this.options.columnWidth / 7);
|
|
9329
|
+
position = odx - rem + (rem < this.options.columnWidth / 14 ? 0 : this.options.columnWidth / 7);
|
|
9330
|
+
}
|
|
9331
|
+
else if (this.view_is(ViewMode.Month)) {
|
|
9332
|
+
rem = dx % (this.options.columnWidth / 30);
|
|
9333
|
+
position = odx - rem + (rem < this.options.columnWidth / 60 ? 0 : this.options.columnWidth / 30);
|
|
9334
|
+
}
|
|
9335
|
+
else {
|
|
9336
|
+
rem = dx % this.options.columnWidth;
|
|
9337
|
+
position = odx - rem + (rem < this.options.columnWidth / 2 ? 0 : this.options.columnWidth);
|
|
9338
|
+
}
|
|
9339
|
+
return position;
|
|
9340
|
+
}
|
|
9341
|
+
unselect_all() {
|
|
9342
|
+
[...this.$svg.querySelectorAll(".bar-wrapper")].forEach((el) => {
|
|
9343
|
+
el.classList.remove("active");
|
|
9344
|
+
});
|
|
9345
|
+
}
|
|
9346
|
+
view_is(modes) {
|
|
9347
|
+
if (Array.isArray(modes)) {
|
|
9348
|
+
return modes.some((mode) => this.options.viewMode === mode);
|
|
9349
|
+
}
|
|
9350
|
+
return this.options.viewMode === modes;
|
|
9351
|
+
}
|
|
9352
|
+
get_task(id) {
|
|
9353
|
+
return this.tasks.find((task) => {
|
|
9354
|
+
return task.id === id;
|
|
9355
|
+
});
|
|
9356
|
+
}
|
|
9357
|
+
get_bar(id) {
|
|
9358
|
+
return this.bars.find((bar) => {
|
|
9359
|
+
return bar.task.id === id;
|
|
9360
|
+
});
|
|
9361
|
+
}
|
|
9362
|
+
show_popup(options) {
|
|
9363
|
+
if (!this.popup) {
|
|
9364
|
+
this.popup = new Popup(this.popup_wrapper, this.options.customPopupHtml);
|
|
9365
|
+
}
|
|
9366
|
+
this.popup.show(options);
|
|
9367
|
+
}
|
|
9368
|
+
hide_popup() {
|
|
9369
|
+
this.popup && this.popup.hide();
|
|
9370
|
+
}
|
|
9371
|
+
trigger_event(event, args) {
|
|
9372
|
+
if (this.options[event]) {
|
|
9373
|
+
this.options[event].apply(null, args);
|
|
9374
|
+
}
|
|
9375
|
+
}
|
|
9376
|
+
get_oldest_starting_date() {
|
|
9377
|
+
return this.tasks
|
|
9378
|
+
.map((task) => task._start)
|
|
9379
|
+
.reduce((prev_date, cur_date) => cur_date <= prev_date ? cur_date : prev_date);
|
|
9380
|
+
}
|
|
9381
|
+
clear() {
|
|
9382
|
+
this.$svg.innerHTML = '';
|
|
9383
|
+
}
|
|
9384
|
+
}
|
|
9385
|
+
function generate_id(task) {
|
|
9386
|
+
return task.name + "_" + Math.random().toString(36).slice(2, 12);
|
|
9387
|
+
}
|
|
9388
|
+
|
|
9389
|
+
let GanttComponent = class GanttComponent {
|
|
9390
|
+
constructor() {
|
|
9391
|
+
this.multipleTaskPerLine = false;
|
|
9392
|
+
this.showSideTable = true;
|
|
9393
|
+
this.viewMode = ViewMode.Day;
|
|
9394
|
+
this.taskClicked = new EventEmitter();
|
|
9395
|
+
this.taskDateChanged = new EventEmitter();
|
|
9396
|
+
this.viewChanged = new EventEmitter();
|
|
9397
|
+
}
|
|
9398
|
+
ngOnInit() {
|
|
9399
|
+
this._validateViewMode();
|
|
9400
|
+
}
|
|
9401
|
+
ngAfterViewInit() {
|
|
9402
|
+
this._gantt = new Gantt("#gantt", this._filterTask(this.tasks), {
|
|
9403
|
+
viewMode: this.viewMode,
|
|
9404
|
+
marginBeforeStart: this.marginBeforeStart,
|
|
9405
|
+
marginAfterEnd: this.marginAfterEnd,
|
|
9406
|
+
language: "pt-BR",
|
|
9407
|
+
onClick: (task) => this.taskClicked.emit(task),
|
|
9408
|
+
onDateChange: (task, start, end) => this.taskDateChanged.emit({ task, start, end }),
|
|
9409
|
+
onViewChange: (viewMode) => this.viewChanged.emit(viewMode),
|
|
9410
|
+
});
|
|
9411
|
+
}
|
|
9412
|
+
ngOnChanges(changes) {
|
|
9413
|
+
if (!this._gantt) {
|
|
9414
|
+
return;
|
|
9415
|
+
}
|
|
9416
|
+
if (changes.viewMode) {
|
|
9417
|
+
this._gantt.options.viewMode = changes.viewMode.currentValue;
|
|
9418
|
+
this._gantt.change_view_mode();
|
|
9419
|
+
}
|
|
9420
|
+
if (changes.tasks) {
|
|
9421
|
+
this._gantt.refresh(this._filterTask(changes.tasks.currentValue));
|
|
9422
|
+
}
|
|
9423
|
+
}
|
|
9424
|
+
_filterTask(tasksGroups) {
|
|
9425
|
+
const tasks = [];
|
|
9426
|
+
if (this.multipleTaskPerLine) {
|
|
9427
|
+
tasksGroups.forEach((group, index) => {
|
|
9428
|
+
tasks.push(...group.tasks.map((task) => {
|
|
9429
|
+
return Object.assign(Object.assign({}, task), { _row_id: index });
|
|
9430
|
+
}));
|
|
9431
|
+
}, []);
|
|
9432
|
+
}
|
|
9433
|
+
else {
|
|
9434
|
+
let i = 0;
|
|
9435
|
+
tasksGroups.forEach((group) => {
|
|
9436
|
+
tasks.push(...group.tasks.map((task) => {
|
|
9437
|
+
return Object.assign(Object.assign({}, task), { _row_id: i++ });
|
|
9438
|
+
}));
|
|
9439
|
+
}, []);
|
|
9440
|
+
}
|
|
9441
|
+
return tasks;
|
|
9442
|
+
}
|
|
9443
|
+
_validateViewMode() {
|
|
9444
|
+
if (![
|
|
9445
|
+
ViewMode.Hour,
|
|
9446
|
+
ViewMode.QuarterDay,
|
|
9447
|
+
ViewMode.HalfDay,
|
|
9448
|
+
ViewMode.Day,
|
|
9449
|
+
ViewMode.Week,
|
|
9450
|
+
ViewMode.Month,
|
|
9451
|
+
ViewMode.Year,
|
|
9452
|
+
].includes(this.viewMode)) {
|
|
9453
|
+
throw new Error("Invalid gantt view mode");
|
|
9454
|
+
}
|
|
9455
|
+
}
|
|
9456
|
+
};
|
|
9457
|
+
__decorate([
|
|
9458
|
+
Input()
|
|
9459
|
+
], GanttComponent.prototype, "columnTitle", void 0);
|
|
9460
|
+
__decorate([
|
|
9461
|
+
Input()
|
|
9462
|
+
], GanttComponent.prototype, "multipleTaskPerLine", void 0);
|
|
9463
|
+
__decorate([
|
|
9464
|
+
Input()
|
|
9465
|
+
], GanttComponent.prototype, "showSideTable", void 0);
|
|
9466
|
+
__decorate([
|
|
9467
|
+
Input()
|
|
9468
|
+
], GanttComponent.prototype, "viewMode", void 0);
|
|
9469
|
+
__decorate([
|
|
9470
|
+
Input()
|
|
9471
|
+
], GanttComponent.prototype, "tasks", void 0);
|
|
9472
|
+
__decorate([
|
|
9473
|
+
Input()
|
|
9474
|
+
], GanttComponent.prototype, "marginBeforeStart", void 0);
|
|
9475
|
+
__decorate([
|
|
9476
|
+
Input()
|
|
9477
|
+
], GanttComponent.prototype, "marginAfterEnd", void 0);
|
|
9478
|
+
__decorate([
|
|
9479
|
+
Output()
|
|
9480
|
+
], GanttComponent.prototype, "taskClicked", void 0);
|
|
9481
|
+
__decorate([
|
|
9482
|
+
Output()
|
|
9483
|
+
], GanttComponent.prototype, "taskDateChanged", void 0);
|
|
9484
|
+
__decorate([
|
|
9485
|
+
Output()
|
|
9486
|
+
], GanttComponent.prototype, "viewChanged", void 0);
|
|
9487
|
+
GanttComponent = __decorate([
|
|
9488
|
+
Component({
|
|
9489
|
+
selector: "s-gantt",
|
|
9490
|
+
template: "<div class=\"outer\">\n <gantt-side-table\n *ngIf=\"showSideTable\"\n [tasks]=\"tasks\"\n [columnTitle]=\"columnTitle\"\n [multipleTaskPerLine]=\"multipleTaskPerLine\">\n </gantt-side-table>\n <svg id=\"gantt\"></svg>\n</div>",
|
|
9491
|
+
encapsulation: ViewEncapsulation.None,
|
|
9492
|
+
styles: [".outer{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:start;align-items:flex-start;-ms-flex-line-pack:center;align-content:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:row;flex-direction:row}", ".gantt{border:1px solid #e0e0e0}.gantt .weekend-highlight{fill:#b8c2cc;opacity:.5;stroke:#ebeff2;stroke-width:1}.gantt .grid-background{fill:none}.gantt .grid-header,.gantt .grid-row{fill:#fff}.gantt .grid-row:nth-child(even){fill:#f5f5f5}.gantt .row-line{stroke:#ebeff2}.gantt .tick{stroke:#e0e0e0;stroke-width:.2}.gantt .tick.thick{stroke-width:.4}.gantt .today-highlight{fill:#ffe979;opacity:.5}.gantt .arrow{fill:none;stroke:#666;stroke-width:1.4}.gantt .bar{opacity:.8;stroke:#8d99a6;stroke-width:0;transition:stroke-width .3s;-webkit-user-select:none;-ms-user-select:none;user-select:none}.gantt .bar-invalid{fill:transparent;stroke:#8d99a6;stroke-dasharray:5;stroke-width:1}.gantt .bar-invalid~.bar-label{fill:#555}.gantt .bar-label{fill:#fff;text-anchor:middle;font-size:12px;font-weight:lighter}.gantt .bar-label.big{fill:#555;text-anchor:start}.gantt .bar-wrapper{cursor:pointer;outline:0}.gantt .bar-wrapper.active .bar,.gantt .bar-wrapper:hover .bar{opacity:1}.gantt .bar-wrapper.active .bar{stroke:#212533;stroke-width:2}.gantt .lower-text,.gantt .upper-text{font-size:12px;text-anchor:middle}.gantt .upper-text{fill:#555}.gantt .lower-text{fill:#333}.gantt .hide{display:none}.gantt-container{border-left:1px solid #e0e0e0;font-size:12px;overflow:auto;position:relative}.gantt-container .title-1{fill:#999;font-size:12px;font-weight:400;line-height:150%;text-anchor:middle}.gantt-container .title-2{fill:#333;font-size:14px;font-weight:400;line-height:150%;text-anchor:middle}.gantt-container .popup-wrapper{left:0;position:absolute;top:0}.gantt-container .popup-wrapper .popup{background:#0e1119;border-radius:2px;color:#fff;padding:8px;font-family:\"Open Sans\" sans-serif;line-height:150%;font-weight:400}.gantt-container .popup-wrapper .popup .wrp-title{border-bottom:1px solid #525966;padding-bottom:10px}.gantt-container .popup-wrapper .popup .wrp-title .title{font-size:14px}.gantt-container .popup-wrapper .popup .wrp-subtitle{color:#dfe2e5;padding-top:10px}.gantt-container .popup-wrapper .popup .wrp-subtitle .icon{margin-right:8px}.gantt-container .popup-wrapper .popup .wrp-subtitle .subtitle{font-size:12px}.gantt-container .popup-wrapper .popup .pointer{border:6px solid transparent;border-top-color:#0e1119;height:6px;margin-left:-4px;position:absolute}"]
|
|
9493
|
+
})
|
|
9494
|
+
], GanttComponent);
|
|
9495
|
+
|
|
9496
|
+
let SideTableComponent = class SideTableComponent {
|
|
9497
|
+
constructor() {
|
|
9498
|
+
this.ROW_HEIGHT = 44;
|
|
9499
|
+
this.multipleTaskPerLine = false;
|
|
9500
|
+
}
|
|
9501
|
+
};
|
|
9502
|
+
__decorate([
|
|
9503
|
+
Input()
|
|
9504
|
+
], SideTableComponent.prototype, "columnTitle", void 0);
|
|
9505
|
+
__decorate([
|
|
9506
|
+
Input()
|
|
9507
|
+
], SideTableComponent.prototype, "tasks", void 0);
|
|
9508
|
+
__decorate([
|
|
9509
|
+
Input()
|
|
9510
|
+
], SideTableComponent.prototype, "multipleTaskPerLine", void 0);
|
|
9511
|
+
SideTableComponent = __decorate([
|
|
9512
|
+
Component({
|
|
9513
|
+
selector: 'gantt-side-table',
|
|
9514
|
+
template: "<div class=\"side-table\">\n <div class=\"column-title\">\n <span>{{ columnTitle }}</span>\n </div>\n <div class=\"tasks\">\n <div *ngFor=\"let task of tasks; let i = index\" class=\"task\" [ngStyle]=\"{'height.px': multipleTaskPerLine\n ? ROW_HEIGHT\n : ROW_HEIGHT * task.tasks.length}\">\n <div class=\"title\">\n {{ task.title }}\n </div>\n <div class=\"subtitle\">\n {{ task.subtitle }}\n </div>\n </div>\n </div>\n</div>",
|
|
9515
|
+
styles: [".side-table{background:#fff;height:100%;min-width:175px}.side-table .column-title{height:106px;border:1px solid #e0e0e0;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center;padding:8px}.side-table .column-title span{font-family:\"Open Sans\" sans-serif;font-size:14px;font-weight:700;line-height:150%}.side-table .task{-ms-flex-align:center;align-items:center;background-color:#fff;border:1px solid #e0e0e0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-family:\"Open Sans\" sans-serif;font-weight:400;-ms-flex-pack:center;justify-content:center;line-height:150%;padding:5px}.side-table .task .title{color:#333;font-size:14px}.side-table .task .subtitle{color:#999;font-size:12px}"]
|
|
9516
|
+
})
|
|
9517
|
+
], SideTableComponent);
|
|
9518
|
+
|
|
9519
|
+
let GanttModule = class GanttModule {
|
|
9520
|
+
};
|
|
9521
|
+
GanttModule = __decorate([
|
|
9522
|
+
NgModule({
|
|
9523
|
+
imports: [CommonModule],
|
|
9524
|
+
declarations: [
|
|
9525
|
+
GanttComponent,
|
|
9526
|
+
SideTableComponent,
|
|
9527
|
+
],
|
|
9528
|
+
exports: [GanttComponent],
|
|
9529
|
+
})
|
|
9530
|
+
], GanttModule);
|
|
9531
|
+
|
|
7978
9532
|
let HeaderComponent = class HeaderComponent {
|
|
7979
9533
|
};
|
|
7980
9534
|
HeaderComponent = __decorate([
|
|
@@ -8834,9 +10388,9 @@ __decorate([
|
|
|
8834
10388
|
SidebarComponent = SidebarComponent_1 = __decorate([
|
|
8835
10389
|
Component({
|
|
8836
10390
|
selector: "s-sidebar",
|
|
8837
|
-
template: "<p-sidebar
|
|
10391
|
+
template: "<p-sidebar\n [id]=\"id\"\n [visible]=\"visible\"\n (visibleChange)=\"visibleChange.emit($event)\"\n [blockScroll]=\"true\"\n [baseZIndex]=\"baseZIndex\"\n [modal]=\"true\"\n [dismissible]=\"false\"\n [showCloseIcon]=\"false\"\n position=\"right\"\n appendTo=\"body\"\n [styleClass]=\"largeSized ? 's-sidebar-panel s-sidebar-panel-lg' : 's-sidebar-panel'\"\n (onShow)=\"onShow()\"\n (onHide)=\"onHide()\">\n <div\n [id]=\"id + '-container'\"\n class=\"s-sidebar-container\">\n <a\n href=\"#\"\n role=\"button\"\n class=\"s-sidebar-close\"\n (click)=\"close($event)\">\n <span\n class=\"fa fa-times\"\n aria-hidden=\"true\">\n </span></a>\n <div\n *ngIf=\"header && !headerSection\" \n [id]=\"id + '-header'\"\n class=\"s-sidebar-header\">\n <h2 class=\"sds-panel-title s-sidebar-header__title\">{{header}}</h2>\n </div>\n <div\n *ngIf=\"headerSection\" \n [id]=\"id + '-header'\"\n class=\"s-sidebar-header\">\n <ng-content select=\"s-header\"></ng-content>\n </div>\n <p-scrollPanel\n [id]=\"id + '-content-container'\"\n class=\"s-sidebar-content-container\"\n styleClass=\"s-sidebar-content\">\n <ng-content></ng-content>\n </p-scrollPanel>\n <div\n *ngIf=\"footerSection\"\n [id]=\"id + '-footer'\"\n class=\"s-sidebar-footer\">\n <ng-content select=\"s-footer\"></ng-content>\n </div>\n </div>\n</p-sidebar>\n",
|
|
8838
10392
|
encapsulation: ViewEncapsulation.None,
|
|
8839
|
-
styles: [".ui-overflow-hidden-sidebar{overflow:hidden}body .ui-sidebar.s-sidebar-panel{width:50%;padding:0}@media (max-width:767px){body .ui-sidebar.s-sidebar-panel{width:100%}}@media (min-width:768px){body .ui-sidebar.s-sidebar-panel{width:75%}}@media (min-width:992px){body .ui-sidebar.s-sidebar-panel{width:50%}body .ui-sidebar.s-sidebar-panel.s-sidebar-panel-lg{width:75%}}body .ui-sidebar.s-sidebar-panel .s-sidebar-container{height:100%;width:100%;padding:20px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column}body .ui-sidebar.s-sidebar-panel .s-sidebar-close{position:absolute;right:20px;top:20px;color:#333}body .ui-sidebar.s-sidebar-panel .s-sidebar-header{border-bottom:1px solid #ccc;padding-bottom:15px;padding-right:20px;margin-bottom:15px;-ms-flex-negative:0;flex-shrink:0}body .ui-sidebar.s-sidebar-panel .s-sidebar-content-container{-ms-flex:1;flex:1;overflow:hidden}body .ui-sidebar.s-sidebar-panel .s-sidebar-content{height:100%}body .ui-sidebar.s-sidebar-panel .s-sidebar-footer{border-top:1px solid #ccc;padding-top:15px;margin-top:15px;-ms-flex-negative:0;flex-shrink:0}body .ui-sidebar.s-sidebar-panel p-scrollpanel{padding-top:30px}body .ui-sidebar.s-sidebar-panel .s-sidebar-header+p-scrollpanel{padding-top:0}p-scrollPanel{display:block}"]
|
|
10393
|
+
styles: [".ui-overflow-hidden-sidebar{overflow:hidden}body .ui-sidebar.s-sidebar-panel{width:50%;padding:0}@media (max-width:767px){body .ui-sidebar.s-sidebar-panel{width:100%}}@media (min-width:768px){body .ui-sidebar.s-sidebar-panel{width:75%}}@media (min-width:992px){body .ui-sidebar.s-sidebar-panel{width:50%}body .ui-sidebar.s-sidebar-panel.s-sidebar-panel-lg{width:75%}}body .ui-sidebar.s-sidebar-panel .s-sidebar-container{height:100%;width:100%;padding:20px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column}body .ui-sidebar.s-sidebar-panel .s-sidebar-close{position:absolute;right:20px;top:20px;color:#333}body .ui-sidebar.s-sidebar-panel .s-sidebar-header{border-bottom:1px solid #ccc;padding-bottom:15px;padding-right:20px;margin-bottom:15px;-ms-flex-negative:0;flex-shrink:0}body .ui-sidebar.s-sidebar-panel .s-sidebar-content-container{-ms-flex:1;flex:1;overflow:hidden}body .ui-sidebar.s-sidebar-panel .s-sidebar-content{height:100%}body .ui-sidebar.s-sidebar-panel .s-sidebar-footer{border-top:1px solid #ccc;padding-top:15px;margin-top:15px;-ms-flex-negative:0;flex-shrink:0}body .ui-sidebar.s-sidebar-panel p-scrollpanel{padding-top:30px}body .ui-sidebar.s-sidebar-panel .s-sidebar-header+p-scrollpanel{padding-top:0}p-scrollPanel{display:block}.s-sidebar-header__title{font-weight:400}"]
|
|
8840
10394
|
})
|
|
8841
10395
|
], SidebarComponent);
|
|
8842
10396
|
|
|
@@ -10785,7 +12339,7 @@ function getCompletionResults(context) {
|
|
|
10785
12339
|
startCompletionResultsSearch(context);
|
|
10786
12340
|
}
|
|
10787
12341
|
let cancelLastCompletionSearch = () => { };
|
|
10788
|
-
const ɵ0 = cancelLastCompletionSearch;
|
|
12342
|
+
const ɵ0$1 = cancelLastCompletionSearch;
|
|
10789
12343
|
let codeMirrorViewElement;
|
|
10790
12344
|
/*
|
|
10791
12345
|
* Starts a new completionResults's async search.
|
|
@@ -11998,5 +13552,5 @@ const fallback = {
|
|
|
11998
13552
|
* Generated bundle index. Do not edit.
|
|
11999
13553
|
*/
|
|
12000
13554
|
|
|
12001
|
-
export { AccordionComponent, AccordionModule, AccordionPanelComponent, AngularComponentsModule, AutocompleteField, BadgeColors, BadgeComponent, BadgeModule, BaseFieldComponent, BignumberField, BignumberInputDirective, BignumberInputModule, BooleanField, BooleanOptionsLabel, BreadcrumbComponent, BreadcrumbModule, Breakpoints, ButtonComponent, ButtonModule, ButtonPriority, ButtonSize, CalendarField, CalendarLocaleOptions, CalendarMaskDirective, CalendarMaskModule, ChipsField, CodeEditorModule, CollapseLinkComponent, CollapseLinkModule, ControlErrorsComponent, ControlErrorsModule, CountryPhonePickerComponent, CountryPhonePickerModule, CurrencyField, CustomFieldsComponent, CustomFieldsModule, CustomFieldsService, DEFAULT_CALENDAR_LOCALE_OPTIONS, DEFAULT_LOCALE_OPTIONS, DEFAULT_NUMBER_LOCALE_OPTIONS, DebounceUtils, DoubleClickDirective, DynamicConfig, DynamicFormComponent, DynamicFormModule, DynamicType, EditableOverlayDirective, EditableOverlayModule, EmptyStateComponent, EmptyStateModule, EnumBadgeColors, EnumColumnFieldType, EnumSeverity, ExportUtils, Field, FieldType, Fieldset, FileUploadComponent, FileUploadModule, FileValidation, FormField, GlobalSearchComponent, GlobalSearchDropdownItemComponent, GlobalSearchModule, GlobalSearchSizeEnum, HostProjectConfigsInjectionToken, ImageCropperComponent, ImageCropperModule, ImageCropperService, InfoSignDirective, InfoSignModule, Languages, LoadingStateComponent, LoadingStateDirective, LoadingStateModule, LocaleModule, LocaleOptions, LocaleService, LocalizedCurrencyPipe, LocalizedCurrencyPipeOptions, LocalizedDateImpurePipe, LocalizedDatePipe, LocalizedNumberInputDirective, LocalizedNumberInputModule, LocalizedNumberPipe, LocalizedTimeImpurePipe, LocalizedTimePipe, LongPressDirective, LookupComponent, LookupField, MaskFormatterModule, MaskFormatterPipe, MouseEventsModule, NavigationDirective, NumberAlignmentOption, NumberField, NumberInputDirective, NumberInputModule, NumberLocaleOptions, ObjectCardComponent, ObjectCardFieldComponent, ObjectCardMainComponent, ObjectCardModule, Option, Ordination, PanelComponent, PanelModule, PasswordField, PasswordStrengthComponent, PasswordStrengthDirective, PasswordStrengthModule, PasswordStrengthPositions, PasswordStrengths, ProductHeaderComponent, ProductHeaderModule, ProfilePicturePickerComponent, ProfilePicturePickerModule, ProgressBarColors, ProgressBarComponent, ProgressBarModule, RadioButtonField, RatingScaleComponent, RatingScaleModule, RationButtonOption, RowTogllerDirective, Section, SelectField, SelectOption, SidebarComponent, SidebarModule, SlidePanelComponent, SlidePanelModule, SplitButtonComponent, SplitButtonModule, SplitButtonType, StatsCardComponent, StatsCardModule, StepState, StepsComponent, StepsModule, Structure, TableFrozenPositionDirective, TableHeaderCheckboxComponent, TableHeaderCheckboxModule, TableModule, TaxCalculationLanguageConfigs, TextAreaField, TextField, Themes, ThumbnailComponent, ThumbnailModule, ThumbnailSize, TileComponent, TileModule, TimelineComponent, TimelineItem, TimelineItemSeverity, TimelineItemSize, TimelineModule, TokenListComponent, TokenListModule, TooltipModule, TooltipPosition, ValidateErrors, WorkspaceSwitchComponent, WorkspaceSwitchModule, countries, fallback, TooltipComponent as ɵa, TooltipDirective as ɵb, SelectFieldComponent as ɵba, TextAreaFieldComponent as ɵbb, TextFieldComponent as ɵbc, BooleanSwitchFieldComponent as ɵbd, PasswordFieldComponent as ɵbe, SliderFieldComponent as ɵbf, DecimalField as ɵbh,
|
|
13555
|
+
export { AccordionComponent, AccordionModule, AccordionPanelComponent, AngularComponentsModule, AutocompleteField, BadgeColors, BadgeComponent, BadgeModule, BaseFieldComponent, BignumberField, BignumberInputDirective, BignumberInputModule, BooleanField, BooleanOptionsLabel, BreadcrumbComponent, BreadcrumbModule, Breakpoints, ButtonComponent, ButtonModule, ButtonPriority, ButtonSize, CalendarField, CalendarLocaleOptions, CalendarMaskDirective, CalendarMaskModule, ChipsField, CodeEditorModule, CollapseLinkComponent, CollapseLinkModule, ControlErrorsComponent, ControlErrorsModule, CountryPhonePickerComponent, CountryPhonePickerModule, CurrencyField, CustomFieldsComponent, CustomFieldsModule, CustomFieldsService, DEFAULT_CALENDAR_LOCALE_OPTIONS, DEFAULT_LOCALE_OPTIONS, DEFAULT_NUMBER_LOCALE_OPTIONS, DebounceUtils, DoubleClickDirective, DynamicConfig, DynamicFormComponent, DynamicFormModule, DynamicType, EditableOverlayDirective, EditableOverlayModule, EmptyStateComponent, EmptyStateModule, EnumBadgeColors, EnumColumnFieldType, EnumSeverity, ExportUtils, Field, FieldType, Fieldset, FileUploadComponent, FileUploadModule, FileValidation, FormField, GanttComponent, GanttModule, GlobalSearchComponent, GlobalSearchDropdownItemComponent, GlobalSearchModule, GlobalSearchSizeEnum, HostProjectConfigsInjectionToken, ImageCropperComponent, ImageCropperModule, ImageCropperService, InfoSignDirective, InfoSignModule, Languages, LoadingStateComponent, LoadingStateDirective, LoadingStateModule, LocaleModule, LocaleOptions, LocaleService, LocalizedCurrencyPipe, LocalizedCurrencyPipeOptions, LocalizedDateImpurePipe, LocalizedDatePipe, LocalizedNumberInputDirective, LocalizedNumberInputModule, LocalizedNumberPipe, LocalizedTimeImpurePipe, LocalizedTimePipe, LongPressDirective, LookupComponent, LookupField, MaskFormatterModule, MaskFormatterPipe, MouseEventsModule, NavigationDirective, NumberAlignmentOption, NumberField, NumberInputDirective, NumberInputModule, NumberLocaleOptions, ObjectCardComponent, ObjectCardFieldComponent, ObjectCardMainComponent, ObjectCardModule, Option, Ordination, PanelComponent, PanelModule, PasswordField, PasswordStrengthComponent, PasswordStrengthDirective, PasswordStrengthModule, PasswordStrengthPositions, PasswordStrengths, ProductHeaderComponent, ProductHeaderModule, ProfilePicturePickerComponent, ProfilePicturePickerModule, ProgressBarColors, ProgressBarComponent, ProgressBarModule, RadioButtonField, RatingScaleComponent, RatingScaleModule, RationButtonOption, RowTogllerDirective, Section, SelectField, SelectOption, SidebarComponent, SidebarModule, SlidePanelComponent, SlidePanelModule, SplitButtonComponent, SplitButtonModule, SplitButtonType, StatsCardComponent, StatsCardModule, StepState, StepsComponent, StepsModule, Structure, TableFrozenPositionDirective, TableHeaderCheckboxComponent, TableHeaderCheckboxModule, TableModule, TaxCalculationLanguageConfigs, TextAreaField, TextField, Themes, ThumbnailComponent, ThumbnailModule, ThumbnailSize, TileComponent, TileModule, TimelineComponent, TimelineItem, TimelineItemSeverity, TimelineItemSize, TimelineModule, TokenListComponent, TokenListModule, TooltipModule, TooltipPosition, ValidateErrors, ViewMode, WorkspaceSwitchComponent, WorkspaceSwitchModule, countries, fallback, TooltipComponent as ɵa, TooltipDirective as ɵb, SelectFieldComponent as ɵba, TextAreaFieldComponent as ɵbb, TextFieldComponent as ɵbc, BooleanSwitchFieldComponent as ɵbd, PasswordFieldComponent as ɵbe, SliderFieldComponent as ɵbf, DecimalField as ɵbh, SideTableComponent as ɵbi, StructureModule as ɵbj, HeaderComponent as ɵbk, FooterComponent as ɵbl, NumberLocaleOptions as ɵbm, ThumbnailService as ɵbn, BorderButtonModule as ɵbo, BorderButtonComponent as ɵbp, TimelineItemModule as ɵbq, TimelineIconItemComponent as ɵbr, HorizontalTimelineModule as ɵbs, HorizontalTimelineComponent as ɵbt, VerticalTimelineModule as ɵbu, VerticalTimelineComponent as ɵbv, RangeLineComponent as ɵbw, CollapseOptionComponent as ɵbx, CollapsedItemsComponent as ɵby, VerticalItemsComponent as ɵbz, CountryPhonePickerService as ɵc, InfiniteScrollModule as ɵca, InfiniteScrollDirective as ɵcb, CustomTranslationsModule as ɵcc, CodeEditorComponent as ɵcd, CoreFacade as ɵce, CodeMirror6Core as ɵcf, LocalizedCurrencyImpurePipe as ɵd, LocalizedBignumberPipe as ɵe, LocalizedBignumberImpurePipe as ɵf, EmptyStateGoBackComponent as ɵg, FileUploadService as ɵh, InfoSignComponent as ɵi, TableColumnsComponent as ɵj, TablePagingComponent as ɵk, AutocompleteFieldComponent as ɵl, BooleanFieldComponent as ɵm, CalendarFieldComponent as ɵn, ChipsFieldComponent as ɵo, CurrencyFieldComponent as ɵp, DynamicFieldComponent as ɵq, DynamicFormDirective as ɵr, FieldsetComponent as ɵs, FileUploadComponent$1 as ɵt, LookupFieldComponent as ɵu, NumberFieldComponent as ɵv, BignumberFieldComponent as ɵw, RadioButtonComponent as ɵx, RowComponent as ɵy, SectionComponent as ɵz };
|
|
12002
13556
|
//# sourceMappingURL=seniorsistemas-angular-components.js.map
|