airavata-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From machris...@apache.org
Subject [airavata-django-portal] 03/04: AIRAVATA-2876 Delete confirmation dialogs
Date Wed, 19 Sep 2018 17:56:18 GMT
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 <machrist@iu.edu>
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;


Mime
View raw message