From 8c717c60de6297298ea4d8c936254b92711d3690 Mon Sep 17 00:00:00 2001 From: HerrHase Date: Fri, 7 Oct 2022 15:26:30 +0200 Subject: [PATCH] adding tiny-confirm for delete --- package-lock.json | 39 +++++++++++++++++++++++++++++++ package.json | 1 + resources/index.html | 1 + src/js/app.js | 3 +++ src/js/forms/apps.riot | 17 ++++++++++++-- src/scss/components/_confirm.scss | 6 +++++ src/scss/styles.scss | 1 + 7 files changed, 66 insertions(+), 2 deletions(-) create mode 100644 src/scss/components/_confirm.scss diff --git a/package-lock.json b/package-lock.json index bd04261..f0071be 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index b031a88..b6c67c0 100644 --- a/package.json +++ b/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", diff --git a/resources/index.html b/resources/index.html index f73995b..8d4090f 100644 --- a/resources/index.html +++ b/resources/index.html @@ -10,6 +10,7 @@
+
diff --git a/src/js/app.js b/src/js/app.js index 145ca92..029f7fa 100644 --- a/src/js/app.js +++ b/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) { diff --git a/src/js/forms/apps.riot b/src/js/forms/apps.riot index 39d1147..c8b23f7 100644 --- a/src/js/forms/apps.riot +++ b/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 * @@ -243,7 +246,7 @@ if (event.target.files[0]) { if (!this.state.current) { this.state.current = { - + } } @@ -323,8 +326,18 @@ this.update() }, + /** + * + * + */ handleDelete() { - appsStore.remove(this.state.current) + confirmStore.trigger('open', { + 'content': 'Delete "' + this.state.current.name + '" ?' + }) + + confirmStore.confirm(() => { + appsStore.remove(this.state.current) + }) }, /** diff --git a/src/scss/components/_confirm.scss b/src/scss/components/_confirm.scss new file mode 100644 index 0000000..e82f865 --- /dev/null +++ b/src/scss/components/_confirm.scss @@ -0,0 +1,6 @@ +.tiny-modal { + .modal__footer { + display: flex; + justify-content: space-between; + } +} \ No newline at end of file diff --git a/src/scss/styles.scss b/src/scss/styles.scss index f03c41f..7023786 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -11,5 +11,6 @@ 'components/loading', 'components/buttons', 'components/filter', + 'components/confirm', 'components/icons';