Develop Reference

Create Google Map Widget in SurveyJs

I'm a newcomer to SurveyJS. I want to add Google Map as a widget to SurveyJS.
I did some steps and the map was added correctly in the Survey Designer section, but it does not load my widget in the Test Survey section.
I have uploaded the codes and images below
please guide me
Thanks
angular: ^7.3.9,
survey-analytics: ^1.7.26,
survey-angular: ^1.8.70,
survey-creator: ^1.8.70,
survey-knockout: ^1.8.70 ,
survey-pdf: ^1.8.70,
surveyjs-widgets: ^1.8.70,
fileName: mapWidget.ts
import { Loader } from "#googlemaps/js-api-loader";
export function init(Survey: any) {
var widget = {
name: "googlemap",
title: "google map survey",
iconName: "my-custom-icon",
init() {},
widgetIsLoaded: function () {
return true;
},
isFit: function (question: any) {
let type = question.getType();
return type === "googlemap";
},
activatedByChanged: function (activatedBy) {
Survey.JsonObject.metaData.addClass("googlemap", [], null, "text");
Survey.JsonObject.metaData.addProperties("googlemap", [
{ name: "lat", default: 29.635703 },
{ name: "lng", default: 52.521924 },
]);
createProperties(Survey);
},
isDefaultRender: false,
htmlTemplate:
"<div class='custom-tessting-input' id='google-map-design'></div>",
afterRender: function (question: any, element: any) {
debugger;
var findDiv = document.getElementById("google-map-design");
findDiv.style.height = "500px";
findDiv.style.width = "100%";
let loader = new Loader({
apiKey: "xxxxxxxxxxx",
});
loader
.load()
.then((google) => {
new google.maps.Map(document.getElementById("google-map-design"), {
center: { lat: question.lat, lng: question.lng },
zoom: 6,
});
})
.catch((err) => {});
},
};
Survey.CustomWidgetCollection.Instance.add(widget, "customtype");
}
function createProperties(Survey) {
var props = createGeneralProperties(Survey);
return props;
}
function createGeneralProperties(Survey) {
return Survey.Serializer.addProperties("googlemap", [
{
name: "latitude:textbox",
category: "general",
default: "29.635703",
},
{
name: "longitude:textbox",
category: "general",
default: "52.521924",
},
]);
}
fileName: survey.creator.component.ts
//...
import { init as initGoogleMapWidget } from "./mapWidget";
...
initGoogleMapWidget(SurveyKo);
//...
fileName: survey.component.ts
//...
import { init as initGoogleMapWidget } from "./mapWidget";
...
initGoogleMapWidget(SurveyKo);
//...

Try this one in survey.component.ts:
//...
import { init as initGoogleMapWidget } from "./mapWidget";
...
initGoogleMapWidget(Survey);
//...
When we want to create a survey, we pass SurveyKo. But when we want to see the created survey, we pass Survey which is the survey instance.

Enabling Autolinking in Slate.js editor

