Skip to content
This repository was archived by the owner on Sep 29, 2022. It is now read-only.

Commit c23f5ef

Browse files
author
Edi Santoso
committed
feat: modal components
1 parent e5a9150 commit c23f5ef

File tree

4 files changed

+272
-14
lines changed

4 files changed

+272
-14
lines changed

‎public/js/app.js

Lines changed: 225 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1805,6 +1805,26 @@ __webpack_require__.r(__webpack_exports__);
18051805

18061806
/***/ }),
18071807

1808+
/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/Modal.vue?vue&type=script&lang=js&":
1809+
/*!****************************************************************************************************************************************************************!*\
1810+
!*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/Modal.vue?vue&type=script&lang=js& ***!
1811+
\****************************************************************************************************************************************************************/
1812+
/*! exports provided: default */
1813+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
1814+
1815+
"use strict";
1816+
__webpack_require__.r(__webpack_exports__);
1817+
/* harmony default export */ __webpack_exports__["default"] = ({
1818+
name: 'modal',
1819+
methods: {
1820+
close: function close() {
1821+
this.$emit('close');
1822+
}
1823+
}
1824+
});
1825+
1826+
/***/ }),
1827+
18081828
/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/UserCreate.vue?vue&type=script&lang=js&":
18091829
/*!*********************************************************************************************************************************************************************!*\
18101830
!*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/UserCreate.vue?vue&type=script&lang=js& ***!
@@ -2017,6 +2037,8 @@ __webpack_require__.r(__webpack_exports__);
20172037
__webpack_require__.r(__webpack_exports__);
20182038
/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! axios */ "./node_modules/axios/index.js");
20192039
/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_0__);
2040+
/* harmony import */ var _api_users__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../api/users */ "./resources/js/api/users.js");
2041+
//
20202042
//
20212043
//
20222044
//
@@ -2065,6 +2087,7 @@ __webpack_require__.r(__webpack_exports__);
20652087
//
20662088

20672089

