Search with a Vuetable 2

edgarscr commented 6 years ago

i need to add the search system to this code: it's my first time using vuejs + vue table and i read the tutorial but i am confused. i just have this atm. now i need Search with multiple component example, ticket_number, user_id and more.

html

<div id="table-wrapper" class="ui container">
  <vuetable ref="vuetable"
    api-url="http://pw-ticket.de/admin/api.php?action=read"
    :fields="fields"
    :multi-sort="true"
    :sort-order="sortOrder"
    :css="css.table"
    pagination-path=""
    :per-page="3"
    @vuetable:pagination-data="onPaginationData"
    @vuetable:loading="onLoading"        
    @vuetable:loaded="onLoaded"
  >
    <template slot="actions" scope="props">
      <div class="table-button-container">
          <button class="btn btn-warning btn-sm" @click="viewRow(props.rowData); showingViewModal = true; ">
            <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button>
          <!--button class="btn btn-danger btn-sm" @click="deleteRow(props.rowData)">
            <span class="glyphicon glyphicon-trash"></span> Delete</button-->
      </div>
      </template>
    </vuetable>
    <vuetable-pagination ref="pagination"
      :css="css.pagination"
      @vuetable-pagination:change-page="onChangePage"
    ></vuetable-pagination>
  </div>

JS

Vue.use(Vuetable);

new Vue({
    el: '#app',
    components: {
     'vuetable-pagination': Vuetable.VuetablePagination
    },
    data: {
        showingViewModal: false,
        clickedTicket: {},
        search: '',
        fields: [
            { 
                name: 'ticket_number', 
                title: '<span class="orange glyphicon glyphicon-user"></span> Ticket',              
                //sortField: 'ticket_id',
                dataClass: 'ticket_number'
            }, {
                name: 'ticket_date',
                title: 'Datum',
            //  sortField: 'ticket_date',
                dataClass: 'ticket_date'
            }, {
                name: 'time_watched',
                title: 'Beobachtungszeit',
                //sortField: 'time_watched',
                dataClass: 'time_watched'
            }, {
                name: 'car_number',
                title: 'Kennzeichen',
                //sortField: 'car_number',
                dataClass: 'car_number'
            }, {
                name: 'user_name',
                title: 'Mitarbeiter',
             // sortField: 'user_name',
                dataClass: 'user_name'
            }, {
                name: 'street',
                title: 'Adresse',
                //sortField: 'street',
                dataClass: 'street'
            }, {
                name: 'reasons',
                title: 'Versto&szlig',
            //  sortField: 'reasons',
                dataClass: 'reasons'
            }, {
                name: 'car_name',
                title: 'Fahrzeugmarke',
            //  sortField: 'car_name',
                dataClass: 'car_name'
            },
            '__slot:actions'
        ],
        sortOrder: [
            { field: 'ticket_id', direction: 'desc' }
        ],
        css: {
            table: {
                tableClass: 'table table-striped table-bordered table-hovered',
                loadingClass: 'loading',
                ascendingIcon: 'glyphicon glyphicon-chevron-up',
                descendingIcon: 'glyphicon glyphicon-chevron-down',
                handleIcon: 'glyphicon glyphicon-menu-hamburger',
            },
            pagination: {
                infoClass: 'pull-left',
                wrapperClass: 'vuetable-pagination text-center',
                activeClass: 'btn-primary',
                disabledClass: 'disabled',
                pageClass: 'btn btn-border',
                linkClass: 'btn btn-border',
                icons: {
                    first: 'fa fa-angle-double-left icon',
                    prev: 'fa fa-chevron-left icon',
                    next: 'fa fa-chevron-right  icon',
                    last: 'fa fa-angle-double-right icon',
                },
            }
        }
    },
    computed:{
    /*httpOptions(){
        return {headers: {'Authorization': "my-token"}} //table props -> :http-options="httpOptions"
    },*/
    },
    methods: {
        onPaginationData (paginationData) {
            this.$refs.pagination.setPaginationData(paginationData)
        },
        onChangePage (page) {
            this.$refs.vuetable.changePage(page)
        },
        viewRow(rowData){
            this.clickedTicket = rowData;
            //alert("You clicked edit on"+ JSON.stringify(rowData) + rowData.user_name)
        },
        deleteRow(rowData){
            //alert("You clicked delete on"+ JSON.stringify(rowData))
        },
        onLoading() {
            console.log('loading... show your spinner here')
        },
        onLoaded() {
            console.log('loaded! .. hide your spinner here')
        }
    }
})

ratiw commented 6 years ago

@edgarscr You should have posted in Vuetable-2 repo, otherwise, I may not have seen your post.

If possible, please put your code on jsfiddle or codepen to demonstrate its problem.

edgarscr commented 6 years ago

@ratiw i can't useon jsfiddle he need https i dont have https. yesterday i added new row's but the append-params dont load correctly the data every time said empty..

Vue.use(Vuetable);
//Vue.use(VueEvents);