i am new in js and i wanted to Enabling Autolinking in Slate.js editor.
for example.
when we type www.google.com in any editor it convert it into the clickable link.
i want that when a enter a link and press space it should be converted into the Clickable link .
here is my current code
all other SHORTCUTS wroks fine but when i try to insert Link it does not show anythings.
the reason is i dont know how to merge link in Childern.
link validation logic is fine .
all i need is when i insert link and press space it should show me a clickable link..
import { Slate, Editable, withReact } from 'slate-react'
import {
Editor,
Transforms,
Range,
Point,
createEditor,
Element as SlateElement,
Descendant,
} from 'slate'
import { withHistory } from 'slate-history'
const SHORTCUTS = {
'*': 'list-item',
'-': 'list-item',
'+': 'list-item',
'>': 'block-quote',
'#': 'heading-one',
'##': 'heading-two',
'###': 'heading-three',
'####': 'heading-four',
'#####': 'heading-five',
'######': 'heading-six',
}
const MarkdownShortcutsExample = () => {
const [value, setValue] = useState<Descendant[]>(initialValue)
const renderElement = useCallback(props => <Element {...props} />, [])
const editor = useMemo(
() => withShortcuts(withReact(withHistory(createEditor()))),
[]
)
return (
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
<Editable
renderElement={renderElement}
placeholder="Write some markdown..."
spellCheck
autoFocus
/>
</Slate>
)
}
const withShortcuts = editor => {
const { deleteBackward, insertText } = editor
editor.insertText = text => {
const { selection } = editor
if (text === ' ' && selection && Range.isCollapsed(selection)) {
const { anchor } = selection
const block = Editor.above(editor, {
match: n => Editor.isBlock(editor, n),
})
const path = block ? block[1] : []
const start = Editor.start(editor, path)
const range = { anchor, focus: start }
const beforeText = Editor.string(editor, range)
console.log("This is testin",validURL(beforeText))
const type = validURL(beforeText)?"link":SHORTCUTS[beforeText]
if (type) {
Transforms.select(editor, range)
Transforms.delete(editor)
const newProperties: Partial<SlateElement> = {
type,
}
Transforms.setNodes(editor, newProperties, {
match: n => Editor.isBlock(editor, n),
})
return
}
}
insertText(text)
}
editor.deleteBackward = (...args) => {
const { selection } = editor
if (selection && Range.isCollapsed(selection)) {
const match = Editor.above(editor, {
match: n => Editor.isBlock(editor, n),
})
if (match) {
const [block, path] = match
const start = Editor.start(editor, path)
if (
!Editor.isEditor(block) &&
SlateElement.isElement(block) &&
block.type !== 'paragraph' &&
Point.equals(selection.anchor, start)
) {
const newProperties: Partial<SlateElement> = {
type: 'paragraph',
}
Transforms.setNodes(editor, newProperties)
if (block.type === 'list-item') {
Transforms.unwrapNodes(editor, {
match: n =>
!Editor.isEditor(n) &&
SlateElement.isElement(n) &&
n.type === 'bulleted-list',
split: true,
})
}
return
}
}
deleteBackward(...args)
}
}
return editor
}
const validURL=(str)=> {
var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
'((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
'(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
'(\\#[-a-z\\d_]*)?$','i'); // fragment locator
return !!pattern.test(str);
}
const Element = ({ attributes, children, element }) => {
console.log("777",attributes, children, element)
switch (element.type) {
case 'block-quote':
return <blockquote {...attributes}>{children}</blockquote>
case 'bulleted-list':
return <ul {...attributes}>{children}</ul>
case 'heading-one':
return <h1 {...attributes}>{children}</h1>
case 'heading-two':
return <h2 {...attributes}>{children}</h2>
case 'heading-three':
return <h3 {...attributes}>{children}</h3>
case 'heading-four':
return <h4 {...attributes}>{children}</h4>
case 'heading-five':
return <h5 {...attributes}>{children}</h5>
case 'heading-six':
return <h6 {...attributes}>{children}</h6>
case 'list-item':
return <li {...attributes}>{children}</li>
case 'link':
console.log("Inside")
return <a {...attributes} href={element.url}>
{children}
</a>
default:
return <p {...attributes}>{children}</p>
}
}
const initialValue: Descendant[] = [
{
type: 'link',
url:'',
children:[{ text: '' }],
},
{
type: 'paragraph',
children: [
{
text:
'The editor gives you full control over the logic you can add. For example, it\'s fairly common to want to add markdown-like shortcuts to editors. So that, when you start a line with "> " you get a blockquote that looks like this:',
},
],
},
{
type: 'block-quote',
children: [{ text: 'A wise quote.' }],
},
{
type: 'paragraph',
children: [
{
text:
'Order when you start a line with "## " you get a level-two heading, like this:',
},
],
},
{
type: 'heading-two',
children: [{ text: 'Try it out!' }],
},
{
type: 'paragraph',
children: [
{
text:
'Try it out for yourself! Try starting a new line with ">", "-", or "#"s.',
},
],
},
]
export default MarkdownShortcutsExample````
any help will be appreciated.
thanks in advance

