bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

started modal login and registration

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2019-10-05 21:40:26 +02:00
parent ebb20c6176
commit 79f9be6c06
5 changed files with 177 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

@@ -1,3 +1,24 @@
.overlay[data-v-b98ce164] {
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99999;
}
.modal[data-v-b98ce164] {
background-color: #fff;
position: absolute;
width: 250px;
height: 200px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#user-tools[data-v-4e9a834e]{

89
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

@@ -381,7 +381,7 @@ eval("\n\nvar bind = __webpack_require__(/*! ./helpers/bind */ \"./node_modules/
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar _default = {\n props: ['title', 'block'],\n data: function data() {\n return {\n template: null,\n mail: '',\n password: ''\n };\n },\n computed: _objectSpread({}, (0, _vuex.mapState)(['User'])),\n methods: _objectSpread({}, (0, _vuex.mapActions)({\n userLogin: 'User/userLogin'\n }), {\n login: function login() {\n this.userLogin({\n mail: this.mail,\n pass: this.password\n });\n },\n request_password: function request_password() {\n console.log('request_password');\n },\n create_account: function create_account() {\n console.log('create_account');\n }\n }),\n beforeMount: function beforeMount() {\n var _this = this;\n\n // console.log('LoginBlock beforeMount', this._props.block);\n if (this._props.block) {\n // console.log('LoginBlock beforeMount if this._props.block ok');\n this.template = _vue.default.compile(this._props.block);\n this.$options.staticRenderFns = [];\n this._staticTrees = [];\n this.template.staticRenderFns.map(function (fn) {\n return _this.$options.staticRenderFns.push(fn);\n });\n }\n },\n mounted: function mounted() {\n // console.log('LoginBlock mounted');\n Drupal.attachBehaviors(this.$el);\n },\n render: function render(h) {\n // console.log('LoginBlock render');\n if (!this.template) {\n // console.log('LoginBlock render NAN');\n return h('span', 'Loading ...');\n } else {\n // console.log('LoginBlock render template');\n return this.template.render.call(this);\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar _default = {\n props: ['title', 'block'],\n data: function data() {\n return {\n template: null,\n mail: '',\n password: ''\n };\n },\n // computed: {\n // ...mapState(['User'])\n // },\n methods: _objectSpread({}, (0, _vuex.mapActions)({\n userLogin: 'User/userLogin'\n }), {\n login: function login() {\n this.userLogin({\n mail: this.mail,\n pass: this.password\n });\n },\n request_password: function request_password() {\n console.log('request_password');\n },\n create_account: function create_account() {\n console.log('create_account');\n }\n }),\n beforeMount: function beforeMount() {\n var _this = this;\n\n // console.log('LoginBlock beforeMount', this._props.block);\n if (this._props.block) {\n // console.log('LoginBlock beforeMount if this._props.block ok');\n this.template = _vue.default.compile(this._props.block);\n this.$options.staticRenderFns = [];\n this._staticTrees = [];\n this.template.staticRenderFns.map(function (fn) {\n return _this.$options.staticRenderFns.push(fn);\n });\n }\n },\n mounted: function mounted() {\n // console.log('LoginBlock mounted');\n Drupal.attachBehaviors(this.$el);\n },\n render: function render(h) {\n // console.log('LoginBlock render');\n if (!this.template) {\n // console.log('LoginBlock render NAN');\n return h('span', 'Loading ...');\n } else {\n // console.log('LoginBlock render template');\n return this.template.render.call(this);\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
/***/ }),
@@ -453,7 +453,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _restAxios = __webpack_require__(/*! vuejs/api/rest-axios */ \"./web/themes/custom/materiotheme/vuejs/api/rest-axios.js\");\n\nvar _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nvar basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;\nvar _default = {\n name: \"Product\",\n router: _route.default,\n props: ['product'],\n data: function data() {\n return {\n quantity: 1\n };\n },\n methods: {\n addtocart: function addtocart() {\n console.log(\"addtocart clicked\"); // curl -X POST \\\n // 'http://localhost:32775/cart/add?_format=json' \\\n // -H 'Content-Type: application/json' \\\n // -d '[{ \"purchased_entity_type\": \"commerce_product_variation\", \"purchased_entity_id\": \"6\", \"quantity\": \"1\"}]'\n\n _restAxios.REST.post(\"/cart/add?_format=json\", [{\n \"purchased_entity_type\": \"commerce_product_variation\",\n \"purchased_entity_id\": this.product.variation_id,\n \"quantity\": this.quantity\n }]).then(function (_ref) {\n var data = _ref.data;\n console.log('product add to cart REST: data', data);\n }).catch(function (error) {\n console.warn('Issue with pricing', error);\n Promise.reject(error);\n });\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Product.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _restAxios = __webpack_require__(/*! vuejs/api/rest-axios */ \"./web/themes/custom/materiotheme/vuejs/api/rest-axios.js\");\n\nvar _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n\nvar _Modal = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Helper/Modal */ \"./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;\nvar _default = {\n name: \"Product\",\n router: _route.default,\n props: ['product'],\n data: function data() {\n return {\n quantity: 1,\n login: false,\n register: false\n };\n },\n computed: _objectSpread({}, (0, _vuex.mapState)({\n isloggedin: function isloggedin(state) {\n return state.User.isloggedin;\n }\n })),\n methods: _objectSpread({}, (0, _vuex.mapActions)({\n userLogin: 'User/userLogin'\n }), {\n checkaddtocart: function checkaddtocart() {\n console.log('checkaddtocart');\n\n if (!this.isloggedin) {\n // TODO: show popup login or register\n this.login = true; // TODO: rest login or register\n // TODO: rest login\n // TODO: this.addtocart()\n } else {\n this.addtocart();\n }\n },\n addtocart: function addtocart() {\n console.log(\"addtocart\");\n\n _restAxios.REST.post(\"/cart/add?_format=json\", [{\n \"purchased_entity_type\": \"commerce_product_variation\",\n \"purchased_entity_id\": this.product.variation_id,\n \"quantity\": this.quantity\n }]).then(function (_ref) {\n var data = _ref.data;\n console.log('product add to cart REST: data', data);\n }).catch(function (error) {\n console.warn('Issue with pricing', error);\n Promise.reject(error);\n });\n }\n }),\n components: {\n Modal: _Modal.default\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Product.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
/***/ }),
@@ -481,6 +481,18 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n
/***/ }),
/***/ "./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?vue&type=script&lang=js&":
/*!*************************************************************************************************************************************************************************************!*\
!*** ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?vue&type=script&lang=js& ***!
\*************************************************************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n//\n//\n//\n//\n//\n//\n//\nvar _default = {\n name: \"\",\n data: function data() {\n return {};\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
/***/ }),
/***/ "./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue?vue&type=script&lang=js&":
/*!**************************************************************************************************************************************************************************************!*\
!*** ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue?vue&type=script&lang=js& ***!
@@ -599,6 +611,17 @@ eval("// extracted by mini-css-extract-plugin\n\n//# sourceURL=webpack:///./web/
/***/ }),
/***/ "./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?vue&type=style&index=0&id=b98ce164&lang=scss&scoped=true&":
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?vue&type=style&index=0&id=b98ce164&lang=scss&scoped=true& ***!
\************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
eval("// extracted by mini-css-extract-plugin\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options");
/***/ }),
/***/ "./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/User/UserTools.vue?vue&type=style&index=0&id=4e9a834e&lang=css&scoped=true&":
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/User/UserTools.vue?vue&type=style&index=0&id=4e9a834e&lang=css&scoped=true& ***!
@@ -758,7 +781,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"article\", { staticClass: \"product\" }, [\n _c(\"header\", [\n _c(\"h1\", { domProps: { innerHTML: _vm._s(_vm.product.title) } })\n ]),\n _vm._v(\" \"),\n _c(\"section\", { staticClass: \"content\" }, [\n _c(\"div\", {\n staticClass: \"description\",\n domProps: { innerHTML: _vm._s(_vm.product.field_description) }\n }),\n _vm._v(\" \"),\n _c(\"span\", { staticClass: \"price\" }, [\n _vm._v(_vm._s(_vm.product.price__number))\n ])\n ]),\n _vm._v(\" \"),\n _c(\"aside\", {}, [\n _vm.product.field_multiple\n ? _c(\"input\", {\n directives: [\n {\n name: \"model\",\n rawName: \"v-model\",\n value: _vm.quantity,\n expression: \"quantity\"\n }\n ],\n attrs: {\n placeholder: \"quantity\",\n type: \"text\",\n name: \"quantity\",\n value: \"1\"\n },\n domProps: { value: _vm.quantity },\n on: {\n input: function($event) {\n if ($event.target.composing) {\n return\n }\n _vm.quantity = $event.target.value\n }\n }\n })\n : _vm._e(),\n _vm._v(\" \"),\n _c(\n \"button\",\n {\n attrs: { type: \"button\", name: \"addtocart\" },\n on: {\n click: function($event) {\n $event.stopPropagation()\n return _vm.addtocart($event)\n }\n }\n },\n [_vm._v(\"\\n Commander\\n \")]\n )\n ])\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Product.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\n \"article\",\n { staticClass: \"product\" },\n [\n _c(\"header\", [\n _c(\"h1\", { domProps: { innerHTML: _vm._s(_vm.product.title) } })\n ]),\n _vm._v(\" \"),\n _c(\"section\", { staticClass: \"content\" }, [\n _c(\"div\", {\n staticClass: \"description\",\n domProps: { innerHTML: _vm._s(_vm.product.field_description) }\n }),\n _vm._v(\" \"),\n _c(\"span\", { staticClass: \"price\" }, [\n _vm._v(_vm._s(_vm.product.price__number))\n ])\n ]),\n _vm._v(\" \"),\n _c(\"aside\", {}, [\n _vm.product.field_multiple\n ? _c(\"input\", {\n directives: [\n {\n name: \"model\",\n rawName: \"v-model\",\n value: _vm.quantity,\n expression: \"quantity\"\n }\n ],\n attrs: {\n placeholder: \"quantity\",\n type: \"text\",\n name: \"quantity\",\n value: \"1\"\n },\n domProps: { value: _vm.quantity },\n on: {\n input: function($event) {\n if ($event.target.composing) {\n return\n }\n _vm.quantity = $event.target.value\n }\n }\n })\n : _vm._e(),\n _vm._v(\" \"),\n _c(\n \"button\",\n {\n attrs: { type: \"button\", name: \"addtocart\" },\n on: {\n click: function($event) {\n $event.stopPropagation()\n return _vm.checkaddtocart($event)\n }\n }\n },\n [_vm._v(\"\\n Commander\\n \")]\n )\n ]),\n _vm._v(\" \"),\n _vm.login ? _c(\"Modal\", [_vm._v(\"\\n i'm a modal\\n \")]) : _vm._e()\n ],\n 1\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Product.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
/***/ }),
@@ -774,6 +797,18 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
/***/ }),
/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?vue&type=template&id=b98ce164&scoped=true&":
/*!***************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?vue&type=template&id=b98ce164&scoped=true& ***!
\***************************************************************************************************************************************************************************************************************************************************/
/*! exports provided: render, staticRenderFns */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { staticClass: \"overlay\" }, [\n _c(\"div\", { staticClass: \"modal\" }, [_vm._t(\"default\")], 2)\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
/***/ }),
/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue?vue&type=template&id=74fbee19&scoped=true&":
/*!****************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue?vue&type=template&id=74fbee19&scoped=true& ***!
@@ -1287,6 +1322,54 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _nod
/***/ }),
/***/ "./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue":
/*!**************************************************************************!*\
!*** ./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue ***!
\**************************************************************************/
/*! no static exports found */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Modal_vue_vue_type_template_id_b98ce164_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Modal.vue?vue&type=template&id=b98ce164&scoped=true& */ \"./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?vue&type=template&id=b98ce164&scoped=true&\");\n/* harmony import */ var _Modal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Modal.vue?vue&type=script&lang=js& */ \"./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?vue&type=script&lang=js&\");\n/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _Modal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _Modal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[key]; }) }(__WEBPACK_IMPORT_KEY__));\n/* harmony import */ var _Modal_vue_vue_type_style_index_0_id_b98ce164_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Modal.vue?vue&type=style&index=0&id=b98ce164&lang=scss&scoped=true& */ \"./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?vue&type=style&index=0&id=b98ce164&lang=scss&scoped=true&\");\n/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ \"./node_modules/vue-loader/lib/runtime/componentNormalizer.js\");\n\n\n\n\n\n\n/* normalize component */\n\nvar component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(\n _Modal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n _Modal_vue_vue_type_template_id_b98ce164_scoped_true___WEBPACK_IMPORTED_MODULE_0__[\"render\"],\n _Modal_vue_vue_type_template_id_b98ce164_scoped_true___WEBPACK_IMPORTED_MODULE_0__[\"staticRenderFns\"],\n false,\n null,\n \"b98ce164\",\n null\n \n)\n\n/* hot reload */\nif (false) { var api; }\ncomponent.options.__file = \"web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue\"\n/* harmony default export */ __webpack_exports__[\"default\"] = (component.exports);\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?");
/***/ }),
/***/ "./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?vue&type=script&lang=js&":
/*!***************************************************************************************************!*\
!*** ./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?vue&type=script&lang=js& ***!
\***************************************************************************************************/
/*! no static exports found */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_babel_loader_lib_index_js_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!../../../../../../../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?!./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?vue&type=script&lang=js&\");\n/* harmony import */ var _node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Modal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Modal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__);\n/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Modal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Modal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));\n /* harmony default export */ __webpack_exports__[\"default\"] = (_node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Modal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0___default.a); \n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?");
/***/ }),
/***/ "./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?vue&type=style&index=0&id=b98ce164&lang=scss&scoped=true&":
/*!************************************************************************************************************************************!*\
!*** ./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?vue&type=style&index=0&id=b98ce164&lang=scss&scoped=true& ***!
\************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_lib_loader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Modal_vue_vue_type_style_index_0_id_b98ce164_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../../../../node_modules/mini-css-extract-plugin/dist/loader.js!../../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../../node_modules/sass-loader/lib/loader.js!../../../../../../../node_modules/vue-loader/lib??vue-loader-options!./Modal.vue?vue&type=style&index=0&id=b98ce164&lang=scss&scoped=true& */ \"./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?vue&type=style&index=0&id=b98ce164&lang=scss&scoped=true&\");\n/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_lib_loader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Modal_vue_vue_type_style_index_0_id_b98ce164_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_lib_loader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Modal_vue_vue_type_style_index_0_id_b98ce164_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__);\n/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_mini_css_extract_plugin_dist_loader_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_lib_loader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Modal_vue_vue_type_style_index_0_id_b98ce164_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_mini_css_extract_plugin_dist_loader_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_lib_loader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Modal_vue_vue_type_style_index_0_id_b98ce164_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));\n /* harmony default export */ __webpack_exports__[\"default\"] = (_node_modules_mini_css_extract_plugin_dist_loader_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_lib_loader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Modal_vue_vue_type_style_index_0_id_b98ce164_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default.a); \n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?");
/***/ }),
/***/ "./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?vue&type=template&id=b98ce164&scoped=true&":
/*!*********************************************************************************************************************!*\
!*** ./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?vue&type=template&id=b98ce164&scoped=true& ***!
\*********************************************************************************************************************/
/*! exports provided: render, staticRenderFns */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* 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_b98ce164_scoped_true___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=b98ce164&scoped=true& */ \"./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?vue&type=template&id=b98ce164&scoped=true&\");\n/* 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_b98ce164_scoped_true___WEBPACK_IMPORTED_MODULE_0__[\"render\"]; });\n\n/* 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_b98ce164_scoped_true___WEBPACK_IMPORTED_MODULE_0__[\"staticRenderFns\"]; });\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue?");
/***/ }),
/***/ "./web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue":
/*!***************************************************************************!*\
!*** ./web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue ***!

6
web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue
View File

@@ -12,9 +12,9 @@ export default {
password: ''
}
},
computed: {
...mapState(['User'])
},
// computed: {
// ...mapState(['User'])
// },
methods: {
...mapActions({
userLogin: 'User/userLogin'

44
web/themes/custom/materiotheme/vuejs/components/Content/Product.vue
View File

@@ -19,12 +19,16 @@
<button
type="button"
name="addtocart"
@click.stop="addtocart"
@click.stop="checkaddtocart"
>
Commander
</button>
</aside>
<Modal
v-if="login"
>
i'm a modal
</Modal>
</article>
</template>
@@ -32,6 +36,8 @@
import { REST } from 'vuejs/api/rest-axios'
import router from 'vuejs/route'
import { mapState, mapActions } from 'vuex'
import Modal from 'vuejs/components/Helper/Modal'
let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
@@ -41,16 +47,35 @@ export default {
props: ['product'],
data(){
return {
quantity: 1
quantity: 1,
login:false,
register:false
}
},
computed: {
...mapState({
isloggedin: state => state.User.isloggedin
})
},
methods:{
...mapActions({
userLogin: 'User/userLogin'
}),
checkaddtocart() {
console.log('checkaddtocart');
if(!this.isloggedin){
// TODO: show popup login or register
this.login = true
// TODO: rest login or register
// TODO: rest login
// TODO: this.addtocart()
}else{
this.addtocart()
}
},
addtocart () {
console.log("addtocart clicked");
// curl -X POST \
// 'http://localhost:32775/cart/add?_format=json' \
// -H 'Content-Type: application/json' \
// -d '[{ "purchased_entity_type": "commerce_product_variation", "purchased_entity_id": "6", "quantity": "1"}]'
console.log("addtocart")
REST.post(`/cart/add?_format=json`, [{
"purchased_entity_type": "commerce_product_variation",
@@ -66,6 +91,9 @@ export default {
})
}
},
components: {
Modal
}
}
</script>

31
web/themes/custom/materiotheme/vuejs/components/Helper/Modal.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<div class="overlay">
<div class="modal">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "",
data: () => ({
})
}
</script>
<style lang="scss" scoped>
.overlay{
background-color: rgba(0,0,0,0.8);
position:fixed;
top:0; right:0; bottom:0; left:0;
z-index:99999;
}
.modal{
background-color:#fff;
position:absolute;
width:250px;
height:200px;
top:0; right:0; bottom:0; left:0;
margin:auto;
}
</style>