Datatables stateSave keeps filters but not pagination - datatables

I am using Datatables to present data to my customers and I have a number of pages to display.
I'm using the stateSave option to save search filter etc.. but for some reason, the current page is not saved and uppon reload, the page is always back to #1.
I've tried to set bStateSave as well... but did not work and now I'm a bit lost.
Here is my table init code :
var table = $('#products').DataTable({
"bStateSave": true,
"pagingType": "full_numbers",
"lengthMenu": [[25, 50, -1], [25, 50, "All"]],
"order": [[ 3,"asc"]],
"responsive": true,
"deferRender": true,
"stateSave": true,
"paging": true,
"language": {
search: "_INPUT_",
searchPlaceholder: "Search products",
},
initComplete: function () {
$('#products').show();
}
});
Does anyone have any insight on how to fix the problem ?
Thanks a lot for your help

Related

How to update Product Custom Attribute with media_image type via REST API in Magento 2.4

I'd like to know how I can update the product custom attribute defined as media_image type via REST API in Magento 2.4.4.
My custom attribute is defined like the following:
{
"is_wysiwyg_enabled": false,
"is_html_allowed_on_front": true,
"used_for_sort_by": false,
"is_filterable": false,
"is_filterable_in_search": false,
"is_used_in_grid": true,
"is_visible_in_grid": true,
"is_filterable_in_grid": true,
"position": 0,
"apply_to": [],
"is_searchable": "0",
"is_visible_in_advanced_search": "0",
"is_comparable": "0",
"is_used_for_promo_rules": "0",
"is_visible_on_front": "0",
"used_in_product_listing": "0",
"is_visible": true,
"scope": "website",
"attribute_id": 185,
"attribute_code": "custom_pic",
"frontend_input": "media_image",
"entity_type_id": "4",
"is_required": false,
"options": [],
"is_user_defined": true,
"default_frontend_label": "custom_pic",
"frontend_labels": [
{
"store_id": 1,
"label": "Custom Picture"
}
],
"backend_type": "varchar",
"is_unique": "0",
"validation_rules": []
}
But I don't know how to update it and can't find the proper documentation.
I can update other custom attributes successfully by endpoint /rest/default/V1/products/{sku}
I tried the following so far:
Tried to pass a valid URL in value. But didn't work!
{
"attribute_code": "custom_pic",
"value": "https://xxxx/.../xxx.png"
}
Tried to base64 encoded string. (Because we can update product images by base64 encoded string.) But no luck!
Could you help me out, please?

Create a oauth-token for integration tests

