I'm making an admin dashboard and I need to ask for data (for example when creating or updating data) a lot. I am already using vue-sweetalert2 which made me aware of how easy it is to use this.$swal.fire().then()...
I was wondering, how would I go about making my own kind of thing like that (without using TypeScript)?
let reply = await this.$ask(fields)
alert("You entered: " + reply.yourname.answer)
Then in the component that I load in on every page, I would have a modal which takes the fields and allows for user input. When a user clicked submit or exited the modal, it needs to return a / the value(s).
I'm thinking of using it this way:
// Ask for new team name & description
let modalResult = await this.$ask({
fields: [
{
title: "Team name",
placeholder: "Give youre team a name!",
key: "teamName",
type: "text"
}, {
title: "Team description",
placeholder: "What's your team about?",
key: "teamDescription",
type: "text"
}
],
modal: {
variant: "primary",
icon: null,
title: "Make a new team",
confirmButtonText: "Create team",
cancelButtonText: "Cancel"
}
});
console.log("Team name: " + modalResult.data.teamName);
console.log("Team description: " + modalResult.data.teamDescription);
However, I honestly have no idea how I'd go about making this possible. What I've thought of:
Mixins: Of what I've learnt so far, I don't know how to put a template file in it. (so a .vue file, only a .js file).
Here's a screenshot of :
what I'm trying to say
Thanks in advance! :-)
When you're setting up your vue instance (usually in main.js), you can put your method on as a prototype
Vue.prototype.$ask= (your function or your object);
Here's some vuejs docs on the subject
https://v2.vuejs.org/v2/cookbook/adding-instance-properties.html
Related
I`m creating bot for MS Teams and using JS Microsoft Bot Framework V4 SDK.
In my work, I use search message extension and to work with it, I implemented the onSelectItem method that returns a adaptive card. I will give an example of the code below.
return Promise.resolve({
type: "result",
attachmentLayout: "list",
attachments: [CardFactory.heroCard(
`${file.name}`,
`${text}`,
undefined,
CardFactory.actions([
{
type: "openUrl",
title: "Open",
value: `${openLink}`
},
{
type: "openUrl",
title: "Download",
value: `${downloadLink}`
},
]),
)]
});
Where I pass undefined, this should be the path to the picture, but in my implementation I don't need it. So and this code works great in the browser and on the desktop version here is a screenshot
however, on the mobile version, I get the following result
this is absolutely not the right card, it has no content or buttons
I think I found the answer myself. When the message extension search is triggered, the onQuery method is called and suppose you made a query and received an array of values that you want to display. And here, in the same method, iterating over the array, you must draw two cards at once. For example
files.forEach((file: IDocumentInfo): void => {
const card: any = CardFactory.heroCard(
cutString(file.name, LIMIT),
text,
undefined,
[
{
type: "openUrl",
title: "Open",
value: "", // some value
},
{
type: "openUrl",
title: "Download",
value: "" //some value,
},
]
);
const preview: any = {
contentType: "application/vnd.microsoft.card.thumbnail",
content: {
title: `${cutString(file.name, LIMIT)}`,
text: "", // some text
}
};
And here the variable preview in my case will respond to a small view of information after the search and the variable card will be responsible for the view after selection. And after the card is selected, the onSelectItem method is triggered, which I need to get more information about the document
It turns out that the adaptive heroCard is not to blame here, the onSelectItem method is not called in the mobile application, or I am doing something wrong
const employeeQuestion = [
{
type: "list",
name: "employeeTitle",
message: "What's the employee's title",
choices: ["Engineer", "Intern"]
},
//when role is engineer is true, ask this question
{
when: input => {
return input.role == "Engineer"
},
type: "input",
name: "github",
message: "Enter your github username:",
},
//when role is intern is true, ask this question
{
when: input => {
return input.role == "Intern"
},
type: "input",
name: "school",
message: "What's the school you enrolled in ?",
},
]
The idea is I want to utilize inquirer's when method so the question whether to ask about the user's github or school is dependent on the answer on the employee's title. But when i run node on the command line, the question asking for github / school never appeared. I wonder if I used the method wrong or if there are other alternatives.
inquirer's when method is definitely the correct one for this situation!
There are two possible reasons:
You are using input.role but never defining a role value in the answers hash. You need to refer to the name value from the earlier question, in this case, input.employeeTitle.
If reason 1 does not fix it, try expanding your function a bit. when needs to take in the answers hash as an input, then apply the conditional to that and explicitly return a Boolean. Ex.
{
type: "input",
name: "github",
message: "Enter your github username:",
when: (answers) => {
if (answers.employeeTitle === "Engineer") {
return true;
}
}
For the application I am currently building, there is a dataset of links associated with certain customer profiles and the user receives a list, which looks like the following:
function getList(customItems){
var messageData = {
recipient: {
id: recipientId
},
message: {
attachment: {
type: "template",
payload: {
template_type: "generic",
elements: []
}
}
}
};
customItems.forEach(function(item) {
var url = item._id;
var listItem = {
title: item.title,
subtitle: "",
item_url: url,
image_url: "http://random.image.com",
buttons: [{
type: "postback",
title: "Get other items",
payload: "TEST",
}]
};
messageData.message.attachment.payload.elements.push(listItem);
Anyway, I would like to generate some image from given url the same way it appears in messenger if the link is pasted directly into the text box and haven't figured out yet how to do it. Also, by the way, if I try to display some random image for testing purpposes (http://random.image.com replaced by some valid image url), the image doesn't appear.
Does anyone know how to generate images to be displayed for given urls dynamically?
You either have to implement your own (or open source) thumbnail image processor (with something like ImageMagick, GraphicsMagick, G'MIC, gd, PhantomJS + HTML5 Canvas), or use a SaaS solution like imgix.com
I'm developing a simple telegram bot with node.js telegram-bot.
https://github.com/yagop/node-telegram-bot-api
For now I want user to stop typing messages (with letters), just pressing one of a few buttons. And when he clicks on the button, his telegram's client has to send back to my bot another message (something like "clicked yes" or "clicked no").
I've found that it can be made with
var options = {
reply_markup: JSON.stringify({
inline_keyboard: [
[{ text: 'Some button text 1', callback_data: '1' }],
[{ text: 'Some button text 2', callback_data: '2' }],
[{ text: 'Some button text 3', callback_data: '3' }]
]
})
};
bot.sendMessage(msg.chat.id, "answer.", option);
So user receives 3 kind of messages, and when he clicks them, he doesn't send me back anything.
I need another type of buttons (which will be in the bottom of client's app).
You need to listen for the callback_query .. As outlined :
bot.on('callback_query', function onCallbackQuery(callbackQuery) {
const action = callbackQuery.data;
const msg = callbackQuery.message;
const opts = {
chat_id: msg.chat.id,
message_id: msg.message_id,
};
let text;
if (action === '1') {
text = 'You hit button 1';
}
bot.editMessageText(text, opts);
});
More info can be found in the library itself. : https://github.com/yagop/node-telegram-bot-api/blob/0174b875ff69f6750fc80a049315c9a0d7a5e471/examples/polling.js#L78
Some further reading indicates : https://core.telegram.org/bots/api#callbackquery
TelegramBot emits callback_query when receives a Callback Query
This relates to this documentation here : https://core.telegram.org/bots/api#callbackquery
If the button was attached to a message sent via the bot (in inline mode), the field inline_message_id will be present.
Exactly one of the fields data or game_short_name will be present.
You are using inline keyboard, instead you can try reply keyboard markup which appears in the bottom of telegram screen as you said.
It is implemented easily and you can find some useful information about it here and here.
I have a JSON object like this in my application:
var pages = {
home: {
title: "Home",
description: "The home page",
file: "home.html",
url: "/home"
},
blog: {
title: "Blog",
description: "Our blog",
file: "blog.html",
url: "/blog"
}
};
The properties file and url can always be derived from the respective key, so I currently define the above object like this in my code:
var pages = {
home: {
title: "Home",
description: "The home page"
},
blog: {
title: "Blog",
description: "Our blog"
}
};
$.each(pages, function(key, value) {
value.file = key + ".html";
value.url = "/" + key;
}
However, since file and url are derived attributes, adding them to the object seems redundant. But since I pass the value around for each page, not the key, I would have to add it to the object as well, which would also be redundant. Like this:
var pages = {
home: {
title: "Home",
description: "The home page"
},
blog: {
title: "Blog",
description: "Our blog"
}
};
$.each(pages, function(key, value) {
value.jsonKey = key;
}
Now I have three different approaches and don't really like any of those. I think this should be a fairly common problem, so how would you approach this? And what if the derived attribute is to be used more than once?
you should consider storing pages as a list of objects rather than as an object with properties. This seems more consistent logically and solves your redundancy concerns.
var pages = [
{
key: 'home'
title: "Home",
description: "The home page",
},
{
key: 'blog',
title: "Blog",
description: "Our blog",
}
];
additionally. you can create classes for page objects and use methods that compute the derived properties (optionally caching them, in case you think repeated access is costly. However, doing that for simple string concatenation seems like an overkill)
Why do you want to store the same data in a different form, when you already have it in one form(your key).
In my opinion, don't go for any of these, because whenever you wish to get the file and url for a particular page, you can easily get it from the page.key.