new Vue({
    el: '#app',
    components: {
     'vuetable-pagination': Vuetable.VuetablePagination
    },
    data: {
        showingViewModal: false,
        clickedTicket: {},
        searchFor: '',
        moreParams: [
                    'filter=swdf123123'
                ],
        fields: [
            { 
                name: 'ticket_number', 
                title: '<span class="orange glyphicon glyphicon-user"></span> Ticket',              
                //sortField: 'ticket_id',
                dataClass: 'ticket_number'
            }, {
                name: 'ticket_date',
                title: 'Datum',
            //  sortField: 'ticket_date',
                dataClass: 'ticket_date'
            }, {
                name: 'time_watched',
                title: 'Beobachtungszeit',
                //sortField: 'time_watched',
                dataClass: 'time_watched'
            }, {
                name: 'car_number',
                title: 'Kennzeichen',
                //sortField: 'car_number',
                dataClass: 'car_number'
            }, {
                name: 'user_name',
                title: 'Mitarbeiter',
             // sortField: 'user_name',
                dataClass: 'user_name'
            }, {
                name: 'street',
                title: 'Adresse',
                //sortField: 'street',
                dataClass: 'street'
            }, {
                name: 'reasons',
                title: 'Versto&szlig',
            //  sortField: 'reasons',
                dataClass: 'reasons'
            }, {
                name: 'car_name',
                title: 'Fahrzeugmarke',
            //  sortField: 'car_name',
                dataClass: 'car_name'
            },
            '__slot:actions' ],
        sortOrder: [
            { field: 'ticket_id', direction: 'desc' }
        ],
        css: {
            table: {
                tableClass: 'table table-striped table-bordered table-hovered',
                loadingClass: 'loading',
                ascendingIcon: 'glyphicon glyphicon-chevron-up',
                descendingIcon: 'glyphicon glyphicon-chevron-down',
                handleIcon: 'glyphicon glyphicon-menu-hamburger',
            },
            pagination: {
                infoClass: 'pull-left',
                wrapperClass: 'vuetable-pagination text-center',
                activeClass: 'btn-primary',
                disabledClass: 'disabled',
                pageClass: 'btn btn-border',
                linkClass: 'btn btn-border',
                icons: {
                    first: 'fa fa-angle-double-left icon',
                    prev: 'fa fa-chevron-left icon',
                    next: 'fa fa-chevron-right  icon',
                    last: 'fa fa-angle-double-right icon',
                },
            }
        }        
    },
    computed:{
    /*httpOptions(){
        return {headers: {'Authorization': "my-token"}} //table props -> :http-options="httpOptions"
    },*/
    }/*,
    mounted () {
        this.$events.$on('filter-set', eventData => this.onFilterSet(eventData))
        this.$events.$on('filter-reset', e => this.onFilterReset())
    }*/,
    methods: {
        onPaginationData (paginationData) {
            this.$refs.pagination.setPaginationData(paginationData)
        },
        onChangePage (page) {
            this.$refs.vuetable.changePage(page)
        },
        viewRow(rowData){
            this.clickedTicket = rowData;
            //alert("You clicked edit on"+ JSON.stringify(rowData) + rowData.user_name)
        },
        deleteRow(rowData){
            //alert("You clicked delete on"+ JSON.stringify(rowData))
        },
        onLoading() {
            console.log('loading... show your spinner here')
        },
        onLoaded() {
            console.log('loaded! .. hide your spinner here')
        },/*
        setFilter: function() {
            this.moreParams = [
                'filter=' + this.searchFor
            ]

            this.$nextTick(function() {
                this.$refs.vuetable.refresh()
            })
        },
        resetFilter: function() {
            this.searchFor = ''
            this.setFilter()
        },*/
        onFilterSet (filterText) {
            this.moreParams.filter = filterText
            //this.moreParams['filter'] = filterText
            this.$nextTick( () => this.$refs.vuetable.refresh() )
        },
        onFilterReset () {
            delete this.moreParams.filter
            this.searchFor = ''
            this.$nextTick( () => this.$refs.vuetable.refresh() )
        }
    }
})

<div id="table-wrapper" class="ui container">
  <vuetable ref="vuetable"
    api-url="http://pw-ticket.de/admin/api.php?action=read"
    :fields="fields"
    pagination-path=""
    :per-page="25"
    :multi-sort="true"
    :sort-order="sortOrder"
    :append-params="moreParams"

    :css="css.table"
    @vuetable:pagination-data="onPaginationData"
    @vuetable:loading="onLoading"        
    @vuetable:loaded="onLoaded"
  >
    <template slot="actions" scope="props">
      <div class="table-button-container">
          <button class="btn btn-warning btn-sm" @click="viewRow(props.rowData); showingViewModal = true; ">
            <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button>
          <!--button class="btn btn-danger btn-sm" @click="deleteRow(props.rowData)">
            <span class="glyphicon glyphicon-trash"></span> Delete</button-->
      </div>
      </template>
    </vuetable>
    <vuetable-pagination ref="pagination"
      :css="css.pagination"
      @vuetable-pagination:change-page="onChangePage"
    ></vuetable-pagination>
  </div>

 <div class="form-inline form-group">
                                        <label>Search:</label>
                                        <input v-model="searchFor" class="form-control" @keyup.enter="onFilterSet" placeholder="Ticket number, reasons, car name and more.">
                                        <button class="btn btn-primary" @click="onFilterSet">Go</button>
                                        <button class="btn btn-default" @click="onFilterReset">Reset</button>
                                    </div>

With filter

without filter

edgarscr commented 6 years ago

@ratiw hey look here i replace data with ur original api. but i include the search try. https://codepen.io/eCarrera92/pen/GQKgGJ

ratiw commented 6 years ago

@edgarscr You are able to fix your problem?

edgarscr commented 6 years ago

@Raiw yes, here i explain how fix and i have a new problem.

i explain here https://github.com/ratiw/vue-table/issues/177

ratiw / vue-table

Search with a Vuetable 2 #176