Creating breadcrumbs for table navigation VUEJS - javascript

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!

Related

Working with multiple views using HTML and jQuery

I have two tabs user and admin that render their own tables with separate sets of data. The tables have checkboxes on both tab views. How do I maintain the state of the data and the checkboxes in each view while I am constantly switching between them.
Also, I have noticed that I have a lot of duplicate HTML and JS code since the IDs of the HTML elements have to be unique in both tabs while they are very similar in appearance on both views (needs to be).
So far I have tried HTML5's LocalStorage to save the state of each tab contents but its not really getting me anywhere. Is JQuery's .clone() good enough to maintain what I want?
***Note: I am expecting some suggestions based on industry practices since I think this would be a very common problem.***
What would be an efficient solution for tabbed layout using HTML and JS?
if you are using a single page application you can simply save the state in a simple js object (model).
if its on different web pages local storage or session storage would give you the solution. what is not working for you with LocalStorage? its an adequate solution, especially if you want the state to be saved after you close and reopen the browser

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/

Advice on structuring and rendering different objects within the same view

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.

Trying to understand how to fit Backbone into this menu

I'm just learning Backbone-- it seems awesome but I'm still learning how exactly to wield it. I'm trying to figure out how it fits into this situation where I've been asked to use it, and I was hoping for some leads.
Basically we have a menu that's already totally made HTML/CSS wise, it's done. This menu lets a user select what color of product they're looking for (for example), then what fabric, and so on. The functionality they would like to add to this menu is that as soon as the first choice is made, the color, the second set of options should grey out accordingly: for instance, if you pick red and only 2 of the 5 fabrics are available in red, the other 3 should grey out.
They want this done with Backbone, and it's my first time putting this library to use.
So as soon as a color is picked, I guess I need to make an AJAX request and immediately find out what's good for fabrics and update accordingly, but I'm hitting a little wall because if the HTML is already done...then...there's no "view", not that I made anyway...so...help me out here. Am I thinking about it wrong? Can this be done anyway?
What you'd probably do is have a model to manage your options (color, fabric, etc.). Then, when one of the attributes changes, you fetch the updated possibilities from your server. Of course, for this to work, you need to define your model's url function to generate the url corresponding to you endpoint.
When the data returns from the server, you render the view into the form's element, which will replace the HTML already there (in effect updating what is displayed to the user).
Realistically, although your form already is written, you'll probably find it easier to generate the same HTML in your view's render function, and simply rerender the form each time an option changes. (I.e. don't have the form HTML already present.)
Another option would be to update the values, etc. in the existing form in the DOM using the view's render function.

Dynamic Loading Grids; Javascript or Tag library

I am looking for a grid implementation on my dashboard. The requirement here is that if the data that the grid might be fetching changes while a user is looking through the grid, the changes should be reflected. So the row present in page 1 may be present in page 2 after sometime. If the user clicks on page 2, he should be shown a fresh page that is fetched from database and that item should be in page 2. So, I need to use a pagedObjectList to get the data and show that data when user looks for the next page. The same requirement is for sorting too.
So I am looking for a javascript Grid like jqGrid or DHTMLX grid or a Tag Library which has some sort of ajax calling mechanism for sorting and paging instead of showing the old data which is fetched first.
Please suggest any grid/ tag library implementation which can fulfill the above mentioned requirement. Thanks in advance
I finally went with DHTMLXGrid, it has all the configurable actions I needed, like onPageAction, onSort etc. I could simple write my custom code for those trigger events. I would also recommend it to others, pretty handy and solid.

Categories

Resources