You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airavata.apache.org by ma...@apache.org on 2018/09/11 17:12:10 UTC
[airavata-django-portal] 22/28: AIRAVATA-2876 Standardized layout
of app catalog
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 <ma...@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>