Advice on structuring and rendering different objects within the same view - javascript

I'm building an application and I'm looking for some advice on how to structure a specific piece of functionality I'm working on.
I have this reports view, on this page a drop down with various reports a user can generate. This is what it looks like:
The drop down is just an array I hard coded in the controller. When a user selects a specific report, the controller makes a call to the ReportFactory and returns the selected report object, from there the view builds the report using the returned object.
However, this doesn't work with multiple reports since the html table is completely different depending on the report I need and as of now I've hard coded the report table into the view.
What would be the best way to switch between different reports which would each have their own function to build the object, their own html to render the table and where I can still implement DataTables to all of them once I get to that step.

You could possibly use a named ui-view with ui-router, then each dropdown would be a state which can load a different templateURL and controller.

Related

Creating breadcrumbs for table navigation VUEJS

I'm a Junior Developer and I'm currently having a big issue with breadcrumbs.
For this application, I'm using VueJS and the problem I'm having is the following:
*The user clicks on 'tables' and is sent to the 'tables' page.
-On that 'tables' page, he has a big table in which he's able to click on the various columns to show a new table with data relevant to the column he clicked on.
*For this I'm on the same component so I'm not using routers, but using v-show as I don't want the tables to rerender.
My problem is the following, I have to make a breadcrumbs as he navigates to the different tables (ie: table/holdingList/entrepriseList/clientList..). and they have to be clickable so that I'm able to create a function that injects data into the table or to simply 'show' it and close the others.
Can anyone give me a brief out-line of how to do this? Sorry if it seems trivial. I've already spent a couple of days on it and my brain has turned to mush...
I will start from the easiest solution to implement:
Each v-show will depend on a different data object. Then your breadcrumb has an #click method that will set every v-show data object to false. Give the method a parameter with the name of the data object that you intend to show and display that to true.
The previous answer is enough to get it working. Other ways of achieving the same result in a more maintainable way are:
Create one data object named as activeTable and turn your v-show into a v-if. When you click on the breadcrumb element you change the activeTable data object to an identifier for the table you wish to display. After that your vue-if simply checks if the activeTable === thisTableId. Where thisTableId is the identifier of each table.
You may want to start getting acquainted with Vuex specially if your tables share a similar layout. In that way you will store the data and there is no need to request your data again. This is useful if the data to populate your tables come from an API.
Finally on an SPA architecture there is no actual re-render so you may possibly want to look at that as well.
Please read the guidelines for posting an answer since they require you to show at least some effort from your side. Good Luck!

How do I create select menu in an external file and embed it in html to show the menu

My website has individual pages for members, but I have a select menu used to scroll from one member to the other. I have the select menu coded in the html on every page, but I need a better solution since my membership is growing.
I need to be able to create that same select menu in a separate file with the ability, when selected to jump to another member page, have that embedded in the body where I need it so that all I have to do is alter/ update the external file and it'll be done for all the member pages.
I've looked into javascripting it, mysqling it, but can't find (looking on youtube) a code to exactly help me in what I need.
My typical code for the select
//(select.....
//(option value="http:www.website-Profile-blahblah.html.... so on and so forth.
I need to pull this from an external file to use across the board and place it in the body where I need it.
thanks for any help you can offer.
In general this sounds like something you should be using a back end rendering engine for. As far as the select goes, this would be a great place to use a dropdown menu such as the one provided by bootstrap since clicking a select won't actually move you to another page.
If you dont want to use/can't use a back end rendering engine to render the options, I would suggest looking at angular.js which has a great ng-repeat and ng-option feature that would allow you to dynamically build the select/dropdown with as many users as you want.
angular ng-repeat page: https://docs.angularjs.org/api/ng/directive/ngRepeat
bootstrap dropdown: http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp (note the a tags could go directly to the user's page)
From experience in cases like this, it is much easier to have an SQL table to store the links you would like to use. The next thing to do is to have your back-end send you the list of links. With this, you can dynamically create the option tag and append it to your select tag. functions like newOptionTag.setAttribute('value', 'url'),document.createElement('option') and selectElement.appendChild(newOptionTag) should help you on your way
If you really want to use a seperate file, you could store the membernames and links in a json file. On document load get the file, parse it, then use the object to build the options.
The w3schools website (though frowned upon by some) has a json tutorial and an example that is already halfway there.
EDIT: I see it actually uses mysql to build the json file...

How to save selection state in multipage results view?

I am trying to figure out how I can save selection state in a web app. To be more specific I am making some query interface that queries a mongo backend. The results are are rendered in a image gird type view with checkboxes on each image and a download button to download selected images. Now, I am anticipating dealing with a lot of results for a given search. To handle this I am going to use paging. I am wondering how I would even save the selection state as I am flipping through paged results. I am totally new so if anyone can so much as provide an answer with some supporting information I can look into; that would be great.
Use AJAX to fetch the results on the next pages and append it into a separate section in the page rather than navigating away from the first page. This way the selected results are maintained as they are. You may need to do some calculation around your pagination and some toggling logic to show/hide divs when the pagers are clicked.
Useful link you could use (maybe ignoring the PHP/MySQL parts): http://www.sitepoint.com/pagination-jquery-ajax-php/

Showing multiple AngularJS routes at once

I have built an AngularJS single page app to display reports. There is a select box for the user to select a report from dozens of reports and that report loads in the ui-view using Angular's UI-Router. If they selected the Big Report, the url is something like myapp.com/#/reports/big-report.
I would like to build a print function that would allow them to select multiple reports from a list and print off just those reports all together. I was thinking about loading them into a hidden div with print styles to show them when printing. That seems to work fine for a single report, but I'm not sure how to load multiple.
How would you load multiple "routes" or reports at once into hidden divs? Trying to think of a way to create a dynamic number of hidden ui-views, but I'm not sure that's correct. Maybe iframes loading each report route in it, but that seems dirty. Any ideas?
perhaps you could create a new route that will get each ID (if these reports contain an ID) and render it in the view.
the url would be something like myapp.com/#/reports/more/1,4,6,8 or any other formatting.
And then you can use AngularJS $routeParams to get the reports ID and finally in the view load each of these reports.

Angular controller structure for multipart view

I need to create this layout in a SPA using AngularJS and a web api. The workflow goes as follows:
When the controller loads, two sets of data get fetched from the api (table above and table to the left - e.g. 2 calls to api/data1 and api/data2)
As soon as the user clicks a row in the upper table, detail information gets fetched into the box on the right side (api/data1/3434/detail)
When the user clicks on certain entries from the detail information box, the related entries are being highlighted in the table to the left.
I started creating a view with everything in it, also a controller that exposes properties for all necessary stuff, but now it looks like this (pseudo)
myPageController
table1Data : Array<IData1Model>;
table2Data : Array<IData2Model>;
userSelectedFromTable1 : IData1Model;
userSelectedFromTable2 : IData2Model;
I feel this isn't really good practice. Is there a way to suborganize the parts into some kind of partial views? Subcontrollers? Or is this a common approach? What does the usual controller looks like when he's going to serve for multiple kinds of data / api endpoints?
EDIT
I should clarify that this is just one particular page (section) of a bigger app. Most parts are just frontends for one kind of data, e.g. one controller, one model, one api call etc. Think of the page as some kind of dashboard where multiple data is shown and interact with each other.
is there a way to suborganize the parts into some kind of partial views? Subcontrollers?
These parts should really be directives. You would have the left view being a directive and the right view being a directive with the controller being the glue between the two directive instances.
so an overview of the controller:
myPageController
tablesData : IData1Model[];
userSelectedTable : IData1Model;

Categories

Resources