[airavata-django-portal] 02/05: Show as disabled applications that can't be executed

[ma...@apache.org]

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 d66982b38441d51ffa9738ab57047d53f88383bf
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Wed Jul 17 16:33:52 2019 -0400

    Show as disabled applications that can't be executed
---
 .../js/containers/DashboardContainer.vue           | 37 +++++++++++++++++-----
 .../common/js/components/ApplicationCard.vue       | 13 +++++---
 2 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/containers/DashboardContainer.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/containers/DashboardContainer.vue
index b3ec934..cdbc8af 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/containers/DashboardContainer.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/containers/DashboardContainer.vue
@@ -21,13 +21,15 @@
     </div>
     <div class="row">
       <application-card
-        v-for="item in applicationModules"
-        v-bind:appModule="item"
-        v-bind:key="item.appModuleId"
+        v-for="item in allApplicationData"
+        v-bind:appModule="item.appModule"
+        v-bind:key="item.appModule.appModuleId"
         @app-selected="handleAppSelected"
+        :disabled="item.disabled"
       >
       </application-card>
     </div>
+    </div>
 
   </div>
 </template>
@@ -41,8 +43,9 @@ export default {
   name: "dashboard-container",
   data() {
     return {
-      applicationModules: null,
-      userProfile: null
+      accessibleAppModules: null,
+      userProfile: null,
+      allApplicationModules: null
     };
   },
   components: {
@@ -65,18 +68,36 @@ export default {
       return (
         this.isNewUser &&
         this.userProfile &&
-        this.applicationModules &&
-        this.applicationModules.length === 0
+        this.accessibleAppModules.length === 0
       );
+    },
+    accessibleModuleIds() {
+      return this.accessibleAppModules
+        ? this.accessibleAppModules.map(a => a.appModuleId)
+        : [];
+    },
+    allApplicationData() {
+      return this.allApplicationModules
+        ? this.allApplicationModules.map(app => {
+            return {
+              appModule: app,
+              disabled: this.accessibleModuleIds.indexOf(app.appModuleId) < 0
+            };
+          })
+        : [];
     }
   },
   beforeMount: function() {
     services.ApplicationModuleService.list().then(
-      result => (this.applicationModules = result)
+      result => (this.accessibleAppModules = result)
     );
     services.UserProfileService.retrieve({
       lookup: session.Session.username
     }).then(userProfile => (this.userProfile = userProfile));
+    // Load all application, including ones that aren't accessible by this user
+    services.ApplicationModuleService.listAll().then(
+      result => (this.allApplicationModules = result)
+    );
   }
 };
 </script>
diff --git a/django_airavata/static/common/js/components/ApplicationCard.vue b/django_airavata/static/common/js/components/ApplicationCard.vue
index 531b931..5e2e4d8 100644
--- a/django_airavata/static/common/js/components/ApplicationCard.vue
+++ b/django_airavata/static/common/js/components/ApplicationCard.vue
@@ -1,14 +1,14 @@
 <template>
     <div class="col-md-6 col-xl-4">
-        <div class="card application-card">
-            <a href="#" class="card-link text-dark" @click.prevent="handleAppClick">
+        <div class="card application-card" :class="cardClasses">
+            <b-link :disabled="disabled" class="card-link text-dark" @click.prevent="handleAppClick">
                 <div class="card-body"  >
                     <h2 class="card-title h5">{{appModule.appModuleName}}</h2>
                     <span class="badge badge-primary mr-1" v-for="tag in appModule.tags" :key="tag">{{tag}}</span>
                     <span class="badge badge-primary mr-1" v-if="appModule.appModuleVersion" >{{appModule.appModuleVersion}}</span>
                     <p class="card-text card-text--small mt-3 text-secondary">{{appModule.appModuleDescription}}</p>
                 </div>
-            </a>
+            </b-link>
         </div>
     </div>
 </template>
@@ -16,7 +16,7 @@
 <script>
 export default {
     name: 'application-card',
-    props: ['appModule'],
+    props: ['appModule', 'disabled'],
     data:function () {
         return {
         };
@@ -25,6 +25,11 @@ export default {
         handleAppClick: function() {
             this.$emit('app-selected', this.appModule);
         }
+    },
+    computed: {
+      cardClasses() {
+        return this.disabled ? ['is-disabled'] : [];
+      },
     }
 }
 </script>