From commits-return-19652-archive-asf-public=cust-asf.ponee.io@airavata.apache.org  Tue Sep 11 19:12:02 2018
Return-Path: <commits-return-19652-archive-asf-public=cust-asf.ponee.io@airavata.apache.org>
X-Original-To: archive-asf-public@cust-asf.ponee.io
Delivered-To: archive-asf-public@cust-asf.ponee.io
Received: from mail.apache.org (hermes.apache.org [140.211.11.3])
	by mx-eu-01.ponee.io (Postfix) with SMTP id 6BC0A18067A
	for <archive-asf-public@cust-asf.ponee.io>; Tue, 11 Sep 2018 19:12:00 +0200 (CEST)
Received: (qmail 11661 invoked by uid 500); 11 Sep 2018 17:11:51 -0000
Mailing-List: contact commits-help@airavata.apache.org; run by ezmlm
Precedence: bulk
List-Help: <mailto:commits-help@airavata.apache.org>
List-Unsubscribe: <mailto:commits-unsubscribe@airavata.apache.org>
List-Post: <mailto:commits@airavata.apache.org>
List-Id: <commits.airavata.apache.org>
Reply-To: dev@airavata.apache.org
Delivered-To: mailing list commits@airavata.apache.org
Received: (qmail 11451 invoked by uid 99); 11 Sep 2018 17:11:51 -0000
Received: from ec2-52-202-80-70.compute-1.amazonaws.com (HELO gitbox.apache.org) (52.202.80.70)
    by apache.org (qpsmtpd/0.29) with ESMTP; Tue, 11 Sep 2018 17:11:51 +0000
Received: by gitbox.apache.org (ASF Mail Server at gitbox.apache.org, from userid 33)
	id 5A592888ED; Tue, 11 Sep 2018 17:11:50 +0000 (UTC)
Date: Tue, 11 Sep 2018 17:12:10 +0000
To: "commits@airavata.apache.org" <commits@airavata.apache.org>
Subject: [airavata-django-portal] 22/28: AIRAVATA-2876 Standardized layout
 of app catalog
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 8bit
From: machristie@apache.org
In-Reply-To: <153668590887.15890.5680040936279183025@gitbox.apache.org>
References: <153668590887.15890.5680040936279183025@gitbox.apache.org>
X-Git-Host: gitbox.apache.org
X-Git-Repo: airavata-django-portal
X-Git-Refname: refs/heads/master
X-Git-Reftype: branch
X-Git-Rev: c421e6220ea19333e8753e4f5b89d784e877b908
X-Git-NotificationType: diff
X-Git-Multimail-Version: 1.5.dev
Auto-Submitted: auto-generated
Message-Id: <20180911171150.5A592888ED@gitbox.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 c421e6220ea19333e8753e4f5b89d784e877b908
Author: Marcus Christie <machrist@iu.edu>
AuthorDate: Thu Sep 6 11:48:38 2018 -0400

    AIRAVATA-2876 Standardized layout of app catalog
---
 .../dashboards/ApplicationsDashboard.vue           | 147 +++++++--------------
 .../static/common/js/layouts/ListLayout.vue        | 132 +++++++++---------
 2 files changed, 116 insertions(+), 163 deletions(-)

diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/dashboards/ApplicationsDashboard.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/dashboards/ApplicationsDashboard.vue
index be75406..cd8a58e 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/dashboards/ApplicationsDashboard.vue
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/dashboards/ApplicationsDashboard.vue
@@ -1,113 +1,58 @@
 <template>
-  <div class="new_app">
-    <div class="new_app_header">
-      <h4 style="display: inline-block">Application Catalog</h4>
-      <label v-on:click="newApplicationHandler()">New Application <span>+</span></label>
-    </div>
-    <div class="applications">
-      <h6 style="color: #666666;">APPLICATIONS</h6>
-      <div class="container-fluid">
-        <div class="row">
-            <application-card v-for="item in sortedModules" v-bind:app-module="item"
-                v-bind:key="item.appModuleId" v-on:app-selected="clickHandler(item)">
-            </application-card>
-        </div>
+  <list-layout @add-new-item="newApplicationHandler" :items="sortedModules" title="Application Catalog" subtitle="Applications"
+    new-item-button-text="New Application">
+    <template slot="item-list" slot-scope="slotProps">
+
+      <div class="row">
+        <application-card v-for="item in slotProps.items" v-bind:app-module="item" v-bind:key="item.appModuleId" v-on:app-selected="clickHandler(item)">
+        </application-card>
       </div>
