From e90c599ad469b9e3eabec5546dee136e0731ea81 Mon Sep 17 00:00:00 2001 From: tanhongit Date: Thu, 1 Apr 2021 23:26:31 +0700 Subject: [PATCH 1/2] create model --- public/js/app.js | 305 +++++++++++++++++++- resources/js/components/CreateComponent.vue | 103 ++++++- 2 files changed, 401 insertions(+), 7 deletions(-) diff --git a/public/js/app.js b/public/js/app.js index 5788504..666ec32 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -2039,6 +2039,99 @@ __webpack_require__.r(__webpack_exports__); // // // +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// /* harmony default export */ __webpack_exports__["default"] = ({ data: function data() { return { @@ -38502,7 +38595,7 @@ var render = function() { _vm._v(" "), _c("td", [_vm._v(_vm._s(student.phone))]), _vm._v(" "), - _c("td", [_vm._v("Dele")]) + _vm._m(1, true) ]) }), 0 @@ -38518,7 +38611,137 @@ var render = function() { ) ]) ]) - ]) + ]), + _vm._v(" "), + _c( + "div", + { + staticClass: "modal fade", + attrs: { + id: "exampleModal", + tabindex: "-1", + role: "dialog", + "aria-labelledby": "exampleModalLabel", + "aria-hidden": "true" + } + }, + [ + _c( + "div", + { staticClass: "modal-dialog", attrs: { role: "document" } }, + [ + _c("div", { staticClass: "modal-content" }, [ + _vm._m(2), + _vm._v(" "), + _c("div", { staticClass: "modal-body" }, [ + _c("form", [ + _c("div", { staticClass: "form-group" }, [ + _c("label", { attrs: { for: "exampleInputEmail1" } }, [ + _vm._v("Name") + ]), + _vm._v(" "), + _c("input", { + directives: [ + { + name: "model", + rawName: "v-model", + value: _vm.name, + expression: "name" + } + ], + staticClass: "form-control", + attrs: { type: "text", placeholder: "Enter Name" }, + domProps: { value: _vm.name }, + on: { + input: function($event) { + if ($event.target.composing) { + return + } + _vm.name = $event.target.value + } + } + }) + ]), + _vm._v(" "), + _c("div", { staticClass: "form-group" }, [ + _c("label", { attrs: { for: "exampleInputEmail1" } }, [ + _vm._v("Email") + ]), + _vm._v(" "), + _c("input", { + directives: [ + { + name: "model", + rawName: "v-model", + value: _vm.email, + expression: "email" + } + ], + staticClass: "form-control", + attrs: { type: "email", placeholder: "Enter email" }, + domProps: { value: _vm.email }, + on: { + input: function($event) { + if ($event.target.composing) { + return + } + _vm.email = $event.target.value + } + } + }) + ]), + _vm._v(" "), + _c("div", { staticClass: "form-group" }, [ + _c("label", { attrs: { for: "exampleInputEmail1" } }, [ + _vm._v("Phone") + ]), + _vm._v(" "), + _c("input", { + directives: [ + { + name: "model", + rawName: "v-model", + value: _vm.phone, + expression: "phone" + } + ], + staticClass: "form-control", + attrs: { type: "phone", placeholder: "Enter Phone" }, + domProps: { value: _vm.phone }, + on: { + input: function($event) { + if ($event.target.composing) { + return + } + _vm.phone = $event.target.value + } + } + }) + ]), + _vm._v(" "), + _c( + "button", + { + staticClass: "btn btn-primary", + attrs: { type: "submit" }, + on: { + click: function($event) { + $event.preventDefault() + return _vm.saveStudent($event) + } + } + }, + [_vm._v("\n Submit\n ")] + ) + ]) + ]), + _vm._v(" "), + _vm._m(3) + ]) + ] + ) + ] + ) ]) } var staticRenderFns = [ @@ -38539,6 +38762,84 @@ var staticRenderFns = [ _c("th", { attrs: { scope: "col" } }, [_vm._v("Action")]) ]) ]) + }, + function() { + var _vm = this + var _h = _vm.$createElement + var _c = _vm._self._c || _h + return _c("td", [ + _c( + "button", + { + staticClass: "btn btn-primary", + attrs: { + type: "button", + "data-toggle": "modal", + "data-target": "#exampleModal" + } + }, + [_vm._v("\n Edit\n ")] + ), + _vm._v("\n |\n "), + _c( + "button", + { + staticClass: "btn btn-primary", + attrs: { + type: "button", + "data-toggle": "modal", + "data-target": "#exampleModal" + } + }, + [_vm._v("\n Delete\n ")] + ) + ]) + }, + function() { + var _vm = this + var _h = _vm.$createElement + var _c = _vm._self._c || _h + return _c("div", { staticClass: "modal-header" }, [ + _c( + "h5", + { staticClass: "modal-title", attrs: { id: "exampleModalLabel" } }, + [_vm._v("Modal title")] + ), + _vm._v(" "), + _c( + "button", + { + staticClass: "close", + attrs: { + type: "button", + "data-dismiss": "modal", + "aria-label": "Close" + } + }, + [_c("span", { attrs: { "aria-hidden": "true" } }, [_vm._v("×")])] + ) + ]) + }, + function() { + var _vm = this + var _h = _vm.$createElement + var _c = _vm._self._c || _h + return _c("div", { staticClass: "modal-footer" }, [ + _c( + "button", + { + staticClass: "btn btn-secondary", + attrs: { type: "button", "data-dismiss": "modal" } + }, + [_vm._v("\n Close\n ")] + ), + _vm._v(" "), + _c( + "button", + { staticClass: "btn btn-primary", attrs: { type: "button" } }, + [_vm._v("Save changes")] + ) + ]) } ] render._withStripped = true diff --git a/resources/js/components/CreateComponent.vue b/resources/js/components/CreateComponent.vue index c7f7afa..5ee3ed4 100644 --- a/resources/js/components/CreateComponent.vue +++ b/resources/js/components/CreateComponent.vue @@ -63,11 +63,29 @@ - {{index+1}} - {{student.name}} - {{student.email}} - {{student.phone}} - Dele + {{ index + 1 }} + {{ student.name }} + {{ student.email }} + {{ student.phone }} + + + | + + @@ -79,6 +97,81 @@ + + + From 03458262b533f08684798e0bd7913c79f0430a83 Mon Sep 17 00:00:00 2001 From: tanhongit Date: Thu, 1 Apr 2021 23:53:09 +0700 Subject: [PATCH 2/2] create method with edit student --- app/Http/Controllers/StudentController.php | 4 + public/js/app.js | 118 ++++++++++++-------- resources/js/components/CreateComponent.vue | 20 +++- routes/web.php | 3 +- 4 files changed, 93 insertions(+), 52 deletions(-) diff --git a/app/Http/Controllers/StudentController.php b/app/Http/Controllers/StudentController.php index 08ddd14..ae69537 100644 --- a/app/Http/Controllers/StudentController.php +++ b/app/Http/Controllers/StudentController.php @@ -20,4 +20,8 @@ public function all_students(){ $students = Student::paginate(5); return response()->json($students); } + public function edit_student($id){ + $student = Student::find($id); + return response()->json($student); + } } diff --git a/public/js/app.js b/public/js/app.js index 666ec32..31b18b1 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -2132,13 +2132,17 @@ __webpack_require__.r(__webpack_exports__); // // // +// /* harmony default export */ __webpack_exports__["default"] = ({ data: function data() { return { students: {}, name: "", email: "", - phone: "" + phone: "", + edit_name: "", + edit_email: "", + edit_phone: "" }; }, mounted: function mounted() { @@ -2159,8 +2163,19 @@ __webpack_require__.r(__webpack_exports__); var page = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1; axios.get("all_students/?page=" + page).then(function (response) { + console.log(response.data); _this.students = response.data; + }); + }, + // create method edit student + editStudent: function editStudent(id) { + var _this2 = this; + + axios.get("edit_student/" + id).then(function (response) { console.log(response.data); + _this2.edit_name = response.data.name; + _this2.edit_email = response.data.email; + _this2.edit_phone = response.data.phone; }); } } @@ -38595,7 +38610,46 @@ var render = function() { _vm._v(" "), _c("td", [_vm._v(_vm._s(student.phone))]), _vm._v(" "), - _vm._m(1, true) + _c("td", [ + _c( + "button", + { + staticClass: "btn btn-primary", + attrs: { + type: "button", + "data-toggle": "modal", + "data-target": "#exampleModal" + }, + on: { + click: function($event) { + return _vm.editStudent(student.id) + } + } + }, + [ + _vm._v( + "\n Edit\n " + ) + ] + ), + _vm._v("\n |\n "), + _c( + "button", + { + staticClass: "btn btn-primary", + attrs: { + type: "button", + "data-toggle": "modal", + "data-target": "#exampleModal" + } + }, + [ + _vm._v( + "\n Delete\n " + ) + ] + ) + ]) ]) }), 0 @@ -38631,7 +38685,7 @@ var render = function() { { staticClass: "modal-dialog", attrs: { role: "document" } }, [ _c("div", { staticClass: "modal-content" }, [ - _vm._m(2), + _vm._m(1), _vm._v(" "), _c("div", { staticClass: "modal-body" }, [ _c("form", [ @@ -38645,19 +38699,19 @@ var render = function() { { name: "model", rawName: "v-model", - value: _vm.name, - expression: "name" + value: _vm.edit_name, + expression: "edit_name" } ], staticClass: "form-control", attrs: { type: "text", placeholder: "Enter Name" }, - domProps: { value: _vm.name }, + domProps: { value: _vm.edit_name }, on: { input: function($event) { if ($event.target.composing) { return } - _vm.name = $event.target.value + _vm.edit_name = $event.target.value } } }) @@ -38673,19 +38727,19 @@ var render = function() { { name: "model", rawName: "v-model", - value: _vm.email, - expression: "email" + value: _vm.edit_email, + expression: "edit_email" } ], staticClass: "form-control", attrs: { type: "email", placeholder: "Enter email" }, - domProps: { value: _vm.email }, + domProps: { value: _vm.edit_email }, on: { input: function($event) { if ($event.target.composing) { return } - _vm.email = $event.target.value + _vm.edit_email = $event.target.value } } }) @@ -38701,19 +38755,19 @@ var render = function() { { name: "model", rawName: "v-model", - value: _vm.phone, - expression: "phone" + value: _vm.edit_phone, + expression: "edit_phone" } ], staticClass: "form-control", attrs: { type: "phone", placeholder: "Enter Phone" }, - domProps: { value: _vm.phone }, + domProps: { value: _vm.edit_phone }, on: { input: function($event) { if ($event.target.composing) { return } - _vm.phone = $event.target.value + _vm.edit_phone = $event.target.value } } }) @@ -38736,7 +38790,7 @@ var render = function() { ]) ]), _vm._v(" "), - _vm._m(3) + _vm._m(2) ]) ] ) @@ -38763,38 +38817,6 @@ var staticRenderFns = [ ]) ]) }, - function() { - var _vm = this - var _h = _vm.$createElement - var _c = _vm._self._c || _h - return _c("td", [ - _c( - "button", - { - staticClass: "btn btn-primary", - attrs: { - type: "button", - "data-toggle": "modal", - "data-target": "#exampleModal" - } - }, - [_vm._v("\n Edit\n ")] - ), - _vm._v("\n |\n "), - _c( - "button", - { - staticClass: "btn btn-primary", - attrs: { - type: "button", - "data-toggle": "modal", - "data-target": "#exampleModal" - } - }, - [_vm._v("\n Delete\n ")] - ) - ]) - }, function() { var _vm = this var _h = _vm.$createElement diff --git a/resources/js/components/CreateComponent.vue b/resources/js/components/CreateComponent.vue index 5ee3ed4..04f6f4f 100644 --- a/resources/js/components/CreateComponent.vue +++ b/resources/js/components/CreateComponent.vue @@ -70,6 +70,7 @@