Title is maybe confusing but I will try to explain what is that I need.
I have application that shows tables of some place (e.g restaurant). This tables are shown to end user.
But I want owner to be able to rearrange these tables position from admin panel. He will be presented container ( just a rectangle to keep it simple ) and I want them to be able to take table (it can be icon or whatever) and place it wherever they want (literally in any direction or position in this container). They can add as many tables as they want and place them where they want. This part is for frontend and I am not too scared of this. But problem for me is how can I save this information using Laravel? because I want owner to save this position of tables and then when end user comes to page of that place I want them to see the positioning of these tables that owner provided.
How can I achieve this? Is it possible?
I don't need Laravel specific answer, just to point me in right direction so I can understand the logic of how this can be saved on backend.
I am using Vue.js on frontend and Laravel for backend.
I made this sketch so you can see what I mean : https://prnt.sc/1tcv3lf
Off the top of my head:
Frontend
In Vue, you can implement a reusable component for the tables. These components will have a top and a left props which define their absolute position from the container's top and left (CSS rules). You can easily make them draggable using jQuery by calculating mouse pointer's position relative to the container's top-left corner. Pass them as props into top and left for the table components. Store them in an array [{ top: _, left: _ }]. Append to this array whenever a new table is added.
When save button is clicked send this array to the backend.
Backend
Not sure what exactly is bothering you about this, you can simply store it in a database with top and left columns, each row representing one table in your frontend.
Then you can query this database to fetch all rows whenever users visit the page, pass it as an array to the frontend. The frontend will use this array to construct all the tables in the right positions.
Related
I am having a little problem with the form system in Symfony 3.3.
I do want to generate a table of form-fields inside a form, depending on the data the user is selecting inside the form.
For example, I have one field with a daterange, that I want to use for the days beeing displayed on the x-axis. On the y-axis I want to display the data the user has selected from a multiselect, that has 1..3 different categories.
The goal is to generate a table after these fields are selected, that has an integer formtype for each cell, that can be changed by the user.
I am quite new to symfony and this really makes my head hurt.
My question is, what would be the easiest or at least most clever concept to achieve this goal in Symfony 3.3?
Have a look at Symfony Form Events: https://symfony.com/doc/current/form/events.html you might be looking for preSubmit or postSubmit.
You could also look at a data transformer: http://symfony.com/doc/current/form/data_transformers.html
Finally based on you wanting to render a table, you could probably do this just in twig templates: https://symfony.com/doc/current/reference/forms/twig_reference.html
In Angular, speed is the name of the game and rendering views with useful data as quickly as possible is always sought after. Angular allows us to reference data between the Controller and the View seamlessly using Angular's templating engine, which can make rendering views with correctly bound data lightning fast.
For example, lets say we have a simple Angular App which is simply a table of contacts with fields like First Name, Last Name, Phone, Email, and Address. We then want a Details view that appears when you click on a table row. We can wire up the <tr> to change views on click like this
<tr ng-repeat="contact in Contacts" ng-click="showDetails(contact)">
Then we can change the view and "instantly" show contact data in the new view. For example, we can change an <h1> at the top of the page to be Contact - John Smith using the data that was provided in showDetails.
While this data is being shown, more data can be retrieved from the server asynchronously that will then fill in the rest of the fields.
However, what do we do if we want to get to this details page directly from the url? If the contact table was sitting at /contacts and the details page was something like /contacts/detail/1 then attempting to go directly to /contacts/detail/1 would result in the <h1> above to be blank.
This is clearly because we did not use the showDetails() method to invoke the view and pass the clicked contact into it directly. In this case, we would need to take the contact id in the URL and run an AJAX request to get ALL of the data.
My question is, at what point do we draw the line between trying to make our views and data quickly accessible and making them robust?
Robust is a must.
So we need to start there. Then we can move forward to optimize and make data "quickly accessible", as you put it, as much as possible.
In order to do that, every view in an SPA that is directly correlated to a URL needs to be initially stateless. That basically means that a reload on any url will load the desired view correctly and completely.
We can get the best of both worlds by using nested routes. If every route loads only what it needs, but also draws on parent routes (loading them if necessary, or just using them if they have already been provided) then you can achieve both robustness and "quick accessibility" to data.
In your particular example, the base route would be contacts. Then there could be a nested route inside of that which would display the details of a particular contact, contacts/detail/{id}. Loading the base url would load the list of contacts, and loading the details view would load both the list of contacts and the details of a particular contact. To provide quickly accessible data when going to the nested view, we could include logic that checks to see if the parent view data is already loaded, and only load if necessary. Then when navigating from the contacts to the contacts/detail/{id} view, we could quickly display data from the parent view in the child view, while loading data specific to the child view. A reload at contacts/detail/{id} would simply load both. When navigating back to the parent, the parent data would already be loaded.
If you were to use something like ui-router to create complex routes, then you would not use showDetails() to alter the model, you would use showDetails() to alter the route. Then your model would set itself up based on the route, and your view would follow.
For example, you could have something like:
$scope.showDetails = function(contact) {
$state.go('contacts.detail', { contactId: contact.id });
};
Then the controller could use $stateParams to retrieve any data you wanted for the specific contact from the server (asynchronously using promises). You could also include your own flavour of caching/loading via services to manage things like performance if you found it necessary.
I have an MVVM WP8 app that loads a large Pivot to start. From one of my pivots, users can filter one of the lists on that pivot item. I want to display the filter options on a separate page, process the filter on my list, and then redirect them back to the pivot in its prior state - while at the same time, updating the list on my pivot item with the filtered list.
I don't want to reload my entire pivot at that point, I want to go back to the pivot I came from and update its data context/items source only.
What's a good strategy for getting something like this done?
I have created a Sample Module (Admin Side) in Magento.. I managed To created a form and Then Stored the form field values in Database. Now I am trying To create a search view for that. to show me all the values which i have stored in my table. however i am not able to get it. when i press the tab I directly get the form view. I want the search view first and a button there which ll direct me to this form. I want it the same way as it is for product, category or any other module. Do anyone Know How can I do it.
It's called a grid. The process is kind of long to explain here, but if you search online there are a few tutorials that explain how to do it (here's one that I found useful: http://www.webspeaks.in/2010/08/create-admin-backend-module-in-magento.html). Keep in mind that you can also model your own code after core code. If you want to make a grid like the Category grid, then go look in the code how its made.
I have a request concerning Drupal 6.x
I'd like to have this behaviour:
imagine to have 2 columns, on the left a list of nodes (only titles for example) and on the right a view showing just one of the contents on the left.
My idea would be to achieve this with an AJAX-fashion: clicking a link in the list on the left updates the view on the right with the actual node.
Which is the best way to handle this?
My idea is to use Panels, make 2 column panel with 2 views, one (left) filtered on content type, with no arguments, and one on the right which takes in as an argument the node id to be displayed.
But how to link the 2 views with AJAX?
(or, better, how to update the view on the right with an AJAX call?)
is this possible?
Any help or idea is really welcome
Thanks!
Cheers
Mauro
You also can do a quick hack, which is quite flexible, because it allows you to change your views without changing code.
I have had a similar task recently and for your task I would do the following:
for your right column, create a exposed filter (node id) and hide whole exposed filter form using CSS.
using jQuery, attach a click behavior to titles on your left column.
the click behavior takes the node id, finds the attached exposed filter at the right column, enters the node id into the input field and executes form's .submit().
the .submit() triggers the build-into-views well debugged ajax request which refreshes your right column.
this is certainly possible, and not very difficult to do.
Your task can be divided into two main parts:
Providing a 'callback' URL in the Backend that takes a node id (nid) and returns the markup to display the node in the right panel in a format that can be processed by javascript. This will be done in PHP within a normal Drupal module. The main point is not to return a full Drupal page as usual, but only the markup for the node.
Create logic for the Frontend that, when triggered by clicking a link in the left panel, retrieves the new node markup via the URL callback above and replaces the content of the right panel with it. This needs to be done in javascript, using the Drupal javascript API with jQuery.
You can find an introduction and example for AJAX in Drupal here. (This does almost exactly what you want to do, only with images)
You should also look at this more general entry point for JavaScript in Drupal.