Quasar Uploader: Holding files to upload in state - javascript

Quick question on the Quasar Uploader, is there a way to hold the file(s) in state?
The flow I'm trying to accomadate is something like so:
Ask user for data
Ask user for file
Ask user for more data
Use all the collected data to perform multiple API requests.
The issue is the file uploader seems to perform the request immediately, which is a problem because I don't have the information needed at the point I am asking that question (yes, we could maybe move this step to the end, but thats not the point :D).
Factory Function
There is a factory function that you can use, but it seems to be immediately invoked. So unsure how that would work...
For example is something like this possible:
<template>
<q-uploader :factory="factoryFn" />
</template>
<setup script>
factoryFn(){
return (user_id, pet_id) => {
new Promise...
}
}
// and invoke factoryFn() later?
</script>
I tried variations of the above with no real luck...

Related

How can you trigger view (partials) changes in JS based on data flow?

I have the classic problem everyone has: I did something, change the interface. Now, I have the option of murdering the code with stuff like this, which I currently have to do:
ajax_call.done(function() {
//Look at the current view, see what data came, do a check like:
if(data_that_came_back.component_activated == true) {
//Update the view with a new view that I have to write custom templates and so on. }
)
});
This is dirty. It forces me to keep thinking about classes when I should only be thinking of data and a controller should decide what view to change based on what data I get back. I know this is what React was built for, but is there no cleaner solution, a library that I can use for this specific thing?
I'm basically trying to go from this:
to this (when the user clicks "Activate"), when the AJAX call is processed:
and finally, to this, once the AJAX call is done and successful:
I can't even think what hell I'd have to go through if I had to handle more cases (such as, what if a weird error happens, what if the call is not successful, what if resources are not available, etc.).

How can I dynamically generate content of a Blockly dropdown menu?

I am writing an application using python and flask.
In the webinterface, the user is able to make small customized programs using blockly.
Some of the already existing blocks have a dropdown menu.
All that works fine.
But now I want to have a block with a dropdown menu where the options are certain files on a usb stick the python backend found by walking through the usb stick directory.
I would like to fill the dropdown menu with these files now. I cannot, however, know them in advance and that is why they have to be dynamically generated - but by python, not by javascript or that like.
I already found this here: https://developers.google.com/blockly/guides/create-custom-blocks/dropdown-menus (at "Dynamic menu" at the end), but that does not help in my case, since I want the information to come from the python backend and not from javascript.
Does anyone know a way to do this?
Thank you a lot in advance!
This is a pretty old question, so I'm not sure if the OP still needs an answer, but I'm answering on the assumption that this is a situation where the OP is using an asynchronous JavaScript call to the backend and can't just return the results because of that.
We have a not dissimilar situation in our application (albeit using a nodejs backend) where we're populating dropdowns based on options retrieved from Google Cloud Datastore. We have a React App, so our solution was to have a Flux store attached to the window which our asynchronous call populates upon completing, and then have the dropdown generation code access that store. Obviously, a full Flux store may not be appropriate for all situations, but my general advice here would be to pass in an option generator function and have it read from a store or other variable on the window, and then have your call to the backend run on page load (or when otherwise appropriate) and populate the store on the window. If your app inits before the call is done, you can have it set up to show that it's loading options based on a flag on the store.
As a very simplified case, you might have:
// on page load
window.store = {done: false};
myBackendCall()
.then(function(results){
window.store = {
results: results,
done: true
};
})
.catch(function(error){
console.error(error);
window.store = {results: [], done: true};
});
Then in your selector, you might go with something like:
function generateOptions(){
if(!window.store.done) {
return [['Loading...', 'loading']];
} else {
return [['Select a file', '']].concat(window.store.results);
}
}
this.appendDummyInput()
.appendField(new Blockly.FieldDropdown(generateOptions), fieldName);
Obviously, this is a gross simplification, but I think it's enough to show the technique. We actually made our own custom Blockly fields for this for other reasons, but this should still work with a vanilla Blockly dropdown. Swap out Promise chaining for callbacks if that's how your setup is. You could also make the call inside the block and set a variable on the block itself (this.store or whatever), but that would result in multiple calls being made for multiple instances of the block, so that may not be appropriate for you.

AJAX url and controller

For form submission I use an AJAX call that posts data to a page like form.ajax.php. At this page I check if '_POST' is set and then process the form by validation, and then save the data using my database class. Depending on the result, the ajax-page return a status message back to the form-page which fires an alert message with the status.
My question is how and where should I put my AJAX files. Should I use one file for all kinds of AJAX requests or multiple and how does AJAX fit into web MVC? I have tried to search for it but there seems to be many different opinions.
I usually find it manageable to make ajax calls from the views files which load ajax(js) functions as needed. This way all the functionality related to the front end display is contained in one place and easier to debug later on. I also create common utility ajax functions so minimize code repetition.It goes something like this:
view.php( callController(ajax function) ) --ajax call--> controller.php( return value)---> view.php(updateView(ajax function))
You could, for clarity, use one file per AJAX action, and put them all in the same directory, like /AJAX/logout.ajax.php, /AJAX/login.ajax.php etc. If you only have a couple of actions you can just use one file to serve them all.
This is just a matter of convention between you and the people you work with (including your future self, say 6 months later, when you will have no idea what you did in that project).
As long as everyone is in the same page, you can't really go wrong.
Also, I hope you sanitize your _POST inputs properly so little Robert won't be able to harm your database.