We want to create a "long lasting" token for integration testing purposes. We are using a keycloak for creating tokens normally. But I don't see a possibility to create tokens with no expiration, so that reoccuring integration tests on dev-stage can be done without interuption.
What would you suggest for such automatically repeating testing regarding oauth?
All access token should expire at some point, that why the rfc details the use of refresh token, wich can be used indefinitly to keep your service running, the basic idea is that when you request an access token, you'll get an access token plus a refresh token, and when the first token expires, you send it to the keycloak server and it will regenerate a new access token and a new refresh token.
In practice, you should use your token as long as its valid (since you know in advance it lifespan), and when your token is about to expire you resend the request using the refresh token.
src: RFC oauth2
How about make longer time(a couple of days) for access token before start integration test?
After finish integration test, return to default time(5 minutes).
This is my demo test steps
Get master of realm access token and assign token variable
Get my-realm's realm data
this is default my-realm's setting data
{
"id": "my-realm",
"realm": "my-realm",
"notBefore": 0,
"defaultSignatureAlgorithm": "RS256",
"revokeRefreshToken": false,
"refreshTokenMaxReuse": 0,
"accessTokenLifespan": 300,
"accessTokenLifespanForImplicitFlow": 900,
"ssoSessionIdleTimeout": 1800,
"ssoSessionMaxLifespan": 36000,
"ssoSessionIdleTimeoutRememberMe": 0,
"ssoSessionMaxLifespanRememberMe": 0,
"offlineSessionIdleTimeout": 2592000,
"offlineSessionMaxLifespanEnabled": false,
"offlineSessionMaxLifespan": 5184000,
"clientSessionIdleTimeout": 0,
"clientSessionMaxLifespan": 0,
"clientOfflineSessionIdleTimeout": 0,
"clientOfflineSessionMaxLifespan": 0,
"accessCodeLifespan": 60,
"accessCodeLifespanUserAction": 300,
"accessCodeLifespanLogin": 1800,
"actionTokenGeneratedByAdminLifespan": 43200,
"actionTokenGeneratedByUserLifespan": 300,
"oauth2DeviceCodeLifespan": 600,
"oauth2DevicePollingInterval": 5,
"enabled": true,
"sslRequired": "external",
"registrationAllowed": false,
"registrationEmailAsUsername": false,
"rememberMe": false,
"verifyEmail": false,
"loginWithEmailAllowed": true,
"duplicateEmailsAllowed": false,
"resetPasswordAllowed": false,
"editUsernameAllowed": false,
"bruteForceProtected": false,
"permanentLockout": false,
"maxFailureWaitSeconds": 900,
"minimumQuickLoginWaitSeconds": 60,
"waitIncrementSeconds": 60,
"quickLoginCheckMilliSeconds": 1000,
"maxDeltaTimeSeconds": 43200,
"failureFactor": 30,
"defaultRole": {
"id": "3798f9f6-3383-474e-997e-123d9b534ae4",
"name": "default-roles-my-realm",
"description": "${role_default-roles}",
"composite": true,
"clientRole": false,
"containerId": "my-realm"
},
"requiredCredentials": [
"password"
],
"otpPolicyType": "totp",
"otpPolicyAlgorithm": "HmacSHA1",
"otpPolicyInitialCounter": 0,
"otpPolicyDigits": 6,
"otpPolicyLookAheadWindow": 1,
"otpPolicyPeriod": 30,
"otpSupportedApplications": [
"FreeOTP",
"Google Authenticator"
],
"webAuthnPolicyRpEntityName": "keycloak",
"webAuthnPolicySignatureAlgorithms": [
"ES256"
],
"webAuthnPolicyRpId": "",
"webAuthnPolicyAttestationConveyancePreference": "not specified",
"webAuthnPolicyAuthenticatorAttachment": "not specified",
"webAuthnPolicyRequireResidentKey": "not specified",
"webAuthnPolicyUserVerificationRequirement": "not specified",
"webAuthnPolicyCreateTimeout": 0,
"webAuthnPolicyAvoidSameAuthenticatorRegister": false,
"webAuthnPolicyAcceptableAaguids": [],
"webAuthnPolicyPasswordlessRpEntityName": "keycloak",
"webAuthnPolicyPasswordlessSignatureAlgorithms": [
"ES256"
],
"webAuthnPolicyPasswordlessRpId": "",
"webAuthnPolicyPasswordlessAttestationConveyancePreference": "not specified",
"webAuthnPolicyPasswordlessAuthenticatorAttachment": "not specified",
"webAuthnPolicyPasswordlessRequireResidentKey": "not specified",
"webAuthnPolicyPasswordlessUserVerificationRequirement": "not specified",
"webAuthnPolicyPasswordlessCreateTimeout": 0,
"webAuthnPolicyPasswordlessAvoidSameAuthenticatorRegister": false,
"webAuthnPolicyPasswordlessAcceptableAaguids": [],
"browserSecurityHeaders": {
"contentSecurityPolicyReportOnly": "",
"xContentTypeOptions": "nosniff",
"xRobotsTag": "none",
"xFrameOptions": "SAMEORIGIN",
"contentSecurityPolicy": "frame-src 'self'; frame-ancestors 'self'; object-src 'none';",
"xXSSProtection": "1; mode=block",
"strictTransportSecurity": "max-age=31536000; includeSubDomains"
},
"smtpServer": {},
"eventsEnabled": false,
"eventsListeners": [
"jboss-logging"
],
"enabledEventTypes": [],
"adminEventsEnabled": false,
"adminEventsDetailsEnabled": false,
"identityProviders": [],
"identityProviderMappers": [],
"internationalizationEnabled": false,
"supportedLocales": [],
"browserFlow": "browser",
"registrationFlow": "registration",
"directGrantFlow": "direct grant",
"resetCredentialsFlow": "reset credentials",
"clientAuthenticationFlow": "clients",
"dockerAuthenticationFlow": "docker auth",
"attributes": {
"cibaBackchannelTokenDeliveryMode": "poll",
"cibaExpiresIn": "120",
"cibaAuthRequestedUserHint": "login_hint",
"oauth2DeviceCodeLifespan": "600",
"oauth2DevicePollingInterval": "5",
"parRequestUriLifespan": "60",
"cibaInterval": "5"
},
"userManagedAccessAllowed": false,
"clientProfiles": {
"profiles": []
},
"clientPolicies": {
"policies": []
}
}
Extend logger period of access(2 days) token lifetime
I changed accessTokenLifespan value from 300 to 172800 (= 3600 * 24 *2) seconds
use PUT method for update realm data
In the UI of Keycloak, the Access Token Lifespan will be changed into 2 days
the Status of API call should be return 204 (No Content)
Run your integration tests
Return back 2.'s default(or previous) lifetime

