adding tiny-confirm for delete

package-lock.json

@@ -2538,6 +2538,45 @@
                 "defer-to-connect": "^1.0.1"
             }
         },
+        "@tiny-components/confirm": {
+            "version": "0.1.1",
+            "resolved": "https://registry.npmjs.org/@tiny-components/confirm/-/confirm-0.1.1.tgz",
+            "integrity": "sha512-YxJWGEkqa7s+4m3IZwyw3WZfuwSMERgkaeDnAXgOypC7t3hMPus0+GzSgqFSCA0boe5zl0T8NFAAN1AJJ4zZpg==",
+            "requires": {
+                "@riotjs/observable": "^4.1.1",
+                "@tiny-components/plain-ui": "^0.6.0",
+                "riot": "^7.0.6"
+            },
+            "dependencies": {
+                "@riotjs/dom-bindings": {
+                    "version": "6.0.7",
+                    "resolved": "https://registry.npmjs.org/@riotjs/dom-bindings/-/dom-bindings-6.0.7.tgz",
+                    "integrity": "sha512-BcXFOf3QslM6CAXYQwY04iP7Kzy3WSEOo0oDZQzPC26GYa7pYAPzc2TytlmZQQIG2vuUHkHJPxfVWwOk2rmKjA==",
+                    "requires": {
+                        "@riotjs/util": "^2.1.2"
+                    }
+                },
+                "@riotjs/util": {
+                    "version": "2.1.3",
+                    "resolved": "https://registry.npmjs.org/@riotjs/util/-/util-2.1.3.tgz",
+                    "integrity": "sha512-ZQYhNCIurpPcJ6yv4Hr42PIhCGwDvtPeHeSHeICnMRvwogr5Zknd2f6X29OyXv7eeZTki2TzhYNeIkhwSfxL0w=="
+                },
+                "riot": {
+                    "version": "7.0.6",
+                    "resolved": "https://registry.npmjs.org/riot/-/riot-7.0.6.tgz",
+                    "integrity": "sha512-waIurYZ3oWFcO89Sd14fvrD3euuglJZxiD3li5CxmzL51JB8nWpaHLdK8qHxGkO6+YjLiVol8GLxB03yh/HoLg==",
+                    "requires": {
+                        "@riotjs/compiler": "^6.3.2",
+                        "@riotjs/dom-bindings": "^6.0.7",
+                        "@riotjs/util": "^2.1.3",
+                        "bianco.attr": "^1.1.1",
+                        "bianco.query": "^1.1.4",
+                        "cumpa": "^1.0.1",
+                        "curri": "^1.0.1"
+                    }
+                }
+            }
+        },
         "@tiny-components/loading": {
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/@tiny-components/loading/-/loading-0.1.0.tgz",

package.json

@@ -33,6 +33,7 @@
     },
     "dependencies": {
         "@riotjs/observable": "^4.1.1",
+        "@tiny-components/confirm": "^0.1.1",
         "@tiny-components/notification": "^0.1.0",
         "@tiny-components/plain-ui": "^0.6.0",
         "@tiny-components/sidebar-form": "^0.1.0",

resources/index.html

@@ -10,6 +10,7 @@
         <div class="container-full p-top-4">
             <potato-apps-view></potato-apps-view>
             <tiny-notification></tiny-notification>
+            <tiny-confirm></tiny-confirm>
         </div>
     </div>
     <script src="js/app.js"></script>

src/js/app.js

@@ -4,6 +4,7 @@ import TinyLoading from '@tiny-components/loading/src/loading.riot'
 import TinySidebarFormHeader from './forms/header.riot'
 import TinySidebarFormFooter from './forms/footer.riot'
 import TinyNotification from '@tiny-components/notification/src/notification.riot'
+import TinyConfirm from '@tiny-components/confirm/src/confirm.riot'
 
 import FieldError from '@tiny-components/validator/src/fieldError.riot'
 
@@ -18,6 +19,7 @@ riot.register('tiny-loading', TinyLoading)
 riot.register('tiny-sidebar-form-header', TinySidebarFormHeader)
 riot.register('tiny-sidebar-form-footer', TinySidebarFormFooter)
 riot.register('tiny-notification', TinyNotification)
+riot.register('tiny-confirm', TinyConfirm)
 
 riot.register('potato-field-tags', potatoFieldTags)
 riot.register('potato-apps-view', potatoAppsView)
@@ -25,6 +27,7 @@ riot.register('potato-close-button', potatoCloseButton)
 
 riot.mount('potato-apps-view')
 riot.mount('tiny-notification')
+riot.mount('tiny-confirm')
 
 // workaround to prevent a stack overflow
 window._arrayBufferToBase64 = function _arrayBufferToBase64(buffer) {

src/js/forms/apps.riot

@@ -115,6 +115,9 @@
         // validator
         import FormValidator from '@tiny-components/validator/src/formValidator.js'
 
+        // confirm
+        import confirmStore from '@tiny-components/confirm/src/store.js'
+
         /**
          *  handler for apps
          *
@@ -323,8 +326,18 @@
                     this.update()
                  },
 
+                 /**
+                  *  
+                  *
+                  */
                  handleDelete() {
+                     confirmStore.trigger('open', {
+                         'content': 'Delete "' + this.state.current.name + '" ?'
+                     })
+
+                     confirmStore.confirm(() => {
                           appsStore.remove(this.state.current)
+                     })
                  },
 
                  /**

src/scss/components/_confirm.scss

@@ -0,0 +1,6 @@
+.tiny-modal {
+    .modal__footer {
+        display: flex;
+        justify-content: space-between;
+    }
+}

src/scss/styles.scss

@@ -11,5 +11,6 @@
     'components/loading',
     'components/buttons',
     'components/filter',
+    'components/confirm',
     'components/icons';