How to use Google Map with KeystoneJS - keystonejs

Beginner here,
I am trying to auto-fill a GeoPoint field with lat/lng information after a user finishes entering name of a city. My model looks like the following:
Location.add({
title: { label: 'Location name', type: String, required: true },
content: {
product: { label: 'Product', type: Types.Select, options: 'Option1, Option2', default: 'Option1', index: true, required: true },
address: { label: 'Address', type: String, required: true, initial: false },
state: { label: 'State', type: Types.Select, options: usStates, index: true, required: true, initial: false},
city: { label: 'City', type: String, required: true, initial: false},
country: { label: 'Country', type: Types.Select, options: 'USA', default: 'USA', index: true },
latlng: { label: 'GEO Location', type: Types.GeoPoint, enableMapsAPI: true, **watch: 'city', value: getGEO**},
cloudinaryImages: { label: 'Location images', type: Types.CloudinaryImages },
},});
And I declared my getGEO function as such (nothing happens now):
function getGEO() {
console.log('HELLO WORLD...')
}
However, when I submit the generated form the function getGEO does not get called. Need help resolving this issue. On top of that:
I am not sure whether the model is the right place to call this function.
How do I assign the lat/lng values to the GeoPoint field?
Thanks in advance.

Related

Invalid property value: API create Mutation Sanity.io Reference is string - how to define as reference?

i am building a ecommerce site.
I have trouble adding orderItems to the Array in the Order-Document.
As you can see i am trying to reference the customer-Document and Product-Dokument in my orderItem. i am Posting in an array of objects that looks like:
[
{
productId: '5b79b3f8-6ef8-4c6d-bd85-5dcb14fb836d',
kundenId: 'c3777230-74cd-411b-a455-7fa905c90957',
quant: 1,
name: 'Position 1'
}
]
Can someone help me how i get sanity to understand the strings as _ref ?
My schemas are as follows:
export default {
title: 'Order Item',
name: 'orderItem',
type: 'object',
fields: [
{
title: 'Name',
name: 'name',
type: 'string',
},
{
name: 'kundenId',
title: 'Customer',
type: 'reference',
to: [{ type: 'customer' }],
options: {
disableNew: true,
},
},
{
name: 'productId',
title: 'Product',
type: 'reference',
to: [{ type: 'product' }],
options: {
disableNew: true,
},
},
{
title: 'Quantity',
name: 'quant',
type: 'number',
},
{
title: 'Price',
name: 'price',
type: 'number',
},
],
};
and:
export default {
name: 'order',
title: 'Order',
type: 'document',
fields: [
{
name: 'user',
title: 'User',
type: 'reference',
to: [{ type: 'user' }],
options: {
disableNew: true,
},
},
{
name: 'userName',
title: 'User Name',
type: 'string',
},
{
title: 'Order Items',
name: 'orderItems',
type: 'array',
of: [
{
title: 'Order Item',
type: 'orderItem',
},
],
},
{
title: 'CreatedAt',
name: 'createdAt',
type: 'datetime',
},
],
};
so i solved this by using JSON.parse like so:
productId: JSON.parse(`{"_ref":"${artikel._id}"}`),
Good luck to everyone with the same issue.

hide a column in vue database using checkbox

I made some code that hides a column by clicking on a checkbox and saves the changes to localstorage. The data is coming from a database so I have only 1 row line. My issue is when I refresh the page the header info is hiding itself which is good, but the rest of the lines are coming back. I would like to hide all of the column not just the header.
You can see on the image only the headers are not there after refreshing the page.
mounted() {
// "data-control-column" is a custom data attribute added to the html checkboxes
// when a check box changes loop through all, for any that are unchecked, add that checkbox's "data-control-column" value to our array
$('.opt').change(function(){
var states = [];
$('.opt').each(function(){
if(!$(this).is(':checked')) states.push($(this).data('control-column'));
});
setSates(states);
});
// when we need to set the sate of the UI, loop through the checkboxes checking if their "data-control-column" are in the "states" array
// if so, hide the specified column and uncheck the box
function setSates(states){
if(states){
if(!$.isArray( states )) states = JSON.parse(states); // if sates came from localstorage it will be a string, convert it to an array
$('.opt').each(function(i,e){
var column =$(this).data('control-column');
if($.inArray( column, states ) == -1){
$(this).attr('checked', true);
$('#myTable td:nth-child('+column+'), #myTable th:nth-child('+column+')').show();
}
else{
$(this).attr('checked', false);
$('#myTable td:nth-child('+column+'), #myTable th:nth-child('+column+')').hide();
}
});
localStorage.setItem('states', JSON.stringify(states));
}
}
// this will read and set the initial states when the page loads
setSates( localStorage.getItem('states') );
},
My database:
data() {
return {
hidePreLoader: true,
price: '',
purchase_price: '',
selling_price: '',
products: {},
tableOptions: {
tableName: 'products',
columns: [
{
title: 'lang.item_image',
key: 'image',
type: 'images',
source: '/uploads/products',
imagefield: 'imageURL',
sortable: false,
},
{title: 'lang.attribute_values', key: 'attribute_values', type: 'text', sortable: true},
{title: 'lang.quantity', key: 'test', type: 'text', sortable: true},
{title: 'lang.barcode', key: 'bar_code', type: 'text', sortable: true},
{title: 'lang.sku_2', key: 'sku_2', type: 'text', sortable: true},
{title: 'lang.sku_3', key: 'sku_3', type: 'text', sortable: true},
{title: 'lang.sku_4', key: 'sku_4', type: 'text', sortable: true},
{title: 'lang.selling_price', key: 'selling_price', type: 'text', sortable: true},
{title: 'lang.receiving_price', key: 'purchase_price', type: 'text', sortable: true},
],
formatting : ['selling_price','purchase_price'],
source: '/products/variantDetails/' + this.id,
},
}
},
and the checkbox:
<input type="checkbox" checked="checked" data-control-column="1" class="opt" />{{ trans('lang.item_image') }}

