mirrors/vue-ganttastic
2
0
Fork 0
mirror of https://github.com/tenrok/vue-ganttastic.git synced 2026-06-20 06:00:33 +03:00
Code Activity

feat: added property "bar-config-key"

Browse Source
This commit is contained in:
Сергей Солодягин
2021-10-27 14:48:18 +03:00
parent 013eeeee3c
commit e1d411e7cd
5 changed files with 66 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+23 -22
View File
@@ -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<String>` | `[]` | format of day `YYYY-MM-DD` |
| highlighted-hours | `Array<Number>` | `[]` | |
| 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<String>` | `[]` | format of day `YYYY-MM-DD` |
| highlighted-hours | `Array<Number>` | `[]` | |
| 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
lib/components/GGanttBar.vue
+13 -8
View File
@@ -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
}
lib/components/GGanttChart.vue
+4 -1
View File
@@ -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
}
lib/components/GGanttRow.vue
+9 -5
View File
@@ -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(
src/App.vue
+17 -16
View File
@@ -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,