Yields "TypeError: Cannot read property 'xxxx' of undefined" after running jest with Vue

I'm trying to make a test using jest with Vue.
the details below.
Problem:
Can't mount using shallowMount option.
Situation:
Run the test after mounting the component using shallowMount option that provides in Vue-test-utils.
Throw error "Cannot read property 'XXXX' of undefined
This is my test code.
import myComponent from '#/~';
import Vuex from 'vuex';
import Vuelidate from 'vuelidate';
import { shallowMount, createLocalVue } from '#vue/test-utils';
const localVue = createLocalVue();
localVue.use(Vuex);
localVue.use(Vuelidate);
describe('myComponent~', () => {
let store;
beforeEach(() => {
store = new Vuex.Store({
modules: {
user: {
namespaced: true,
getters: {
profile: () => {
const profile = { name: 'blahblah' };
return profile;
},
},
},
},
});
});
describe('profile.name is "blahblah"', () => {
it('return something~', () => {
const wrapper = shallowMount(myComponent, {
localVue,
store,
mocks: {
$api: {
options: {
testMethod() {
return new Promise((resolve, reject) => {
resolve('test');
});
},
},
},
$i18n: {
t() {
return {
EN: 'EN',
KO: 'KO',
JP: 'JA',
SC: 'zh-CN',
TC: 'tw-CN',
};
},
},
},
});
expect(wrapper.find('.profile').text()).toBe('blahblah');
});
I think the problem is that property isn't set as a specified value or an empty value like an array or object.
But I don't know how I set properly the properties in my logic.
For example,
when the error yields "Cannot read property 'images' of undefined",
I add to a wrapper in the relevant method like this.
exampleMethod() {
this.something = this.something.map(item => {
if (item.detailContent.images) { // <-- the added wrapper is here
~~~logic~~~~
}
})
}
But the undefined properties are so many, I also think this way is not proper.
How I do solve this problem?
added
These are details about the above example method:
exampleMethod() {
this.something = this.something.map(item => {
let passValidation = false;
let failValidation = false;
if (item.detailContent.images) {
if (this.detail.showLanguages.includes(item.code)) {
if (this.configId !== 'OPTION1') {
item.detailContent.images = item.detailContent.images.map(element => {
return {
...element,
required: true,
}
});
}
checkValidationPass = true;
} else {
if (this.configId !== 'OPTION1') {
item.detailContent.images = item.detailContent.images.map(element => {
return {
...element,
required: false,
}
});
}
checkValidationPass = false;
}
return {
...item,
required: passValidation,
warning: failValidation,
}
}
});
if (this.configId === 'OPTION2') {
this.checkOption2Validation();
} else if (this.configId === 'OPTION3') {
this.checkOption3Validation();
} else {
this.checkOption1Validation();
}
},
And this is 'this.something':
data() {
return {
something: []
}
}
The detailContent is set here.
setMethod() {
this.something = [
...this.otherthings,
];
this.something = this.something.map(item => {
let details1 = {};
if (this.configId === 'OPTION2') {
details1 = {
images: [
{ deviceType: 'PC', titleList: [null, null], imageType: 'IMAGE' },
{ deviceType: 'MOBILE', titleList: [null, null, null] }
]
};
} else if (this.configId === 'OPTION3') {
details1 = {
images: [
{ deviceType: 'PC' },
{ deviceType: 'MOBILE' }
],
links: { linkType: 'EMPTY' },
};
}
let details2 = {
mainTitle: {
content: null,
}
}
let checkValidation = false;
this.detail.detailLanguages.forEach(element => {
if (element.language === item.code) {
details1 = { ...element };
if (!!element.mainTitle) {
details2 = { ...element };
} else {
details2 = {
...details2,
...element
};
}
if (this.configId !== 'OPTION1') {
details1.images = details1.images.map(image => {
return {
...image,
required: true,
}
});
}
checkValidation = true;
}
});
return {
...item,
detailContent: this.configId !== 'OPTION1' ? details1 : details2,
required: false,
warning: false,
}
});
},

Trying to use this.props.dispatch and returns that is not a function

I am trying to delete an item from DB but when I access the function is saying _this.props.dispatch is not a function. (In '_this.props.dispatch((0, _actions.deleteJob)(_this.props.id))', '_this.props.dispatch' is undefined)
Here is my code where I am calling the function to delete my item. The function onDelete() I am calling it after user interaction.
class JobItem extends Component {
constructor(props) {
super(props)
this.state = {
activeRowKey: null,
deleting: false
};
}
onDelete = () => {
this.setState({deleting: true});
this.props.dispatch(deleteJob(this.props.id)); // HERE is the error
}
render() {
const swipeSettings = {
autoClose: true,
onClose: (secId, rowId, direction) => {
this.setState({ activeRowKey: null });
},
onOpen: (secId, rowId, direction) => {
this.setState({ activeRowKey: this.props.id });
},
right: [
{
onPress: () => {
const deletingRow = this.state.activeRowKey;
Alert.alert(
'Alert',
'Are you sure you want to delete?',
[
{text: 'No', onPress: () => console.log('Cancel Pressed'), style:'cancel'},
{text: 'Yes', onPress: () => {
this.onDelete();
// Refresh Job List
this.props.parentFlatList.refreshJobList(deletingRow);
}},
],
{ cancelable: true }
)
},
text: 'Delete', type: 'delete'
}
],
rowId: this.props._id,
sectionId: 1
}
And here is the deleteJob() function where it actually delete it from DB
export function deleteJob(job_id) {
return function (dispatch) {
return axios.delete(JOB_URL(user_id, job_id), {
headers: { authorization: token }
}).then((response) => {
dispatch(removeJob(job_id));
}).catch((err) => {
dispatch(addAlert("Couldn't delete job."));
});
};
}
JobItem
var renderJobs = () => {
return this.props.jobs.map((job) => {
return (
<JobItem
parentFlatList={this}
key={job._id}
title={job.title}
shortDescription={job.shortDescription}
logo={job.avatar}
company={job.company}
id={job._id}/>
)
})
}
var mapStateToProps = (state) => {
return {
jobs: state.jobs
}
}
module.exports = connect(mapStateToProps)(JobList);
Any idea how shall I solve this?

I think you forgot to pass dispatch to JobItem
<JobItem
parentFlatList={this}
key={job._id}
title={job.title}
shortDescription={job.shortDescription}
logo={job.avatar}
company={job.company}
id={job._id}
dispatch={this.props.dispatch} /* <-- this one here */
/>

One way to fix the problem is to put JobItem inside container.
Something like this
module.exports = connect(mapStateToProps,dispatch=>({dispatch}))(JobItem);

GraphQL Validation Error on mutation

I am trying to set up a mutation with modified code from the Relay Todo example.
When I try to compile I get the following error:
-- GraphQL Validation Error -- AddCampaignMutation --
File: /Users/me/docker/relay/examples/todo/js/mutations/AddCampaignMutation.js
Error: Cannot query field "addCampaign" on type "Mutation".
Source:
>
> mutation AddCampaignMutation {addCampaign}
> ^^^
-- GraphQL Validation Error -- AddCampaignMutation --
File: /Users/me/docker/relay/examples/todo/js/mutations/AddCampaignMutation.js
Error: Unknown type "AddCampaignPayload". Did you mean "AddTodoPayload" or "RenameTodoPayload"?
Source:
>
> fragment AddCampaignMutationRelayQL on AddCampaignPayload #relay(pattern: true) {
> ^^
I have duplicated the Todo code so I don't know why the Todo mutation is working correctly but my new Campaign test isn't.
This is my database.js file, I have removed the Todo related items to make the document easier to read:
export class Campaign {}
export class User {}
// Mock authenticated ID
const VIEWER_ID = 'me';
// Mock user data
const viewer = new User();
viewer.id = VIEWER_ID;
const usersById = {
[VIEWER_ID]: viewer,
};
// Mock campaign data
const campaignsById = {};
const campaignIdsByUser = {
[VIEWER_ID]: [],
};
let nextCampaignId = 0;
addCampaign('Campaign1');
addCampaign('Campaign2');
addCampaign('Campaign3');
addCampaign('Campaign4');
export function addCampaign(text) {
const campaign = new Campaign();
//campaign.complete = !!complete;
campaign.id = `${nextCampaignId++}`;
campaign.text = text;
campaignsById[campaign.id] = campaign;
campaignIdsByUser[VIEWER_ID].push(campaign.id);
return campaign.id;
}
export function getCampaign(id) {
return campaignsById[id];
}
export function getCampaigns(status = 'any') {
const campaigns = campaignIdsByUser[VIEWER_ID].map(id => campaignsById[id]);
if (status === 'any') {
return campaigns;
}
return campaigns.filter(campaign => campaign.complete === (status === 'completed'));
}
This is my schema.js file, again I have removed the Todo related items to make the document easier to read:
import {
GraphQLBoolean,
GraphQLID,
GraphQLInt,
GraphQLList,
GraphQLNonNull,
GraphQLObjectType,
GraphQLSchema,
GraphQLString,
} from 'graphql';
import {
connectionArgs,
connectionDefinitions,
connectionFromArray,
cursorForObjectInConnection,
fromGlobalId,
globalIdField,
mutationWithClientMutationId,
nodeDefinitions,
toGlobalId,
} from 'graphql-relay';
import {
Campaign,
addCampaign,
getCampaign,
getCampaigns,
User,
getViewer,
} from './database';
const {nodeInterface, nodeField} = nodeDefinitions(
(globalId) => {
const {type, id} = fromGlobalId(globalId);
if (type === 'User') {
return getUser(id);
} else if (type === 'Campaign') {
return getCampaign(id);
}
return null;
},
(obj) => {
if (obj instanceof User) {
return GraphQLUser;
} else if (obj instanceof Campaign) {
return GraphQLCampaign;
}
return null;
}
);
/**
* Define your own connection types here
*/
const GraphQLAddCampaignMutation = mutationWithClientMutationId({
name: 'AddCampaign',
inputFields: {
text: { type: new GraphQLNonNull(GraphQLString) },
},
outputFields: {
campaignEdge: {
type: GraphQLCampaignEdge,
resolve: ({localCampaignId}) => {
const campaign = getCampaign(localCampaignId);
return {
cursor: cursorForObjectInConnection(getCampaigns(), campaign),
node: campaign,
};
},
},
viewer: {
type: GraphQLUser,
resolve: () => getViewer(),
},
},
mutateAndGetPayload: ({text}) => {
const localCampaignId = addCampaign(text);
return {localCampaignId};
},
});
const GraphQLCampaign = new GraphQLObjectType({
name: 'Campaign',
description: 'Campaign integrated in our starter kit',
fields: () => ({
id: globalIdField('Campaign'),
text: {
type: GraphQLString,
description: 'Name of the campaign',
resolve: (obj) => obj.text,
}
}),
interfaces: [nodeInterface]
});
const {
connectionType: CampaignsConnection,
edgeType: GraphQLCampaignEdge,
} = connectionDefinitions({
name: 'Campaign',
nodeType: GraphQLCampaign,
});
const GraphQLUser = new GraphQLObjectType({
name: 'User',
fields: {
id: globalIdField('User'),
campaigns: {
type: CampaignsConnection,
args: {
...connectionArgs,
},
resolve: (obj, {...args}) =>
connectionFromArray(getCampaigns(), args),
},
totalCount: {
type: GraphQLInt,
resolve: () => getTodos().length,
},
completedCount: {
type: GraphQLInt,
resolve: () => getTodos('completed').length,
},
},
interfaces: [nodeInterface],
});
const Root = new GraphQLObjectType({
name: 'Root',
fields: {
viewer: {
type: GraphQLUser,
resolve: () => getViewer(),
},
node: nodeField,
},
});
This is my AddCampaignMutation.js file:
import Relay from 'react-relay';
export default class AddCampaignMutation extends Relay.Mutation {
static fragments = {
viewer: () => Relay.QL`
fragment on User {
id,
totalCount,
}
`,
};
getMutation() {
console.log('getMutation');
return Relay.QL`mutation{addCampaign}`;
}
getFatQuery() {
console.log('getFatQuery');
return Relay.QL`
fragment on AddCampaignPayload #relay(pattern: true) {
campaignEdge,
viewer {
campaigns,
},
}
`;
}
getConfigs() {
console.log('getConfigs');
return [{
type: 'RANGE_ADD',
parentName: 'viewer',
parentID: this.props.viewer.id,
connectionName: 'campaigns',
edgeName: 'campaignEdge',
rangeBehaviors: ({orderby}) => {
if (orderby === 'newest') {
return 'prepend';
} else {
return 'append';
}
},
//rangeBehaviors: ({status}) => {
// if (status === 'completed') {
// return 'ignore';
// } else {
// return 'append';
// }
//},
}];
}
getVariables() {
console.log('getVariables');
return {
text: this.props.text,
};
}
getOptimisticResponse() {
console.log('getOptimisticResponse');
return {
// FIXME: totalCount gets updated optimistically, but this edge does not
// get added until the server responds
campaignEdge: {
node: {
text: this.props.text,
},
},
viewer: {
id: this.props.viewer.id,
totalCount: this.props.viewer.totalCount + 1,
},
};
}
}
And finally this is the app file that contains my text input and the call to AddCampaignMutation:
import AddTodoMutation from '../mutations/AddTodoMutation';
import AddCampaignMutation from '../mutations/AddCampaignMutation';
import TodoListFooter from './TodoListFooter';
import TodoTextInput from './TodoTextInput';
import React from 'react';
import Relay from 'react-relay';
class TodoApp extends React.Component {
_handleTextInputSave = (text) => {
debugger;
this.props.relay.commitUpdate(
new AddTodoMutation({text, viewer: this.props.viewer})
);
};
_campaignHandleTextInputSave = (text) => {
debugger;
this.props.relay.commitUpdate(
new AddCampaignMutation({text, viewer: this.props.viewer})
);
};
render() {
const hasTodos = this.props.viewer.totalCount > 0;
return (
<div>
<section className="todoapp">
<header className="header">
<TodoTextInput
autoFocus={true}
className="new-campaign"
onSave={this._campaignHandleTextInputSave}
placeholder="Campaign name"
/>
<h1>
todos
</h1>
<TodoTextInput
autoFocus={true}
className="new-todo"
onSave={this._handleTextInputSave}
placeholder="What needs to be done?"
/>
</header>
{this.props.children}
{hasTodos &&
<TodoListFooter
todos={this.props.viewer.todos}
viewer={this.props.viewer}
/>
}
</section>
</div>
);
}
}
export default Relay.createContainer(TodoApp, {
fragments: {
viewer: () => Relay.QL`
fragment on User {
totalCount,
${AddTodoMutation.getFragment('viewer')},
${AddCampaignMutation.getFragment('viewer')},
${TodoListFooter.getFragment('viewer')},
}
`,
},
});

Well I feel a bit silly but I found out what the problem was. I didn't realise that my schema.json file was not updating!
If anyone has a similar problem make sure that the schema.json file is up to date by running the following command to rebuild it:
npm run-script update-schema