Filter query result by field value inside array of objects [Sanity.io & GROQ]

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.

How to query display field of ComboBox on TypeAhead

Using ExtJS 4.2.1, how would you code a "combo" box to query on the displayField rather than the valueField when a user begins typing in the combo's input field?
The following is the setup I have for the ComboBox:
xtype: 'combo',
itemId: 'usersCbo',
width: 450,
forceSelection: true,
fieldLabel: 'Assign Selected TestRuns To',
labelAlign: 'right',
labelWidth: 180,
queryMode: 'local',
valueField: 'USERNAME',
displayField: 'FULLNAMES',
triggerAction: 'all',
typeAhead: true,
allowBlank: false,
store: Ext.create('Ext.data.Store', {
storeId: 'testRunUsersStore',
autoLoad: true,
pageSize: 1000,
proxy: {
type: 'ajax',
url: 'app/php/stores/Test_Run/testEngineers.php',
reader: {
type: 'xml',
record: 'Record',
root: 'Records',
totalProperty : '#totalRecords'
}
},
fields: [
{ name: 'USERNAME', type: 'string' },
{ name: 'FULLNAMES', type: 'string' }
],
sortOnLoad: true,
sorters: { property: 'USERNAME', direction: 'ASC' }
})
The solution detailed in this blog post solves my issue. Seems like I needed a way to make the matching non-case-sensitive. And it is true that matching is done on the displayField's raw value.
http://atechiediary.blogspot.in/2013/06/first-page-extjs-containslike-search-in.html

Setting the reader on a extjs store

I have a store on extjs4 that return a list of objects, and i want to set the reader property to be able to count the elements so i can use paging afterward.
For reference, the example that extjs use already comes with a count property(totalCount) and the type of object listed(topics), while mine dont have it, just the list.
for reference:
example
Also, in my code the grid doesnt recognize the limit of results per page, but the paging toolbar does:
var sm = Ext.create('Ext.selection.CheckboxModel');
Ext.define('Cliente', {
extend: 'Ext.data.Model',
fields: [{
name: 'ID',
type: 'int'
}, {
name: 'Nome',
type: 'string'
}, {
name: 'Email',
type: 'string'
}, {
name: 'RazaoSocial',
type: 'string'
}, {
name: 'TipoDeCliente',
type: 'string'
}],
idProperty: 'ID'
});
var store = Ext.create('Ext.data.Store', {
pageSize: 3,
model: 'Cliente',
remoteSort: true,
proxy: {
type: 'ajax',
url: 'http://localhost:4904/Cliente/ObterClientes',
extraParams: {
nome: '',
tipopessoa: '',
email: '',
cpf: '',
estado: '',
cidade: '',
cep: ''
},
reader: {
type: 'json',
root: 'data'
},
simpleSortMode: true
},
sorters: [{
property: 'Email',
direction: 'DESC'
}]
});
var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel', {
width: 500,
height: 250,
title: 'Array Grid',
store: store,
selModel: sm,
loadMask: true,
viewConfig: {
id: 'gv',
trackOver: false,
stripeRows: false
},
columns: [{
id: 'gridid',
text: "ID",
dataIndex: 'ID',
hidden: true
}, {
text: 'Nome',
width: 150,
sortable: true,
dataIndex: 'Nome'
}, {
text: 'Tipo de Cliente',
width: 100,
sortable: true,
dataIndex: 'TipoDeCliente'
}, {
text: 'Email',
width: 150,
sortable: true,
dataIndex: 'Email'
}],
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Exibindo clientes {0} - {1} of {2}',
emptyMsg: "Nenhum cliente"
}),
renderTo: 'clientes',
});
store.loadPage(1);
The store needs the total count to calculate the paging parameters and to show the total. Your server side implementation must change to add that count with your data.
Also load the data like this store.load(); instead of loadPage.
EDIT: you also have an extra comma here: renderTo: 'clientes', I would suggest running your code through JSLint.