diff --git a/README.md b/README.md index 90def7b..3a19e25 100644 --- a/README.md +++ b/README.md @@ -117,28 +117,29 @@ The following code showcases a simple usage example in a .vue SFC (Single File C ## Props -| Prop | Type | Default | Description | -| ------------------------ | --------------- | --------- | ------------------------------------------------------------------- | -| bar-start-key | `String` | `start` | property name of the bar objects that represents the start datetime | -| bar-end-key | `String` | `end` | property name of the bar objects that represents the end datetime | -| chart-start (_required_) | `String` | - | format `YYYY-MM-DD HH:mm` | -| chart-end (_required_) | `String` | - | format `YYYY-MM-DD HH:mm` | -| grid | `Boolean` | `false` | hide/show grid | -| grid-size | `Number` | `30` | horizontal cell width in pixels | -| height | `String` | - | the total height of the entire ganttastic component | -| hide-timeaxis | `Boolean` | `false` | hide timeaxis | -| highlighted-days | `Array` | `[]` | format of day `YYYY-MM-DD` | -| highlighted-hours | `Array` | `[]` | | -| is-magnetic | `Boolean` | - | magnetic effect | -| locale | `String` | `en` | localization | -| may-add | `Boolean` | `true` | add new bar on double click | -| precision | `String` | `month` | day, month | -| push-on-overlap | `Boolean` | - | | -| row-height | `Number` | `40` | | -| row-label-width | `Number` | `200` | label width in pixels | -| snap-back-on-overlap | `Boolean` | - | | -| theme | `String` | `default` | | -| width | `String` | `100%` | the total width of the entire ganttastic component | +| Prop | Type | Default | Description | +| ------------------------ | --------------- | ---------------- | ------------------------------------------------------------------- | +| bar-config-key | `String` | `ganttBarConfig` | | +| bar-start-key | `String` | `start` | property name of the bar objects that represents the start datetime | +| bar-end-key | `String` | `end` | property name of the bar objects that represents the end datetime | +| chart-start (_required_) | `String` | - | format `YYYY-MM-DD HH:mm` | +| chart-end (_required_) | `String` | - | format `YYYY-MM-DD HH:mm` | +| grid | `Boolean` | `false` | hide/show grid | +| grid-size | `Number` | `30` | horizontal cell width in pixels | +| height | `String` | - | the total height of the entire Vue-Ganttastic component | +| hide-timeaxis | `Boolean` | `false` | hide timeaxis | +| highlighted-days | `Array` | `[]` | format of day `YYYY-MM-DD` | +| highlighted-hours | `Array` | `[]` | | +| is-magnetic | `Boolean` | - | magnetic effect | +| locale | `String` | `en` | localization | +| may-add | `Boolean` | `true` | add new bar on double click | +| precision | `String` | `month` | day, month | +| push-on-overlap | `Boolean` | - | | +| row-height | `Number` | `40` | | +| row-label-width | `Number` | `200` | label width in pixels | +| snap-back-on-overlap | `Boolean` | - | | +| theme | `String` | `default` | | +| width | `String` | `100%` | the total width of the entire Vue-Ganttastic component | ## Contributing diff --git a/lib/components/GGanttBar.vue b/lib/components/GGanttBar.vue index 7d1b40a..b6a1fed 100644 --- a/lib/components/GGanttBar.vue +++ b/lib/components/GGanttBar.vue @@ -102,6 +102,10 @@ export default { : 'DD.MM.YYYY HH:mm' }, + barConfigKey() { + return this.chartProps.barConfigKey + }, + barStartKey() { return this.chartProps.barStartKey }, @@ -154,16 +158,16 @@ export default { }, barConfig() { - if (this.bar.ganttBarConfig) { + if (this.bar[this.barConfigKey]) { return { - ...this.bar.ganttBarConfig, - background: this.bar.ganttBarConfig.isShadow + ...this.bar[this.barConfigKey], + background: this.bar[this.barConfigKey].isShadow ? 'grey' - : this.bar.ganttBarConfig.background || - this.bar.ganttBarConfig.backgroundColor, - opacity: this.bar.ganttBarConfig.isShadow + : this.bar[this.barConfigKey].background || + this.bar[this.barConfigKey].backgroundColor, + opacity: this.bar[this.barConfigKey].isShadow ? '0.3' - : this.bar.ganttBarConfig.opacity + : this.bar[this.barConfigKey].opacity } } return {} @@ -513,7 +517,8 @@ export default { let overlapBar = this.allBarsInRow.find(otherBar => { if ( otherBar === bar || - otherBar.ganttBarConfig.pushOnOverlap === false + (otherBar[this.barConfigKey] && + otherBar[this.barConfigKey].pushOnOverlap === false) ) { return false } diff --git a/lib/components/GGanttChart.vue b/lib/components/GGanttChart.vue index 6d55b1f..0e2b924 100644 --- a/lib/components/GGanttChart.vue +++ b/lib/components/GGanttChart.vue @@ -73,6 +73,7 @@ export default { minGapBetweenBars: { type: Number, default: 0 }, defaultBarLength: { type: Number, default: 1 }, precision: { type: String, default: 'month' }, // 'month', 'day' + barConfigKey: { type: String, default: 'ganttBarConfig' }, barStartKey: { type: String, default: 'start' }, // property name of the bar objects that represents the start datetime barEndKey: { type: String, default: 'end' }, // property name of the bar objects that represents the end datetime mayAdd: { type: Boolean, default: true } @@ -152,7 +153,9 @@ export default { moveBarsFromBundleOfPushedBar(pushedBar, minuteDiff, overlapType) { this.movedBarsInDrag.add(pushedBar) - let bundleId = pushedBar.ganttBarConfig.bundle + let bundleId = pushedBar[this.barConfigKey] + ? pushedBar[this.barConfigKey].bundle + : null if (bundleId === undefined || bundleId === null) { return } diff --git a/lib/components/GGanttRow.vue b/lib/components/GGanttRow.vue index 9f784da..9560659 100644 --- a/lib/components/GGanttRow.vue +++ b/lib/components/GGanttRow.vue @@ -80,6 +80,14 @@ export default { return this.getChartProps() }, + chartStart() { + return this.chartProps.chartStart + }, + + barConfigKey() { + return this.chartProps.barConfigKey + }, + timeUnit() { return this.getTimeUnit() }, @@ -92,10 +100,6 @@ export default { return this.getTimeCount() }, - chartStart() { - return this.chartProps.chartStart - }, - rowLabelStyle() { return { width: `${this.chartProps.rowLabelWidth}px`, @@ -175,7 +179,7 @@ export default { .add(this.defaultBarLength, this.timeUnit) .format() - bar.ganttBarConfig = { handles: true } + bar[this.barConfigKey] = { handles: true } this.bars.push(bar) this.bars.sort((first, second) => moment(first[this.chartProps.barStartKey]).diff( diff --git a/src/App.vue b/src/App.vue index 4ccab73..adbc2fe 100644 --- a/src/App.vue +++ b/src/App.vue @@ -15,7 +15,8 @@ :highlighted-hours="chart1.highlightedHours" :row-label-width="chart1.rowLabelWidth" :row-height="chart1.rowHeight" - :theme="chart1.selectedTheme" + :theme="chart1.theme" + bar-config-key="config" bar-start-key="myStart" bar-end-key="myEnd" @dragend-bar="onDragend($event)" @@ -48,7 +49,7 @@ :highlighted-days="chart2.highlightedDays" :row-label-width="chart2.rowLabelWidth" :row-height="chart2.rowHeight" - :theme="chart2.selectedTheme" + :theme="chart2.theme" :width="chart2.width" :height="chart2.height" :may-add="chart2.mayAdd" @@ -84,7 +85,7 @@ export default { hideTimeaxis: false, highlightOnHover: true, highlightedHours: [10, 12], - selectedTheme: 'default', // 'default', 'vue', 'dark', 'material-blue', 'creamy', 'slumber', 'sky', 'crimson', 'grove', 'fuchsia', 'flare' + theme: 'default', // 'default', 'vue', 'dark', 'material-blue', 'creamy', 'slumber', 'sky', 'crimson', 'grove', 'fuchsia', 'flare' rows: [ { label: 'Row #1', @@ -94,7 +95,7 @@ export default { myEnd: '2020-03-03 23:00', label: 'Immobile', tooltip: 'Bar tooltip', - ganttBarConfig: { + config: { color: 'white', backgroundColor: '#404040', opacity: 0.5, @@ -106,7 +107,7 @@ export default { myEnd: '2020-03-03 15:00', label: 'Bar', tooltip: 'Bar tooltip', - ganttBarConfig: { + config: { color: 'white', backgroundColor: '#2e74a3', bundle: 'blueBundle' @@ -122,7 +123,7 @@ export default { myEnd: '2020-03-02 18:00', label: 'Bar', tooltip: 'Bar tooltip', - ganttBarConfig: { + config: { color: 'white', backgroundColor: '#de3b26', bundle: 'redBundle' @@ -133,7 +134,7 @@ export default { myEnd: '2020-03-03 15:00', label: 'We belong together ^', tooltip: 'Bar tooltip', - ganttBarConfig: { + config: { color: 'white', backgroundColor: '#2e74a3', bundle: 'blueBundle' @@ -144,7 +145,7 @@ export default { myEnd: '2020-03-03 22:00', label: 'Bar', tooltip: 'Bar tooltip', - ganttBarConfig: { color: 'white', backgroundColor: '#aa34a3' } + config: { color: 'white', backgroundColor: '#aa34a3' } } ] }, @@ -156,7 +157,7 @@ export default { myEnd: '2020-03-02 18:00', label: 'We belong together ^', tooltip: 'Bar tooltip', - ganttBarConfig: { + config: { color: 'white', backgroundColor: '#de3b26', bundle: 'redBundle' @@ -167,7 +168,7 @@ export default { myEnd: '2020-03-03 05:00', label: 'With handles!', tooltip: 'Bar tooltip', - ganttBarConfig: { + config: { color: 'white', backgroundColor: '#a23def', handles: true @@ -178,7 +179,7 @@ export default { myEnd: '2020-03-02 07:00', label: 'Bar', tooltip: 'Bar tooltip', - ganttBarConfig: { + config: { color: 'white', backgroundColor: '#5effad', pushOnOverlap: false, @@ -190,7 +191,7 @@ export default { myEnd: '2020-03-03 20:00', label: 'Woooow!', tooltip: 'Bar tooltip', - ganttBarConfig: { + config: { color: 'white', background: 'repeating-linear-gradient(45deg,#de7359,#de7359 10px,#ffc803 10px,#ffc803 20px)' @@ -206,7 +207,7 @@ export default { myEnd: '2020-03-03 20:00', label: 'Bar', tooltip: 'Bar tooltip', - ganttBarConfig: { + config: { color: 'white', backgroundColor: '#d18aaf', handles: true @@ -217,7 +218,7 @@ export default { myEnd: '2020-03-03 01:00', label: 'Rectangular', tooltip: 'Bar tooltip', - ganttBarConfig: { + config: { color: 'white', backgroundColor: '#f2840f', borderRadius: 0 @@ -231,7 +232,7 @@ export default { chartStart: '2020-03-01 00:00', chartEnd: '2020-04-01 00:00', precision: 'month', - pushOnOverlap: true, + pushOnOverlap: false, isMagnetic: true, grid: true, gridSize: 50, @@ -246,7 +247,7 @@ export default { '2020-03-22', '2020-03-29' ], - selectedTheme: 'vue', // 'default', 'vue', 'dark', 'material-blue', 'creamy', 'slumber', 'sky', 'crimson', 'grove', 'fuchsia', 'flare' + theme: 'vue', // 'default', 'vue', 'dark', 'material-blue', 'creamy', 'slumber', 'sky', 'crimson', 'grove', 'fuchsia', 'flare' width: '1100px', height: '250px', mayAdd: false,