Sort by field/column of Vue JS data for Laravel Nova

<template>

<divv-on:click="$emit('sort-list', 0.1)"role="button"class="sortable-title">

<spanclass="title"v-html="title"></span>

<spanv-if="order_type=='desc'"><iclass="fa fa-arrow-circle-down"aria-hidden="true"></i></span>

<spanv-if="order_type=='asc'"><iclass="fa fa-arrow-circle-up"aria-hidden="true"></i></span>

<spanv-if="order_type==null"><iclass="fa fa-sort"aria-hidden="true"></i></span>

</div>

</template>

<script>




export default {

props: [

'title',

'order_type',

],

data() {

return {

//

}

},

mounted() {

//

},

methods: {

//

},

}

</script>

 

Use it in the parent component:

import SortableField from "./SortableField"

export default {

components :{

SortableField

},

data() {

const today = new Date()

return {

......

order_type : {}

.....

}

},

mounted() {

this.resetOrderType();

},

methods: {

onSubmit() {

this.loading = true;

// get Point Balance

Nova.request().post('/api/xxx', {

operator : this.operator,

point : this.point,

}).then(response => {




.....

this.resetOrderType();

.....

});




},

resetOrderType(execpt_key = null) {

let current_value = null;

if ( execpt_key ){

current_value = this.order_type[execpt_key];

}




this.order_type = {

first_name : null,

last_name : null,

trading_name : null,

total_received : null,

total_redeemed : null,

balance : null,

team_builder_number : null,

}

if ( execpt_key ){

this.order_type[execpt_key] = current_value;

}

},

sortList(key, init_order='asc'){

this.resetOrderType(key);

let arrayCopy = [...this.transactions];

if ( this.order_type[key] == null){

this.order_type[key] = init_order;

}

if ( this.order_type[key] == 'desc'){

arrayCopy.sort((a,b) => a[key] < b[key]);

this.order_type[key] = 'asc';

} else {

arrayCopy.sort((a,b) => a[key] > b[key]);

this.order_type[key] = 'desc';

}

this.transactions = arrayCopy;

},

onPrint(){

window.print();

}

},

Not working on Chrome, fix below:

sortList(key, init_order='asc'){

this.resetOrderType(key);

letarrayCopy= [...this.transactions];

if ( this.order_type[key] ==null){

this.order_type[key] =init_order;

}

if ( this.order_type[key] =='desc'){

arrayCopy.sort((a,b) => {

returnisNaN(a[key]) ?b[key].toString().localeCompare(a[key].toString()) :b[key] -a[key]

});

this.order_type[key] ='asc';

} else {

arrayCopy.sort((a,b) => {

returnisNaN(a[key]) ?a[key].toString().localeCompare(b[key].toString()) :a[key] -b[key]

});

this.order_type[key] ='desc';

}

this.transactions=arrayCopy;

},

Leave a Reply

Your email address will not be published. Required fields are marked *