While using Vue Rangedate Picker I hit a roadblock trying to configure the prop Initial Range (the initial range that the component spits before the user even select any other range).
Have managed to setup other props like "caption" and "preset ranges" but the initRange is complaining about it not being an Object and being a function.
On my template:
<date-picker v-bind="datePicker" initRange="datePicker.presetRanges.last7Days" #selected="onDateSelected" i18n="EN" ></date-picker>
On my data:
datePicker: {
initRange: {
start: '1505862000000',
end: '1505872000000'
},
captions: {
title: 'Choose Date/Period',
ok_button: 'Apply'
},
presetRanges: {
today: function () {
const n = new Date()
const startToday = new Date(n.getFullYear(), n.getMonth(), n.getDate() + 1, 0, 0)
const endToday = new Date(n.getFullYear(), n.getMonth(), n.getDate() + 1, 23, 59)
return {
label: 'Today',
active: false,
dateRange: {
start: startToday,
end: endToday
}
}
},
last7Days: function () {
const n = new Date()
const weekAgo = new Date(n.getFullYear(), n.getMonth(), n.getDate() - 7, 24, 0)
const endToday = new Date(n.getFullYear(), n.getMonth(), n.getDate() + 1, 0, 0)
return {
label: 'Last 7 Days',
active: 'false',
dateRange: {start: weekAgo, end: endToday}
}
},
On my methods:
methods: {
onDateSelected: function (daterange) {
let that = this;
that.selectedDate = daterange;
let UnixStart = Math.round((Date.parse(that.selectedDate.start)));
let UnixEnd = Math.round((Date.parse(that.selectedDate.end)));
},
How can I solve this?
https://github.com/bliblidotcom/vue-rangedate-picker/issues/71
I leave the comments with this link. you will find it. should work for you.
Related
Ihave datepicker using Vue2-Datepicker this is my component looks like
<date-picker
v-model="closingRange"
range
valueType="format"
:default-value="new Date()"
:disabled-date="disabledBefore"
></date-picker>
and called Methods disbaledBefore
disabledBefore(date) {
let dayBefore = this.$moment(this.firstDateIfNull).format(
"YYYY-MM-DD"
);
const beforeToday = new Date(dayBefore);
beforeToday.setHours(0, 0, 0, 0);
return date < beforeToday; // Assume < 25 May Not Selected
}
how to auto select 26 May on start date of data range and cannot change. so user just can change end date.
just like this:
<date-picker
v-model="closingRange"
range
valueType="format"
:default-value="new Date()"
:disabled-date="disabledBefore"
:min-date="minDate"
></date-picker>
<script>
import { formatDate } from "#/utils/date";
export default {
name: "index",
props: {
label: String,
value: [String, Object, Date, Number],
minDate: {
type: [String, Date, Number],
default: () => {
return new Date(1970, 1, 1);
},
},
},
data() {
return {};
},
methods: {},
};
</script>
I've tried drag and drop using dragAndDrop & performAction, but none of them working for Vue.Draggable web app (e.g. vuedraggable: Two Lists).
Can anyone share a solution if possible?
Sample Code:
it('should demonstrate the dragAndDrop command', () => {
browser.url('https://sortablejs.github.io/Vue.Draggable/#/two-lists')
const elem = $('#two-lists .row div:nth-child(1) div.list-group div.list-group-item:nth-child(1)')
const target = $('#two-lists .row div:nth-child(2) div.list-group')
elem.dragAndDrop(target)
browser.pause(5000)
})
Built-in dragAndDrop function won't work because of very custom implementation of drag n drop in vuedraggable.
The only option would be to either fully or partially replace it with js.
Here you go
it('should demonstrate the dragAndDrop command', () => {
browser.url('https://sortablejs.github.io/Vue.Draggable/#/two-lists')
const listFrom = $('#two-lists .col-3:nth-child(1) .list-group')
const listTo = $('#two-lists .col-3:nth-child(2) .list-group')
const draggable = listFrom.$('.list-group-item')
const target = listTo.$('.list-group-item')
target.waitForClickable()
// before 4 in left and 3 in right list
expect(listFrom).toHaveChildren(4)
expect(listTo).toHaveChildren(3)
// start dragging
browser.performActions([
{
type: 'pointer',
id: 'finger1',
parameters: { pointerType: 'mouse' },
actions: [
{ type: 'pointerMove', origin: draggable, x: 0, y: 0 },
{ type: 'pointerDown', button: 0 },
{ type: 'pointerMove', origin: 'pointer', x: 5, y: 5, duration: 5 },
],
},
])
// emulate drop with js
browser.execute(
function (elemDrag, elemDrop) {
const pos = elemDrop.getBoundingClientRect()
const center2X = Math.floor((pos.left + pos.right) / 2)
const center2Y = Math.floor((pos.top + pos.bottom) / 2)
function fireMouseEvent(type, relatedTarget, clientX, clientY) {
const evt = new MouseEvent(type, { clientX, clientY, relatedTarget, bubbles: true })
relatedTarget.dispatchEvent(evt)
}
fireMouseEvent('dragover', elemDrop, center2X, center2Y)
fireMouseEvent('dragend', elemDrag, center2X, center2Y)
fireMouseEvent('mouseup', elemDrag, center2X, center2Y)
},
draggable,
target
)
// after 3 in left and 4 in right list
expect(listFrom).toHaveChildren(3)
expect(listTo).toHaveChildren(4)
browser.pause(2000) // demo
})
See also https://ghostinspector.com/blog/simulate-drag-and-drop-javascript-casperjs/
I have asked a similar question about this before, but now the main problem has changed:
I have an ion-picker with two rows, and the values of the 2nd row change completely depending on what you choose in the 1st row. Now I can change the values that are received when an option is selected, but the picker doesn't update, so even though other values are being used, the old ones are still being displayed, and that's a pretty big problem.
In the answer I received in the earlier question, I was told that there's a function called forceUpdate(), but when I tried it, it changed nothing.
I was told that this could still be in development and maybe even get removed in the near future, but I need to know if there's a way to update the ion-picker now or not.
Here's the code for the ion-picker:
async showJetPicker(id) {
if (this.disabledis[id - 6] !== true) {
const opts: PickerOptions = {
cssClass: 'academy-picker',
buttons: [
...
],
columns: [
{
name: '1st row',
options: this.convertColumns(this.pickerbois[id].options[0])
},
{
name: '2nd row',
options: this.convertColumns(this.pickerbois[id].options[1])
}
]
};
const picker = await this.pickerCtrl.create(opts);
picker.addEventListener('ionPickerColChange', async (event: any) => {
const data = event.detail;
const colSelectedIndex = data.selectedIndex;
const colOptions = data.options;
if (colSelectedIndex < 2) {
picker.columns[1].options = this.convertColumns(this.pickerbois[id].options[colSelectedIndex + 1]);
picker.forceUpdate(); //Here it should update the picker
}
});
this.picker_cancer = picker;
picker.present();
}
}
please try below, which fixed mine.
async showJetPicker(id) {
if (this.disabledis[id - 6] !== true) {
const opts: PickerOptions = {
cssClass: 'academy-picker',
buttons: [
...
],
columns: [
{
name: '1st row',
options: this.convertColumns(this.pickerbois[id].options[0])
},
{
name: '2nd row',
options: this.convertColumns(this.pickerbois[id].options[1])
}
]
};
const picker = await this.pickerCtrl.create(opts);
picker.addEventListener('ionPickerColChange', async (event: any) => {
const data = event.detail;
const colSelectedIndex = data.selectedIndex;
const colOptions = data.options;
let temColumns;
if (colSelectedIndex < 2) {
//picker.columns[1].options = this.convertColumns(this.pickerbois[id].options[colSelectedIndex + 1]);
//picker.columns[1].options = this.convertColumns(this.pickerbois[id].options[colSelectedIndex + 1]);
temColumns = this.convertColumns(this.pickerbois[id].options[colSelectedIndex + 1]);
picker.columns[1].options = JSON.parse(JSON.stringify(temColumns));
picker.forceUpdate(); //Here it should update the picker
}
});
this.picker_cancer = picker;
picker.present();
}
}
So I have a mongoose Schema that looks like this:
var Functionary = new Schema({
person: {
type: mongoose.Schema.Types.ObjectId,
ref: 'Person'
},
dateOfAssignment: Date,
dateOfDischarge: Date,
isActive: Boolean
});
var PositionSchema = new Schema({
name: String,
description: String,
maxHeadCount: Number,
minHeadCount: Number,
currentHeadCount: Number,
currentlyHolding: [Functionary],
historical: [Functionary],
responsibleTo: {
type: mongoose.Schema.Types.ObjectId,
ref: 'Position'
}
});
*note that the Position document can reference itself in the ResponsibleTo field.
Now, I'm trying to build a method that will search the Positions collection, populate the currentlyHolding[].person.name field and the responsibleTo.currentlyHolding[].person.name field, and also return the total number of records found (for paging purposes on the front-end).
Here's what my code looks like:
exports.search = function(req, res) {
var result = {
records: null,
count: 0,
currentPage: req.params.page,
totalPages: 0,
pageSize: 10,
execTime: 0
};
var startTime = new Date();
var populateQuery = [
{
path: 'currentlyHolding.person',
select: 'name'
}, {
path:'responsibleTo',
select:'name currentlyHolding.person'
}
];
Position.find(
{
$or: [
{ name: { $regex: '.*' + req.params.keyword + '.*', $options: 'i' } },
{ description: { $regex: '.*' + req.params.keyword + '.*', $options: 'i' } }
]
},
{},
{
skip: (result.currentPage - 1) * result.pageSize,
limit: result.pageSize,
sort: 'name'
})
.exec()
.populate(populateQuery)
.then(function(doc) {
result.records = doc;
});
Position.count(
{
$or: [
{ name: { $regex: '.*' + req.params.keyword + '.*', $options: 'i' } },
{ description: { $regex: '.*' + req.params.keyword + '.*', $options: 'i' } }
]
})
.exec()
.then(function(doc) {
result.count = doc;
result.totalPages = Math.ceil(result.count / result.pageSize);
})
.then(function() {
var endTime = new Date();
result.execTime = endTime - startTime;
return res.json(200, result);
});
};
My problem is when I run the first query with the populate method (as is shown), it doesn't work. I take away the populate and it works. Is it true that the populate method will break the promise? If so, are there better ways to achieve what I want?
It's been a while since you asked, but this might still help others so here we go:
According to the docs, .populate() doesn't return a promise. For that to happen you should chain .execPopulate().
Alternatively, you can put .populate() before .exec(). The latter will terminate the query builder interface and return a promise for you.
I'm looking to try and do a cumulative flow diagram by story points in rally with their newer API/SDK and found some sample code on their GitHub page RallyAnalytics GitHub
So after some work I have it working to some degree but don't understand or can find any documentation for how to configure this more. It looks like the report being generated is doing count and not the PlanEstimate which I tried to add in fieldsToSum. How can I get it to sum the PlanEstimate field by c_KanbanState and not just give me a count of stories that matched the c_KanbanState for that week? Sample code below minus the minified code from GitHub.
var userConfig = {
title: 'Cumulative Flow Diagram',
debug: false,
trace: false,
// asOf: "2012-11-01", // Optional. Only supply if want a specific time frame. Do not send in new Date().toISOString().
granularity: 'week',
fieldsToSum: ['PlanEstimate'],
scopeField: "Project", // Supports Iteration, Release, Tags, Project, _ProjectHierarchy, _ItemHierarchy
scopeValue: 'scope',
scopeData: {
StartDate: new Date("2012-12-01T07:00:00.000Z"),
EndDate: new Date(new Date()),
Name: ""
},
//fieldNames: ['count', 'PlanEstimate']
kanbanStateField: 'c_KanbanState',
chartSeries: [
{name: 'To Do'},
{name: 'Dev Ready'},
{name: 'In Dev'},
{name: 'Peer Review'},
{name: 'QA Ready'},
{name: 'QA Done'},
{name: 'Accepted'}
]
}
(function() {
var charts = {};
var visualizer;
var nameToDisplayNameMap;
createVisualization = function(visualizationData) {
if (typeof visualizationData !== "undefined" && visualizationData !== null) {
categories = visualizationData.categories;
series = visualizationData.series;
charts.lowestValueInLastState = visualizationData.lowestValueInLastState;
charts.chart = new Highcharts.Chart({
chart: {
renderTo: 'chart-container',
defaultSeriesType: 'column',
zoomType: 'x'
},
legend: {
enabled: true
},
credits: {
enabled: false
},
title: {
text: userConfig.title
},
subtitle: {
text: userConfig.scopeData.Name
},
xAxis: {
categories: categories,
tickmarkPlacement: 'on',
tickInterval: Math.floor(categories.length / 12) + 1,
title: {
text: userConfig.granularity.slice(0, 1).toUpperCase() + userConfig.granularity.slice(1) + 's'
}
},
yAxis: [
{
title: {
text: 'Total Points',
},
min: charts.lowestValueInLastState
}
],
tooltip: {
formatter: function() {
point = this.point
s = point.series.name + ': <b>' + point.y + '</b><br \>';
if (point.x == point.series.data.length - 1) {
s += point.category.slice(0, point.category.length - 1) + ' to-date';
} else {
s += point.category;
}
return s;
}
},
plotOptions: {
series: {
events: {
legendItemClick: function(event) {
if (this.chart.series.length == this.index + 1) {
if (!this.visible) {
this.chart.yAxis[0].setExtremes(charts.lowestValueInLastState);
} else {
this.chart.yAxis[0].setExtremes(0);
};
};
return true;
}
}
}
},
series: series
}); // end of chart
} else {
// Put a spinner in the chart containers until first fetch returns
$('#chart-container')
.html('<img height="20px" src="https://rally1.rallydev.com/slm/js-lib/ext/2.2/resources/images/default/grid/loading.gif"></img>')
.attr("style", "text-align:center");
};
};
$(document).ready(function() {
visualizer = new CFDVisualizer(charts, userConfig, createVisualization);
});
})();
You may be using a slightly older version because the latest doesn't have the fieldsToSum parameter in the config, but you can upgrade the chart to sum PlanEstimate by chaging a few lines in the CFDVisualizer.coffee to this:
#config.lumenizeCalculatorConfig.metrics = [
{f: 'groupBySum', field: 'PlanEstimate', groupByField: #config.kanbanStateField, allowedValues: allowedValues}
]
from:
#config.lumenizeCalculatorConfig.metrics = [
{f: 'groupByCount', groupByField: #config.kanbanStateField, allowedValues: allowedValues}
]
You should probably also change the axis label in the cfd.html.
If this proves too difficult to accomplish (CoffeeScript may be unfamiliar), let me know and I'll post a new version to GitHub.