2090+
20682091
var getUsers = function getUsers(page, callback) {
20692092
var params = {
20702093
page: page
@@ -2081,6 +2104,7 @@ var getUsers = function getUsers(page, callback) {
20812104
/* harmony default export */ __webpack_exports__["default"] = ({
20822105
data: function data() {
20832106
return {
2107+
isModalVisible: false,
20842108
users: null,
20852109
meta: {
20862110
current_page: null,
@@ -2144,6 +2168,12 @@ var getUsers = function getUsers(page, callback) {
21442168
});
21452169
},
21462170
methods: {
2171+
showModal: function showModal() {
2172+
this.isModalVisible = true;
2173+
},
2174+
closeModal: function closeModal() {
2175+
this.isModalVisible = false;
2176+
},
21472177
goToNext: function goToNext() {
21482178
this.$router.push({
21492179
query: {
@@ -37575,6 +37605,104 @@ render._withStripped = true
3757537605

3757637606

3757737607

37608+
/***/ }),
37609+
37610+
/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/Modal.vue?vue&type=template&id=53ab54d2&":
37611+
/*!********************************************************************************************************************************************************************************************************!*\
37612+
!*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/Modal.vue?vue&type=template&id=53ab54d2& ***!
37613+
\********************************************************************************************************************************************************************************************************/
37614+
/*! exports provided: render, staticRenderFns */
37615+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
37616+
37617+
"use strict";
37618+
__webpack_require__.r(__webpack_exports__);
37619+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; });
37620+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; });
37621+
var render = function() {
37622+
var _vm = this
37623+
var _h = _vm.$createElement
37624+
var _c = _vm._self._c || _h
37625+
return _c("transition", { attrs: { name: "modal-fade" } }, [
37626+
_c(
37627+
"div",
37628+
{
37629+
staticClass: "modal fade",
37630+
attrs: {
37631+
id: "exampleModal",
37632+
tabindex: "-1",
37633+
role: "dialog",
37634+
"aria-labelledby": "exampleModalLabel",
37635+
"aria-hidden": "true"
37636+
}
37637+
},
37638+
[
37639+
_c(
37640+
"div",
37641+
{ staticClass: "modal-dialog", attrs: { role: "document" } },
37642+
[
37643+
_c("div", { staticClass: "modal-content" }, [
37644+
_c("div", { staticClass: "modal-header" }, [
37645+
_c(
37646+
"h5",
37647+
{
37648+
staticClass: "modal-title",
37649+
attrs: { id: "exampleModalLabel" }
37650+
},
37651+
[_vm._v("Delete")]
37652+
),
37653+
_vm._v(" "),
37654+
_c(
37655+
"button",
37656+
{
37657+
staticClass: "close",
37658+
attrs: {
37659+
type: "button",
37660+
"data-dismiss": "modal",
37661+
"aria-label": "Close"
37662+
}
37663+
},
37664+
[
37665+
_c("span", { attrs: { "aria-hidden": "true" } }, [
37666+
_vm._v("×")
37667+
])
37668+
]
37669+
)
37670+
]),
37671+
_vm._v(" "),
37672+
_c("div", { staticClass: "modal-body" }, [
37673+
_vm._v(
37674+
"\n Are you sure to delete this data?\n "
37675+
)
37676+
]),
37677+
_vm._v(" "),
37678+
_c("div", { staticClass: "modal-footer" }, [
37679+
_c(
37680+
"button",
37681+
{
37682+
staticClass: "btn btn-secondary",
37683+
attrs: { type: "button", "data-dismiss": "modal" }
37684+
},
37685+
[_vm._v("Close")]
37686+
),
37687+
_vm._v(" "),
37688+
_c(
37689+
"button",
37690+
{ staticClass: "btn btn-primary", attrs: { type: "button" } },
37691+
[_vm._v("Save changes")]
37692+
)
37693+
])
37694+
])
37695+
]
37696+
)
37697+
]
37698+
)
37699+
])
37700+
}
37701+
var staticRenderFns = []
37702+
render._withStripped = true
37703+
37704+
37705+
3757837706
/***/ }),
3757937707

3758037708
/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/Sidebar.vue?vue&type=template&id=81fbb27e&":
@@ -38114,14 +38242,20 @@ var render = function() {
3811438242
"div",
3811538243
{
3811638244
staticClass: "btn-toolbar mb-3",
38117-
attrs: { role: "toolbar" }
38245+
attrs: {
38246+
role: "toolbar",
38247+
"aria-label": "Toolbar with button groups"
38248+
}
3811838249
},
3811938250
[
3812038251
_c(
3812138252
"div",
3812238253
{
3812338254
staticClass: "btn-group mr-2",
38124-
attrs: { role: "group" }
38255+
attrs: {
38256+
role: "group",
38257+
"aria-label": "First group"
38258+
}
3812538259
},
3812638260
[
3812738261
_c(
@@ -38139,16 +38273,27 @@ var render = function() {
3813938273
"button",
3814038274
{
3814138275
staticClass: "btn btn-danger",
38142-
attrs: { type: "button" },
38143-
on: {
38144-
click: function($event) {
38145-
$event.preventDefault()
38146-
return _vm.goToNext($event)
38147-
}
38148-
}
38276+
attrs: {
38277+
type: "button",
38278+
"data-toggle": "modal",
38279+
"data-target": "#exampleModal"
38280+
},
38281+
on: { click: _vm.showModal }
3814938282
},
3815038283
[_vm._v("Delete")]
38151-
)
38284+
),
38285+
_vm._v(" "),
38286+
_c("modal", {
38287+
directives: [
38288+
{
38289+
name: "show",
38290+
rawName: "v-show",
38291+
value: _vm.isModalVisible,
38292+
expression: "isModalVisible"
38293+
}
38294+
],
38295+
on: { close: _vm.closeModal }
38296+
})
3815238297
],
3815338298
1
3815438299
)
@@ -53133,6 +53278,7 @@ Vue.use(vue_router__WEBPACK_IMPORTED_MODULE_0__["default"]);
5313353278

5313453279
Vue.component('example-component', __webpack_require__(/*! ./components/ExampleComponent.vue */ "./resources/js/components/ExampleComponent.vue")["default"]);
5313553280
Vue.component('sidebar-component', __webpack_require__(/*! ./components/Sidebar.vue */ "./resources/js/components/Sidebar.vue")["default"]);
53281+
Vue.component('modal', __webpack_require__(/*! ./components/Modal.vue */ "./resources/js/components/Modal.vue")["default"]);
5313653282
/**
5313753283
* Next, we will create a fresh Vue application instance and attach it to
5313853284
* the page. Then, you may begin adding components to this application
@@ -53479,6 +53625,75 @@ __webpack_require__.r(__webpack_exports__);
5347953625

5348053626

5348153627

53628+
/***/ }),
53629+
53630+
/***/ "./resources/js/components/Modal.vue":
53631+
/*!*******************************************!*\
53632+
!*** ./resources/js/components/Modal.vue ***!
53633+
\*******************************************/
53634+
/*! exports provided: default */
53635+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
53636+
53637+
"use strict";
53638+
__webpack_require__.r(__webpack_exports__);
53639+
/* harmony import */ var _Modal_vue_vue_type_template_id_53ab54d2___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Modal.vue?vue&type=template&id=53ab54d2& */ "./resources/js/components/Modal.vue?vue&type=template&id=53ab54d2&");
53640+
/* harmony import */ var _Modal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Modal.vue?vue&type=script&lang=js& */ "./resources/js/components/Modal.vue?vue&type=script&lang=js&");
53641+
/* empty/unused harmony star reexport *//* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js");
53642+
53643+
53644+
53645+
53646+
53647+
/* normalize component */
53648+
53649+
var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])(
53650+
_Modal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
53651+
_Modal_vue_vue_type_template_id_53ab54d2___WEBPACK_IMPORTED_MODULE_0__["render"],
53652+
_Modal_vue_vue_type_template_id_53ab54d2___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
53653+
false,
53654+
null,
53655+
null,
53656+
null
53657+
53658+
)
53659+
53660+
/* hot reload */
53661+
if (false) { var api; }
53662+
component.options.__file = "resources/js/components/Modal.vue"
53663+
/* harmony default export */ __webpack_exports__["default"] = (component.exports);
53664+
53665+
/***/ }),
53666+
53667+
/***/ "./resources/js/components/Modal.vue?vue&type=script&lang=js&":
53668+
/*!********************************************************************!*\
53669+
!*** ./resources/js/components/Modal.vue?vue&type=script&lang=js& ***!
53670+
\********************************************************************/
53671+
/*! exports provided: default */
53672+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
53673+
53674+
"use strict";
53675+
__webpack_require__.r(__webpack_exports__);
53676+
/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Modal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib??ref--4-0!../../../node_modules/vue-loader/lib??vue-loader-options!./Modal.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/Modal.vue?vue&type=script&lang=js&");
53677+
/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Modal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]);
53678+
53679+
/***/ }),
53680+
53681+
/***/ "./resources/js/components/Modal.vue?vue&type=template&id=53ab54d2&":
53682+
/*!**************************************************************************!*\
53683+
!*** ./resources/js/components/Modal.vue?vue&type=template&id=53ab54d2& ***!
53684+
\**************************************************************************/
53685+
/*! exports provided: render, staticRenderFns */
53686+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
53687+
53688+
"use strict";
53689+
__webpack_require__.r(__webpack_exports__);
53690+
/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Modal_vue_vue_type_template_id_53ab54d2___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../node_modules/vue-loader/lib??vue-loader-options!./Modal.vue?vue&type=template&id=53ab54d2& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/Modal.vue?vue&type=template&id=53ab54d2&");
53691+
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Modal_vue_vue_type_template_id_53ab54d2___WEBPACK_IMPORTED_MODULE_0__["render"]; });
53692+
53693+
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Modal_vue_vue_type_template_id_53ab54d2___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
53694+
53695+
53696+
5348253697
/***/ }),
5348353698

