How to restore/load a DB saved state in Datatables? - datatables

I am using stateSaveCallback to save a Datatables state into the database. It submits the current state via AJAX to a script so I can save the JSON.
I can attach the save function to a button click like so:
$( ".save_state" ).click(function(e) {
e.preventDefault();
table.state.save();
});
But I cannot find any documentation on how to restore or load that script using a click. The closest reference I can find is on this page
https://datatables.net/reference/api/state.loaded() which references restoring the saved state.
I am using stateLoadCallback but I think this just does it on load. I would like to do it via a click, so users can save their state in the database and click restore to load it back later (we will offer multiple state saves, like a Saved Search, so they click to restore a saved search).
Thanks

After inspecting the source code, it looks like state loading is performed only once during initialization. Therefore your best bet is to use destroy option as destroy: true and re-initialize your data table on click.
I assume you have defined a callback using stateLoadCallback option that query the server upon re-initialization.

Related

VueJS2: Drop down menus and navigating away: If user returns to menu, how to pre-select the option he had chosen?

I have a form with a dropdown list of country options like so:
When the user selects an option, the form will load some data from an API so the user can make changes. However, some parts of the form have some deeply nested components where the user can edit additional data on a separate page. The problem is that when the user changes navigation and then clicks the back button on the browser, the drop down list is 'reset' and he has to select again the country that he was editing.
Can someone suggest a way to handle this issue so that if user clicks the back button on his browser (or the page has a "back to results link"), he will go back to the form and it will already be pre-selected with his option?
Should I be handling this via $route.query, localstorage, vuex? I would prefer not to use Vuex but I guess I can if needed.
Is $router query all i need here? I can capture the country's id and run the API call again on navigation back to the drop down selection page?
Example data from API:
{
id: 1,
name: 'Afghanistan'
}
When user selects a country from menu, I run an API get request like so:
async setSelectedCountryObj(value) {
if (value) {
const response = await APIService.tempISOCountryById(value.code)
....snip...
it's possible to handle with router, but that not a good way, you should go with vuex, that best way, just create store, and dispatch after select value, and always get value when come on that component, that essay not that much difficult, let me know if you need but i know you can.

Best way to run an action until expected condition is met in Nightwatch.js?

I am automating a portion of a website that kicks off a job when you click a button. The status of the job is reported on the page in another field, but it isn't automatically pushed. The end user needs to click a Refresh button inside the page to see the latest status.
Something like this
browser.expect.element('#status').text.to.equal('Done').before(10000);
would work if the data was pushed without using interaction, but since I have to manually click another button to get the latest status that wouldn't work.
Is there a built in method to do something every [interval here] until [condition true] or [timeout reached] in Nightwatch? I don't want to use a hard pause since the job could take more or less time depending how the server is feeling.
By another field do you mean an iFrame, svg or perhaps another tab/window?
You don't need manually, there is an option to switch to a different window with the following:
Window Handles + SwitchTo:
command(windowNum){
const result = browser.windowHandles();
let handle = result.value[windowNum];
browser.switchWindow(handle);
}
Refresh a page
browser.refresh();
I don't believe there is a built in method in Nightwatch but I'm sure you can use a for loop and an if statement

Vuex actions and dialog window

My application has a function to save a document, which opens a save dialog to let the user choose where to save the document.
Since that function handles not only state but also a part of the UI/UX through the use of a dialog, is it considered a bad practice to move that piece of code in a saveDocument Vuex action, so that it would be reusable from multiple places in my code?
I don't think it's a bad pratice. Actions can receive parameters and they usually do.
Anyway, you can store the variable which says where to save the document in your state (setting a default value if you want) and change the value (with an action and a mutation) in your UI/UX component. Then in your action, you can get this information from the state via getter.
I hope this helps!

SAPUI5 sap.ui.table.Table

is there a way to save the columnsettings of a SAPUI5-Table?
if the user logout and relog again the table properties should be saved.
what i have to do is to save the column settings which can be manipulated by user interaction.
Property: showColumnVisibilityMenu:true
i'm using sap.ui.table.Table
var oTable = new sap.ui.table.Table({
title: "Table Example",
selectionMode: sap.ui.table.SelectionMode.Single,
showColumnVisibilityMenu:true, // those settings should be saved
});
actually i've found an example here to preview the selection of the columns (hide or show):
http://jsbin.com/ceduc/1/edit?html,js,output
So when the user decides to hide the column "Key1 Label" (figure below) and want to logout and relog again, the column shouldn't be visible. the configuration of the table columns should be saved for a user. how to do that?
It depends on how exactly do you want to persist the view settings and on what backend you have.
If you have an ABAP backend which has the unified shell services (delivered as part of Fiori), then you can use the standard Personalization controller / services to persist the settings. See this demo, the UI5 documentation and the unified shell service docu.
If you have any other type of backend or you don't want to use the personalization services, then you should save the visibility of the columns inside a (dedicated) model. Then you can save the content of this model on your backend (by simply sending it to a dedicated REST service and persisting it e.g. in the database). When the user logs back in, you can read this model and simply restore it.
Another possibility would be to save it in the local storage of the browser. You still need the model from above, but instead of sending the data to the backend via AJAX, you simply save it to the local storage and load it from there when needed.
You can make use of SAP's standard Shell personalization Service.
Here is how I would do it.
Use Personalization Dialog (sap.m.P13nDialog) for managing Table's options
Get standard personalization service provider
var oProvider = sap.ushell.Container.getService("Personalization").getPersonalizer(oPersId);
Connect your table with personalization provider and activate
var oTablePersoController = new sap.m.TablePersoController({
table: oTable,
persoService: oProvider }).activate();
This will automatically take care of saving and retrieving variants/personalization.
Launch the Personalization Dialog upon user cliking the corresponding button
You may use sap.ui.table.TablePersoController for sap.ui.table.Table

Symfony2: Edit file upload

I am using the cookbook article from symfony.com to implement a file upload option for images.
Now I want to load up other images to the entity.
The default strategy for editing is:
1. Fetch out of DB
2. Inject into Form
3. Persist
Somehow this strategy doesn't work anymore when using file uploads (doctrine doesn't execute the events)
What else could I do to make the articles with picture editable?
The cookbook does not handle updates, in particular in the case where only the file changes.
In this case, the PreUpdate event is not triggered, so you need to trigger $entity->preUpload() manually before the $em->persist($entity), so that the file upload gets handled in any case (preUpload will alter $entity->path so the persisting will occur)
If you change only the upload field the lifecycle not run the upload method, In the cookbook is reported the solution in a quote box as below:
The PreUpdate and PostUpdate callbacks are only triggered if there is
a change in one of the entity's field that are persisted. This means
that, by default, if you modify only the $file property, these events
will not be triggered, as the property itself is not directly
persisted via Doctrine. One solution would be to use an updated field
that's persisted to Doctrine, and to modify it manually when changing
the file.
add a dummy field to update in the controller before persist event as suggest by this duscussion:
https://github.com/symfony/symfony-docs/pull/564
public function setFile(UploadedFile $file)
{
$this->file = $file;
$this->updatedAt = new \DateTime();
}
I have was in similar situation.
I try to edit existing record in database with path to the file.
When i edit record i must upload new file, what is not comfortable for users.
In my solution i use variable tmp file for file hash and variable file name.
All needed operation i made in Action edit class.
Full example action class in bellow link
https://github.com/marekz/php_examples/wiki/Symfony-how-to-edit-attachment-form