component to open close sidebar

public/js/bucket-single.js

@@ -107,7 +107,7 @@ __webpack_require__.r(__webpack_exports__);
     getComponent
   ) {
     return template(
-      '<div expr14="expr14" class="field-error"></div>',
+      '<div expr4="expr4" class="field-error"></div>',
       [
         {
           '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(
-            '<ul><li expr15="expr15"></li></ul>',
+            '<ul><li expr5="expr5"></li></ul>',
             [
               {
                 '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(
-      '<div class="note-form"><div class="panel"><div class="panel__body"><form id="form" novalidate><input expr0="expr0" type="hidden" name="_id"/><div class="field-group"><label class="field-label">\n                            title\n                            <input type="text" class="field-text" name="title"/></label></div><div class="field-group"><label class="field-label">\n                            content\n                            <textarea name="content" class="field-text"></textarea></label></div><div class><div class="tabs"></div></div><div><button expr1="expr1" class="button"></button><button expr2="expr2" class="button" type="submit"></button></div></form></div></div></div>',
+      '<div class="note-form"><div class="panel"><div class="panel__body"><form id="form" novalidate><input expr1="expr1" type="hidden" name="_id"/><div class="field-group"><label class="field-label">\n                            title\n                            <input type="text" class="field-text" name="title"/></label></div><div class="field-group"><label class="field-label">\n                            content\n                            <textarea name="content" class="field-text"></textarea></label></div><div class><div class="tabs"></div></div><div><button expr2="expr2" class="button"></button><button expr3="expr3" class="button" type="submit"></button></div></form></div></div></div>',
       [
         {
           '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) {

public/js/create-bucket.js

@@ -107,7 +107,7 @@ __webpack_require__.r(__webpack_exports__);
     getComponent
   ) {
     return template(
-      '<div expr14="expr14" class="field-error"></div>',
+      '<div expr4="expr4" class="field-error"></div>',
       [
         {
           '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(
-            '<ul><li expr15="expr15"></li></ul>',
+            '<ul><li expr5="expr5"></li></ul>',
             [
               {
                 'type': bindingTypes.EACH,
@@ -153,8 +153,8 @@ __webpack_require__.r(__webpack_exports__);
                   ]
                 ),
 
-                'redundantAttribute': 'expr15',
-                'selector': '[expr15]',
+                'redundantAttribute': 'expr5',
+                'selector': '[expr5]',
                 'itemName': 'error',
                 'indexName': null,
 

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();

public/js/dashboard.js

@@ -74,7 +74,7 @@ __webpack_require__.r(__webpack_exports__);
     getComponent
   ) {
     return template(
-      '<div class="buckets"><div class="grid"><div expr8="expr8" class="col-12 col-md-4 col-xlg-3"></div></div><div class="grid"><div class="col-12"><div class="buckets__more"><button expr13="expr13" type="button" class="button">\n                        More\n                        <svg class="icon" aria-hidden="true"><use xlink:href="/symbol-defs.svg#icon-arrow-down"/></svg></button></div></div></div></div>',
+      '<div class="buckets"><div class="grid"><div expr12="expr12" class="col-12 col-md-4 col-xlg-3"></div></div><div class="grid"><div class="col-12"><div class="buckets__more"><button expr17="expr17" type="button" class="button">\n                        More\n                        <svg class="icon" aria-hidden="true"><use xlink:href="/symbol-defs.svg#icon-arrow-down"/></svg></button></div></div></div></div>',
       [
         {
           'type': bindingTypes.EACH,
@@ -82,11 +82,11 @@ __webpack_require__.r(__webpack_exports__);
           'condition': null,
 
           'template': template(
-            '<article class="panel buckets__item"><div class="bar"><div class="bar__end w-100"><button expr9="expr9" class="button button--transparent"><svg class="icon fill-text-contrast" aria-hidden="true"><use xlink:href="/symbol-defs.svg#icon-delete"/></svg></button></div></div><div class="panel__body"><a expr10="expr10"><h3 expr11="expr11" class="buckets__title"> </h3><div class="content"><p expr12="expr12"> </p></div></a></div></article>',
+            '<article class="panel buckets__item"><div class="bar"><div class="bar__end w-100"><button expr13="expr13" class="button button--transparent"><svg class="icon fill-text-contrast" aria-hidden="true"><use xlink:href="/symbol-defs.svg#icon-delete"/></svg></button></div></div><div class="panel__body"><a expr14="expr14"><h3 expr15="expr15" class="buckets__title"> </h3><div class="content"><p expr16="expr16"> </p></div></a></div></article>',
             [
               {
-                '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': [
             {

public/js/users.js

@@ -107,7 +107,7 @@ __webpack_require__.r(__webpack_exports__);
     getComponent
   ) {
     return template(
-      '<div expr14="expr14" class="field-error"></div>',
+      '<div expr4="expr4" class="field-error"></div>',
       [
         {
           '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(
-            '<ul><li expr15="expr15"></li></ul>',
+            '<ul><li expr5="expr5"></li></ul>',
             [
               {
                 '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(
+      '<button expr0="expr0" class="button m-bottom-0" type="button"></button>',
+      [
+        {
+          '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(
-      '<div class="buckets"><table class="table"><div expr3="expr3" class="table__row"></div></table><div expr6="expr6" class="grid"></div></div>',
+      '<div class="buckets"><table class="table"><tbody><tr expr6="expr6"></tr></tbody></table><div expr10="expr10" class="grid"></div></div>',
       [
         {
           'type': bindingTypes.EACH,
@@ -254,11 +344,11 @@ __webpack_require__.r(__webpack_exports__);
           'condition': null,
 
           'template': template(
-            '<div expr4="expr4" class="table__column"> </div><div expr5="expr5" class="table__column"> </div><div class="table__column"></div>',
+            '<td expr7="expr7" class="table__td"> </td><td expr8="expr8" class="table__td"> </td><td expr9="expr9" class="table__td"> </td><td class="table__td"><button class="button button--small m-bottom-0 m-right-3"><svg class="icon" aria-hidden="true"><use xlink:href="/symbol-defs.svg#icon-edit"/></svg></button><button class="button button--small m-bottom-0" type="button"><svg class="icon" aria-hidden="true"><use xlink:href="/symbol-defs.svg#icon-delete"/></svg></button></td>',
             [
               {
-                '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(
-            '<div class="col-12"><div class="buckets__more"><button expr7="expr7" type="button" class="button">\n                        More\n                        <svg class="icon" aria-hidden="true"><use xlink:href="/symbol-defs.svg#icon-arrow-down"/></svg></button></div></div>',
+            '<div class="col-12"><div class="buckets__more"><button expr11="expr11" type="button" class="button">\n                        More\n                        <svg class="icon" aria-hidden="true"><use xlink:href="/symbol-defs.svg#icon-arrow-down"/></svg></button></div></div>',
             [
               {
-                '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(
-      '<div class="sidebar sidebar--open"><div class="sidebar__inner"><div class="bar"><div class="bar__main">\n                    Create User\n                </div><div class="bar__end"><button expr16="expr16" class="button button--transparent" type="button"><svg class="icon fill-text-contrast" aria-hidden="true"><use xlink:href="/symbol-defs.svg#icon-close"/></svg></button></div></div><div class="sidebar__body"><form id="app-users-form"><div class="field-group"><label class="field-label">\n                            E-Mail\n                            <input name="email" type="text" class="field-text"/></label><field-error expr17="expr17" name="email"></field-error></div><div class="field-group"><label class="field-label">\n                            Password\n                            <input name="password" type="password" class="field-text"/></label><field-error expr18="expr18" name="password"></field-error></div></form></div><div class="sidebar__footer"><button class="button m-bottom-0" type="submit" form="app-users-form">\n                    Save\n                    <svg class="icon fill-success p-left-3" aria-hidden="true"><use xlink:href="/symbol-defs.svg#icon-check"/></svg></button><button class="button m-bottom-0" type="submit" form="app-users-form">\n                    Save and Close\n                    <svg class="icon fill-success p-left-3" aria-hidden="true"><use xlink:href="/symbol-defs.svg#icon-arrow-right"/></svg></button></div></div></div>',
+      '<div class="sidebar"><div class="sidebar__inner"><div class="bar"><div class="bar__main">\n                    Create User\n                </div><div class="bar__end"><button expr18="expr18" class="button button--transparent" type="button"><svg class="icon fill-text-contrast" aria-hidden="true"><use xlink:href="/symbol-defs.svg#icon-close"/></svg></button></div></div><div class="sidebar__body"><form id="app-users-form" novalidate><div class="field-group"><label class="field-label">\n                            Display Name\n                            <input name="display_name" type="text" class="field-text"/></label><field-error expr19="expr19" name="display_name"></field-error></div><div class="field-group"><label class="field-label">\n                            E-Mail\n                            <input name="email" type="text" class="field-text"/></label><field-error expr20="expr20" name="email"></field-error></div><div class="field-group"><label class="field-label">\n                            Password\n                            <input name="password" type="password" class="field-text"/></label><field-error expr21="expr21" name="password"></field-error></div></form></div><div class="sidebar__footer"><button class="button m-bottom-0" type="submit" form="app-users-form">\n                    Save\n                    <svg class="icon fill-success p-left-3" aria-hidden="true"><use xlink:href="/symbol-defs.svg#icon-check"/></svg></button><button class="button m-bottom-0" type="submit" form="app-users-form">\n                    Save and Close\n                    <svg class="icon fill-success p-left-3" aria-hidden="true"><use xlink:href="/symbol-defs.svg#icon-arrow-right"/></svg></button></div></div></div>',
       [
         {
-          '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');
 })();
 
 /******/ })()

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

resources/js/components/sidebar-button.riot

@@ -0,0 +1,49 @@
+<app-sidebar-button>
+    <button class="button m-bottom-0" type="button" onclick={ (event) => { handleClick(event) } }></button>
+    <script>
+
+        export default {
+
+            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)
+            }
+
+        }
+
+    </script>
+</app-sidebar-button>

resources/js/components/users.riot

@@ -1,17 +1,31 @@
 <app-users>
     <div class="buckets">
         <table class="table">
-            <div class="table__row" each={ user in state.users }>
-                <div class="table__column">
-                    { user.username }
-                </div>
-                <div class="table__column">
-                    { user.email }
-                </div>
-                <div class="table__column">
-
-                </div>
-            </div>
+            <tbody>
+                <tr each={ user in state.users }>
+                    <td class="table__td">
+                        { user.display_name }
+                    </td>
+                    <td class="table__td">
+                        { user.email }
+                    </td>
+                    <td class="table__td">
+                        { user.is_admin }
+                    </td>
+                    <td class="table__td">
+                        <button class="button button--small m-bottom-0 m-right-3">
+                            <svg class="icon" aria-hidden="true">
+                                <use xlink:href="/symbol-defs.svg#icon-edit"></use>
+                            </svg>
+                        </button>
+                        <button class="button button--small m-bottom-0" type="button">
+                            <svg class="icon" aria-hidden="true">
+                                <use xlink:href="/symbol-defs.svg#icon-delete"></use>
+                            </svg>
+                        </button>
+                    </td>
+                </tr>
+            </tbody>
         </table>
         <div class="grid" if={ state.maxLength > state.users.length }>
             <div class="col-12">

resources/js/components/users/form.riot

@@ -1,5 +1,5 @@
 <app-users-form>
-    <div class="sidebar sidebar--open">
+    <div class="sidebar">
         <div class="sidebar__inner">
 
             <div class="bar">
@@ -16,7 +16,14 @@
             </div>
 
             <div class="sidebar__body">
-                <form id="app-users-form">
+                <form id="app-users-form" novalidate>
+                    <div class="field-group">
+                        <label class="field-label">
+                            Display Name
+                            <input name="display_name" type="text" class="field-text" />
+                        </label>
+                        <field-error name="display_name"></field-error>
+                    </div>
                     <div class="field-group">
                         <label class="field-label">
                             E-Mail
@@ -73,8 +80,12 @@
              */
             onMounted(props, state) {
 
+                this.root.addEventListener('app-users-form-open', (event) => {
+                    this.$('.sidebar').classList.add('sidebar--open')
+                })
+
                 // create form validation
-                const formValidation = new FormValidator('app-users-form', {
+                const formValidation = new FormValidator('#app-users-form', {
                     'email': {
                         'length': {
                             'maximum': 255

resources/js/critical.js

@@ -1,3 +1,11 @@
+/**
+ *  add turbolinks to site
+ *
+ *  
+ *  @author Björn Hase
+ *
+ */
+
 const Turbolinks = require('turbolinks')
 
 Turbolinks.start()

resources/js/users.js

@@ -2,10 +2,14 @@ import * as riot from 'riot'
 
 import AppUsers from './components/users.riot'
 import AppUsersForm from './components/users/form.riot'
+import AppSidebarButton from './components/sidebar-button.riot'
 
 // register components for buckets
 riot.register('app-users', AppUsers)
 riot.mount('app-users')
 
 riot.register('app-users-form', AppUsersForm)
-riot.mount('app-users-form')
+riot.mount('app-users-form')
+
+riot.register('app-sidebar-button', AppSidebarButton)
+riot.mount('app-sidebar-button')

resources/views/users.html

@@ -3,9 +3,17 @@
 <div class="container container--app">
     <div class="grid">
         <div class="col-12">
-            <h1 class="highlight">
-                Users
-            </h1>
+            <div style="display: flex">
+                <h1 class="highlight">
+                    Users
+                </h1>
+                <app-sidebar-button class="m-left-4" event="app-users-form-open" selector="app-users-form">
+                    Add
+                    <svg class="icon p-left-3" aria-hidden="true">
+                        <use xlink:href="/symbol-defs.svg#icon-circle-add"></use>
+                    </svg>
+                </app-sidebar-button>
+            </div>
             <app-users></app-users>
             <app-users-form></app-users-form>
         </div>

src/repositories/bucket.ts

@@ -17,6 +17,7 @@ class BucketRepository
 
     /**
      *
+     *  
      */
     async create(data: any)
     {
@@ -25,6 +26,7 @@ class BucketRepository
     }
 
     /**
+     *
      *
      */
     async update(data: any)

src/repositories/note.ts

@@ -0,0 +1,38 @@
+import { v4 } from 'https://deno.land/std@0.99.0/uuid/mod.ts'
+import { Database } from 'https://deno.land/x/aloedb@0.9.0/mod.ts'
+import { BucketSchema } from '../stores/bucket.ts'
+
+/**
+ *
+ *
+ */
+class BucketRepository
+{
+    db: any
+
+    constructor(user_id, bucket_id)
+    {
+        this.db = new Database<BucketSchema>('./storage/database/' + user_id + '/' + bucket_id + '.json')
+    }
+
+    /**
+     *
+     *
+     */
+    async create(data: any)
+    {
+        data._id = v4.generate()
+        return await this.db.insertOne(data)
+    }
+
+    /**
+     *
+     *  
+     */
+    async update(data: any)
+    {
+        return await this.db.updateOne({ '_id': data._id }, data)
+    }
+}
+
+export default BucketRepository

src/repositories/user.ts

@@ -14,7 +14,7 @@ class UserRepository
 
     constructor()
     {
-        this.db = new Database<UserSchema>('./../../storage/database/users.json')
+        this.db = new Database<UserSchema>('./storage/database/users.json')
     }
 
     /**
@@ -25,7 +25,9 @@ class UserRepository
         data._id = v4.generate()
         data.password = await bcrypt.hash(data.password)
 
-        return await this.db.insertOne(data)
+        const user = await this.db.insertOne(data)
+
+        return user
     }
 
     /**