I'm developing a vue-based system, and for my tables, I'm using this: https://github.com/matfish2/vue-tables-2
The component has lots of options. There's the possibility to define custom cell templates to manipulate data before showing them, like this one for the "created_at" column:
templates: {
created_at(h, row) {
return this.formatDate(row.created_at);
},
//(...)
}
I can add other templates as well:
var user_id = function(h,row){return row.id};
...
templates: {
created_at(h, row) {
return this.formatDate(row.created_at);
},
user_id,
(...) // etc
}
But I'd like to group the functions into a variable, so I could reuse the code, like:
var custom_template = [
{ user_id(h,row){return row.id} },
{ user_name(h,row){return row.name} },
{ created_at(h, row){return this.formatDate(row.created_at)} }
];
templates: {
custom_templates
}
EDIT 1:
So i could have something like:
templates: {
user_id(h,row){return row.id} ,
user_name(h,row){return row.name} ,
created_at(h, row){return this.formatDate(row.created_at)}
}
It's not working, but is it possible? Do I need extra code to achieve this?
Thanks! =)
var custom_template = [
function user_id(h, row) {
return row.id;
},
function user_name(h, row) {
return row.name;
},
function created_at(h, row) {
return row.created_at;
}
];
custom_template.forEach(
item => console.log(item(1, {
id: 1,
name: "test",
created_at: new Date()
})));
You need to combine Igor's solution to create array of functions with some form of expanding the array, such as the spread syntax
Related
I'm wondering if there is another shorter way to write the below code:
let playerListQuery = {
variables = {
input: {
pagination,
order: { field: PlayerOrderField.CreatedAtDesc },
where: {
// some others...
},
},
}
};
function updateSearch(value) {
if (!value) return;
playerListQuery.variables = {
...playerListQuery.variables,
input: {
...playerListQuery.variables.input,
where: {
...playerListQuery.variables.input.where,
or: [
{ nameContains: searchValue },
{
teamHas: [
{
or: [
{ nameContains: searchValue },
{ addressContains: searchValue },
],
},
],
},
],
},
},
};
}
As you can see I'm only interested to change the where field in updateSearch.
Is there a shorter way?
You could do a deep copy of your query then send the modified copy.
Something like so:
function updateSearch(value) {
if (!value) return;
const newQuery = deepCopy(playerListQuery);
newQuery.variables.input.where = { /* *** */ };
return newQuery;
}
As for the function that does the deep copy, if your JS object is serializable, JSON.parse(JSON.stringify(yourObject)) is a quick and easy way to deep copy
If you have more complex needs, you could look into libraries (e.g.: lodash's cloneDeep function).
I am sorry if I am asking a very basic question, I have done some research over the internet but not getting anything useful.
I have a typescript object like :
var productIds=["one","two","three"];
let searchfilter = {
or: [{
id: { match:productids['0'] }
},{
id: { match:productids['1'] }
},{
id: { match:productids['2'] }
}]
};
My productIds can be dynamic and may hold different counts of values.
How can I create the same structure for a dynamic number of values. I tried forEach, but not sure about the syntax.
productids.forEach(function(value){
// not sure if this is right syntax, I am not getting desired results.
searchfilter.or = { id: { match:value }};
});
Can you help me with it?
You can create your full or array with a simple .map() :
var productIds = ["1", "2", "3"];
let searchfilter = {
or : productIds.map( n => ({ id : { match : productIds[n] } }))
};
However Mongo (which I believe you are using) has a $match method that's made to match a list :
{
$match: {
productIds: {
$in: productIds
}
}
}
I'll keep it as simple as I can
var productIds=["one","two","three"];
let searchfilter = productIds.map(p => {
return {id: { match: p }};
});
// function
addNewProduct(id: string) {
this.searchfilter.push({id: { match: id }});
}
So I'm using Bootstrap Vue with this test app. I'm trying to change the variant of a table cell depending on the value of it. Unfortunately, the variant parameter will not take a function, so I'm out of ideas on how to achieve this.
This is my code:
var app = new Vue({
el: '#app',
data: {
items: [], //Will be populated through AJAX
fields: [
{
key: 'Vendedor',
label: 'Vendedor'
},
{
key: 'OBJETIVO',
label: 'Objetivo',
formatter: (value) => { return parseFloat(value).toFixed(2)},
variant: estiloObjetivo //THIS IS NOT WORKING
}
]
},
methods: {
Cargar: function () {
var salesperson = getCookie('salespersonCode');
var url_servicio = 'http://MywebService/';
var self = this;
$.ajax({
type: 'GET',
url: url_servicio + 'ventas/' + salesperson,
dataType: "json", // data type of response
success: function(data){
self.items = data
}
});
},
estiloObjetivo (value) {
if value > 0 //I need my cell variant to change depeding on this value
return 'danger'
else
return 'success'
}
}
})
This is my HTML part:
<div id="app">
<button v-on:click="Cargar">Cargar</button>
<b-table striped hover :fields="fields" :items="items"></b-table>
</div>
Any ideas on how to style a Bootstrap-vue cell dynamically?
This is the way it's done in the docs, it's actually set in the "items" array, but how is this useful in cases like mine where I get the data from a web service?:
{
salesperson: 'John',
Objetivo: 2000,
_cellVariants: { salesperson: 'success', Objetivo: 'danger'}
},
So I guess what I need is a way to set the I need is to set the _cellVariants parameter of each element in the 'items' array.
You likely need a computed property. Computed properties automatically update on changes to the reactive variables that they depend on.
The following example implements a computed property, styledItems, which you must use in place of items in the template. It returns a 1-deep copy of items, i.e. a new array containing a copy of each item, with the extra _cellVariants property added.
new Vue({
data: {
items: [ /* your data here */ ]
},
methods: {
estiloObjetivo: value => (value > 0) ? 'danger' : 'success'
},
computed: {
styledItems() {
return this.data.map(datum =>
Object.assign({}, datum, {
_cellVariants: {
Objetivo: this.estiloObjetivo(datum.Objetivo)
}
})
}
})
If you want to add variant to items you could use a computed property called cptItems and define it as follows:
computed:{
cptItems(){
return this.items.map((item)=>{
let tmp=item;
item.OBJETIVO>0?tmp.variant='danger':tmp.variant='success';
return tmp;
})
}
and use that property inside your template like :
<b-table .... :items="cptItems"></b-table>
I was sure the answers above would solve my own issue but they did not. I found a different way to color table cells: https://github.com/bootstrap-vue/bootstrap-vue/issues/1793
This is aside from using variants to color a table cell. Instead, we utilize tdclass and a function.
<script>
new Vue({
el: '#itemView',
data() {
return {
fields: [
{
key: 'Objetive',
sortable: true,
thClass: 'text-nowrap',
tdClass: (value, key, item) => {
return 'table-' + this.getColor(item);
}
}
],
};
},
methods: {
getColor(item) {
return item.Objetive > 0 ? 'danger' : 'success';
},
},
});
</script>
For my own use-case, I needed to compare two cells of the same row, then apply a class to one.
...
{
key: 'DEMAND_QTY',
sortable: true,
thClass: 'text-nowrap',
tdClass: (value, key, item) => {
return 'table-' + this.demandStatusColor(item);
},
},
{ key: 'TOTAL_DEMAND', sortable: true, thClass: 'text-nowrap' },
],
};
},
methods: {
demandStatusColor(item) {
return item.DEMAND_QTY < item.TOTAL_DEMAND ? 'danger' : 'success';
},
}
...
Perhaps this will help someone, if not OP.
#John answer worked for me. I don't have enough reputation to make comment or useful
tdClass: (type, key, item) => {
switch (type) {
case "value":
return "bg-warning text-white";
break;
case "value":
return "bg-danger text-white";
break;
case "value":
return "bg-info text-white";
break;
default:
break;
}
},
I want to create only one row using insert() in Sequelize migration. I have seen the examples for bulkInsert() but don't want to use bulk.
We have this function to create only one row:
insert(instance, tableName, values, options)
But I don't understand what's the instance here in param?
I am using bulkInsert because it does not ask for instance param.
It will be great if you can add insert in my code written below.
Migration lib: https://github.com/sequelize/sequelize/blob/master/lib/query-interface.js
//Code for insertion using bulkInsert
module.exports = {
up: queryInterface => {
queryInterface.describeTable("Platforms").then(attributes => {
return queryInterface.bulkInsert("Platforms", [
{
id: 6,
display_name: "Booking.com",
code: "booking.com"
}
]);
});
},
down: queryInterface => {
return queryInterface.bulkDelete("Platforms", {
id: 6
});
}
};
import Platform from '../models/Platform';
module.exports = {
up: queryInterface => {
queryInterface.describeTable("Platforms").then(attributes => {
return queryInterface.insert(Platform, "Platforms", [
{
id: 6,
display_name: "Booking.com",
code: "booking.com"
}
]);
});
},
down: queryInterface => {
return queryInterface.bulkDelete("Platforms", {
id: 6
});
}
};
Instance here is for model instance that you define using sequilize.
I'm tring to map this
{ items: [
{ id: 1 },
{ id: 2 },
{ id: 3 }
]};
when creating something in the array I add a function to remove the item from the collection.
var mapping = {
'items': {
key: function(data) {
return ko.utils.unwrapObservable(data.id);
},
create: function(options) {
var o = (new(function() {
this._remove = function() {
options.parent.items.mappedRemove(options.data);
};
ko.mapping.fromJS(options.data, {}, this);
})());
return o;
}
}
};
this method works if I am removing an item added using items.mappedCreate but don´t work with the items mapped on ko.mapping.fromJS.
When debugging I noticed that options.parent are not the same in the different situation.
Why? Should both methods return as parent the items observableArray?
I have set up a jsfiddle with an example http://jsfiddle.net/fampinheiro/9CcME/.
Thank you
I posted my problem in knockout ggroups
https://groups.google.com/d/topic/knockoutjs/cqBr_CPsfqc/discussion
and Roy Jacobs solved my jsfiddle problem.