Which file should I use when assigning products to a category in Magento programatically?

I am new to Magento. I have created a category in the back end of Magento. There are quite few threads about how to assign a product to a category, however I don't understand which file should I use to use that code:
Programatically add Magento products to categories
How to assign categories for products in magento Programmatically
Magento wiki
If I understand correctly, the page is generated automatically by Magento, when you create a category and assign products to it. I know there is a view.phtml file which is a template of how the webpage should look like. Thank you in advance, guys. Will be waiting for your respond.
Code examples like that is for developers (which I'm kind of guessing you're primarily not) to put into their own modules, maybe as an observer running on the product save event.
For you I would instead recommend testing out snippets like that in small freestanding files in your magento-folder. At least until you know how to make a proper module this is the easiest way to run some custom code, that perhaps only needs to run once.
Create file triggerCustomAction.php in your Magento root directory, making it accessible from www.yourdomain.com/triggerCustomAction.php to run it once.
Use this as a starting point, with code you need to run at the bottom of the file:
<?php
require 'app/Mage.php';
if (!Mage::isInstalled()) {
echo "Application is not installed yet, please complete install wizard first.";
exit;
}
Mage::setIsDeveloperMode(true);
ini_set('display_errors', 1);
// this can be changed from to any store ID number like this:
// Mage::app()->setCurrentStore(xx);
Mage::app()->setCurrentStore(Mage_Core_Model_App::ADMIN_STORE_ID);
//enter your code to run below here:
Almost eight years have passed since I've asked this question. I see now how bad the question is. I should have explained what I want in the first place; and now I can't even recall.
This is how I would approach the problem:
Create a service class that assigns products to the category. Perhaps create an interface that takes the product entity or the product ID as the first argument, and a category ID as the second.
Reference that service class in another place depending on when I want that population to happen. There are many places:
Controller (either FE or BE) action (perhaps a button)
Data Patch or Install Script (to make sure the changes exist in any environment)
Console command (if desired to execute via bin/magento command)
Cron script, if needs to be a recurring operation
Observer or a plugin if needs to happen when some specific event occurs.
API request, if needed to be triggered from the outside of Magento.
I wasn't aware of these things back in the day. And I wish I would have received this answer back then. I hope it helps other developers who start with the framework and don't know how to structure the app.

How to implement automatic view update as soon as there is change in database in AngularJs?

I am using AngularJs with Grails framework and using Mysql as Database.
I want to implement feature like automatic view update as occur on Facebook.
Till now i am able to send JSON data to angular controller from Grails Controller and populating view.
But how do i implement feature like some one change the database and on real time the views get updated without reloading page.
i cam across
"polling every X milliseconds using $timeout and $http"
will this be efficient for real world application?
Please help me by suggesting some measures or Angular implementations to solve out my problem.
For 'automatic' update of the views, I've used Grails Events Push Plugin, I suggest that you look at it.
http://grails.org/plugin/events-push
It's really easy to send the events to the browser and in the client listen to them and update the AngularJS scope with the propper information.
Example
An angularJS file
window.grailsEvents = new grails.Events('http://myAppUrl.com', {enableXDR:true,readResponsesHeaders:false});
/**
* Module for listening to grails events
*/
angular.module('grailsEvents', []).factory('grailsEvents', function() {
return window.grailsEvents
});
window.myModule = angular.module('myModule',['grailsEvents'])
.run(function(){
grailsEvents.on('myEvent',function(data){
//Every time an event occurs, this will be executed
console.log(data);
});
});
MyEvents.groovy (in grails-app/conf)
events = {
'myEvent' browser:true
}
TestController.groovy (an example of a controller that sends an event)
class TestController{
def index(){
event(topic:'myEvent',data:MyDomain.list())
}
}
If you do have to use MySQL, I would suggest a slightly longer route keeping performance in mind. You definitely do not want to keep polling every X seconds. The SocketIO method indicated in the comments is a good way to go. However you need to expand your design a bit.
You will need to implement a "Topic" concept. For example, lets say you have a page called Fruits, that you wish to update automatically when someone posts something about Fruits. So what you would do is to create a "room" (in Socket.IO terminology) called something like /topics/fruits and have anyone who is viewing this page "subscribe" to this room. Next when anyone posts something about fruits, all you would need to do is "push" this new data to the /topics/fruits room and everyone who is on that view will get the update.
Since you are using grails, here is something to get you pointed towards this: http://compiledammit.com/2012/09/05/websockets-and-grails-broadcasting-to-topics/. For the AngularJS part, you can read up at http://www.html5rocks.com/en/tutorials/frameworks/angular-websockets/ and just implement the Socket.io client part. Just ignore the NodeJS parts on that post.
The example posted by Eylen works like a charm. In addition, if you want to listen for events in a controller and update a model, here is how you do:
grailsEvents.on('myEvent', function (data) {
$scope.$apply(function(){
$scope.mymodel = data.someField;
});
});

Categories