From 5aecdecd38e8633638f2924cb45b399022301a6e Mon Sep 17 00:00:00 2001 From: HerrHase Date: Mon, 2 Aug 2021 22:38:49 +0200 Subject: [PATCH] component to open close sidebar --- public/js/bucket-single.js | 31 +-- public/js/create-bucket.js | 12 +- public/js/critical.js | 7 + public/js/dashboard.js | 28 +-- public/js/users.js | 205 ++++++++++++++++---- resources/js/FormValidator.js | 5 + resources/js/components/sidebar-button.riot | 49 +++++ resources/js/components/users.riot | 36 ++-- resources/js/components/users/form.riot | 17 +- resources/js/critical.js | 8 + resources/js/users.js | 6 +- resources/views/users.html | 14 +- src/repositories/bucket.ts | 2 + src/repositories/note.ts | 38 ++++ src/repositories/user.ts | 6 +- symbol-defs.svg | 1 - 16 files changed, 378 insertions(+), 87 deletions(-) create mode 100644 resources/js/components/sidebar-button.riot create mode 100644 src/repositories/note.ts delete mode 100644 symbol-defs.svg diff --git a/public/js/bucket-single.js b/public/js/bucket-single.js index 7897c27..9ce08c7 100644 --- a/public/js/bucket-single.js +++ b/public/js/bucket-single.js @@ -107,7 +107,7 @@ __webpack_require__.r(__webpack_exports__); getComponent ) { return template( - '
', + '
', [ { 'type': bindingTypes.IF, @@ -118,11 +118,11 @@ __webpack_require__.r(__webpack_exports__); return _scope.state.errors.length > 0; }, - 'redundantAttribute': 'expr14', - 'selector': '[expr14]', + 'redundantAttribute': 'expr4', + 'selector': '[expr4]', 'template': template( - '', + '', [ { 'type': bindingTypes.EACH, @@ -153,8 +153,8 @@ __webpack_require__.r(__webpack_exports__); ] ), - 'redundantAttribute': 'expr15', - 'selector': '[expr15]', + 'redundantAttribute': 'expr5', + 'selector': '[expr5]', 'itemName': 'error', 'indexName': null, @@ -272,7 +272,7 @@ riot__WEBPACK_IMPORTED_MODULE_3__.mount('field-error') getComponent ) { return template( - '
', + '
', [ { 'type': bindingTypes.IF, @@ -283,8 +283,8 @@ riot__WEBPACK_IMPORTED_MODULE_3__.mount('field-error') return _scope.state.note && _scope.state.note._id; }, - 'redundantAttribute': 'expr0', - 'selector': '[expr0]', + 'redundantAttribute': 'expr1', + 'selector': '[expr1]', 'template': template( null, @@ -315,8 +315,8 @@ riot__WEBPACK_IMPORTED_MODULE_3__.mount('field-error') return !_scope.state.note || (_scope.state.note && !_scope.state.note._id); }, - 'redundantAttribute': 'expr1', - 'selector': '[expr1]', + 'redundantAttribute': 'expr2', + 'selector': '[expr2]', 'template': template( '\n Create\n ', @@ -332,8 +332,8 @@ riot__WEBPACK_IMPORTED_MODULE_3__.mount('field-error') return _scope.state.note && _scope.state.note._id; }, - 'redundantAttribute': 'expr2', - 'selector': '[expr2]', + 'redundantAttribute': 'expr3', + 'selector': '[expr3]', 'template': template( '\n Save\n ', @@ -2230,6 +2230,11 @@ var FormValidator = /*#__PURE__*/function () { this.constraits = constraits; // get form and elements this.form = document.querySelector(this.formSelector); + + if (!this.form) { + console.error('FormValidator: form not found, querySelector not found "' + this.formSelector + '"'); + } + this.elements = this.form.querySelectorAll('field-error'); // adding submit event this.form.addEventListener('submit', function (event) { diff --git a/public/js/create-bucket.js b/public/js/create-bucket.js index a7c1f2e..07826dc 100644 --- a/public/js/create-bucket.js +++ b/public/js/create-bucket.js @@ -107,7 +107,7 @@ __webpack_require__.r(__webpack_exports__); getComponent ) { return template( - '
', + '
', [ { 'type': bindingTypes.IF, @@ -118,11 +118,11 @@ __webpack_require__.r(__webpack_exports__); return _scope.state.errors.length > 0; }, - 'redundantAttribute': 'expr14', - 'selector': '[expr14]', + 'redundantAttribute': 'expr4', + 'selector': '[expr4]', 'template': template( - '', + '', [ { 'type': bindingTypes.EACH, @@ -153,8 +153,8 @@ __webpack_require__.r(__webpack_exports__); ] ), - 'redundantAttribute': 'expr15', - 'selector': '[expr15]', + 'redundantAttribute': 'expr5', + 'selector': '[expr5]', 'itemName': 'error', 'indexName': null, diff --git a/public/js/critical.js b/public/js/critical.js index 14b6ab5..2e11241 100644 --- a/public/js/critical.js +++ b/public/js/critical.js @@ -7,6 +7,13 @@ \**********************************/ /***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => { +/** + * add turbolinks to site + * + * + * @author Björn Hase + * + */ var Turbolinks = __webpack_require__(/*! turbolinks */ "./node_modules/turbolinks/dist/turbolinks.js"); Turbolinks.start(); diff --git a/public/js/dashboard.js b/public/js/dashboard.js index 8ba46c2..525f897 100644 --- a/public/js/dashboard.js +++ b/public/js/dashboard.js @@ -74,7 +74,7 @@ __webpack_require__.r(__webpack_exports__); getComponent ) { return template( - '
', + '
', [ { 'type': bindingTypes.EACH, @@ -82,11 +82,11 @@ __webpack_require__.r(__webpack_exports__); 'condition': null, 'template': template( - '

', + '

', [ { - 'redundantAttribute': 'expr9', - 'selector': '[expr9]', + 'redundantAttribute': 'expr13', + 'selector': '[expr13]', 'expressions': [ { @@ -102,8 +102,8 @@ __webpack_require__.r(__webpack_exports__); ] }, { - 'redundantAttribute': 'expr10', - 'selector': '[expr10]', + 'redundantAttribute': 'expr14', + 'selector': '[expr14]', 'expressions': [ { @@ -124,8 +124,8 @@ __webpack_require__.r(__webpack_exports__); ] }, { - 'redundantAttribute': 'expr11', - 'selector': '[expr11]', + 'redundantAttribute': 'expr15', + 'selector': '[expr15]', 'expressions': [ { @@ -145,8 +145,8 @@ __webpack_require__.r(__webpack_exports__); ] }, { - 'redundantAttribute': 'expr12', - 'selector': '[expr12]', + 'redundantAttribute': 'expr16', + 'selector': '[expr16]', 'expressions': [ { @@ -168,8 +168,8 @@ __webpack_require__.r(__webpack_exports__); ] ), - 'redundantAttribute': 'expr8', - 'selector': '[expr8]', + 'redundantAttribute': 'expr12', + 'selector': '[expr12]', 'itemName': 'bucket', 'indexName': null, @@ -180,8 +180,8 @@ __webpack_require__.r(__webpack_exports__); } }, { - 'redundantAttribute': 'expr13', - 'selector': '[expr13]', + 'redundantAttribute': 'expr17', + 'selector': '[expr17]', 'expressions': [ { diff --git a/public/js/users.js b/public/js/users.js index 9d10ece..e8dd6b8 100644 --- a/public/js/users.js +++ b/public/js/users.js @@ -107,7 +107,7 @@ __webpack_require__.r(__webpack_exports__); getComponent ) { return template( - '
', + '
', [ { 'type': bindingTypes.IF, @@ -118,11 +118,11 @@ __webpack_require__.r(__webpack_exports__); return _scope.state.errors.length > 0; }, - 'redundantAttribute': 'expr14', - 'selector': '[expr14]', + 'redundantAttribute': 'expr4', + 'selector': '[expr4]', 'template': template( - '', + '', [ { 'type': bindingTypes.EACH, @@ -153,8 +153,8 @@ __webpack_require__.r(__webpack_exports__); ] ), - 'redundantAttribute': 'expr15', - 'selector': '[expr15]', + 'redundantAttribute': 'expr5', + 'selector': '[expr5]', 'itemName': 'error', 'indexName': null, @@ -176,6 +176,96 @@ __webpack_require__.r(__webpack_exports__); /***/ }), +/***/ "./resources/js/components/sidebar-button.riot": +/*!*****************************************************!*\ + !*** ./resources/js/components/sidebar-button.riot ***! + \*****************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export */ __webpack_require__.d(__webpack_exports__, { +/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) +/* harmony export */ }); +/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({ + 'css': null, + + 'exports': { + state: { + element: undefined, + data: [] + }, + + /** + * + * + */ + onBeforeMount() { + + // getting innerHtml before rendering component + this.content = this.root.innerHTML; + this.root.innerHTML = ''; + }, + + /** + * + * + */ + onMounted() { + this.state.element = document.querySelector(this.props.selector) + + // adding innerHtml to button + this.$('button').innerHTML = this.content; + }, + + /** + * + * @param {[type]} event + * @return {[type]} + */ + handleClick(event) { + event.preventDefault() + + const customEvent = new CustomEvent(this.props.event) + this.state.element.dispatchEvent(customEvent, this.state.data) + } + }, + + 'template': function( + template, + expressionTypes, + bindingTypes, + getComponent + ) { + return template( + '', + [ + { + 'redundantAttribute': 'expr0', + 'selector': '[expr0]', + + 'expressions': [ + { + 'type': expressionTypes.EVENT, + 'name': 'onclick', + + 'evaluate': function( + _scope + ) { + return (event) => { _scope.handleClick(event) }; + } + } + ] + } + ] + ); + }, + + 'name': 'app-sidebar-button' +}); + +/***/ }), + /***/ "./resources/js/components/users.riot": /*!********************************************!*\ !*** ./resources/js/components/users.riot ***! @@ -246,7 +336,7 @@ __webpack_require__.r(__webpack_exports__); getComponent ) { return template( - '
', + '
', [ { 'type': bindingTypes.EACH, @@ -254,11 +344,11 @@ __webpack_require__.r(__webpack_exports__); 'condition': null, 'template': template( - '
', + ' ', [ { - 'redundantAttribute': 'expr4', - 'selector': '[expr4]', + 'redundantAttribute': 'expr7', + 'selector': '[expr7]', 'expressions': [ { @@ -269,7 +359,7 @@ __webpack_require__.r(__webpack_exports__); _scope ) { return [ - _scope.user.username + _scope.user.display_name ].join( '' ); @@ -278,8 +368,8 @@ __webpack_require__.r(__webpack_exports__); ] }, { - 'redundantAttribute': 'expr5', - 'selector': '[expr5]', + 'redundantAttribute': 'expr8', + 'selector': '[expr8]', 'expressions': [ { @@ -297,12 +387,33 @@ __webpack_require__.r(__webpack_exports__); } } ] + }, + { + 'redundantAttribute': 'expr9', + 'selector': '[expr9]', + + 'expressions': [ + { + 'type': expressionTypes.TEXT, + 'childNodeIndex': 0, + + 'evaluate': function( + _scope + ) { + return [ + _scope.user.is_admin + ].join( + '' + ); + } + } + ] } ] ), - 'redundantAttribute': 'expr3', - 'selector': '[expr3]', + 'redundantAttribute': 'expr6', + 'selector': '[expr6]', 'itemName': 'user', 'indexName': null, @@ -321,15 +432,15 @@ __webpack_require__.r(__webpack_exports__); return _scope.state.maxLength > _scope.state.users.length; }, - 'redundantAttribute': 'expr6', - 'selector': '[expr6]', + 'redundantAttribute': 'expr10', + 'selector': '[expr10]', 'template': template( - '
', + '
', [ { - 'redundantAttribute': 'expr7', - 'selector': '[expr7]', + 'redundantAttribute': 'expr11', + 'selector': '[expr11]', 'expressions': [ { @@ -395,8 +506,12 @@ riot__WEBPACK_IMPORTED_MODULE_3__.mount('field-error') */ onMounted(props, state) { + this.root.addEventListener('app-users-form-open', (event) => { + this.$('.sidebar').classList.add('sidebar--open') + }) + // create form validation - const formValidation = new _FormValidator__WEBPACK_IMPORTED_MODULE_1__.default('app-users-form', { + const formValidation = new _FormValidator__WEBPACK_IMPORTED_MODULE_1__.default('#app-users-form', { 'email': { 'length': { 'maximum': 255 @@ -452,11 +567,11 @@ riot__WEBPACK_IMPORTED_MODULE_3__.mount('field-error') getComponent ) { return template( - '
\n Create User\n
', + '
\n Create User\n
', [ { - 'redundantAttribute': 'expr16', - 'selector': '[expr16]', + 'redundantAttribute': 'expr18', + 'selector': '[expr18]', 'expressions': [ { @@ -483,8 +598,8 @@ riot__WEBPACK_IMPORTED_MODULE_3__.mount('field-error') 'slots': [], 'attributes': [], - 'redundantAttribute': 'expr17', - 'selector': '[expr17]' + 'redundantAttribute': 'expr19', + 'selector': '[expr19]' }, { 'type': bindingTypes.TAG, @@ -498,8 +613,23 @@ riot__WEBPACK_IMPORTED_MODULE_3__.mount('field-error') 'slots': [], 'attributes': [], - 'redundantAttribute': 'expr18', - 'selector': '[expr18]' + 'redundantAttribute': 'expr20', + 'selector': '[expr20]' + }, + { + 'type': bindingTypes.TAG, + 'getComponent': getComponent, + + 'evaluate': function( + _scope + ) { + return 'field-error'; + }, + + 'slots': [], + 'attributes': [], + 'redundantAttribute': 'expr21', + 'selector': '[expr21]' } ] ); @@ -2391,6 +2521,11 @@ var FormValidator = /*#__PURE__*/function () { this.constraits = constraits; // get form and elements this.form = document.querySelector(this.formSelector); + + if (!this.form) { + console.error('FormValidator: form not found, querySelector not found "' + this.formSelector + '"'); + } + this.elements = this.form.querySelectorAll('field-error'); // adding submit event this.form.addEventListener('submit', function (event) { @@ -9263,17 +9398,21 @@ var __webpack_exports__ = {}; !*** ./resources/js/users.js ***! \*******************************/ __webpack_require__.r(__webpack_exports__); -/* harmony import */ var riot__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! riot */ "./node_modules/riot/riot.esm.js"); +/* harmony import */ var riot__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! riot */ "./node_modules/riot/riot.esm.js"); /* harmony import */ var _components_users_riot__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components/users.riot */ "./resources/js/components/users.riot"); /* harmony import */ var _components_users_form_riot__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/users/form.riot */ "./resources/js/components/users/form.riot"); +/* harmony import */ var _components_sidebar_button_riot__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/sidebar-button.riot */ "./resources/js/components/sidebar-button.riot"); + // register components for buckets -riot__WEBPACK_IMPORTED_MODULE_2__.register('app-users', _components_users_riot__WEBPACK_IMPORTED_MODULE_0__.default); -riot__WEBPACK_IMPORTED_MODULE_2__.mount('app-users'); -riot__WEBPACK_IMPORTED_MODULE_2__.register('app-users-form', _components_users_form_riot__WEBPACK_IMPORTED_MODULE_1__.default); -riot__WEBPACK_IMPORTED_MODULE_2__.mount('app-users-form'); +riot__WEBPACK_IMPORTED_MODULE_3__.register('app-users', _components_users_riot__WEBPACK_IMPORTED_MODULE_0__.default); +riot__WEBPACK_IMPORTED_MODULE_3__.mount('app-users'); +riot__WEBPACK_IMPORTED_MODULE_3__.register('app-users-form', _components_users_form_riot__WEBPACK_IMPORTED_MODULE_1__.default); +riot__WEBPACK_IMPORTED_MODULE_3__.mount('app-users-form'); +riot__WEBPACK_IMPORTED_MODULE_3__.register('app-sidebar-button', _components_sidebar_button_riot__WEBPACK_IMPORTED_MODULE_2__.default); +riot__WEBPACK_IMPORTED_MODULE_3__.mount('app-sidebar-button'); })(); /******/ })() diff --git a/resources/js/FormValidator.js b/resources/js/FormValidator.js index efba254..d5f5b7e 100644 --- a/resources/js/FormValidator.js +++ b/resources/js/FormValidator.js @@ -25,6 +25,11 @@ class FormValidator // get form and elements this.form = document.querySelector(this.formSelector) + + if (!this.form) { + console.error('FormValidator: form not found, querySelector not found "' + this.formSelector + '"') + } + this.elements = this.form.querySelectorAll('field-error') // adding submit event diff --git a/resources/js/components/sidebar-button.riot b/resources/js/components/sidebar-button.riot new file mode 100644 index 0000000..2988c10 --- /dev/null +++ b/resources/js/components/sidebar-button.riot @@ -0,0 +1,49 @@ + + + + \ No newline at end of file diff --git a/resources/js/components/users.riot b/resources/js/components/users.riot index 52272ac..b6373dc 100644 --- a/resources/js/components/users.riot +++ b/resources/js/components/users.riot @@ -1,17 +1,31 @@
-
-
- { user.username } -
-
- { user.email } -
-
- -
-
+ + + + + + + +
+ { user.display_name } + + { user.email } + + { user.is_admin } + + + +
state.users.length }>
diff --git a/resources/js/components/users/form.riot b/resources/js/components/users/form.riot index 26215ec..4d0712d 100644 --- a/resources/js/components/users/form.riot +++ b/resources/js/components/users/form.riot @@ -1,5 +1,5 @@ -
+
@@ -16,7 +16,14 @@
-
+ +
+ + +