Bus is not listening to event?

[matfish2]

Bus is not listening to event?

[forddyce]

Interestingly enough, vue-tables.loading does work. But that's on request fired, not after all the data was loaded.

[matfish2]

I'm not sure what you are trying to accomplish.
Converting dates to moment objects only makes sense in the client component where the data is filtered and sorted by the client. It has no use in the server component where you sort and filter on the server side.
For the same reason, custom filters only receive a callback on the client component. On the server component you pass a simple array of strings. When an event is fired the filter value is sent to the server, where it should be handled.

This is all in the docs, and marks the fundamental difference between the client and server components. I.e while the client component has the entire dataset and is therefore capable of manipulating it correctly by itself, the server component - intended to be used with large datasets - only receives a subset of the data, making it equivalent to a "dumb" controller, which requests data and presents the response, letting the server do the brunt of the work.

[matfish2]

As for the loaded event issue, to detect the initial response move the listener from the created to the mounted method

[forddyce]

I was about to filter using daterangepicker on date filter column, but it won't run at all, and since your docs said it has to be moment object then I thought maybe because my created_at data is a string then I have to convert it to moment.

So, as I understand by your response, it's not possible to pick from 2 date ranges? If possible, I would really love to see a simple example (I'm using laravel eloquent as server side, but any code from yours is welcome).

On your example:

$start = Carbon::createFromFormat('Y-m-d',$query['start'])->startOfDay();
$end = Carbon::createFromFormat('Y-m-d',$query['end'])->endOfDay();

start and end does not exists as params, where do these come from?

[matfish2]

Using daterangepicker doesn't require any conversion from you side. The date range is sent as request parameters.
I have just double checked it on my end and everything seems to be in order.
When I apply the filter a request is sent containing the following params:

query[year][start]:2016-09-27
query[year][end]:2016-10-05

Open your console and have a look at the request params. You should see something similar

[forddyce]

This is my request params in console: http://imgur.com/a/iU5HS

ascending 1
byColumn 1
limit 10
orderBy name
page 1
query[created_at]
query[name]
query[price]
query[sku]
query[stock]

[matfish2]

Are these the params you see after selecting a date range?
Does selecting the date range trigger a request?

[forddyce]

My date filter does not even have a range, that's why I'm trying to make it work.

When I have no dateColumns option: http://imgur.com/a/2N7gM
When I have dateColumns: ['created_at'] option (that Filter by date button does not work, clicking does not do anything, the range picker is not showing, I have tried input the bootstrap datepicker as separate file, did not work): http://imgur.com/a/xorC8

Where/how is the date range suppose to appear? This is where I thought my date is string not a moment object.

[matfish2]

Ok. So it is a problem of initializing daterangepicker itself.
You need to include jQuery + moment + daterangepicker as GLOBAL dependencies. This can be done either by using script tags before your own script or inside your script like so:

window.$ = window.jQuery = require('jquery')
window.moment = require('moment')
require('daterangepicker')

[forddyce]

Still not working (clicking the filter button does not work), this is my entire entry point (index.js):

window.$ = window.jQuery = require('jquery')
window.moment = require('moment')
require('bootstrap')
require('daterangepicker')

import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import VuexRouterSync from 'vuex-router-sync'
// import VueTables from 'vue-tables-2'

import ExtendDisableButton from './utils/ExtendDisableButton'
import ExtendForm from './utils/ExtendForm'

import routes from './app/routes'
import store from './app/store'

new ExtendDisableButton() // eslint-disable-line no-new
new ExtendForm() // eslint-disable-line no-new

$.ajaxSetup({ // TODO: need to remove this
  crossDomain: false,
  dataType: 'json',
  cache: true,
  async: false,
  headers: {
    'X-CSRF-Token': $('meta[name="_t"]').attr('content')
  }
})

Vue.use(VueResource)
Vue.http.headers.common['X-CSRF-Token'] = $('meta[name="_t"]').attr('content') // eslint-disable-line no-undef
store.dispatch('checkAuthentication')

Vue.use(VueRouter)

export const router = new VueRouter({
  mode: 'history',
  routes
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(m => m.meta.auth) && !store.state.auth.authenticated) {
    next({
      name: 'admin.login'
    })
  } else if (to.matched.some(m => m.meta.guest) && store.state.auth.authenticated) {
    next({
      name: 'admin.index'
    })
  } else {
    next()
  }
})

VuexRouterSync.sync(store, router)
Vue.router = router

var VueTables = require('vue-tables-2')
Vue.use(VueTables.server)

import * as App from './app/index.vue'

new Vue(App).$mount('#root')

And no other third party present, this is the only js file in the entire document.

package.json:

