toggle show/hide table column and save to localstorage in vue - javascript

I would like to show and hide table column dynamically with checkbox and save it the option to localstore in vue 2. I find a jquery version but when I tried to use it did not worked.
I am a beginer in vue.
Thank you for your help.
My vue table:
export default {
extends: axiosGetPost,
props: ['id','tab_name', 'route_name'],
data() {
return {
hidePreLoader: true,
price: '',
purchase_price: '',
selling_price: '',
products: {},
tableOptions: {
tableName: 'products',
columnSelect : true,
columns: [
{
title: 'lang.item_image',
key: 'image',
type: 'images',
source: '/uploads/products',
imagefield: 'imageURL',
sortable: false
},
{title: 'lang.sku', key: 'sku', type: 'text', sortable: true},
{title: 'lang.sku_2', key: 'sku_2', type: 'text', sortable: true},
{title: 'lang.sku_3', key: 'sku_3', type: 'text', sortable: true},
{title: 'lang.sku_4', key: 'sku_4', type: 'text', sortable: true},
{title: 'lang.attribute_values', key: 'attribute_values', type: 'text', sortable: true},
{title: 'lang.quantity', key: 'test', type: 'text', sortable: true},
{title: 'lang.selling_price', key: 'selling_price', type: 'text', sortable: true},
{title: 'lang.receiving_price', key: 'purchase_price', type: 'text', sortable: true},
],
formatting : ['selling_price','purchase_price'],
source: '/products/variantDetails/' + this.id,
},
}
},
I run out of ideas.
Thank you for your help.

For this you need to set defaults so that the checkbox values first try to read from localStorage. Then create a method when the input is clicked to change the value and update the value set into storage.
Vue.use(VueTables.ClientTable);
new Vue({
el: "#app",
data: {
columns: ['name', 'code'],
columnHidden: {
name: localStorage.getItem('name') || false,
code: localStorage.getItem('code') || false
},
data: getData()
},
methods: {
toggleColumn(column) {
this.columnHidden[column] = !this.columnHidden[column];
localStorage.setItem(column, true);
}
}
});
function getData() {
return [{
code: "ZW",
name: "Zimbabwe"
}, {
code: "ZM",
name: "Zambia"
}, {
code: "YE",
name: "Yemen"
}];
}
<div id="app" v-cloak>
<template v-for="column in columns">
<label for=`toggleTable${column}`>{{`Toggle ${column}`}}</label>
<input v-on:click="toggleColumn(column)" id=`toggleTable${column}` type="checkbox" :checked="columnHidden[column]" />
<br />
</template>
<v-client-table :columns="columns" v-model="data">
</v-client-table>
</div>

Related

Access vuex state dynamically with bracket notation in template

I have an v-for in my template and a piece of state which I want to dynamically access using bracket notation (this works for actions so it should work for state afaik) but nothing is getting rendered, this is my template:
<template v-if="field.element == 'select'">
<select class="modal_input_select" v-model="formData[field.id]">
<option v-for="result in $store.state[field.module][field.results]" :key="result.id"
:value="result.id">{{ result.title }}</option>
</select>
</template>
And this is my schema I use to build my modal:
createSchema:
{
title: 'Nueva publicación', description:'',
formData: { image: '', title: '', body:'' },
fields:
[
{ id: 'image', label: 'Imagen', element: 'image', type: 'image' },
{ id: 'title', label: 'Titulo', element: 'input', type: 'text' },
{ id: 'body', label: 'Contenido', element: 'editor', type: 'html' },
{ id: 'postcategory', label: 'Categoría', element: 'select', type: 'select', module: 'PostCategories', results: 'postCategories'},
],
buttons:
[
{ text: 'Guardar', background: 'var(--blue_boot)', validate: true, module: 'Posts', action: 'create' },
{ text: 'Volver', background: 'var(--grey_boot)', validate: false, module: 'AdminPanel', action: 'hideModal' },
],
mounted:
[
{ module: 'PostCategories', action: 'all' },
]
},

Adding a Button to VUE datatables

I looking to add a button to each row in a datatable component in VUE 2
Currently data is feeding from axios request as per below
axios.get('workers/viewall').then(response => this.workerslist = response.data);
Added a prop in the Datatable.vue to give customButtons = True
customButtons: {
default: true
},
And added the below to my Vue file
customButtons: {
hide: false,
icon: 'search',
onclick: function (user_id) {
this.$router.push({
name: 'edit_worker',
params: {user_id: user_id}
});
},
},
Which is put into the data component here:
data: function () {
return {
workerslist: [],
and then column data is as follows:
columndata: [{
label: 'ID',
field: 'id',
numeric: true,
html: false,
},{
label: 'First name',
field: 'fname',
numeric: true,
html: false,
}, {
label: 'Surname',
field: 'sname',
numeric: false,
html: false,
}, {
label: 'Date of Birth',
field: 'dob',
numeric: false,
html: false,
}, {
label: 'Gender',
field: 'gender',
numeric: true,
html: false,
}, {
label: 'Trade',
field: 'trade',
numeric: false,
html: false,
}, {
label: 'Nationality',
field: 'nationality',
numeric: false,
html: true,
}, {
label: 'Telephone',
field: 'telephone',
numeric: false,
html: true,
}, {
label: 'Mobile',
field: 'mobile',
numeric: false,
html: true,
}, {
label: 'Created',
field: 'created_at',
numeric: false,
html: true,
},{
label: 'Edit',
field: 'edit',
numeric: false,
html: true,
}],
It just has to put a button to have a click through at the end of each row

ExtJS 4.2 - How to map array to a model field and display dynamically on a grid column?

I have this json data:
{
id: 1,
name: 'something',
description: 'somethingsomething',
customers: [{
id: 1,
username: 'cust1'
}, {
id: 2,
username: 'cust2'
}]
}
While I have no problems displaying the first three fields on the gridpanel, I however have an issue retrieving the array object for the customers field. My model goes like this:
fields: [
'id', {
name: 'name',
sortType: Ext.data.SortTypes.asUCString
},
'permanent', {
name: 'description',
Type: Ext.data.SortTypes.asUCString
}, {
name: 'customers',
Type: Ext.data.SortTypes.asUCString
}, {
name: 'username',
Type: Ext.data.SortTypes.asUCString,
mapping: 'customers[0].username'
}
]
When I try to access customers[0].username, it only retrieves the ones on that specified index. Removing the index number returns undefined as I assume it is looking for what index to return from. How do I properly retrieve all of customers: [] and display it to my grid where it is structured as:
{
xtype: 'gridpanel',
store: oStore,
viewConfig: {
loadMask: false,
enableTextSelection: true
},
hideHeaders: false,
bodyBorder: true,
columns: [{
text: 'Customer',
dataIndex: 'username',
flex: 1
}, {
header: '',
xtype: 'actioncolumn',
itemId: 'remove-player-btn',
width: 50,
sortable: false,
resizable: false,
menuDisabled: true,
items: [{
icon: 'resources/img/x.png',
tooltip: 'Remove Player',
scope: oMe
}],
editor: {
xtype: 'text',
name: 'deleteRow'
}
}]
}
You can use convert function available in model.This convert function is used for some calculation purpose & map response data for our needs.For example I will map username as below:
fields: [
{
name:'username',
convert:function(value,model)
{
return model.data.customers.username;
}
}
]
Use same technique for id field.Reply if any issues.

How can I save and restore AlloyUI FormBuilder fields?

I want to save the user selected and predefined fields of an AlloyUI FormBuilder. I have tried to use JSON.stringify(formBuilder.get('fields')), but I get the following error:
Uncaught TypeError: Converting circular structure to JSON
How can I save (and restore) the fields of an AlloyUI FormBuilder?
In order to save the fields of an AlloyUI FormBuilder, you can use field.getAttributesForCloning() to obtain the important field attributes. Then you can combine those attributes into an array. Finally, you can convert the array to JSON to save it with JSON.stringify():
var fields = [];
formBuilder.get('fields').each(function(field) {
fields.push(field.getAttributesForCloning());
});
fields = JSON.stringify(fields);
If you want to restore the fields, you can use JSON.parse() on the JSON:
new Y.FormBuilder({
/* ...your code here... */
fields: JSON.parse(fields)
}).render();
Here's a runnable example using AlloyUI's example FormBuilder code:
YUI().use('aui-form-builder', function(Y) {
var formBuilder = new Y.FormBuilder({
availableFields: [{
iconClass: 'form-builder-field-icon-text',
id: 'uniqueTextField',
label: 'Text',
readOnlyAttributes: ['name'],
type: 'text',
unique: true,
width: 75
}, {
hiddenAttributes: ['tip'],
iconClass: 'form-builder-field-icon-textarea',
label: 'Textarea',
type: 'textarea'
}, {
iconClass: 'form-builder-field-icon-checkbox',
label: 'Checkbox',
type: 'checkbox'
}, {
iconClass: 'form-builder-field-icon-button',
label: 'Button',
type: 'button'
}, {
iconClass: 'form-builder-field-icon-select',
label: 'Select',
type: 'select'
}, {
iconClass: 'form-builder-field-icon-radio',
label: 'Radio Buttons',
type: 'radio'
}, {
iconClass: 'form-builder-field-icon-fileupload',
label: 'File Upload',
type: 'fileupload'
}, {
iconClass: 'form-builder-field-icon-fieldset',
label: 'Fieldset',
type: 'fieldset'
}],
boundingBox: '#myFormBuilder',
fields: [{
label: 'City',
options: [{
label: 'Ney York',
value: 'new york'
}, {
label: 'Chicago',
value: 'chicago'
}],
predefinedValue: 'chicago',
type: 'select'
}, {
label: 'Colors',
options: [{
label: 'Red',
value: 'red'
}, {
label: 'Green',
value: 'green'
}, {
label: 'Blue',
value: 'blue'
}],
type: 'radio'
}]
}).render();
Y.one('#resetFormBuilder').on('click', function(event) {
var fields = [];
formBuilder.get('fields').each(function(field) {
fields.push(field.getAttributesForCloning());
});
fields = JSON.stringify(fields);
formBuilder.destroy();
event.target.set('style', 'display: none;');
new Y.FormBuilder({
/* ...your code here... */
boundingBox: '#myFormBuilder',
fields: JSON.parse(fields)
}).render();
});
});
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<div class="yui3-skin-sam">
<button id="resetFormBuilder" class="btn btn-primary">
Reset <code>FormBuilder</code>
</button>
<div id="wrapper">
<div id="myFormBuilder"></div>
</div>
</div>

Extjs GridFilter feature don't work

I'm working in a Ruby On Rails + Ext js app.. and I'm trying to show a grid with the filter feature but I can't I've been reading a lot of post and even the Sencha example page but I can't make it work.
Here is the live code.. a simple grid without the gridpanel working https://fiddle.sencha.com/#fiddle/3fh
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging'
]);
var store = Ext.create('Ext.data.Store', {
fields: [
{name: 'tipo', type: 'string'},
{name: 'concepto', type: 'string'},
{name: 'ingreso', type: 'int'},
{name: 'egreso', type: 'int'},
{name: 'por_alicuota', type: 'float'},
{name: 'fecha', type: 'string', dateFormat:'m/Y'}
] ,
data: [
{tipo:'Fijo',concepto:'Ingresos por Cuotas',ingreso:345000,egreso:0,por_alicuota:0,fecha:'11/2013'},
{tipo:'Extra',concepto:'Ingresos por Sanciones',ingreso:24500,egreso:0,por_alicuota:0,fecha:'11/2013'}
],
})
var filtersCfg = {
ftype: 'filters',
local: true,
filters: [{
type: 'string',
dataIndex: 'tipo'
}, {
type: 'string',
dataIndex: 'concepto'
}]
};
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getElementById("leftPanel"),
store: store,
height: 300,
filters : [filtersCfg],
title: "grid view",
columns: [
{
text: 'Pay',
sortable: true,
filterable: true,
dataIndex: 'tipo'
},
{
text: 'Concept',
sortable: true,
filterable: true,
dataIndex: 'concepto',
}]
});
Ext.onReady(function() {
Ext.QuickTips.init();
grid.render('content');
grid.show();
});
Hope you guys can help me!
Replace filters: [filtersCfg], with features: [filtersCfg],, and remove this extra comma in dataIndex: 'concepto', which is likely to crash IE. It's important to note that the ExtJS file loader seems not to work in this fiddle (Type Error).
Thanks to #Wared for the Answer... The only thing to change in the original code is :
filters: [filtersCfg]
INTO features: [filtersCfg] now the code looks like:
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging'
]);
var store = Ext.create('Ext.data.Store', {
fields: [
{name: 'tipo', type: 'string'},
{name: 'concepto', type: 'string'},
{name: 'ingreso', type: 'int'},
{name: 'egreso', type: 'int'},
{name: 'por_alicuota', type: 'float'},
{name: 'fecha', type: 'string', dateFormat:'m/Y'}
] ,
data: [
{tipo:'Fijo',concepto:'Ingresos por Cuotas',ingreso:345000,egreso:0,por_alicuota:0,fecha:'11/2013'},
{tipo:'Extra',concepto:'Ingresos por Sanciones',ingreso:24500,egreso:0,por_alicuota:0,fecha:'11/2013'}
],
})
var filtersCfg = {
ftype: 'filters',
local: true,
filters: [{
type: 'string',
dataIndex: 'tipo'
}, {
type: 'string',
dataIndex: 'concepto'
}]
};
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getElementById("leftPanel"),
store: store,
height: 300,
features : [filtersCfg],
title: "grid view",
columns: [
{
text: 'Pay',
sortable: true,
filterable: true,
dataIndex: 'tipo'
},
{
text: 'Concept',
sortable: true,
filterable: true,
dataIndex: 'concepto',
}]
});
Ext.onReady(function() {
Ext.QuickTips.init();
grid.render('content');
grid.show();
});

Categories