Hi i need to add a Edit (just before the ID column) column in my table, see the code below=>
Let me know if you need more information, thank you very much!
<script type="text/javascript">
$(document).ready(function () {
new Vue({
el: '#app',
data: {
loaded: false,
search: null,
sortedBy: null,
selectedType: null,
selectedCountry: null,
uniqueType: [],
uniqueCountry: [],
columns: [
{ display: 'ID', internal: 'ID', sortable: true },
{ display: 'Type', internal: 'Supplier_x002f_Vendor_x0020_Sale', sortable: true },
{ display: 'Country', internal: 'Country', sortable: true },
{ display: 'Supplier Name', internal: 'Supplier_x0020_Name', sortable: true },
{ display: 'Represented By', internal: 'Represented_x0020_By', sortable: true },
{ display: 'First Name', internal: 'First_x0020_Name', sortable: true },
{ display: 'Last Name', internal: 'Last_x0020_Name', sortable: true },
{ display: 'Title', internal: 'Title', sortable: true },
{ display: 'Email Address', internal: 'Your_x0020_Email_x0020_Address', sortable: true },
{ display: 'Mobile Phone', internal: 'Phone', sortable: true },
{ display: 'Office Phone ', internal: 'Office_x0020_Phone', sortable: true },
{ display: 'City', internal: 'City', sortable: true },
{ display: 'State', internal: 'State', sortable: true },
{ display: 'Number', internal: 'xyvp', sortable: true },
{ display: 'Modified', internal: 'Modified', sortable: true },
{ display: 'Modified By', internal: 'Editor', sortable: true },
{ display: 'Address', internal: 'Address', sortable: true },
{ display: 'Representation', internal: 'Representation', sortable: true },
],
suppliers: null,
},
methods: {
// Get the suppliers data
getSuppliers: async function () {
var the_select = this.columns.map(item => item.internal).join(',');
return await $pnp.sp.web.lists.getByTitle('Supplier Database').items.select(the_select + ',Editor/Title').expand('Editor').orderBy('Supplier_x0020_Name', true).top(5000).get();
},
// Clear all filters
clearAllFilters: function () {
var vm = this;
vm.search = null;
vm.selectedCountry = null;
vm.selectedType = null;
vm.sortBy = null;
}
},
filters: {
shortDate: function (date) {
return date && moment(date) ? moment(date).format('MM/DD/YYYY') : null
}
},
components: {
},
computed: {
the_results: function () {
var vm = this;
var after_cleanup = [];
var after_search = [];
var after_type = [];
var after_country = [];
var after_sort = [];
after_cleanup = vm.suppliers.map(item => {
return {
...item,
Country: item.Country ? item.Country.trim() : null,
Supplier_x002f_Vendor_x0020_Sale: item.Supplier_x002f_Vendor_x0020_Sale ? item.Supplier_x002f_Vendor_x0020_Sale.trim() : null
}
})
// after search
if (vm.search) {
after_search = after_cleanup.filter(item => {
var temp = {
Supplier_x0020_Name: item.Supplier_x0020_Name,
Represented_x0020_By: item.Represented_x0020_By,
First_x0020_Name: item.First_x0020_Name,
Last_x0020_Name: item.Last_x0020_Name
}
var string = JSON.stringify(temp ).toLocaleLowerCase();
var test = string.indexOf(vm.search.toLocaleLowerCase()) >= 0;
if (test) {
return item;
}
})
} else {
after_search = after_cleanup;
}
// after filter type
if (vm.selectedType) {
after_type = after_search.filter(item => {
if (item.Supplier_x002f_Vendor_x0020_Sale === vm.selectedType) {
return item;
}
})
} else {
after_type = after_search
}
// after country
if (vm.selectedCountry) {
after_country = after_type.filter(item => {
if (item.Country === vm.selectedCountry) {
return item;
}
})
} else {
after_country = after_type
}
//Adding the sort
if (vm.sortedBy) {
after_sort = _.sortBy(after_country, [function (o) { return o[vm.sortedBy]; }]);
} else {
after_sort = after_country
}
return after_sort;
}
},
created: async function () {
var vm = this;
$pnp.setup({
sp: {
baseUrl: 'https://portal.ovationtravel.com/ia/'
}
})
vm.suppliers = await vm.getSuppliers();
vm.uniqueCountry = _.sortBy(_.uniq(vm.suppliers.map(item => item.Country ? item.Country.trim() : null)));
vm.uniqueType = _.sortBy(_.uniq(vm.suppliers.map(item => item.Supplier_x002f_Vendor_x0020_Sale ? item.Supplier_x002f_Vendor_x0020_Sale.trim() : null)));
vm.loaded = true;
}
});
})
</script>