Can't get correct autoformat on save in Visual Studio Code with ESLint and Prettier

in Visual Studio Code with ESLint and Prettier when working on .vue files, it seems I can't get vue/max-attributes-per-line to auto-fix correctly.
For example, with vue/max-attributes-per-line set to 'off', and I try to add line breaks manually it corrects it to always have every element on no more than one line, no matter if it is 81, 120, 200, or more characters wide. How can I figure out what is forcing my markup elements onto exactly one line?
I am using ESLint version 5.1.0 and Visual Studio Code (without the Prettier Extension), with Prettier 1.14.2.
Here's the example in a .vue file-- I cannot make this go on multiple lines no matter what I do, when 'vue/max-attributes-per-line': 'off'. Every time I save, it forces the long line of markup to be all on one line.
<template>
<font-awesome-icon v-if="statusOptions.icon" :icon="statusOptions.icon" :spin="statusOptions.isIconSpin" :class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]" />
</template>
If I set 'vue/max-attributes-per-line': 2, it formats like so, with one line break(which is quite wrong as well).
<font-awesome-icon
v-if="statusOptions.icon"
:icon="statusOptions.icon"
:spin="statusOptions.isIconSpin"
:class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]"
/>
If I try to reformat it manually, it just reverts to the above when I save.
Additionally, it seems to reformat twice when I hit Ctrl+S: first it reformats to put it all on one line, then a half-second later the formatting above results. Any ideas? What is causing this weirdness--are there multiple reformatters running? How do I figure out what the first one is to disable it?
VS Code workspace settings:
{
"editor.formatOnType": false,
"editor.formatOnPaste": false,
"editor.formatOnSave": true,
"[javascript]": {
"editor.tabSize": 2
},
"[vue]": {
"editor.tabSize": 2
},
"[csharp]": {
"editor.tabSize": 4
},
"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
"javascript.referencesCodeLens.enabled": true,
"vetur.validation.script": false,
"vetur.validation.template": false,
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"eslint.options": {
"extensions": [
".html",
".js",
".vue",
".jsx"
]
},
"eslint.validate": [
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
"vue-html",
{
"language": "javascript",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
}
],
"editor.rulers": [
80,
100
]
}
.eslintrc.js:
module.exports = {
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
node: true,
jest: true
},
globals: {
expect: true
},
extends: [
'prettier',
'plugin:vue/recommended', // /base, /essential, /strongly-recommended, /recommended
'plugin:prettier/recommended', // turns off all ESLINT rules that are unnecessary due to Prettier or might conflict with Prettier.
'eslint:recommended'
],
plugins: ['vue', 'prettier'],
rules: {
'vue/max-attributes-per-line': 'off',
'prettier/prettier': [ // customizing prettier rules (not many of them are customizable)
'error',
{
singleQuote: true,
semi: false,
tabWidth: 2
},
],
'no-console': 'off'
}
}
Without changing any settings, ESLint --fix does indeed format properly--breaking all my .vue template elements into many lines properly. So any ideas how I whip VS Code into shape? The above settings didn't help, but I am at a loss how as to even know what is interfering. Any ideas?
To emphasize, when I save in VS Code, a long HTML element will collapse to one line then break to two lines a half-second later, all from one save operation. I'm expecting it instead to break it up into many lines. It would be okay if it took several saves, but instead the first save shows this behavior as well as every subsequent save.
Short answer: I needed: "editor.formatOnSave": false, "javascript.format.enable": false.
I finally found the magical combination of settings, thanks to this thread from Wes Bos on Twitter. I was right in my suspicion that there seem to be multiple conflicting formatters. Though I'm not sure what they actually are, I was able to turn off all but eslint as follows:
In the VS Code settings, I need:
"editor.formatOnSave": false,
"javascript.format.enable": false,
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"eslint.options": {
"extensions": [ ".html", ".js", ".vue", ".jsx" ]
},
"eslint.validate": [
{ "language": "html", "autoFix": true },
{ "language": "vue", "autoFix": true },
{ "language": "javascript", "autoFix": true },
{ "language": "javascriptreact", "autoFix": true }
]
In .eslintrc.js, then I can use the settings in my original post and then also change 'vue/max-attributes-per-line' as desired. Then VS Code's ESLint plugin will format code one step at a time on every save, much as kenjiru wrote. One last snag: HMR won't pick up these changes, so rebuild from scratch.
With 'vue/max-attributes-per-line': 'off' the rule is disabled so VSCode does not try to fix the long line on autosave. Other eslint fixes are applied, as expected.
With 'vue/max-attributes-per-line': 1 VSCode fixes only one error per save. This is a known limitation of vscode-eslint
vscode-eslint only does a single pass in order to keep to a minimum the amount of edits generated by the plugin. The goal is to keep as many markers (like break points) in the file as possible.
VSCode has a time limit of 1 second for all the plugins to compute the change set on save. If one of the plugins causes the other plugins to not run for 3 times in a row, it will be disabled.
eslint --fix runs all the rules in a loop until there are no more linting errors. I think it has a limit of 10 iterations maximum.
See these links for more details:
https://github.com/Microsoft/vscode-eslint/issues/154
I've created a minimal setup to demonstrate this issue:
https://github.com/kenjiru/vscode-eslint-onsave-issue
I know this is old but in case anyone should find this and not have success with the posted solutions, the fix for me was to add:
"editor.codeActionsOnSave": {
"source.fixAll": true
}
I did not need "editor.formatOnSave": true for some reason. I do not have Prettier installed - only ESLint - but this now performs any fixes automatically when I save.
This is the setup I ended up going with in VSC settings.json file.
Works perfectly for locally set up eslint disabling the default vetur settings (if the plugin is installed).
"files.autoSave": "onFocusChange",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": false,
"javascript.format.enable": false,
"eslint.alwaysShowStatus": true,
"eslint.options": {
"extensions": [ ".html", ".js", ".vue", ".jsx" ]
},
"eslint.validate": [
"html",
"javascript",
"vue"
],
I tried this things and it didn't worked.
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,
but it at last i tried this. and worked
"diffEditor.wordWrap": "off",
I bumped into the same issue, and surprisingly found that prettier and vetur were conflicting. I had to disable vetur formatter and it now works as expected.
If you have this section in your editor's settings.json and you have prettier installed,
{
"[vue]": {
"editor.defaultFormatter": "octref.vetur",
},
}
chances are, these two formatters are conflicting and thus the unexpected behaviour.
A quick workaround is to comment it as below, or simply delete it permanently.
{
"[vue]": {
// "editor.defaultFormatter": "octref.vetur",
},
}
I've struggled through a similar problem. I tried the solution above but didn't work for me, unfortunately. I'm using eslint and Vetur, didn't install prettier plugin but configured it via eslint and enabled "eslint.autoFixOnSave": true. I finally got the correct autoformat on save by removing the following configuration in settings.json. Not sure why but it's working for me.
"eslint.options": {
"extensions": [".html", ".js", ".vue", ".jsx"]
},
"eslint.validate": [{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
}
]
Will update this answer if I get other issues related to this.

