So I'm using vue tables 2 and found little problem.
Let's assume Im getting list of items and they have column called status, each status is constant and now I need to get translated values so making here relation status=key(constant).
Table with translated values has color which I'd like to use to fill row.
I see in documentation that there is rowClassCallback, but I'd to return inline style like: background-image: $color (for selected status).
Even in this function (rowClassCallback) I can't check value of color because it's in data.
Here in options rowClassCallback is example what I'd to make.
Vue.use(VueTables.ClientTable);
new Vue({
el: "#app",
data: {
columns: ['name', 'code', 'uri'],
data: getData(),
options: {
headings: {
name: 'Country Name',
code: 'Country Code',
uri: 'View Record'
},
editableColumns: ['name'],
sortable: ['name', 'code'],
filterable: ['name', 'code'],
rowClassCallback: row => {
return `background-color: ${this.getProperColor(row.id)}`;
}
}
},
methods: {
getProperColor(id) {
if (id === 245) {
return "#32CD32"
}
}
},
});
function getData() {
return [{
code: "ZW",
name: "Zimbabwe",
created_at: "2015-04-24T01:46:50.459583",
updated_at: "2015-04-24T01:46:50.459593",
uri: "http://api.lobbyfacts.eu/api/1/country/245",
id: 245
}, {
code: "ZM",
name: "Zambia",
created_at: "2015-04-24T01:46:50.457459",
updated_at: "2015-04-24T01:46:50.457468",
uri: "http://api.lobbyfacts.eu/api/1/country/244",
id: 244
}, {
code: "YE",
name: "Yemen",
created_at: "2015-04-24T01:46:50.454731",
updated_at: "2015-04-24T01:46:50.454741",
uri: "http://api.lobbyfacts.eu/api/1/country/243",
id: 243
}, {
code: "EH",
name: "Western Sahara",
created_at: "2015-04-24T01:46:50.452002",
updated_at: "2015-04-24T01:46:50.452011",
uri: "http://api.lobbyfacts.eu/api/1/country/242",
id: 242
}, {
code: "RS",
name: "Serbia",
created_at: "2015-04-24T01:46:50.342496",
updated_at: "2015-04-24T01:46:50.342501",
uri: "http://api.lobbyfacts.eu/api/1/country/196",
id: 196
}];
}
You can use similar method named rowAttributesCallback instead of rowClassCallback to pass your arguments to row.
options: {
editableColumns: ['name'],
sortable: ['name', 'code'],
filterable: ['name', 'code'],
rowAttributesCallback: row => {
return {"style": "color: red"};
}
}
Related
How to get all posts by a category slug in GROQ?
You can see that a post is added to one or more categories. I would like to get all posts by a category slug to show the posts on a category page. I am new to Sanity.io's GROQ. All the tutorials I have found on creating a blog with sanity.io and next.js have not covered it to show a category page showing posts from a category.
Post schema:
export default {
name: 'post',
title: 'Post',
type: 'document',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
{
name: 'slug',
title: 'Slug',
type: 'slug',
options: {
source: 'title',
maxLength: 96,
},
},
{
name: 'author',
title: 'Author',
type: 'reference',
to: {type: 'author'},
},
{
name: 'mainImage',
title: 'Main image',
type: 'image',
options: {
hotspot: true,
},
},
{
name: 'categories',
title: 'Categories',
type: 'array',
of: [{type: 'reference', to: {type: 'category'}}],
},
{
name: 'publishedAt',
title: 'Published at',
type: 'datetime',
},
{
name: 'body',
title: 'Body',
type: 'blockContent',
},
],
preview: {
select: {
title: 'title',
author: 'author.name',
media: 'mainImage',
},
prepare(selection) {
const {author} = selection
return Object.assign({}, selection, {
subtitle: author && `by ${author}`,
})
},
},
}
I have tried the following:
const query = `*[_type == 'post' && $slug in [categories[]-> {slug}] ]{ _id, title, slug, publishedAt, categories[]-> {title,slug}} | order(publishedAt) [0...10]`;
const posts = await client.fetch(
query,
{ slug }
);
console.log("posts", posts);
I got the solution at Sanity's slack channel. The following code helps to get the posts from a category by it's slug.
`*[_type == 'post' && $slug in categories[]->slug.current ]`;
When trying to filter array using Lodash, i am getting all the element of that array. Need to get the specific array only. Please find my coding so far
var sizeList = [{
id: 1,
title: "Test1",
type: [{
name: "1.1",
present: false
}, {
name: "1.2",
present: true
}, {
name: "1.3",
present: false
}]
}, {
id: 2,
title: "Test2",
type: [{
name: "2.1",
present: false
}, {
name: "2.2",
present: true
}, {
name: "2.3",
present: false
}]
}, {
id: 3,
title: "Test3",
type: [{
name: "3.1",
present: false
}, {
name: "3.2",
present: true
}, {
name: "3.3",
present: true
}]
}],
result = _.filter(sizeList, {
type: [{
name: '3.3'
}]
});
console.log(result);
My problem is, when i filter with name:3.3 i am getting all the element in Test3 array including 3.1, 3.2 and 3.3. I need to only 3.3. Can anyone please help.
You can map the items after filtering by type, and filter the type array as well:
var sizeList = [{"id":1,"title":"Test1","type":[{"name":"1.1","present":false},{"name":"1.2","present":true},{"name":"1.3","present":false}]},{"id":2,"title":"Test2","type":[{"name":"2.1","present":false},{"name":"2.2","present":true},{"name":"2.3","present":false}]},{"id":3,"title":"Test3","type":[{"name":"3.1","present":false},{"name":"3.2","present":true},{"name":"3.3","present":true}]}];
var result = _(sizeList)
.filter({
type: [{ name: '3.3' }]
})
.map(({ type, ...o }) => ({
...o,
type: _.filter(type, { name: '3.3' })
}))
.value();
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
I'm trying to find a product variant inside my list of products(on sanity.io using GROQ), to do so, I have the sku of the variant that I want.
The query I'm using is
*[_type == "product" && variants[].sku.current =="kit-kat-wasabi-5" ]
But this query returns an empty array. I'm sure that the sku is correct because if I leave the filter aside, and fetch all I can find it.
I tried replacing the "==" with match, but the result is the same.
my schemas are
procuct
export default {
name: 'product',
title: 'Product',
type: 'document',
fields: [
{
name: 'title',
title: 'Inner Title',
type: 'string'
},
{
title: 'SKU',
name: 'sku',
type: 'slug',
options: {
source: 'title',
maxLength: 96
},
validation: Rule => Rule.required()
},
{
name: 'titleWebsite',
title: 'Title Website',
type: 'localeString'
},
{
name: 'active',
title: 'Active',
type: 'boolean'
},
{
name: 'mainImage',
title: 'Imagem',
type:"image"
},
{
name: 'slug',
title: 'Slug',
type: 'slug',
options: {
source: 'title',
maxLength: 96
}
},
{
title: 'Base Price',
name: 'basePrice',
type: 'localeCurrency'
},
{
title: 'Quantidade',
name: 'qty',
type: 'number'
},
/* {
title: 'Default variant',
name: 'defaultProductVariant',
type: 'productVariant'
},*/
{
title: 'Variants',
name: 'variants',
type: 'array',
of: [
{
title: 'Variant',
type: 'productVariant'
}
]
},
{
title: 'Tags',
name: 'tags',
type: 'array',
of: [
{
type: 'string'
}
],
options: {
layout: 'tags'
}
},
{
name: 'vendor',
title: 'Vendor',
type: 'reference',
to: {type: 'vendor'}
},
{
name: 'blurb',
title: 'Blurb',
type: 'localeString'
},
{
name: 'categories',
title: 'Categories',
type: 'array',
of: [
{
type: 'reference',
to: {type: 'category'}
}
]
},
{
name: 'body',
title: 'Body',
type: 'localeBlockContent'
}
],
preview: {
select: {
title: 'title',
manufactor: 'manufactor.title',
media: 'mainImage'
}
}
}
And productVariant
export default {
title: 'Product variant',
name: 'productVariant',
type: 'object',
fields: [
{
title: 'Title',
name: 'title',
type: 'string'
},
{
title: 'Title Website',
name: 'titleWebsite',
type: 'localeString'
},
{
title: 'Weight in grams',
name: 'grams',
type: 'number'
},
{
title: 'Price',
name: 'price',
type: 'localeCurrency'
},
{
title: 'SKU',
name: 'sku',
type: 'slug',
options: {
source: 'title',
maxLength: 96
},
validation: Rule => Rule.required()
},
{
title: 'Taxable',
name: 'taxable',
type: 'boolean'
},
{
name: 'blurb',
title: 'Blurb',
type: 'localeString'
},
{
name: 'images',
title: 'Images',
type: 'array',
of: [
{
type: 'image',
options: {
hotspot: true
}
}
]
},
{
title: 'Quantidade',
name: 'qty',
type: 'number'
},
{
title: 'Bar code',
name: 'barcode',
type: 'barcode'
}
]
}
This is a known bug in GROQ when traversing arrays. This will introduce breaking changes if it were to be fixed in GROQ v1. It will therefore be fixed in GROQ v2.
Here is a bug report explaining the issue: https://github.com/sanity-io/sanity/issues/1557. You can show your interest in this problem here.
There's a working draft for version two here: https://github.com/sanity-io/groq.
Regarding your schema, I would consider to change the type of the sku field to be something else, for example a string, and create a new field for the slug which has its source property set to the SKU to be automatically be generated by that field. Documentation for that can be found here: https://www.sanity.io/docs/slug-type.
Im trying to load data into a list using a store. When i run my code the list value is blank, the list is not empty but it is blank.
Here is the part of my controller where i try to add data to store.
var loginStore = Ext.getStore('instance');
var record = [{id:id, issued_at:issued, instance_url:instance, signature:sig, access_token:access, myBaseUri:baseUri}];
loginStore.add(record);
Here is the part of the view where i make the list
{
xtype :'list',
id : 'list1',
loadingText: 'Loading Projects',
emptyText: '<div>No Projects Found</div>',
onItemDisclosure: true,
itemTpl: '<div>{issued_at}</div>',
height: 320,
store : 'instance'
}
This doesnt work but when i replace itemTpl:'<div>{issued_at}</div>' with
itemTpl:'<div>{id}</div>'
it seems to work. What am I doing wrong?
Here is my store:
Ext.define('GS.store.instance',{
extend: 'Ext.data.Store',
requires: ['GS.model.login'],
config:{
model: 'GS.model.login'
}
});
And here is my model:
Ext.define('GS.model.login',{
extend: 'Ext.data.Model',
fields:[
{name: 'id', type: 'string'},
{name: 'issued_at', type:'string'},
{name: 'instance_url', type:'string'},
{name: 'signature', type:'string'},
{name: 'access_token', type:'string'},
{name: 'myBaseUri', type:'string'}
]
});
The way you create your record is wrong. Try this way :
var record = Ext.create('YOUR_MODEL', {
id : id,
issued_at: issued,
instance_url: instance,
...
});
Hope this helps.
Try it using this example:
Ext.define('Contact', {
extend: 'Ext.data.Model',
config: {
fields: ['firstName', 'lastName']
}
});
var store = Ext.create('Ext.data.Store', {
model: 'Contact',
},
data: [
{ firstName: 'Tommy', lastName: 'Maintz' },
{ firstName: 'Rob', lastName: 'Dougan' },
{ firstName: 'Ed', lastName: 'Spencer' },
{ firstName: 'Jamie', lastName: 'Avins' },
{ firstName: 'Aaron', lastName: 'Conran' },
{ firstName: 'Dave', lastName: 'Kaneda' },
{ firstName: 'Jacky', lastName: 'Nguyen' },
{ firstName: 'Abraham', lastName: 'Elias' },
{ firstName: 'Jay', lastName: 'Robinson'},
{ firstName: 'Nigel', lastName: 'White' },
{ firstName: 'Don', lastName: 'Griffin' },
{ firstName: 'Nico', lastName: 'Ferrero' },
{ firstName: 'Jason', lastName: 'Johnston'}
]
});
Ext.create('Ext.List', {
fullscreen: true,
itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
store: store,
});
As you get values in the list when using id instead of issued_at, the problem seems to be, not with the functions/models/store so much, but with the issued_at variable itself. Are you certain it's getting through to the store?
Try adding this when your store has loaded, or run it in the browser using for instance chrome
console.log(Ext.getStore("instance").getAt(0).data.id);
console.log(Ext.getStore("instance").getAt(0).data.issued_at);
You should see some result from your first data item.
If you get an id but just "undefined" for issued_at, you'll know that the issue is with the records. And in that case I would try to log your issued variable before you try to add it to the store to make sure that it is actually defined.
Please report with results for further help/discussions if needed.
It turns out that i was missing the config option on my model definition.
Ext.define('GS.model.login',{
extend: 'Ext.data.Model',
config:{
fields:[ 'id','issued_at','instance_url','signature','access_token','myBaseUri' ]
}
});
i have a paging grid and some function that load a new store to the grid, but when i click on the next page it reverts back to the initial store
the grid:
Ext.define('Pedido', {
extend: 'Ext.data.Model',
fields: [{
name: 'ID',
type: 'int'
}, {
name: 'Nome',
type: 'string'
}, {
name: 'CPF/CNPJ',
type: 'string'
}, {
name: 'Data',
type: 'datetime'
}, {
name: 'TipoPagamento',
type: 'string'
}, {
name: 'StatusPagamento',
type: 'string'
}, {
name: 'TipoPagamento',
type: 'string'
}, {
name: 'Total',
type: 'string'
}],
idProperty: 'ID'
});
var store = Ext.create('Ext.data.Store', {
pageSize: 10,
model: 'Pedido',
remoteSort: true,
proxy: {
type: 'ajax',
url: 'http://localhost:4904/Pedido/ObterPedidosPorInquilino',
reader: {
root: 'Items',
totalProperty: 'TotalItemCount'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
id: 'grid',
width: 500,
height: 250,
title: 'Array Grid',
store: store,
loadMask: true,
viewConfig: {
id: 'gv',
trackOver: false,
stripeRows: false
},
columns: [{
id: 'gridid',
text: "ID",
dataIndex: 'ID',
width: 50
}],
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Exibindo {0} - {1} de {2}',
emptyMsg: "Nenhum pedido"
}),
renderTo: 'pedidos'
});
store.load({
params: {
start: 0,
limit: 10
}
});
and the function that set the new store
store.load({
params: {
param: newparam
}
});
also, when I call this function, I would like to set the label on the viewing page x of y back to 1, since setting a new store takes you back to the first page
thanks again
I am not sure why you are replacing the store when you page through your data..but notice the paging toolbar is bound to the store as well as the grid itself. If you are going to change the underlying store here you will need to rebind columns, and the paging bar. Try the reconfigure method http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Table-method-reconfigure
Again I think you need to reevaluate your use case and perhaps think of a different way of accomplishing what you are doing.