Related
I am trying to load data into the VueJS table using the ag Grid vue plugin that I have in a template, I have tried several ways but I am not getting the result I am looking for ..., getting the following result:
{
"users": [
{
"id": 1,
"client_id": 1,
"cop_id": null,
"role_id": null,
"name": "Bart",
"email": "correo.123#gmail.com",
"created_at": null,
"updated_at": null
}
]
}
then I have my Vue view in this way, and sorry for including all the code, but since the template is working with everything that comes, I prefer to deliver all the detail, I have tried to make changes to the created method with axios, but I did not It works, unfortunately I can't load the data into the table, I hope you can guide me to fix my loading error.
<template>
<div id="page-user-list">
<!-- AgGrid Table -->
<ag-grid-vue
ref="agGridTable"
:components="components"
:gridOptions="gridOptions"
class="ag-theme-material w-100 my-4 ag-grid-table"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:rowData="rowData"
rowSelection="multiple"
colResizeDefault="shift"
:animateRows="true"
:floatingFilter="true"
:pagination="true"
:paginationPageSize="paginationPageSize"
:suppressPaginationPanel="true"
:enableRtl="$vs.rtl">
</ag-grid-vue>
<vs-pagination
:total="totalPages"
:max="10"
v-model="currentPage" />
</div>
</template>
<script>
import { AgGridVue } from "ag-grid-vue"
import '#sass/vuexy/extraComponents/agGridStyleOverride.scss'
import vSelect from 'vue-select'
import axios from 'axios'
// Store Module
//import moduleUserManagement from '#/store/user-management/moduleUserManagement.js'
// Cell Renderer
import CellRendererLink from "./cell-renderer/CellRendererLink.vue"
import CellRendererStatus from "./cell-renderer/CellRendererStatus.vue"
import CellRendererVerified from "./cell-renderer/CellRendererVerified.vue"
import CellRendererActions from "./cell-renderer/CellRendererActions.vue"
export default {
components: {
AgGridVue,
vSelect,
// Cell Renderer
CellRendererLink,
CellRendererStatus,
CellRendererVerified,
CellRendererActions,
},
data() {
return {
// Filter Options
roleFilter: { label: 'Todos', value: 'all' },
roleOptions: [
{ label: 'Todos', value: 'all' },
{ label: 'Administador', value: 'admin' },
{ label: 'Usuario', value: 'user' },
{ label: 'Staff', value: 'staff' },
],
statusFilter: { label: 'Todos', value: 'all' },
statusOptions: [
{ label: 'Todos', value: 'all' },
{ label: 'Activo', value: 'active' },
{ label: 'Desactivado', value: 'deactivated' },
{ label: 'Bloqueado', value: 'blocked' },
],
isVerifiedFilter: { label: 'Todos', value: 'all' },
isVerifiedOptions: [
{ label: 'Todos', value: 'all' },
{ label: 'Si', value: 'yes' },
{ label: 'No', value: 'no' },
],
departmentFilter: { label: 'Todos', value: 'all' },
departmentOptions: [
{ label: 'Todos', value: 'all' },
{ label: 'Vendido', value: 'sales' },
{ label: 'Departamento', value: 'development' },
{ label: 'Administrado', value: 'management' },
],
searchQuery: "",
// AgGrid
gridApi: null,
gridOptions: {},
defaultColDef: {
sortable: true,
resizable: true,
suppressMenu: true
},
columnDefs: [
{headerName: 'ID', field: 'id', width: 125, filter: true, checkboxSelection: true, headerCheckboxSelectionFilteredOnly: true, headerCheckboxSelection: true },
{headerName: 'Username', field: 'client_id', filter: true, width: 210, cellRendererFramework: 'CellRendererLink'},
{headerName: 'Email', field: 'email', filter: true, width: 225 },
{headerName: 'Nombre', field: 'name', filter: true, width: 200 },
{headerName: 'Comuna', field: 'cop_id', filter: true, width: 150},
{headerName: 'Role', field: 'role_id', filter: true, width: 150},
{headerName: 'Acciones', width: 150, cellRendererFramework: 'CellRendererActions'},
],
// Cell Renderer Components
components: {
CellRendererLink,
CellRendererStatus,
CellRendererVerified,
CellRendererActions,
}
}
},
watch: {
roleFilter(obj) {
this.setColumnFilter("role", obj.value)
},
statusFilter(obj) {
this.setColumnFilter("status", obj.value)
},
isVerifiedFilter(obj) {
let val = obj.value === "all" ? "all" : obj.value == "yes" ? "true" : "false"
this.setColumnFilter("is_verified", val)
},
departmentFilter(obj) {
this.setColumnFilter("department", obj.value)
},
},
computed: {
usersData() {
return this.users.data
},
paginationPageSize() {
if(this.gridApi) return this.gridApi.paginationGetPageSize()
else return 10
},
totalPages() {
if(this.gridApi) return this.gridApi.paginationGetTotalPages()
else return 0
},
currentPage: {
get() {
if(this.gridApi) return this.gridApi.paginationGetCurrentPage() + 1
else return 1
},
set(val) {
this.gridApi.paginationGoToPage(val - 1)
}
}
},
methods: {
setColumnFilter(column, val) {
const filter = this.gridApi.getFilterInstance(column)
let modelObj = null
if(val !== "all") {
modelObj = { type: "equals", filter: val }
}
filter.setModel(modelObj)
this.gridApi.onFilterChanged()
},
resetColFilters() {
// Reset Grid Filter
this.gridApi.setFilterModel(null)
this.gridApi.onFilterChanged()
// Reset Filter Options
this.roleFilter = this.statusFilter = this.isVerifiedFilter = this.departmentFilter = { label: 'All', value: 'all' }
this.$refs.filterCard.removeRefreshAnimation()
},
updateSearchQuery(val) {
this.gridApi.setQuickFilter(val)
}
},
created(){
//let users = /apps/user/user-list/
axios.get('api/users')
.then(res => {
let users = res.data.users;
})
}
}
</script>
<style lang="scss">
#page-user-list {
.user-list-filters {
.vs__actions {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-58%);
}
}
}
</style>
I have this JSON
const Menu = [{
icon: "home",
text: "Inicio",
url: {
name: "home"
},
typeUrl: "exact"
},
{
heading: "Operaciones"
},
{
icon: "settings",
"icon-alt": "settings",
text: "Operación",
model: true,
children: [{
icon: "add",
text: "Cargar Pedidos",
url: {
name: "cargarpedidos"
}
},
{
icon: "playlist_add_check",
text: "Aprobar Pedidos"
},
{
icon: "content_copy",
text: "Remitir Pedidos"
}
]
},
{
heading: "Informes"
},
{
icon: "widgets",
"icon-alt": "widgets",
text: "Informe",
model: false,
children: [{
icon: "view_module",
text: "Usuarios"
},
{
icon: "view_module",
text: "Perfiles"
},
{
icon: "view_module",
text: "Permisos Perfiles"
},
{
icon: "view_module",
text: "Resetear Password"
},
{
icon: "view_module",
text: "Cambiar Password"
}
]
},
{
heading: "APSI"
},
{
icon: "view_module",
text: "Informes del APSI"
},
{
heading: "Administaciones"
},
{
icon: "extension",
"icon-alt": "extension",
text: "Administración",
model: false,
children: [{
icon: "face",
text: "Usuarios"
},
{
icon: "assignment_ind",
text: "Perfiles"
},
{
icon: "settings",
text: "Permisos Perfiles"
},
{
icon: "cached",
text: "Resetear Password"
},
{
icon: "fingerprint",
text: "Cambiar Password"
}
]
},
{
heading: "Mantenimientos"
},
{
icon: "build",
"icon-alt": "build",
text: "Mantenimiento",
model: true,
children: [{
icon: "group_work",
text: "Departamentos"
},
{
icon: "room",
text: "Locales"
},
{
icon: "donut_large",
text: "Unidades de Medida"
},
{
icon: "spellcheck",
text: "Articulos"
},
{
icon: "toc",
text: "Categorías"
},
{
icon: "supervisor_account",
text: "Usuario Aprobador"
}
]
}
];
export default Menu;
I use it to create the menu of my system that I am developing with VueJS + Vuetify and I need to filter it through the "text" field by words that contain it regardless of position, in the style of SQL's like '%filter%', also without distinguish upper and lower case. As far as possible don't distinguish accents (but this is already very picky, if it is not possible or it is very cumbersome, I can skip it).
Also in the case that the pattern of coincidence is in a child node and not in the father, does this father also have to appear in the filter, is it possible to do this with a Javascript function?
The menu looks like this:
I expect this behavior
I am not sure but if you want to get text fields of children, I think something like that should do it. You just need to initialize all your parents with empty children arrays:
tempArr = Menu.filter(function (elem) {
return elem.children == null ;
});
textFields = tempArr.map(({ text }) => text)
Here is how you can filter match regular expression in an array.
var arr = [{
icon: "add",
text: "Cargar Pedidos",
url: {
name: "cargarpedidos"
}
},
{
icon: "playlist_add_check",
text: "Aprobar Pedidos"
},
{
icon: "content_copy",
text: "Remitir Pedidos"
},
{
icon: "content_copy",
text: "Remitir Pedisddos"
},
{
icon: "content_copy",
text: "Remitir Pediados"
},
{
icon: "content_copy",
text: "Remitir asdaasd"
}
];
var name = "dido";
var regex = "/" + name + "/g";
var filtered = arr.filter(
(val) => val.text.match(name)
);
console.log(filtered);
These are the basics of filtering. If you want to search for any property in an array object than use this function:
var result = Menu.filter(function(o) {
return Object.keys(o).some(function(k) {
return o[k].toString().toLowerCase().indexOf('dido') != -1;
})
})
console.log(result)
I have this fiddle:
https://jsfiddle.net/pnqzspoe/12014/
I want to modify it a bit and want to display each node as a text area containing the corresponding text. Further, I want to give an option to 'reply' to it. This would mean insertion of a new text area into which we can enter text.
Here is the code:
<script type="text/x-template" id="item-template">
<li>
<div
:class="{bold: isFolder}"
#click="toggle"
#dblclick="changeType">
{{ model.name }}
<span v-if="isFolder">[{{ open ? '-' : '+' }}]</span>
</div>
<ul v-show="open" v-if="isFolder">
<item
class="item"
v-for="(model, index) in model.children"
:key="index"
:model="model">
</item>
<li class="add" #click="addChild">+</li>
</ul>
</li>
</script>
<p>(You can double click on an item to turn it into a folder.)</p>
var data = {
name: 'My Tree',
children: [
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
},
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
}
]
}
]
}
// define the item component
Vue.component('item', {
template: '#item-template',
props: {
model: Object
},
data: function () {
return {
open: false
}
},
computed: {
isFolder: function () {
return this.model.children &&
this.model.children.length
}
},
methods: {
toggle: function () {
if (this.isFolder) {
this.open = !this.open
}
},
changeType: function () {
if (!this.isFolder) {
Vue.set(this.model, 'children', [])
this.addChild()
this.open = true
}
},
addChild: function () {
this.model.children.push({
name: 'new stuff'
})
}
}
})
// boot up the demo
var demo = new Vue({
el: '#demo',
data: {
treeData: data
}
})
What would be the template for this use-case?
If I don't understand your question wrongly...
Replace
{{model.name}}
with
<textarea v-model="model.name"></textarea>
should work?
UPD. PROBLEM SOLVED WITH ONE LINE OF CODE:
.lean()
axplanation here
I have this array of menu items after Model.find(...blablabla :
[
{"_id":"578763de6e8e0542195ef4e8",
"text":"lists", "iconCls":"fa fa-group fa-lg",
"className":null,
"menu_id":null},
{"_id":"578762146e8e0542195ef4e7",
"iconCls":"fa fa-group fa-lg",
"className":"panel",
"menu_id":"578763de6e8e0542195ef4e8",
"text":"personal"},
{"_id":"578770aca59f4d173c948376",
"text":"info",
"iconCls":"xf007",
"className":null,
"menu_id":null},
{"_id":"5787715aa59f4d173c94837c",
"text":"cars",
"className":"panel",
"menu_id":"578763de6e8e0542195ef4e8", "iconCls":"xf007"},
{"_id":"5787721ca59f4d173c94837f",
"text":"now" ,
"iconCls":"xf007",
"className":"xf007",
"menu_id":"578770aca59f4d173c948376"}]
And I want to build tree menu from them:
function buildMenu(source){
var menu = []; //Массив для нового, уже пирамидального меню
for (var i=0; i<source.length; i+=1){
if(source[i].menu_id === null){ //Выбираем верхние пункты меню
source[i].items = [];
for(var j=0; j<source.length;j+=1){
if(source[j].menu_id !== null){
if(source[i]._id.toString() == source[j].menu_id.toString()){
//найден дочерний пункт меню
source[i].items.push(source[j]);
}
}
}
menu.push(source[i]);
}
}
// Проверка
console.log(menu[0].items);
console.log(menu);
return menu;
}
So, when I trying to console.log my menu[0].items - I have them:
[ { _id: 578762146e8e0542195ef4e7,
iconCls: 'fa fa-group fa-lg',
className: 'panel',
menu_id: 578763de6e8e0542195ef4e8,
text: 'personal' },
{ _id: 5787715aa59f4d173c94837c,
text: 'cars',
className: 'panel',
menu_id: 578763de6e8e0542195ef4e8,
iconCls: 'xf007' } ]
But then, when I trying to return my new amazing menu, I get this:
[ { _id: 578763de6e8e0542195ef4e8,
text: 'lists',
iconCls: 'fa fa-group fa-lg',
className: null,
menu_id: null },
{ _id: 578770aca59f4d173c948376,
text: 'info',
iconCls: 'xf007',
className: null,
menu_id: null } ]
My God! Where is my items dissapeared!?!
Upd. I expecting to get something like this:
[ { _id: 578763de6e8e0542195ef4e8,
text: 'lists',
iconCls: 'fa fa-group fa-lg',
className: null,
menu_id: null
items: [
{ _id: 578762146e8e0542195ef4e7,
iconCls: 'fa fa-group fa-lg',
className: 'panel',
menu_id: 578763de6e8e0542195ef4e8,
text: 'personal' },
{ _id: 5787715aa59f4d173c94837c,
text: 'cars',
className: 'panel',
menu_id: 578763de6e8e0542195ef4e8,
iconCls: 'xf007' }
]
.....
Here is how I get my data:
.get('/menu', function(req,res){
var user_id = '5784b872a59f4d0f805a617d'; //пользователь boss/boss
User.find({_id:user_id})
.populate({
path: 'group',
populate: {
path: 'menu',
ref: 'Menu'
}
})
.exec(function(err,user) {
if (err) {
console.log(err.red, req.method, req.url);
res.status(500).end();
return err;
} else if (!user) {
res.status(404).end();
console.log(('Запрос вернул: ' + user).red);
} else {
res.status(200).send(buildMenu(user[0].group.menu));
}
});
//
})
MENUS:
USERS:
GROUPES:
I am realy confused...
Postman cant see them also:
You could build the tree with an object for look up and for creating the tree with random source order.
var source = [{ "_id": "578763de6e8e0542195ef4e8", "text": "lists", "iconCls": "fa fa-group fa-lg", "className": null, "menu_id": null }, { "_id": "578762146e8e0542195ef4e7", "iconCls": "fa fa-group fa-lg", "className": "panel", "menu_id": "578763de6e8e0542195ef4e8", "text": "personal" }, { "_id": "578770aca59f4d173c948376", "text": "info", "iconCls": "xf007", "className": null, "menu_id": null }, { "_id": "5787715aa59f4d173c94837c", "text": "cars", "className": "panel", "menu_id": "578763de6e8e0542195ef4e8", "iconCls": "xf007" }, { "_id": "5787721ca59f4d173c94837f", "text": "now", "iconCls": "xf007", "className": "xf007", "menu_id": "578770aca59f4d173c948376" }],
tree = function (data, root) {
var r = [], o = {};
data.forEach(function (a) {
a.items = o[a._id] && o[a._id].items;
o[a._id] = a;
if (a.menu_id === root) {
r.push(a);
} else {
o[a.menu_id] = o[a.menu_id] || {};
o[a.menu_id].items = o[a.menu_id].items || [];
o[a.menu_id].items.push(a);
}
});
return r;
}(source, null);
console.log(tree);
I'm using GeoExt2 (alpha) + Extjs 4.1 now to implement a map application. The thing is sometimes when I select a feature on the map, two popups are displayed. one at the bottom of the screen which has correct info and one empty in the right place. it doesn't go even I close it. I wonder if this is a bug ?
myLayer.events.on({
featureselected: function(e) {
createPopup(e.feature);
},
featureunselected: function(){
popup.destroy();
}
});
function createPopup(feature) {
popup = Ext.create('GeoExt.Popup', {
id: 'popup',
title: title,
location: feature,
});
popup.on({
close: function() {
if(OpenLayers.Util.indexOf(myLayer.selectedFeatures,
this.feature) > -1) {
selectControl.unselect(this.feature);
}
}
});
PopupTab = Ext.create('Ext.tab.Panel', {
id: 'PopupTabs',
activeTab:2,
items: [
{
title: 'Supervisor',
itemId: 'tab1',
},
{
title: 'student',
itemId: 'tab2',
items: [
{
xtype: 'label',
id: 't',
html: content,
layout: 'fit',
cls:'tabStyle'
}
]
},
],
listeners: {
tabchange: function(panel, tab) {
if (tab.popup !== undefined) { // show window after tab change
tab.popup.show();
}
}
}
});
popup.add(PopupTabs);
popup.show();
}