I'm creating an Angular 2 application that uses REST API to retrieve a list of products and a lot of other features.
I want to implement a sort of loader in two ways:
a loader for each component when the page is loaded, for example, when you load the product category page, you will see a spinner over an overlay that load until the http request and the render is finished.
the same thing when you click for example "add to cart" i want to create an overlay over the product column that disable for a few second clicking again on the add to cart button until the product is added to cart.
How can I do this?
Thanks in advance!
i've founded a sort of solution on the net.
It's this: https://www.npmjs.com/package/angular2-busy
And i'm able to manage the loader on a http request.
It's easy to use and you can applicate this 'busy' loader on Promises and Observable's subscription.
Hope it helps.
You can add a loader for each component when the page is loaded in a simple way. Just add a a loader gif inside the component tag. It will be replaced with the data from the component when component has recived the data from the REST-API.
ex: <mycomponent><img src="spinner.gif"></mycomponent>
For the second part, "add to cart". You should be able to add a css-class to the product column with the overlay, triggered when you click "add to cart".
Call the API and add the product, in the subscription for the HTTP observable, you can set a "callback" method to be called when the operation is complete, in your case close the overlay.
Related
Looking to rebuild account pages for users of a Laravel 8 based application using something like Inertia/Livewire, Vue/React to make just the account area an SPA. User accounts currently have many pages in which to manage their items and have a dashboard that summarises item data that link to item listing pages for managing.
Ideally the new dashboard will have component based widgets which would load the HTML with temporary place holders for the items whilst the data is being requested. Not sure what would make a better user experience, having the whole page show temporary place holders for dynamic data and then all populate at the same time or populate each component as and when the data is ready.
Would it be more efficient to have each component request its own data individually or should each component specify what data it needs to the parent component (dashboard) which then does one request for all widgets?
The widgets would link to item listing pages where users can manage items. The way the listing pages should work is very similar to that of Asana, when an item is selected it opens a panel to the right of the list which loads the data related to that item. Again, when the panel opens it has place holders until the data requested has been fetched.
With Inertia the data can be queried in the controller and then passed as props to the view that Inertia renders. Items would be passed in this way and then listed on a listing page component. The URL should update from /items to /item/123 when clicking an item so it would have its own dynamic route that passes the item id to the relevant action.
Would this have its own action separate from the one that gets the initial list of items?
The list still needs to be there and used to click between items so was thinking it could actually use the same action?
Items could be in the thousands and will have filtering options so pagination and throttling will be necessary.
Been looking at Inertia with Vue so far and it looks to meet requirements, can’t change from using Laravel 8, just wondering what approach would be most suitable or if there is another approach that should be considered. Interested to hear how others might go about it.
So, I am using ui-router for my app's routing. There is a scenario, I clicked like button on the item detail page. Then I hit back button, it goes back to the main page, it is a list of items. The item has a likes counter. But I found the counter did not increase because back button did not fire the controller for main page.
I want to understand how can I fire the controller while clicking back button.
You should isolate your data in a provider to manage the data sync between your views. If all of the data is contained in a service, you can update it from one view, and it will always be synced with the other.
In both of the controllers, require 'ItemRepository' which will provide the data to the views.
In CI, I want to attach selected filter (in $_GET method)
to appear for every link I click.
This filter are persistent so is this filters selected in any page should be available for any other page in project.
For example, I selected dealerID, GroupId in one page, let's say dealer in page www.domain.com/dealers?dealerId=2&groupId=10 page, then if I click this another link named *www.domain.com/group*s the groups page should look like www.domain.com/groups?dealerId=2&groupId=10 that was selected in previous page.
And one more thing: I am using a main controller that will be inherited by all controllers for some reason.
Any help would be appreciated.
You could have one universal $data['filter'] variable that is going to preserve all variables that you need for filtering and than in view just add $filter at the end where you need it.
$data['filter'] can be collected/generated in constructor and defined by default.
It's little bit tricky solution i would rather use session to keep data of that kind and having "reset" button on page.
I have a custom entity which has an entry in the sitemap. When I load the entity in the main window, it opens the grid view on the right - standard behaviour so far.
I now want to change some thins in the DOM of the grid body. Therefor I should execute a Javascript while loading the grid. But I have not found any way to do this yet. I sthis possible?
My second way was to but the grid into an Iframe and then do the task on load. This works, but I loose all the buttons from the entity.
Thank you
The best (and probably only) way I can think of to attach javascript to the load of the homepage grid is to add your functionality to a CustomRule for an EnableRule for any object in the custom homepage grid ribbon, which will execute at the time the ribbon loads.
Only caveats: you probably will have to do some validation to make sure the grid is in the right readyState before changing anything, and you'll need to make sure to return true if you actually want that ribbon object to be enabled.
i have a question for you with no code :)
I have a Struts2 Web Application composed by several tiles. The main tile called content, show the interface for the business use case currently in use.
In one case, I have a content tile composed by only some Jquery accordion and one button "Add". On the action linked to the tiles, I have a collection of oblects. When the tile is open by the user, i loop trouhg the collection to create on accordion 8the relation is 1 to 1).
The Add button add an entry into my collection. After the add, I am aspecting to see another accordion on the page.
Is there a way to refresh the tiles withpout he entire page??
Yes one way is have an action return json, the struts2-json-plugin makes this very easy.
See: https://cwiki.apache.org/confluence/display/WW/JSON%20Plugin
Handling the json on the client side then becomes a JS/JS library question.