5348453699
/***/ "./resources/js/components/Sidebar.vue":

‎resources/js/app.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ Vue.use(VueRouter)
2727

2828
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
2929
Vue.component('sidebar-component', require('./components/Sidebar.vue').default);
30+
Vue.component('modal', require('./components/Modal.vue').default);
3031

3132
/**
3233
* Next, we will create a fresh Vue application instance and attach it to

‎resources/js/components/Modal.vue

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<script>
2+
export default {
3+
name: 'modal',
4+
methods: {
5+
close() {
6+
this.$emit('close');
7+
},
8+
},
9+
};
10+
</script>
11+
<template>
12+
<transition name="modal-fade">
13+
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
14+
<div class="modal-dialog" role="document">
15+
<div class="modal-content">
16+
<div class="modal-header">
17+
<h5 class="modal-title" id="exampleModalLabel">Delete</h5>
18+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
19+
<span aria-hidden="true">&times;</span>
20+
</button>
21+
</div>
22+
<div class="modal-body">
23+
Are you sure to delete this data?
24+
</div>
25+
<div class="modal-footer">
26+
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
27+
<button type="button" class="btn btn-primary">Save changes</button>
28+
</div>
29+
</div>
30+
</div>
31+
</div>
32+
</transition>
33+
</template>

0 commit comments

Comments
 (0)