Storing account settings in a single row with complex data

I need to store account settings for each account profile. I decided to use SQL DB for this, but not sure should I go with complex data (json/xml).
I found answers
Using a Single Row configuration table in SQL Server database. Bad idea?
https://softwareengineering.stackexchange.com/questions/163606/configuration-data-single-row-table-vs-name-value-pair-table
but none of them discusses using single row approach containing complex data
Complex data would be stored inside a following DB table
AccountID int
AccountSettings nvarchar(max)
and would contain AccountSettings data such as
"settings": {
"branding": {
"header_color": "1A00C3",
"page_background_color": "333333",
"tab_background_color": "3915A2",
"text_color": "FFFFFF",
"header_logo_url": "/path/to/header_logo.png",
"favicon_url": "/path/to/favicon.png",
},
"apps": {
"use": true,
"create_private": false,
"create_public": true
},
"tickets": {
"comments_public_by_default": true,
"list_newest_comments_first": true,
"collaboration": true,
"private_attachments": true,
"agent_collision": true
"list_empty_views": true,
"maximum_personal_views_to_list": 12,
"tagging": true,
"markdown_ticket_comments": false
},
"chat": {
"maximum_request_count": 5,
"welcome_message": "Hello, how may I help you?",
"enabled": true
},
"voice": {
"enabled": true,
"maintenance": false,
"logging": true
},
"twitter": {
"shorten_url": "optional"
},
"users": {
"tagging": true,
"time_zone_selection": true,
"language_selection": true
},
"billing": {
"backend": 'internal'
},
"brands": {
"default_brand_id": 47
},
"active_features": {
"on_hold_status": true,
"user_tagging": true,
"ticket_tagging": true,
"topic_suggestion": true,
"voice": true,
"business_hours": true,
"facebook_login": true,
"google_login": true,
"twitter_login": true,
"forum_analytics": true,
"agent_forwarding": true,
"chat": true,
"chat_about_my_ticket": true,
"customer_satisfaction": true,
"csat_reason_code": true,
"screencasts": true,
"markdown": true,
"language_detection": true,
"bcc_archiving": true,
"allow_ccs": true,
"advanced_analytics": true,
"sandbox": true,
"suspended_ticket_notification": true,
"twitter": true,
"facebook": true,
"feedback_tabs": true,
"dynamic_contents": true,
"light_agents": true
},
"ticket_sharing_partners": [
"foo#example.com"
]
}
Other solution is a widely used single row approach such as
AccountID int
SettingsName nvarchar(max)
SettingsValue nvarchar(max)
that could hold data such as
AccountID SettingsName SettingsValue
1 Branding.Header_Color 1A00C3
1 Branding.Page_Background_Color 333333
1 Apps.Use true
......
I assume both solutions are valid and would depend based on application needs, but would REALLY like to know is there an issue that i am not seeing when using complex data with single row approach to store application settings?
One concern is if you have a busy large database, you cannot do ONLINE re-indexing (if you have the Enterprise version) on XML, text, varchar(max) type fields. This causes grief for 2008 R2. The newer versions of MS SQL Server can re-index online varchar(max) fields, so it depends on which version you are running.
Also, you won't be able to query or index if you need to search for specific records, unless you go with the SettingsName, SettingsValue type of table, which I've used a lot. This solves the re-index online issue (if that applies to your situation), as well as indexing the fields for quick queries.