{
  "name": "gulp-template",
  "version": "0.0.1",
  "description": "Babelify+Vue+Gulp template.",
  "repository": {
    "type": "git",
    "url": "https://github.com/forddyce/laravel-react.git"
  },
  "keywords": [
    "vuejs",
    "laravel"
  ],
  "browserify": {
    "transform": [
      "vueify",
      "babelify"
    ],
    "aliasify": {
      "aliases": {
        "vue": "vue/dist/vue"
      }
    }
  },
  "private": true,
  "devDependencies": {
    "aliasify": "^2.0.0",
    "babel-core": "^6.16.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.1",
    "babel-plugin-syntax-jsx": "^6.13.0",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-plugin-transform-vue-jsx": "^3.1.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-stage-2": "^6.16.0",
    "babel-runtime": "^6.11.6",
    "babelify": "~7.3.0",
    "browserify": "^13.1.0",
    "browserify-hmr": "^0.3.5",
    "eslint": "^3.7.0",
    "eslint-config-standard": "^6.2.0",
    "eslint-plugin-html": "^1.5.3",
    "eslint-plugin-promise": "^2.0.1",
    "eslint-plugin-standard": "^2.0.1",
    "gifsicle": "3.0.4",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-changed": "^1.3.2",
    "gulp-clean-css": "^2.0.13",
    "gulp-concat": "~2.6",
    "gulp-copy": "0.0.2",
    "gulp-csscomb": "^3.0.8",
    "gulp-filesize": "0.0.6",
    "gulp-imagemin": "^3.0.3",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "~1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-requirejs-optimize": "^1.2.0",
    "gulp-sass": "^2.3.2",
    "gulp-size": "^2.1.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^2.0.0",
    "gulp-util": "^3.0.7",
    "jpegtran-bin": "3.1.0",
    "optipng-bin": "3.1.2",
    "pngquant-bin": "3.1.1",
    "pretty-hrtime": "~1.0.2",
    "require-dir": "^0.3.0",
    "rimraf": "~2.5.4",
    "run-sequence": "~1.2.2",
    "vinyl-source-stream": "~1.1.0",
    "vue-hot-reload-api": "^2.0.6",
    "vueify": "^9.2.4",
    "watchify": "^3.7.0"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "daterangepicker": "0.0.3",
    "jquery": "^3.1.1",
    "moment": "^2.15.1",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3",
    "vue-router": "^2.0.0",
    "vue-tables-2": "0.0.6",
    "vuex": "2.0.0",
    "vuex-router-sync": "^3.0.0"
  }
}

[matfish2]

You must have some non-related JS error in the console which halts execution (I have seen one in one of the images that you have sent http://imgur.com/a/iU5HS).

[forddyce]

Ok I know the problem now, my table column has the "action" column for buttons, which i didn't define on tableColumns array. I do wish the error is more generic though, thanks for your reply and help.

And for those newbie in the future that need help, you do have to import daterangepicker and moment library by yourself since the package does not have them by default (at least not in my case).

[szabomikierno]

Hey,

I'm having the same issue (I think), I'm loading moment and daterangepicker globally:

window._ = require('lodash');

window.$ = window.jQuery = require('jquery');

window.moment = require('moment');
require('daterangepicker');

require('bootstrap-sass');

import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';


import axios from 'axios';
import noty from 'noty';
import sweetalert from 'sweetalert';

window.Vue = Vue;
Vue.use(VueRouter);

window.axios = axios;
window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest'
};

import {ServerTable, Event} from 'vue-tables-2';
Vue.use(ServerTable, {
    filterByColumn: true,
    compileTemplates: true,
    responseAdapter: function (resp) {
        return {
            data: resp.data,
            count: resp.total
        }
    },
    templates: {
        open: 'open-vuetable-resource'
    },

    sortIcon: {
        base:'fa',
        up:'fa-sort-amount-asc',
        down:'fa-sort-amount-desc'
    },
    rowClassCallback: function(row) {return `row-${row.id}`},

    datepickerOptions: {
        showDropdowns: true
    }
});

Vue.component('open-vuetable-resource', {
    props: ['data'],
    template: `<a :href="data.ShowAdmin" class='btn btn-primary'><i class="fa fa-eye"></i></a>`
});

$(document).ready(function() {
    new Vue({
        el: "#people",
        data: {
            columns: ['id', 'username', 'email', 'created_at', 'open'],

            options: {
                filterable: ['id', 'username', 'created_at', 'email'],
                sortable: ['id', 'username', 'created_at', 'email'],
                dateColumns: ['created_at']
            }
        }
    });
});

I have no console errors, any ideas on why daterangepicker is not showing up?

Thanks

[SwithFr]

Same problem. Datepickerrange is not showin up. I'have a similar code than @szabomikierno

Any idea ?

[boriskogan81]

+1

[sublimedatasys]

+1