-    </div>
-  </div>
+    </template>
+  </list-layout>
 </template>
 <script>
-  import NewApplication from '../admin/NewApplication.vue'
-  import Loading from '../Loading.vue'
-
-  import {mapActions, mapState} from 'vuex'
+import { mapActions, mapState } from "vuex";
 
-  import { components as comps } from 'django-airavata-common-ui'
+import { layouts, components as comps } from "django-airavata-common-ui";
 
-  import { utils } from 'django-airavata-api'
+import { utils } from "django-airavata-api";
 
-  export default {
-    components:{
-      NewApplication, Loading,
-      'application-card': comps.ApplicationCard,
-    },
-    mounted:function () {
-      if (!this.modules) {
-        this.loadApplications();
+export default {
+  components: {
+    "application-card": comps.ApplicationCard,
+    "list-layout": layouts.ListLayout
+  },
+  mounted: function() {
+    if (!this.modules) {
+      this.loadApplications();
+    }
+  },
+  computed: {
+    ...mapState("applications/modules", ["modules"]),
+    sortedModules() {
+      if (this.modules) {
+        return utils.StringUtils.sortIgnoreCase(
+          this.modules.slice(),
+          a => a.appModuleName
+        );
+      } else {
+        return [];
       }
+    }
+  },
+  methods: {
+    clickHandler: function(item) {
+      this.$router.push({
+        name: "application_module",
+        params: { id: item.appModuleId }
+      });
     },
-    computed: {
-      ...mapState('applications/modules', ['modules']),
-      sortedModules() {
-        if (this.modules) {
-          return utils.StringUtils.sortIgnoreCase(this.modules.slice(), a => a.appModuleName);
-        } else {
-          return [];
-        }
-      }
+    newApplicationHandler: function() {
+      this.$router.push({ name: "new_application_module" });
     },
-    methods:{
-      clickHandler: function (item) {
-        this.setTitle("Edit Application")
-        this.resetApplication()
-        this.setModule(item)
-        this.$router.push({name: 'application_module', params: {id: item.appModuleId}})
-      },
-      resetApplication:function () {
-        console.log("Resetting")
-        this.restInterface()
-        this.resetDetails()
-        this.resetDeployment()
-      },
-      newApplicationHandler:function () {
-        this.setTitle('Create New Application')
-        this.resetApplication()
-        this.$router.push({name: 'new_application_module'})
-      }
-      ,
-      ...mapActions({loadApplications: 'applications/modules/loadApplicationModules', setModule:'newApplication/setModule',setTitle:'newApplication/setTitle',restInterface:'newApplication/appInterfaceTab/resetState',resetDetails:'newApplication/appDetailsTab/resetState',resetDeployment:'newApplication/appDeploymentsTab/resetState'}),
-    }
+    ...mapActions({
+      loadApplications: "applications/modules/loadApplicationModules"
+    })
   }
+};
 </script>
-<style scoped>
-  .new_app {
-    margin: 45px;
-    width: 100%;
-    background-color: #f7f7f7;
-  }
-
-  .new_app_header{
-    width: 100%;
-    display: inline;
-  }
-
-  .new_app_header label{
-    background-color: #2e73bc;
-    color: white;
-    border: solid #2e73bc 1px ;
-    border-radius: 3px;
-    float: right;
-    padding-right: 15px;
-    padding-left: 15px;
-    padding-bottom: 8px;
-    padding-top: 3px;
-    text-align: center;
-  }
-
-  .new_app_header label:hover{
-    cursor: pointer;
-  }
-
-  .new_app_header label span{
-    font-weight: 900;
-    font-size: 25px;
-  }
-
-  .applications{
-    margin-top: 50px;
-  }
-
-  .ssh,.generate input{
-      text-align: center;
-  }
-</style>
diff --git a/django_airavata/static/common/js/layouts/ListLayout.vue b/django_airavata/static/common/js/layouts/ListLayout.vue
index a947934..3a28b7d 100644
--- a/django_airavata/static/common/js/layouts/ListLayout.vue
+++ b/django_airavata/static/common/js/layouts/ListLayout.vue
@@ -1,74 +1,82 @@
 <template>
-    <div>
-        <div class="row">
-            <div class="col">
-                <slot name="title">
-                    <h1 class="h4 mb-4">{{ title }}</h1>
-                </slot>
-            </div>
-            <div class="col d-flex justify-content-end align-items-baseline">
-                <slot name="new-item-button">
-                    <b-btn variant="primary" @click="addNewItem">
-                        {{ newItemButtonText }} <i class="fa fa-plus" aria-hidden="true"></i>
-                    </b-btn>
-                </slot>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col">
-                <div class="card">
-                    <div class="card-body">
-                        <slot name="item-list" :items="itemsList">Item List goes here</slot>
-                        <pager v-if="itemsPaginator" :paginator="itemsPaginator"
-                        next="nextItems" v-on:previous="previousItems"></pager>
-                    </div>
-                </div>
-            </div>
-        </div>
+  <div>
+    <div class="row">
+      <div class="col-auto mr-auto">
+        <slot name="title">
+          <h1 class="h4 mb-4">{{ title }}</h1>
+        </slot>
+      </div>
+      <div class="col-auto">
+        <slot name="new-item-button">
+          <b-btn variant="primary" @click="addNewItem">
+            {{ newItemButtonText }}
+            <i class="fa fa-plus" aria-hidden="true"></i>
+          </b-btn>
+        </slot>
+      </div>
     </div>
+    <div v-if="subtitle" class="row">
+      <div class="col">
+        <h2 class="subtitle text-uppercase text-muted">{{ subtitle }}</h2>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <slot name="item-list" :items="itemsList">Item List goes here</slot>
+        <pager v-if="itemsPaginator" :paginator="itemsPaginator" next="nextItems" v-on:previous="previousItems"></pager>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-
-import { utils } from 'django-airavata-api'
-import Pager from '../components/Pager.vue'
+import { utils } from "django-airavata-api";
+import Pager from "../components/Pager.vue";
 
 export default {
-    props: {
-        items: Array,
-        itemsPaginator: utils.PaginationIterator,
-        title: {
-            type: String,
-            default: "Items"
-        },
-        newItemButtonText: {
-            type: String,
-            default: "New Item",
-        },
+  props: {
+    items: Array,
+    itemsPaginator: utils.PaginationIterator,
+    title: {
+      type: String,
+      default: "Items"
     },
-    name: 'list-layout',
-    data () {
-        return {
-        }
+    subtitle: {
+      type: String
     },
-    components: {
-        'pager': Pager,
+    newItemButtonText: {
+      type: String,
+      default: "New Item"
+    }
+  },
+  name: "list-layout",
+  data() {
+    return {};
+  },
+  components: {
+    pager: Pager
+  },
+  methods: {
+    nextItems: function(event) {
+      this.itemsPaginator.next();
     },
-    methods: {
-        nextItems: function(event) {
-            this.itemsPaginator.next();
-        },
-        previousItems: function(event) {
-            this.itemsPaginator.previous();
-        },
-        addNewItem: function() {
-            this.$emit('add-new-item');
-        },
-    },
-    computed: {
-        itemsList: function() {
-            return this.itemsPaginator ? this.itemsPaginator.results : this.items;
-        },
+    previousItems: function(event) {
+      this.itemsPaginator.previous();
     },
+    addNewItem: function() {
+      this.$emit("add-new-item");
+    }
+  },
+  computed: {
+    itemsList: function() {
+      return this.itemsPaginator ? this.itemsPaginator.results : this.items;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.subtitle {
+  font-size: 14px;
 }
-</script>
\ No newline at end of file
+</style>