This is an automated email from the ASF dual-hosted git repository. machristie pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit aff43e05854cf1b64777d4973a9bfb2381d02729 Author: Marcus Christie <[email protected]> AuthorDate: Tue Sep 18 11:44:24 2018 -0400 AIRAVATA-2876 Delete confirmation dialogs --- .../applications/ApplicationDeploymentsList.vue | 12 +++--- .../applications/ApplicationModuleEditor.vue | 10 +++-- .../common/js/components/ConfirmationDialog.vue | 27 +++++++++++++ .../static/common/js/components/DeleteButton.vue | 39 +++++++++++++++++++ .../static/common/js/components/DeleteLink.vue | 40 ++++++++++++++++++++ django_airavata/static/common/js/index.js | 44 ++++++++++++---------- 6 files changed, 144 insertions(+), 28 deletions(-) diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationDeploymentsList.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationDeploymentsList.vue index c3f25fc..bb1f1f9 100644 --- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationDeploymentsList.vue +++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationDeploymentsList.vue @@ -13,10 +13,9 @@ Edit <i class="fa fa-edit" aria-hidden="true"></i> </router-link> - <a href="#" class="text-danger" @click.prevent="removeApplicationDeployment(data.item)" v-if="data.item.userHasWriteAccess"> - Delete - <i class="fa fa-trash" aria-hidden="true"></i> - </a> + <delete-link v-if="data.item.userHasWriteAccess" @delete="removeApplicationDeployment(data.item)"> + Are you sure you want to remove the {{ getComputeResourceName(data.item.computeHostId) }} deployment? + </delete-link> </template> </b-table> </template> @@ -28,14 +27,15 @@ <script> import { models, services } from "django-airavata-api"; -import { layouts } from "django-airavata-common-ui"; +import { components, layouts } from "django-airavata-common-ui"; import ComputeResourcesModal from "../admin/ComputeResourcesModal.vue"; export default { name: "application-deployments-list", components: { "list-layout": layouts.ListLayout, - ComputeResourcesModal + ComputeResourcesModal, + "delete-link": components.DeleteLink }, props: { deployments: { diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationModuleEditor.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationModuleEditor.vue index 09ba589..baf5c7f 100644 --- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationModuleEditor.vue +++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationModuleEditor.vue @@ -21,9 +21,9 @@ <b-button variant="primary" @click="save" :disabled="readonly"> Save </b-button> - <b-button v-if="data.appModuleId" variant="danger" @click="deleteApplicationModule" :disabled="readonly"> - Delete - </b-button> + <delete-button v-if="data.appModuleId" :disabled="readonly" @delete="deleteApplicationModule"> + Are you sure you want to delete the {{ data.appModuleName }} application? + </delete-button> <b-button variant="secondary" @click="cancel"> Cancel </b-button> @@ -34,6 +34,7 @@ <script> import { models } from "django-airavata-api"; +import { components } from "django-airavata-common-ui"; import vmodel_mixin from "../commons/vmodel_mixin"; export default { @@ -48,6 +49,9 @@ export default { default: false } }, + components: { + "delete-button": components.DeleteButton + }, methods: { save() { this.$emit("save"); diff --git a/django_airavata/static/common/js/components/ConfirmationDialog.vue b/django_airavata/static/common/js/components/ConfirmationDialog.vue new file mode 100644 index 0000000..a37cb6f --- /dev/null +++ b/django_airavata/static/common/js/components/ConfirmationDialog.vue @@ -0,0 +1,27 @@ +<template> + <b-modal :title="title" ref="modal" @ok="$emit('ok')" @cancel="$emit('cancel')" no-close-on-backdrop no-close-on-esc hide-header-close + ok-title="Confirm" ok-variant="danger"> + <slot></slot> + </b-modal> +</template> + +<script> +export default { + name: "confirmation-dialog", + props: { + title: { + type: String, + default: "Please confirm" + } + }, + methods: { + show() { + this.$refs.modal.show(); + }, + hide() { + this.$refs.modal.hide(); + } + } +}; +</script> + diff --git a/django_airavata/static/common/js/components/DeleteButton.vue b/django_airavata/static/common/js/components/DeleteButton.vue new file mode 100644 index 0000000..f1a22aa --- /dev/null +++ b/django_airavata/static/common/js/components/DeleteButton.vue @@ -0,0 +1,39 @@ +<template> + <div class="delete-button"> + <b-button variant="danger" @click="$refs.modal.show()" :disabled="disabled"> + Delete + </b-button> + <confirmation-dialog ref="modal" :title="dialogTitle" @ok="$emit('delete')"> + <slot></slot> + </confirmation-dialog> + </div> +</template> +<script> +import ConfirmationDialog from "./ConfirmationDialog.vue"; + +export default { + name: "delete-button", + props: { + dialogTitle: { + type: String, + default: "Please confirm delete" + }, + disabled: { + type: Boolean, + default: false + } + }, + components: { + ConfirmationDialog + } +}; +</script> + +<style scoped> +.delete-button { + display: inline-block; +} +</style> + + + diff --git a/django_airavata/static/common/js/components/DeleteLink.vue b/django_airavata/static/common/js/components/DeleteLink.vue new file mode 100644 index 0000000..6a98bbd --- /dev/null +++ b/django_airavata/static/common/js/components/DeleteLink.vue @@ -0,0 +1,40 @@ +<template> + <div class="delete-link"> + <b-link class="text-danger" @click="$refs.modal.show()"> + Delete + <i class="fa fa-trash" aria-hidden="true"></i> + </b-link> + <confirmation-dialog ref="modal" :title="dialogTitle" @ok="$emit('delete')"> + <slot></slot> + </confirmation-dialog> + </div> +</template> + +<script> +import ConfirmationDialog from "./ConfirmationDialog.vue"; + +export default { + name: "delete-link", + props: { + dialogTitle: { + type: String, + default: "Please confirm delete" + }, + disabled: { + type: Boolean, + default: false + } + }, + components: { + ConfirmationDialog + } +}; +</script> + +<style scoped> +.delete-link { + display: inline-block; +} +</style> + + diff --git a/django_airavata/static/common/js/index.js b/django_airavata/static/common/js/index.js index fca2e7e..b103f91 100644 --- a/django_airavata/static/common/js/index.js +++ b/django_airavata/static/common/js/index.js @@ -1,39 +1,45 @@ -import ApplicationCard from './components/ApplicationCard.vue' -import Autocomplete from './components/Autocomplete.vue' -import AutocompleteTextInput from './components/AutocompleteTextInput.vue' -import NotificationsDisplay from './components/NotificationsDisplay.vue' -import Pager from './components/Pager.vue' -import ShareButton from './components/ShareButton.vue' +import ApplicationCard from "./components/ApplicationCard.vue"; +import Autocomplete from "./components/Autocomplete.vue"; +import AutocompleteTextInput from "./components/AutocompleteTextInput.vue"; +import ConfirmationDialog from "./components/ConfirmationDialog.vue"; +import DeleteButton from "./components/DeleteButton.vue"; +import DeleteLink from "./components/DeleteLink.vue"; +import NotificationsDisplay from "./components/NotificationsDisplay.vue"; +import Pager from "./components/Pager.vue"; +import ShareButton from "./components/ShareButton.vue"; -import GlobalErrorHandler from './errors/GlobalErrorHandler' +import GlobalErrorHandler from "./errors/GlobalErrorHandler"; -import ListLayout from './layouts/ListLayout.vue' +import ListLayout from "./layouts/ListLayout.vue"; -import Notification from './notifications/Notification' -import NotificationList from './notifications/NotificationList' +import Notification from "./notifications/Notification"; +import NotificationList from "./notifications/NotificationList"; -import * as utils from './utils' +import * as utils from "./utils"; exports.components = { Pager, ApplicationCard, Autocomplete, AutocompleteTextInput, + ConfirmationDialog, + DeleteButton, + DeleteLink, NotificationsDisplay, - ShareButton, -} + ShareButton +}; exports.errors = { - GlobalErrorHandler, -} + GlobalErrorHandler +}; exports.layouts = { - ListLayout, -} + ListLayout +}; exports.notifications = { Notification, - NotificationList, -} + NotificationList +}; exports.utils = utils;