Scroll DataTables with Intel XDK app Framework

I'm new to DataTables so accept my apologies if this is silly...
I'm trying to integrate datatables on the intel xdk app framework. While the datatable expands the vertical length of the div it doesn't expand the horizontal length and I can't seem to scroll. Here is the code.
I'm not sure how to provide an example for the xdk app framework but if someone let's me know I'm glad to post.
Thanks!
Addendum:
I don't know if this will help, but if you hit the table just right it scrolls. It's almost like it's not registering the click or something else is registering it on a top layer. Every one in 10/20 tries though it scrolls correctly. It almost appears that the app framework is not passing control/focus to the DataTable correctly. How can I fix that? Hopefully that helps someone!
var table = $('#table').dataTable( {
"symbol": symbol,
"exchange": exchange,
"aoColumns": columnData,
"aoColumnDefs": [
{ "aTargets": [0], "mRender": function (data, type, full) {return dateFormat(data)} },
{ "aTargets": [1], "mRender": function (data, type, full) {return numberWithCommas(data)} },
{ "aTargets": ["_all"], "mRender": function (data, type, full) {return numberWithCommas(parseFloat(data).toFixed(2))} },
],
"aaSorting": [[ 0, "desc" ]],
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"bAutoWidth": false,
"bProcessing": true,
"sScrollX": "100%",
"bScrollCollapse": true,
"bServerSide": true,
"sAjaxSource": str,
"bDeferRender": true,
"fnServerData": function( sUrl, aoData, fnCallback ) {
$.ajax( {
"url": sUrl,
"data": aoData,
"success": fnCallback,
"dataType": "jsonp",
"cache": false
} );
}
} );
In App Framework 2.1, we provided a way to use jQuery and App Framework UI without conflicts. Instead of using appframework.js. We have created a jQuery* plugin called jq.appframework.js.
To use the plugin, include jQuery* first, then jq.appframework.js and finally appframework.ui.js (not the minified version).
<script src="jquery.js"></script>
<script src="jq.appframework.js"></script>
<script src="appframework.ui.js"></script>
https://raw.githubusercontent.com/01org/appframework/master/jq.appframework.js
https://raw.githubusercontent.com/01org/appframework/master/ui/appframework.ui.js
Are you using an unminified version of jQuery?