Adding vue-data-tables and require new component

parent d272f67d
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
"vue": "^2.1.10" "vue": "^2.1.10"
}, },
"dependencies": { "dependencies": {
"element-ui": "^1.4.4" "element-ui": "^1.4.4",
"vue-data-tables": "^2.0.4"
} }
} }
...@@ -69075,10 +69075,10 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); ...@@ -69075,10 +69075,10 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony default export */ __webpack_exports__["default"] = ({ /* harmony default export */ __webpack_exports__["default"] = ({
props: { props: {
deleteAction: { default: null },
deleteMessage: { default: "Are you sure you want to delete this record?" }, deleteMessage: { default: "Are you sure you want to delete this record?" },
deleteTitle: { default: "Confirmation" }, deleteTitle: { default: "Confirmation" },
rowId: { default: null } rows: { default: null },
scope: { default: null }
}, },
methods: { methods: {
deleteRow: function deleteRow(event) { deleteRow: function deleteRow(event) {
...@@ -69090,14 +69090,14 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); ...@@ -69090,14 +69090,14 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
type: 'warning' type: 'warning'
}).then(function () { }).then(function () {
var vm = _this; var vm = _this;
axios.delete(_this.deleteAction).then(function (response) { axios.delete(_this.scope.row.urls.delete_url).then(function (response) {
if (response.data.errors === false) { if (response.data.errors === false) {
vm.$message({ vm.$message({
type: 'success', type: 'success',
message: response.data.message message: response.data.message
}); });
$('#' + vm.rowId).remove(); vm.rows.splice(vm.scope.$index, 1);
} }
}).catch(function (error) { }).catch(function (error) {
vm.$message({ vm.$message({
...@@ -69183,6 +69183,22 @@ module.exports = Component.exports ...@@ -69183,6 +69183,22 @@ module.exports = Component.exports
"use strict"; "use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_axios__ = __webpack_require__(37);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_axios___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_axios__);
//
//
//
//
//
//
//
//
//
//
//
//
//
//
// //
// //
// //
...@@ -69191,42 +69207,29 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); ...@@ -69191,42 +69207,29 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
// //
// //
var _data, titles;
var _data = void 0;
titles = [{
prop: "flow_no",
label: "NO."
}, {
prop: "content",
label: "Content"
}, {
prop: "flow_type",
label: "Type"
}];
/* harmony default export */ __webpack_exports__["default"] = ({ /* harmony default export */ __webpack_exports__["default"] = ({
data: function data() { data: function data() {
return { return {
data: _data, data: _data
titles: titles
}; };
}, },
methods: {
fetchData: function fetchData() {
var vm = this;
__WEBPACK_IMPORTED_MODULE_0_axios___default.a.get(route('api.page.page.index')).then(function (response) {
vm.data = response.data.data;
}).catch(function (response) {});
},
goToEdit: function goToEdit(scope) {
window.location = scope.row.urls.edit_url;
}
},
mounted: function mounted() { mounted: function mounted() {
this.data = [{ this.fetchData();
"content": "Water flood",
"flow_no": "FW201601010001",
"flow_type": "Repair",
"flow_type_code": "repair"
}, {
"content": "Lock broken",
"flow_no": "FW201601010002",
"flow_type": "Repair",
"flow_type_code": "repair"
}, {
"content": "Help to buy some drinks",
"flow_no": "FW201601010003",
"flow_type": "Help",
"flow_type_code": "help"
}];
} }
}); });
...@@ -69239,16 +69242,55 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c ...@@ -69239,16 +69242,55 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
attrs: { attrs: {
"data": _vm.data "data": _vm.data
} }
}, _vm._l((_vm.titles), function(title) { }, [_c('el-table-column', {
return _c('el-table-column', { attrs: {
key: title.label, "prop": "id",
attrs: { "label": "Id",
"prop": title.prop, "width": "100"
"label": title.label, }
"sortable": "custom" }), _vm._v(" "), _c('el-table-column', {
attrs: {
"prop": "title",
"label": "Title"
}
}), _vm._v(" "), _c('el-table-column', {
attrs: {
"prop": "slug",
"label": "Slug"
}
}), _vm._v(" "), _c('el-table-column', {
attrs: {
"prop": "created_at",
"label": "Created at"
}
}), _vm._v(" "), _c('el-table-column', {
attrs: {
"fixed": "right",
"prop": "actions",
"label": "Actions"
},
scopedSlots: _vm._u([{
key: "default",
fn: function(scope) {
return [_c('a', {
staticClass: "btn btn-default btn-flat",
on: {
"click": function($event) {
$event.preventDefault();
_vm.goToEdit(scope)
}
}
}, [_c('i', {
staticClass: "fa fa-pencil"
})]), _vm._v(" "), _c('delete-button', {
attrs: {
"scope": scope,
"rows": _vm.data
}
})]
} }
}) }])
})) })], 1)
},staticRenderFns: []} },staticRenderFns: []}
module.exports.render._withStripped = true module.exports.render._withStripped = true
if (false) { if (false) {
...@@ -9,9 +9,12 @@ require('./bootstrap'); ...@@ -9,9 +9,12 @@ require('./bootstrap');
window.Vue = require('vue'); window.Vue = require('vue');
import ElementUI from 'element-ui' import ElementUI from 'element-ui'
import DataTables from 'vue-data-tables'
import 'element-ui/lib/theme-default/index.css' import 'element-ui/lib/theme-default/index.css'
import locale from 'element-ui/lib/locale/lang/en' import locale from 'element-ui/lib/locale/lang/en'
Vue.use(ElementUI, { locale }); Vue.use(ElementUI, { locale });
Vue.use(DataTables, { locale });
/** /**
* Next, we will create a fresh Vue application instance and attach it to * Next, we will create a fresh Vue application instance and attach it to
...@@ -20,7 +23,8 @@ Vue.use(ElementUI, { locale }); ...@@ -20,7 +23,8 @@ Vue.use(ElementUI, { locale });
*/ */
Vue.component('example', require('./components/Example.vue')); Vue.component('example', require('./components/Example.vue'));
Vue.component('delete-button', require('../../../Modules/Core/Assets/js/components/DeleteComponent.vue')); Vue.component('DeleteButton', require('../../../Modules/Core/Assets/js/components/DeleteComponent.vue'));
Vue.component('PageTable', require('../../../Modules/Page/Assets/js/components/PageTable.vue'));
const app = new Vue({ const app = new Vue({
el: '#app', el: '#app',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment